/* ==========================================================================
   Adult Health & Wellness Center — global styles
   Design tokens, reset, shared components, global header + footer.
   Per-section styles live in sections.css.
   ========================================================================== */

/* ---------- Design tokens ------------------------------------------------
   Colours are the values carried by the Figma SVG exports (#10C3A7 teal,
   #032867 icon navy) and, where an export did not exist, the flat fills
   sampled off the page slices.
   ------------------------------------------------------------------------ */
:root {
  --navy:        #042767;
  --navy-ink:    #032867;   /* the stroke colour inside the icon exports */
  --teal:        #10C3A7;
  --mint:        #CCFCF0;
  --lilac:       #E6E9F0;   /* the shape behind each team card */

  --white:       #ffffff;
  --body:        #5A6472;   /* grey running text */
  --line:        #E4E7EC;
  --field:       #F7F8FA;

  --font-body: 'Poppins', Arial, sans-serif;

  /* Layout — the Figma frame is 1600px: 1420px content inside 90px gutters.
     Every length is authored in rem at 1rem = 16px, so the numbers still read
     as the Figma pixels (1420 / 16 = 88.75rem). */
  --container: 88.75rem;
  --gutter: 5.625rem;
  --radius: 0.5rem;
  --radius-lg: 1rem;
}

/* --------------------------------------------------------------------------
   Design scale

   The Figma frame is 1600px wide; the site renders it at 1440px on desktop.
   Because every length is in rem that is one number — the root font size.
   1600 -> 1440 is 16px * 1440 / 1600 = 14.4px, and the whole page (type,
   spacing, cards, artwork) scales together, exactly as in the Figma.

   To render at a different width change 1440 below (1600 = 1:1 with Figma).
   -------------------------------------------------------------------------- */
html { font-size: calc(16px * 1440 / 1600); }

/* Between 1200px and the 1440px design width the same scale simply follows the
   viewport, so the desktop layout never has to break. */
@media (max-width: 1440px) {
  html { font-size: calc(100vw * 16 / 1600); }
}

/* Below 1200px the layout re-flows for tablet/mobile, so type returns to its
   natural size instead of continuing to shrink. */
@media (max-width: 1200px) {
  html { font-size: 16px; }
}

/* ---------- Reset -------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;
}

img,
svg { display: block; max-width: 100%; }

/* width/height attributes are on every <img> for layout stability; without
   this the attribute height wins whenever only the width is set in CSS. */
img { height: auto; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

p, figure, blockquote, dl, dd { margin: 0; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; }

button { font: inherit; }

hr { border: 0; margin: 0; }

/* ---------- Layout ------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Shared typography --------------------------------------------
   Every section heading in the Figma is the same 40/56 navy setting; the
   sections only differ in colour and alignment.
   ------------------------------------------------------------------------ */
.section-title {
  font-size: 3rem;
  font-weight: 500;
  line-height: 3.5rem;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.section-title strong { font-weight: 700; }

/* ---------- Tracking hooks -----------------------------------------------
   .track-call and .track-submit carry no styling at all. They exist so
   analytics can hang a trigger on them: .track-call is on every tel: link
   (header, hero, work section, thank-you, 404, and the contact card), and
   .track-submit is on the appointment form's submit button. They will look
   like dead classes to anyone tidying this file — they are not.
   ------------------------------------------------------------------------ */

/* ---------- Buttons ------------------------------------------------------
   Three shapes, all 49px tall with an 8px radius: the solid navy action, the
   outlined phone button beside it (transparent, so it picks up whatever the
   section behind it is), and the teal outline used on the navy band.

   Label size is set from the Figma: "BOOK APPOINTMENT" measures 153px and
   "702-510-4508" 108px, which is Poppins 600 at 14px with 0.045em tracking.
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3.0625rem;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s ease, background-color 0.25s ease,
              border-color 0.25s ease, color 0.25s ease;
}

.btn__icon {
  display: block;
  flex: none;
  width: 1.1875rem;
  height: 1.25rem;
}

.btn__icon svg,
.btn__icon img { width: 100%; height: 100%; }

.btn--navy {
  background: var(--navy);
  color: var(--white);
}

.btn--navy:hover { background: #06316F; }

/* Transparent, thin navy outline, navy label — the phone button. It sits on
   white in the header, on the hero wash, and on the mint band, and in all
   three the Figma shows the section colour straight through it. */
.btn--outline {
  gap: 0.625rem;
  padding: 0 1.1875rem;
  background: transparent;
  border: 1px solid rgba(3, 40, 103, 0.7);
  color: var(--navy);
}

.btn--outline .btn__icon { width: 1.25rem; height: 1.1875rem; }

.btn--outline:hover { border-color: var(--teal); }

/* Teal outline on the navy band */
.btn--ghost-teal {
  gap: 0.8125rem;
  background: transparent;
  border: 1px solid var(--teal);
  color: var(--teal);
}

.btn--ghost-teal .btn__icon { width: 0.8125rem; height: 0.8125rem; }

.btn--ghost-teal:hover { background: rgba(16, 195, 167, 0.12); }

.btn--block { width: 100%; height: 3.5rem; font-size: 0.9375rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: relative;
  z-index: 60;
  background: var(--white);
}

.site-header__inner {
  display: flex;
  align-items: center;
  height: 5.25rem;
}

/* 198 x 70 is the logo frame in the Figma; the artwork is trimmed to its own
   edges, so it is fitted inside rather than cropped. */
.site-header__logo {
  display: block;
  flex: none;
  width: 12.375rem;
  height: 4.375rem;
}

.site-header__logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }

.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  /* the Figma centres the row on 701px, a shade right of the bar centre */
  padding-left: 1.75rem;
}

