/*
Theme Name: BFB Bros BeyondFit Child
Theme URI: https://bfbfitness.com
Description: BFB Bros BeyondFit Child Theme for Elementor. Built on Hello Elementor.
Author: BFB Fitness
Author URI: https://bfbfitness.com
Template: hello-elementor
Version: 1.0.0
Text Domain: bfb-child
*/

/* ═══════════════════════════════════════════════════
   BFB BROS BEYONDFIT — ELEMENTOR CHILD THEME
   Parent: Hello Elementor (required)
   
   SETUP INSTRUCTIONS:
   1. Install Hello Elementor theme (free, official Elementor theme)
   2. Upload this child theme folder via Appearance > Themes > Add New > Upload
   3. Activate the child theme
   4. Go to Elementor > Settings > Style tab and set fonts + colors
   5. Paste Global CSS into Elementor > Custom CSS (Site Settings)
═══════════════════════════════════════════════════ */

/* ── BRAND CSS VARIABLES ── */
:root {
  --bfb-black:       #000000;
  --bfb-dark:        #090909;
  --bfb-dark2:       #111111;
  --bfb-dark3:       #161616;
  --bfb-blue:        #1BAEE1;
  --bfb-blue-light:  #3DC8FF;
  --bfb-blue-dim:    rgba(27, 174, 225, 0.12);
  --bfb-white:       #ffffff;
  --bfb-grey:        #777777;
  --bfb-grey-light:  #aaaaaa;
  --bfb-border:      rgba(27, 174, 225, 0.2);
  --bfb-border-w:    rgba(255, 255, 255, 0.07);
}

/* ── GLOBAL RESET / BASE ── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bfb-dark) !important;
  color: var(--bfb-white) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Force dark background on Elementor sections */
.elementor-section,
.e-con,
.e-con-inner {
  background-color: transparent;
}

/* ── TYPOGRAPHY ── */
/* Bebas Neue = Display/Headings */
h1, h2, h3,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 2px;
  line-height: 1 !important;
}

/* Barlow Condensed = Subheadings, nav, labels */
h4, h5, h6,
.elementor-widget-text-editor,
nav,
.bfb-label,
.bfb-tag {
  font-family: 'Barlow Condensed', sans-serif;
}

/* Barlow = Body text */
body,
p,
.elementor-widget-text-editor p,
input, textarea, select {
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.6);
}

/* ── ELEMENTOR GLOBAL COLORS OVERRIDE ── */
/* These are the Elementor system colors you should set in:
   Elementor > Site Settings > Global Colors */

/* Primary   → #1BAEE1  (BFB Blue) */
/* Secondary → #000000  (Black) */
/* Text      → #ffffff  (White) */
/* Accent    → #3DC8FF  (Blue Light) */

/* ── BUTTONS ── */
/* Primary Button */
.elementor-button,
.elementor-button.elementor-button-link,
a.elementor-button {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}

.elementor-button-primary,
.elementor-button.elementor-button-primary {
  background-color: var(--bfb-blue) !important;
  color: var(--bfb-black) !important;
  border: none !important;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
.elementor-button-primary:hover {
  background-color: var(--bfb-blue-light) !important;
  transform: translateY(-2px);
}

.elementor-button-secondary {
  background-color: transparent !important;
  color: var(--bfb-white) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
.elementor-button-secondary:hover {
  border-color: var(--bfb-blue) !important;
  color: var(--bfb-blue) !important;
}

/* ── SECTIONS ── */
.elementor-section .elementor-container,
.e-con-inner {
  max-width: 1200px;
}

/* Dark section backgrounds */
.bfb-section-dark   { background-color: var(--bfb-dark) !important; }
.bfb-section-darker { background-color: var(--bfb-dark2) !important; }
.bfb-section-black  { background-color: var(--bfb-black) !important; }

/* Blue glow background */
.bfb-section-hero {
  background:
    radial-gradient(ellipse 60% 80% at 30% 50%, rgba(27,174,225,0.1) 0%, transparent 70%),
    linear-gradient(160deg, #000000 0%, #0d0d0d 100%) !important;
}

/* Grid texture overlay (apply as ::before via custom CSS) */
.bfb-grid-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(255,255,255,0.015) 80px, rgba(255,255,255,0.015) 81px),
    repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(255,255,255,0.015) 80px, rgba(255,255,255,0.015) 81px);
}

