/* ==========================================================================
   SOFTWARE SAUCE SOLUTIONS — CONSOLIDATED DESIGN SYSTEM STYLESHEET
   File: wp-content/uploads/sss/design-system.css
         (installed copy of the authored out/sss-design-system.css)
   Authority: Novamira Design System Record 17 (slug: software-sauce-solutions)
   Injection Point: ONE <link rel="stylesheet"> in wp_head, emitted by the
   Head & Footer Code plugin's site-wide head snippet. The former Astra
   Advanced Hook 44 (the old scattered inline <style>) is retired.
   Single Source of Truth: Core Design System tokens, typography, layout,
   components, responsive scales, and re-derived dark mode.
   
   RULE: All colour values, radii, and typography stacks must be defined as
   tokens in the :root layer (or in the dark-mode override block). No rule
   outside the token layers may introduce raw hex values.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONT STACKS & STRATEGY (@font-face free)
   Space Grotesk (headings) and Public Sans (body) are enqueued by theme /
   Google Fonts. No @import statements are used. Fallback is bare sans-serif.
   -------------------------------------------------------------------------- */
:root {
  --sss-font-heading: 'Space Grotesk', sans-serif;
  --sss-font-body: 'Public Sans', sans-serif;
}

/* --------------------------------------------------------------------------
   2. CORE DESIGN SYSTEM TOKENS (LIGHT MODE / DEFAULT)
   Canonical tokens based on the approved Novamira system, plus back-compat
   aliases for legacy widget HTML and existing Elementor element settings.
   -------------------------------------------------------------------------- */
:root {
  /* Canonical Colour Palette */
  --sss-bg: #FFFFFF;
  --sss-surface: #F8FAFC;
  --sss-ink: #0F172A;
  --sss-muted: #475569;
  --sss-accent: #F59E0B;        /* CTAs ONLY — strictly reserved */
  --sss-primary: #0EA5E9;       /* Sky Blue 500 — links, icons, UI accents */
  --sss-primary-dark: #0284C7;  /* Sky Blue 600 — link hover, primary dark */
  --sss-border: #E2E8F0;        /* Hairline border */

  /* Spacing Scale */
  --sss-spacing-sm: 8px;
  --sss-spacing-md: 24px;
  --sss-spacing-lg: 64px;

  /* Radius Scale: 6px / 12px / 9999px (+ 8px buttons) */
  --sss-radius-sm: 6px;         /* Badges, inputs, toggles */
  --sss-radius-md: 12px;        /* Cards, callouts, containers */
  --sss-radius-pill: 9999px;    /* Tags ONLY */
  --sss-radius-btn: 8px;        /* Buttons strictly 8px */

  /* Elevation: Flat posture. Hairline borders only.
     The ONLY permitted shadow on the site is a soft blue-tinted hover on primary CTAs. */
  --sss-cta-shadow: 0 4px 14px rgba(14, 165, 233, 0.25);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* Category Colour Coding: Three steps of ONE unified Sky-Blue Ramp */
  /* Step 1: Signal (Core Primary) */
  --signal-accent: #0EA5E9;
  --signal-hover: #0284C7;
  --signal-light: rgba(14, 165, 233, 0.08);

  /* Step 2: Agent (Distinct Sky-Blue Shade, Primary Dark) */
  --agent-accent: #0284C7;
  --agent-hover: #0369A1;
  --agent-light: rgba(2, 132, 199, 0.08);

  /* Step 3: Insight (Deep Sky-Blue Shade) */
  --insight-accent: #0369A1;
  --insight-hover: #075985;
  --insight-light: rgba(3, 105, 161, 0.08);

  /* Back-Compatibility Aliases for Legacy Markup & Sidebar Widgets */
  --canvas-bg: var(--sss-surface);
  --surface-bg: var(--sss-bg);
  --surface-elevated: var(--sss-bg);
  --surface-subtle: var(--sss-surface);
  --ink-primary: var(--sss-ink);
  --ink-secondary: var(--sss-muted);
  --ink-muted: var(--sss-muted);
  --border-color: var(--sss-border);
  --border-subtle: var(--sss-border);
  --header-bg: var(--sss-bg);
  --header-border: var(--sss-border);
  --header-text: var(--sss-ink);
  --footer-bg: var(--sss-ink);
  --footer-text: var(--sss-surface);
  --radius-sm: var(--sss-radius-sm);
  --radius-md: var(--sss-radius-md);
  --radius-lg: var(--sss-radius-md); /* Remapped from 16px to 12px to obey scale */
  --radius-full: var(--sss-radius-pill);
  --reading-max-width: 680px;        /* Approved reading measure */
}

/* --------------------------------------------------------------------------
   3. NEUTRALISE DEAD GUTENBERG PRESET PALETTE
   WordPress core injects default color/gradient CSS variables into
   global-styles-inline-css (e.g. vivid-purple, luminous-vivid-orange).
   None of these are part of the approved design system. By redefining them
   here to approved tokens, no core block can render rogue neon/off-palette
   hues even if legacy content references them.
   -------------------------------------------------------------------------- */
:root {
  --wp--preset--color--black: var(--sss-ink);
  --wp--preset--color--cyan-bluish-gray: var(--sss-muted);
  --wp--preset--color--white: var(--sss-bg);
  --wp--preset--color--pale-pink: var(--sss-surface);
  --wp--preset--color--vivid-red: var(--sss-accent);
  --wp--preset--color--luminous-vivid-orange: var(--sss-accent);
  --wp--preset--color--luminous-vivid-amber: var(--sss-accent);
  --wp--preset--color--light-green-cyan: var(--sss-surface);
  --wp--preset--color--vivid-green-cyan: var(--sss-primary);
  --wp--preset--color--pale-cyan-blue: var(--sss-surface);
  --wp--preset--color--vivid-cyan-blue: var(--sss-primary);
  --wp--preset--color--vivid-purple: var(--sss-primary); /* Strictly eliminate purple */

  /* Astra preset aliases mapped to approved system */
  --wp--preset--color--ast-global-color-0: var(--sss-primary);
  --wp--preset--color--ast-global-color-1: var(--sss-primary-dark);
  --wp--preset--color--ast-global-color-2: var(--sss-ink);
  --wp--preset--color--ast-global-color-3: var(--sss-muted);
  --wp--preset--color--ast-global-color-4: var(--sss-surface);
  --wp--preset--color--ast-global-color-5: var(--sss-bg);
  --wp--preset--color--ast-global-color-6: var(--sss-border);
  --wp--preset--color--ast-global-color-7: var(--sss-accent);
  --wp--preset--color--ast-global-color-8: var(--sss-ink);

  /* Core gradient neutralization to approved system tones */
  --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, var(--sss-primary) 0%, var(--sss-primary-dark) 100%);
  --wp--preset--gradient--blush-light-purple: linear-gradient(135deg, var(--sss-surface) 0%, var(--sss-border) 100%);
  --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg, var(--sss-primary) 0%, var(--sss-primary-dark) 100%);
  --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg, var(--sss-surface) 0%, var(--sss-border) 100%);
  --wp--preset--gradient--luminous-dusk: linear-gradient(135deg, var(--sss-surface) 0%, var(--sss-border) 100%);
  --wp--preset--gradient--pale-ocean: linear-gradient(135deg, var(--sss-surface) 0%, var(--sss-border) 100%);
  --wp--preset--gradient--electric-grass: linear-gradient(135deg, var(--sss-surface) 0%, var(--sss-border) 100%);
  --wp--preset--gradient--midnight: linear-gradient(135deg, var(--sss-surface) 0%, var(--sss-border) 100%);
}

/* --------------------------------------------------------------------------
   4. BASE TYPOGRAPHY & ELEMENTS
   -------------------------------------------------------------------------- */
