/* ================================================================
   bb-global.css — BBULL Design System · Token Layer + Base Styles
   Load order: 1 of 3 (before bb-components.css and bb-pages.css)
   Source sections from bb-style.css: 0, 0a, 1, 3, 8, 9, 13, 17, 99
   ================================================================ */

/* ════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ════════════════════════════════════════════════════════════════ */
:root {

  /* ── 1a. Brand Colors ──────────────────────────────────── */
  --bb-red:       #d01920;
  --bb-red-dark:  #8f000c;

  /* Backward compat */
  --primary:      var(--bb-red);
  --secondary:    #3C4654;
  --accent:       #008C6E;
  --bb-accent:    var(--bb-red);
  --bb-primary-hover: #a31319;
  --bb-cta-hover:     #ff212a;
  --bb-cta-neutral-hover: #c8c8c8;

  /* ── 1b. Text Colors ───────────────────────────────────── */
  --bb-text:      #121926;
  --bb-muted:     #526173;
  --bb-text-soft: #364152;

  /* Backward compat: opacity-based variant still used in older rules */
  --bb-text-muted: rgba(21, 27, 38, 0.78);
  --text-light:    #ffffff;

  /* ── 1c. Background & Surface ──────────────────────────── */
  --bb-bg:         #f4f7fa;
  --bb-bg-alt:     #e8edf2;
  --bb-white-soft: rgba(255, 255, 255, 0.82);
  --bb-blue-soft:  rgba(0, 110, 191, 0.08);
  --bb-wash:
    linear-gradient(
      90deg,
      rgba(244, 249, 252, 0.96) 0%,
      rgba(244, 249, 252, 0.88) 28%,
      rgba(244, 249, 252, 0.55) 52%,
      rgba(244, 249, 252, 0.22) 100%
    ),
    linear-gradient(
      180deg,
      rgba(244, 249, 252, 0.72) 0%,
      rgba(244, 249, 252, 0.18) 42%,
      rgba(244, 249, 252, 0.80) 100%
    );

  /* Backward compat surface tokens */
  --bb-surface:        #ffffff;
  --bb-surface2:       #d3d7db;
  --bb-surface-muted:  var(--bb-bg);
  --bb-surface-ghost:  rgba(255, 255, 255, 0.5);
  --bb-page-bg:        var(--bb-bg);

  /* ── 1d. Borders ───────────────────────────────────────── */
  --bb-border:        rgba(15, 23, 42, 0.08);
  --bb-border-strong: rgba(15, 23, 42, 0.12);

  /* ── 1e. Radii ─────────────────────────────────────────── */
  --bb-radius-sm:   14px;
  --bb-radius-md:   22px;   /* kept near existing 24px card radius */
  --bb-radius-lg:   28px;   /* matches existing section radius */
  --bb-radius-pill: 999px;

  /* Backward compat */
  --bb-radius-card:    var(--bb-radius-md);
  --bb-radius-section: var(--bb-radius-lg);
  --r-1: 5px;
  --r-2: 24px;
  --r-3: 48px;
  --r-4: var(--bb-radius-pill);

  /* ── 1f. Shadows ───────────────────────────────────────── */
  --bb-shadow-card: 4px 8px 10px rgba(18, 25, 38, 0.08);
  --bb-shadow-soft: 0 12px 30px rgba(18, 25, 38, 0.06);
  --bb-small-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  /* Backward compat */
  --bb-shadow-lg: var(--bb-shadow-card);
  --bb-shadow-md: var(--bb-shadow-soft);

  /* Neomorphic shadow set */
  --bb-card-neo-bg:     linear-gradient(145deg, #f2f6fb 0%, #ffffff 100%);
  --bb-card-neo-border: 1px solid #ffffff;
  --bb-card-neo-shadow:
    -7px  -7px 14px rgba(255, 255, 255, 0.78),
     8px   8px 16px rgba(15, 23, 42, 0.09),
    inset 0  1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -1px 0 rgba(15, 23, 42, 0.08);
  --bb-shadow-hover:
    -9px  -9px 18px rgba(255, 255, 255, 0.82),
    10px  10px 20px rgba(15, 23, 42, 0.13),
    inset 0  1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -1px 0 rgba(15, 23, 42, 0.08);

  --bb-card-overlay:      rgba(255, 255, 255, 0.5);
  --bb-card-shadow-glass: 0 8px 24px rgba(0, 0, 0, 0.5);
  --bb-card-shadow-job:   6px 6px 9px rgba(0, 0, 0, 0.2);

  /* ── 1g. Layout ────────────────────────────────────────── */
  --bb-content-width:     1180px;
  --container-max:        min(1400px, 92vw);
  --container-pad-inline: clamp(16px, 4vw, 48px);

  /* ── 1h. Breakpoints (reference — use in @media, not calc) */
  --bb-bp-tablet: 920px;
  --bb-bp-mobile: 640px;

  /* ── 1i. Spacing Scale ─────────────────────────────────── */
  --padding-xs: clamp(0.25rem, 0.2vw + 0.2rem, 0.5rem);
  --padding-s:  clamp(0.5rem,  0.4vw + 0.4rem, 1rem);
  --padding-m:  clamp(1rem,    0.8vw + 0.8rem, 1.5rem);
  --padding-l:  clamp(4.5rem, 5.2vw + 1rem, 10.5rem);
  --padding-xl: clamp(2rem,    2vw   + 1.5rem,  4rem);

  --section-pad-block: clamp(60px, 3vw, 100px);
  --section-gap:       clamp(40px, 6vw, 80px);
  --bb-spacing:        var(--section-gap);

  /* ── 1j. Typography ────────────────────────────────────── */
  --font-body:    "Manrope", Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-stack:   var(--font-body);
  --font-heading: "Poppins", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --weight-body:    400;
  --weight-strong:  600;
  --weight-heading: 700;

  --fs-h1: clamp(1.9rem, 2.6vw, 3.3rem);
  --fs-xl: clamp(1.875rem, 1rem + 1.4vw, 2.75rem);
  --fs-l:  clamp(1.375rem, 1.05rem + 0.55vw, 1.625rem);
  --fs-m:  1rem;
  --fs-s:  0.9rem;

  /* ── 1k. Gradients ─────────────────────────────────────── */
  --bb-panel-bg: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
  --bb-cta-bg:   linear-gradient(120deg, var(--bb-red) 0%, var(--bb-red-dark) 100%);
  --bb-cta-section-bg:
    radial-gradient(ellipse at 50% 0%, #e12a31 0%, transparent 55%),
    linear-gradient(135deg, #a51016 0%, #d01920 50%, #b31319 100%);
  --bb-cta-section-text: #ffffff;
  --bb-cta-section-text-muted: rgba(255, 255, 255, 0.88);
  --bb-cta-section-button-start: #ffffff;
  --bb-cta-section-button-end: #e3e7ee;
  --bb-cta-section-button-text: #121926;
  --bb-language-current-bg:  #ffffff;

  /* ── 1l. Legacy Grays (kept for compat) ────────────────── */
  --bg-light:  #f7f7f7;
  --bg-medium: #f0f0f0;
  --bg-dark:   #e9eff6;
  --border:    #cccccc;

  /* ── 1m. State Colors ──────────────────────────────────── */
  --bb-success:        #2b8a3e;
  --bb-success-strong: rgba(43, 138, 62, 0.9);
  --bb-focus-strong:   #1a8833;

  /* ── 1n. Neutral Scale ─────────────────────────────────── */
  --bb-neutral-100: #dde6f0;
  --bb-neutral-200: #d8dce7;
  --bb-neutral-300: #cfdae7;
  --bb-neutral-400: #bfcbdb;
  --bb-neutral-500: #89919c;
  --bb-tag-bg:      #bec3df;

  /* ── 1o. Hero Image Overlay ────────────────────────────── */
  --bb-image-overlay-angle:  90deg;
  --bb-image-overlay-strong: rgba(239, 242, 247, 1);
  --bb-image-overlay-mid:    rgba(239, 242, 247, 0.8);
  --bb-image-overlay-soft:   rgba(239, 242, 247, 0.2);
  --bb-image-overlay-clear:  transparent;

  /* ── 1p. Button Tokens ─────────────────────────────────── */
  --bb-btn-radius:         var(--bb-radius-pill);
  --bb-btn-padding-block:  0.6rem;
  --bb-btn-padding-inline: 1.4rem;

  --bb-btn-bg-color1:    #E3E7EE;
  --bb-btn-bg-color2:    #ffffff;
  --bb-btn-text-color:   #111827;
  --bb-btn-border-color: #ffffff;

  --bb-btn-shadow-base:
    -3px -3px 6px rgba(255,255,255,0.7),
     4px  4px 8px rgba(0,0,0,0.12),
    inset 0  1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 2px rgba(0,0,0,0.08);
  --bb-btn-shadow-hover:
    -4px  -4px  8px rgba(255,255,255,0.80),
     6px   6px 12px rgba(0,0,0,0.18),
    inset 0  1px 0 rgba(255,255,255,0.50),
    inset 0 -2px 3px rgba(0,0,0,0.12);
  --bb-btn-shadow-focus:
    0 0 0 2px rgba(255,255,255,0.9),
    0 0 0 5px rgba(0,0,0,0.12),
    -4px  -4px  8px rgba(255,255,255,0.80),
     6px   6px 12px rgba(0,0,0,0.18),
    inset 0  1px 0 rgba(255,255,255,0.50),
    inset 0 -2px 3px rgba(0,0,0,0.12);
  --bb-btn-shadow-active:
    -2px -2px 5px rgba(255,255,255,0.65),
     3px  3px 6px rgba(0,0,0,0.14),
    inset 0  2px 4px rgba(0,0,0,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.35);
  --bb-btn-shadow-disabled:
    -2px -2px 4px rgba(255,255,255,0.55),
     3px  3px 6px rgba(0,0,0,0.10),
    inset 0  1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 2px rgba(0,0,0,0.06);

  /* ── 1q. Search Button Tokens ──────────────────────────── */
  --bb-search-bg: linear-gradient(180deg, #f7f9fd 0%, #e9eef5 100%);
  --bb-search-disabled-bg: linear-gradient(180deg, #e9eef5 0%, #c9d1db 100%);
  --bb-search-shadow:
    -6px  -6px 12px rgba(255,255,255,0.85),
    10px  12px 22px rgba(15,23,42,0.12),
    inset 0  1px 0 rgba(255,255,255,0.65),
    inset 0 -1px 0 rgba(15,23,42,0.06);
  --bb-search-shadow-hover:
    -8px  -10px 16px rgba(255,255,255,0.9),
    12px   14px 26px rgba(15,23,42,0.18),
    inset 0  1px 0 rgba(255,255,255,0.75),
    inset 0 -1px 0 rgba(15,23,42,0.1),
    0 0 0 3px color-mix(in srgb, var(--bb-red) 28%, rgba(255,255,255,0) 72%);
  --bb-search-shadow-active:
    inset 0  2px  6px rgba(255,255,255,0.5),
    inset 0 -8px 16px rgba(0,0,0,0.18),
    0 6px 14px rgba(15,23,42,0.16);
  --bb-search-shadow-disabled:
    -4px  -6px 10px rgba(255,255,255,0.8),
     6px   8px 16px rgba(15,23,42,0.12),
    inset 0  1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(15,23,42,0.06);

  /* ── 1r. Form Tokens ───────────────────────────────────── */
  --bb-filter-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
  --bb-form-label:    #2c3e50;
  --bb-form-border:   #cccccc;
  --bb-form-bg:       #ffffff;
  --bb-notice-bg:     #f2f2f2;

  /* ── 1s. Misc ───────────────────────────────────────────── */
  --bb-shine-highlight: 255, 255, 255;

  /* ── 1t. Section Background Tokens ─────────────────────── */
  --bb-bg-glow:        rgba(0, 110, 191, 0.12);
  --bb-bg-sheen:       rgba(255, 255, 255, 0.5);
  --bb-grid-line:      rgba(18, 25, 38, 0.035);
  --bb-card-bg-soft:   rgba(255, 255, 255, 0.72);
  --bb-card-border:    rgba(18, 25, 38, 0.08);
  --bb-media-frame-bg: linear-gradient(135deg, rgba(191, 215, 255, 0.1), rgba(255, 255, 255, 0.5));
  --bb-dark-bg:        #080b10;
  --bb-dark-bg-alt:    #111827;
  --bb-dark-glow:      rgba(0, 180, 216, 0.12);
  --bb-on-dark:        #f4f7fa;
}

/* ════════════════════════════════════════════════════════════════
   2. DARK MODE TOKENS
   Activated by <html class="bb-dark-mode">
   Also responds to .wp-dark-mode-active for plugin compat.
   ════════════════════════════════════════════════════════════════ */
html.bb-dark-mode:root,
html.wp-dark-mode-active:root {
  --secondary:    #9aaecb;

  --bb-text:      #d7deea;
  --bb-muted:     rgba(215, 222, 234, 0.68);
  --bb-text-soft: #b8c3d6;
  --bb-text-muted: rgba(215, 222, 234, 0.68);
  --text-light:   #eef2f8;
  --bb-on-dark:    #e1e7f0;

  --bb-bg:            #0c1118;
  --bb-bg-alt:        #0e1720;
  --bb-surface:       #202832;
  --bb-surface2:      #202832;
  --bb-surface-muted: #151d27;
  --bb-page-bg:       #151d27;
  --bb-dark-bg:       #0c141c;
  --bb-dark-bg-alt:   #151d27;
  --bb-dark-glow:     rgba(76, 130, 159, 0.12);
  --bb-border:        rgba(255, 255, 255, 0.08);
  --bb-border-strong: rgba(255, 255, 255, 0.12);

  --bb-card-neo-bg:     linear-gradient(145deg, #18212b 0%, #28323d 100%);
  --bb-card-neo-border: 1px solid rgba(255, 255, 255, 0.06);
  --bb-card-neo-shadow:
    -10px -10px 22px rgba(69, 96, 116, 0.10),
     12px  14px 28px rgba(4, 8, 14, 0.34),
    inset 0  1px 0 rgba(151, 177, 193, 0.09),
    inset 0 -1px 0 rgba(4, 8, 14, 0.16);
  --bb-shadow-card: 0 18px 40px rgba(0, 0, 0, 0.55);
  --bb-shadow-soft: 0 12px 24px rgba(0, 0, 0, 0.35);
  --bb-shadow-lg:   var(--bb-shadow-card);
  --bb-shadow-md:   var(--bb-shadow-soft);
  --bb-shadow-hover:
    -12px -12px 24px rgba(255, 255, 255, 0.03),
     12px  12px 24px rgba(0, 0, 0, 0.55),
    inset 0  1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);

  --bb-panel-bg: linear-gradient(180deg, var(--bb-bg) 0%, var(--bb-bg-alt) 100%);
  --bb-cta-bg:   linear-gradient(120deg, #e32b33 0%, #b0171e 100%);
  --bb-cta-section-bg:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(208, 25, 32, 0.95) 0%,
      rgba(208, 25, 32, 0.45) 35%,
      transparent 70%
    ),
    linear-gradient(135deg, #57090d 0%, #8f1016 45%, #5a090d 100%);
  --bb-cta-section-button-start: #f8fafc;
  --bb-cta-section-button-end: #d8e0ea;
  --bb-language-current-bg: #1d3440;

  --bg-light:  #202832;
  --bg-medium: #151d27;
  --bg-dark:   #0e1720;
  --border:    rgba(255, 255, 255, 0.12);

  --bb-btn-bg-color1:    #1f2937;
  --bb-btn-bg-color2:    #374151;
  --bb-btn-text-color:   var(--text-light);
  --bb-btn-border-color: rgba(255, 255, 255, 0.08);

  --bb-wash:
    linear-gradient(
      90deg,
      rgba(5, 6, 17, 0.92) 0%,
      rgba(10, 14, 30, 0.78) 28%,
      rgba(18, 31, 43, 0.44) 52%,
      rgba(18, 31, 43, 0.14) 100%
    ),
    linear-gradient(
      180deg,
      rgba(18, 31, 43, 0.64) 0%,
      rgba(18, 31, 43, 0.16) 42%,
      rgba(18, 31, 43, 0.70) 100%
    );

  --bb-btn-shadow-base:
    -3px -3px  6px rgba(42,58,84,0.2),
     4px  4px 10px rgba(0,0,0,0.55),
    inset 0  1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 2px rgba(0,0,0,0.35);
  --bb-btn-shadow-hover:
    -4px  -4px 10px rgba(255,255,255,0.04),
     8px   8px 16px rgba(0,0,0,0.7),
    inset 0  1px 0 rgba(255,255,255,0.18),
    inset 0 -2px 3px rgba(0,0,0,0.45);
  --bb-btn-shadow-focus:
    0 0 0 2px rgba(255,255,255,0.15),
    0 0 0 5px rgba(0,0,0,0.4),
    -4px  -4px 10px rgba(255,255,255,0.14),
     8px   8px 16px rgba(0,0,0,0.7),
    inset 0  1px 0 rgba(255,255,255,0.18),
    inset 0 -2px 3px rgba(0,0,0,0.45);
  --bb-btn-shadow-active:
    -2px -2px  5px rgba(255,255,255,0.1),
     4px  4px 10px rgba(0,0,0,0.55),
    inset 0  2px 4px rgba(0,0,0,0.55),
    inset 0 -1px 0 rgba(255,255,255,0.16);
  --bb-btn-shadow-disabled:
    -2px -2px 4px rgba(255,255,255,0.1),
     3px  3px 6px rgba(0,0,0,0.45),
    inset 0  1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 2px rgba(0,0,0,0.35);

  --bb-filter-shadow:  inset 0 2px 4px rgba(0, 0, 0, 0.35);
  --bb-search-bg:      linear-gradient(180deg, #111827 0%, #0b1220 100%);
  --bb-search-disabled-bg: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  --bb-search-shadow:
    -6px  -6px 12px rgba(255,255,255,0.08),
    10px  12px 22px rgba(0,0,0,0.55),
    inset 0  1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.45);
  --bb-search-shadow-hover:
    -8px  -10px 16px rgba(255,255,255,0.12),
    12px   14px 26px rgba(0,0,0,0.7),
    inset 0  1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 0 0 3px color-mix(in srgb, var(--bb-red) 28%, transparent);
  --bb-search-shadow-active:
    inset 0  2px  6px rgba(255,255,255,0.12),
    inset 0 -8px 16px rgba(0,0,0,0.55),
    0 6px 14px rgba(0,0,0,0.65);
  --bb-search-shadow-disabled:
    -4px  -6px 10px rgba(255,255,255,0.08),
     6px   8px 16px rgba(0,0,0,0.55),
    inset 0  1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.5);

  --bb-card-shadow-glass: 0 8px 24px rgba(0, 0, 0, 0.75);
  --bb-card-shadow-job:   6px 6px 12px rgba(0, 0, 0, 0.55);
  --bb-card-overlay:      color-mix(in srgb, var(--bb-surface) 90%, transparent);
  --bb-surface-ghost:     color-mix(in srgb, var(--bb-surface) 78%, transparent);

  --bb-image-overlay-angle:  90deg;
  --bb-image-overlay-strong: rgba(25, 39, 53, 0.86);
  --bb-image-overlay-mid:    rgba(25, 39, 53, 0.64);
  --bb-image-overlay-soft:   rgba(31, 49, 65, 0.26);
  --bb-image-overlay-clear:  transparent;

  --bb-success:        #22c55e;
  --bb-success-strong: rgba(34, 197, 94, 0.9);
  --bb-primary-hover:  #e63c44;
  --bb-cta-hover:      #ff4f5a;
  --bb-cta-neutral-hover: #2f3847;
  --bb-small-shadow:   0 2px 8px rgba(0, 0, 0, 0.35);
  --bb-focus-strong:   #22c55e;

  --bb-neutral-100: #111827;
  --bb-neutral-200: #1a2434;
  --bb-neutral-300: #1f2937;
  --bb-neutral-400: #243249;
  --bb-neutral-500: #5b6a83;
  --bb-tag-bg:      #1f2937;

  --bb-form-label:  var(--bb-text);
  --bb-form-border: rgba(255, 255, 255, 0.14);
  --bb-form-bg:     #0f172a;
  --bb-notice-bg:   #111827;

  --bb-bg-glow:      rgba(0, 180, 216, 0.12);
  --bb-bg-sheen:     rgba(255, 255, 255, 0.06);
  --bb-grid-line:    rgba(255, 255, 255, 0.04);
  --bb-card-bg-soft: rgba(20, 24, 33, 0.7);
  --bb-card-border:  rgba(255, 255, 255, 0.08);
  --bb-media-frame-bg: linear-gradient(135deg, var(--bb-bg-glow), var(--bb-grid-line));
}

/* Dark mode: nav submenu panels */
html.bb-dark-mode .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container,
html.wp-dark-mode-active .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
  background: var(--bb-surface) !important;
  border-color: var(--bb-border) !important;
  color: var(--bb-text);
}

/* ════════════════════════════════════════════════════════════════
   3. BASE / RESET TOUCHES
   ════════════════════════════════════════════════════════════════ */
html {
  background: transparent;
  scroll-behavior: smooth;
}

body {
  background: var(--bb-surface-muted);
  color: var(--bb-text);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  font-synthesis: none;
  font-variant-numeric: proportional-nums;
}

:target {
  scroll-margin-top: 100px;
  animation: bb-highlightFade 2s ease-out;
  outline: 2px solid var(--bb-focus-strong);
  outline-offset: 4px;
  border-radius: 8px;
}

@keyframes bb-highlightFade {
  0%   { background-color: color-mix(in srgb, var(--bb-focus-strong) 20%, transparent); }
  100% { background-color: transparent; }
}

:root :where(.is-layout-constrained) > .bb-section:first-child {
  margin-block-start: 0;
}

#header, #footer { width: 100%; }

/* Keeps admin bar out of the sticky header stack */
#wpadminbar { position: absolute !important; }

/* The block editor needs WordPress' fixed admin bar at the viewport top. */
body.wp-admin #wpadminbar {
  position: fixed !important;
  top: 0 !important;
}

.hidden     { display: none !important; }
.full-width { width: 100vw !important; padding-inline: 0 !important; }
.background-image { background-attachment: fixed; }
.bb-safezone { margin: 20px; }

.entry-content { margin-block-start: 0; height: auto; }

:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* ════════════════════════════════════════════════════════════════
   4. TYPOGRAPHY — scoped to .bb-section and .entry-content
   Component-specific type scales live in bb-components.css.
   ════════════════════════════════════════════════════════════════ */
.bb-section h1, .bb-section h2, .bb-section h3, .bb-section h4,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
  margin-block: 0 10px;
  color: var(--bb-text);
  letter-spacing: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-variant-numeric: lining-nums;
}

:where(.bb-section, .entry-content) h1 { font-size: var(--fs-h1); line-height: 1.1; margin-top: 30px; }
:where(.bb-section, .entry-content) h2 { font-size: var(--fs-xl); line-height: 1.1; }
:where(.bb-section, .entry-content) h3 { font-size: var(--fs-l); }

:where(.bb-section, .entry-content) p:not(:where(.bb-eyebrow, .bb-section-eyebrow, .bb-faq__eyebrow, .bb-legal__eyebrow)),
:where(.bb-section, .entry-content) li {
  margin: 0;
  color: var(--bb-text-muted);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
}

/* ── Eyebrow / Label ──────────────────────────────────────── */
/* Shared by .bb-eyebrow, .bb-section-eyebrow, .bb-faq__eyebrow */
.bb-eyebrow,
.bb-section-eyebrow,
.bb-faq__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 0.25vw + 0.75rem, 0.95rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bb-red);
  margin: 0 0 0.25rem;
}

