/*
 * pSEO Blocks - Midnight Cartographer Theme
 * Synthetic-twilight · cyber-cartography · vector-glow · hushed-command-center
 * Deep midnight canvas with mint glow and fuchsia accents
 * COMPLETE TONE SYSTEM - all required variables defined
 * 
 * Tone visual hierarchy (4 tones):
 *   base   → #0C1220  (deep midnight - primary content)
 *   alt    → #162037  (slate panels - visual breaks)
 *   dark   → #070A13  (deepest black - hero, footer)
 *   accent → mint-to-fuchsia gradient (CTAs, highlights)
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ========================================
     CORE COLORS - Deep midnight base
     ======================================== */
  --color-bg: #0C1220;
  --color-surface: #131B2B;
  --color-text: #E7ECFF;
  --color-muted: #A9B7D9;
  --color-border: rgba(255, 255, 255, 0.08);
  
  /* Primary - Fuchsia Pin (for buttons, CTAs) */
  --color-primary: #FF2E6F;
  --color-primary-contrast: #FFFFFF;
  
  /* Accent - Mint Glow (for highlights, eyebrows) */
  --color-accent: #1FCC8A;
  --color-accent-light: #3DDFA0;
  --color-accent-dark: #18A870;
  --color-accent-contrast: #0C1220;
  
  /* Status colors */
  --color-warning: #F8A745;
  --color-error: #FF4D6A;
  --color-info: #36A2FF;
  
  /* ========================================
     TONE: BASE (deep midnight - primary content)
     Background: #0C1220 - deep blue-black
     ======================================== */
  /* These are the defaults via --color-* vars above */
  
  /* ========================================
     TONE: ALT (slate panels - visual breaks)
     Background: #162037 - lighter navy panels
     Use for: feature sections, galleries, alternating content
     ======================================== */
  --color-alt-bg: #162037;
  --color-alt-text: #E7ECFF;
  --color-alt-muted: #A9B7D9;
  --color-alt-border: rgba(255, 255, 255, 0.08);
  --color-alt-card: #1D2A45;
  --color-alt-link: #1FCC8A;
  
  /* ========================================
     TONE: DARK (deepest black - immersive areas)
     Background: #070A13 - near black
     Use for: hero sections, footer, dramatic areas
     ======================================== */
  --color-dark-bg: #070A13;
  --color-dark-text: #E7ECFF;
  --color-dark-muted: #6B7A9C;
  --color-dark-border: rgba(255, 255, 255, 0.06);
  --color-dark-card: #0C1220;
  --color-dark-link: #3DDFA0;
  
  /* ========================================
     TONE: ACCENT (mint-fuchsia gradient - CTAs)
     Background: mint to fuchsia gradient
     Use for: footer CTA, post headers, conversion areas
     ======================================== */
  --color-accent-surface: linear-gradient(135deg, #1FCC8A 0%, #FF2E6F 100%);
  --color-accent-text: #FFFFFF;
  --color-accent-muted: rgba(255, 255, 255, 0.85);
  --color-accent-border: rgba(255, 255, 255, 0.2);
  --color-accent-card: rgba(255, 255, 255, 0.1);
  --color-accent-eyebrow: rgba(255, 255, 255, 0.9);
  
  /* ========================================
     BACKGROUND & OVERLAY TOKENS
     ======================================== */
  --color-overlay: linear-gradient(180deg, rgba(12, 18, 32, 0.7) 0%, rgba(7, 10, 19, 0.95) 100%);
  --color-overlay-solid: rgba(7, 10, 19, 0.9);
  --color-gradient-start: #1FCC8A;
  --color-gradient-end: #FF2E6F;
  --color-shadow: rgba(31, 204, 138, 0.12);
  
  /* ========================================
     TYPOGRAPHY
     ======================================== */
  --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  
  /* Heading styles - gradient glow */
  --heading-weight: 600;
  --heading-gradient: linear-gradient(135deg, #1FCC8A 0%, #36A2FF 100%);
  --heading-text-fill: transparent;
  
  /* ========================================
     SPACING & LAYOUT
     ======================================== */
  --radius: 12px;
  --radius-input: 8px;
  --radius-tag: 6px;
  --radius-btn: 8px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.48), 0 12px 24px rgba(31, 204, 138, 0.12);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 24px 48px rgba(31, 204, 138, 0.15);
  --container-max: 1440px;
  --space-section-y: 6rem;
  --space-card: 1.5rem;
  --nav-height: 4.5rem;
  
  /* ========================================
     COMPONENT TOKENS - BUTTONS
     ======================================== */
  
  /* Primary button - fuchsia glow */
  --btn-primary-bg: #FF2E6F;
  --btn-primary-text: #FFFFFF;
  --btn-primary-border: #FF2E6F;
  --btn-primary-hover-bg: #FF4D85;
  --btn-primary-shadow: 0 4px 16px rgba(255, 46, 111, 0.3);
  
  /* Secondary button - fuchsia outline */
  --btn-secondary-bg: transparent;
  --btn-secondary-text: #FF2E6F;
  --btn-secondary-border: #FF2E6F;
  --btn-secondary-hover-bg: rgba(255, 46, 111, 0.1);
  --btn-secondary-hover-border: #FF4D85;
  --btn-secondary-hover-text: #FF4D85;
  
  /* Dark tone buttons - mint on deepest dark */
  --dark-btn-primary-bg: #1FCC8A;
  --dark-btn-primary-text: #0C1220;
  --dark-btn-secondary-border: #1FCC8A;
  --dark-btn-secondary-text: #1FCC8A;
  
  /* Accent tone buttons - white on gradient */
  --accent-btn-primary-bg: #FFFFFF;
  --accent-btn-primary-text: #FF2E6F;
  --accent-btn-secondary-border: rgba(255, 255, 255, 0.6);
  --accent-btn-secondary-text: #FFFFFF;
  
  /* ========================================
     COMPONENT TOKENS - NAVIGATION
     ======================================== */
  --nav-bg: rgba(12, 18, 32, 0.9);
  --nav-border: rgba(255, 255, 255, 0.06);
  
  /* ========================================
     COMPONENT TOKENS - SEARCH & INPUTS
     ======================================== */
  --search-input-bg: #131B2B;
  --search-input-border: rgba(255, 255, 255, 0.1);
  --search-input-focus-border: #1FCC8A;
  --search-input-focus-shadow: 0 0 0 3px rgba(31, 204, 138, 0.2);
  --search-btn-bg: #FF2E6F;
  --search-btn-text: #FFFFFF;
  --search-btn-hover-bg: #FF4D85;
  
  /* Popular links */
  --popular-link-bg: rgba(31, 204, 138, 0.12);
  --popular-link-hover-bg: rgba(31, 204, 138, 0.2);
  
  /* ========================================
     COMPONENT TOKENS - CARDS & IMAGES
     ======================================== */
  --card-gradient: linear-gradient(145deg, #131B2B 0%, #0C1220 100%);
  --card-bg: #131B2B;
  --image-tag-bg: rgba(12, 18, 32, 0.85);
  --image-tag-text: #FFFFFF;
  --image-title-text: #FFFFFF;
  --image-overlay-gradient: linear-gradient(180deg, transparent 40%, rgba(7, 10, 19, 0.95) 100%);
  
  /* ========================================
     COMPONENT TOKENS - STATS & TRUST BAR
     ======================================== */
  --stat-font: var(--font-mono);
  --stat-gradient: linear-gradient(135deg, #1FCC8A 0%, #36A2FF 100%);
  --stat-text-fill: transparent;
  --dark-stat-text-fill: transparent;
  
  /* ========================================
     COMPONENT TOKENS - VIDEO
     ======================================== */
  --video-border-color: #1FCC8A;
  --video-hover-border-color: #FF2E6F;
  --video-glow: 0 0 24px rgba(31, 204, 138, 0.3);
  --video-hover-shadow: 0 0 32px rgba(255, 46, 111, 0.25);
  
  /* ========================================
     COMPONENT TOKENS - TIMELINE
     ======================================== */
  --timeline-line-gradient: linear-gradient(180deg, #0C1220 0%, #1FCC8A 50%, #0C1220 100%);
  --timeline-number-bg: #FF2E6F;
  --timeline-number-text: #FFFFFF;
  
  /* ========================================
     COMPONENT TOKENS - CODE BLOCKS
     ======================================== */
  --color-code-bg: #070A13;
  --color-code-text: #1FCC8A;
  --color-code-border: rgba(31, 204, 138, 0.2);
  
  /* ========================================
     COMPONENT TOKENS - CALLOUTS
     ======================================== */
  --callout-tip: #1FCC8A;
  --callout-tip-bg: rgba(31, 204, 138, 0.15);
  --callout-warning: #F8A745;
  --callout-warning-bg: rgba(248, 167, 69, 0.15);
  --callout-note: #36A2FF;
  --callout-note-bg: rgba(54, 162, 255, 0.15);
  
  /* ========================================
     COMPONENT TOKENS - TAGS
     ======================================== */
  --tag-font: var(--font-mono);
  --tag-transform: uppercase;
  --tag-letter-spacing: 0.05em;
  
  /* ========================================
     THEME EXTRAS
     ======================================== */
  --scrollbar-track: #0C1220;
  --scrollbar-thumb: #162037;
  --scrollbar-thumb-hover: #1FCC8A;
  --selection-bg: rgba(31, 204, 138, 0.3);
  --selection-text: #FFFFFF;
  
  /* Hero button glow */
  --hero-btn-glow: 0 4px 20px rgba(255, 46, 111, 0.4);
}

/* ========================================
   TONE-SPECIFIC BUTTON OVERRIDES
   ======================================== */

/* Buttons on DARK tone - mint on deepest dark (only when NOT on gradient) */
.block[data-tone="dark"]:not([data-bg="gradient"]) .btn--primary {
  background: var(--dark-btn-primary-bg);
  color: var(--dark-btn-primary-text) !important;
  border-color: var(--dark-btn-primary-bg);
}

.block[data-tone="dark"]:not([data-bg="gradient"]) .btn--primary:hover {
  background: #3DDFA0;
  box-shadow: 0 4px 20px rgba(31, 204, 138, 0.4);
}

.block[data-tone="dark"]:not([data-bg="gradient"]) .btn--secondary {
  border-color: var(--dark-btn-secondary-border);
  color: var(--dark-btn-secondary-text) !important;
}

.block[data-tone="dark"]:not([data-bg="gradient"]) .btn--secondary:hover {
  background: rgba(31, 204, 138, 0.1);
}

/* Buttons on ACCENT tone - white on gradient (only when NOT on gradient bg) */
.block[data-tone="accent"]:not([data-bg="gradient"]) .btn--primary {
  background: var(--accent-btn-primary-bg);
  color: var(--accent-btn-primary-text) !important;
  border-color: var(--accent-btn-primary-bg);
}

.block[data-tone="accent"]:not([data-bg="gradient"]) .btn--primary:hover {
  background: #F0F0F5;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.3);
}

.block[data-tone="accent"]:not([data-bg="gradient"]) .btn--secondary {
  border-color: var(--accent-btn-secondary-border);
  color: var(--accent-btn-secondary-text) !important;
}

.block[data-tone="accent"]:not([data-bg="gradient"]) .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #FFFFFF;
}

/* ========================================
   CARD STYLING - GLOW EFFECT
   ======================================== */

.card {
  background: var(--card-gradient);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-lg);
  border-color: rgba(31, 204, 138, 0.3);
  transform: translateY(-2px);
}

/* Cards on alt tone */
.block[data-tone="alt"] .card {
  background: linear-gradient(145deg, #1D2A45 0%, #162037 100%);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Cards on dark tone */
.block[data-tone="dark"] .card {
  background: linear-gradient(145deg, #0C1220 0%, #070A13 100%);
  border-color: rgba(255, 255, 255, 0.06);
}

/* Cards on accent tone */
.block[data-tone="accent"] .card {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
}

/* ========================================
   GRADIENT BACKGROUND TEXT OVERRIDES
   When data-bg="gradient" is applied, text must be readable
   on the mint-fuchsia gradient (WHITE text)
   ======================================== */

.block[data-bg="gradient"] {
  --surface-text: #FFFFFF;
  --surface-muted: rgba(255, 255, 255, 0.85);
}

/* Override gradient heading text on gradient backgrounds - must be solid white */
.block[data-bg="gradient"] h1,
.block[data-bg="gradient"] h2,
.block[data-bg="gradient"] h3,
.block[data-bg="gradient"] .hero__title,
.block[data-bg="gradient"] .search-section__title,
.block[data-bg="gradient"] .footer-cta__title {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

.block[data-bg="gradient"] .block__eyebrow {
  color: rgba(255, 255, 255, 0.9) !important;
}

.block[data-bg="gradient"] .hero__subtitle {
  color: rgba(255, 255, 255, 0.85);
}

.block[data-bg="gradient"] .search-section__subtitle {
  color: rgba(255, 255, 255, 0.85);
}

.block[data-bg="gradient"] .footer-cta__eyebrow {
  color: rgba(255, 255, 255, 0.9) !important;
}

.block[data-bg="gradient"] .footer-cta__subtitle {
  color: rgba(255, 255, 255, 0.85);
}

.block[data-bg="gradient"] .footer-cta__feature-title {
  color: #FFFFFF;
}

.block[data-bg="gradient"] .footer-cta__feature-desc {
  color: rgba(255, 255, 255, 0.8);
}

/* Buttons on gradient backgrounds - WHITE for contrast */
.block[data-bg="gradient"] .btn--primary {
  background: #FFFFFF !important;
  color: #FF2E6F !important;
  border-color: #FFFFFF !important;
}

.block[data-bg="gradient"] .btn--primary:hover {
  background: #F0F0F5 !important;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.3);
}

.block[data-bg="gradient"] .btn--secondary {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: #FFFFFF !important;
}

.block[data-bg="gradient"] .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: #FFFFFF !important;
}

/* Links on gradient backgrounds */
.block[data-bg="gradient"] a:not(.btn) {
  color: #FFFFFF;
}

/* huge_image subtitle on gradient */
.block[data-bg="gradient"] .huge-image__subtitle {
  color: rgba(255, 255, 255, 0.85);
}

/* ========================================
   ACCENT TONE TEXT OVERRIDES
   (only when NOT combined with gradient bg)
   ======================================== */

.block[data-tone="accent"]:not([data-bg="gradient"]) .block__eyebrow {
  color: rgba(255, 255, 255, 0.9);
}

.block[data-tone="accent"]:not([data-bg="gradient"]) .footer-cta__eyebrow {
  color: rgba(255, 255, 255, 0.9);
}

.block[data-tone="accent"]:not([data-bg="gradient"]) .footer-cta__feature-desc {
  color: rgba(255, 255, 255, 0.8);
}

/* ========================================
   DARK TONE TEXT OVERRIDES
   Mint eyebrow on deepest backgrounds (only when NOT on gradient)
   ======================================== */

.block[data-tone="dark"]:not([data-bg="gradient"]) .block__eyebrow {
  color: #1FCC8A;
}

/* ========================================
   BASE/ALT TONE EYEBROW OVERRIDE
   Mint eyebrow on base/alt backgrounds
   ======================================== */

.block[data-tone="base"] .block__eyebrow,
.block:not([data-tone]) .block__eyebrow {
  color: #1FCC8A;
}

.block[data-tone="alt"] .block__eyebrow {
  color: #1FCC8A;
}

/* ========================================
   NAVIGATION STYLING
   ======================================== */

.block--navbar {
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--nav-border);
}

/* ========================================
   BUTTON STYLING - EXPLICIT OVERRIDES
   Ensure buttons always have correct colors
   ======================================== */

.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text) !important;
  border-color: var(--btn-primary-border);
}

.btn--secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}

/* Breakout CTA buttons - fuchsia on dark backgrounds */
.breakout-cta .btn--primary {
  background: #FF2E6F;
  color: #FFFFFF !important;
  border-color: #FF2E6F;
}

.breakout-cta .btn--primary:hover {
  background: #FF4D85;
}