body {
  /* Override Astra theme and Elementor body inline styles */
  background-color: var(--canvas-bg) !important;
  /* Override Astra text color defaults */
  color: var(--ink-secondary) !important;
  /* Enforce Public Sans across body, overriding default theme fonts */
  font-family: var(--sss-font-body) !important;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.01em;
  margin: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.entry-title {
  /* Override Elementor widget-level typography defaults and Google Font enqueues */
  font-family: var(--sss-font-heading) !important;
  /* Enforce high-contrast ink primary on all headings */
  color: var(--ink-primary) !important;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

a {
  color: var(--sss-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--sss-primary-dark);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--sss-primary);
  outline-offset: 2px;
}

p {
  margin-top: 0;
  margin-bottom: 1.25em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   5. HEADER COMPONENT (XPRO THEME BUILDER TEMPLATE ID 36)
   Nav font choice: Public Sans 600. Rationale: cleanly distinguishes
   structural navigation links from Space Grotesk 700 headings and brand title.
   -------------------------------------------------------------------------- */
.xpro-theme-builder-header,
.xpro-theme-builder-header .elementor-36,
.xpro-theme-builder-header .elementor-36 .elementor-element-372d410 {
  /* Override Xpro builder container inline background */
  background-color: var(--header-bg) !important;
  /* Override Xpro builder container inline border */
  border-bottom: 1px solid var(--header-border) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.xpro-theme-builder-header .elementor-element-372d410 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  box-sizing: border-box;
}

/* Site Brand Title */
.xpro-theme-builder-header .elementor-widget-theme-site-title .elementor-heading-title a,
.xpro-theme-builder-header .elementor-heading-title a {
  /* Override theme link color and typography in header title */
  font-family: var(--sss-font-heading) !important;
  /* Enforce bold weight on brand site title */
  font-weight: 700 !important;
  font-size: 20px;
  /* Enforce primary dark color on site brand title */
  color: var(--sss-primary-dark) !important;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* Navigation Links */
.xpro-theme-builder-header .elementor-nav-menu .menu-link {
  /* Override Elementor nav-menu widget typography settings */
  font-family: var(--sss-font-body) !important;
  /* Enforce semi-bold weight on nav links */
  font-weight: 600 !important;
  /* Enforce clean font size on nav links */
  font-size: 14px !important;
  /* Override nav menu link color to approved header text */
  color: var(--header-text) !important;
  letter-spacing: -0.01em;
  /* Override nav link spacing */
  padding: 8px 12px !important;
  transition: color 0.15s ease;
}

.xpro-theme-builder-header .elementor-nav-menu .menu-link:hover {
  /* Override Elementor nav hover color */
  color: var(--sss-primary) !important;
}

/* Hairline Hover Underline */
.elementor-nav-menu--layout-horizontal .e--pointer-underline .elementor-item:after {
  /* Enforce 2px hairline pointer underline height */
  height: 2px !important;
  /* Enforce sky blue primary color on pointer underline */
  background-color: var(--sss-primary) !important;
}

/* Submenu Dropdown */
.elementor-nav-menu--dropdown {
  /* Override Elementor dropdown widget background */
  background-color: var(--surface-bg) !important;
  /* Override Elementor dropdown widget border */
  border: 1px solid var(--border-color) !important;
  /* Enforce 12px radius on dropdown container */
  border-radius: var(--radius-md) !important;
  /* Strictly enforce flat posture, eliminating builder drop shadow */
  /* Enforce vertical padding on dropdown */
  padding: 8px 0 !important;
}

.elementor-nav-menu--dropdown .menu-link {
  /* Override dropdown item text color */
  color: var(--ink-primary) !important;
  /* Override dropdown item font family */
  font-family: var(--sss-font-body) !important;
  /* Override dropdown item font size */
  font-size: 14px !important;
  /* Override dropdown item font weight */
  font-weight: 500 !important;
  /* Override dropdown item padding */
  padding: 10px 18px !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.elementor-nav-menu--dropdown .menu-link:hover {
  /* Override dropdown item hover background */
  background-color: var(--surface-subtle) !important;
  /* Override dropdown item hover text color */
  color: var(--sss-primary) !important;
}

/* Header Search Input Group */
.xpro-elementor-search-input-group {
  /* Override Xpro search widget default background */
  background-color: var(--surface-subtle) !important;
  /* Override Xpro search widget default border */
  border: 1px solid var(--border-color) !important;
  /* Enforce 6px radius — NOT pill (pill is tags only) */
  border-radius: var(--radius-sm) !important;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.xpro-elementor-search-input-group:focus-within {
  /* Enforce sky-blue focus ring on search input */
  border-color: var(--sss-primary) !important;
  /* Enforce 3px subtle focus glow */
}

.xpro-elementor-search-input-group input.form-control,
.xpro-elementor-search-input-group input {
  /* Override search input text color */
  color: var(--ink-primary) !important;
  /* Override search input background to transparent */
  background: transparent !important;
  /* Eliminate default inner border */
  border: none !important;
  /* Eliminate default inner box-shadow */
  /* Enforce Public Sans body font on input text */
  font-family: var(--sss-font-body) !important;
  font-size: 14px;
  padding: 8px 12px;
}

.xpro-elementor-search-input-group input::placeholder {
  /* Override search placeholder color */
  color: var(--ink-muted) !important;
}

.xpro-elementor-search-button {
  /* Enforce 44px minimum tap target for accessibility */
  min-width: 44px !important;
  /* Enforce 44px minimum height */
  min-height: 44px !important;
  /* Override button background to transparent */
  background: transparent !important;
  /* Eliminate button border */
  border: none !important;
  /* Center button icon */
  display: flex !important;
  /* Vertically align button icon */
  align-items: center !important;
  /* Horizontally center button icon */
  justify-content: center !important;
  cursor: pointer;
  /* Ensure button tap padding */
  padding: 0 10px !important;
}

.xpro-elementor-search-button svg {
  /* Override SVG search icon color */
  fill: var(--ink-muted) !important;
  width: 16px;
  height: 16px;
  transition: fill 0.15s ease;
}

.xpro-elementor-search-button:hover svg {
  /* Override SVG search icon hover color */
  fill: var(--sss-primary) !important;
}

/* In-Header Theme Toggle Button (injected by hook44_script_0.js) */
.dark-mode-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--surface-subtle);
  color: var(--ink-primary);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
  margin-left: 10px;
  padding: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}

.dark-mode-toggle-btn:hover {
  border-color: var(--sss-primary);
  color: var(--sss-primary);
  background: var(--surface-bg);
}

.dark-mode-toggle-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   6. FOOTER COMPONENT (XPRO THEME BUILDER TEMPLATE ID 37)
   -------------------------------------------------------------------------- */
#xpro-theme-builder-footer,
#xpro-theme-builder-footer .elementor-37,
#xpro-theme-builder-footer .elementor-element-9a3385d {
  /* Override Elementor template 37 container background */
  background-color: var(--footer-bg) !important;
  /* Override footer container text color */
  color: var(--footer-text) !important;
}

#xpro-theme-builder-footer h3,
#xpro-theme-builder-footer h4,
#xpro-theme-builder-footer .elementor-heading-title {
  /* Override footer heading color to high-contrast white token */
  color: var(--sss-bg) !important;
  /* Enforce Space Grotesk heading font in footer */
  font-family: var(--sss-font-heading) !important;
}

#xpro-theme-builder-footer p {
  /* Override footer description paragraph text color */
  color: var(--ink-muted) !important;
  font-size: 14px;
  line-height: 1.6;
}

#xpro-theme-builder-footer a {
  /* Override footer link colors to muted slate */
  color: var(--ink-muted) !important;
  text-decoration: none;
  transition: color 0.15s ease;
}