/* 24px between items and 12.8px labels, as the Figma sets the row */
.main-nav__list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.main-nav__list a {
  position: relative;
  display: block;
  padding: 0.5rem 0;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--navy);
}

.main-nav__list a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.125rem;
  height: 0.125rem;
  border-radius: 0.0625rem;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.main-nav__list a:hover::after,
.main-nav__list a[aria-current]::after { transform: scaleX(1); }

/* ---------- Services submenu ---------------------------------------------
   Opens on hover and on keyboard focus. There is no script behind it: a
   panel that only a mouse can reach would lock a keyboard out of seven
   pages, and :focus-within costs nothing.
   ------------------------------------------------------------------------ */
.main-nav__list .has-sub { position: relative; }

/* the list's own rule sets display: block, which would drop the caret onto a
   line of its own — this has to out-specify it */
.main-nav__list .nav-services { display: flex; align-items: center; gap: 0.3125rem; }

.nav-caret {
  width: 0.5rem;
  height: 0.3125rem;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.has-sub:hover .nav-caret,
.has-sub:focus-within .nav-caret { transform: rotate(180deg); }

.sub-nav {
  position: absolute;
  top: 100%;
  left: -1rem;
  z-index: 20;
  min-width: 16.5rem;
  padding: 0.5rem 0;
  border: 1px solid var(--line);
  border-radius: 0.625rem;
  background: var(--white);
  box-shadow: 0 1rem 2rem rgba(4, 39, 103, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.375rem);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.2s;
}

.has-sub:hover .sub-nav,
.has-sub:focus-within .sub-nav {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.main-nav__list .sub-nav a {
  padding: 0.5625rem 1.125rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  text-transform: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.main-nav__list .sub-nav a::after { display: none; }

.main-nav__list .sub-nav a:hover,
.main-nav__list .sub-nav a[aria-current] { background: var(--mint); color: var(--navy); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: none;
}

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  padding: 0.625rem;
  background: none;
  border: 1px solid #C9D2DE;
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: var(--navy);
}

.nav-toggle span + span { margin-top: 5px; }

/* ==========================================================================
   Footer — the map strip and the navy bar under it
   ========================================================================== */
/* The Figma has the location as a 1600 x 195 strip across the foot of the page.
   This is the live Google embed at that shape: the iframe fills the strip, and
   the strip is what decides the height at every width. */
.footer-map {
  height: 12.1875rem;
  background: var(--white);
}

.footer-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.site-footer {
  background: var(--navy);
  color: var(--white);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 8.875rem;
}

.site-footer__logo {
  display: block;
  flex: none;
  width: 15rem;
  height: 5.325rem;
}

/* the footer carries the pale version of the mark, so nothing is recoloured */
.site-footer__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.site-footer__copy {
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--teal);
}

.site-footer__legal {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex: none;
}

.site-footer__legal a {
  font-size: 0.8875rem;
  font-weight: 500;
  line-height: 1.3125rem;
  transition: color 0.2s ease;
}

.site-footer__legal a:hover { color: var(--teal); }

/* A thin second line under the bar: the Google Business Profile on the left,
   the build credit on the right. Divided off by a hairline rather than by
   another band, so the navy foot stays one block. */
.site-footer__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 1.0625rem;
  padding-bottom: 1.0625rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.8125rem;
  line-height: 1.375rem;
  color: rgba(255, 255, 255, 0.72);
}

.site-footer__gmb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
}

/* the pin is a teal-stroked export; it reads as-is on the navy */
.site-footer__gmb img { width: 1.0625rem; height: 1.0625rem; }

.site-footer__gmb:hover,
.site-footer__powered a:hover { color: var(--teal); }

.site-footer__powered a {
  color: var(--white);
  font-weight: 600;
  transition: color 0.2s ease;
}

/* ==========================================================================
   Header + footer below the design width
   ========================================================================== */
