/* ===== Brand Tokens ===== */
:root{
  --bg:#f4f6f3;        /* page background */
  --ink:#1f2b24;       /* primary text */
  --leaf:#497752;      /* brand green */
  --leaf-contrast:#ffffff;
  --line:#dfe7e2;      /* subtle borders */
  --accent:#e88c4c;    /* warm accent */

  --gold:#d6b973;      /* shared header stripe */

  /* ===== Global layout tokens ===== */
  --page-max: 1120px;
  --gutter: clamp(16px, 4vw, 28px);
  --gutter-tight: clamp(12px, 3.2vw, 22px);
}

/* ===== Reset / Base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{font-size:16px}
body{
  background:var(--bg);
  color:var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.6;
}
a{color:var(--leaf); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--leaf); outline-offset:2px}

/* Screen-reader helper */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== Typography ===== */
h1,h2,h3,h4{
  font-family:"Nunito Sans", Inter, ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing:.2px;
  margin:0 0 .5rem;
}
p{margin:.5rem 0 1rem}
.small{font-size:.95rem; color:#4f5d56}

/* ===== Layout ===== */
.container{
  max-width: var(--page-max);
  margin-inline:auto;
  padding-inline:
    max(var(--gutter), env(safe-area-inset-left))
    max(var(--gutter), env(safe-area-inset-right));
}

.content,
.form-embed{
  max-width: var(--page-max);
  margin-inline:auto;
}

.beta-main .content,
.beta-main .form-embed{
  padding-inline:
    max(var(--gutter), env(safe-area-inset-left))
    max(var(--gutter), env(safe-area-inset-right));
}

.content--narrow{ max-width:68ch; }

/* ===== Header / Nav ===== */
header{
  background:#fff;
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;
  padding-block:var(--gutter-tight);
}
.brand{
  display:flex;align-items:center;gap:.5rem;
  font-weight:800;color:var(--ink);
}
.brand img{height:40px;width:auto;display:block}

.navlinks{ display:flex;align-items:center;gap:0; }
.nav-primary{ display:flex;align-items:center;justify-content:center;gap:0; }
.nav-primary a,
.navlinks > a{
  display:inline-flex;align-items:center;
  color:#4a4a47;
  padding:.5rem 0;
  border-radius:.5rem;
  font-weight:500;
  transition:color .2s ease;
}
.nav-primary a:hover,
.navlinks > a:hover{ color:var(--leaf); text-decoration:none; }

/* Desktop pipes */
@media (min-width:861px){
  .nav-primary a:not(:first-child)::before,
  .navlinks > a:not(:first-child)::before,
  .nav-primary + .nav-contact::before{
    content:"|";
    display:inline-block;
    color:#4a4a47; opacity:.5;
    margin:0 .75rem;
    transform:translateY(.5px);
  }
}

/* Active state */
.navlinks a[aria-current="page"],
.nav-primary a[aria-current="page"]{
  color:var(--leaf);font-weight:800;
}

/* Contact link */
.nav-contact{
  display:inline-flex;align-items:center;
  color:#4a4a47;padding:.5rem 0;font-weight:500;
}
.nav-contact:hover{color:var(--leaf)}

/* Mobile menu */
.nav-toggle{display:none}
@media (max-width:860px){
  .nav{flex-wrap:wrap}
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    padding:.4rem .5rem;border:1px solid var(--line);border-radius:.75rem;
    background:#fff;color:var(--ink);
  }
  .navlinks{
    display:none;flex-direction:column;width:100%;gap:.5rem;
    padding:.5rem 0;
  }
  .navlinks.open{display:flex}
  .nav-primary{flex-direction:column}
  .nav-primary a, .navlinks > a{padding:.6rem 0}
}

/* ===== Main ===== */
main{padding:0 0 3rem}
header + main > :first-child{margin-top:0}

/* ===== Unified Page Header ===== */
.page-header{
  background:var(--leaf);
  color:#fff;
  padding:clamp(2.25rem, 3vw + 1rem, 4rem) 0;
}
.page-header .container{ max-width:var(--page-max); margin-inline:auto; }
.page-header-with-icon{
  display:flex; align-items:center; gap:clamp(12px, 1.5vw, 20px);
  font-family:"Nunito Sans", Inter, system-ui; font-weight:800;
  font-size:clamp(2rem, 2.2vw + 1.2rem, 3rem); line-height:1.15;
  color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.04);
}
.page-icon{ width:clamp(40px, 4.2vw, 56px); height:auto; flex-shrink:0; }
.page-separator{ height:8px; background:var(--gold); }