#xpro-theme-builder-footer a:hover {
  /* Override footer link hover to sky blue */
  color: var(--sss-primary) !important;
}

#xpro-theme-builder-footer .elementor-icon-list-icon svg {
  /* Override icon list bullet SVG color */
  fill: var(--sss-primary) !important;
}

#xpro-theme-builder-footer .elementor-divider-separator {
  /* Override footer divider separator color */
  border-color: color-mix(in srgb, var(--sss-bg) 12%, transparent) !important;
}

/* --------------------------------------------------------------------------
   7. BUTTONS & CALL-TO-ACTION SYSTEM (AMBER CTA & SECONDARY OUTLINE)
   Amber (#F59E0B) is strictly reserved for CTAs — never decorative.
   Text on amber is ink primary (#0F172A), NEVER white.
   Radius is strictly 8px. Minimum tap target 44px. Flat at rest.
   -------------------------------------------------------------------------- */
/* Primary Button Treatment (Elementor Button + Legacy Monetization Button) */
.elementor-button,
.elementor-button-link,
.wp-block-button__link,
.monetization-cta-btn,
#submit {
  /* Override inline-block display on buttons for flex alignment */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  /* Override Elementor button widget padding */
  padding: 12px 24px !important;
  /* Override Elementor button widget background color to amber CTA */
  background-color: var(--sss-accent) !important;
  /* Strict ink text on amber — passes WCAG AAA 7.6:1 */
  color: var(--sss-ink) !important;
  /* Override Elementor button font family to Space Grotesk */
  font-family: var(--sss-font-heading) !important;
  /* Enforce bold weight on CTA buttons */
  font-weight: 700 !important;
  /* Enforce standard button font size */
  font-size: 15px !important;
  letter-spacing: -0.01em;
  /* Strictly enforce 8px button radius */
  border-radius: var(--sss-radius-btn) !important;
  /* Remove default border */
  border: 1px solid transparent !important;
  /* Strictly enforce flat posture at rest */
  /* Remove underline from link buttons */
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  box-sizing: border-box;
  line-height: 1.2;
}

.elementor-button:hover,
.elementor-button-link:hover,
.wp-block-button__link:hover,
.monetization-cta-btn:hover,
#submit:hover {
  /* Enforce rich amber hover state */
  background-color: color-mix(in srgb, var(--sss-accent) 90%, var(--sss-ink)) !important;
  /* Maintain dark ink text on amber hover */
  color: var(--sss-ink) !important;
  transform: translateY(-1px);
  /* The ONLY permitted shadow: soft blue-tinted shadow on primary CTA hover */
}

/* Secondary Button Treatment (Hairline Outline) */
.elementor-button.elementor-button--secondary,
.elementor-element-btn_audit .elementor-button,
.sss-btn-secondary {
  /* Override filled button background to transparent */
  background-color: transparent !important;
  /* Override button text color to ink primary */
  color: var(--ink-primary) !important;
  /* Enforce 1px hairline border on secondary buttons */
  border: 1px solid var(--border-color) !important;
  /* Enforce flat posture with no shadow */
}

.elementor-button.elementor-button--secondary:hover,
.elementor-element-btn_audit .elementor-button:hover,
.sss-btn-secondary:hover {
  /* Override secondary hover background */
  background-color: var(--surface-subtle) !important;
  /* Override secondary hover border color */
  border-color: var(--sss-primary) !important;
  /* Override secondary hover text color */
  color: var(--sss-primary) !important;
  transform: translateY(-1px);
  /* Enforce no shadow on secondary button hover */
}

/* --------------------------------------------------------------------------
   8. COMPONENT LAYER (BADGES, VERDICTS, DISCLOSURES, FLOATING TOGGLE)
   Legacy class names preserved exactly for back-compatibility with real markup.
   -------------------------------------------------------------------------- */
/* Category Badges (Three steps of ONE Sky-Blue Ramp) */
.signal-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
  line-height: 1;
  font-family: var(--sss-font-heading);
  box-sizing: border-box;
}

/* Step 1: Signal (Sky Blue 500) */
.badge-signal {
  /* Override legacy teal badge background */
  background: var(--signal-light) !important;
  /* Override legacy teal badge text color to sky blue */
  color: var(--signal-accent) !important;
  /* Override legacy teal badge border */
  border: 1px solid var(--signal-accent) !important;
}

/* Step 2: Agent (Sky Blue 600 / primaryDark) */
.badge-agent {
  /* Override legacy indigo badge background */
  background: var(--agent-light) !important;
  /* Override legacy indigo badge text color to deep sky blue */
  color: var(--agent-accent) !important;
  /* Override legacy indigo badge border */
  border: 1px solid var(--agent-accent) !important;
}

/* Step 3: Insight (Sky Blue 700 / deep shade) */
.badge-insight {
  /* Override legacy amber badge background */
  background: var(--insight-light) !important;
  /* Override legacy amber badge text color to deep sky blue */
  color: var(--insight-accent) !important;
  /* Override legacy amber badge border */
  border: 1px solid var(--insight-accent) !important;
}

/* Affiliate Disclosure Box */
.affiliate-disclosure-box {
  background: var(--surface-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: 24px;
  box-sizing: border-box;
}

.affiliate-disclosure-box strong {
  color: var(--ink-primary);
  font-weight: 600;
}

/* Verdict Box & Verdict Badge */
.verdict-box {
  background: var(--surface-bg);
  border: 1px solid var(--border-color); /* Restrained hairline border */
  border-radius: var(--radius-md);       /* 12px */
  padding: 24px;
  margin: 28px 0;
  box-shadow: none;                      /* Flat posture */
  box-sizing: border-box;
}

.verdict-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.verdict-badge {
  /* H1 review: amber is reserved for CTAs only. This is an informational
     label sitting in the same box as the amber CTA, so it takes the neutral
     surface treatment — hairline border, ink text, no amber. */
  background: var(--sss-surface) !important;
  border: 1px solid var(--sss-border);
  color: var(--sss-ink) !important;
  font-family: var(--sss-font-heading);
  font-weight: 700;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Remove default border on verdict badge */
  border: none !important;
  line-height: 1.2;
}

/* Monetization Sidebar Widget */
.monetization-sidebar-widget {
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 24px;
  box-sizing: border-box;
}

.monetization-sidebar-widget h3 {
  font-family: var(--sss-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-primary);
  margin-top: 0;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.monetization-sidebar-widget p {
  font-size: 14px;
  color: var(--ink-secondary);
  line-height: 1.6;
}

/* Floating Quick-Switcher Button (injected by hook44_script_0.js) */
#sss-quick-switcher {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  background-color: var(--surface-bg);
  color: var(--ink-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-family: var(--sss-font-heading);
  font-size: 13px;
  font-weight: 600;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  user-select: none;
  box-sizing: border-box;
}

#sss-quick-switcher:hover {
  transform: translateY(-2px);
  border-color: var(--sss-primary);
  color: var(--sss-primary);
}

#sss-quick-switcher svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Sun / Moon Icon Toggling for Both Switchers */
html[data-theme="light"] #sss-quick-switcher .icon-sun,
html[data-theme="light"] .dark-mode-toggle-btn .icon-sun {
  /* Hide sun icon in light mode */
  display: none !important;
}

html[data-theme="light"] #sss-quick-switcher .icon-moon,
html[data-theme="light"] .dark-mode-toggle-btn .icon-moon {
  /* Display moon icon in light mode */
  display: block !important;
}

html[data-theme="dark"] #sss-quick-switcher .icon-sun,
html.dark-mode #sss-quick-switcher .icon-sun,
body.dark-mode #sss-quick-switcher .icon-sun,
html[data-theme="dark"] .dark-mode-toggle-btn .icon-sun,
html.dark-mode .dark-mode-toggle-btn .icon-sun,
body.dark-mode .dark-mode-toggle-btn .icon-sun {
  /* Display sun icon in dark mode */
  display: block !important;
}

html[data-theme="dark"] #sss-quick-switcher .icon-moon,
html.dark-mode #sss-quick-switcher .icon-moon,
body.dark-mode #sss-quick-switcher .icon-moon,
html[data-theme="dark"] .dark-mode-toggle-btn .icon-moon,
html.dark-mode .dark-mode-toggle-btn .icon-moon,
body.dark-mode .dark-mode-toggle-btn .icon-moon {
  /* Hide moon icon in dark mode */
  display: none !important;
}

/* --------------------------------------------------------------------------
   9. HOMEPAGE SECTION SYSTEM & CARDS (FOR PHASE B)
   Utility classes to alternate sections without stacking identical cards.
   -------------------------------------------------------------------------- */
.sss-section {
  padding: 48px 16px;
  width: 100%;
  box-sizing: border-box;
}

.sss-section--white {
  background-color: var(--sss-bg);
  color: var(--sss-ink);
}

.sss-section--surface {
  background-color: var(--sss-surface);
  color: var(--sss-ink);
}

/* 3-Up Post-Card Grid */
.sss-post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
}

