/*
Theme Name:  The Coaching Sanctuary
Theme URI:   https://rachel-m-harrison.com
Author:      Rachel M. Harrison
Author URI:  https://rachel-m-harrison.com
Description: Dark luxury coaching theme. Trauma-informed, sovereign, editorial. Built for speed.
Version:     4.0
License:     Proprietary
License URI: https://rachel-m-harrison.com/licensing
Text Domain: coaching-sanctuary
Tags:        coaching, dark, luxury, trauma-informed
*/

/* ═══════════════════════════════════════════════════════════
   THE COACHING SANCTUARY v4.0 — GLOBAL DESIGN SYSTEM
   Single source of truth. No duplicates. No inline overrides.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Color — ink */
  --ink:         #0A0A0B;
  --ink-soft:    #0F0F13;
  --ink-mid:     #141418;
  --ink-panel:   #1A1A1F;
  --ink-raised:  #202026;

  /* Color — gold */
  --gold:        #C9A84C;
  --gold-light:  #E8C97A;
  --gold-pale:   #F5EDD6;
  --gold-dim:    rgba(201,168,76,.13);
  --gold-border: rgba(201,168,76,.18);
  --gold-glow:   rgba(201,168,76,.28);

  /* Color — teal */
  --teal:        #0FBBCF;
  --teal-dim:    rgba(15,187,207,.12);

  /* Color — text */
  --text-primary:   #F7F3EC;
  --text-secondary: #C4BDB0;
  --text-muted:     #7A7570;
  --text-faint:     rgba(196,189,176,.4);

  /* Color — parchment (light surface) */
  --parchment:   #F7F3EC;

  /* Typography — single canonical set */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-caps:    'Cinzel', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* Layout */
  --max-w:       1280px;
  --content-w:   860px;
  --gap:         clamp(1.25rem, 4vw, 2.5rem);
  --section-v:   clamp(4.5rem, 9vw, 8rem);

  /* Motion */
  --ease:        cubic-bezier(.25,.46,.45,.94);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:    .18s;
  --dur-base:    .28s;
  --dur-slow:    .55s;
}

/* ── 2. RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background:  var(--ink);
  color:       var(--text-secondary);
  font-family: var(--font-body);
  font-size:   clamp(15px, 1.05vw + .5rem, 17px);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg {
  display:   block;
  max-width: 100%;
  height:    auto;
}

/* ── 3. TYPOGRAPHY ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  color:       var(--text-primary);
  margin-bottom: .75em;
}

h1 { font-size: clamp(2.2rem, 5vw, 4rem);   letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -.015em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.7rem); }
h4 { font-size: 1.1rem; }

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

a {
  color:           var(--gold);
  text-decoration: none;
  transition:      color var(--dur-fast) ease;
}
a:hover { color: var(--gold-light); }

strong { font-weight: 600; color: var(--text-primary); }

blockquote {
  border-left: 2px solid var(--gold-border);
  padding:     1.25rem 1.75rem;
  margin:      2rem 0;
  font-family: var(--font-display);
  font-size:   1.15rem;
  font-style:  italic;
  color:       var(--text-secondary);
  line-height: 1.8;
}

/* Eyebrow — reusable across all templates */
.eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            .75rem;
  font-family:    var(--font-body);
  font-size:      .68rem;
  font-weight:    600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--teal);
}
.eyebrow::before {
  content:    '';
  display:    block;
  width:      28px;
  height:     1px;
  background: currentColor;
  opacity:    .7;
  flex-shrink: 0;
}

/* Link arrow */
.link-arrow {
  display:     inline-flex;
  align-items: center;
  gap:         .45rem;
  font-family: var(--font-body);
  font-size:   .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:       var(--gold);
  text-decoration: none;
  transition:  gap var(--dur-base) var(--ease), color var(--dur-fast);
}
.link-arrow::after { content: '→'; transition: transform var(--dur-base) var(--ease); }
.link-arrow:hover  { color: var(--gold-light); gap: .7rem; }

/* ── 4. LAYOUT UTILITIES ───────────────────────────────────── */
.container {
  max-width:    var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.section {
  padding-block: var(--section-v);
}

.gold-rule {
  border:     none;
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--gold-border) 20%, var(--gold-border) 80%, transparent);
}

.divider {
  height:     1px;
  background: var(--gold-border);
  margin:     2.5rem 0;
}

