/*
 * BBWAB Site Stylesheet
 * Layers: tokens → reset → base → utilities → components → header/footer stubs
 *
 * Phase 3 will move the real header/footer styles into their own file once
 * Elementor Pro Theme Builder templates are in place.
 *
 * tokens.css is loaded via its own wp_enqueue_style() call and declared as
 * this stylesheet's dependency in inc/assets.php, so it's already guaranteed
 * to load first — an @import here would just double-download it (confirmed
 * via Resource Timing: a second, unversioned request with initiatorType
 * "css" alongside the normal versioned "link" request).
 */

/* ================================================================
   0. Global reset additions
   ================================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}

body {
  background:              var(--bbwab-color-background);
  color:                   var(--bbwab-color-text);
  font-family:             var(--bbwab-font-body);
  font-size:               var(--bbwab-font-size-body);
  line-height:             1.65;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove Hello Elementor default heading margins that conflict */
.elementor-widget-container h1,
.elementor-widget-container h2,
.elementor-widget-container h3,
.elementor-widget-container h4,
.elementor-widget-container h5,
.elementor-widget-container h6 {
  margin-top: 0;
}

::selection {
  background: var(--bbwab-color-primary);
  color:      var(--bbwab-color-white);
}

a { color: inherit; }

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

/* ================================================================
   1. Typography base
   ================================================================ */
