/* Template: premium-academic/skin.css
 * Anchors: bonasmacfarlane.co.uk (Klim Fields + Sharp Elza Text), Keystone
 * Tutors, Holland Park. Owns: deep-navy/white palette, editorial serif
 * display at generous sizes, calm solid white header (NOT sticky-floating),
 * multi-column footer.
 * Inherits structural chrome from /_shared/styles/chrome.css.
 */

:root {
  --color-primary:           #02254b;            /* deep navy — text + brand */
  --color-bg:                #ffffff;            /* white */
  --color-accent:            #b08442;            /* warm muted gold for CTAs */
  --color-text:              #02254b;
  --color-muted:             #5a6b7e;
  --color-muted-bg:          #f3f6f8;            /* very pale blue — section bands */
  --color-secondary-bg:      #efefec;            /* ivory — alternate band */
  --color-border-hairline:   rgba(2, 37, 75, 0.10);
  --color-divider-inverse:   rgba(255, 255, 255, 0.18);
  --color-soft-shadow:       rgba(2, 37, 75, 0.06);
  --color-text-inverse:      #ffffff;             /* white text on the navy footer */
  --color-on-accent:         var(--color-primary); /* text ON accent buttons — sites with a DARK accent override this to #fff via settings */
  --color-footer-text:       #E8DFCD;             /* warm ivory — footer body + links */

  /* Cormorant Garamond proxies the premium serif register (Fields / Caslon).
   * Inter proxies the clean humanist sans (Elza Text / Söhne). Both can be
   * swapped per-client via design.fonts in the intake. */
  --font-display:            'Cormorant Garamond', 'Libre Caslon Display', Georgia, serif;
  --font-body:               'Inter', 'Manrope', 'Söhne', system-ui, -apple-system, sans-serif;

  --space-section:           clamp(4rem, 10vw, 8rem);
  --space-content:           clamp(1rem, 4vw, 3rem);

  --radius-card:             4px;
  --radius-button:           2px;     /* premium gravitas — minimal radius */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- Top header (solid white, hairline bottom — NOT sticky) --- */
.tpl-premium-academic .site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-hairline);
  position: relative;
  z-index: 100;
}
.tpl-premium-academic .site-header__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.1rem clamp(1rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 3rem);
  gap: 2rem;
}
/* Brand: logo BESIDE the text. Name + tagline live in .site-header__brand-copy
   so the text centres vertically against the logo whether it's one line
   (tagline only) or two (name + tagline) — the old stacked column made the nav
   ~110px tall on sites with a logo image (Onur, 2026-06-16). */
.tpl-premium-academic .site-header__brand {
  text-decoration: none;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  column-gap: 0.7rem;
  line-height: 1;
  flex: 0 1 auto; min-width: 0; max-width: 48%;
}
.tpl-premium-academic .site-header__brand-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.tpl-premium-academic .site-header__brand-name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.1vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
/* Long brand names yield space to the nav: the brand may wrap, the nav must
   not compress its labels into mid-word breaks. */
.tpl-premium-academic .site-nav--desktop { flex-shrink: 0; }
.tpl-premium-academic .site-header__brand-tagline {
  margin-top: 0.1rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* Desktop nav — letter-spaced small caps, gravitas */
.tpl-premium-academic .site-nav--desktop .site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 3rem); /* compresses before labels would wrap */
}
.tpl-premium-academic .site-nav__link {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.78;
  transition: opacity 0.2s ease;
}
.tpl-premium-academic .site-nav__link:hover,
.tpl-premium-academic .site-nav__link.is-active {
  opacity: 1;
}

/* ---------- Main column ---------------------------------------------- */
.tpl-premium-academic .site-main { min-height: 50vh; }

/* ---------- Scroll-reveal — restrained gravitas version ------------- */
/* Same mechanism as therapist-warm but with smaller distance + slower
 * duration matching the premium-academic motion vocabulary. */
body.js-reveal-ready.tpl-premium-academic .block {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1300ms cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 1300ms cubic-bezier(0.16, 0.84, 0.44, 1);
  will-change: opacity, transform;
}
body.js-reveal-ready.tpl-premium-academic .block.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Gravitas-grade entrance animation ----------------------- */
/* Different motion vocabulary than therapist-warm. Premium-academic wants
 * RESTRAINT: slower (1.2s), smaller rise (8px not 14px), minimal stagger
 * (60ms across just 2 groups not waves across 6). The point is "considered",
 * not "alive". Respects prefers-reduced-motion. */
/* @keyframes MUST be top-level (not nested in @media) — some parsers abort
 * the rest of the stylesheet on @keyframes-inside-@media. */
@keyframes tpl-premium-academic-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .tpl-premium-academic .block--hero-fullbleed .block__eyebrow,
  .tpl-premium-academic .block--hero-fullbleed .block__headline,
  .tpl-premium-academic .block--hero-fullbleed .block__subheading,
  .tpl-premium-academic .block--hero-fullbleed .block__cta,
  .tpl-premium-academic .block--hero-text-only .block__eyebrow,
  .tpl-premium-academic .block--hero-text-only .block__headline,
  .tpl-premium-academic .block--hero-text-only .block__subheading,
  .tpl-premium-academic .block--hero-text-only .block__cta {
    animation: tpl-premium-academic-rise 1200ms cubic-bezier(0.16, 0.84, 0.44, 1) both;
  }
  /* Minimal 2-group stagger: hero copy first, CTA shortly after */
  .tpl-premium-academic .block--hero-fullbleed .block__eyebrow,
  .tpl-premium-academic .block--hero-fullbleed .block__headline,
  .tpl-premium-academic .block--hero-fullbleed .block__subheading,
  .tpl-premium-academic .block--hero-text-only .block__eyebrow,
  .tpl-premium-academic .block--hero-text-only .block__headline,
  .tpl-premium-academic .block--hero-text-only .block__subheading {
    animation-delay: 0ms;
  }
  .tpl-premium-academic .block--hero-fullbleed .block__cta,
  .tpl-premium-academic .block--hero-text-only .block__cta {
    animation-delay: 240ms;
  }
}