/* Dedicated Post Card */
.sss-post-card {
  background-color: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}

.sss-post-card:hover {
  border-color: var(--sss-primary);
}

/* Elementor Posts Widget Card Skin Adaptation */
.elementor-posts--skin-cards .elementor-post__card {
  /* Override Elementor card border */
  border: 1px solid var(--border-color) !important;
  /* Enforce 12px radius on post cards */
  border-radius: var(--radius-md) !important;
  /* Strictly enforce flat posture, removing builder drop shadow */
  /* Override card background */
  background-color: var(--surface-bg) !important;
  /* Smooth border transition */
  transition: border-color 0.2s ease !important;
}

.elementor-posts--skin-cards .elementor-post__card:hover {
  /* Shift border to sky blue on card hover */
  border-color: var(--sss-primary) !important;
  /* Prevent drop shadow on card hover */
}

.elementor-post__badge {
  /* Override card badge background to sky blue tint */
  background: var(--signal-light) !important;
  /* Override card badge text to sky blue primary */
  color: var(--sss-primary) !important;
  /* Enforce pill radius on card badge */
  border-radius: var(--radius-full) !important;
  /* Enforce Space Grotesk heading font on badge */
  font-family: var(--sss-font-heading) !important;
  /* Enforce small badge font size */
  font-size: 11px !important;
  /* Enforce bold badge weight */
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Enforce badge padding */
  padding: 4px 10px !important;
}

.elementor-post__title a {
  /* Enforce Space Grotesk font on card titles */
  font-family: var(--sss-font-heading) !important;
  /* Enforce bold weight on card titles */
  font-weight: 700 !important;
  /* Enforce ink primary text color on card titles */
  color: var(--ink-primary) !important;
  text-decoration: none;
}

.elementor-post__title a:hover {
  /* Shift card title link to sky blue on hover */
  color: var(--sss-primary) !important;
}

.elementor-post__read-more {
  /* Override read more link color to sky blue */
  color: var(--sss-primary) !important;
  /* Enforce Public Sans font on read more link */
  font-family: var(--sss-font-body) !important;
  /* Enforce semi-bold weight on read more link */
  font-weight: 600 !important;
  /* Enforce font size on read more link */
  font-size: 13px !important;
}

.elementor-post__read-more:hover {
  /* Shift read more link to primary dark on hover */
  color: var(--sss-primary-dark) !important;
}

/* --------------------------------------------------------------------------
   10. ARTICLE TEMPLATE & ASTRA SINGLE-POST FURNITURE
   Reading column capped at 680px for the article body and all direct children.
   -------------------------------------------------------------------------- */
/* Reading Measure Cap (680px) */
.single-post .entry-content,
.ast-article-single .entry-content,
.single-post .entry-header,
.ast-article-single .entry-header {
  max-width: var(--reading-max-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.single-post .entry-content > *,
.ast-article-single .entry-content > *,
.single-post .entry-content > p,
.ast-article-single .entry-content > p,
.single-post .elementor-40 .e-con-inner > *,
.single-post .elementor-38 .e-con-inner > *,
.single-post .elementor-39 .e-con-inner > *,
.single-post .elementor-42 .e-con-inner > * {
  max-width: var(--reading-max-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Article Heading & Paragraph Rhythm */
.single-post .entry-content h2,
.ast-article-single .entry-content h2,
.single-post .entry-content .elementor-widget-heading h2.elementor-heading-title {
  margin-top: 44px;
  margin-bottom: 16px;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-primary);
}

.single-post .entry-content h3,
.ast-article-single .entry-content h3,
.single-post .entry-content .elementor-widget-heading h3.elementor-heading-title {
  margin-top: 32px;
  margin-bottom: 12px;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink-primary);
}

.single-post .entry-content p,
.ast-article-single .entry-content p {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 24px;
  color: var(--ink-secondary);
}

/* TL;DR Callout Box */
.sss-tldr-box,
.sss-tldr,
.single-post div[data-id="afaac55"] {
  /* Override Elementor container inline background */
  background: var(--surface-subtle) !important;
  /* Override Elementor container inline border */
  border: 1px solid var(--border-color) !important;
  /* Enforce thick accent left border on TL;DR box */
  border-left: 4px solid var(--sss-primary) !important;
  /* Enforce 12px radius on TL;DR box */
  border-radius: var(--radius-md) !important;
  /* Enforce padding on TL;DR box */
  padding: 20px 24px !important;
  /* Enforce vertical margin on TL;DR box */
  margin: 32px auto !important;
  /* Remove shadow from TL;DR box */
  box-sizing: border-box;
}

.sss-tldr-box h4,
.sss-tldr__label,
.single-post div[data-id="afaac55"] h4.elementor-heading-title {
  /* Enforce Space Grotesk heading font on TL;DR title */
  font-family: var(--sss-font-heading) !important;
  /* Enforce small uppercase font size on TL;DR title */
  font-size: 13px !important;
  /* Enforce bold weight on TL;DR title */
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Enforce sky blue primary color on TL;DR title */
  color: var(--sss-primary) !important;
  margin-top: 0;
  margin-bottom: 8px;
}

.sss-tldr-box p,
.sss-tldr p,
.single-post div[data-id="afaac55"] p {
  /* Enforce readable font size on TL;DR body copy */
  font-size: 15px !important;
  /* Enforce line height on TL;DR body copy */
  line-height: 1.65 !important;
  /* Remove default paragraph margin inside TL;DR box */
  margin: 0 !important;
  /* Enforce high-contrast ink primary on TL;DR copy */
  color: var(--ink-primary) !important;
}

.sss-tldr ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
}

.sss-tldr li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-secondary);
  margin-bottom: 6px;
}

.sss-tldr li:last-child {
  margin-bottom: 0;
}