/* ── 5. BUTTONS ────────────────────────────────────────────── */
.btn-primary {
  display:        inline-flex;
  align-items:    center;
  gap:            .5rem;
  padding:        .875rem 2rem;
  background:     var(--gold);
  color:          var(--ink);
  font-family:    var(--font-body);
  font-size:      .72rem;
  font-weight:    700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border:         1px solid var(--gold);
  transition:     background var(--dur-base), transform var(--dur-fast), box-shadow var(--dur-base);
  cursor:         pointer;
}
.btn-primary:hover {
  background:  var(--gold-light);
  color:       var(--ink);
  transform:   translateY(-2px);
  box-shadow:  0 8px 28px var(--gold-glow);
  text-decoration: none;
}

.btn-ghost {
  display:        inline-flex;
  align-items:    center;
  gap:            .5rem;
  padding:        .875rem 2rem;
  background:     transparent;
  color:          var(--gold);
  font-family:    var(--font-body);
  font-size:      .72rem;
  font-weight:    600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border:         1px solid var(--gold-border);
  transition:     border-color var(--dur-base), background var(--dur-base), color var(--dur-base), transform var(--dur-fast);
  cursor:         pointer;
}
.btn-ghost:hover {
  border-color:    var(--gold);
  background:      var(--gold-dim);
  color:           var(--gold-light);
  transform:       translateY(-2px);
  text-decoration: none;
}

.btn-row {
  display:     flex;
  gap:         1rem;
  flex-wrap:   wrap;
  align-items: center;
}

/* ── 6. ACCESSIBILITY ──────────────────────────────────────── */
.skip-link {
  position:   absolute;
  top:        -100%;
  left:       1rem;
  z-index:    9999;
  padding:    .5rem 1rem;
  background: var(--gold);
  color:      var(--ink);
  font-family: var(--font-body);
  font-size:  .875rem;
  font-weight: 700;
}
.skip-link:focus { top: 1rem; }

.screen-reader-text {
  border:      0;
  clip:        rect(1px,1px,1px,1px);
  clip-path:   inset(50%);
  height:      1px;
  margin:      -1px;
  overflow:    hidden;
  padding:     0;
  position:    absolute;
  width:       1px;
  word-wrap:   normal !important;
}

