/* 4 The Youth unified interface system — loaded last by design. */
:root {
    --forest: #285b47;
    --forest-deep: #214b3b;
    --mint: #6dce91;
    --mint-soft: #e6f5ea;
    --ivory: #f7f4ed;
    --sand: #eee5d4;
    --ink: #202c28;
    --muted: #60706a;
    --line: #dce4df;
    --radius-sm: 14px;
    --radius-md: 22px;
    --shadow-soft: 0 18px 50px rgba(32, 75, 59, .09);
    --shell: min(1180px, calc(100% - 48px));
}

body { color: var(--ink); font-size: 17px; line-height: 1.65; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: clamp(3rem, 5.7vw, 5.3rem); line-height: 1.02; }
h2 { font-size: clamp(2.25rem, 4vw, 3.8rem); line-height: 1.06; }
h3 { line-height: 1.18; }
.eyebrow { margin-bottom: 18px; color: #347455; font-size: .76rem; letter-spacing: .17em; }

.site-header { position: relative; border-bottom: 1px solid var(--line); background: rgba(247,244,237,.97); color: var(--ink); }
.header-inner { min-height: 92px; gap: 30px; }
.brand { flex: 0 0 190px; width: 190px; }
.brand img { filter: none; }
.primary-nav { margin-left: auto; gap: 26px; }
.primary-nav ul { gap: 25px; }
.primary-nav a { white-space: nowrap; }
.primary-nav > .button { min-height: 46px; padding: 10px 20px; }
.menu-toggle span:not(.screen-reader-text) { background: var(--forest); }
.primary-nav ul a:hover { color: var(--forest); }
body.fourty-about-page .site-header { background: rgba(247,244,237,.97); }
body.fourty-therapy-page .site-header { color: #fff; }
body.fourty-therapy-page .menu-toggle span:not(.screen-reader-text) { background: #fff; }

.foster-main, .therapy-main, .about-main { --muted: #5c6a64; }

.button { min-height: 50px; padding: 12px 22px; border: 2px solid var(--mint); background: var(--mint); color: #173029; font-size: .95rem; font-weight: 800; }
.button:hover { background: #7bd79b; filter: none; }
.button-dark { border-color: var(--forest); background: var(--forest); color: #fff; }
.button-dark:hover { background: var(--forest-deep); }
.reference-hero .button-outline, .therapy-hero .button-outline { border-color: var(--forest); background: transparent; color: var(--forest); }
.reference-hero .button-outline:hover, .therapy-hero .button-outline:hover { background: var(--mint-soft); }
.text-link { color: var(--forest); }

#start, #therapy-inquiry, #therapists, #therapy-team, #contact-form { scroll-margin-top: 48px; }
.anchor-alias { display: block; height: 0; }

/* Canonical hero pattern, based on the Outpatient Therapy page. */
.reference-hero { position: relative; overflow: hidden; padding: 76px 0; background: #edf7ef; }
.reference-hero::after { content: none; }
.reference-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; gap: 80px; align-items: center; }
.reference-hero h1 { max-width: 650px; }
.reference-hero-lede { max-width: 650px; color: #4e625b; font-size: clamp(1.1rem, 1.8vw, 1.28rem); }
.reference-hero-note { margin: 18px 0 0; color: var(--muted); font-size: .88rem; }
.reference-hero-image { position: relative; min-height: 670px; overflow: hidden; border: 8px solid #fff; border-radius: 28px; background-position: center; background-size: cover; box-shadow: var(--shadow-soft); }
.reference-hero-image span { position: absolute; right: 18px; bottom: 18px; left: 18px; padding: 15px 18px; border-radius: 13px; background: rgba(33,75,59,.9); color: #fff; font-weight: 800; }
.home-reference-image { background-image: url('/wp-content/uploads/2020/06/family-hike.jpg'); background-position: center 42%; }
.foster-reference-image { background-image: url('/wp-content/uploads/2020/08/foster-parent.jpg'); background-position: center 35%; }
.about-reference-image { background-image: url('../images/about-community-hero-v2.jpg'); background-position: center 45%; }
.reference-hero-panel { padding: 48px; border: 1px solid #cfe5d6; border-radius: 28px; background: #fff; box-shadow: var(--shadow-soft); }
.reference-hero-panel h2 { font-size: clamp(2.1rem, 3.4vw, 3.2rem); }
.reference-hero-panel p:last-child { margin: 18px 0 0; color: var(--muted); }
.reference-phone { display: inline-block; color: var(--forest); font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 900; text-decoration: none; }

/* Expandable topic cards use the same progressive-disclosure language as the
   therapist profiles: scan the title first, reveal detail only when wanted. */
.therapy-topic-card { overflow: hidden; align-self: start; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-soft); }
.therapy-topic-grid { align-items: start; }
.therapy-topic-card summary { position: relative; min-height: 150px; padding: 28px 62px 28px 30px; cursor: pointer; list-style: none; }
.therapy-topic-card summary::-webkit-details-marker { display: none; }
.therapy-topic-card summary::after { content: '+'; position: absolute; right: 28px; top: 50%; color: var(--forest); font-size: 1.7rem; font-weight: 500; transform: translateY(-50%); }
.therapy-topic-card[open] summary::after { content: '−'; }
.therapy-topic-card summary span { display: block; margin: 0 0 25px; color: #347455; font-size: .72rem; font-weight: 900; letter-spacing: .13em; }
.therapy-topic-card summary h3 { margin: 0; font-size: clamp(1.4rem, 1.75vw, 1.7rem); }
.therapy-topic-definition { margin: 0 30px; padding: 20px 0 26px; border-top: 1px solid var(--line); }
.therapy-topic-definition p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }

/* About-page closing invitation follows the therapy page's balanced form/CTA
   composition instead of becoming a full-bleed mint billboard. */
.about-difference { padding: 96px 0; background: var(--sand); }
.about-difference-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; }
.about-difference-grid > div:first-child > p:not(.eyebrow) { max-width: 560px; color: var(--muted); font-size: 1.05rem; }
.about-difference-grid h2 { font-size: clamp(2.8rem, 5vw, 4.8rem); }
.about-difference-card { padding: 42px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-soft); }
.about-difference-card h3 { font-size: clamp(1.7rem, 2.6vw, 2.5rem); }
.about-difference .button-row { justify-content: flex-start; }
.about-difference .button { border-color: var(--mint); background: var(--mint); color: #173029; }
.about-difference .button-dark { border-color: var(--forest); background: var(--forest); color: #fff; }

/* Foster journey: connected milestones communicate sequence more clearly than
   four equal-height cards with numbers floating in their corners. */
.foster-steps { position: relative; gap: 24px; }
.foster-steps::before { content: ''; position: absolute; top: 29px; right: 7%; left: 7%; height: 2px; background: #b9d7c4; }
.foster-steps li { position: relative; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.foster-steps li > span { position: relative; z-index: 1; display: grid; width: 58px; height: 58px; margin: 0 0 24px; place-items: center; border: 6px solid var(--ivory); border-radius: 50%; background: var(--forest); color: #fff; font-size: .78rem; letter-spacing: .08em; }
.foster-steps li > div { min-height: 195px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-soft); }
.foster-steps h3 { margin-bottom: 10px; font-size: 1.45rem; }
.foster-steps p { font-size: .9rem; line-height: 1.55; }

.foster-story { background: #fff; }
.foster-story-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 76px; align-items: center; }
.foster-story-grid > div:first-child > p:not(.eyebrow) { color: var(--muted); font-size: 1.04rem; }
.foster-story-note { margin-top: 24px; font-size: .84rem !important; }
.foster-video-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border: 8px solid #fff; border-radius: 26px; background: var(--forest-deep); box-shadow: var(--shadow-soft); }
.foster-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Short forest pathway strips mirror the therapy page's information band. */
.trust-strip, .foster-truth, .about-milestone, .therapy-paths { border: 0; background: #d9efdf; color: var(--ink); }
.trust-grid p, .foster-truth p, .about-milestone-grid div, .therapy-path-grid div { border-color: rgba(40,91,71,.16); }
.trust-grid span, .foster-truth span, .about-milestone-grid span, .therapy-path-grid span { color: var(--muted); }

.section { padding: 96px 0; }
.section-heading { margin-bottom: 44px; }
.service-card, .therapy-topic-grid article, .about-values-grid article, .therapy-form-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}
.service-card { box-shadow: var(--shadow-soft); }
.service-content { padding: 34px; }
.process-section, .therapy-needs { background: var(--ivory); }
.final-cta, .therapy-inquiry, .foster-start { background: var(--sand); }
.quote-section, .foster-quote { background: var(--mint); }

.site-footer { position: relative; min-height: 470px; padding: 72px 0 24px; overflow: hidden; background: #f7f5ef url('/wp-content/uploads/2020/08/mountain-bg2.jpg') center bottom / cover no-repeat; color: var(--ink); }
.site-footer::before { position: absolute; inset: 0; background: rgba(247,245,239,.56); content: ''; pointer-events: none; }
.footer-grid { gap: 72px; }
.footer-grid, .footer-bottom { position: relative; z-index: 1; }
.footer-grid h2 { margin-bottom: 16px; color: var(--forest); }
.footer-grid p, .footer-bottom { color: #58685f; }
.site-footer .footer-slogan { color: var(--forest) !important; }
.footer-logo { filter: none; }
.footer-grid a:hover { color: var(--forest); }
.footer-grid .text-link { color: var(--forest); }
.footer-social { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-social a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; border: 1px solid rgba(40,91,71,.35); border-radius: 999px; color: var(--forest); font-weight: 700; text-decoration: none; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.footer-social a:hover, .footer-social a:focus-visible { border-color: var(--forest); background: var(--mint); color: var(--forest-deep); }
.footer-social svg { width: 19px; height: 19px; fill: currentColor; flex: 0 0 auto; }

/* Contact page */
.contact-section { background: var(--ivory); }
.contact-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 72px; align-items: start; }
.contact-copy > p:not(.eyebrow) { color: var(--muted); font-size: 1.06rem; }
.contact-options { margin: 30px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.contact-options li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-options strong { display: block; margin-bottom: 2px; color: var(--ink); }
.contact-options a { color: var(--forest); font-weight: 800; }
.contact-form-card { padding: 40px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-soft); }
.contact-form-card h2 { font-size: clamp(2rem, 3.2vw, 3rem); }
.contact-form-card .gform_wrapper input:not([type=submit]), .contact-form-card .gform_wrapper textarea, .contact-form-card .gform_wrapper select { width: 100%; min-height: 50px; padding: 11px 13px !important; border: 1px solid #b9c7c1 !important; border-radius: 9px !important; background: #fff; }
.contact-form-card .gform_wrapper label { color: var(--ink); font-weight: 700; }
.contact-form-card .gform_wrapper input[type=submit] { min-height: 50px; padding: 12px 23px !important; border: 2px solid var(--mint) !important; border-radius: 999px !important; background: var(--mint) !important; color: #173029 !important; font-weight: 800 !important; }
.contact-assurance { margin-top: 18px; color: var(--muted); font-size: .84rem; }

@media (max-width: 1040px) {
    .header-inner { min-height: 82px; }
    .brand { flex-basis: 170px; width: 170px; }
    .primary-nav, .primary-nav ul { gap: 17px; }
    .primary-nav a { font-size: .86rem; }
    .primary-nav > .button { padding-inline: 16px; }
}

@media (max-width: 900px) {
    :root { --shell: min(100% - 36px, 680px); }
    .menu-toggle { display: grid; }
    .primary-nav { top: 82px; margin-left: 0; padding: 24px max(18px, calc((100% - 680px)/2)); background: var(--forest-deep); color: #fff; }
    .primary-nav.is-open { display: block; }
    .primary-nav ul { gap: 0; margin-bottom: 18px; }
    .primary-nav ul li { border-bottom: 1px solid rgba(255,255,255,.14); }
    .primary-nav ul a { display: block; padding: 12px 0; font-size: 1rem; }
    .primary-nav > .button { width: auto; }
    .section { padding: 76px 0; }
    .reference-hero { padding: 76px 0; }
    .reference-hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .reference-hero-image { min-height: 520px; max-width: 640px; }
    .about-difference-grid { grid-template-columns: 1fr; gap: 42px; }
    .foster-story-grid { grid-template-columns: 1fr; gap: 42px; }
    .foster-steps { grid-template-columns: 1fr 1fr; }
    .foster-steps::before { content: none; }
    .foster-steps li > div { min-height: 175px; }
    .contact-grid { grid-template-columns: 1fr; gap: 45px; }
    .footer-grid { gap: 48px; }
}

@media (max-width: 600px) {
    :root { --shell: calc(100% - 28px); }
    body { font-size: 16px; }
    h1 { font-size: clamp(2.65rem, 12.5vw, 4rem); }
    h2 { font-size: clamp(2.1rem, 9vw, 3.2rem); }
    .header-inner { min-height: 76px; }
    .brand { flex-basis: 160px; width: 160px; }
    .primary-nav { top: 76px; }
    .section { padding: 66px 0; }
    .reference-hero { padding: 60px 0; }
    .reference-hero-grid { gap: 36px; }
    .reference-hero-image { min-height: 420px; border-width: 6px; border-radius: 22px; }
    .reference-hero-panel { padding: 28px; border-radius: 22px; }
    .button-row { gap: 10px; }
    .button { width: 100%; }
    .service-content, .contact-form-card { padding: 26px; }
    .footer-grid { gap: 38px; }
    .footer-bottom { align-items: start; }
    .therapy-topic-grid { grid-template-columns: 1fr; }
    .therapy-topic-card summary { min-height: 0; padding: 24px 58px 24px 24px; }
    .therapy-topic-card summary span { margin-bottom: 18px; }
    .therapy-topic-definition { margin-inline: 24px; }
    .about-difference, .about-difference-card { padding: 66px 0; }
    .about-difference-card { padding: 26px; }
    .foster-steps { grid-template-columns: 1fr; gap: 18px; }
    .foster-steps li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; }
    .foster-steps li > span { width: 52px; height: 52px; margin: 7px 0 0; border-width: 5px; }
    .foster-steps li > div { min-height: 0; padding: 22px; }
    .foster-video-frame { border-width: 5px; border-radius: 20px; }
}