/* ── DIVIDERS ── */
.bfb-divider-blue {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(27,174,225,0.4), transparent);
}

/* ── CARDS ── */
/* General BFB card style - apply CSS class "bfb-card" in Elementor Advanced > CSS Classes */
.bfb-card {
  background: var(--bfb-dark2) !important;
  border: 1px solid var(--bfb-border-w) !important;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  transition: border-color 0.3s ease, transform 0.3s ease !important;
  position: relative;
}
.bfb-card:hover {
  border-color: var(--bfb-border) !important;
  transform: translateY(-4px) !important;
}
.bfb-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 0;
  background: var(--bfb-blue);
  transition: height 0.4s ease;
}
.bfb-card:hover::before {
  height: 100%;
}

/* Featured card (pricing highlighted) */
.bfb-card-featured {
  background: linear-gradient(145deg, rgba(27,174,225,0.12), rgba(27,174,225,0.03)) !important;
  border-color: var(--bfb-blue) !important;
}

/* ── PRICE DISPLAY ── */
.bfb-price-amount {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 72px !important;
  color: var(--bfb-white) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.bfb-price-period {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--bfb-grey);
  text-transform: uppercase;
}

/* ── SECTION LABELS / TAGS ── */
.bfb-section-tag {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--bfb-blue) !important;
  display: block;
}

/* ── TICKER BAR ── */
.bfb-ticker-wrap {
  background: var(--bfb-blue);
  overflow: hidden;
  padding: 13px 0;
  white-space: nowrap;
}
.bfb-ticker-inner {
  display: inline-flex;
  gap: 48px;
  animation: bfbTicker 24s linear infinite;
}
.bfb-ticker-item {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 4px;
  color: rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
.bfb-ticker-sep {
  color: rgba(0, 0, 0, 0.25);
}
@keyframes bfbTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── NAV OVERRIDE (Hello Elementor Header) ── */
.site-header,
header.site-header {
  background: rgba(0, 0, 0, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.elementor-nav-menu a,
.main-nav a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.65) !important;
  transition: color 0.2s ease !important;
}

.elementor-nav-menu a:hover,
.main-nav a:hover {
  color: var(--bfb-white) !important;
}

.elementor-nav-menu--main .elementor-item-active,
.elementor-nav-menu--main .current-menu-item > a {
  color: var(--bfb-white) !important;
  border-bottom: 2px solid var(--bfb-blue) !important;
}

/* Nav CTA button */
.menu-item-cta a,
.nav-cta a {
  background: var(--bfb-blue) !important;
  color: var(--bfb-black) !important;
  padding: 10px 24px !important;
  font-weight: 900 !important;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%) !important;
}
.menu-item-cta a:hover,
.nav-cta a:hover {
  background: var(--bfb-blue-light) !important;
}

/* ── CTA STRIP ── */
.bfb-cta-strip {
  background: var(--bfb-blue) !important;
  position: relative;
  overflow: hidden;
}
.bfb-cta-strip::after {
  content: 'BFB';
  position: absolute;
  right: -10px; top: 50%;
  transform: translateY(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 240px;
  color: rgba(0,0,0,0.06);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}
.bfb-cta-strip * { position: relative; z-index: 1; }
.bfb-cta-strip h2,
.bfb-cta-strip .elementor-heading-title {
  color: var(--bfb-black) !important;
}

/* ── HERO LOGO GLOW ── */
.bfb-logo-glow {
  color: var(--bfb-blue) !important;
  text-shadow: 0 0 80px rgba(27,174,225,0.4), 0 0 160px rgba(27,174,225,0.2);
  animation: bfbGlow 4s ease infinite alternate;
}
@keyframes bfbGlow {
  from { text-shadow: 0 0 60px rgba(27,174,225,0.3), 0 0 120px rgba(27,174,225,0.1); }
  to   { text-shadow: 0 0 100px rgba(27,174,225,0.5), 0 0 200px rgba(27,174,225,0.25); }
}

/* ── PAGE HERO (Interior pages) ── */
.bfb-page-hero {
  background:
    radial-gradient(ellipse 60% 80% at 30% 60%, rgba(27,174,225,0.1) 0%, transparent 70%),
    linear-gradient(160deg, #000000 0%, #0d0d0d 100%) !important;
  min-height: 420px;
}

/* Page breadcrumb */
.bfb-breadcrumb {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--bfb-blue);
}

/* ── ICON BOXES ── */
.elementor-icon-box-wrapper .elementor-icon-box-icon {
  background: var(--bfb-blue-dim) !important;
  border: 1px solid var(--bfb-border) !important;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%) !important;
  padding: 12px !important;
  margin-bottom: 16px !important;
}
.elementor-icon-box-title {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 1.5px !important;
  color: var(--bfb-white) !important;
  font-size: 20px !important;
}
.elementor-icon-box-description {
  color: var(--bfb-grey) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

/* ── TESTIMONIALS / REVIEW CARDS ── */
.elementor-testimonial__content {
  background: var(--bfb-dark2) !important;
  border: 1px solid var(--bfb-border-w) !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
}
.elementor-testimonial__text {
  font-style: italic !important;
  color: rgba(255,255,255,0.65) !important;
}
.elementor-testimonial__name {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--bfb-blue) !important;
}