/* ── 7. SCROLL REVEAL ──────────────────────────────────────── */
.fade-up {
  opacity:    0;
  transform:  translateY(22px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}
.fade-up.visible { opacity: 1; transform: none; }

.stagger > * {
  opacity:    0;
  transform:  translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.stagger.visible > *:nth-child(2) { transition-delay: .08s; }
.stagger.visible > *:nth-child(3) { transition-delay: .16s; }
.stagger.visible > *:nth-child(4) { transition-delay: .24s; }
.stagger.visible > *:nth-child(5) { transition-delay: .32s; }
.stagger.visible > *:nth-child(6) { transition-delay: .40s; }
.stagger.visible > *:nth-child(7) { transition-delay: .48s; }
.stagger.visible > *:nth-child(8) { transition-delay: .56s; }
.stagger.visible > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fade-up, .stagger > *, .stagger.visible > * {
    transition: none !important;
    animation:  none !important;
    opacity:    1 !important;
    transform:  none !important;
  }
}

/* ── 8. HEADER ─────────────────────────────────────────────── */
.sanctuary-header {
  position:   fixed;
  top:        0; left: 0; right: 0;
  z-index:    1000;
  background: rgba(10,10,11,.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(201,168,76,.1);
  transition: background var(--dur-base), border-color var(--dur-base);
  will-change: background;
}
.sanctuary-header.scrolled {
  background:  rgba(10,10,11,.98);
  border-bottom-color: var(--gold-border);
}

.header-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  max-width:       var(--max-w);
  margin-inline:   auto;
  padding-inline:  clamp(1rem, 4vw, 2.5rem);
  height:          64px;
  gap:             1rem;
}

/* Left — editorial link */
.rise-link {
  font-family:    var(--font-body);
  font-size:      .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight:    600;
  color:          var(--text-muted);
  text-decoration: none;
  white-space:    nowrap;
  transition:     color var(--dur-fast);
}
.rise-link:hover { color: var(--gold); text-decoration: none; }

/* Center — menu */
.header-center { position: relative; }

.menu-trigger {
  background:     none;
  border:         none;
  color:          var(--text-secondary);
  font-family:    var(--font-body);
  font-size:      .7rem;
  font-weight:    600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  gap:            .4rem;
  padding:        .5rem .75rem;
  transition:     color var(--dur-fast);
}
.menu-trigger:hover { color: var(--gold); }
.menu-trigger .caret { font-size: .6rem; transition: transform var(--dur-base) var(--ease); }
.menu-trigger[aria-expanded="true"] .caret { transform: rotate(180deg); }

.dropdown-menu {
  display:     none;
  position:    absolute;
  top:         calc(100% + .625rem);
  left:        50%;
  transform:   translateX(-50%);
  background:  rgba(15,15,19,.98);
  border:      1px solid var(--gold-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  min-width:   260px;
  padding:     .5rem 0;
  z-index:     1001;
  box-shadow:  0 24px 48px rgba(0,0,0,.5);
}
.dropdown-menu.open { display: block; }

.header-menu { list-style: none; }
.header-menu li { position: relative; }
.header-menu a {
  display:     block;
  padding:     .55rem 1.5rem;
  font-family: var(--font-body);
  font-size:   .76rem;
  font-weight: 500;
  letter-spacing: .06em;
  color:       var(--text-secondary);
  text-decoration: none;
  transition:  color var(--dur-fast), background var(--dur-fast);
  white-space: nowrap;
}
.header-menu a:hover {
  color:       var(--gold);
  background:  var(--gold-dim);
  text-decoration: none;
}
.header-menu .current-menu-item > a { color: var(--gold); }
.header-menu .sub-menu {
  list-style:  none;
  display:     none;
  background:  rgba(10,10,11,.95);
  border-left: 2px solid var(--gold-border);
  margin-left: 1rem;
}
.header-menu li:hover > .sub-menu,
.header-menu li:focus-within > .sub-menu { display: block; }
.header-menu .sub-menu a { padding-left: 2rem; font-size: .72rem; color: var(--text-muted); }

/* Right — logo + CTA */
.header-right { display: flex; align-items: center; gap: .75rem; }

.header-book-btn {
  display:        inline-block;
  padding:        .5rem 1.1rem;
  border:         1px solid var(--gold);
  color:          var(--gold);
  font-family:    var(--font-body);
  font-size:      .67rem;
  font-weight:    700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space:    nowrap;
  transition:     background var(--dur-base), color var(--dur-base);
}
.header-book-btn:hover {
  background:      var(--gold);
  color:           var(--ink);
  text-decoration: none;
}

.logo-lockup {
  display:     flex;
  align-items: center;
  gap:         .625rem;
  text-decoration: none;
}
.logo-lockup:hover { text-decoration: none; }

.tiger-logo {
  width:         48px;
  height:        48px;
  border-radius: 50%;
  object-fit:    cover;
  flex-shrink:   0;
  border:        1px solid var(--gold-border);
  transition:    box-shadow var(--dur-base);
}
.logo-lockup:hover .tiger-logo { box-shadow: 0 0 0 1px var(--gold), 0 0 16px var(--gold-glow); }

.logo-name-text {
  display:        flex;
  flex-direction: column;
  line-height:    1.2;
}
.logo-name-text strong {
  font-family:    var(--font-display);
  font-size:      .85rem;
  font-weight:    400;
  color:          var(--text-primary);
  letter-spacing: .04em;
}
.logo-name-text span {
  font-family:    var(--font-body);
  font-size:      .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--text-muted);
}

/* Mobile FAB */
.mobile-book-fab {
  display:         none;
  position:        fixed;
  bottom:          1.25rem;
  left:            50%;
  transform:       translateX(-50%);
  z-index:         999;
  padding:         .875rem 2.5rem;
  background:      var(--gold);
  color:           var(--ink);
  font-family:     var(--font-body);
  font-size:       .75rem;
  font-weight:     700;
  letter-spacing:  .14em;
  text-transform:  uppercase;
  text-decoration: none;
  white-space:     nowrap;
  box-shadow:      0 4px 24px var(--gold-glow);
  transition:      background var(--dur-base), transform var(--dur-fast), box-shadow var(--dur-base);
}
.mobile-book-fab:hover {
  background:      var(--gold-light);
  color:           var(--ink);
  text-decoration: none;
  transform:       translateX(-50%) translateY(-2px);
  box-shadow:      0 8px 32px rgba(201,168,76,.4);
}

/* ── 9. FOOTER ─────────────────────────────────────────────── */
.site-footer {
  background:  var(--ink-soft);
  border-top:  1px solid var(--gold-border);
  padding:     4rem clamp(1.25rem,5vw,3rem) 2.5rem;
}

.footer-inner-wrap { max-width: 1180px; margin-inline: auto; }

.footer-top {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   clamp(1.5rem, 4vw, 3rem);
  padding-bottom:        3rem;
  border-bottom:         1px solid var(--gold-border);
  margin-bottom:         2rem;
}

.footer-logo-text {
  display:       block;
  font-family:   var(--font-display);
  font-size:     1.25rem;
  color:         var(--text-primary);
  margin-bottom: .75rem;
}

.footer-tagline {
  font-family: var(--font-display);
  font-size:   .92rem;
  font-style:  italic;
  color:       var(--text-muted);
  line-height: 1.75;
}

.footer-col h4 {
  font-family:    var(--font-body);
  font-size:      .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight:    700;
  color:          var(--gold);
  margin-bottom:  1rem;
}

.footer-col a {
  display:         block;
  font-family:     var(--font-body);
  font-size:       .8rem;
  color:           var(--text-muted);
  text-decoration: none;
  margin-bottom:   .5rem;
  transition:      color var(--dur-fast);
}
.footer-col a:hover { color: var(--text-secondary); text-decoration: none; }

.footer-bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             1rem;
}

