/* ============================================================
   Humequine Learning Center. humequine-base.css
   Tokens, fonts, reset, type, layout, buttons, nav, footer, page.
   Source of truth for every value: 02-brands/humequine/brand-visual-spec.md (locked 2026-09-29).
   Light mode is the default. Dark mode is a full token swap under prefers-color-scheme.
============================================================ */

/* ============================================================
   FONTS. Self-hosted. Cormorant (display) and Inter (body).
   The display face is Cormorant, NOT Cormorant Garamond: a related but different family
   (Leah, 2026-10-08; brand-visual-spec.md section 2). Both files are cut from Cormorant.
   The ?v= on the two Cormorant files is there because they replaced Cormorant Garamond
   files of the same name and the server caches fonts for a day. Change it whenever one of
   those files changes, and keep hq_preload_fonts() in functions.php in step.
============================================================ */
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/Cormorant-SemiBold.woff2?v=2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/Cormorant-Medium.woff2?v=2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Alias, same two Cormorant files under the old family name. The theme no longer uses this
   name. It is kept so that CSS the theme does not own and that may still say
   'Cormorant Garamond' (styles inside a published article, which is frozen and never
   edited, or Additional CSS) renders in Cormorant instead of dropping to Georgia. On
   2026-10-08 no served page used the name: the six articles spend var(--font-display). */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/Cormorant-SemiBold.woff2?v=2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/Cormorant-Medium.woff2?v=2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   TOKENS. One name per value.
============================================================ */
:root {
  color-scheme: light dark;

  /* Palette, light */
  --teal:             #0B4B4D;
  --teal-ink:         #08393A;
  --teal-tint:        #E8F0F0;
  --teal-tint-strong: #D7E6E5;
  --gold:             #B08A2E;
  --gold-button:      #C19023;   /* fill of gold buttons only (spec palette.gold_button, Leah 2026-10-09). Rules, borders, highlights and gold text stay on --gold. */
  --gold-strong:      #AD8420;
  --gold-soft:        #E7D9B4;
  --bg:               #F5F0E8;
  --surface:          #FDFAF5;
  --surface-2:        #EFE7D8;
  --text:             #1C1C1C;
  --text-muted:       #6E5B3E;
  --line:             rgba(11, 75, 77, 0.14);

  /* Inverted section (teal_ink ground on a light page) */
  --on-teal:          var(--bg);
  --on-teal-heading:  var(--surface);
  --on-teal-muted:    var(--gold-soft);
  --on-teal-line:     rgba(245, 240, 232, 0.14);
  --on-teal-ghost:    rgba(245, 240, 232, 0.30);

  /* Typography */
  --font-display: 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --weight-display-h1: 600;   /* H1, H2 */
  --weight-display-h3: 500;   /* H3, H4, pull quotes */
  --weight-regular:    400;
  --weight-medium:     500;   /* labels, UI */
  --weight-semibold:   600;   /* buttons, eyebrows */

  /* Type scale (fluid) */
  --text-h1:   clamp(40px, 5vw, 64px);
  --text-h2:   clamp(30px, 3.6vw, 44px);
  --text-h3:   clamp(22px, 2.2vw, 30px);
  --text-sub:  clamp(17px, 1.5vw, 20px);
  --text-body: clamp(14px, 1.07vw, 16px);   /* Leah, 2026-10-07: 14 to 16 fluid (was 16 to 18). 16px from 1500px wide. */
  --text-cap:  13px;

  /* Spacing */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  80px;
  --space-2xl: 120px;

  /* Layout */
  --container-max: 1180px;
  --container-pad: 48px;
  --section-gap:   80px;

  /* UI */
  /* ONE CORNER, 8px (Leah, 2026-10-07; brand-visual-spec section 4, web_components.corner).
     Buttons, boxes and cards, tabs and fields share it, here and on the store. The three names
     are kept because the theme and the published articles' own styles spend them; they were
     4px (buttons), 6px (cards, images) and 12px (the guide band). Pills, circles and the 2px
     softening on cover images keep their own values. */
  --radius-sm:  8px;
  --radius-md:  8px;
  --radius-lg:  8px;
  --transition: 180ms ease;
}

