/**
 * Conjuror Tenant CSS Overrides
 *
 * These styles define the Conjuror Community brand colors.
 *
 * Color Palette:
 * - Deep Navy:    #002442 (header/footer backgrounds)
 * - Dark Navy:    #002646 (primary brand, headings on light bg)
 * - Medium Navy:  #00579c (lighter accent for links)
 * - Page Dark:    #000c18 (page background)
 * - Yellow:       #f2ca49 (accent, CTAs, H1 on gradients)
 * - Yellow Hover: #e6b73e (CTA hover state)
 */

:root {
  /* ─────────────────────────────────────────────────────────────────────────────
   * PRIMITIVE TOKENS - Override these to change the entire theme
   * ───────────────────────────────────────────────────────────────────────────── */

  /* Brand Primary (Navy) */
  --color-brand-primary: #002646;
  --color-brand-primary-light: #00579c;
  --color-brand-primary-dark: #001933;

  /* Brand Accent (Yellow) */
  --color-brand-accent: #f2ca49;
  --color-brand-accent-light: #f5d76e;
  --color-brand-accent-dark: #e6b73e;
  --color-brand-accent-contrast: #92400e; /* Dark amber for accent on light backgrounds */

  /* Soft badge text - use contrast color for readability on light backgrounds */
  --color-accent-soft-text: var(--color-brand-accent-contrast);

  /* ─────────────────────────────────────────────────────────────────────────────
   * LEGACY TOKENS - Kept for backwards compatibility during migration
   * These now reference the primitive tokens above
   * ───────────────────────────────────────────────────────────────────────────── */

  /* Brand colors */
  --brand-primary: var(--color-brand-primary);
  --brand-accent: var(--color-brand-accent);

  /* Heading colors - Navy on light backgrounds */
  --heading-color: var(--color-brand-primary);
  --heading-color-on-gradient: var(--color-brand-accent);

  /* CTA colors - Yellow buttons with black text */
  --cta-primary-bg: var(--color-brand-accent);
  --cta-primary-bg-hover: var(--color-brand-accent-dark);
  --cta-primary-text: black;
  --cta-secondary-bg: white;
  --cta-secondary-text: var(--color-brand-primary);

  /* Link colors */
  --link-color-default: var(--color-brand-primary);
  --link-color-hover: var(--color-brand-primary-light);
  --nav-link-hover: var(--color-brand-primary-light);
  --header-link-hover: var(--color-brand-accent);

  /* Header & Footer */
  --header-bg: #00223d;
  --footer-bg: #000c18;

  /* Dashboard Navigation - matches header */
  --dashboard-nav-bg: var(--header-bg);
  --dashboard-nav-border: rgba(255, 255, 255, 0.1);
  --dashboard-nav-item-text: rgba(255, 255, 255, 0.7);
  --dashboard-nav-item-text-active: #ffffff;
  --dashboard-nav-item-bg-hover: rgba(255, 255, 255, 0.1);
  --dashboard-nav-item-bg-active: rgba(255, 255, 255, 0.15);
  --dashboard-nav-item-indicator: var(--color-brand-accent);
}

/* Dark strip background on desktop to prevent white flash before sidebar renders */
/* Only show when user is authenticated (dashboard-nav-ready class is set by DashboardNavProvider) */
@media (min-width: 768px) {
  body.dashboard-nav-ready {
    background: linear-gradient(to right, var(--header-bg) 0%, var(--header-bg) 64px, var(--background) 64px) !important;
  }

  body.dashboard-nav-ready.dashboard-nav-pinned {
    background: linear-gradient(to right, var(--header-bg) 0%, var(--header-bg) 240px, var(--background) 240px) !important;
  }
}

/* Dashboard sidebar component styles for dark background */
.dashboard-sidebar,
.dashboard-bottombar {
  background-color: var(--header-bg) !important;
  border-right: none !important;
  border-top: none !important;

  /* Override semantic tokens for dark sidebar */
  --border-default: rgba(255, 255, 255, 0.1);
  --text-muted: rgba(255, 255, 255, 0.5);
  --text-body: rgba(255, 255, 255, 0.9);
  --surface-muted: rgba(255, 255, 255, 0.1);
}

/* Push nav items down to align with content */
.dashboard-sidebar {
  padding-top: 23px;
}