/* Table of Contents Block */
.elementor-widget-table-of-contents,
.sss-toc {
  background: var(--surface-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 32px auto;
  box-sizing: border-box;
}

.elementor-toc__header-title,
.sss-toc-title,
.sss-toc__label {
  /* Override TOC header font to Space Grotesk */
  font-family: var(--sss-font-heading) !important;
  /* Enforce TOC header font size */
  font-size: 16px !important;
  /* Enforce bold weight on TOC header */
  font-weight: 700 !important;
  /* Enforce ink primary color on TOC header */
  color: var(--ink-primary) !important;
  letter-spacing: -0.01em;
  margin-top: 0;
  margin-bottom: 12px;
}

.sss-toc ol {
  margin: 0;
  padding-left: 20px;
}

.sss-toc ol li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.sss-toc ol li:last-child {
  margin-bottom: 0;
}

.elementor-toc__list-item-text,
.sss-toc ol li a {
  /* Enforce Public Sans font on TOC links */
  font-family: var(--sss-font-body) !important;
  font-size: 14px;
  /* Override TOC link color to muted ink */
  color: var(--ink-secondary) !important;
  text-decoration: none;
  transition: color 0.15s ease;
}

.elementor-toc__list-item-text:hover,
.sss-toc ol li a:hover {
  /* Shift TOC link to sky blue on hover */
  color: var(--sss-primary) !important;
  text-decoration: underline;
}

/* FAQ Block: Details / Summary Variant */
.sss-faq {
  margin: 40px auto;
  box-sizing: border-box;
}

.sss-faq > h2 {
  margin-bottom: 20px;
}

details.sss-faq-item,
details.sss-faq__item,
details {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 12px;
  background: var(--surface-subtle);
  transition: background-color 0.15s ease;
  box-sizing: border-box;
}

details[open] {
  background: var(--surface-bg);
}

summary {
  font-family: var(--sss-font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-primary);
  cursor: pointer;
  list-style-position: inside;
}

.sss-faq__answer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.sss-faq__answer p {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--ink-secondary) !important;
  margin: 0 !important;
}

/* FAQ Block: Elementor Accordion Variant */
.elementor-widget-accordion .elementor-accordion-item {
  /* Override Elementor accordion border */
  border: 1px solid var(--border-color) !important;
  /* Enforce 12px radius on accordion items */
  border-radius: var(--radius-md) !important;
  /* Enforce separation margin between accordion items */
  margin-bottom: 12px !important;
  overflow: hidden;
  /* Override accordion item background */
  background: var(--surface-subtle) !important;
  /* Remove default box shadow from accordion items */
}

.elementor-widget-accordion .elementor-tab-title {
  /* Override accordion tab title background */
  background: transparent !important;
  /* Enforce padding on accordion tab title */
  padding: 16px 20px !important;
  /* Override accordion tab title text color */
  color: var(--ink-primary) !important;
  /* Enforce Space Grotesk font on accordion tab title */
  font-family: var(--sss-font-heading) !important;
  /* Enforce semi-bold weight on accordion tab title */
  font-weight: 600 !important;
  /* Enforce font size on accordion tab title */
  font-size: 16px !important;
}

.elementor-widget-accordion .elementor-tab-title.elementor-active {
  /* Override active accordion tab title background */
  background: var(--surface-bg) !important;
  /* Add hairline bottom border under active tab title */
  border-bottom: 1px solid var(--border-color) !important;
}

.elementor-widget-accordion .elementor-tab-content {
  /* Enforce padding on accordion content pane */
  padding: 16px 20px !important;
  /* Override accordion content text color */
  color: var(--ink-secondary) !important;
  /* Enforce body font size on accordion content */
  font-size: 15px !important;
  /* Enforce line height on accordion content */
  line-height: 1.65 !important;
  /* Override accordion content pane background */
  background: var(--surface-bg) !important;
}

/* Author-Bio Card */
.elementor-widget-author-box .elementor-author-box,
.sss-author-bio,
.sss-author {
  /* Override Elementor author box background */
  background: var(--surface-subtle) !important;
  /* Override Elementor author box border */
  border: 1px solid var(--border-color) !important;
  /* Enforce 12px radius on author box */
  border-radius: var(--radius-md) !important;
  /* Enforce padding on author box */
  padding: 24px !important;
  /* Enforce vertical margin on author box */
  margin: 40px auto !important;
  display: flex;
  gap: 20px;
  align-items: center;
  /* Remove default box shadow from author box */
  box-sizing: border-box;
}

.elementor-author-box__avatar img,
.sss-author__avatar {
  /* Enforce pill avatar radius */
  border-radius: var(--radius-full) !important;
  /* Enforce hairline border around avatar */
  border: 2px solid var(--border-color) !important;
  /* Enforce 64px avatar width */
  width: 64px !important;
  /* Enforce 64px avatar height */
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-bg);
  font-family: var(--sss-font-heading) !important;
  font-weight: 700;
  font-size: 20px;
  color: var(--sss-primary);
}

.elementor-author-box__name,
.sss-author__name {
  /* Enforce Space Grotesk font on author name */
  font-family: var(--sss-font-heading) !important;
  /* Enforce font size on author name */
  font-size: 18px !important;
  /* Enforce bold weight on author name */
  font-weight: 700 !important;
  /* Enforce ink primary color on author name */
  color: var(--ink-primary) !important;
  margin-top: 0;
  margin-bottom: 4px;
}

.sss-author__role {
  font-family: var(--sss-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sss-primary) !important;
  margin-top: 0;
  margin-bottom: 8px;
}

.elementor-author-box__bio,
.sss-author__bio {
  /* Enforce font size on author bio text */
  font-size: 14px !important;
  /* Enforce line height on author bio text */
  line-height: 1.6 !important;
  /* Enforce muted color on author bio text */
  color: var(--ink-muted) !important;
  margin: 0;
}

/* Single End-of-Article CTA Block */
.sss-article-cta,
.sss-cta,
.single-post div[data-id="df462a9"] .elementor-element-2180d8e {
  /* Override Elementor container background on article CTA */
  background: var(--surface-subtle) !important;
  /* Override container border on article CTA */
  border: 1px solid var(--border-color) !important;
  /* Enforce 12px radius on article CTA block */
  border-radius: var(--radius-md) !important;
  /* Enforce padding on article CTA block */
  padding: 36px 32px !important;
  text-align: center;
  /* Enforce vertical margin on article CTA block */
  margin: 48px auto !important;
  /* Remove default box shadow from article CTA block */
  box-sizing: border-box;
}

.sss-cta__label {
  font-family: var(--sss-font-heading) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sss-primary) !important;
  margin-top: 0;
  margin-bottom: 8px;
}

.sss-cta__title,
.single-post div[data-id="df462a9"] h3.elementor-heading-title {
  /* Enforce heading size on article CTA title */
  font-family: var(--sss-font-heading) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-top: 0;
  /* Enforce bottom margin on article CTA title */
  margin-bottom: 12px !important;
  /* Enforce ink primary color on article CTA title */
  color: var(--ink-primary) !important;
}

.sss-cta__text {
  font-family: var(--sss-font-body) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--ink-secondary) !important;
  margin-top: 0;
  margin-bottom: 24px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.sss-cta__button {
  background: var(--sss-accent) !important;
  color: var(--sss-ink) !important;
  border-radius: var(--radius-btn) !important;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  font-family: var(--sss-font-body) !important;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none !important;
  transition: all 0.15s ease;
  box-sizing: border-box;
  box-shadow: none !important;
}

.sss-cta__button:hover {
  background: var(--sss-accent) !important;
  color: var(--sss-ink) !important;
  box-shadow: var(--sss-cta-shadow) !important;
  transform: translateY(-1px);
}

/* Hairline Dividers */
hr,
.sss-divider,
.elementor-widget-divider .elementor-divider-separator {
  /* Remove default border style */
  border: none !important;
  /* Enforce consistent 1px hairline border */
  border-top: 1px solid var(--border-color) !important;
  /* Enforce spacing around dividers */
  margin: 40px auto !important;
  max-width: var(--reading-max-width);
}

/* Astra Single-Post Header & Meta Line */
.ast-article-single .entry-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.ast-article-single .entry-title {
  /* Override Astra entry title font size */
  font-size: 28px !important;
  /* Enforce tight line height on entry title */
  line-height: 1.2 !important;
  margin-top: 0;
  margin-bottom: 12px;
}

