/* ═══════════════════════════════════════════════════════════════════════════
   Ishmael — base.css
   Shared CSS infrastructure for all Ishmael-managed sites.
   
   DO NOT put business-specific colors here.
   Brand tokens (--color-brand-*) are defined in each business's main.css
   and injected before this file via builder.py concatenation.

   Token names map to the Tailwind gray scale used in templates:
     --color-bg-base    → replaces bg-gray-950
     --color-bg-card    → replaces bg-gray-900
     --color-bg-surface → replaces bg-gray-800
     --color-border     → replaces border-gray-700/800
     --color-text-base  → replaces text-gray-100
     --color-text-muted → replaces text-gray-400
     --color-text-sub   → replaces text-gray-300
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Always show the vertical scrollbar so its width (≈6px here) is reserved on
   every page and load state. The menu lives in a position:fixed nav; if the
   scrollbar appears on long pages / late in load and is absent otherwise, the
   fixed nav re-centers and the whole header jumps sideways by the scrollbar
   width. A permanently-present scrollbar keeps the viewport width constant. */
html { scroll-behavior: smooth; overflow-y: scroll; }

/* ── Dark theme tokens (default) ── */
:root {
  --color-bg-base:    #030712;
  --color-bg-card:    #111827;
  --color-bg-surface: #1f2937;
  --color-border:     #374151;
  --color-text-base:  #f3f4f6;
  --color-text-sub:   #d1d5db;
  --color-text-muted: #9ca3af;
  --color-nav-bg:     #030712;
  --color-nav-border: #1f2937;
  --color-footer-bg:  #111827;
  --hero-gradient-start: #0a0f1e;
  --hero-gradient-mid:   #0d1a2e;
  --hero-gradient-end:   #0a1628;
}

/* ── Light theme — OS preference ── */
@media (prefers-color-scheme: light) {
  :root {
    --color-bg-base:    #ffffff;
    --color-bg-card:    #f9fafb;
    --color-bg-surface: #f3f4f6;
    --color-border:     #e5e7eb;
    --color-text-base:  #111827;
    --color-text-sub:   #374151;
    --color-text-muted: #6b7280;
    --color-nav-bg:     #030712;    /* nav always dark */
    --color-nav-border: #1f2937;    /* nav always dark */
    --color-footer-bg:  #111827;    /* footer always dark */
    --hero-gradient-start: #F8FAFF;
    --hero-gradient-mid:   #ffffff;
    --hero-gradient-end:   #F5F7FF;
  }
}

/* ── Manual overrides — data-theme attribute ── */
html[data-theme="dark"] {
  --color-bg-base:    #030712;
  --color-bg-card:    #111827;
  --color-bg-surface: #1f2937;
  --color-border:     #374151;
  --color-text-base:  #f3f4f6;
  --color-text-sub:   #d1d5db;
  --color-text-muted: #9ca3af;
  --color-nav-bg:     #030712;
  --color-nav-border: #1f2937;
  --color-footer-bg:  #111827;
  --hero-gradient-start: #0a0f1e;
  --hero-gradient-mid:   #0d1a2e;
  --hero-gradient-end:   #0a1628;
}

html[data-theme="light"] {
  --color-bg-base:    #ffffff;
  --color-bg-card:    #f9fafb;
  --color-bg-surface: #f3f4f6;
  --color-border:     #e5e7eb;
  --color-text-base:  #111827;
  --color-text-sub:   #374151;
  --color-text-muted: #6b7280;
  --color-nav-bg:     #030712;    /* nav always dark */
  --color-nav-border: #1f2937;    /* nav always dark */
  --color-footer-bg:  #111827;    /* footer always dark */
  --hero-gradient-start: #F8FAFF;
  --hero-gradient-mid:   #ffffff;
  --hero-gradient-end:   #F5F7FF;
}

/* ── Page shell ── */
body {
  background-color: var(--color-bg-base);
  color: var(--color-text-base);
}

/* ── Nav — color driven by --color-nav-bg token (set per-business in main.css) ── */
#nav,
#nav #nav-inner {
  background-color: var(--color-nav-bg) !important;
  border-color: var(--color-nav-border, var(--color-border)) !important;
}
#nav a, #nav button { color: var(--color-nav-text, #d1d5db) !important; }
#nav a:hover        { color: var(--color-nav-text-hover, #f3f4f6) !important; }
#nav a[class*="bg-brand"],
#nav a.bg-brand-500 { color: #ffffff !important; }

/* footer — see end of file */

/* ── Semantic section + text classes ──
   Use these everywhere. Never use bg-gray-* or text-white on section/text elements.
   These adapt automatically to light/dark via token vars. ── */