/* Hover transitions — slower, deliberate, no translateY bounce.
 * Gravitas doesn't bounce. Subtle opacity shift only. */
.tpl-premium-academic a,
.tpl-premium-academic .block__cta,
.tpl-premium-academic .block__btn,
.tpl-premium-academic .site-nav__link {
  transition: opacity 400ms ease, background-color 400ms ease, color 400ms ease;
}
.tpl-premium-academic .block__cta:hover,
.tpl-premium-academic .block__btn:hover {
  opacity: 0.85;
}

/* ---------- Footer (deep-navy surface, gold top rule, multi-column) -- */
.tpl-premium-academic .site-footer {
  background: var(--color-primary);
  color: var(--color-footer-text);
  padding: 4.5rem clamp(1rem, 4vw, 3rem) 2.5rem;
  margin-top: var(--space-section);
  border-top: 3px solid var(--color-accent);
}
.tpl-premium-academic .site-footer__brand-text { color: var(--color-text-inverse); }
.tpl-premium-academic .site-footer__contact-link,
.tpl-premium-academic .site-footer__social-link { color: var(--color-footer-text); }
.tpl-premium-academic .site-footer__contact-link:hover,
.tpl-premium-academic .site-footer__social-link:hover { color: var(--color-accent); opacity: 1; }
.tpl-premium-academic .site-footer__bottom { border-top-color: var(--color-divider-inverse); }
.tpl-premium-academic .site-footer__inner {
  max-width: 1320px;
  margin: 0 auto;
}
.tpl-premium-academic .site-footer__brand-text {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  display: block;
  margin-bottom: 0.5rem;
}
.tpl-premium-academic .site-footer__copy {
  opacity: 0.78;
  max-width: 42ch;
  font-size: 0.92rem;
  line-height: 1.6;
}
.tpl-premium-academic .site-footer__contact-link,
.tpl-premium-academic .site-footer__social-link {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}
.tpl-premium-academic .site-footer__contact-link:hover,
.tpl-premium-academic .site-footer__social-link:hover {
  opacity: 1;
}
.tpl-premium-academic .site-footer__bottom {
  max-width: 1320px;
  margin: 3rem auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border-hairline);
  text-align: center;
  font-size: 0.74rem;
  opacity: 0.55;
  letter-spacing: 0.08em;
}

/* ==================================================================
 * BRAND EXPRESSION LAYER (premium-academic)
 * The skeleton declared a palette but never painted with the accent and
 * stretched the logo. This layer makes navy + gold actually READ:
 * gold small-caps eyebrows + rule, gold figures, gold CTAs, navy footer.
 * Scoped to .tpl-premium-academic so other skeletons are untouched.
 * ================================================================== */

/* Keep the logo at natural size so it isn't stretched to the text width. */
.tpl-premium-academic .site-brand-logo { flex: 0 0 auto; width: auto; max-width: none; }

/* Eyebrows carry the gold — the premium-stationery signature. Gold text +
 * a short gold hairline beneath, alignment-following. */
.tpl-premium-academic .block__eyebrow {
  color: var(--color-accent);
  opacity: 1;
  font-weight: 600;
  display: inline-block;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--color-accent);
}

/* Stat figures + inline read-more links in gold */
.tpl-premium-academic .block--stats .block__number { color: var(--color-accent); }
.tpl-premium-academic .block__card-cta,
.tpl-premium-academic .block__more-link {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* Primary CTA = the one confident gold moment (gold fill, navy ink).
 * Secondary/ghost = gold hairline outline. The `.block` ancestor + !important
 * beat the per-block button rules that otherwise keep the primary ivory. */
.tpl-premium-academic .block .block__btn--primary,
.tpl-premium-academic .block a.block__cta--primary {
  background: var(--color-accent) !important;
  color: var(--color-on-accent, var(--color-primary)) !important;
  border: 1px solid var(--color-accent) !important;
}
/* Generous, tappable padding — PRIMARY CTAs only (not secondary text-links,
   which are .block__cta without --primary). 0.95rem felt cramped (Onur,
   2026-06-16). */
.tpl-premium-academic .block .block__cta--primary,
.tpl-premium-academic .block .block__btn--primary {
  padding: 1.15rem 2.6rem !important;
}
.tpl-premium-academic .block__btn--ghost {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

/* Hero: cap the tall hero so its CTA never clips below the fold. */
.tpl-premium-academic .block--hero-fullbleed.block--height-tall { min-height: 80vh; }

/* ---------- Mobile breakpoint ---------------------------------------- */
@media (max-width: 800px) {
  .tpl-premium-academic .site-nav--desktop { display: none; }
  .tpl-premium-academic .mobile-menu-toggle { display: flex; }
  .tpl-premium-academic .site-header__inner {
    padding: 1.1rem clamp(1rem, 4vw, 3rem);
  }
  .tpl-premium-academic .site-header__brand-name {
    font-size: 1.35rem;
  }
  .tpl-premium-academic .site-header__brand-tagline {
    font-size: 0.62rem;
    letter-spacing: 0.2em;
  }
}