/* =================================================================
   AWE AESTHETICS — STYLES
   =================================================================
   Structure:
     1. Design tokens (colors, type, spacing)  ← edit brand values here
     2. Base / reset
     3. Reusable pieces (buttons, headings, layout)
     4. Sections (nav, hero, about, services, favorites, footer)
     5. Responsive

   Look & feel: light, warm, airy. White/cream backgrounds throughout.
   Marigold is the DOMINANT brand color — used for borders, label text,
   CTA buttons, pull-quote accents, and section markers (per brand guide).
   Secondary colors (Moss/Blue Spa/Lime) are reserved for sparing use.
   ================================================================= */


/* =================================================================
   1. DESIGN TOKENS
   ================================================================= */
:root {
  /* --- Brand colors: Primary "Marigold" palette (dominant) --- */
  --marigold: #eaab43;   /* primary brand color — the star of the show */
  --mango:    #f0c87a;
  --saffron:  #f4d9a2;

  /* --- Brand colors: Secondary palette (use sparingly) --- */
  --moss:     #b8b665;
  --blue-spa: #699fa2;
  --lime:     #9fc67d;

  /* --- Neutrals: warm, light, airy --- */
  --page:     #fdfbf7;   /* soft warm white — default page background */
  --paper:    #ffffff;   /* pure white for alternating sections/cards */
  --cream:    #f7f2e9;   /* warm cream for alternating sections */
  --ink:      #2b2a27;   /* headings + primary text */
  --ink-soft: #56534c;   /* body / secondary text */
  --line:     #ece4d5;   /* hairline borders */
  --gold-tint:#f6e6c6;   /* faint marigold wash for soft fills / callout panels */

  /* --- Semantic aliases --- */
  --gold: var(--marigold);       /* bright marigold: buttons, borders, bars, large display */
  --gold-text: #8a5c13;          /* deep marigold for SMALL TEXT on light bg. Bright
                                    marigold fails contrast at body size, so info-carrying
                                    text (prices, labels, eyebrows) uses this instead.

                                    Measured contrast (WCAG AA needs 4.5:1 for small text):
                                      on --page  #fdfbf7 ... 5.61:1  PASS
                                      on --cream #f7f2e9 ... 5.20:1  PASS
                                      on --gold-tint #f6e6c6 ... 4.71:1  PASS

                                    Was #8f6016, which passed on page/cream but hit only
                                    4.43:1 on the gold-tint callout panel — just under the
                                    threshold, and the source of Lighthouse's accessibility
                                    contrast flag (96/100). Darkened the minimum needed to
                                    clear AA on all three backgrounds. */
  --bg:   var(--page);
  --text: var(--ink);

  /* --- Type --- */
  --font-display: "Josefin Sans", system-ui, sans-serif; /* headings, nav, buttons, labels */
  --font-body:    "Andada Pro", Georgia, serif;          /* body copy */

  /* --- Layout --- */
  --maxw: 1160px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);

  --radius: 6px;
  --transition: 200ms ease;
}


/* =================================================================
   2. BASE / RESET
   ================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
:target { scroll-margin-top: 90px; } /* keep sticky nav off section tops */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;      /* ~17px */
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;        /* safety net against horizontal scroll */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.hero__inner, .about__inner, .services__inner,
.favorites__inner, .footer__inner, .nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* =================================================================
   3. REUSABLE PIECES
   ================================================================= */

/* Section marker + eyebrow: small uppercase marigold label with a
   short marigold rule to its left (a "section marker"). */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-text);   /* legible deep gold; the dash below stays bright */
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--gold);
}

.section-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 1.2rem;
  color: var(--ink);
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 2.1rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-2px); }

/* Primary CTA — solid Marigold (the dominant brand action color) */
.btn--gold {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  box-shadow: 0 6px 18px rgba(234,171,67,0.28);
}
.btn--gold:hover { background: #dd9c30; border-color: #dd9c30; }

/* Secondary CTA — marigold outline on light */
.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--gold);
}
.btn--outline:hover { background: var(--gold); color: var(--ink); }


