/* ==========================================
   CBATFOW STYLE
   Override layer for CBATFOW microsite
========================================== */

/* ==========================================
   PAGE VARIABLES + BASE
========================================== */

body.cbatfow-page {
  --cb-bg: #0f0f0f;
  --cb-text: #f3f3f3;
  --cb-text-muted: #999999;
  --cb-accent: #b32025;
  --cb-accent-alt: #ff5e00;

  background: var(--cb-bg) !important;
  color: var(--cb-text) !important;
}

/* Make main wrappers inherit the dark page background */
body.cbatfow-page .site,
body.cbatfow-page .site-main,
body.cbatfow-page .elementor,
body.cbatfow-page .elementor-section,
body.cbatfow-page .elementor-container,
body.cbatfow-page .elementor-widget-wrap {
  background-color: transparent;
}

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

body.cbatfow-page h1,
body.cbatfow-page h2,
body.cbatfow-page h3,
body.cbatfow-page h4,
body.cbatfow-page h5,
body.cbatfow-page h6 {
  color: var(--cb-text);
}

body.cbatfow-page p,
body.cbatfow-page li,
body.cbatfow-page blockquote,
body.cbatfow-page .elementor-widget-text-editor,
body.cbatfow-page .elementor-widget-text-editor p,
body.cbatfow-page .elementor-widget-text-editor li {
  color: var(--cb-text);
}

body.cbatfow-page .text-muted {
  color: var(--cb-text-muted);
}

/* ==========================================
   LINKS IN PAGE CONTENT ONLY
   (Header / menu colors should be set in Elementor)
========================================== */

body.cbatfow-page .elementor-widget-text-editor a,
body.cbatfow-page .elementor-widget-heading a,
body.cbatfow-page .elementor-widget-icon-list a,
body.cbatfow-page .elementor-widget-button a:not(.elementor-button-link) {
  color: var(--cb-accent);
  text-decoration: none;
}

body.cbatfow-page .elementor-widget-text-editor a:hover,
body.cbatfow-page .elementor-widget-heading a:hover,
body.cbatfow-page .elementor-widget-icon-list a:hover,
body.cbatfow-page .elementor-widget-button a:not(.elementor-button-link):hover {
  color: var(--cb-accent-alt);
  text-decoration: underline;
}

/* Neutralise generic global link rules from Outatune
   so Elementor can control the header navigation */
body.cbatfow-page a {
  color: inherit;
}

body.cbatfow-page a:hover {
  color: inherit;
  text-decoration: none;
}

/* Re-apply content link styling after neutralising globals */
body.cbatfow-page .elementor-widget-text-editor a,
body.cbatfow-page .elementor-widget-heading a,
body.cbatfow-page .elementor-widget-icon-list a {
  color: var(--cb-accent);
}

body.cbatfow-page .elementor-widget-text-editor a:hover,
body.cbatfow-page .elementor-widget-heading a:hover,
body.cbatfow-page .elementor-widget-icon-list a:hover {
  color: var(--cb-accent-alt);
  text-decoration: underline;
}

/* ==========================================
   BUTTONS
   Keeps the shared Outatune structure, but gives
   CBATFOW its own accent
========================================== */

body.cbatfow-page .elementor-button {
  border-color: var(--cb-accent-alt) !important;
  color: var(--cb-accent-alt) !important;
}

body.cbatfow-page .elementor-button:hover {
  background-color: var(--cb-accent-alt) !important;
  color: #000000 !important;
  border-color: var(--cb-accent-alt) !important;
}

/* ==========================================
   HERO
   Use class "hero" on the outer hero container
========================================== */

body.cbatfow-page .hero {
  position: relative;
  overflow: hidden;
}

body.cbatfow-page .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(179, 32, 37, 0.20),
    rgba(0, 0, 0, 0.78)
  );
  z-index: 1;
  pointer-events: none;
}

body.cbatfow-page .hero > * {
  position: relative;
  z-index: 2;
}

/* ==========================================
   OPTIONAL SMALL HELPERS
========================================== */

body.cbatfow-page .cbatfow-intro {
  max-width: 760px;
}

body.cbatfow-page .cbatfow-accent {
  color: var(--cb-accent);
}

body.cbatfow-page .cbatfow-accent-alt {
  color: var(--cb-accent-alt);
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {
  body.cbatfow-page {
    font-size: 16px;
  }
}