/* Numeric + table precision */
.bb-numeric,
.wp-block-table td,
.wp-block-table th {
  font-variant-numeric: tabular-nums lining-nums;
}

.bb-mono { font-family: var(--font-mono); font-variant-ligatures: none; }

/* ════════════════════════════════════════════════════════════════
   5. GLOBAL LINKS
   ════════════════════════════════════════════════════════════════ */
a {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
  transition: color 0.2s ease, font-weight 0.1s ease;
}

a:visited { color: inherit; }
a:hover   { text-decoration: none; }

a.bb-btn:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button .wp-block-button__link:focus-visible { outline: none; }

a:focus-visible {
  outline: 2px solid var(--bb-red);
  outline-offset: 2px;
}

footer a:hover { text-decoration: none; font-weight: var(--weight-heading); }
.tag-more, .badge-more { text-decoration: none; }

/* Card links: no weight shift on hover */
a.inspection-item.bb-card,
a.inspection-item.bb-card:hover { font-weight: inherit; }

/* Main nav: no bold-on-hover */
nav.wp-block-navigation[aria-label*="Hauptnavigation"] a,
nav.wp-block-navigation[aria-label*="Hauptnavigation"] a:hover {
  text-decoration: none;
}

/* ── WP Latest Posts title link ───────────────────────────── */
.wp-block-latest-posts :where(.wp-block-latest-posts__post-title) {
  color: var(--bb-text);
  letter-spacing: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-variant-numeric: lining-nums;
  align-self: center;
  border-left: 3px solid transparent;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
}