/* =================================================================
   4a. NAV  (light: transparent over hero, solid white on scroll)
   ================================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  transition: background var(--transition), box-shadow var(--transition);
}
.nav.is-scrolled {
  background: rgba(253,251,247,0.92);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 1px 0 var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  line-height: 1;
}
.nav__logo-icon { height: 44px; width: auto; display: block; flex-shrink: 0; }

/* Inline wordmark beside the icon. See the brand-guide deviation note in
   index.html — this is a deliberate override, not an oversight.
   Type treatment matches the site's eyebrow/label style (Josefin Sans,
   uppercase, letter-spaced, AA-safe deep gold).
   Size and tracking scale fluidly with the viewport instead of switching at a
   breakpoint, so the wordmark stays visible on small phones (where the
   business name matters most) without ever crowding the hamburger. */
.nav__logo-text {
  font-family: var(--font-display);
  font-size: clamp(0.5rem, 1.75vw, 0.72rem);
  font-weight: 600;
  letter-spacing: clamp(0.06em, 0.45vw, 0.18em);
  text-transform: uppercase;
  color: var(--gold-text);
  white-space: nowrap;
  line-height: 1;
  min-width: 0;
}
/* Final safety on very narrow devices (≤359px, e.g. iPhone SE 1st gen):
   below this the wordmark can't shrink further without becoming illegible,
   so drop it rather than push the hamburger off-screen. The name is still on
   the anchor's aria-label and in the footer. */
@media (max-width: 359px) {
  .nav__logo-text { display: none; }
}

.nav__menu { display: flex; align-items: center; gap: 2rem; }
.nav__menu a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  transition: color var(--transition);
}
.nav__menu a:hover { color: var(--gold-text); }

.nav__cta {
  border: 1.5px solid var(--gold);
  color: var(--ink) !important;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  text-transform: uppercase;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em;
}
.nav__cta:hover { background: var(--gold); }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
}
.nav__toggle span {
  width: 26px; height: 2px;
  background: var(--ink);
  transition: transform var(--transition), opacity var(--transition);
}


/* =================================================================
   4b. HERO  (light, warm, airy, typographic; marigold accents)
   ================================================================= */
.hero {
  background: var(--page);
  color: var(--ink);
  padding-top: clamp(9rem, 18vh, 12rem);
  padding-bottom: var(--section-y);
  position: relative;
  overflow: hidden;
}
/* Soft mango glow, top-right, for warmth + depth (very subtle) */
.hero::after {
  content: "";
  position: absolute;
  top: -25%; right: -12%;
  width: 60vw; height: 60vw;
  max-width: 720px; max-height: 720px;
  background: radial-gradient(circle, rgba(240,200,122,0.35), transparent 62%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; max-width: 900px; }

/* Orientation line above the headline (what + where) */
.hero__eyebrow { margin-bottom: 1.25rem; }

.hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  /* min lowered so the headline never overflows narrow phones */
  font-size: clamp(1.9rem, 8vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 1.4rem;
  color: var(--ink);
  overflow-wrap: break-word;
}
.hero__subhead {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.6;
  max-width: 40rem;   /* wider measure — fills more of the hero, fewer wraps */
  color: var(--ink-soft);
  margin-bottom: 2.25rem;
}
.hero__cta { margin-bottom: 0; }

/* Pull-quote accent — marigold left rule + gold lead line */
.hero__note {
  border-left: 3px solid var(--gold);
  padding-left: 1.5rem;
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: 1rem;
}
.hero__note-lead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
}


/* =================================================================
   4c. ABOUT  (white; purpose-built portrait + "Meet Ewa" copy)
   ================================================================= */
.about { padding-block: var(--section-y); background: var(--paper); }
.about__inner {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about__media img {
  border-radius: var(--radius);
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--line);
}
.about__body { max-width: none; }  /* fill the text column — no narrow measure */
/* Marigold section marker above the heading */
.about__body .section-heading::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--gold);
  margin-bottom: 1.25rem;
}