/* Dark mode: full token swap, never an opacity or filter trick. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --teal:             #6FA3A0;
    --teal-ink:         #0B1917;
    --teal-tint:        #16211E;
    --teal-tint-strong: #1C2825;
    --gold:             #D9B466;
    --gold-button:      #D9B466;   /* unchanged in dark mode: no dark value ruled */
    --gold-strong:      #E9C87D;
    --gold-soft:        rgba(217, 180, 102, 0.16);
    --bg:               #0E1614;
    --surface:          #16211E;
    --surface-2:        #1C2825;
    --text:             #F0EAE0;
    --text-muted:       #B9A889;
    --line:             rgba(240, 234, 224, 0.14);
    --on-teal:          #F0EAE0;
    --on-teal-heading:  #F0EAE0;
    --on-teal-muted:    #B9A889;
    --on-teal-line:     rgba(240, 234, 224, 0.14);
    --on-teal-ghost:    rgba(240, 234, 224, 0.30);
  }
}
:root[data-theme="dark"] {
  --teal:             #6FA3A0;
  --teal-ink:         #0B1917;
  --teal-tint:        #16211E;
  --teal-tint-strong: #1C2825;
  --gold:             #D9B466;
  --gold-button:      #D9B466;   /* unchanged in dark mode: no dark value ruled */
  --gold-strong:      #E9C87D;
  --gold-soft:        rgba(217, 180, 102, 0.16);
  --bg:               #0E1614;
  --surface:          #16211E;
  --surface-2:        #1C2825;
  --text:             #F0EAE0;
  --text-muted:       #B9A889;
  --line:             rgba(240, 234, 224, 0.14);
  --on-teal:          #F0EAE0;
  --on-teal-heading:  #F0EAE0;
  --on-teal-muted:    #B9A889;
  --on-teal-line:     rgba(240, 234, 224, 0.14);
  --on-teal-ghost:    rgba(240, 234, 224, 0.30);
}


/* ============================================================
   RESET AND BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-width: 320px;
}

img    { display: block; max-width: 100%; height: auto; }
a      { text-decoration: none; color: inherit; }
ul     { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 200;
  padding: 8px 12px;
  background: var(--gold);
  color: var(--text);
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: 8px; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }


/* ============================================================
   TYPOGRAPHY
============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--teal);
  line-height: 1.15;
  letter-spacing: -0.005em;
}
h1, h2 { font-weight: var(--weight-display-h1); }
h3, h4 { font-weight: var(--weight-display-h3); }

h1 { font-size: var(--text-h1); line-height: 1.08; }
h2 { font-size: var(--text-h2); line-height: 1.15; }
h3 { font-size: var(--text-h3); line-height: 1.25; }
h4 { font-size: var(--text-sub); }

p { line-height: 1.7; }

/* Eyebrow. Uppercase via CSS, exempt from sentence case. */
.section-label {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-cap);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}


/* ============================================================
   LAYOUT
============================================================ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

section { padding: var(--section-gap) 0; }


/* ============================================================
   BUTTONS (brand-visual-spec web_components.button)
   primary: gold on light, text charcoal.   teal: teal fill, text cream.
   ghost: transparent, teal text, line border.
   on_teal: gold fill on a teal panel, text charcoal.
   ghost_on_teal: transparent, cream text, cream-alpha border.
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 14px 28px;
  min-height: 48px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-1px); }

.btn-primary,
.btn-on-teal {
  background: var(--gold-button);
  color: var(--text);
  border-color: var(--gold-button);
}
.btn-primary:hover,
.btn-on-teal:hover { background: var(--gold-strong); border-color: var(--gold-strong); }

.btn-teal {
  background: var(--teal);
  color: var(--bg);
  border-color: var(--teal);
}
.btn-teal:hover { background: var(--teal-ink); border-color: var(--teal-ink); }

.btn-ghost {
  background: transparent;
  color: var(--teal);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--teal); }

.btn-ghost-on-teal {
  background: transparent;
  color: var(--on-teal);
  border-color: var(--on-teal-ghost);
}
.btn-ghost-on-teal:hover { border-color: var(--on-teal); }

.btn-compact { padding: 10px 20px; font-size: 14px; min-height: 40px; }


/* ============================================================
   NAV
============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  height: 72px;
  display: flex;
  align-items: center;
  width: 100%;
}

.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
}

.nav-brand { display: block; flex-shrink: 0; }
.nav-logo  { width: 172px; height: auto; display: block; }
/* Dark ground takes the inverse lockup (brand-visual-spec logo placement: on_teal uses lockup_inverse). */
.nav-logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-logo--light { display: none; }
  :root:not([data-theme="light"]) .nav-logo--dark  { display: block; }
}
:root[data-theme="dark"] .nav-logo--light { display: none; }
:root[data-theme="dark"] .nav-logo--dark  { display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 15px;
  color: var(--teal);
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--transition);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { border-bottom-color: var(--gold); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
  transition: var(--transition);
}


/* ============================================================
   PLAIN PAGE (privacy policy, 404)
============================================================ */
.section-page { background: var(--bg); padding: var(--space-xl) 0 var(--space-2xl); }
.page-inner   { max-width: 800px; }
.page-title   { margin-bottom: var(--space-lg); }


