/*
Divi fixes (temporary while any pages still use Divi)
- Purpose: prevent underlines on button-like links and apply small Divi/Max Mega Menu tweaks
- Scope: only needed on pages rendered by Divi; coded pages (standalone templates) do not require this
- Removal: safe to delete once all pages are fully coded (no Divi output)
*/
:root {
  --boba-accent: #A0E672;

  /* Brand tokens */
  --brand-green: #A0E672;
  --brand-black: #111111;
  --brand-white: #ffffff;
  --brand-gray: #F5F5F5; /* updated per request */
}

/* Base defaults */
body { background-color: var(--brand-white); }

/* Divi default buttons */
.et_pb_button,
.et_pb_button_module_wrapper a.et_pb_button {
  border-radius: 8px;
  padding: 0.9rem 1.2rem;
  font-weight: 600;
}

/* Variants (apply these classes in Divi "Advanced → CSS Class") */
.btn--green { background: var(--brand-green) !important; color: var(--brand-black) !important; border-color: var(--brand-green) !important; }
.btn--black { background: var(--brand-black) !important; color: var(--brand-white) !important; border-color: var(--brand-black) !important; }

/* Background helpers (apply to Sections/Rows) */
.bg--gray { background: var(--brand-gray) !important; }
.bg--white { background: var(--brand-white) !important; }

/* Add page-specific tweaks below */

/* Header CTA: "Boba Card" — pill shape, consistent padding, stable hover */
header .et_pb_menu .btn.btn--black,
.et_pb_menu .btn.btn--black {
  /* Ensure true pill button box independent of Divi link line-height */
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;

  border-radius: var(--radius-pill) !important;   /* pill */
  padding: 10px 35px !important;                  /* match green button spacing */
  background: var(--brand-black) !important;
  color: var(--brand-white) !important;
  border: 1px solid var(--brand-black) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
}

/* Right-align CTAs: push Boba Card (and anything after it) to right; keep order before Get Started */
.et_pb_menu .menu { display: flex !important; }
.et_pb_menu .menu > li.menu-cta-boba-card { margin-left: auto !important; order: 10; }
.et_pb_menu .menu > li.menu-cta-get-started { order: 11; margin-left: 12px; }

/* Max Mega Menu (single UL) — precise placement using your IDs */
#mega-menu-primary-menu { display: flex !important; align-items: center !important; }
/* Remove plugin margins on CTA items so only our 12px gap remains */
#mega-menu-item-240498,
#mega-menu-item-238064 { margin-left: 0 !important; margin-right: 0 !important; }
/* Position CTAs: push Boba Card to the right, small gap before Get Started */
#mega-menu-item-240498 { margin-left: auto !important; }  /* Boba Card → pushes to right */
#mega-menu-item-238064 { margin-left: 12px !important; }  /* small gap before Get Started */
/* If plugin uses flex gap instead of margins, uncomment the next line */
/* #mega-menu-primary-menu { gap: 0 !important; } */

/* No visual change on hover/focus */
/* Kill Divi hover overlay and keep stable black on hover/focus */
header .et_pb_menu .btn.btn--black:hover,
header .et_pb_menu .btn.btn--black:focus-visible,
.et_pb_menu .btn.btn--black:hover,
.et_pb_menu .btn.btn--black:focus-visible {
  background: var(--brand-black) !important;
  color: var(--brand-white) !important;
  border-color: var(--brand-black) !important;
  filter: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
header .et_pb_menu .btn.btn--black:hover:after,
header .et_pb_menu .btn.btn--black:focus-visible:after,
.et_pb_menu .btn.btn--black:hover:after,
.et_pb_menu .btn.btn--black:focus-visible:after {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Override WP core link underline */
a:not(.wp-element-button) { text-decoration: none !important; }
a:not(.wp-element-button):hover { text-decoration: none !important; }





/* Enforce Divi device visibility: keep mobile/tablet-only sections hidden on desktop */

/* Device visibility using your section classes */

/* Desktop fallback by section number to prevent mixing */

/* Typography override: make specific buttons medium weight (revert by removing this block) */
.new-button-green-no,
.new-button-green-no.et_pb_button,
.et_pb_button_module_wrapper a.et_pb_button.new-button-green-no {
  font-weight: 500 !important;
}

/* Visibility helpers (front-end only; builder unaffected) */
@media (min-width: 981px) {
  body:not(.et-fb) .desktop-only-section:not(.et_pb_hidden_desktop) { display: block !important; }
  body:not(.et-fb) .mobile-only-section { display: none !important; }
}
@media (max-width: 980px) {
  body:not(.et-fb) .desktop-only-section { display: none !important; }
  body:not(.et-fb) .mobile-only-section:not(.et_pb_hidden_phone):not(.et_pb_hidden_tablet) { display: block !important; }
}