h1, .h1 {
  font-family:    var(--bbwab-font-display);
  font-size:      clamp(2.75rem, 5.5vw, 5.50rem);
  font-weight:    400;
  line-height:    0.98;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

h2, .h2 {
  font-family:    var(--bbwab-font-display);
  font-size:      var(--bbwab-font-size-h2);
  font-weight:    400;
  line-height:    1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

h3, .h3 {
  font-family:    var(--bbwab-font-display);
  font-weight:    400;
  line-height:    1.1;
  letter-spacing: 0.02em;
}

h4, h5, h6 {
  font-family:    var(--bbwab-font-body);
  font-weight:    700;
  line-height:    1.3;
}

p { margin-block-end: 1em; }
p:last-child { margin-block-end: 0; }

/* ================================================================
   2. Accessibility
   ================================================================ */
:focus-visible {
  outline:        3px solid var(--bbwab-color-accent);
  outline-offset: 3px;
  border-radius:  2px;
}

/* Remove :focus for mouse users when :focus-visible is supported */
:focus:not(:focus-visible) { outline: none; }

/* Screen-reader utility */
.sr-only {
  position: absolute;
  width:     1px;
  height:    1px;
  padding:   0;
  margin:    -1px;
  overflow:  hidden;
  clip:      rect(0, 0, 0, 0);
  white-space: nowrap;
  border:    0;
}

/* ================================================================
   3. Layout utilities
   ================================================================ */
.bbwab-wrap,
.bbwab-container {
  max-width:    var(--bbwab-max);
  margin-inline: auto;
  padding-inline: var(--bbwab-section-px);
}

.bbwab-container--narrow {
  max-width:    var(--bbwab-narrow);
  margin-inline: auto;
  padding-inline: var(--bbwab-section-px);
}

.bbwab-container--wide {
  max-width:    var(--bbwab-wide);
  margin-inline: auto;
  padding-inline: var(--bbwab-section-px);
}

/* ================================================================
   4. Section utilities
   ================================================================ */
.bbwab-section {
  padding-block:  var(--bbwab-section-py);
}

.bbwab-section--navy        { background: var(--bbwab-color-background); }
.bbwab-section--secondary   { background: var(--bbwab-color-background-alt); }
.bbwab-section--panel       { background: var(--bbwab-color-panel); }
.bbwab-section--orange {
  background: linear-gradient(120deg, var(--bbwab-orange) 0%, var(--bbwab-orange-deep) 100%);
}
.bbwab-section--white { background: var(--bbwab-color-white); color: var(--bbwab-navy); }

/* ================================================================
   5. Grid & stack utilities
   ================================================================ */
.bbwab-grid {
  display:               grid;
  gap:                   var(--bbwab-space-xl);
}

.bbwab-grid--2 { grid-template-columns: repeat(2, 1fr); }
.bbwab-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bbwab-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .bbwab-grid--2,
  .bbwab-grid--3,
  .bbwab-grid--4 { grid-template-columns: 1fr; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .bbwab-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .bbwab-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
	.bbwab-home .elementor-widget-button {
		display: none !important;
	}
}

.bbwab-stack { display: flex; flex-direction: column; }
.bbwab-stack--xs  { gap: var(--bbwab-space-xs); }
.bbwab-stack--sm  { gap: var(--bbwab-space-sm); }
.bbwab-stack--md  { gap: var(--bbwab-space-md); }
.bbwab-stack--lg  { gap: var(--bbwab-space-lg); }
.bbwab-stack--xl  { gap: var(--bbwab-space-xl); }
.bbwab-stack--2xl { gap: var(--bbwab-space-2xl); }

/* ================================================================
   6. Typography helpers
   ================================================================ */
.bbwab-display {
  font-family:    var(--bbwab-font-display);
  font-size:      var(--bbwab-font-size-display);
  font-weight:    400;
  line-height:    0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.bbwab-eyebrow {
  display:        flex;
  align-items:    center;
  gap:            var(--bbwab-space-sm);
  font-size:      var(--bbwab-font-size-eyebrow);
  font-weight:    700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--bbwab-color-primary);
}

.bbwab-eyebrow::before {
  content:    '';
  flex:       none;
  width:      26px;
  height:     2px;
  background: var(--bbwab-color-primary);
}

.bbwab-eyebrow--teal { color: var(--bbwab-color-accent); }
.bbwab-eyebrow--teal::before { background: var(--bbwab-color-accent); }

.bbwab-muted { color: var(--bbwab-color-text-muted); }

.bbwab-hl-orange { color: var(--bbwab-color-primary); }
.bbwab-hl-teal   { color: var(--bbwab-color-accent); }

/* ================================================================
   7. Buttons
   ================================================================ */
.bbwab-btn,
.bbwab-button,
.bbwab-button--primary {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--bbwab-space-sm);
  background:      var(--bbwab-color-primary);
  color:           var(--bbwab-color-white) !important;
  text-decoration: none;
  font-family:     var(--bbwab-font-body);
  font-weight:     700;
  font-size:       var(--bbwab-font-size-sm);
  letter-spacing:  0.02em;
  text-transform:  uppercase;
  padding:         17px 32px;
  border-radius:   999px;
  border:          0;
  cursor:          pointer;
  line-height:     1;
  box-shadow:      0 8px 28px rgba(233, 79, 55, 0.28);
  transition:
    transform    var(--bbwab-transition-fast),
    background   var(--bbwab-transition-fast),
    box-shadow   var(--bbwab-transition-fast);
  min-height:      44px; /* accessible touch target */
}

.bbwab-btn:hover a,
.bbwab-button:hover a,
.bbwab-button--primary:hover {
  background:  var(--bbwab-color-primary-hover);
  transform:   translateY(-1px);
  box-shadow:  0 12px 36px rgba(233, 79, 55, 0.36);
  color:       var(--bbwab-color-white) !important;
}

.bbwab-btn:focus-visible,
.bbwab-button:focus-visible,
.bbwab-button--primary:focus-visible {
  outline:        3px solid var(--bbwab-color-accent);
  outline-offset: 3px;
}

/* Secondary — transparent with border */
.bbwab-button--secondary {
  background:   transparent;
  color:        var(--bbwab-color-white) !important;
  border:       1px solid var(--bbwab-color-border);
  box-shadow:   none;
}
.bbwab-button--secondary a:hover {
  background:  var(--bbwab-color-panel);
  border-color: var(--bbwab-color-text-muted);
  transform:   translateY(-1px);
}

/* Outline variant (alias for secondary) */
.bbwab-button--outline { @extend .bbwab-button--secondary; }

/* Light — white background, navy text */
.bbwab-button--light {
  background:  var(--bbwab-color-white);
  color:       var(--bbwab-navy) !important;
  box-shadow:  0 10px 30px rgba(0, 0, 0, 0.25);
}
.bbwab-button--light:hover {
  background: #f0f0f0;
  transform:  translateY(-1px);
}

/* Text-link variant */
.bbwab-button--text {
  background:   transparent;
  color:        var(--bbwab-color-primary) !important;
  box-shadow:   none;
  padding-inline: 0;
  border-radius: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bbwab-button--text:hover { color: var(--bbwab-color-primary-hover) !important; }

/* Size modifiers */
.bbwab-button--large { padding: 20px 44px; font-size: var(--bbwab-font-size-body); }

/* Full-width on mobile */
@media (max-width: 768px) {
  .bbwab-button--full-mobile { width: 100%; }
}

/* Arrow icon inside button */
.bbwab-btn-arrow,
.bbwab-arr { transition: transform var(--bbwab-transition-fast); }
.bbwab-btn:hover .bbwab-btn-arrow,
.bbwab-btn:hover .bbwab-arr { transform: translateX(3px); }

/* Elementor button widget override — allow our classes to apply */
.elementor-button.bbwab-btn,
.elementor-button.bbwab-button,
.elementor-button.bbwab-button--primary { all: unset; }
.elementor-button.bbwab-btn { @extend .bbwab-btn; }

.bbwab-microtrust {
  font-size: var(--bbwab-font-size-xs);
  color:     var(--bbwab-color-text-muted);
  margin-top: var(--bbwab-space-md);
}

/* ================================================================
   8. Cards & panels
   ================================================================ */
.bbwab-card {
  background:    var(--bbwab-color-background-alt);
  border:        1px solid var(--bbwab-color-border);
  border-radius: var(--bbwab-radius);
  padding:       var(--bbwab-space-2xl) var(--bbwab-space-xl);
  display:       flex;
  flex-direction: column;
}

/* Equal height in grid context */
.bbwab-grid > .bbwab-card { height: 100%; }

.bbwab-card--dark   { background: var(--bbwab-color-panel); }
.bbwab-card--light  { background: var(--bbwab-color-white); color: var(--bbwab-navy); }
.bbwab-card--bordered { border: 1px solid var(--bbwab-color-border); }

.bbwab-card--accent {
  border-color: rgba(233, 79, 55, 0.55);
  box-shadow:   0 0 0 1px rgba(233, 79, 55, 0.35),
                0 24px 60px rgba(0, 0, 0, 0.35);
}

.bbwab-panel {
  background:    var(--bbwab-color-background-alt);
  border:        1px solid var(--bbwab-color-border);
  border-radius: var(--bbwab-radius);
  padding:       var(--bbwab-space-xl) var(--bbwab-space-lg);
}

/* ================================================================
   9. Badges & eyebrow decorators
   ================================================================ */
.bbwab-badge {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--bbwab-space-xs);
  font-size:       10.5px;
  font-weight:     800;
  letter-spacing:  0.16em;
  text-transform:  uppercase;
  padding:         5px 14px;
  border-radius:   999px;
}

.bbwab-badge--orange { background: var(--bbwab-color-primary);  color: var(--bbwab-color-white); }
.bbwab-badge--teal   { background: var(--bbwab-color-accent);   color: var(--bbwab-navy); }
.bbwab-badge--steel  { background: var(--bbwab-color-panel);    color: var(--bbwab-color-text); border: 1px solid var(--bbwab-color-border); }

.bbwab-divider {
  border: 0;
  border-top: 1px solid var(--bbwab-color-border);
  margin-block: var(--bbwab-space-lg);
}

/* ================================================================
   10. Form field baseline
   ================================================================ */
.bbwab-field-label {
  display:        block;
  font-size:      var(--bbwab-font-size-sm);
  font-weight:    600;
  color:          var(--bbwab-color-text);
  margin-bottom:  var(--bbwab-space-xs);
  letter-spacing: 0.04em;
}

.bbwab-field-required::after {
  content: ' *';
  color:   var(--bbwab-color-primary);
}

.bbwab-field,
.bbwab-input,
.bbwab-textarea,
.bbwab-select {
  display:          block;
  width:            100%;
  min-height:       48px;
  padding:          12px 16px;
  background:       var(--bbwab-color-panel);
  color:            var(--bbwab-color-text);
  border:           1px solid var(--bbwab-color-border);
  border-radius:    var(--bbwab-radius);
  font-family:      var(--bbwab-font-body);
  font-size:        var(--bbwab-font-size-body);
  line-height:      1.5;
  transition:       border-color var(--bbwab-transition-fast),
                    box-shadow   var(--bbwab-transition-fast);
  appearance:       none;
}

.bbwab-field::placeholder,
.bbwab-input::placeholder,
.bbwab-textarea::placeholder {
  color:   var(--bbwab-color-text-muted);
  opacity: 1;
}

.bbwab-field:focus,
.bbwab-input:focus,
.bbwab-textarea:focus,
.bbwab-select:focus {
  outline:      none;
  border-color: var(--bbwab-color-accent);
  box-shadow:   0 0 0 3px rgba(0, 199, 183, 0.2);
}

.bbwab-textarea { min-height: 120px; resize: vertical; }

/* Elementor Pro Form field overrides */
.elementor-field-type-text .elementor-field,
.elementor-field-type-email .elementor-field,
.elementor-field-type-textarea .elementor-field,
.elementor-field-type-select .elementor-field {
  background:    var(--bbwab-color-panel);
  border-color:  var(--bbwab-color-border);
  border-radius: var(--bbwab-radius);
  color:         var(--bbwab-color-text);
  font-family:   var(--bbwab-font-body);
}

.elementor-field-type-text .elementor-field:focus,
.elementor-field-type-email .elementor-field:focus,
.elementor-field-type-textarea .elementor-field:focus {
  border-color: var(--bbwab-color-accent);
  box-shadow:   0 0 0 3px rgba(0, 199, 183, 0.2);
  outline:      none;
}

/* State modifiers */
.bbwab-field--error,
.bbwab-input--error { border-color: var(--bbwab-color-primary); }

.bbwab-field--success,
.bbwab-input--success { border-color: var(--bbwab-color-accent); }

.bbwab-field-hint { font-size: var(--bbwab-font-size-xs); color: var(--bbwab-color-text-muted); margin-top: var(--bbwab-space-xs); }
.bbwab-field-error-msg { font-size: var(--bbwab-font-size-xs); color: var(--bbwab-color-primary); margin-top: var(--bbwab-space-xs); }

/* Checkbox & radio focus */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline:        3px solid var(--bbwab-color-accent);
  outline-offset: 2px;
}

