@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* Template: beauty-academy/skin.css
 * Register: beauty / nail TRAINING ACADEMY — a clean, white, FUNCTIONAL course
 * sales-funnel. Client ask (Kelly's Nail Academy): "white background, simple,
 * functional." Look anchor mynailacademy.com; structure anchor
 * patricianailsacademy.com (recreated light). See design-audit.md.
 *
 * The look: WHITE pages, soft BLUSH bands, PINK accent doing the feminine +
 * conversion work (CTAs, prices, ratings), ONE deep ink-navy footer. Plus
 * Jakarta Sans bold headings + Inter body — legible, modern, no ornament.
 * Rounded cards + pink buttons. Conversion-first: clear CTAs everywhere.
 *
 * Inherits structural chrome from /_shared/styles/chrome.css.
 */

:root {
  /* Palette — pixel-sampled from My Nail Academy, softened for "simple" */
  --color-bg:                 #FFFFFF;
  --color-bg-muted:           #FCEEF1;   /* soft blush band */
  --color-muted-bg:           #FCEEF1;   /* library alias for .block--tone-muted */
  --color-secondary-bg:       #FFF7F9;
  --color-bg-elevated:        #FFF7F9;   /* card surface */
  --color-bg-inverse:         #140A2E;   /* deep ink-navy — footer / proof band */
  --color-bg-accent:          #EC5A72;   /* pink band (rare) */

  --color-primary:            #1E1633;   /* ink — headings */
  --color-secondary:          #F7A8B8;   /* soft pink */
  --color-accent:             #EC5A72;   /* pink — CTAs, prices, ratings */
  --color-accent-soft:        #F7A8B8;
  --color-on-accent:          #FFFFFF;

  --color-text:               #3A3450;
  --color-text-dim:           #6B6580;
  --color-muted:              #6B6580;
  --color-text-faint:         rgba(30, 22, 51, 0.55);
  --color-text-inverse:       #FFFFFF;
  --color-text-inverse-dim:   rgba(255, 255, 255, 0.78);

  --color-overlay-text:       #FFFFFF;
  --color-hero-overlay-soft:  rgba(20, 10, 46, 0.30);
  --color-hero-overlay-heavy: rgba(20, 10, 46, 0.52);

  --color-border-hairline:        rgba(30, 22, 51, 0.12);
  --color-border-hairline-strong: rgba(30, 22, 51, 0.24);
  --color-border-inverse:         rgba(255, 255, 255, 0.18);

  /* Type — clean functional sans */
  --font-display:  'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing — generous but not heavy */
  --space-section:    clamp(2.75rem, 5.5vw, 4.75rem);
  --header-height:    74px;
  --hero-max-height:  84vh;

  --radius-button:    10px;
  --radius-card:      16px;
  --radius-image:     14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body.tpl-beauty-academy {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------------
 * Announcement strip — thin pink accreditation line (optional)
 * ------------------------------------------------------------------------ */
.tpl-beauty-academy .site-announce {
  background: var(--color-accent);
  color: var(--color-on-accent);
  text-align: center;
  padding: 0.5rem 1rem;
}
.tpl-beauty-academy .site-announce__text {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------------
 * Header — white, sticky; brand left, nav, pink "Book a Course" capsule right
 * ------------------------------------------------------------------------ */
.tpl-beauty-academy .site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-hairline);
}
.tpl-beauty-academy .site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  min-height: var(--header-height);
}
.tpl-beauty-academy .site-header__brand { text-decoration: none; margin-right: auto; min-width: 0; display: inline-flex; align-items: center; gap: 0.6rem; }
.tpl-beauty-academy .site-header__brand-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  line-height: 1.05;
}
.tpl-beauty-academy .site-header__brand-tagline {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.tpl-beauty-academy .site-brand-logo { display: block; width: auto; }
.tpl-beauty-academy .site-brand-monogram { background: var(--color-accent) !important; border-radius: 12px !important; }

.tpl-beauty-academy .site-nav--desktop .site-nav__list {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end;
  gap: 0.3rem clamp(1rem, 2vw, 1.7rem);
  list-style: none; margin: 0; padding: 0;
}
.tpl-beauty-academy .site-nav__link {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text);
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.tpl-beauty-academy .site-nav__link:hover { color: var(--color-accent); }
.tpl-beauty-academy .site-nav__link.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.tpl-beauty-academy .site-nav__caret { font-size: 0.7em; margin-left: 0.2em; }
.tpl-beauty-academy .site-nav__submenu {
  list-style: none; margin: 0; padding: 0.5rem 0;
  background: var(--color-bg); border: 1px solid var(--color-border-hairline); border-radius: 12px;
}
.tpl-beauty-academy .site-nav__sublink { font-family: var(--font-body); font-size: 0.9rem; text-decoration: none; color: var(--color-text); }
.tpl-beauty-academy .site-nav__sublink:hover { color: var(--color-accent); }

.tpl-beauty-academy .site-header__cta {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-button);
  transition: filter 140ms ease, transform 140ms ease;
}
.tpl-beauty-academy .site-header__cta:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* ---------------------------------------------------------------------------
 * Typography — Plus Jakarta Sans bold headings, ink colour
 * ------------------------------------------------------------------------ */