@media (max-width: 1200px) {
  /* the 90px Figma gutter is a proportion of 1600, not a fixed inset — below
     the design width it comes back to something a narrow screen can carry */
  :root { --gutter: 2.5rem; }

  .site-header__inner {
    height: auto;
    flex-wrap: wrap;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  .nav-toggle { display: block; }

  .main-nav {
    order: 3;
    flex: 0 0 100%;
    display: none;
    justify-content: flex-start;
    padding: 0.5rem 0 0.25rem;
  }

  .main-nav.is-open { display: block; }

  .main-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .main-nav__list a {
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.875rem;
    letter-spacing: 0.03em;
  }

  .main-nav__list a::after { display: none; }

  /* In the drawer the submenu is just a nested list — there is room for it,
     and nothing has to be tapped twice to reach a service page. */
  .sub-nav {
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .main-nav__list .sub-nav a {
    padding: 0.75rem 0 0.75rem 1.125rem;
    font-size: 0.8125rem;
    color: var(--body);
  }

  .main-nav__list .sub-nav a:hover,
  .main-nav__list .sub-nav a[aria-current] { background: none; color: var(--teal); }

  .nav-caret { display: none; }

  /* main.js moves the CTA pair into the drawer at this width */
  .main-nav .site-header__actions {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.25rem 0 0.5rem;
  }

  .main-nav .site-header__actions .btn { flex: 1 1 12rem; }

  .site-footer__inner {
    flex-direction: column;
    text-align: center;
    gap: 1.25rem;
    height: auto;
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .site-footer__logo { width: 12.375rem; height: 4.375rem; }

  .site-footer__legal { flex-wrap: wrap; justify-content: center; gap: 1.25rem 2rem; }

  .site-footer__meta { flex-direction: column; justify-content: center; text-align: center; gap: 0.75rem; }

  .footer-map { height: 10rem; }
}

@media (max-width: 680px) {
  :root { --gutter: 1.25rem; }

  .site-header__logo { width: 10.5rem; height: 3.7125rem; }

  .btn { height: 2.875rem; font-size: 0.8125rem; letter-spacing: 0.04em; }

  .main-nav .site-header__actions .btn { flex: 1 1 100%; }

  .site-footer__inner { padding-top: 1.75rem; padding-bottom: 1.75rem; }
  .site-footer__copy { font-size: 0.9375rem; }
  .site-footer__legal { gap: 0.75rem 1.5rem; }

  .footer-map { height: 9rem; }
}

@media (max-width: 420px) {
  .site-header__logo { width: 9.25rem; height: 3.27rem; }

  .btn { font-size: 0.78125rem; }

  .footer-map { height: 8rem; }
}

/* ==========================================================================
   Cursor ring

   A single element follows the pointer, stretches with the direction of
   travel, snaps around buttons and links as a rounded box, and pops on click.
   The native cursor stays visible on purpose — the ring lags by design, so
   hiding the real pointer would make clicking feel imprecise.
   ========================================================================== */
@media (pointer: fine) {
  .cursor-ring,
  .cursor-pop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
    /* px, not rem: the ring is an overlay, not part of the design scale */
    border: 2px solid var(--teal);
    border-radius: 50%;
  }

  .cursor-ring {
    width: 30px;
    height: 30px;
    opacity: 0;
    filter: drop-shadow(0 0 0.375rem rgba(16, 195, 167, 0.45));
    transition: opacity 0.25s ease, width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                border-radius 0.28s ease, border-width 0.2s ease;
    will-change: transform;
  }

  .cursor-ring.is-awake { opacity: 1; }

  /* over something clickable */
  .cursor-ring.is-hot { width: 44px; height: 44px; }

  /* snapped onto a button: the size is written in from the element's own box */
  .cursor-ring.is-magnet { border-radius: 0.625rem; }

  /* while the button is down */
  .cursor-ring.is-down { border-width: 3px; }

  /* the click ripple */
  .cursor-pop {
    width: 30px;
    height: 30px;
    animation: cursor-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  @keyframes cursor-pop {
    from { opacity: 0.9; }
    to   { opacity: 0; }
  }
}

/* Anyone who asked for less motion keeps a plain pointer. */
@media (prefers-reduced-motion: reduce) {
  .cursor-ring,
  .cursor-pop { display: none; }
}

/* ==========================================================================
   Hover and reveal

   Two quiet effects: a box lifts a little under the pointer, and content
   fades up the first time it comes into view.
   ========================================================================== */
.btn:hover { transform: translateY(-0.125rem); box-shadow: 0 0.5rem 1rem rgba(4, 39, 103, 0.16); }
.btn:active { transform: translateY(0); box-shadow: none; }

/* The reveal starts hidden, which is only safe once we know scripts run — the
   inline check in head.php adds .js, and drops it again if main.js never
   arrives, so a broken script can never leave the page blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(0.875rem);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .btn:active { transform: none; }
  html { scroll-behavior: auto; }
}