/* ==========================================================================
   GLOBAL — base typography, layout primitives, header, footer, utilities
   Absolute Cosmetic Clinic
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background-color: var(--bg);
  overflow-x: hidden;
}

/* Locked while the mobile nav is open (set from navigation.js) */
body.is-locked {
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-extra);
  line-height: var(--lh-tight);
}

h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
  text-wrap: pretty;
}

p + p {
  margin-top: var(--space-4);
}

strong, b {
  font-weight: var(--fw-bold);
  color: var(--ink-700);
}

/* Inline text links inside prose get an underline. Links that are buttons or
   cards opt out via their own class. */
.prose a,
a.link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--transition-base);
}

.prose a:hover,
a.link:hover {
  color: var(--color-primary-dark);
  text-decoration-thickness: 2px;
}

address {
  font-style: normal;
}

/* --------------------------------------------------------------------------
   2. FOCUS — visible, consistent, never removed
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* Mouse users don't see the ring; keyboard users always do */
:focus:not(:focus-visible) {
  outline: none;
}

/* On dark backgrounds the green ring lacks contrast — switch to white */
.footer :focus-visible,
.cta-band :focus-visible {
  outline-color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   3. SKIP LINK
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -150%);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: var(--color-text-invert);
  font-weight: var(--fw-semibold);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: transform var(--dur-base) var(--ease-out);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tint      { background-color: var(--color-tint); }
.section--surface   { background-color: var(--surface); }

/* For sections carrying decorative overflow (script accents, avatar rings).
   Clipping them here stops them creating page-level horizontal overflow —
   the same approach .hero uses. Everything clipped is aria-hidden, so no
   content is ever lost. */
.section--clip      { overflow: hidden; }

/* Rides up over the base of the hero, as in the approved reference */
.section--lift {
  position: relative;
  z-index: 2;
  margin-top: clamp(-4rem, -2rem - 3vw, -2rem);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  background-color: var(--bg);
}

/* The floating rounded panel used by several mid-page sections */
.section--panel {
  background-color: var(--surface);
  border-radius: var(--radius-2xl);
  margin-inline: var(--gutter);
  box-shadow: var(--shadow-sm);
}

.section--panel-tint {
  background-color: var(--color-tint);
  border-radius: var(--radius-2xl);
  margin-inline: var(--gutter);
}

/* Section heading block: eyebrow + H2 + optional sub */
.section-head {
  max-width: 720px;
  margin-bottom: var(--space-10);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--split {
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}

.eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: 1.4;
}

.section-sub {
  margin-top: var(--space-4);
  font-size: var(--fs-md);
  color: var(--color-text);
  max-width: 62ch;
}

/* Grid helpers */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2,
.grid--3,
.grid--4 { grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */

/* Floating pill header: fixed, translucent, blurred. It rides over the video
   hero and over every light section below, so it needs to stay legible on
   both — hence the frosted white fill rather than a transparent bar. */
.header {
  position: fixed;
  top: var(--space-3);
  left: 0;
  right: 0;
  z-index: var(--z-header);
  padding-inline: var(--gutter);
  pointer-events: none;   /* only the pill itself is interactive */
}

.header__bar {
  pointer-events: auto;
  max-width: var(--container-max);
  margin-inline: auto;
  min-height: var(--header-h-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* Right inset matches the hamburger's vertical inset, so it reads as
     equally spaced on all three sides. Left is larger because the logo has
     no fill of its own and needs more optical margin. */
  padding-block: var(--header-pad-mobile);
  padding-inline: var(--space-5) var(--header-pad-right-mobile);
  border-radius: var(--radius-pill);
  /* Solid white. A translucent pill let the dark video through and muted the
     logo's black wordmark; an opaque fill keeps the mark at full contrast
     over both the video and the pale sections below. */
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 24px rgba(16, 24, 20, 0.12);
  transition: box-shadow var(--dur-slow) var(--ease-soft);
}

/* Firms up once the user leaves the hero */
.header.is-scrolled .header__bar {
  box-shadow: 0 10px 30px rgba(16, 24, 20, 0.16);
}

/* Pages with no hero need their content to clear the fixed pill */
.main--offset {
  padding-top: calc(var(--chrome-h) + var(--space-10));
}

.header__logo {
  flex-shrink: 0;
  display: block;
  line-height: 0;
}

.header__logo picture,
.header__logo img {
  display: block;
}

.header__logo img {
  height: var(--header-logo-h-mobile);
  width: auto;
}

/* --- Primary navigation --- */

.nav {
  display: none;
  align-items: center;
  gap: clamp(var(--space-3), 1.4vw, var(--space-6));
}

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--space-2);
  /* Sized up from 14px: the nav was the smallest type in the pill, which
     made it recede against the logo. */
  font-size: 0.9375rem;   /* 15px */
  font-weight: var(--fw-medium);
  color: var(--ink-700);
  white-space: nowrap;
  transition: color var(--transition-base);
}

.nav__link:hover {
  color: var(--color-primary);
}

/* Active page underline */
.nav__link[aria-current="page"] {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
}

.header__cta {
  display: none;
  flex-shrink: 0;
}

/* The primary action must never be the smallest text in the header. */
.header__cta .btn {
  min-height: var(--header-cta-h);
  padding-inline: var(--space-6);
  font-size: 0.9375rem;   /* 15px — matches the nav */
}

/* --- Hamburger --- */

.nav-toggle {
  display: flex;
  /* Same height as the logo, so both sit on the pill's padding exactly */
  width: var(--header-logo-h-mobile);
  height: var(--header-logo-h-mobile);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--ink-900);
}