.wp-block-latest-posts :where(
  .wp-block-latest-posts__post-title:hover,
  .wp-block-latest-posts__post-title:focus
) {
  border-left-color: var(--bb-red);
  padding-left: 1rem;
  text-decoration: none !important;
  letter-spacing: 0;
}

.wp-block-latest-posts :where(
  .wp-block-latest-posts__post-date,
  .wp-block-latest-posts__post-author
) {
  margin-top: 0.15rem;
  line-height: 1.5;
  color: var(--bb-muted);
  font-size: 0.75rem;
}

.wp-block-latest-posts :where(.wp-block-latest-posts__post-excerpt) {
  line-height: 1.5;
  color: var(--bb-text);
  font-size: 1rem;
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   6. SECTION + CONTAINER PRIMITIVES
   ════════════════════════════════════════════════════════════════ */
.bb-section {
  background: transparent;
  position: relative;
  overflow: clip;
  padding-block: var(--padding-l);
  padding-inline: var(--container-pad-inline);
  margin-inline: auto;
  margin: 0;
}

.bb-section--tight {
  --section-pad-block: var(--padding-l);
  padding: var(--section-pad-block);
}

.bb-section--loose {
  --section-pad-block: clamp(48px, 7vw, 96px);
  padding: var(--section-pad-block);
}

.bb-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-inline);
}