/* =================================================================
   4c-2. WHAT TO EXPECT  (soft honey highlight; centered value statement
   — carries the "everything included" message that justifies pricing)
   ================================================================= */
.expect { padding-block: var(--section-y); background: #f8ecce; }
.expect__inner {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}
.expect .section-heading::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--gold);
  margin: 0 auto 1.25rem;
}
.expect p {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 auto 1.2rem;
}
/* .expect__close removed 2026-08-03 — the closing line it styled
   ("You show up. I do the thinking...") was cut. See git history. */


/* =================================================================
   4d. SERVICES  (cream; clearest section — grouping + aligned prices)
   ================================================================= */
.services { padding-block: var(--section-y); background: var(--cream); }

.services__header {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.services__subhead { font-size: 1.15rem; color: var(--ink-soft); margin: 0; }
/* Single inclusion note (replaces the repeated LED/BioCharger lines) */
.services__includes {
  margin: 1rem 0 0;
  font-size: 0.98rem;
  font-style: italic;
  color: var(--ink-soft);
}

.service-group { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
/* Marigold section marker: category label underlined in gold */
.service-group__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.75rem;
  margin: 0 0 1.5rem;
  border-bottom: 2px solid var(--gold);
}

.service { padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.service:last-child { border-bottom: 0; }

.service__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 0.5rem;
}
.service__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  margin: 0;
}
.service__title { display: flex; flex-direction: column; align-items: flex-start; }
/* "Recommended for your first visit" badge on the Comprehensive Facial */
.service__tag {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
  background: var(--gold-tint);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
.service__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--gold-text);   /* prices are key info — must be legible */
  white-space: nowrap;
  text-align: right;
}
/* Small duration line beneath the price */
.service__duration {
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}
/* Descriptions fill the row width (no narrow measure leaving big right-side
   whitespace); they're short blurbs, so a wide measure reads fine and keeps
   the page shorter. */
.service__desc { color: var(--ink-soft); margin: 0; }

/* Reassurance callout — soft marigold wash with a marigold button */
.services__cta {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--gold-tint);
  border: 1px solid var(--saffron);
  border-radius: var(--radius);
  text-align: center;
}
.services__cta p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 500;
  color: var(--ink);
  max-width: 42ch;
  margin: 0 auto 1.5rem;
}


/* =================================================================
   4e. EWA'S FAVORITES  (white; card grid, marigold-bordered cards)
   ================================================================= */
.favorites { padding-block: var(--section-y); background: var(--paper); }
.favorites__header { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.favorites__subhead { font-size: 1.15rem; color: var(--ink-soft); }

.favorites__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  align-items: stretch;   /* equal-height cards so the row looks tidy */
}
.fav-card {
  display: flex;
  flex-direction: column;
  /* natural height (grid is align-items:start) so shorter cards don't
     leave dead space above the button */
  padding: 2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold); /* marigold accent border */
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(43,42,39,0.05);
}
/* Product photo at the top of each card — fixed ratio so cards align */
.fav-card__media {
  margin: -2rem -2rem 1.5rem;   /* bleed to the card edges */
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
.fav-card__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.fav-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0 0 0.9rem;
}
.fav-card__desc { color: var(--ink-soft); font-size: 1rem; }
/* .fav-card__products removed 2026-08-03 with the Truth Treatment card
   (its product list was the only user). See git history to restore. */
