/* ==========================================================================
   Shared Design System
   Opt-in via body class `cb-ds`, applied through a body_class filter in
   functions.php (homepage, ROI calculator page, and the /rework draft).
   Page-specific styling lives in the matching page partial (_homepage.css,
   _roi.css) and consumes the tokens and utilities defined here.
   ========================================================================== */

/* --- Design Tokens --- */
body.cb-ds {
  --section-py: 80px;
  --section-py-mobile: 60px;
  --section-px: 20px;
  --section-px-mobile: 16px;
  --section-max-w: 1200px;
  --btn-radius: 9999px;
  --btn-font: 'Barlow Semi Condensed', sans-serif;
  --btn-weight: 700;
  --btn-transform: uppercase;
  --btn-letter-spacing: 1px;
  --heading-font: 'Barlow Semi Condensed', sans-serif;
  --body-font: 'Roboto', sans-serif;
  --counter-size: 52px;
  --counter-size-mobile: 28px;
}

/* --- Reusable Components --- */

/* Pill button — shared across hero CTA, social proof CTA, ROI CTAs, future sections */
body.cb-ds .pill-btn,
body.cb-ds .pill-btn .uagb-buttons-repeater {
  font-family: var(--btn-font);
  font-weight: var(--btn-weight);
  text-transform: var(--btn-transform);
  letter-spacing: var(--btn-letter-spacing);
  padding: 14px 40px;
  border-radius: var(--btn-radius);
  background: var(--ast-global-color-0);
  color: #ffffff;
  border: 2px solid var(--ast-global-color-0);
  transition: all 0.3s ease;
  text-decoration: none;
}

body.cb-ds .pill-btn:hover,
body.cb-ds .pill-btn .uagb-buttons-repeater:hover {
  background: #ffffff;
  color: var(--ast-global-color-0);
}

/* Section wrapper — consistent vertical padding and horizontal centering */
body.cb-ds .section-wrap {
  padding: var(--section-py) var(--section-px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

body.cb-ds .section-wrap .uagb-container-inner-blocks-wrap {
  max-width: var(--section-max-w);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 768px) {
  body.cb-ds .section-wrap {
    padding: var(--section-py-mobile) var(--section-px-mobile) !important;
  }
}

/* --- Header (look + transparent → glass behavior) ---
   Shared header styling for opted-in pages (homepage, ROI calculator, …).
   The header is transparent by default and transitions to glass-morphism
   when Astra adds .ast-sticky-active on scroll. The homepage additionally
   pulls #content up under the header (margin-top: 0) because its hero is
   tall enough to host the transparent zone; other pages keep the site-wide
   139px clearance from _header.css. */

body.cb-ds .site-header {
  position: fixed !important;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

body.cb-ds .ast-primary-header-bar {
  position: relative !important;
}

/* Prevent sticky header jump on scroll — above-header bar is hidden on cb-ds
   pages, so the 52px offset is wrong. */
body.cb-ds #ast-desktop-header .ast-primary-header-bar.ast-sticky-active {
  top: 0 !important;
}

body.cb-ds .ast-primary-header-bar.ast-sticky-active {
  top: 0 !important;
}

/* Glass-morphism once scrolled */
body.cb-ds .site-header:has(.ast-sticky-active) {
  background-color: color-mix(in srgb, var(--ast-global-color-7) 75%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.cb-ds .ast-primary-header-bar,
body.cb-ds .main-header-bar {
  border-bottom: none;
  background-color: transparent !important;
}

/* Full-bleed container so .section-wrap can truly span the viewport */
body.cb-ds .ast-container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Logo: bigger + vertically centered with nav on desktop */
body.cb-ds #ast-desktop-header .ast-site-identity {
  padding-left: 24px;
  transform: translateY(23px);
}

body.cb-ds #ast-desktop-header .ast-site-identity img {
  content: url('/wp-content/uploads/2025/08/Logo.png');
  width: 300px !important;
  max-width: 300px !important;
  height: auto !important;
}

/* Nav links: bold red text, spread out */
body.cb-ds #ast-desktop-header .ast-builder-menu-1 .menu-item > a {
  font-size: 24px;
  font-weight: 800;
  color: var(--ast-global-color-0) !important;
  padding: 10px 28px;
  transition: opacity 0.3s ease;
}

body.cb-ds #ast-desktop-header .ast-builder-menu-1 .menu-item > a:hover {
  opacity: 0.7;
}

/* Sub-menu dropdown */
body.cb-ds #ast-desktop-header .ast-builder-menu-1 .sub-menu {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
}

body.cb-ds #ast-desktop-header .ast-builder-menu-1 .sub-menu .menu-item > a {
  font-size: 16px;
  font-weight: 600;
  color: var(--ast-global-color-2) !important;
  padding: 10px 24px;
}

body.cb-ds #ast-desktop-header .ast-builder-menu-1 .sub-menu .menu-item > a:hover {
  color: var(--ast-global-color-0) !important;
  background: #f9f9f9;
  opacity: 1;
}

@media (max-width: 921px) {
  body.cb-ds .ast-header-html-3 {
    display: none !important;
  }

  body.cb-ds .ast-site-identity img {
    max-width: 165px !important;
    width: 165px !important;
  }
}

/* --- Above-header bar opt-out ---
   Pages with `cb-no-above-header` body class hide Astra's above-header bar.
   Add the body class via the body_class filter in functions.php. Used today
   by the ROI calculator page; the homepage hides it via Astra Pro's per-page
   setting (no CSS needed there). */
body.cb-no-above-header .ast-above-header-bar {
  display: none !important;
}

/* --- Book Estimate button: hidden at top, centered in header after .past-hero ---
   The .past-hero body class is toggled by JS:
     - Homepage: js/homepage.js (tracks hero CTA position)
     - Other cb-ds pages: js/cb-ds-header.js (tracks first .section-wrap bottom) */

body.cb-ds #ast-desktop-header .ast-header-html-2 {
  display: none !important;
}

body.cb-ds .site-primary-header-wrap {
  position: relative;
}

body.cb-ds.past-hero .site-header-primary-section-right {
  position: static !important;
}

body.cb-ds.past-hero #ast-desktop-header .ast-header-html-2 {
  display: block !important;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}