.tpl-beauty-academy .site-main h1,
.tpl-beauty-academy .site-main h2,
.tpl-beauty-academy .site-main h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--color-primary);
}
.tpl-beauty-academy .site-main .block__eyebrow {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.tpl-beauty-academy .t-accent { color: var(--color-accent); }

/* ---------------------------------------------------------------------------
 * Buttons — pink filled primary, ink-outline secondary, rounded + friendly
 * ------------------------------------------------------------------------ */
.tpl-beauty-academy .block .block__cta,
.tpl-beauty-academy .block .block__btn,
.tpl-beauty-academy .block .block__submit,
.tpl-beauty-academy .block .block__card-cta {
  border-radius: var(--radius-button);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.tpl-beauty-academy .block__cta--primary,
.tpl-beauty-academy .block__btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: 1px solid var(--color-accent);
}
.tpl-beauty-academy .block__cta--secondary,
.tpl-beauty-academy .block__btn--ghost,
.tpl-beauty-academy .block__btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-border-hairline-strong);
}

/* ---------------------------------------------------------------------------
 * Section rhythm + tones
 * ------------------------------------------------------------------------ */
.tpl-beauty-academy .site-main > .block { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.tpl-beauty-academy .site-main > .block--hero-fullbleed { padding-top: 0; padding-bottom: 0; }
.tpl-beauty-academy .block--tone-muted { background: var(--color-bg-muted); }
.tpl-beauty-academy .block--tone-inverse { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.tpl-beauty-academy .block--tone-inverse h1,
.tpl-beauty-academy .block--tone-inverse h2,
.tpl-beauty-academy .block--tone-inverse h3 { color: var(--color-text-inverse); }

/* ---------------------------------------------------------------------------
 * Course / product cards — rounded, soft, pink price (products-grid reused as
 * course cards AND the shop). Scoped tints only (Rule 4b).
 * ------------------------------------------------------------------------ */
.tpl-beauty-academy .block--products-grid .block__card { border-radius: var(--radius-card); overflow: hidden; }
.tpl-beauty-academy .block--products-grid .block__price,
.tpl-beauty-academy .block--products-grid .block__card-price { color: var(--color-accent); font-weight: 700; }
.tpl-beauty-academy .block--services-grid .block__card { border-radius: var(--radius-card); }
.tpl-beauty-academy .block--gallery-grid .block__card,
.tpl-beauty-academy .block--gallery-grid img { border-radius: var(--radius-image); }

/* ---------------------------------------------------------------------------
 * Footer — deep ink-navy, white text, the one dark moment
 * ------------------------------------------------------------------------ */
.tpl-beauty-academy .site-footer { background: var(--color-bg-inverse); color: var(--color-text-inverse-dim); }
.tpl-beauty-academy .site-footer__brand-text { font-family: var(--font-display); font-weight: 800; color: var(--color-text-inverse); }
.tpl-beauty-academy .site-footer a { color: var(--color-text-inverse); }
.tpl-beauty-academy .site-footer a:hover { color: var(--color-accent-soft); }
.tpl-beauty-academy .site-footer__bottom { color: var(--color-text-inverse-dim); }

/* ---------------------------------------------------------------------------
 * Mobile — collapse desktop nav + CTA at 860px
 * ------------------------------------------------------------------------ */
.tpl-beauty-academy .mobile-menu-toggle { display: none; }

@media (max-width: 860px) {
  .tpl-beauty-academy .site-nav--desktop { display: none; }
  .tpl-beauty-academy .site-header__cta { display: none; }
  .tpl-beauty-academy .mobile-menu-toggle { display: flex; }
  .tpl-beauty-academy .site-header__inner { min-height: 62px; }
  .tpl-beauty-academy .site-header__brand-name { font-size: 1.15rem; }
}