hr.bb-line {
  border: none;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--bb-red), transparent);
  width: 50%;
  margin: auto;
}

/* ════════════════════════════════════════════════════════════════
   7. UTILITY CLASSES
   ════════════════════════════════════════════════════════════════ */
.bb-stack > * + *    { margin-block-start: var(--padding-m); }
.bb-stack--l > * + * { margin-block-start: var(--padding-l); }

.bb-center       { text-align: center; }
.bb-muted        { color: var(--bb-muted); }
.bb-center-group { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; }
.bb-center-y     { display: flex; align-items: center; }
.bb-center-both  { display: flex; align-items: center; justify-content: center; }

.text-center { text-align: center; }
.text-right  { text-align: right; }

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mb-4 { margin-bottom: 1rem !important; }

.bb-text--small  { font-size: 0.9rem; line-height: 1.45; }
.bb-text--muted  { color: var(--bb-muted); }
.bb-text--italic { font-style: italic; }

.bb-byline {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--bb-muted);
  font-style: italic;
}

/* Micro-interaction for arbitrary link wrappers */
.link-anything { display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.link-anything img { transition: transform 0.2s; }
.link-anything:hover img { transform: scale(1.05); }

/* ════════════════════════════════════════════════════════════════
   8. HEADER (sticky base)
   ════════════════════════════════════════════════════════════════ */
.wp-site-blocks > header,
#site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bb-surface);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.head { border-bottom: 5px solid var(--bb-red); }

li .wp-block-navigation-item:hover { border-left: 4px solid var(--bb-red); }

/* BBULL header: the navigation stays editor-managed via the core Navigation block. */
.bb-site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bb-surface);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.bb-site-header .head {
  background: inherit;
}

