/*
 * TownSites — Heritage theme CSS
 * Dark mode palette from marketing/style-guide.html (.sg-root.dark)
 * Toggle: html.dark class set by JS (localStorage + prefers-color-scheme)
 */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ── Design tokens ───────────────────────────────────────────────────────── */

:root {
  --ts-bg:            #FAFAF7;
  --ts-surface:       #FFFFFF;
  --ts-accent-bg:     #F0EDE4;
  --ts-border:        #E5E2D9;
  --ts-border-strong: #C9C5BA;
  --ts-navy:          #1F2D44;
  --ts-navy-deep:     #0F1A2E;
  --ts-navy-soft:     #3A4A66;
  --ts-gold:          #B8973F;
  --ts-gold-deep:     #8B6F1F;
  --ts-gold-soft:     #D4B968;
  --ts-beige:         #E8E3D5;
  --ts-beige-deep:    #B8B2A1;
  --ts-brown:         #5D4A33;
  --ts-text:          #1A1A1A;
  --ts-muted:         #5A5A55;
  --ts-eyebrow:       #8B6F1F;

  /* Section backgrounds (named for semantic use) */
  --ts-sec-hero:      #F0EDE4;
  --ts-sec-white:     #FFFFFF;
  --ts-sec-warm:      #F0EDE4;
  --ts-sec-beige:     #E8E3D5;
  --ts-sec-base:      #FAFAF7;
  --ts-sec-navy:      #1f2839;  /* scarcity section */

  /* Nav */
  --ts-nav-bg:        rgba(255,255,255,0.97);
  --ts-nav-border:    #E5E2D9;
}

html.dark {
  --ts-bg:            #1A1A1A;
  --ts-surface:       #242424;
  --ts-accent-bg:     #2E2E2E;
  --ts-border:        #2E2E2E;
  --ts-border-strong: #4A4A4A;
  --ts-navy:          #848c98;   /* navy inverts to a soft steel blue */
  --ts-navy-deep:     #1F2D44;
  --ts-navy-soft:     #a1a7b0;
  --ts-gold:          #D4B968;
  --ts-gold-deep:     #B8973F;
  --ts-gold-soft:     #E8D89A;
  --ts-beige:         #333333;
  --ts-beige-deep:    #5A5A5A;
  --ts-brown:         #C9C5BA;
  --ts-text:          #F0EDE4;
  --ts-muted:         #9A9A95;
  --ts-eyebrow:       #D4B968;

  --ts-sec-hero:      #1E1E1E;
  --ts-sec-white:     #242424;
  --ts-sec-warm:      #2A2A2A;
  --ts-sec-beige:     #2E2C28;
  --ts-sec-base:      #1A1A1A;
  --ts-sec-navy:      #1f2839;  /* scarcity goes deeper in dark */

  --ts-nav-bg:        rgba(26,26,26,0.97);
  --ts-nav-border:    #2E2E2E;
}

/* ── Base ────────────────────────────────────────────────────────────────── */

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--ts-bg);
  color: var(--ts-text);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background 0.2s, color 0.2s;
}

/* ── Admin bar offset ────────────────────────────────────────────────────── */
/*
 * WP adds html { margin-top: 32px } (desktop) / 46px (mobile ≤782px).
 * We use a CSS variable --ts-hero-pt so the inline style on #hero
 * picks up the admin-bar override without specificity fights.
 *
 * Nav:  shifted down by the same amount via top: <bar-height>
 * Hero: padding-top bumped by the same amount
 */

:root {
  --ts-hero-pt: 120px;   /* base hero top padding */
  --ts-nav-top: 0px;     /* base nav top position */
}

/* Desktop admin bar: 32px */
body.admin-bar {
  --ts-hero-pt: 152px;   /* 120 + 32 */
  --ts-nav-top: 32px;
}

/* Mobile admin bar: 46px (WP collapses to 46px at ≤782px) */
@media screen and (max-width: 782px) {
  body.admin-bar {
    --ts-hero-pt: 166px; /* 120 + 46 */
    --ts-nav-top: 46px;
  }
}

#site-nav { top: var(--ts-nav-top) !important; }
#hero     { padding-top: var(--ts-hero-pt) !important; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */

#site-nav {
  background: var(--ts-nav-bg) !important;
  border-bottom-color: var(--ts-nav-border) !important;
  transition: background 0.2s, border-color 0.2s;
}