/* ===== Buttons ===== */
.button{
  display:inline-block;
  padding:.65rem .95rem;
  border-radius:.7rem;
  font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
}
.button.primary{background:var(--leaf);color:#fff}
.button.primary:hover{filter:brightness(1.03)}
.button.secondary{background:#fff;border-color:var(--line);color:var(--ink)}

button,
input[type="submit"],
input[type="button"]{
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  border:1px solid transparent;
  border-radius:.7rem;
}

/* ===== Accordion (global) ===== */
.accordion{display:grid; gap:.5rem}
.accordion-item{ background:#fff;border:1px solid var(--line);border-radius:.75rem; }
.accordion-button{
  width:100%;text-align:left;padding:1rem;
  background:#fff;border:0;
  display:flex;align-items:center;justify-content:flex-start; /* left-align */
  gap:.75rem;
  font-weight:700;cursor:pointer;
  color:#4a4a47; /* requested accordion text color */
}
.accordion-button:hover{background:#f9fbfa}
/* Remove the caret/triangle icon entirely */
.accordion-icon{display:none}
.accordion-panel{padding:0 1rem 1rem; color:#4a4a47}

/* ===== Footer ===== */
footer{background:var(--leaf);color:#fff;margin-top:2rem}
.footer-inner{padding-block:calc(var(--gutter) * 1.25)}
footer ul{list-style:none;margin:0;padding:0}

.footer-social{
  margin:0 0 1.5rem;
  display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;
}
.footer-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:9999px;
  border:1px solid rgba(255,255,255,.35);
  color:#fff;opacity:.95;
}
.footer-social a:hover{
  background:rgba(255,255,255,.1);
  opacity:1;border-color:rgba(255,255,255,.6);
}
.footer-social img{width:22px;height:22px}

.footer-sitemap{margin-top:.25rem}
.footer-sitemap-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 24px;
}
.footer-sitemap-item{ display:flex;flex-direction:column;gap:.25rem; }

.footer-sitemap-item > a{
  color:#fff !important;font-weight:800;
  padding-block:8px;
}
.footer-sitemap-item > a:hover{text-decoration:underline}

.footer-sub{margin:.2rem 0 0}
.footer-sub li{margin:.15rem 0}
.footer-sub a{
  color:#fff !important;opacity:.9;
  font-weight:500;font-size:0.9375rem;
  padding-block:6px;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.25);
  margin-top:1.25rem;padding-top:1rem;
  display:flex;gap:.75rem;flex-wrap:wrap;
  justify-content:space-between;
}
.footer-medical{max-width:60ch;text-align:right;opacity:.95}

/* Mobile footer adjustments */
@media (max-width:860px){
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .footer-medical{text-align:left;margin-left:0}
}
@media (max-width:380px){
  .footer-sitemap-row{grid-template-columns:1fr}
}

/* Desktop footer refinement */
@media (min-width:861px){
  .footer-sitemap-row{ display:flex;flex-wrap:nowrap;column-gap:0; }
  .footer-sitemap-item{ border-left:0;padding-left:0;margin-left:0; }
  .footer-sitemap-item:has(.footer-sub):not(:first-child){
    border-left:1px solid rgba(255,255,255,.5);
    padding-left:1rem;margin-left:1rem;
  }
  .footer-sitemap-item:not(:has(.footer-sub)):not(:first-child){ margin-left:2rem; }
}

/* =======================================================
   CONTACT PAGE (layout, inputs, illustration)
   ======================================================= */

/* Intro aligns with global gutters */
.contact-intro{
  padding-inline:
    max(var(--gutter), env(safe-area-inset-left))
    max(var(--gutter), env(safe-area-inset-right));
}

/* Split grid aligned to same gutters as nav/logo */
.contact-grid{
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline:
    max(var(--gutter), env(safe-area-inset-left))
    max(var(--gutter), env(safe-area-inset-right));
  display:grid;
  grid-template-columns: 1fr;           /* mobile: stacked */
  gap: clamp(18px, 3vw, 28px);
  align-items: stretch;                  /* columns match tallest */
}
@media (min-width:900px){
  .contact-grid{ grid-template-columns: 1fr 1fr; } /* desktop: 50/50 */
}

/* Left column: form */
.contact-form{
  display:grid;
  gap:1rem;
}
.contact-form .field{ display:flex; flex-direction:column; gap:.375rem; }
.contact-form label{
  font-family:"Nunito Sans", Inter, system-ui, sans-serif;
  font-weight:800; font-size:1.05rem; color:var(--ink);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%;
  padding:.85rem .95rem;
  border:1px solid var(--line);
  border-radius:.75rem;
  background:#fff;
  color:var(--ink);
  font:inherit;
  resize:vertical;
  min-height:3rem;
}
.contact-form textarea{ min-height:9rem; }

.contact-actions{ margin-top:.25rem; }
.button{ cursor:pointer; }
.button.primary{
  font-size:1.06rem;
  padding:.85rem 1.25rem;
  border-radius:.9rem;
}

/* Success pill */
.contact-success{
  margin-top:1rem; color:#1f2b24; background:#e9f3ed;
  border:1px solid #d2e7da; border-radius:.5rem; padding:.75rem .9rem;
  display:none;
}

/* Right column: illustration (no box, transparent, height matches form col) */
.contact-art{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:stretch;     /* fill grid row height */
}
.contact-art-image{
  height:100%;            /* match column height */
  width:auto;
  max-width:100%;
  object-fit:contain;
  background:transparent;
}

/* Mobile: image full-width below form */
@media (max-width:899.98px){
  .contact-art-image{
    width:100%;
    height:auto;
  }
}

/* =======================================================
   FAQ PAGE (header match + aligned accordion)
   ======================================================= */
/* Allow either convention in HTML */
.page-header-faq{ background:var(--leaf); color:#fff; padding:clamp(2.25rem, 3vw + 1rem, 4rem) 0; }
.faq-separator{ height:8px; background:var(--gold); }

/* Wraps FAQ blocks to align with nav/logo gutters */
.faq-intro,
.faq-accordion{
  max-width: var(--page-max);
  margin-inline:auto;
  padding-inline:
    max(var(--gutter), env(safe-area-inset-left))
    max(var(--gutter), env(safe-area-inset-right));
}

/* Ensure accordion items use requested ink color */
.faq-accordion .accordion-button,
.faq-accordion .accordion-panel{
  color:#4a4a47;
}

/* Remove any default chevrons/arrows in common browsers */
.faq-accordion .accordion-button::-webkit-details-marker{ display:none }

/* Optional spacing tweak */
.faq-accordion{ margin-top:1.25rem; }