.bb-header-row {
  min-height: 72px;
  gap: clamp(0.75rem, 2vw, 2rem);
}

.bb-header-row .wp-block-site-logo,
.bb-header-tools {
  flex: 0 0 auto;
}

.bb-header-row .wp-block-site-logo img {
  display: block;
  width: min(180px, 18vw);
  height: auto;
}

.bb-nav--main {
  margin-left: auto;
}

.bb-header-tools {
  gap: 0.75rem;
  align-items: center;
}

.bb-language-switcher.has-global-padding {
  padding: 0 !important;
}

.bb-language-switcher ul {
  display: flex;
  margin: 0;
  padding: 3px;
  list-style: none;
  border: 1px solid var(--bb-border);
  border-radius: 999px;
  background: var(--bb-surface-muted);
}

.bb-language-switcher li {
  display: flex;
}

.bb-language-switcher a {
  display: grid;
  min-width: 34px;
  min-height: 30px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
}

/* The current Polylang item becomes the switch thumb; the other flag stays a link. */
.bb-language-switcher .current-lang a {
  border-color: transparent;
  background: var(--bb-language-current-bg);
  box-shadow: 0 1px 3px rgb(0 0 0 / 14%);
}

/* Core Navigation overlay: use the BBULL tokens in light and dark mode. */
.bb-nav--main .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--bb-surface) !important;
  color: var(--bb-text) !important;
}

