/* ==========================================================================
   01 - BASE (OPTIMIZED)
   Description: CSS variables, layout utilities, typography, and base resets
   Dependencies: None (load first)

   OPTIMIZATION NOTES:
   - Reduced !important where possible using higher specificity
   - Added comments explaining necessary !important declarations
   - WordPress/Gutenberg compatibility requires certain !important usage
   ========================================================================== */

/* ===================== CSS VARIABLES ===================== */
:root {
  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Layout */
  --radius: 14px;
  --line: 1.4;
  --maxw: clamp(1024px, 92vw, 1280px);

  /* Colors */
  --color-primary: #0f62fe;
  --color-primary-dark: #0043ce;
  --color-primary-darker: #0b3d91;
  --color-primary-light: #eef4ff;
  --color-text: #334155;
  --color-text-dark: #0f172a;
  --color-text-muted: #475569;
  --color-text-light: #64748b;
  --color-border: #e5e7eb;
  --color-border-dark: #cbd5e1;
  --color-background: #ffffff;
  --color-background-alt: #f8fafc;
  --color-background-muted: #f1f5f9;
  /* blog-single.css and the page sheets reference these four (--space-10,
     --color-heading, --color-background-muted, --color-border-dark). Until
     9 Aug 26 none were defined anywhere, so every shorthand using them was
     invalid at computed-value time and silently dropped: the blog header lost
     its padding and .symap-formula-box rendered white text on no background. */
  --color-heading: #0f172a;
}

/* ===================== BASE RESETS ===================== */
html {
  overflow-x: clip;
  max-width: 100%;
}

body {
  overflow-x: clip;
}

/* Soft app-inspired glow behind custom page panels. The isolated body keeps
   this decorative layer above its white canvas but below all page content.
   No transforms or filters are applied to ancestors of the fixed menu. */
body:has(.wp-site-blocks :is(.symap-section-panel, .symap-blog-page)) { isolation: isolate; }
body:has(.wp-site-blocks :is(.symap-section-panel, .symap-blog-page))::before {
  content: '';
  position: fixed;
  inset: -6vmax;
  z-index: -1;
  pointer-events: none;
  opacity: .8;
  transform-origin: center;
}
body:has(.wp-site-blocks :is(.symap-section-panel, .symap-blog-page))::before {
  background:
    radial-gradient(ellipse 48% 58% at 6% 30%, rgba(59, 130, 246, .15), transparent 75%),
    radial-gradient(ellipse 40% 52% at 96% 62%, rgba(59, 130, 246, .12), transparent 75%);
  animation: symap-page-glow-blue 24s ease-in-out infinite;
}
@keyframes symap-page-glow-blue {
  0%, 100% { opacity: .7; transform: translate3d(-1%, -1%, 0) scale(1); }
  50% { opacity: 1; transform: translate3d(1%, 1.5%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  body:has(.wp-site-blocks :is(.symap-section-panel, .symap-blog-page))::before { animation: none; transform: none; }
}
@media print, (forced-colors: active) {
  body:has(.wp-site-blocks :is(.symap-section-panel, .symap-blog-page))::before { display: none; }
}

@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

/* NECESSARY: Override Hostinger theme padding */
body.hostinger-ai-builder-elementor,
body.hostinger-ai-builder-gutenberg {
  padding-top: 0 !important;
}

img, video, iframe, figure {
  max-width: 100%;
  height: auto;
}

/* ===================== LAYOUT ===================== */

/*
 * NECESSARY !important: WordPress blocks apply their own max-width and margins.
 * Without !important, the theme's block styles override these settings.
 */
.symap-wrap {
  max-width: var(--maxw) !important;
  width: 100% !important;
  margin-inline: auto !important;
  margin-top: 0 !important;
  padding: 0 var(--space-4) !important;
  box-sizing: border-box !important;
}

/* NECESSARY: WordPress adds ::before pseudo-elements to some blocks */
.symap-wrap::before {
  display: none !important;
}

/* NECESSARY: Override WordPress site-blocks margins */
.wp-site-blocks {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===================== GRID SYSTEMS ===================== */

.symap-grid {
  display: grid;
  gap: var(--space-4);
}

/*
 * NECESSARY !important: Hide WordPress auto-inserted <p> and <br> tags in grids.
 * Gutenberg wraps content and inserts empty elements that break grid layouts.
 */
.symap-grid > p:empty,
.symap-grid > br {
  display: none !important;
}

/* ---- cols-2: Flexbox for WordPress compatibility ---- */
.symap-grid.cols-2 {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: var(--space-4) !important;
}

/* NECESSARY: Force correct widths despite WordPress constraints */
.symap-grid.cols-2 > *:not(p):not(br) {
  flex: 0 0 calc(50% - 8px) !important;
  width: calc(50% - 8px) !important;
  max-width: calc(50% - 8px) !important;
  box-sizing: border-box !important;
}

/* NECESSARY: Completely remove WordPress injected elements */
.symap-grid.cols-2 > p,
.symap-grid.cols-2 > br {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 980px) {
  .symap-grid.cols-2 > *:not(p):not(br) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---- cols-3: CSS Grid ---- */
.symap-grid.cols-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-4) !important;
}

.symap-grid.cols-3 > *:not(p):not(br) {
  box-sizing: border-box !important;
}

/* NECESSARY: Remove WordPress p/br from grid layout completely */
.symap-grid.cols-3 > p,
.symap-grid.cols-3 > br {
  display: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 980px) {
  .symap-grid.cols-3 {
    grid-template-columns: 1fr !important;
  }
}

/* ---- cols-4 ---- */
.symap-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 980px) {
  .symap-grid.cols-3,
  .symap-grid.cols-4 {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Use Cases Grid ---- */
.symap-use-cases-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.symap-use-cases-grid > p {
  display: none !important;
}

.symap-use-cases-grid > * {
  flex: 0 0 calc(50% - 8px) !important;
  width: calc(50% - 8px) !important;
  max-width: calc(50% - 8px) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 768px) {
  .symap-use-cases-grid > * {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---- Two Column Layout ---- */
.symap-two-col {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-8);
  align-items: center;
}

.symap-two-col > p:empty {
  display: none !important;
}

.symap-two-col > *:not(p:empty) {
  flex: 0 0 calc(50% - 16px) !important;
  width: calc(50% - 16px) !important;
  max-width: calc(50% - 16px) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep p tags with actual content visible */
.symap-two-col > p:not(:empty) {
  display: block !important;
}

/* The selector must repeat :not(p:empty) exactly as above. Both rules are
   !important, so the winner is decided on specificity, and a plain
   `.symap-two-col > *` here LOSES to it - the columns stay at 50% on a phone,
   which is what this rule exists to prevent. */
@media (max-width: 980px) {
  .symap-two-col > *:not(p:empty) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ===================== TYPOGRAPHY ===================== */

/* No !important needed - these don't conflict with WordPress */
.symap-h1 {
  font-size: clamp(1.75rem, 3vw + 1rem, 3rem);
  letter-spacing: -0.01em;
  margin: var(--space-4) 0 var(--space-3);
  color: var(--color-text-dark);
  line-height: 1.2;
}

.symap-h2 {
  letter-spacing: -0.01em;
  color: var(--color-text-dark);
}

.symap-lead {
  color: #263445;
  font-size: 1.125rem;
  max-width: none;
  line-height: var(--line);
}

.symap-eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary-darker);
  border: 1px solid #cfe0ff;
}

.symap-muted {
  color: var(--color-text-muted);
}

.symap-kicker {
  font-weight: 700;
  color: var(--color-primary-darker);
  margin-bottom: var(--space-2);
  display: block;
}