:root {
  /* Filter Pills - Active state matches page background */
  --filter-pill-active-bg: #000c18;
  --filter-pill-active-text: #ffffff;

  /* ─────────────────────────────────────────────────────────────────────────────
   * HERO SECTION OVERRIDES
   * ───────────────────────────────────────────────────────────────────────────── */
  --hero-bg: linear-gradient(
    to bottom,
    #00223d 0%,
    #003a6b 100%
  );
  --hero-button-primary-text: var(--color-brand-primary);
}

/* Reduce hero section top padding (accounts for sidebar alignment) */
/* Page builder hero sections */
.section-hero--branded > div:last-child {
  padding-top: 3.5rem;  /* 56px instead of 96px (py-24) */
}

/* Conjuror homepage hero (direct child container) */
section.section-hero--branded > div {
  padding-top: 2.5rem;  /* 40px instead of 64px (py-16) on mobile */
}

@media (min-width: 768px) {
  section.section-hero--branded > div {
    padding-top: 3.5rem;  /* 56px instead of 96px (md:py-24) on desktop */
  }
}

/* Conjuror homepage hero - tighter layout */
section.section-hero--branded > div > div {
  gap: 1rem !important;
}

/* Image container - smaller width */
section.section-hero--branded .flex-shrink-0 {
  max-width: 320px;
}

section.section-hero--branded .flex-shrink-0 img {
  width: 100%;
  height: auto;
}