/* ── Dark mode toggle (style-guide sg-toggle pattern) ────────────────────── */

#ts-dark-toggle {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: transparent;
  color: var(--ts-muted);
  border: 1px solid var(--ts-border-strong);
  padding: 6px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

#ts-dark-toggle:hover {
  background: var(--ts-accent-bg);
  color: var(--ts-text);
  border-color: var(--ts-gold);
}

#ts-dark-toggle .ts-toggle-icon { font-size: 13px; line-height: 1; }

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */

.ts-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ts-eyebrow);
  margin-bottom: 18px;
}

.ts-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--ts-gold);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.ts-btn-gold, .ts-btn-gold-lg {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  background: var(--ts-gold);
  color: var(--ts-surface);
  border: none;
  border-radius: 100px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.ts-btn-gold     { font-size: 13px; padding: 13px 26px; }
.ts-btn-gold-lg  { font-size: 15px; font-weight: 700; padding: 16px 40px; }
.ts-btn-gold:hover, .ts-btn-gold-lg:hover { background: var(--ts-gold-soft); }

.ts-btn-outline {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  color: var(--ts-text);
  border: 1px solid var(--ts-border-strong);
  border-radius: 100px;
  padding: 12px 26px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ts-btn-outline:hover { background: var(--ts-accent-bg); border-color: var(--ts-gold); }

/* ── Tags ────────────────────────────────────────────────────────────────── */

.ts-tag-beige {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  background: var(--ts-beige); color: var(--ts-brown);
  padding: 5px 12px; border-radius: 100px; display: inline-block;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */

.ts-card {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: 6px;
  padding: 28px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.ts-card:hover { border-color: var(--ts-gold); box-shadow: 0 4px 20px rgba(31,45,68,0.08); }

/* ── Math box top bar ────────────────────────────────────────────────────── */

.ts-math-box { position: relative; }
.ts-math-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--ts-border); border-radius: 6px 6px 0 0;
}
.ts-math-box.featured::before { background: var(--ts-gold); }

/* ── Step vertical line ──────────────────────────────────────────────────── */

.ts-auto-vline { width: 1px; flex: 1; background: var(--ts-border); margin-top: 6px; }

/* ── Hero grid ───────────────────────────────────────────────────────────── */

.ts-hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(31,45,68,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,45,68,0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  transition: opacity 0.2s;
}
html.dark .ts-hero-grid { opacity: 0.4; }

/* ── Animations ──────────────────────────────────────────────────────────── */

@keyframes ts-blink  { 0%,100%{opacity:1} 50%{opacity:0.25} }
@keyframes ts-blink2 { 0%,100%{opacity:1} 50%{opacity:0.2}  }

.ts-scarcity-badge-dot {
  display: inline-block; width: 6px; height: 6px;
  background: var(--ts-gold-soft); border-radius: 50%;
  margin-right: 8px; animation: ts-blink 2s infinite;
}

.ts-live-dot {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(250,250,247,0.35); margin-top: 20px; gap: 8px;
}
.ts-live-dot::before {
  content: ''; width: 6px; height: 6px;
  background: #4ADE80; border-radius: 50%; animation: ts-blink2 2s infinite;
}

/* ── iPad mockup ─────────────────────────────────────────────────────────── */

.ts-ipad-outer {
  width: 540px; background: #1A1A1E; border-radius: 36px;
  padding: 18px 16px 28px; position: relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.07),
              0 2px 0 1px rgba(255,255,255,0.03) inset,
              0 30px 80px rgba(31,45,68,0.22),
              0 8px 24px rgba(31,45,68,0.12);
}
.ts-ipad-outer::before {
  content: ''; position: absolute; left: -3px; top: 120px;
  width: 3px; height: 36px; background: #2A2A2E;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 50px 0 #2A2A2E, 0 100px 0 #2A2A2E;
}
.ts-ipad-outer::after {
  content: ''; position: absolute; right: -3px; top: 160px;
  width: 3px; height: 60px; background: #2A2A2E; border-radius: 0 2px 2px 0;
}
.ts-ipad-frame-wrap {
  width: 100%; height: 680px; overflow: hidden;
  position: relative; border-radius: 6px;
}
.ts-ipad-frame {
  width: 768px; height: 1400px; border: none; display: block;
  transform-origin: top left; transform: scale(0.664);
}