/* ── ACCORDION / FAQ ── */
.elementor-accordion .elementor-tab-title {
  background: var(--bfb-dark2) !important;
  border: 1px solid var(--bfb-border-w) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: var(--bfb-white) !important;
  padding: 20px 28px !important;
  transition: border-color 0.3s ease !important;
}
.elementor-accordion .elementor-tab-title:hover,
.elementor-accordion .elementor-tab-title.elementor-active {
  border-color: var(--bfb-border) !important;
  color: var(--bfb-blue) !important;
}
.elementor-accordion .elementor-tab-content {
  background: var(--bfb-dark2) !important;
  border: 1px solid var(--bfb-border-w) !important;
  border-top: none !important;
  color: rgba(255,255,255,0.55) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}
.elementor-accordion-icon { color: var(--bfb-blue) !important; }

/* ── FORMS ── */
.elementor-form-fields-wrapper input,
.elementor-form-fields-wrapper textarea,
.elementor-form-fields-wrapper select,
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--bfb-white) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 15px !important;
  padding: 14px 18px !important;
  outline: none !important;
  border-radius: 0 !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
.elementor-form-fields-wrapper input:focus,
.elementor-form-fields-wrapper textarea:focus {
  border-color: var(--bfb-blue) !important;
  background: rgba(27,174,225,0.05) !important;
}
.elementor-form-fields-wrapper label,
.wpcf7 label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--bfb-blue) !important;
}
.elementor-field-type-submit .elementor-button {
  background: var(--bfb-blue) !important;
  color: var(--bfb-black) !important;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%) !important;
}

/* ── FOOTER ── */
.site-footer,
footer.site-footer {
  background: var(--bfb-black) !important;
  border-top: 1px solid var(--bfb-border-w) !important;
}
.site-footer a,
.elementor-widget-nav-menu.footer-menu a {
  color: var(--bfb-grey) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  transition: color 0.2s ease !important;
}
.site-footer a:hover {
  color: var(--bfb-white) !important;
}

/* ── UTILITY CLASSES ── */
/* Apply these in Elementor > Advanced > CSS Classes */

.bfb-text-blue   { color: var(--bfb-blue) !important; }
.bfb-text-grey   { color: var(--bfb-grey) !important; }
.bfb-text-white  { color: var(--bfb-white) !important; }

.bfb-font-display {
  font-family: 'Bebas Neue', sans-serif !important;
  line-height: 1 !important;
  letter-spacing: 2px !important;
}
.bfb-font-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
}

.bfb-border-bottom { border-bottom: 1px solid var(--bfb-border-w) !important; }
.bfb-border-top    { border-top: 1px solid var(--bfb-border-w) !important; }
.bfb-blue-line {
  width: 32px; height: 2px;
  background: var(--bfb-blue);
  display: block;
}

/* Clip-path angled cut on any element */
.bfb-cut-corners {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)) !important;
}
.bfb-cut-corners-sm {
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
}

/* Badge / pill label */
.bfb-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--bfb-blue-dim) !important;
  border: 1px solid var(--bfb-border) !important;
  padding: 6px 16px !important;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--bfb-blue) !important;
}

/* Stats display */
.bfb-stat-num {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 52px !important;
  color: var(--bfb-blue) !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
}
.bfb-stat-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--bfb-grey) !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .elementor-section .elementor-container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 767px) {
  .bfb-price-amount {
    font-size: 56px !important;
  }
  .bfb-logo-glow {
    font-size: 80px !important;
  }
  .bfb-cta-strip::after {
    font-size: 120px;
  }
}