/* ================================================================
   11. Global links
   ================================================================ */
a:not([class]) {
  color: var(--bbwab-color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:not([class]):hover { color: var(--bbwab-color-text); }

/* ================================================================
   12. FAQ accordion  (native <details>)
   ================================================================ */
.bbwab-faq { max-width: 780px; margin-inline: auto; margin-top: var(--bbwab-space-3xl); }

.bbwab-faq details {
  border-bottom: 1px solid var(--bbwab-color-border);
}

.bbwab-faq summary {
  cursor:          pointer;
  list-style:      none;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--bbwab-space-xl);
  padding-block:   var(--bbwab-space-xl);
  padding-inline:  var(--bbwab-space-xs);
  font-size:       var(--bbwab-font-size-body);
  font-weight:     600;
}

.bbwab-faq summary::-webkit-details-marker { display: none; }
.bbwab-faq summary::marker { display: none; }

.bbwab-faq .bbwab-ic {
  flex:          none;
  width:         26px;
  height:        26px;
  border-radius: 50%;
  border:        1.5px solid var(--bbwab-color-text-muted);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     16px;
  line-height:   1;
  color:         var(--bbwab-color-text-muted);
  transition:    transform var(--bbwab-transition-normal),
                 border-color var(--bbwab-transition-normal),
                 color var(--bbwab-transition-normal);
}

.bbwab-faq details[open] summary .bbwab-ic {
  transform:    rotate(45deg);
  border-color: var(--bbwab-color-primary);
  color:        var(--bbwab-color-primary);
}

.bbwab-faq details .bbwab-answer {
  padding-inline:  var(--bbwab-space-xs);
  padding-bottom:  var(--bbwab-space-xl);
  font-size:       var(--bbwab-font-size-sm);
  color:           var(--bbwab-color-text-muted);
  max-width:       64ch;
}

.bbwab-faq details .bbwab-answer strong {
  color:       var(--bbwab-color-white);
  font-weight: 600;
}

/* ================================================================
   13. Animations
   ================================================================ */
@keyframes bbwab-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

.bbwab-dot {
  display:       inline-block;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--bbwab-color-accent);
  animation:     bbwab-pulse 1.8s infinite;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .bbwab-dot { animation: none; opacity: 1; }
}