/* Conjuror homepage - more generous horizontal padding */
@media (min-width: 768px) {
  .min-h-screen > section > div {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

@media (min-width: 1024px) {
  .min-h-screen > section > div {
    padding-left: 6rem;
    padding-right: 6rem;
  }
}

@media (min-width: 1280px) {
  .min-h-screen > section > div {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

:root {
  /* ─────────────────────────────────────────────────────────────────────────────
   * CTA BANNER OVERRIDES
   * ───────────────────────────────────────────────────────────────────────────── */
  --cta-banner-brand-bg: linear-gradient(
    to right,
    var(--color-brand-primary) 0%,
    var(--color-brand-primary-dark) 100%
  );
  --cta-banner-accent-bg: linear-gradient(
    to right,
    var(--color-brand-accent) 0%,
    var(--color-brand-accent-dark) 100%
  );
}

/**
 * Blog Essay Styling (Light Insight / Essay Style)
 *
 * Purpose: Create a distinct editorial reading experience that signals
 * authority, slows the reader down, and increases completion.
 *
 * Based on research-backed typography for long-form reading.
 */
.prose-blog {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1.65;
  color: #000000; /* true black for authority */
  max-width: 700px; /* 680-720px optimal for reading */
  margin-left: auto;
  margin-right: auto;
}

.prose-blog p {
  margin-bottom: 1.3em;
}

.prose-blog h1,
.prose-blog h2,
.prose-blog h3,
.prose-blog h4 {
  font-family: inherit; /* Keep Georgia for consistency, or use site heading font */
  color: #000000;
  line-height: 1.2;
}

.prose-blog h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: normal;
  margin-top: 2.5em;
  margin-bottom: 0.75em;
}

.prose-blog h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: normal;
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.prose-blog a {
  color: var(--link-color-default, #002646);
  text-decoration: none;
}

.prose-blog a:hover {
  text-decoration: underline;
}

.prose-blog blockquote {
  font-style: italic;
  border-left: 3px solid var(--brand-accent, #f2ca49);
  padding-left: 1.25em;
  margin-left: 0;
  color: #333333;
}

/**
 * Blog Header Styling (Essay Style)
 * Title and excerpt also use Georgia for consistency
 */
.blog-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  color: #000000;
  margin-bottom: 1em;
}

.blog-excerpt {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  line-height: 1.5;
  color: #333333;
  margin-bottom: 1.5em;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .prose-blog {
    font-family: Georgia, "Times New Roman", serif; /* Explicit for mobile browsers */
    font-size: 17px;
    line-height: 1.6;
    color: #000000;
  }

  .prose-blog h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
  }

  .prose-blog h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
  }

  .blog-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    color: #000000;
    margin-bottom: 0.75em;
  }

  .blog-excerpt {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    color: #333333;
  }
}

:root {
  /* ─────────────────────────────────────────────────────────────────────────────
   * COMMERCE OVERRIDES
   * Conjuror-specific styling for purchase flows
   * ───────────────────────────────────────────────────────────────────────────── */

  /* Upsell callout - uses Conjuror navy gradient (for subtle ownership upsell) */
  --callout-premium-bg: linear-gradient(135deg, #001933 0%, #002646 50%, #003366 100%);
  --callout-premium-text: #ffffff;
  --callout-premium-text-muted: rgba(255, 255, 255, 0.85);
  --callout-premium-surface: rgba(255, 255, 255, 0.12);
  --callout-premium-surface-hover: rgba(255, 255, 255, 0.18);
}

/* Premium content header - Bebas Neue */
.callout-premium__title {
  font-family: var(--font-bebas-neue), Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-size: 2.25rem;
}

/* Theme-specific overrides */
.theme-light {
  /* Page background - gradient from header to footer color */
  --page-background: linear-gradient(
    to bottom,
    #002442 0%,
    #000c18 100%
  );

  /* Text on gradient backgrounds */
  --text-on-gradient: white;
  --link-color: white;
  --link-hover: rgba(255, 255, 255, 0.8);
}

/* Gradient scrolls with page (normal behavior) */
.page-container.theme-light {
  background-attachment: scroll;
}

/* Remove header shadow for seamless gradient flow */
header {
  box-shadow: none !important;
}

/* Sales/landing page headings use Bebas Neue */
.section-hero__heading {
  font-family: var(--font-bebas-neue), Impact, sans-serif;
  font-weight: 700;
  font-size: 7rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

/* Accent color variant for hero headings */
.section-hero__heading--accent {
  font-family: var(--font-bebas-neue), Impact, sans-serif !important;
  font-weight: 700 !important;
  font-size: 4rem !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
  color: var(--color-brand-accent) !important;
}

@media (max-width: 768px) {
  .section-hero__heading {
    font-size: 3.5rem !important;
  }
  .section-hero__heading--accent {
    font-size: 2.8rem !important;  /* 20% smaller than 3.5rem */
  }
}

/* Accent button for hero sections */
.section-hero__button--accent {
  background-color: var(--color-brand-accent);
  color: var(--color-brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.section-hero__button--accent:hover {
  background-color: var(--color-brand-accent-dark);
}

/**
 * Johnson Box - Conjuror Styling
 *
 * Promo-style callouts with yellow accent for action.
 * Navy headings, yellow left border for visual pop.
 */
:root {
  /* Filled style - light blue background with yellow accent */
  --johnson-box-filled-bg: #dce8f5;
  --johnson-box-filled-accent: #f2ca49;  /* Yellow left border */
  --johnson-box-filled-heading: #002646;
  --johnson-box-filled-body: #4a5568;
  --johnson-box-filled-cta: #002646;

  /* Outlined style - subtle background */
  --johnson-box-outlined-bg: rgba(220, 232, 245, 0.08);
  --johnson-box-outlined-border: #c5d5e8;
  --johnson-box-outlined-accent: #f2ca49;  /* Yellow left border */
  --johnson-box-outlined-heading: #002646;
  --johnson-box-outlined-body: #4a5568;
  --johnson-box-outlined-cta: #002646;

  /* Outlined Accent style - same as outlined for now */
  --johnson-box-outlined-accent-bg: rgba(220, 232, 245, 0.15);
  --johnson-box-outlined-accent-border: #c5d5e8;
  --johnson-box-outlined-accent-accent: #f2ca49;  /* Yellow left border */
  --johnson-box-outlined-accent-heading: #002646;
  --johnson-box-outlined-accent-body: #4a5568;
  --johnson-box-outlined-accent-cta: #002646;

  /* Aside - Default style (light border, subtle tint) */
  --aside-default-bg: rgba(220, 232, 245, 0.4);  /* Very light blue tint */
  --aside-default-border: #c5d5e8;  /* Light blue-gray border */
  --aside-default-heading: #002646;
  --aside-default-text: #4a5568;
  --aside-default-link: #002646;

  /* Aside - Subtle style (barely visible) */
  --aside-subtle-bg: rgba(220, 232, 245, 0.2);  /* Even lighter blue tint */
  --aside-subtle-border: #d6e2ed;  /* Very light border */
  --aside-subtle-heading: #002646;
  --aside-subtle-text: #4a5568;
  --aside-subtle-link: #002646;

  /* Strong style - dark border, lighter header, lightest body */
  --johnson-box-strong-border: #002646;     /* Dark navy - bold left border */
  --johnson-box-strong-header-bg: #0a4d7a;  /* Lighter navy for header */
  --johnson-box-strong-body-bg: #1a6a9a;    /* Lightest navy for body */
  --johnson-box-strong-heading: #ffffff;
  --johnson-box-strong-body: #ffffff;
  --johnson-box-strong-cta: #ffffff;
  --johnson-box-strong-cta-bg: #00223d;     /* Same as tenant header bg */
  --johnson-box-strong-cta-bg-hover: #003355;
}