/* Custom styles for Mid-Missouri Supported Living */

/* ============================================================
   SPACING
   ============================================================ */
.about-1-section.pt-0 {
    padding-top: 120px !important;
}
.service-6-section {
    padding-top: 120px;
}

/* ============================================================
   BRAND COLOR CORRECTIONS
   ============================================================ */

/* About section — bullet dots → bright green */
ul.about-1-list li:before {
    background: var(--theme-color) !important;
}

/* Services tab — checkmark strokes → bright green */
ul.service-6-list li:before,
ul.service-6-list li:after {
    background: var(--theme-color) !important;
}

/* Services tab — active indicator arrow → bright green */
.service-6-tab-title:before {
    background: var(--theme-color) !important;
}

/* ============================================================
   SERVICES TABS — ALLOW TAB NAMES TO WRAP ONTO 2 LINES
   ============================================================ */
.service-6-tab-title {
    font-size: 16px;
    white-space: normal;
    line-height: 1.3;
    padding: 22px 10px;
    word-break: break-word;
}

/* ============================================================
   WHY CHOOSE US — CIRCLE COLORS → GREEN SHADES
   ============================================================ */
.why-chooseus-1-count {
    background: var(--theme-color) !important;         /* #1 bright green */
}
.why-chooseus-1-block:nth-child(2) .why-chooseus-1-count {
    background: var(--theme-color-dark) !important;    /* #2 dark green */
}
.why-chooseus-1-block:nth-child(3) .why-chooseus-1-count {
    background: #2e7d52 !important;                    /* #3 mid green */
}

/* ============================================================
   ABOUT PAGE — TEAM SECTION SPACING
   ============================================================ */

/* Less space between photo and name */
.team-2-image-wrap {
    margin-bottom: 8px !important;
}

/* More bottom spacing on each card so "Read Bio" doesn't crowd the row below */
.team-2-block {
    margin-bottom: 60px;
}

/* ============================================================
   SERVICE DETAIL — SIDEBAR "ALL SERVICES" WIDGET — COMPACT
   ============================================================ */

/* Reduce box padding (default: 40px) */
.category-widget {
    padding: 22px !important;
    margin-bottom: 25px !important;
}

/* Smaller title (default: 28px) */
h4.category-widget-title {
    font-size: 18px !important;
    margin-bottom: 14px !important;
}

/* Tighter gap between items (default: 9px) */
ul.category-widget-list li {
    margin-bottom: 5px !important;
}