/* Section backgrounds */
.section-surface  { background-color: var(--color-bg-surface); }
.section-card     { background-color: var(--color-bg-card); }
.section-input    { background-color: var(--color-bg-surface); }

/* Text hierarchy */
.section-body     { color: var(--color-text-base); }
.section-sub      { color: var(--color-text-sub); }

/* Borders */
.border-surface   { border-color: var(--color-border); }
.border-muted     { border-color: var(--color-border); }

/* Nav link text — always light (nav is always-dark) */
.text-nav-link { color: #d1d5db; }

/* text-white is ONLY for elements with their own colored background.
   On colored bgs (brand buttons, gradient CTAs, photo overlays) it stays white always. */
.linkedin-btn { color: #ffffff !important; }

/* Form placeholder text */
.placeholder-gray-500::placeholder { color: var(--color-text-muted); }

/* ── Hero ── */
.hero-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
}

.hero-gradient {
  background: linear-gradient(
    135deg,
    var(--hero-gradient-start) 0%,
    var(--hero-gradient-mid)   50%,
    var(--hero-gradient-end)   100%
  );
}

.hero-section {
  background: linear-gradient(160deg,
    var(--hero-gradient-start) 0%,
    var(--hero-gradient-mid)   60%,
    var(--hero-gradient-end)   100%
  );
}

@media (prefers-color-scheme: light) {
  .hero-section .hero-shape { opacity: 0.12; }
}
html[data-theme="light"] .hero-section .hero-shape { opacity: 0.12; }
html[data-theme="dark"]  .hero-section .hero-shape { opacity: 0.5; }

.hero-title        { color: var(--color-text-base); }
.hero-subtitle     { color: var(--color-text-muted); }
.hero-trust        { color: var(--color-text-muted); }
.hero-scroll-arrow { color: var(--color-text-muted); }

.hero-badge {
  background-color: rgba(37, 99, 235, 0.12);
  color: #2563EB;
}
@media (prefers-color-scheme: dark) {
  .hero-badge { background-color: rgba(37, 99, 235, 0.25); color: #93C5FD; }
}
html[data-theme="dark"]  .hero-badge { background-color: rgba(37, 99, 235, 0.25); color: #93C5FD; }
html[data-theme="light"] .hero-badge { background-color: rgba(37, 99, 235, 0.12); color: #2563EB; }

.hero-cta-secondary {
  border-color: var(--color-border);
  color: var(--color-text-sub);
}
.hero-cta-secondary:hover { border-color: #60A5FA; color: #2563EB; }

.hero-card, .hero-chip {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
}
.hero-card-title  { color: var(--color-text-base); }
.hero-card-sub    { color: var(--color-text-muted); }
.hero-card-bubble { background-color: var(--color-bg-surface); }

@media (prefers-color-scheme: light) {
  .hero-card-bubble { background-color: #EFF6FF; }
}
html[data-theme="light"] .hero-card-bubble { background-color: #EFF6FF; }
html[data-theme="dark"]  .hero-card-bubble { background-color: var(--color-bg-surface); }

/* ── Blue text variants ── */
.hero-blue-text { color: #1D4ED8; }
@media (prefers-color-scheme: dark) {
  .hero-blue-text { color: #3B82F6; }
}
html[data-theme="dark"]  .hero-blue-text { color: #3B82F6; }
html[data-theme="light"] .hero-blue-text { color: #1D4ED8; }

.hero-accent-gradient { background-image: linear-gradient(to right, #2563EB, #4F46E5); }
@media (prefers-color-scheme: dark) {
  .hero-accent-gradient { background-image: linear-gradient(to right, #60A5FA, #818CF8); }
}
html[data-theme="dark"]  .hero-accent-gradient { background-image: linear-gradient(to right, #60A5FA, #818CF8); }
html[data-theme="light"] .hero-accent-gradient { background-image: linear-gradient(to right, #2563EB, #4F46E5); }

/* ── Section helpers ── */
.section-base     { background-color: var(--color-bg-base); }
.section-title    { color: var(--color-text-base); }
.section-subtitle { color: var(--color-text-muted); }

/* ── Pain cards ── */
.pain-card {
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-card);
}
/* Pain card content always uses dark text — cards stay pastel in both themes */
.pain-card .section-title    { color: #111827; }
.pain-card .section-subtitle { color: #374151; }

@media (prefers-color-scheme: light) {
  .pain-card--red    { background: linear-gradient(135deg, #FEF2F2, #FFF7ED); border-color: #FECACA; }
  .pain-card--amber  { background: linear-gradient(135deg, #FFFBEB, #FEFCE8); border-color: #FDE68A; }
  .pain-card--purple { background: linear-gradient(135deg, #FAF5FF, #FDF2F8); border-color: #E9D5FF; }
  .pain-card--blue   { background: linear-gradient(135deg, #EFF6FF, #EEF2FF); border-color: #BFDBFE; }
  .pain-icon--red    { background-color: #FCA5A5; }
  .pain-icon--amber  { background-color: #FCD34D; }
  .pain-icon--purple { background-color: #C4B5FD; }
  .pain-icon--blue   { background-color: #93C5FD; }
}
html[data-theme="light"] .pain-card--red    { background: linear-gradient(135deg, #FEF2F2, #FFF7ED); border-color: #FECACA; }
html[data-theme="light"] .pain-card--amber  { background: linear-gradient(135deg, #FFFBEB, #FEFCE8); border-color: #FDE68A; }
html[data-theme="light"] .pain-card--purple { background: linear-gradient(135deg, #FAF5FF, #FDF2F8); border-color: #E9D5FF; }
html[data-theme="light"] .pain-card--blue   { background: linear-gradient(135deg, #EFF6FF, #EEF2FF); border-color: #BFDBFE; }
html[data-theme="light"] .pain-icon--red    { background-color: #FCA5A5; }
html[data-theme="light"] .pain-icon--amber  { background-color: #FCD34D; }
html[data-theme="light"] .pain-icon--purple { background-color: #C4B5FD; }
html[data-theme="light"] .pain-icon--blue   { background-color: #93C5FD; }

/* Dark mode pain cards: same pastel bg/icons as light — content colors unchanged.
   Only the surrounding page bg is dark; the cards themselves stay warm + colorful. */
@media (prefers-color-scheme: dark) {
  .pain-card--red    { background: linear-gradient(135deg, #FEF2F2, #FFF7ED); border-color: #FECACA; }
  .pain-card--amber  { background: linear-gradient(135deg, #FFFBEB, #FEFCE8); border-color: #FDE68A; }
  .pain-card--purple { background: linear-gradient(135deg, #FAF5FF, #FDF2F8); border-color: #E9D5FF; }
  .pain-card--blue   { background: linear-gradient(135deg, #EFF6FF, #EEF2FF); border-color: #BFDBFE; }
  .pain-icon--red    { background-color: #FCA5A5; }
  .pain-icon--amber  { background-color: #FCD34D; }
  .pain-icon--purple { background-color: #C4B5FD; }
  .pain-icon--blue   { background-color: #93C5FD; }
}
html[data-theme="dark"] .pain-card--red    { background: linear-gradient(135deg, #FEF2F2, #FFF7ED); border-color: #FECACA; }
html[data-theme="dark"] .pain-card--amber  { background: linear-gradient(135deg, #FFFBEB, #FEFCE8); border-color: #FDE68A; }
html[data-theme="dark"] .pain-card--purple { background: linear-gradient(135deg, #FAF5FF, #FDF2F8); border-color: #E9D5FF; }
html[data-theme="dark"] .pain-card--blue   { background: linear-gradient(135deg, #EFF6FF, #EEF2FF); border-color: #BFDBFE; }
html[data-theme="dark"] .pain-icon--red    { background-color: #FCA5A5; }
html[data-theme="dark"] .pain-icon--amber  { background-color: #FCD34D; }
html[data-theme="dark"] .pain-icon--purple { background-color: #C4B5FD; }
html[data-theme="dark"] .pain-icon--blue   { background-color: #93C5FD; }

/* faq-accordion — see end of file */

/* ── Hero badge — pill above h1, adapts to theme ── */
.hero-badge {
  background-color: color-mix(in srgb, var(--color-brand-primary) 15%, transparent);
  color: var(--color-brand-secondary);
}
html[data-theme="dark"] .hero-badge {
  background-color: color-mix(in srgb, var(--color-brand-primary) 20%, transparent);
  color: var(--color-brand-primary);
}

/* ── Stat color ── */
.text-stat-positive { color: var(--color-stat-positive, rgb(20,233,0)); }

/* ── Semantic button + input classes ──
   Use these everywhere. Both themes work automatically via token vars.
   Never use hardcoded bg-gray-* or hex values on interactive elements. */

/* Primary button — always brand color, white text */
.btn-primary {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background-color: var(--color-brand-primary);
  color: #ffffff;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  border: none;
}
.btn-primary:hover {
  background-color: var(--color-brand-secondary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* Secondary/ghost button — adapts to theme */
.btn-secondary {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-sub);
}
.btn-secondary:hover {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: #ffffff;
}

/* Form input — adapts to theme */
.input-base {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-base);
}
.input-base::placeholder { color: var(--color-text-muted); }
.input-base:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 2px rgba(27,111,232,0.15);
}

/* Tab/pill nav button — adapts to theme */
.btn-pill-nav {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.btn-pill-nav:hover {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: #ffffff;
}

/* ── Cards & interactions ── */
.feature-card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(27, 111, 232, 0.1);
}

.pricing-popular {
  box-shadow: 0 8px 40px rgba(27, 111, 232, 0.18);
  border: 2px solid #1B6FE8;
}

.cta-gradient {
  background: linear-gradient(135deg, #1B6FE8 0%, #1559BA 100%);
}

.testimonial-card {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.4);
}

/* ── Forms ── */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #1B6FE8;
  box-shadow: 0 0 0 3px rgba(27, 111, 232, 0.1);
}

/* ── Blog ── */
.blog-content h2 { margin-top: 2rem; margin-bottom: 0.75rem; }
.blog-content p  { margin-bottom: 1rem; }
.blog-content ul, .blog-content ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.blog-content li { margin-bottom: 0.5rem; }

.dot-pattern {
  background-image: radial-gradient(circle, #e5e7eb 1px, transparent 1px);
  background-size: 24px 24px;
}

.blog-prose p       { margin-bottom: 1.5rem; line-height: 1.8; color: #374151; font-size: 1.0625rem; }
.blog-prose h2      { font-size: 1.5rem; font-weight: 700; color: #111827; margin-top: 2.5rem; margin-bottom: 1rem; letter-spacing: -0.02em; }
.blog-prose h3      { font-size: 1.2rem; font-weight: 600; color: #1f2937; margin-top: 2rem; margin-bottom: 0.75rem; }
.blog-prose ul,
.blog-prose ol      { margin-bottom: 1.5rem; padding-left: 1.75rem; }
.blog-prose li      { margin-bottom: 0.75rem; line-height: 1.7; color: #374151; }
.blog-prose strong  { font-weight: 600; color: #111827; }
.blog-prose a       { color: #1B6FE8; text-decoration: none; }
.blog-prose a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY PRIMITIVES
   Skip link, screen-reader-only utility, focus-visible defaults,
   reduced-motion respect. Required everywhere; do not remove.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Skip link — keyboard users jump past nav to main content.
   Hidden off-screen by transform until focused (preserves layout, beats
   display:none which removes the link from tab order). */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.75rem 1rem;
  background-color: var(--color-brand-primary, #1B6FE8);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 0 0 0.5rem 0;
  z-index: 100;
  transform: translateY(-110%);
  transition: transform 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Screen-reader-only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Focus-visible defaults — visible 2px ring on keyboard focus only.
   Required for WCAG 2.4.7 (Focus Visible) and 2.4.11 (Focus Not Obscured). */
:focus-visible {
  outline: 2px solid var(--color-brand-primary, #1B6FE8);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Reduced motion: respect OS preference (WCAG 2.3.3).
   Only fires when the user has explicitly enabled "reduce motion" in their
   OS accessibility settings. No effect on default visitors. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALWAYS-DARK OVERRIDES — must come LAST to beat .bg-gray-* !important rules
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nav — color driven by --color-nav-bg token (set per-business in main.css brand tokens) */
#nav,
#nav #nav-inner {
  background-color: var(--color-nav-bg, #030712) !important;
  border-color: var(--color-nav-border, #1f2937) !important;
}
#nav a, #nav button { color: var(--color-nav-text, #d1d5db) !important; }
#nav a:hover        { color: var(--color-nav-text-hover, #f3f4f6) !important; }
#nav a[class*="bg-brand"],
#nav a.bg-brand-500 { color: #ffffff !important; }

/* Footer — always dark */
footer,
footer.bg-gray-900,
footer.bg-gray-950 {
  background-color: #111827 !important;
  color: #9ca3af !important;
}
footer h4          { color: #f3f4f6 !important; }
footer a           { color: #9ca3af !important; }
footer a:hover     { color: #f3f4f6 !important; }
footer .border-t   { border-color: #374151 !important; }
footer p           { color: #9ca3af !important; }
footer span        { color: inherit; }

/* FAQ accordion — always dark */
.faq-accordion-section,
.faq-accordion-section.bg-gray-900 {
  background-color: #111827 !important;
}
.faq-accordion-section details,
.faq-accordion-section details.bg-gray-800 {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}
.faq-accordion-section details summary       { color: #f3f4f6 !important; }
.faq-accordion-section details summary:hover { background-color: rgba(255,255,255,0.05) !important; }
.faq-accordion-section .text-gray-400        { color: #9ca3af !important; }
.faq-accordion-section h2,
.faq-accordion-section h3                    { color: #f3f4f6 !important; }