/* ============================================================
   Green Yogi Traveler — shared site styles  (site.css)
   ------------------------------------------------------------
   Single source of truth for the design SYSTEM:
   tokens, base typography, buttons, nav, footer, subscribe
   modal, FAQ, and the section label/title/intro + role labels.

   Page-SPECIFIC components (hero, cards, plans, pricing,
   galleries, etc.) stay in each page's own <style> block.
   Section vertical padding also stays per-page (densities
   intentionally differ between pages).

   Linked FIRST in every page's <head>, before its <style>,
   so a page can still override a system rule when it must.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  --green:#1B9679;        /* primary brand green        */
  --green-dark:#157A63;   /* hover / pressed            */
  --mint:#E8F5F4;         /* soft section backgrounds   */
  --text:#444444;         /* default body text          */
  --ink:#222222;          /* all headings               */
  --body-soft:#555555;    /* secondary / supporting body*/
  --muted:#8a8a8a;        /* roles, credentials, captions*/
  --grey:#DFDFDF;         /* borders / dividers         */
  --white:#FFFFFF;
  --teal:#22443C;         /* deep accent / footer       */
  --gold:#F2B01E;         /* sparingly                  */
  --radius:18px;
}

/* ---------- Reset + base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Lato',sans-serif;color:var(--text);background:var(--white);line-height:1.7;font-size:18px}
h1,h2,h3,h4{font-family:'Merriweather',serif;font-weight:700;color:var(--ink);letter-spacing:-0.03em}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{max-width:1140px;margin:0 auto;padding:0 24px}

/* ---------- Buttons (pill) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 36px;border-radius:999px;font-family:'Lato',sans-serif;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-align:center;border:2px solid transparent;transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .18s,border-color .18s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-solid{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 4px 18px rgba(27,150,121,.28)}
.btn-solid:hover{background:var(--green-dark);border-color:var(--green-dark)}
.btn-solid:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.8)}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-outline:focus-visible{outline:2px solid #fff;outline-offset:2px}
.btn-outline-green{background:transparent;color:var(--green);border-color:var(--green)}
.btn-outline-green:hover{background:var(--mint)}
.btn-outline-green:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ---------- Nav ---------- */
nav{position:absolute;top:0;left:0;right:0;z-index:10;padding:22px 0}
nav .container{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px;color:#fff}
.logo svg{width:42px;height:42px}
.logo img{display:block}
.logo span{font-family:'Merriweather',serif;font-size:20px;letter-spacing:.02em;line-height:1}
.nav-links{display:flex;gap:28px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.nav-links a{transition:opacity .15s}
.nav-links a:hover,.nav-links a[aria-current]{opacity:.75}
@media(max-width:880px){.nav-links{display:none}}

/* Hamburger + mobile overlay */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:4px;z-index:101}
.hamburger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
@media(max-width:880px){.hamburger{display:flex}}
.mobile-menu{display:none;position:fixed;inset:0;background:var(--teal);z-index:100;flex-direction:column;align-items:center;justify-content:center;gap:36px}
.mobile-menu.open{display:flex}
.mobile-menu a{color:#fff;font-family:'Lato',sans-serif;font-weight:700;font-size:22px;letter-spacing:.06em;text-transform:uppercase;opacity:.9;transition:opacity .15s}
.mobile-menu a:hover{opacity:1}
.mobile-menu .close-btn{position:absolute;top:24px;right:24px;background:none;border:none;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.mobile-menu .close-btn svg{width:28px;height:28px;stroke:#fff;stroke-width:2}

/* ---------- Trust strip ---------- */
.trust{background:var(--mint);padding:18px 0}
.trust .container{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;font-size:14px;font-weight:700;color:var(--green-dark);letter-spacing:.03em}
.trust span{display:flex;align-items:center;gap:8px}

/* ---------- Section design system (uniform site-wide) ---------- */
.bg-mint{background:var(--mint)}
.section-label{color:var(--green);font-weight:700;font-size:13px;letter-spacing:.28em;text-transform:uppercase;margin-bottom:8px}
.section-title{font-size:clamp(24px,3.2vw,36px);margin-bottom:20px}
.section-intro{max-width:640px;font-size:18px;line-height:1.7;margin-bottom:40px}

/* Role / credential subtitle — green, small, SENTENCE case.
   Deliberately different from the .section-label eyebrow (which is
   uppercase + wide-tracked). Use for a person's role, credential,
   plan tag, or a small "Getting there"-style kicker. green-dark keeps
   it legible at 13px on white. */
.role-label{color:var(--green-dark);font-weight:700;font-size:13px;letter-spacing:.01em}

/* ---------- FAQ (collapsible) ---------- */
.faq-wrap{max-width:760px;margin:0 auto}
details{background:#fff;border:1.5px solid var(--grey);border-radius:14px;padding:20px 26px;margin-bottom:14px;transition:border-color .15s}
details[open]{border-color:var(--green)}
summary{font-weight:700;font-size:16px;cursor:pointer;color:#222;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:'＋';font-weight:300;font-size:20px;color:var(--green);flex-shrink:0}
details[open] summary::after{content:'－'}
details p{margin-top:12px;font-size:16px;line-height:1.7}

/* ---------- Footer ---------- */
footer{background:var(--teal);color:#cfe3de;padding:54px 0 30px;font-size:14.5px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:36px}
@media(max-width:720px){.footer-grid{grid-template-columns:1fr}}
footer h3{color:#fff;font-family:'Merriweather',serif;font-size:16px;margin-bottom:14px;letter-spacing:0}
footer a{display:block;margin-bottom:8px;transition:color .15s;font-size:14.5px;color:#cfe3de}
footer a:hover{color:#fff}
.footer-subscribe{border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15);padding:22px 0;margin-bottom:22px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-subscribe span{color:#fff;font-size:15px;font-weight:700;font-family:'Merriweather',serif;white-space:nowrap}
.footer-sub-form{display:flex;gap:10px;flex:1;max-width:420px}
.footer-sub-form input{flex:1;padding:0 18px;min-height:44px;border-radius:999px;border:none;background:rgba(255,255,255,.12);color:#fff;font-family:'Lato',sans-serif;font-size:14px}
.footer-sub-form input::placeholder{color:rgba(255,255,255,.6)}
.footer-sub-form input:focus{outline:2px solid var(--gold);outline-offset:2px;background:rgba(255,255,255,.18)}
.footer-sub-form .btn{min-height:44px;padding:0 22px;font-size:14px;white-space:nowrap}
.footer-bottom{padding-top:22px;text-align:center;font-size:13px;color:#9dbdb5}

/* ---------- Subscribe modal ---------- */
.sub-overlay{display:none;position:fixed;inset:0;background:rgba(20,50,45,.6);z-index:200;align-items:center;justify-content:center;padding:24px}
.sub-overlay.open{display:flex}
.sub-modal{background:#fff;border-radius:20px;padding:40px 36px;max-width:460px;width:100%;position:relative}
.sub-modal h3{font-size:22px;color:#222;margin-bottom:6px}
.sub-sub{font-size:15px;color:#666;margin-bottom:24px}
#sub-form{display:flex;flex-direction:column;gap:18px}
.sub-field{display:flex;flex-direction:column;gap:7px}
.sub-modal label{display:block;font-size:13px;font-weight:700;color:#444;letter-spacing:.02em}
.sub-names{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sub-modal input,.sub-modal select{width:100%;padding:0 18px;min-height:48px;border-radius:999px;border:1.5px solid var(--grey);font-family:'Lato',sans-serif;font-size:15px;color:#222;box-sizing:border-box}
.sub-modal select{appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 18px center #fff;color:#555}
.sub-modal input:focus,.sub-modal select:focus{outline:2px solid var(--green);outline-offset:2px;border-color:var(--green)}
.sub-modal .btn{width:100%;min-height:50px;margin-top:4px}
.sub-legal{font-size:13px;color:#999;text-align:center;margin-top:14px}
.sub-legal a{color:var(--green)}
.sub-close{position:absolute;top:16px;right:20px;background:none;border:none;font-size:22px;color:#999;cursor:pointer;line-height:1;padding:4px}
