/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ========================================
   Design Tokens - CSS Variables
   ======================================== */
:root {
  /* Colors - Semantic naming */
  --lazio-orange: #F97316;
  --lazio-orange-dark: #EA580C;
  --lazio-slate: #44403C;
  --lazio-slate-light: #78716C;
  --lazio-cream: #FFF7ED;
  --lazio-stone: #FAFAF9;
  --lazio-white: #ffffff;
  --lazio-whisper: #E5E7EB;
  --lazio-black: #1C1917;
  --lazio-emerald: #166534;

  /* Spacing Scale */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 3rem;      /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 6rem;     /* 96px */
  --space-4xl: 8rem;     /* 128rem */

  /* Typography Scale */
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-base: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
}

/* ========================================
   Crimson Pro body text — override Bricks
   theme style line-height (1.1em is too tight)
   ======================================== */
p {
  line-height: 1.3;
}

/* ========================================
   Phosphor Icons — hide invisible bounding rect
   Phosphor SVGs embed a transparent <rect> that
   renders as a barely visible box. Kill it globally.
   ======================================== */
[class*="lazio-"] svg rect,
[class*="header-block"] svg rect {
  display: none;
  stroke: none;
}

/* ========================================
   Callout Box Component
   ======================================== */

/* Accent color custom property per color variant */
.callout-emerald { --callout-accent: var(--dark-emerald); }
.callout-orange  { --callout-accent: var(--lazio-orange); }
.callout-carmine { --callout-accent: var(--carmine); }
.callout-yellow  { --callout-accent: var(--warning); }
.callout-blank   { --callout-accent: var(--lazio-orange); }
.callout-white   { --callout-accent: var(--lazio-orange); }

/* Heading color — parent-scoped selector beats theme style h5 */
.callout-emerald h5,
.callout-orange h5,
.callout-carmine h5,
.callout-yellow h5,
.callout-blank h5,
.callout-white h5 {
  color: var(--callout-accent);
}

/* Size variants — block padding (uniform, left indent comes from inner div) */
.callout-sm { padding: 8px; }
.callout-md { padding: 10px; }
.callout-lg { padding: 15px; }

/* Size variants — inner div left indent */
.callout-sm > .brxe-div { padding-left: 1.25em; }
.callout-md > .brxe-div { padding-left: 1.5em; }
.callout-lg > .brxe-div { padding-left: 2em; }

/* Size variants — heading font size
   sm: compact but readable, md: theme default (--text-s), lg: larger than default
   Bricks fluid scale: xs(0.8-0.95) s(1.13-1.34) m(1.6-1.9) ml(1.93-2.3) l(2.26-2.69) */
.callout-sm h5 { font-size: var(--text-xs); }
.callout-lg h5 { font-size: var(--text-ml); }

/* Size variants — text font size */
.callout-sm .brxe-text-basic { font-size: var(--text-xs); }
.callout-lg .brxe-text-basic { font-size: var(--text-m); }

/* Icon — color inherits accent */
.callout-emerald .brxe-icon,
.callout-orange .brxe-icon,
.callout-carmine .brxe-icon,
.callout-yellow .brxe-icon,
.callout-blank .brxe-icon,
.callout-white .brxe-icon {
  color: var(--callout-accent);
}

/* Icon — size scaling */
.callout-sm .brxe-icon { font-size: 1.75rem; }
.callout-md .brxe-icon { font-size: 2.25rem; }
.callout-lg .brxe-icon { font-size: 3rem; }

/* Description style: inherit accent color from variant */
.callout-text-inherit { color: var(--callout-accent); }

/* Description style: muted italic */
.callout-text-stylized { color: var(--slate-gray); font-style: italic; }

/* ========================================
   Dark Mode — Variable Overrides

   IMPORTANT: Bricks generates its palette dark mode block
   with selector :root[data-brx-theme="dark"] (specificity 0,2,0).
   We MUST use the same selector so our overrides win in the
   cascade (our file loads after Bricks' inline CSS).

   Surface variables (--cream-background, --iron-background,
   --white-background) are managed by the Bricks palette and
   do NOT need overrides here.
   ======================================== */
:root[data-brx-theme="dark"] {
  /* Text colors — flip dark to light */
  --lazio-black: #FFF7ED;
  --lazio-slate-light: rgba(255, 247, 237, 0.75);

  /* Solid accents — lighten for readability on dark backgrounds */
  --dark-emerald: #4ade80;
  --carmine: #fb7185;

  /* Solid dark-tinted backgrounds — legible on any parent */
  --dark-emerald-t-1: #1e4a2e;
  --dark-emerald-t-2: #132d1e;
  --carmine-t-1: #3d1a22;
  --carmine-t-2: #2d1318;
  --lazio-orange-t-2: #2d1a0a;
  --warning-t-1: #2d2810;
  --iron-t-3: #1a1816;

  /* Iron scale — keep cream-based for timeline dots/lines */
  --iron-t-2: rgba(255, 247, 237, 0.15);

  /* Supporting text — muted cream */
  --slate-gray: rgba(255, 247, 237, 0.5);
}

/* Hero — already dark in light mode, keep it dark */
:root[data-brx-theme="dark"] .hero-dark {
  background-color: #1C1917 !important;
  color: #FFF7ED !important;
}

/* Light-context: pin colors to light-mode values for components
   on permanently light backgrounds (e.g. newspaper article) */
:root[data-brx-theme="dark"] .light-context {
  --iron: #1C1917;
  --iron-t-1: rgba(85, 83, 81, 0.6);
  --iron-t-2: rgba(142, 140, 139, 0.3);
  --iron-t-3: rgba(198, 198, 197, 0.1);
  --slate-gray: #767676;
  --lazio-black: #1C1917;
  --lazio-slate-light: #78716C;
  color: #1C1917;
}