/* ============================================================
   ENTRY CONTENT (shared by page and single)
============================================================ */
/* Article and page copy follows the body size (Leah, 2026-10-07: 14 to 16 fluid; it was a fixed 17px). */
.entry-content { font-size: var(--text-body); line-height: 1.85; color: var(--text); }
.entry-content h2 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.entry-content h3 { margin-top: var(--space-lg); margin-bottom: var(--space-sm); }
.entry-content h4 { margin-top: var(--space-md); margin-bottom: var(--space-xs); }
.entry-content p  { margin-bottom: var(--space-md); }
.entry-content ul, .entry-content ol { padding-left: 24px; margin-bottom: var(--space-md); }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 8px; }
.entry-content a  { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }
.entry-content a:hover { color: var(--gold-strong); }
.entry-content strong { font-weight: var(--weight-semibold); }
.entry-content blockquote {
  border-left: 3px solid var(--gold);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-lg) 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display-h3);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--teal);
}
.entry-content img { border-radius: var(--radius-md); margin: var(--space-md) 0; }
.entry-content figure { margin: var(--space-lg) 0; }
.entry-content figcaption { font-size: 13px; color: var(--text-muted); text-align: center; margin-top: 8px; }
.entry-content table { width: 100%; border-collapse: collapse; margin: var(--space-md) 0; font-size: 15px; }
.entry-content th, .entry-content td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.entry-content th { font-weight: var(--weight-semibold); color: var(--teal); }
.entry-content hr { border: 0; border-top: 1px solid var(--gold-soft); margin: var(--space-lg) 0; }
/* Buttons placed inside content keep their own colours over the link rule above. */
.entry-content a.btn { text-decoration: none; }
.entry-content a.btn-primary, .entry-content a.btn-on-teal { color: var(--text); }
.entry-content a.btn-primary:hover, .entry-content a.btn-on-teal:hover { color: var(--text); }
.entry-content a.btn-teal, .entry-content a.btn-teal:hover { color: var(--bg); }
.entry-content a.btn-ghost { color: var(--teal); }
.entry-content a.btn-ghost-on-teal { color: var(--on-teal); }


/* ============================================================
   FOOTER. Inverted section on teal_ink.
============================================================ */
.site-footer {
  background: var(--teal-ink);
  color: var(--on-teal);
  padding: 72px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 56px;
}

.footer-brand__link { display: inline-block; margin-bottom: 20px; }
.footer-logo { width: 200px; height: auto; display: block; }

.footer-tagline {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 14px;
  color: var(--on-teal);
  line-height: 1.65;
  margin-bottom: 6px;
}
.footer-anchor {
  font-family: var(--font-display);
  font-weight: var(--weight-display-h3);
  font-style: italic;
  font-size: 20px;
  color: var(--on-teal-muted);
  line-height: 1.4;
}

/* A label above a body of text is never smaller than that body (brand-visual-spec section 2,
   Leah 2026-10-06). The column title is the size of the links under it, heavier, sentence case. */
.footer-col-title {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 14px;
  color: var(--on-teal-heading);
  margin-bottom: 18px;
}

.footer-list li { margin-bottom: 10px; }
.footer-list li a {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--on-teal);
  opacity: 0.85;
  transition: opacity var(--transition), color var(--transition);
}
.footer-list li a:hover { opacity: 1; color: var(--gold-strong); }

.footer-legal { border-top: 1px solid var(--on-teal-line); padding: 24px 0 28px; }

.footer-address {
  font-style: normal;
  font-size: 13px;
  color: var(--on-teal);
  opacity: 0.85;
  line-height: 1.8;
  margin-bottom: 12px;
}
.footer-address a { text-decoration: underline; text-underline-offset: 3px; }
.footer-entity { font-weight: var(--weight-medium); }
.footer-sep { margin: 0 8px; opacity: 0.6; }
.footer-tbc {
  display: inline-block;
  padding: 0 6px;
  border: 1px dashed var(--gold);
  border-radius: 3px;
  color: var(--gold-strong);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.footer-copy { font-size: 13px; color: var(--on-teal); opacity: 0.7; }

.social-row { display: flex; gap: 12px; }
.social-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--on-teal-line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-teal);
  transition: border-color var(--transition), color var(--transition);
}
.social-btn:hover { border-color: var(--gold); color: var(--gold-strong); }


/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  :root { --container-pad: 32px; }
}

@media (max-width: 768px) {
  :root { --section-gap: 60px; --container-pad: 20px; }

  .site-nav { height: 64px; }
  .site-nav .container { gap: var(--space-sm); }
  .nav-toggle { display: flex; order: 1; }
  .nav-brand  { order: 2; flex: 1; display: flex; justify-content: center; }
  .nav-logo   { width: 150px; }
  .nav-cta    { order: 3; }

  .nav-links {
    order: 4;
    display: none;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
    z-index: 99;
  }
  .nav-links--open { display: flex; }
  .nav-links a { padding: 12px var(--container-pad); width: 100%; border-bottom: 0; }
  .nav-links a[aria-current="page"] { color: var(--gold-strong); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 480px) {
  :root { --section-gap: 48px; }
  .nav-logo { width: 128px; }
  .nav-cta  { padding: 8px 12px; font-size: 13px; min-height: 36px; }
  .site-footer { padding-top: 48px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-sep  { display: none; }
  .footer-address span, .footer-address a { display: block; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}