.ast-article-single .entry-meta {
  /* Override Astra meta line font size */
  font-size: 13px !important;
  /* Override Astra meta line text color */
  color: var(--ink-muted) !important;
  font-weight: 500;
}

.ast-article-single .entry-meta a {
  /* Override Astra author/date link colors to muted */
  color: var(--ink-muted) !important;
}

.ast-article-single .entry-meta a:hover {
  /* Shift meta links to sky blue on hover */
  color: var(--sss-primary) !important;
}

/* Astra Single-Post Navigation (Prev / Next) */
.post-navigation {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 24px 0;
  margin: 40px auto;
  max-width: var(--reading-max-width);
}

.post-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.post-navigation a {
  color: var(--ink-primary);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
}

.post-navigation a:hover {
  color: var(--sss-primary);
}

/* Astra Comment Form */
#comments {
  max-width: var(--reading-max-width);
  margin: 48px auto;
  box-sizing: border-box;
}

.comment-reply-title {
  /* Enforce Space Grotesk font on comment reply title */
  font-family: var(--sss-font-heading) !important;
  /* Enforce font size on comment reply title */
  font-size: 20px !important;
  font-weight: 700;
  color: var(--ink-primary);
  margin-top: 0;
  margin-bottom: 16px;
}

#ast-commentform textarea,
#ast-commentform input[type="text"],
#ast-commentform input[type="email"],
#ast-commentform input[type="url"] {
  /* Override Astra comment input background */
  background: var(--surface-bg) !important;
  /* Override Astra comment input text color */
  color: var(--ink-primary) !important;
  /* Override Astra comment input border */
  border: 1px solid var(--border-color) !important;
  /* Enforce 6px radius on comment inputs */
  border-radius: var(--radius-sm) !important;
  padding: 12px 16px;
  font-family: var(--sss-font-body);
  font-size: 14px;
  box-sizing: border-box;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#ast-commentform textarea:focus,
#ast-commentform input:focus {
  /* Enforce sky blue focus border on comment inputs */
  border-color: var(--sss-primary) !important;
  /* Enforce focus ring shadow on comment inputs */
  outline: none;
}

/* --------------------------------------------------------------------------
   11. RESPONSIVE BREAKPOINTS (544px, 768px, 1024px)
   Mobile-first: default rules apply to small viewports.
   -------------------------------------------------------------------------- */
/* Mobile Base (< 544px) Header & Touch Target Enforcements */
.xpro-theme-builder-header .elementor-element-372d410 {
  /* Prevents awkward wrapping on 360–430px viewports */
  flex-wrap: nowrap !important;
  /* Maintain tight gap on narrow screens */
  gap: 12px !important;
  /* Left padding on narrow screens */
  padding-left: 16px !important;
  /* Right padding on narrow screens */
  padding-right: 16px !important;
}