.ph { color: #c2ab74; font-style: italic; } /* obvious placeholder styling */

/* Equal-height cards; button pinned to the BOTTOM, full-width, and a uniform
   min-height with centered text so 1-line and 2-line labels are the same size. */
.fav-card .btn {
  margin-top: auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.25rem;
  line-height: 1.2;
  text-align: center;
}

/* .favorites__more (storefront banner) removed 2026-08-03 — Ewa never set up
   the Amazon storefront, so the button had no destination. See git history. */


/* =================================================================
   4e-2. BOOKING  (cream; two scheduling paths before the scheduler)
   ================================================================= */
.booking { padding-block: var(--section-y); background: var(--cream); }
.booking__inner {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}
.booking__lead {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 48ch;
  margin: 0 auto clamp(1.5rem, 4vw, 2rem);
}
/* Call/text button — a big, obvious tap target (great on mobile: one tap dials)
   with the phone NUMBER as the prominent element. */
.booking__call {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  background: var(--gold);
  color: var(--ink);
  padding: 1rem 2.75rem;
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(234,171,67,0.28);
  transition: background var(--transition), transform var(--transition);
}
.booking__call:hover { background: #dd9c30; transform: translateY(-2px); }
.booking__call-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.booking__call-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  letter-spacing: 0.01em;
}


/* =================================================================
   4f. FOOTER  (light cream, marigold top border + accents)
   ================================================================= */
.footer {
  background: var(--cream);
  color: var(--ink-soft);
  border-top: 3px solid var(--gold);
}
.footer__inner {
  display: grid;
  /* Hours column gets extra room so the times don't wrap awkwardly */
  grid-template-columns: 1.7fr 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.footer__logo-img { height: auto; width: clamp(180px, 16vw, 230px); margin-bottom: 1.25rem; }

/* Hours as an aligned label/value list — no awkward wrapping */
.footer__hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1.1rem;
  margin: 0;
  font-size: 0.95rem;
}
.footer__hours dt { font-weight: 600; color: var(--ink); white-space: nowrap; }
.footer__hours dd { margin: 0; white-space: nowrap; color: var(--ink-soft); }
.footer__contact { font-style: normal; line-height: 1.9; font-size: 0.95rem; color: var(--ink-soft); }
.footer__contact a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }
.footer__contact a:hover { color: var(--gold-text); }

.footer__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1rem;
}
.footer__col p { font-size: 0.95rem; line-height: 1.8; }

.footer__nav, .footer__social { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__nav a, .footer__social a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color var(--transition);
}
.footer__nav a:hover, .footer__social a:hover { color: var(--gold-text); }

.footer__legal {
  border-top: 1px solid var(--line);
  text-align: center;
  padding-block: 1.5rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.footer__legal p { margin: 0; }


/* =================================================================
   5. RESPONSIVE
   ================================================================= */
/* Nav collapses to a hamburger below 1150px — the 5 links + logo need ~1140px
   to sit on one row, so this prevents cramming/wrapping on tablets. */
@media (max-width: 1150px) {
  .nav__toggle { display: flex; }
  .nav { background: rgba(253,251,247,0.95); backdrop-filter: saturate(180%) blur(8px); }
  .nav__menu {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--page);
    padding: 0 var(--gutter);
    max-height: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    transition: max-height var(--transition), padding var(--transition);
  }
  .nav__menu.is-open { max-height: 85vh; padding-block: 1rem 1.5rem; }
  .nav__menu a { padding: 0.75rem 0; width: 100%; }

  /* Selector is `.nav__menu a.nav__cta` (0,2,1) on purpose: the rule above is
     `.nav__menu a` (0,1,1), which outranks a bare `.nav__cta` (0,1,0) and was
     flattening this button's horizontal padding to 0 — the gold border ended
     up wrapped tight around full-width text instead of reading as a button.
     Matching specificity fixes it without reaching for !important.

     Solid gold here, unlike desktop. On desktop the outlined treatment is
     deliberate so a sticky nav doesn't compete with the hero CTA. Inside the
     mobile menu it's the last of five items in a plain text list, where an
     outline reads as just another link — so it gets the same solid fill as
     the hero button. Ink on marigold measures 7.11:1, comfortably AA. */
  .nav__menu a.nav__cta {
    margin-top: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: var(--gold);
    border-color: var(--gold);
    text-align: center;
  }
}

/* Layout stacking (independent of the nav breakpoint) */
@media (max-width: 860px) {
  .about__inner { grid-template-columns: 1fr; }
  .about__media { order: -1; max-width: 420px; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .footer__inner { grid-template-columns: 1fr; }
  .service__head { flex-direction: column; gap: 0.15rem; }
  .service__price { align-items: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}