.footer-copy {
  font-family: var(--font-body);
  font-size:   .75rem;
  color:       var(--text-faint);
}

.footer-social { display: flex; gap: 1.5rem; }
.footer-social a {
  font-family:     var(--font-body);
  font-size:       .7rem;
  letter-spacing:  .1em;
  text-transform:  uppercase;
  font-weight:     600;
  color:           var(--text-muted);
  text-decoration: none;
  transition:      color var(--dur-fast);
}
.footer-social a:hover { color: var(--gold); text-decoration: none; }

/* ── 10. BLOG / ENTRY CONTENT ──────────────────────────────── */
.entry-content {
  max-width:     var(--content-w);
  margin-inline: auto;
  padding:       5rem clamp(1.25rem, 5vw, 3rem);
}
.entry-content h1,
.entry-content h2,
.entry-content h3 { color: var(--text-primary); }
.entry-content a   { color: var(--gold); }
.entry-content a:hover { color: var(--gold-light); }

/* Cards */
.cards { list-style: none; display: grid; gap: 1px; background: var(--gold-border); border: 1px solid var(--gold-border); }
.card { background: var(--ink-mid); }
.card a { display: block; padding: 1.5rem 1.75rem; font-family: var(--font-display); font-size: 1.05rem; color: var(--text-secondary); text-decoration: none; transition: color var(--dur-fast), background var(--dur-fast); }
.card a:hover { color: var(--gold); background: var(--ink-raised); text-decoration: none; }

/* Pillars list */
.pillars { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .875rem; }
.pillars li { padding: 1.25rem 1.5rem; background: var(--ink-mid); border-left: 2px solid var(--gold-border); font-size: .96rem; line-height: 1.75; color: var(--text-secondary); transition: border-color var(--dur-base); }
.pillars li:hover { border-color: var(--gold); }
.pillars li strong { color: var(--gold); display: block; font-family: var(--font-caps); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .25rem; }

/* ── 11. THIRD-PARTY OVERRIDES ─────────────────────────────── */
/* WPConsent */
#wpconsent-root { font-family: var(--font-body) !important; }

/* WordPress admin bar offset */
@media screen and (min-width: 783px) { .sanctuary-header { top: 32px; } }
@media screen and (max-width: 782px) { .sanctuary-header { top: 46px; } }

/* ── 12. RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .mobile-book-fab  { display: block; }
  .header-book-btn  { display: none; }
}

@media (max-width: 640px) {
  .header-inner     { padding-inline: 1rem; height: 56px; }
  .logo-name-text   { display: none; }
  .rise-link        { display: none; }
  .footer-top       { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom    { flex-direction: column; text-align: center; }
  .footer-social    { justify-content: center; }
  .entry-content    { padding: 3rem 1.25rem; }
}

@media (min-width: 769px) { .mobile-book-fab { display: none; } }