/* ================================================================
   14. Header stub — Phase 3 will replace with Theme Builder template
   ================================================================ */
#bbwab-header {
  position:         sticky;
  top:              0;
  z-index:          50;
  background:       rgba(2, 1, 34, 0.86);
  backdrop-filter:  blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:    1px solid var(--bbwab-color-border);
}

.bbwab-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          72px;
}

.bbwab-logo {
  display:         flex;
  align-items:     center;
  gap:             var(--bbwab-space-sm);
  text-decoration: none;
  flex:            none;
}

.bbwab-logo img { height: 42px; width: auto; }

.bbwab-nav-links {
  display:     flex;
  gap:         var(--bbwab-space-2xl);
  align-items: center;
  list-style:  none;
  margin:      0;
  padding:     0;
}

.bbwab-nav-links a {
  text-decoration: none;
  font-size:       var(--bbwab-font-size-xs);
  font-weight:     600;
  letter-spacing:  0.04em;
  color:           var(--bbwab-color-text-muted);
  transition:      color var(--bbwab-transition-fast);
}

.bbwab-nav-links a:hover,
.bbwab-nav-links .current-menu-item > a,
.bbwab-nav-links .current_page_item > a { color: var(--bbwab-color-white); }

.bbwab-nav .bbwab-btn {
  padding:    12px 24px;
  font-size:  var(--bbwab-font-size-xs);
  white-space: nowrap;
  flex:       none;
}