.bb-nav--main .wp-block-navigation__responsive-container.is-menu-open a,
.bb-nav--main .wp-block-navigation__responsive-container.is-menu-open button {
  color: var(--bb-text) !important;
}

.bb-nav--main .wp-block-navigation__responsive-container.is-menu-open svg,
.bb-nav--main .wp-block-navigation__responsive-container.is-menu-open svg path {
  fill: currentColor;
  stroke: currentColor;
}

.bb-nav--main .bb-nav-category > .wp-block-navigation-item__content {
  padding: 0.45rem 0;
  color: var(--bb-text) !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: default;
}

.bb-nav--main .bb-nav-category > .wp-block-navigation-submenu__toggle {
  display: none !important;
}

@media (max-width: 782px) {
  .bb-site-header .head {
    padding-inline: 1rem !important;
  }

  .bb-header-row {
    min-height: 64px;
    padding-block: 0.65rem !important;
  }

  .bb-header-row .wp-block-site-logo img {
    width: min(148px, 42vw);
  }

  .bb-header-tools .bb-social {
    display: none;
  }

  .bb-header-tools {
    gap: 0.25rem;
  }

  .bb-language-switcher ul {
    padding: 3px;
  }

  .bb-language-switcher a {
    min-width: 28px;
    min-height: 30px;
  }

  .bb-nav--main .wp-block-navigation__responsive-container.is-menu-open {
    padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem max(2rem, env(safe-area-inset-bottom));
  }

  .bb-nav--main .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
    width: min(100%, 680px);
    margin: 0 auto;
  }

  .bb-nav--main .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    width: min(100%, 680px);
    margin: 3.5rem auto 0;
  }

  .bb-nav--main .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    width: 100%;
    gap: 0;
  }

  .bb-nav--main .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid var(--bb-border);
  }

  .bb-nav--main .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 1rem 0;
    font-size: 1.125rem;
    font-weight: 700;
  }

  .bb-nav--main .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .bb-nav--main .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
    min-width: 0;
  }

  .bb-nav--main .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
  }

  .bb-nav--main .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
    width: 14px;
    height: 14px;
  }

  /* Categories are labels on mobile; their few child links stay visible. */
  .bb-nav--main .wp-block-navigation__responsive-container.is-menu-open .bb-nav-category {
    display: block;
  }

  .bb-nav--main .wp-block-navigation__responsive-container.is-menu-open .bb-nav-category > .wp-block-navigation-item__content {
    padding: 1.25rem 0 0.45rem;
    color: var(--bb-red) !important;
    font-size: 0.72rem;
    font-weight: 700;
  }

  .bb-nav--main .wp-block-navigation__responsive-container.is-menu-open .bb-nav-category > .wp-block-navigation__submenu-container {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0;
    padding: 0 0 0.6rem;
    border: 0;
    background: transparent !important;
  }

  .bb-nav--main .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    position: static !important;
    display: none;
    grid-column: 1 / -1;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0;
    padding: 0.25rem 1rem 0.75rem;
    border: 0;
    border-left: 2px solid var(--bb-red);
    background: var(--bb-surface-muted) !important;
  }

  .bb-nav--main .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu:has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"]) > .wp-block-navigation__submenu-container {
    display: block;
  }

  .bb-nav--main .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0.7rem 0;
    font-size: 1rem;
    font-weight: 500;
  }
}