/* Compact link buttons — tight padding, one line, ellipsis on overflow */
ul.category-widget-list a {
    font-size: 13px !important;
    padding: 8px 38px 8px 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Smaller arrow icon circle to match reduced font size */
ul.category-widget-list a i {
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    font-size: 10px !important;
    top: 12px !important;
    right: 10px !important;
}

/* ============================================================
   SERVICES PAGE — CARD INTRO TEXT — 4 LINE CLAMP
   ============================================================ */
.service-2-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   FOOTER TOP BAR — GREEN TINT BACKGROUND + VISIBLE SOCIAL ICONS
   ============================================================ */
.footer-1-top {
    background: #2e7d52 !important;
  padding: 20px 0;
    /* CDGEDIT  border-top: 1px solid #196633 !important; */
}
.footer-1-social-icon a {
    background: #196633 !important;
    color: #fff !important;
}


/* ============================================================
   POLICIES PAGE — document group cards + download rows
   ============================================================ */
.policies-docs-section {
    padding: 0 0 80px;
}
.policy-group {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}
.policy-group-header {
    background: #196633;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.policy-doc-list {
    padding: 6px 0;
}
.policy-doc-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.policy-doc-item:last-child {
    border-bottom: none;
}
.policy-doc-icon {
    font-size: 28px;
    color: #c0392b;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}
.policy-doc-item--empty .policy-doc-icon {
    color: #999;
}
.policy-doc-info {
    flex: 1;
    min-width: 0;
}
.policy-doc-title {
    font-weight: 600;
    font-size: 15px;
    color: #222;
    line-height: 1.3;
}
.policy-doc-date {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}
.policy-doc-item--empty .policy-doc-title {
    color: #999;
    font-weight: 400;
    font-style: italic;
}
.policy-doc-btn {
    flex-shrink: 0;
    background: #3AB34A;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
    white-space: nowrap;
}
.policy-doc-btn:hover {
    background: #196633;
    color: #fff !important;
}

/* ============================================================
   FAQ ACCORDION — wrap long questions flush with text start
   ============================================================ */
.accordion-box .block .acc-btn {
    display: flex;
    align-items: flex-start;
}
.accordion-box .block .icon-outer {
    flex-shrink: 0;
}

/* ============================================================
   D14 2026-10-09: page-change preloader removed per customer (M-G1:
   "three column transitions when changing pages"). Theme markup and
   script.js untouched; delete this block to restore.
   ============================================================ */
.loader-wrap {
    display: none !important;
}

/* ============================================================
   D10 2026-10-12: footer map column (M-N2). The embed is stored in
   company_information.google_map_embed and printed by incl.php.
   ============================================================ */
.footer-map iframe {
    display: block;
    width: 100%;
    height: 260px;
    border: 0;
    border-radius: 6px;
}
@media (max-width: 991px) {
    .footer-map {
        margin-top: 30px;
    }
}

/* ============================================================
   D11 2026-10-12: six top-nav items (Employee Resources added) wrap to
   two rows between the theme's 1200px hamburger breakpoint and ~1280px.
   Tighten spacing and step the font down one pixel in that band only.
   ============================================================ */
@media (min-width: 1201px) and (max-width: 1365px) {
    .main-header .main-menu .navigation > li {
        margin-right: 16px;
    }
    .main-header .main-menu .navigation > li:last-child {
        margin-right: 0;
    }
    .main-header .main-menu .navigation > li > a {
        font-size: 16px;
    }
}

/* ============================================================
   D10.1 2026-10-12: footer contact list hanging indent (Clay). Wrapped
   and second lines sit under the text, not under the icon. The address
   uses two block spans because the theme hides <br> below 768px.
   ============================================================ */
.contact-widget-1-list li {
    display: flex;
    align-items: baseline;
}
.contact-widget-1-list li > i {
    flex: none;
}
.contact-widget-1-list .contact-text > span {
    display: block;
}

/* ============================================================
   D11.1 2026-10-12: homepage banner headings. Orphan control by
   text-wrap: balance instead of a non-breaking space, because the
   banner content box (display: table) widens to fit its longest
   unbreakable run and the slider clips the overflow on phones.
   ============================================================ */
.banner-section .content-box h1,
.banner-section .content-box h2 {
    text-wrap: balance;
}

/* ============================================================
   D10.2 2026-10-12: footer columns 3 / 4 / 5 between 992 and 1199px.
   At 3 / 3 / 6 the Contact column is too narrow for
   "midmosupportedliving.com" even after the <wbr> wrap in incl.php,
   so the email ran into the map. Wider screens and phones unchanged.
   ============================================================ */
@media (min-width: 992px) and (max-width: 1199px) {
    .footer-1-middle .row > .col-lg-3:nth-child(2) {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        width: 33.333333%;
    }
    .footer-1-middle .row > .col-lg-6 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
        width: 41.666667%;
    }
}

/* ============================================================
   D12 2026-10-12: Employee Resources page (/staff-resources/).
   Phones: policy rows put the Download button under the text,
   lined up with it (beside it, the summaries were squeezed to
   ~145px). Help notice: wrapped lines sit under the text, not
   under the icon (same method as D10.1).
   ============================================================ */
@media (max-width: 575px) {
    .policy-doc-item {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .policy-doc-info {
        flex: 1 1 calc(100% - 50px);
    }
    .policy-doc-btn {
        margin-left: 50px;
    }
}
.sr-notice {
    display: flex;
    align-items: baseline;
}
.sr-notice > i {
    flex: none;
}
.sr-card p {
    text-wrap: pretty;
}
/* ============================================================
   D16 (2026-10-12): orphan guard, sitewide. Headings balance their
   lines; body text avoids a lone last word. Non-breaking spaces in
   the CMS copy handle the rest.
   ============================================================ */
h1, h2, h3, h4, h5 {
    text-wrap: balance;
}
p, li, blockquote, figcaption {
    text-wrap: pretty;
}
/* ============================================================
   D16 (2026-10-12): phone clipping at 360 px. The page title's long
   words ("Individualized") ran past the screen edge at 50 px, and
   the sidebar email ran past its box. Scale both with the screen.
   ============================================================ */
@media (max-width: 575px) {
    .bredcrumb-list {
        flex-wrap: wrap;
    }
    ul.category-widget-list a {
        white-space: normal !important;
        text-overflow: clip !important;
    }
    .page-title h1 {
        font-size: clamp(32px, 11vw, 50px);
    }
    .contact-widget-mail {
        font-size: clamp(12px, 4vw, 16px);
    }
}
@media (max-width: 399px) {
    .banner-section.style-three .banner-slider-2 .content-box h1 {
        font-size: clamp(30px, 11vw, 48px);
    }
    .section_heading_title_big {
        font-size: clamp(28px, 10.5vw, 40px);
    }
}
/* D16 (2026-10-12): the theme's vertical "Go To Top" bar sits over the
   text column below 1440 px: the page margin there is ~15 px and the bar is
   28 px wide (measured: text under it on 7 of 8 pages at 992-1280). */
@media (max-width: 1439px) {
    .scroll-to-top {
        display: none !important;
    }
}
/* D16: from 1440 px up, slide the rotated bar into the side margin (its
   centre sat 80 px in from the edge, over the content column). */
@media (min-width: 1440px) {
    .scroll-to-top {
        right: -50px;
    }
}
/* D16 (2026-10-12): buttons only - white text on the brand green #3AB34A
   is 2.72:1. #2C8738 is the lightest same-hue green that reaches 4.5:1
   (4.54:1). Section backgrounds and badges keep #3AB34A. */
.btn-1,
a.sr-btn:not(.disabled),
.policy-doc-btn,
ul.category-widget-list .active a,
ul.category-widget-list a:hover,
.btn-1.btn-alt span {
    background-color: #2C8738;
}
/* D17 (2026-10-28): Policies list laid out like PHC's policies page -
   two-column cards (one column on phones): PDF icon, title, summary,
   then a small "Download PDF" text link. Category bars stay. */
.policy-group {
    border: 0;
    border-radius: 0;
    overflow: visible;
}
.policy-group-header {
    border-radius: 8px;
    margin-bottom: 16px;
}
.policy-doc-list {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.policy-doc-item,
.policy-doc-item:last-child {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    padding: 18px 20px;
    align-items: flex-start;
    flex-wrap: nowrap;
}
.policy-doc-icon {
    font-size: 24px;
    color: #2C8738;
    width: 30px;
}
.policy-doc-info {
    flex: 1 1 auto;
}
.policy-doc-summary {
    font-size: 14px;
    line-height: 1.55;
    color: #444;
    margin-top: 6px;
}
.policy-doc-btn,
.policy-doc-btn:hover {
    background: none !important;
    padding: 0;
    margin: 10px 0 0;
    display: inline-flex;
    font-size: 13px;
    color: #196633 !important;
}
.policy-doc-btn:hover {
    color: #2C8738 !important;
    text-decoration: underline;
}
.policy-doc-btn--missing,
.policy-doc-btn--missing:hover {
    color: #777 !important;
    text-decoration: none;
}
@media (max-width: 767px) {
    .policy-doc-list {
        grid-template-columns: 1fr;
    }
}
.policy-doc-title {
    text-wrap: balance;
}
.policy-doc-summary {
    text-wrap: pretty;
}

/* 2026-11-02: homepage slides after the first print their heading as <h2 class="h1">
   (one H1 per page). These rules give it the same look and fade-in as the slide H1. */
.banner-section .content-box h2.h1 {
    color: #196633;
    font-size: 60px;
    text-transform: capitalize;
    opacity: 0;
    visibility: hidden;
    transition: all 1500ms ease;
    transform: translateY(-20px);
    margin-bottom: 20px;
    line-height: 1.2;
}
.banner-section .swiper-slide-active .content-box h2.h1 {
    opacity: 1;
    visibility: visible;
    transition-delay: 800ms;
    transform: translateY(0px);
}
@media only screen and (max-width: 991px) {
    .banner-section.style-three .content-box h2.h1 {
        font-size: 3rem;
    }
}
@media (max-width: 399px) {
    .banner-section.style-three .banner-slider-2 .content-box h2.h1 {
        font-size: clamp(30px, 11vw, 48px);
    }
}