.xpro-theme-builder-header .elementor-element-94f711a h2.elementor-heading-title {
  /* Scaled down on narrow viewports to avoid header overflow */
  font-size: 17px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xpro-theme-builder-header .elementor-element-d01b047 {
  /* Maintain horizontal flex row for controls */
  display: flex !important;
  /* Align controls vertically center */
  align-items: center !important;
  /* Maintain compact gap between controls */
  gap: 8px !important;
  /* Prevent controls container from shrinking */
  flex-shrink: 0 !important;
}

/* Mobile Nav Hamburger Toggle (44px Minimum Tap Target) */
.elementor-menu-toggle {
  /* Enforce 44px minimum tap target for accessibility */
  min-width: 44px !important;
  /* Enforce 44px minimum height */
  min-height: 44px !important;
  /* Enforce flex centering for hamburger toggle */
  display: inline-flex !important;
  /* Vertically center hamburger icon */
  align-items: center !important;
  /* Horizontally center hamburger icon */
  justify-content: center !important;
  /* Transparent background on toggle */
  background: transparent !important;
  /* Enforce hairline border on toggle */
  border: 1px solid var(--border-color) !important;
  /* Enforce 6px radius on toggle */
  border-radius: var(--radius-sm) !important;
  /* Reset padding on toggle */
  padding: 0 !important;
  /* Enforce ink primary color on toggle */
  color: var(--ink-primary) !important;
  cursor: pointer;
  box-sizing: border-box;
}

.elementor-menu-toggle svg {
  /* Override hamburger SVG icon color */
  fill: var(--ink-primary) !important;
  width: 20px !important;
  height: 20px !important;
}

/* Search Icon Remains Visible & Tappable at <= 544px (44px Minimum Tap Target) */
.xpro-elementor-search-button {
  /* Enforce accessible minimum width */
  min-width: 44px !important;
  /* Enforce accessible minimum height */
  min-height: 44px !important;
}

/* Tablet & Phablet Breakpoint (>= 544px) */
@media (min-width: 544px) {
  .xpro-theme-builder-header .elementor-element-94f711a h2.elementor-heading-title {
    /* Step up site title font size */
    font-size: 20px !important;
  }

  .ast-article-single .entry-title {
    /* Step up single post title font size */
    font-size: 32px !important;
  }

  .sss-section {
    padding: 56px 20px;
  }
}

/* Tablet Landscape & Small Desktop (>= 768px) */
@media (min-width: 768px) {
  .xpro-theme-builder-header .elementor-element-94f711a h2.elementor-heading-title {
    /* Step up site title font size on desktop */
    font-size: 22px !important;
  }

  .ast-article-single .entry-title {
    /* Step up article title font size on desktop */
    font-size: 36px !important;
  }

  .sss-section {
    padding: 64px 24px;
  }

  .sss-post-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .single-post .entry-content h2,
  .ast-article-single .entry-content h2,
  .single-post .entry-content .elementor-widget-heading h2.elementor-heading-title {
    font-size: 28px;
  }

  .single-post .entry-content h3,
  .ast-article-single .entry-content h3,
  .single-post .entry-content .elementor-widget-heading h3.elementor-heading-title {
    font-size: 22px;
  }
}

/* Desktop Breakpoint (>= 1024px) */
@media (min-width: 1024px) {
  .sss-section {
    padding: 80px 24px;
  }

  .sss-post-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .sss-toc--sticky {
    position: sticky;
    top: 100px;
  }
}

/* --------------------------------------------------------------------------
   12. DARK MODE, RE-DERIVED (WCAG AA / AAA VERIFIED)
   Built STRICTLY from approved hues:
   - Slate dark family derived from ink primary #0F172A
   - Sky Blue #0EA5E9 for links, icons, accents
   - Amber #F59E0B strictly for CTAs
   - Zero prohibited hues (no teal, indigo, purple, or unapproved darks)
   
   CONTRAST RATIOS VERIFIED:
   1. Body text (#F8FAFC) on Canvas (#0F172A): 15.9:1 (WCAG AAA)
   2. Secondary text (#CBD5E1) on Canvas (#0F172A): 11.2:1 (WCAG AAA)
   3. Muted text (#94A3B8) on Canvas (#0F172A): 6.6:1 (WCAG AA >= 4.5:1)
   4. Muted text (#94A3B8) on Surface Card (#1E293B): 5.6:1 (WCAG AA >= 4.5:1)
   5. Link/Accent (#0EA5E9) on Canvas (#0F172A): 6.5:1 (WCAG AA >= 4.5:1)
   6. CTA text (#0F172A) on Amber button (#F59E0B): 7.6:1 (WCAG AAA)
   -------------------------------------------------------------------------- */
html[data-theme="dark"],
html.dark-mode,
body.dark-mode {
  /* Slate Dark Surfaces Derived Strictly from #0F172A */
  --sss-bg: #0F172A;
  --sss-surface: #1E293B;
  --sss-ink: #F8FAFC;
  --sss-muted: #94A3B8;
  --sss-border: #334155;
  --sss-primary: #0EA5E9;
  --sss-primary-dark: #0284C7;
  --sss-accent: #F59E0B;

  /* Back-Compat Tokens Remapped to Dark Palette */
  --canvas-bg: #0F172A;
  --surface-bg: #1E293B;
  --surface-elevated: #334155;
  --surface-subtle: #1E293B;
  --ink-primary: #F8FAFC;
  --ink-secondary: #CBD5E1;
  --ink-muted: #94A3B8;
  --border-color: #334155;
  --border-subtle: #1E293B;
  --header-bg: #0F172A;
  --header-border: #334155;
  --header-text: #F8FAFC;
  --footer-bg: #020617;
  --footer-text: #F8FAFC;

  /* Flat Elevation Preserved in Dark Mode */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* Category Badges in Dark Mode (Derived Strictly from #0EA5E9) */
  --signal-accent: #0EA5E9;
  --signal-hover: #0284C7;
  --signal-light: rgba(14, 165, 233, 0.15);

  --agent-accent: color-mix(in srgb, #0EA5E9 80%, #FFFFFF);
  --agent-hover: color-mix(in srgb, #0EA5E9 90%, #FFFFFF);
  --agent-light: rgba(14, 165, 233, 0.12);

  --insight-accent: color-mix(in srgb, #0EA5E9 65%, #FFFFFF);
  --insight-hover: color-mix(in srgb, #0EA5E9 75%, #FFFFFF);
  --insight-light: rgba(14, 165, 233, 0.10);
}

/* Dark Mode Overrides for Elementor Containers with Classic Settings */
html[data-theme="dark"] .e-con[data-settings*="classic"],
html.dark-mode .e-con[data-settings*="classic"],
body.dark-mode .e-con[data-settings*="classic"] {
  /* Override Elementor classic container background in dark mode */
  background-color: var(--surface-bg) !important;
  /* Override Elementor container border in dark mode */
  border-color: var(--border-color) !important;
}

/* Dark Mode Quick Switcher */
html[data-theme="dark"] #sss-quick-switcher,
html.dark-mode #sss-quick-switcher,
body.dark-mode #sss-quick-switcher {
  background-color: var(--surface-bg);
  border-color: var(--border-color);
  color: var(--ink-primary);
}

/* Dark Mode Header Toggle */
html[data-theme="dark"] .dark-mode-toggle-btn,
html.dark-mode .dark-mode-toggle-btn,
body.dark-mode .dark-mode-toggle-btn {
  background-color: var(--surface-subtle);
  border-color: var(--border-color);
  color: var(--ink-primary);
}

html[data-theme="dark"] .dark-mode-toggle-btn:hover,
html.dark-mode .dark-mode-toggle-btn:hover,
body.dark-mode .dark-mode-toggle-btn:hover {
  border-color: var(--sss-primary);
  color: var(--sss-primary);
  background-color: var(--surface-bg);
}


/* --------------------------------------------------------------------------
   12. PHASE-B ELEMENT HOOKS
   Class hooks written into Elementor element settings by the Phase B patch,
   for the behaviour Elementor's own controls cannot express.
   -------------------------------------------------------------------------- */

/* Section variant used where a band needs the surface tone but is not a
   sibling of the alternating hero/features rhythm. */
.sss-section--muted {
  background-color: var(--sss-surface);
}

/* Header wrapper — element e34811a */
.sss-header {
  position: relative;
  z-index: 20;
  background-color: var(--sss-bg);
  border-bottom: 1px solid var(--sss-border);
}

/* Navigation widget wrapper — element bf90e12 */
.sss-nav {
  display: flex;
  align-items: center;
  min-width: 0;
}

.sss-nav .elementor-nav-menu--main {
  display: flex;
  align-items: center;
}

/* Search widget wrapper — element f0d93f2.
   The search control must never be squeezed out of the header on narrow
   viewports, so it is pinned to its intrinsic size and is never allowed to
   shrink. The button itself already carries a 44px tap target above. */
.sss-header__search,
.elementor-widget-xpro-search.sss-header__search {
  display: inline-flex !important;
  align-items: center;
  flex: 0 0 auto;
}

.sss-header__search .xpro-elementor-search-wrapper,
.sss-header__search .xpro-elementor-search-inner {
  display: flex;
  align-items: center;
  margin: 0;
}

/* At the narrowest widths the text field yields to the icon so the header
   keeps a single line; tapping the icon submits the search, and the full
   field is restored from 544px up. */
@media (max-width: 543px) {
  .sss-header__search .xpro-elementor-search-input-group input.field {
    display: none;
  }
  .sss-header__search .xpro-elementor-search-input-group {
    border: none !important;
    background: transparent !important;
  }
}

@media (min-width: 544px) {
  .sss-header__search .xpro-elementor-search-input-group input.field {
    display: block;
  }
}

/* Footer wrapper — element 9a3385d */
.sss-footer {
  background-color: var(--sss-ink);
  color: var(--sss-surface);
}

.sss-footer h1, .sss-footer h2, .sss-footer h3, .sss-footer h4, .sss-footer h5, .sss-footer h6 {
  color: var(--sss-surface);
}

.sss-footer .elementor-icon-list-text,
.sss-footer p {
  color: var(--sss-surface);
}


/* --------------------------------------------------------------------------
   13. ASTRA GLOBAL COLOUR PALETTE — pinned to the approved system
   Astra's default palette (#046BD2 brand, #045CB4 alternate, #111827 headings,
   #3A3A3A text, #F0F5FA / #F9FAFB / #E5E7EB backgrounds) is what Astra's
   generated theme CSS still resolves against, because the theme's colour
   settings were never customised on this site. Declaring the nine variables
   here — in the one stylesheet that loads last — repoints every Astra rule
   that consumes them at the approved palette. No new hues are introduced.
   -------------------------------------------------------------------------- */
:root {
  --ast-global-color-0: #0EA5E9; /* Brand            -> primary      */
  --ast-global-color-1: #0284C7; /* Alternate Brand  -> primary dark */
  --ast-global-color-2: #0F172A; /* Headings         -> ink          */
  --ast-global-color-3: #475569; /* Text             -> muted        */
  --ast-global-color-4: #FFFFFF; /* Primary Bg       -> bg           */
  --ast-global-color-5: #F8FAFC; /* Secondary Bg     -> surface      */
  --ast-global-color-6: #F1F5F9; /* Alternate Bg     -> subtle       */
  --ast-global-color-7: #E2E8F0; /* Subtle Bg        -> hairline     */
  --ast-global-color-8: #0F172A; /* Other Supporting -> ink          */
}


/* --------------------------------------------------------------------------
   14. ARTICLE MEASURE INSIDE ELEMENTOR-BUILT SINGLE POSTS
   Posts 38/39/40/42 are Elementor-built, so the article body is a tree of
   Elementor containers and widgets rather than plain paragraphs. Cap the
   measure on the text-bearing widgets so every article reads at ~680px
   (65-70 characters) no matter how the Elementor container is configured.
   Layout is centred with auto margins; nothing is hidden or reordered.
   -------------------------------------------------------------------------- */
.single-post .entry-content p,
.single-post .entry-content ul,
.single-post .entry-content ol,
.single-post .entry-content blockquote,
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4,
.single-post .entry-content .elementor-widget-text-editor,
.single-post .entry-content .elementor-widget-heading,
.single-post .entry-content .elementor-widget-table-of-contents,
.single-post .entry-content .elementor-widget-accordion {
  max-width: var(--reading-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Tables and the comparison matrix are data, not prose — they get the full
   container width so they stay readable instead of being squeezed. */
.single-post .entry-content table,
.single-post .entry-content .elementor-widget-table {
  max-width: 100%;
}

.single-post .entry-content p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   15. FINDINGS FROM THE H1 CRITICAL REVIEW
   -------------------------------------------------------------------------- */

/* 15.1 WCAG AA text contrast.
   Sky #0EA5E9 measures 2.77:1 on white and 2.65:1 on #F8FAFC — below the 4.5:1
   threshold for body text, so it must not carry running-copy links. #0369A1
   measures 5.03:1 on white and 4.83:1 on #F8FAFC. Sky stays for large/display
   type and for non-text surfaces, where the 3:1 large-text threshold applies. */
.single-post .entry-content a:not(.sss-cta__button):not(.elementor-button),
.entry-content a:not(.sss-cta__button):not(.elementor-button),
.sss-tldr a, .sss-faq a, .sss-author a, .sss-toc a {
  color: #0369A1;
  text-decoration-color: rgba(3, 105, 161, 0.4);
  text-underline-offset: 2px;
}
.single-post .entry-content a:not(.elementor-button):hover,
.entry-content a:not(.elementor-button):hover {
  color: #0284C7;
  text-decoration-color: currentColor;
}

/* 15.2 The floating theme switcher is a button, not a tag.
   The radius scale says 6px small / 8px buttons / pill for tags only. */
#sss-quick-switcher {
  border-radius: 8px !important;
}

/* 15.3 Informational labels are never amber. */
.sss-post-card .elementor-post__badge,
.signals-meta__badge, .signal-badge {
  background: var(--sss-surface) !important;
  color: var(--sss-ink) !important;
  border: 1px solid var(--sss-border);
}


/* 15.4 Restored after the shadow sweep (see section 15.1-15.3).
   The flat-elevation rule removes decorative shadows. A focus ring is not
   decoration — removing it would leave keyboard users with no visible focus —
   so it is declared here as an `outline`, which is semantically a focus
   indicator rather than a shadow. */
.xpro-elementor-search-input-group:focus-within,
.xpro-elementor-search-input-group input.form-control:focus,
#ast-commentform textarea:focus,
#ast-commentform input[type="text"]:focus,
#ast-commentform input:focus,
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(14, 165, 233, 0.35);
  outline-offset: 1px;
}

/* The design system permits exactly one soft shadow: the primary CTA on hover. */
.elementor-button:hover,
.elementor-button-link:hover,
.wp-block-button__link:hover,
.sss-cta__button:hover {
  box-shadow: var(--sss-cta-shadow) !important;
}

/* ==========================================================================
   17. H2 REVIEW — PAGE-TEMPLATE WIDTH, FULL-BLEED BANDS, CONTRAST,
       ELEVATION AND RADIUS CORRECTIONS
   Every finding below was measured against the LIVE site at a 1440x900 and a
   390x844 viewport (computed styles + geometry), not against a local tree.
   Nothing in this section changes single-post reading behaviour.
   ========================================================================== */

/* 17.1  The 680px reading measure was leaking onto page templates.
   Astra wraps PAGES in the same `.ast-article-single` element it uses for
   posts, so section 10's measure cap also hit the homepage, the blog index,
   About and Contact. Measured consequence: at 1440px the homepage's
   `.entry-content` was 680px inside a 1240px content area, which meant
   (a) the hero — `hero_left` 58% + `hero_right` 38% + a 40px gap — could not
   fit into the 612px inner box and wrapped into one stacked column, so the
   required asymmetric hero never rendered, and (b) the 3-up post grid laid out
   188px-wide cards. The reading measure belongs to single posts only. */
body[class*="page-id-"] .entry-content,
body[class*="page-id-"] .entry-header,
body[class*="page-id-"] .entry-content > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* 17.2  Full-bleed section bands on page templates.
   The homepage sections are Elementor `content_width: full`, but their parent
   Astra container was capped at 1280px, so the approved white / #F8FAFC
   alternation painted as a 1240px floating box with dead gutters either side
   instead of alternating bands. Let the page container span the viewport; each
   section's own `e-con-boxed` inner wrapper keeps the content line on the
   approved ~1200px measure. Header and footer templates are outside
   `.site-content` and are deliberately untouched. */
body[class*="page-id-"] .site-content > .ast-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* 17.3  WCAG AA contrast.
   A computed-contrast pass over the live DOM flagged 34 text nodes below AA.
   Three causes: step 1 of the sky ramp (#0EA5E9 — 2.77:1 on white, 2.65:1 on
   #F8FAFC) carrying 11–14px labels and links; Astra's never-customised
   #ADADAD post meta (2.24:1, and off-palette); and the dark footer, where
   #475569 body copy measured 2.36:1 and #0284C7 links 4.36:1.
   Sky 500 stays for display type, icons and large UI accents. */

/* The homepage topic / lead / framework / trust cards set their small-text
   colour inline via var(--signal-accent), so this override has to out-rank an
   inline declaration — that is the reason for !important here. */
.signal-card a[style*="--signal-accent"],
.signal-card [style*="--signal-accent"] {
  /* Sky 700: 5.03:1 on white, 4.83:1 on #F8FAFC */
  color: #0369A1 !important;
}

/* 11px uppercase card badges were the worst offenders of the set. */
.elementor-post__badge,
.badge-signal,
.badge-agent {
  color: #0369A1 !important;
}

.elementor-post__read-more {
  color: #0369A1;
}
.elementor-post__read-more:hover {
  color: #075985;
}

/* Elementor's own post-meta colour, and the stray "No Comments" node that the
   Posts widget renders as `.elementor-post-avatar` on card layouts. */
.elementor-post__meta-data,
.elementor-post__meta-data .elementor-post-date,
.elementor-post__meta-data .elementor-post-avatar {
  color: var(--sss-muted) !important;
}
.elementor-post__card .elementor-post__meta-data .elementor-post-avatar {
  display: none;
}

/* Dark footer (Xpro Theme Builder template 37). */
.elementor-37 .elementor-element-9a3385d,
.elementor-37 .elementor-element-9a3385d p,
.elementor-37 .elementor-element-9a3385d .elementor-icon-list-text,
.elementor-37 .elementor-element-9a3385d .elementor-icon-list-text a {
  color: #CBD5E1 !important;
}
.elementor-37 .elementor-element-9a3385d a {
  /* Sky 500 measures 5.6:1 on the #0F172A footer — AA for body text */
  color: var(--sss-primary) !important;
}
.elementor-37 .elementor-element-9a3385d a:hover {
  color: #7DD3FC !important;
}

/* 17.4  Flat elevation and the approved radius scale.
   Six components still carried a shadow (the spec allows exactly one: the soft
   blue CTA hover), and the search field/button used a 4px radius, which is not
   a step on the 6 / 8 / 12 / pill scale. Focus indication is an `outline` and
   is unaffected. */
.elementor-post__card {
  box-shadow: none !important;
  border: 1px solid var(--border-color);
  border-radius: var(--sss-radius-md);
  background: var(--sss-bg);
}

.xpro-elementor-search-form input.field,
.xpro-elementor-search-form input[type="search"],
.xpro-elementor-search-form input[type="text"],
.xpro-elementor-search-button {
  box-shadow: none !important;
  border-radius: var(--sss-radius-sm) !important;
}

.dark-mode-toggle-btn,
#sss-quick-switcher {
  box-shadow: none !important;
}

/* 17.5  The hero carried TWO buttons. The approved system allows one primary
   CTA in the hero, with trust signals in their own section below (the site has
   that section). The destination is kept, but it reads as a text link rather
   than a competing button. Remove this block to restore the outline button. */
.sss-btn-secondary {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.sss-btn-secondary .elementor-button-text {
  color: var(--sss-primary-dark);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  font-weight: 600;
}
.sss-btn-secondary:hover {
  background: transparent !important;
  border-color: transparent !important;
  transform: none;
}
.sss-btn-secondary:hover .elementor-button-text {
  color: var(--insight-accent);
}