/* Polylang language switcher */
.widget_polylang { z-index: 9999; background: transparent; padding-left: 12px; }
.widget_polylang ul { margin: 0; padding: 0; list-style: none; line-height: 1; }

/* ════════════════════════════════════════════════════════════════
   9. SOCIAL ICONS (WP block — global override)
   ════════════════════════════════════════════════════════════════ */
.wp-block-social-link,
.wp-block-social-link a { background: none !important; box-shadow: none !important; }

.wp-block-social-link svg,
.wp-block-social-link svg path {
  fill: var(--bb-red) !important;
  color: var(--bb-red) !important;
}

.wp-block-social-link:hover,
.wp-block-social-link a:hover { background: none !important; box-shadow: none !important; }
.wp-block-social-link:hover svg { opacity: 0.7; }

/* ════════════════════════════════════════════════════════════════
   10. TABLES (global base)
   ════════════════════════════════════════════════════════════════ */
table { border-collapse: collapse; width: 100%; margin-bottom: 1.5rem; }
table th, table td { border: 1px solid var(--bb-border); padding: 8px; text-align: left; }
table th { background: var(--bb-surface-muted); font-weight: 600; }

/* ════════════════════════════════════════════════════════════════
   11. RESPONSIVE + A11Y
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1040px) {
  h2, h3, h4 { word-break: keep-all; }
  #site-header { height: 50px; }
  #site-header-inner { padding: 0; }
  #site-logo { width: 100px; }
}

@media (max-width: 639px) {
  .bb-section::after { opacity: 0.45; }
  .bb-card, .bb-card__body { padding: var(--padding-s); }
}

@media (prefers-reduced-motion: reduce) {
  .bb-card, .bb-btn { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   12. WORDPRESS PRESET INTEGRATION
   Maps WP font-size / font-family presets to BBULL tokens so
   WP's block editor controls stay on the design-system scale.
   ════════════════════════════════════════════════════════════════ */