@media (max-width: 820px) { .bbwab-nav-links { display: none; } }

/* ================================================================
   15. Footer stub — Phase 3 will replace with Theme Builder template
   ================================================================ */
#bbwab-footer {
  border-top:  1px solid var(--bbwab-color-border);
  padding-block: var(--bbwab-space-3xl);
  font-size:   var(--bbwab-font-size-xs);
  color:       var(--bbwab-color-text-muted);
}

#bbwab-footer .bbwab-wrap {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--bbwab-space-xl);
  flex-wrap:       wrap;
}

#bbwab-footer .bbwab-compliance { font-size: 12px; max-width: 52ch; }

/* ================================================================
   16. Sticky mobile CTA stub
   ================================================================ */
#bbwab-sticky-cta { display: none; }

@media (max-width: 820px) {
  #bbwab-sticky-cta {
    display:          block;
    position:         fixed;
    bottom:           0;
    left:             0;
    right:            0;
    z-index:          60;
    padding:          12px 16px calc(12px + env(safe-area-inset-bottom));
    background:       rgba(2, 1, 34, 0.92);
    backdrop-filter:  blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top:       1px solid var(--bbwab-color-border);
  }

  #bbwab-sticky-cta .bbwab-btn { width: 100%; padding: 15px; }
  body { padding-bottom: 84px; }
}

/* ================================================================
   17. Elementor overrides — prevent conflicts
   ================================================================ */

/* Strip Elementor's default section/column padding when our utility
   classes are being used */
.e-con.bbwab-section { --container-default-padding-top: 0; --container-default-padding-bottom: 0; }

/* NOTE: `elementor-page` is a BODY class, so a `background: transparent` rule
   here out-specifies `body { background: … }` (0,1,0 beats 0,0,1) and turns the
   whole page white. Scope any Elementor background reset to Elementor's own
   content wrapper instead — never to the body-level class. */
.elementor-page > .elementor { background: transparent; }

/* Remove default widget spacing when explicitly zeroed */
.elementor-widget.no-margin { margin-block-end: 0; }

/* Hello Elementor paragraph fix */
.entry-content p { margin-block-end: 1em; }
.entry-content p:last-child { margin-block-end: 0; }