/* ================================================================
   LAUREN MAGGIO COACHING — SHARED STYLESHEET (styles.css)

   Every page of the site links to this file. Styles here apply
   SITE-WIDE: edit once, and all five pages update together.

   WHAT LIVES HERE:
     1. Colors & fonts (the :root variables)
     2. Base/reset styles (body, background grain, headings, links)
     3. Accessibility (skip link, keyboard focus outlines)
     4. Sticky nav header (incl. the mobile hamburger menu)
     5. Buttons (.btn solid plum button)
     6. Footer
     7. Scroll-fade motion + reduced-motion overrides
     8. Mobile nav layout (the max-width:900px block)

   WHAT DOES NOT LIVE HERE:
     Page-specific styles (homepage hero ripples, the services
     grid, the contact form, etc.) stay in a <style> block at the
     top of each individual page, clearly commented.

   NOTE: each page's own <style> loads AFTER this file, so a rule
   on a page can override a rule here when needed.
   ================================================================ */

/* ---------- 1. SITE-WIDE COLORS & FONTS ----------
   Change a color here and it updates across the whole site.
   All pairings are WCAG AA verified — re-check contrast if you
   change any of these. */
:root{
  --plum:#4A2B4D;           /* primary brand color: headings, buttons */
  --plum-deep:#38203B;      /* darker plum: footer bg, dark bands, button hover */
  --text:#3B3038;           /* body text */
  --muted:#6E6570;          /* secondary gray text */
  --gold:#7D5F2E;           /* gold accent — AA-safe on light backgrounds */
  --gold-line:#C7B183;      /* pale gold for hairlines only, never text */
  --gold-on-dark:#E0C49A;   /* lighter gold — AA-safe on dark plum bands */
  --bg:#F8F3EA;             /* main ivory page background */
  --bg-tone:#F1EADD;        /* slightly darker band background */
  --paper:#FFFDF8;          /* card/panel background */
  --rule:rgba(74,43,77,.22);/* thin plum hairline color */
  --serif-display:'Cormorant Garamond',Georgia,serif;  /* h1/h2 */
  --serif-text:'Libre Caslon Text',Georgia,serif;      /* h3, quotes */
  --sans:'Mulish',Verdana,sans-serif;                  /* body */
}

/* ---------- 2. BASE / RESET ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);font-weight:300;background:var(--bg);color:var(--text);line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased;}
/* subtle paper-grain texture laid over every page (an inline SVG noise filter) */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.29 0 0 0 0 0.17 0 0 0 0 0.30 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E");
}
header,main,footer,nav{position:relative;z-index:1;}
h1,h2{font-family:var(--serif-display);font-weight:500;color:var(--plum);letter-spacing:.012em;}
h3{font-family:var(--serif-text);font-weight:400;color:var(--plum);}
a{color:var(--plum);transition:color .25s ease;}

/* ---------- 3. ACCESSIBILITY ---------- */
/* "Skip to content" link — hidden until focused via keyboard */
.skip{position:absolute;left:-9999px;top:0;background:var(--plum);color:#fff;padding:10px 18px;z-index:200;}
.skip:focus{left:12px;top:12px;}
/* keyboard focus outlines — light gold on dark bands (footer/packages) */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:1px;}
footer :focus-visible,.packages :focus-visible{outline-color:#E0C49A;}

/* ---------- 4. NAV (sticky header) ---------- */
nav{
  position:sticky;top:0;z-index:100;background:rgba(248,243,234,.94);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 6% 22px;border-bottom:1px solid var(--rule);
}
nav::after{content:"";position:absolute;left:6%;right:6%;bottom:4px;height:1px;background:var(--rule);opacity:.5;}
.logo{display:block;line-height:0;}
.logo img{width:225px;max-width:56vw;height:auto;}   /* header logo size */
.navlinks{display:flex;gap:38px;align-items:center;}
.navlinks a{
  text-decoration:none;color:var(--text);font-size:13px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;padding-bottom:3px;border-bottom:1px solid transparent;
}
.navlinks a:hover{color:var(--plum);border-bottom-color:var(--gold);}
.navlinks a.active{color:var(--plum);border-bottom-color:var(--gold);}   /* current page's link gets class="active" */
/* outlined "Schedule a Call" button in the nav */
.nav-cta{
  border:1px solid var(--plum) !important;padding:11px 22px 10px !important;color:var(--plum) !important;
  transition:background .3s ease,color .3s ease;
}
.nav-cta:hover{background:var(--plum);color:var(--bg) !important;border-bottom-color:var(--plum) !important;}
/* hamburger button — only shows on mobile (see section 8) */
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px 4px;}
.menu-toggle span{display:block;width:24px;height:1.5px;background:var(--plum);margin:6px 0;transition:transform .25s,opacity .25s;}
.menu-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* ---------- 5. BUTTONS ---------- */
/* solid plum button used for the main calls-to-action */
.btn{
  display:inline-block;background:var(--plum);color:#fff;text-decoration:none;
  font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  padding:18px 38px 17px;border:0;cursor:pointer;font-family:var(--sans);
  transition:background .3s ease,transform .25s ease,box-shadow .25s ease;
}
.btn:hover{background:var(--plum-deep);transform:translateY(-1px);box-shadow:0 6px 22px rgba(56,32,59,.22);}
.btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none;}   /* used while the contact form is sending */

/* ---------- 6. FOOTER ---------- */
footer{background:var(--plum-deep);color:#CBC2CC;padding:64px 6% 46px;font-size:13.5px;}
.foot-cols{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;margin-bottom:36px;max-width:1160px;margin-left:auto;margin-right:auto;}
.footer-logo img{width:225px;max-width:70vw;height:auto;}
footer a{color:#E4DDE4;text-decoration:none;}
footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.foot-links{letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;font-weight:600;display:flex;gap:26px;align-items:center;flex-wrap:wrap;}
/* the copyright line at the very bottom */
.disclaimer{border-top:1px solid rgba(228,221,228,.25);padding-top:24px;font-size:12.5px;color:#B4A9B5;max-width:1160px;margin:0 auto;}

/* ---------- 7. MOTION ----------
   .reveal / .in = sections fade up the first time they scroll into
   view (added by the small script at the bottom of each page).
   Disabled automatically for visitors with "reduce motion" set. */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .9s ease-out,transform .9s ease-out;}
.reveal.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  .btn:hover{transform:none;}
}

/* ---------- 8. MOBILE NAV (tablet / phone, ≤900px) ---------- */
@media(max-width:900px){
  nav{padding:18px 5%;}
  .menu-toggle{display:block;}   /* show hamburger */
  .navlinks{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 5% 28px;
    border-bottom:1px solid var(--rule);box-shadow:0 14px 20px rgba(56,32,59,.08);
  }
  .navlinks.open{display:flex;}
  .navlinks a{width:100%;padding:16px 0;border-bottom:1px solid var(--rule);}
  .navlinks a.nav-cta{width:auto;margin-top:20px;border-bottom:1px solid var(--plum) !important;}
}