:root {
  --wp--preset--font-size--small:   var(--fs-s) !important;
  --wp--preset--font-size--medium:  var(--fs-m) !important;
  --wp--preset--font-size--large:   var(--fs-l) !important;
  --wp--preset--font-size--x-large: var(--fs-xl) !important;
  --wp--preset--font-family--body:    var(--font-body) !important;
  --wp--preset--font-family--heading: var(--font-heading) !important;
}

/* Keep shine highlight white regardless of plugin CSS overrides */
:root,
html.wp-dark-mode-active:root {
  --bb-shine-highlight: 255, 255, 255 !important;
}

/* ════════════════════════════════════════════════════════════════
   13. SECTION BACKGROUND PRIMITIVES
   Apply to any .bb-section or wrapper div to set a standardised
   section background. isolation: isolate + z-index: -1 on ::before
   means normal content is safe without .bb-bg-content. Use
   .bb-bg-content only for unusual nested stacking needs.
   ════════════════════════════════════════════════════════════════ */
.bb-bg-soft,
.bb-bg-clean,
.bb-bg-technical,
.bb-bg-dark,
.bb-bg-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Soft ambient — light gradient + blue glow accent */
.bb-bg-soft {
  background:
    radial-gradient(ellipse 70% 60% at 80% 20%, var(--bb-bg-glow), transparent),
    linear-gradient(135deg, var(--bb-bg), var(--bb-bg-alt));
}

/* Clean white — high-contrast content blocks */
.bb-bg-clean {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--bb-surface) 80%, var(--bb-bg) 20%) 0%,
    var(--bb-surface) 60%
  );
}

/* Technical — soft gradient base + subtle grid/sheen overlay */
.bb-bg-technical {
  background:
    radial-gradient(ellipse 70% 60% at 80% 20%, var(--bb-bg-glow), transparent),
    linear-gradient(135deg, var(--bb-bg), var(--bb-bg-alt));
}

.bb-bg-technical::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--bb-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--bb-grid-line) 1px, transparent 1px),
    linear-gradient(135deg, var(--bb-bg-sheen) 0%, transparent 60%);
  background-size: 48px 48px, 48px 48px, 100% 100%;
  pointer-events: none;
  z-index: -1;
}

/* Dark — deep navy for CTA / high-contrast contrast sections */
.bb-bg-dark {
  background:
    radial-gradient(ellipse 70% 60% at 80% 20%, var(--bb-dark-glow), transparent),
    linear-gradient(135deg, var(--bb-dark-bg), var(--bb-dark-bg-alt));
  color: var(--bb-on-dark);
}

/* Red CTA surface with light text and neutral controls in both themes. */
.bb-bg-cta {
  background: var(--bb-cta-section-bg);
  color: var(--bb-cta-section-text);
}

/* Match the dark-mode button shadows on the red CTA in light mode. */
html:not(.bb-dark-mode):not(.wp-dark-mode-active) .bb-bg-cta .bb-btn {
  --bb-btn-shadow-base:
    -3px -3px  6px rgba(42,58,84,0.2),
     4px  4px 10px rgba(0,0,0,0.55),
    inset 0  1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 2px rgba(0,0,0,0.35);
  --bb-btn-shadow-hover:
    -4px  -4px 10px rgba(255,255,255,0.04),
     8px   8px 16px rgba(0,0,0,0.7),
    inset 0  1px 0 rgba(255,255,255,0.18),
    inset 0 -2px 3px rgba(0,0,0,0.45);
  --bb-btn-shadow-focus:
    0 0 0 2px rgba(255,255,255,0.15),
    0 0 0 5px rgba(0,0,0,0.4),
    -4px  -4px 10px rgba(255,255,255,0.14),
     8px   8px 16px rgba(0,0,0,0.7),
    inset 0  1px 0 rgba(255,255,255,0.18),
    inset 0 -2px 3px rgba(0,0,0,0.45);
  --bb-btn-shadow-active:
    -2px -2px  5px rgba(255,255,255,0.1),
     4px  4px 10px rgba(0,0,0,0.55),
    inset 0  2px 4px rgba(0,0,0,0.55),
    inset 0 -1px 0 rgba(255,255,255,0.16);
  --bb-btn-shadow-disabled:
    -2px -2px 4px rgba(255,255,255,0.1),
     3px  3px 6px rgba(0,0,0,0.45),
    inset 0  1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 2px rgba(0,0,0,0.35);
}

.bb-bg-cta :is(h1, h2, h3, h4, .bb-eyebrow, .bb-section-eyebrow) {
  color: var(--bb-cta-section-text);
}

.bb-bg-cta :is(p, li) {
  color: var(--bb-cta-section-text-muted);
}

.bb-bg-cta :is(.bb-eyebrow, .bb-section-eyebrow, strong) {
  color: var(--bb-cta-section-text);
}

/* Lift direct children above ::before overlays */
.bb-bg-content {
  position: relative;
  z-index: 1;
};