.nav-toggle__bars {
  position: relative;
  width: 22px;
  height: 2px;
  background-color: currentColor;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast) var(--ease-soft);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background-color: currentColor;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-base) var(--ease-out);
}

.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Mobile panel (hidden above the breakpoint, see responsive.css) --- */

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-nav);
  background-color: var(--surface);
  padding: calc(var(--header-h-mobile) + var(--space-8)) var(--gutter) var(--space-12);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* .is-open is toggled by navigation.js */
.mobile-nav.is-open {
  display: block;
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
}

.mobile-nav__link {
  display: block;
  padding-block: var(--space-4);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav__link[aria-current="page"] {
  color: var(--color-primary);
}

.mobile-nav__cta {
  margin-top: var(--space-8);
}

.mobile-nav__contact {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}

.mobile-nav__contact a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink-700);
}

.mobile-nav__contact svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   6. FOOTER
   -------------------------------------------------------------------------- */

.footer {
  background-color: var(--dark);
  color: #C9D2CC;
  padding-top: var(--space-16);
  font-size: var(--fs-sm);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  padding-bottom: var(--space-12);
}

.footer__logo img {
  height: 84px;
  width: auto;
  margin-bottom: var(--space-5);
}

.footer__tagline {
  max-width: 34ch;
  color: #9FAEA5;
  line-height: var(--lh-normal);
}

.footer__heading {
  color: #FFFFFF;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-5);
  letter-spacing: var(--tracking-normal);
}

.footer__list {
  display: grid;
  gap: var(--space-3);
}

.footer__list a {
  color: #C9D2CC;
  transition: color var(--transition-base);
}

.footer__list a:hover {
  color: var(--green-300);
}

.footer__contact {
  display: grid;
  gap: var(--space-4);
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  line-height: var(--lh-normal);
}

.footer__contact-item svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--green-300);
}

.footer__contact-item a {
  color: #C9D2CC;
  transition: color var(--transition-base);
}

.footer__contact-item a:hover {
  color: var(--green-300);
}

/* Social icons */
.socials {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-base);
}

.socials a:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-block: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: #8D9A92;
}

.footer__legal {
  display: flex;
  gap: var(--space-4);
}

.footer__legal a {
  transition: color var(--transition-base);
}

.footer__legal a:hover {
  color: var(--green-300);
}

/* --------------------------------------------------------------------------
   7. STICKY MOBILE CTA BAR
   Required by the content blueprint (Part 6.1 #6). Shown below 780px only.
   -------------------------------------------------------------------------- */

.mobile-cta {
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-mobile-cta);
  background-color: var(--surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 20px rgba(16, 24, 20, 0.08);
  padding: var(--space-3) var(--space-3)
           calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  gap: var(--space-2);
}

.mobile-cta__main {
  flex: 1;
  justify-content: center;
}

.mobile-cta__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  background-color: var(--surface);
  transition: background-color var(--transition-base),
              border-color var(--transition-base);
}

.mobile-cta__icon:hover {
  background-color: var(--color-tint);
  border-color: var(--green-200);
}

/* Hidden while the mobile menu is open so the two never overlap */
body.is-locked .mobile-cta {
  display: none !important;
}

/* --------------------------------------------------------------------------
   8. UTILITIES
   -------------------------------------------------------------------------- */

/* Visually hidden but available to screen readers and to crawlers as anchor
   text. Used on every icon-only link. */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-accent  { color: var(--color-primary); }
.text-center  { text-align: center; }
.text-muted   { color: var(--color-text-muted); }

.script {
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  color: var(--ink-700);
}

.flow > * + * {
  margin-top: var(--space-4);
}

.mt-0  { margin-top: 0; }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }

/* Decorative SVG layers — always paired with aria-hidden in the markup */
.decor {
  position: absolute;
  z-index: var(--z-decor);
  pointer-events: none;
  user-select: none;
}

/* A nav link for the SECTION containing the current page carries
   aria-current="true" rather than "page". Same highlight — the distinction is
   for assistive tech, not for the eye. */
.nav__link[aria-current="true"] {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

.nav__link[aria-current="true"]::after {
  transform: scaleX(1);
}

.mobile-nav__link[aria-current="true"] {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

/* The Services trigger is a <button>, so it needs the same current-state
   treatment the anchor nav links get. */
.nav__trigger[aria-current="true"] {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------------------
   FONT FALLBACK METRICS

   Plus Jakarta Sans loads from Google with display=swap, so text paints in
   the system fallback first and re-flows when the real font arrives. On the
   treatment hero that reflow measured CLS 0.0204 — the lead paragraph
   changed height and pushed the bullets and CTAs down.

   Arial is wider and shorter than Plus Jakarta Sans. size-adjust and the
   metric overrides scale the fallback so the two occupy nearly the same
   space, which removes most of the shift without blocking paint.

   LIMIT: one size-adjust cannot match every weight. 103.7% is measured at
   weight 400, which covers body copy — the acne page went from CLS 0.0204 to
   0.0027. The homepage H1 is weight 800, where Arial Bold is much narrower
   than Plus Jakarta ExtraBold, so that headline still wraps to two lines in
   the fallback and three in the real font. Because the hero is vertically
   centred, that one-line difference moves the block ~36px: CLS 0.0161, which
   is well inside Google's 0.1 "good" threshold but not zero.

   To take it to zero, self-host the font (or preload the 800-weight woff2)
   so there is no swap at all. Per-weight fallback faces would also work.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Jakarta Fallback";
  src: local("Arial");
  /* 103.7% measured, not guessed: at 100px the plain-Arial advance for a
     sample string is 2256.8 against Plus Jakarta Sans' 2339.1. 105% overshot
     by 1.3%, which still left the hero reflowing on swap. */
  size-adjust: 103.7%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}