/* ==========================================================================
   Legendary Stakes — Brand Overrides
   Ported from Shane Plummer's Elementor Custom Code snippet (2026-06-18).
   
   PURPOSE: Bridge between tokens.css (which defines variables + utility 
   classes) and the live WordPress/Elementor/The7 site (which needs those 
   values forced onto specific selectors with !important to beat Elementor's 
   inline styles and The7's compiled CSS).
   
   tokens.css  = the design system source of truth (variables, scale, utilities)
   THIS FILE   = the WordPress integration layer (applies tokens to the real site)
   custom.css  = The7's own compiled output (edited separately via SFTP)
   
   DEPENDENCIES: tokens.css must load first (enqueued with priority 100).
   This file loads at priority 110.
   ========================================================================== */

/* ── Base — dark arena ── */
html, body, #page, .site, #content, .site-content, #load {
  background-color: var(--ls-ink-950) !important;
  color: var(--ls-bone-50) !important;
}
body { font-family: var(--ls-font-sans) !important; -webkit-font-smoothing: antialiased; }

/* ── Elementor containers — dark by default ── */
.elementor-section, .elementor-top-section, .elementor-inner-section,
.elementor-column, .elementor-col-100, .elementor-col-50,
.elementor-col-33, .elementor-col-25, .elementor-col-66, .elementor-col-20,
.elementor-widget-container, .elementor-widget-wrap,
.elementor-element-populated,
.e-con, .e-con-inner, .elementor-element {
  background-color: var(--ls-ink-950) !important;
}

/* ── Inline white/light override → bone-50 ── */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#ffffff"],
[style*="background: #ffffff"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"] {
  background: var(--ls-bone-50) !important;
  border-color: var(--ls-bone-100) !important;
  color: var(--ls-ink-900) !important;
}
[style*="background:#fff"] *,
[style*="background:#ffffff"] *,
[style*="background-color:#fff"] *,
[style*="background-color:#ffffff"] * {
  color: var(--ls-ink-900) !important;
}

/* ── The7 image/icon cards — bone-50, dark text ── */
.the7-box-wrapper {
  background-color: var(--ls-bone-50) !important;
  border: 1px solid var(--ls-bone-100) !important;
  border-radius: var(--ls-radius-lg) !important;
  overflow: hidden !important;
}
.the7-box-wrapper .elementor-widget-container,
.the7-box-wrapper .elementor-element,
.the7-box-wrapper .elementor-widget,
.the7-box-wrapper .box-content-wrapper {
  background-color: transparent !important;
}
.the7-box-wrapper *:not(img):not(svg):not(i):not(path) {
  color: var(--ls-ink-900) !important;
}
.the7-box-wrapper h3, .the7-box-wrapper h4, .the7-box-wrapper .box-title {
  font-family: var(--ls-font-display) !important;
  color: var(--ls-ink-900) !important;
}

/* ── "How It Works" step cards ── */
.elementor-element-50263e2 .elementor-widget-wrap.elementor-element-populated {
  background-color: var(--ls-bone-50) !important;
  border: 1px solid var(--ls-bone-100) !important;
  border-radius: var(--ls-radius-lg) !important;
}
.elementor-element-50263e2 .elementor-widget-container,
.elementor-element-50263e2 .elementor-element,
.elementor-element-50263e2 .elementor-widget {
  background-color: transparent !important;
}
.elementor-element-50263e2 *:not(img):not(svg):not(path):not(i) {
  color: var(--ls-ink-900) !important;
}

/* ── Testimonials — bone-50, gold left border ── */
[class*="testimonial"], [class*="review"] {
  background-color: var(--ls-bone-50) !important;
  border: 1px solid var(--ls-bone-100) !important;
  border-left: 4px solid var(--ls-gold) !important;
  border-radius: var(--ls-radius-lg) !important;
}
[class*="testimonial"] *, [class*="review"] * { color: var(--ls-ink-900) !important; }
[class*="testimonial"] [class*="name"],
[class*="testimonial"] [class*="author"],
[class*="testimonial"] cite {
  color: var(--ls-gold-deep) !important;
  font-family: var(--ls-font-cond) !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
}

/* ── Counter/stat boxes — bone-50 ── */
.elementor-counter-wrapper {
  background-color: var(--ls-bone-50) !important;
  border: 1px solid var(--ls-bone-100) !important;
  border-radius: var(--ls-radius-lg) !important;
  padding: 24px !important;
}
.elementor-counter-number-wrapper { color: var(--ls-gold-deep) !important; font-family: var(--ls-font-display) !important; }
.elementor-counter-title { color: var(--ls-ink-900) !important; font-family: var(--ls-font-cond) !important; text-transform: uppercase !important; letter-spacing: .1em !important; }

/* ── Nav — dark, bone text ── */
.site-header, .main-navigation, #site-navigation,
header.header, .dt-header, .header-container {
  background-color: var(--ls-ink-950) !important;
  border-bottom: 1px solid var(--ls-gold-line) !important;
}
.main-navigation a, .main-navigation a span,
#site-navigation a, #site-navigation a span,
.dt-header a, .dt-header a span,
nav a, nav a span, ul.menu a, ul.menu a span {
  font-family: var(--ls-font-cond) !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  font-size: 13px !important;
  color: var(--ls-bone-50) !important;
}
.main-navigation a:hover span, nav a:hover span { color: var(--ls-gold-bright) !important; }
.dt-mobile-header, .sub-nav, nav ul ul, .nav-drop {
  background-color: var(--ls-ink-900) !important;
  border: 1px solid var(--ls-gold-line) !important;
}
.dt-mobile-header a, .dt-mobile-header a span,
.sub-nav a, .sub-nav a span { color: var(--ls-bone-50) !important; }

/* ── Headings ── */
h1, h2, h3, h4, h5, h6, .elementor-heading-title {
  font-family: var(--ls-font-display) !important;
  color: var(--ls-bone-50) !important;
}

/* ── Body text ── */
p, li, label, td,
.elementor-widget-text-editor, .elementor-widget-text-editor *,
.elementor-text-editor, .elementor-text-editor * { color: var(--ls-bone-50) !important; }
span:not([class*="elementor-icon"]):not([class*="wpcf7"]):not(.microwidget-btn span) { color: inherit !important; }
.elementor-social-icons-wrapper a, .elementor-social-icons-wrapper span,
.elementor-icon-list-icon span, .e-social-icon { color: var(--ls-bone-50) !important; }
a { color: var(--ls-gold-bright); }
a:hover { color: var(--ls-gold); }

/* ── Buttons ── */
.elementor-button, .btn, button,
input[type="submit"], input[type="button"],
.wp-block-button__link, .wpcf7-submit {
  font-family: var(--ls-font-cond) !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  font-weight: 600 !important;
  border-radius: var(--ls-radius) !important;
}
.box-button.elementor-button, .wpcf7-submit,
input[type="submit"], .elementor-button-primary {
  background: linear-gradient(180deg, var(--ls-gold-bright), var(--ls-gold)) !important;
  color: var(--ls-ink-950) !important;
  border: none !important;
}
.elementor-button-text, .elementor-button-content-wrapper { color: inherit !important; }

/* ═══════════════════════════════════════════════════════════════════════
   HEADER MICROWIDGET BUTTONS

   Add to brand-overrides.css. Delete the two-line block above it that sets
   .microwidget-btn span to #ffffff — that rule forces white text and would
   fight this one. (Leave the OTHER line that mentions .microwidget-btn span
   inside a :not() exclusion; that one does something different.)

   WHY THIS IS AN OVERRIDE AND NOT A SETTING
   These are The7 header microwidgets. Their colours live in Theme Options,
   Top Bar and Header, Microwidgets — currently unreachable, because The7
   15.0.3 locks "Enable Elementor Theme Style" whenever "Optimize The7 for"
   is set to Elementor.

   The values still sit in the database and are re-emitted into
   /wp-content/uploads/the7-css/custom.css on every theme-settings save. A
   sweep of that compiled file was lost to exactly that regeneration, so the
   override lives here instead — this file is ours and survives.

   TO REMOVE THIS BLOCK LATER
   Set "Optimize The7 for" to Custom, untick "Enable Elementor Theme Style",
   then set the colours under Top Bar and Header, Microwidgets. That also
   releases Mega Menu and Elementor buttons integration, so it needs testing.

   WHAT IT REPLACES, from the compiled custom.css
     background : linear-gradient(34deg, #fe3e01 30%, #fd7b03 100%)
     hover      : #d10000
     text       : #ffffff
     font       : Work Sans, superseded by v2.1

   NOTE ON COMMENTS
   CSS has no nested comments. An earlier version of this header quoted a
   rule that itself ended in a comment terminator, which closed this block
   early and caused the parser to swallow the first rule below. Keep this
   header free of comment terminators.
   ═══════════════════════════════════════════════════════════════════════ */

/* Button 1 — Join For Free. Filled gold, ink text. */
.header-elements-button-1.microwidget-btn-bg-on:before,
.masthead .header-elements-button-1.microwidget-btn-bg-on:before,
.light-preset-color.masthead .header-elements-button-1.microwidget-btn-bg-on:before {
  background-color: var(--ls-gold) !important;
  background-image: linear-gradient(180deg, var(--ls-gold-bright), var(--ls-gold)) !important;
}
.header-elements-button-1.microwidget-btn-hover-bg-on:after {
  background-color: var(--ls-gold-deep) !important;
  background-image: none !important;
}

/* Ink on gold, not white. White on gold fails contrast and is not the
   design system button treatment. */
.header-elements-button-1:not(:hover) span,
.header-elements-button-1:hover span,
.header-elements-button-1.btn-icon-align-right:not(:hover) i,
.header-elements-button-1.btn-icon-align-left:not(:hover) i,
.header-elements-button-1.btn-icon-align-right:hover i,
.header-elements-button-1.btn-icon-align-left:hover i {
  color: var(--ls-ink-950) !important;
}

/* Button 2 — Login. Transparent, so bone text is correct. */
.header-elements-button-2:not(:hover) span,
.header-elements-button-2:not(:hover) i {
  color: var(--ls-bone-50) !important;
}
.header-elements-button-2:hover span,
.header-elements-button-2:hover i {
  color: var(--ls-gold-bright) !important;
}

/* Typography. The compiled CSS still specifies Work Sans. */
.header-elements-button-1,
.header-elements-button-2 {
  font-family: var(--ls-font-cond) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  border-radius: var(--ls-radius) !important;
}

/* ── Form inputs ── */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="url"], input[type="password"],
input[type="search"], textarea, select {
  background: var(--ls-ink-900) !important;
  border: 1px solid var(--ls-gold-line) !important;
  color: var(--ls-bone-50) !important;
  font-family: var(--ls-font-sans) !important;
  border-radius: var(--ls-radius) !important;
  padding: 10px 14px !important;
}
input::placeholder, textarea::placeholder { color: rgba(244,239,227,.45) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ls-gold) !important; }
.subscribe-box, .wpcf7-form, form { background: transparent !important; }

/* ── Tables ── */
table { width: 100%; border-collapse: collapse; }
th {
  font-family: var(--ls-font-cond) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-size: 11px !important;
  color: var(--ls-gold) !important;
  background: var(--ls-ink-900) !important;
  border-bottom: 2px solid var(--ls-gold-line) !important;
  padding: 12px 16px !important;
}
td { padding: 12px 16px !important; border-bottom: 1px solid rgba(201,160,44,.12) !important; color: var(--ls-bone-50) !important; }
tr:hover td { background: var(--ls-gold-tint) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER  —  replaces the previous "── Footer ──" block in
   brand-overrides.css.

   WHAT WENT WRONG IN v1
   v1 painted every footer Button widget gold, because its CTA rule
   (`footer .elementor-widget-button .elementor-button`, specificity 0,2,1)
   outranked its own nav fallback (`.ls-footer-nav .elementor-button`,
   0,2,0). Both carried !important, so source order never came into it —
   higher specificity simply won.

   THE APPROACH HERE
   The nav links were never actually gold; the CTA's gold comes from
   Elementor's own per-widget CSS. So this block does NOT set backgrounds,
   padding, or display on footer buttons at all — it only corrects
   TYPOGRAPHY, which was the real collision. Nothing structural is touched,
   so the worst possible failure is a link that looks like a link.

   ONE CLASS NEEDED: add `ls-footer-cta` to the "Join For Free" widget so it
   keeps button typography. Everything else needs no classes.

   The `ls-footer-nav` class from v1 can be REMOVED — it is no longer used.
   ═══════════════════════════════════════════════════════════════════════ */

footer, .site-footer, .footer-container, #colophon, .main_footer {
  background: var(--ls-ink-950) !important;
  border-top: 1px solid var(--ls-gold-line) !important;
  color: var(--ls-bone-50) !important;
}

/* Base tone. Scoped to text-bearing elements rather than the old blanket
   `footer *` rule, which forced everything to one colour and made any
   hierarchy impossible. Button internals excluded so the CTA keeps ink. */
footer p, footer li, footer address,
footer span:not(.elementor-button-text):not(.elementor-button-content-wrapper),
.main_footer p, .main_footer li,
.main_footer span:not(.elementor-button-text):not(.elementor-button-content-wrapper) {
  color: var(--ls-bone-50) !important;
}

/* ── Column headings ── */
footer .elementor-heading-title,
.main_footer .elementor-heading-title {
  font-family: var(--ls-font-cond) !important;
  text-transform: uppercase !important;
  letter-spacing: .18em !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--ls-gold) !important;
  margin: 0 0 16px !important;
}

/* ── Nav links ───────────────────────────────────────────────────────────
   Typography ONLY. No background, no padding, no display — so a Button
   widget keeps whatever box Elementor gave it (which for the nav links is
   none) and simply stops shouting in condensed uppercase.

   Covers both possible markup: Button widgets as they stand today, and
   Icon List items if the widgets are ever rebuilt properly.            */
footer .elementor-widget-button .elementor-button,
footer .elementor-widget-button .elementor-button-text,
footer .elementor-icon-list-item > a,
footer .elementor-icon-list-text {
  font-family: var(--ls-font-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
  transition: color .15s ease !important;
}
footer .elementor-widget-button:not(.ls-footer-cta) .elementor-button,
footer .elementor-widget-button:not(.ls-footer-cta) .elementor-button-text,
footer .elementor-icon-list-item > a,
footer .elementor-icon-list-text {
  color: var(--ls-bone-50) !important;
}
footer .elementor-widget-button:not(.ls-footer-cta) .elementor-button:hover,
footer .elementor-widget-button:not(.ls-footer-cta) .elementor-button:hover .elementor-button-text,
footer .elementor-icon-list-item > a:hover,
footer .elementor-icon-list-item > a:hover .elementor-icon-list-text {
  color: var(--ls-gold-bright) !important;
}

/* Icon list spacing (only applies if widgets are rebuilt as Icon Lists) */
footer .elementor-icon-list-items { list-style: none !important; margin: 0 !important; padding: 0 !important; }
footer .elementor-icon-list-item { margin: 0 0 10px !important; padding: 0 !important; }
footer .elementor-icon-list-item:last-child { margin-bottom: 0 !important; }

/* ── CTA — opts back IN to button typography ─────────────────────────────
   Specificity (0,3,1) deliberately beats the nav rule above (0,2,1).
   Background and padding are left to Elementor, which already styles it. */
footer .elementor-widget-button.ls-footer-cta .elementor-button,
footer .elementor-widget-button.ls-footer-cta .elementor-button-text {
  font-family: var(--ls-font-cond) !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--ls-ink-950) !important;
}

/* ── Tagline ── */
footer .elementor-widget-text-editor p {
  font-family: var(--ls-font-sans) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--ls-stone-300) !important;
  margin: 0 0 8px !important;
}



/* ── Legal bar ──
   Needs the class `ls-footer-legal` on the bottom container. If that class
   is not added, this block simply does nothing. */
.ls-footer-legal,
.ls-footer-legal > .e-con-inner {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
.ls-footer-legal {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.ls-footer-legal p {
  font-family: var(--ls-font-sans) !important;
  font-size: 12.5px !important;
  color: var(--ls-stone-400) !important;
  margin: 0 !important;
  text-align: center !important;
}
.ls-footer-legal a {
  color: var(--ls-stone-300) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--ls-gold-line) !important;
  padding-bottom: 1px !important;
  transition: color .15s ease, border-color .15s ease !important;
}
.ls-footer-legal a:hover {
  color: var(--ls-gold-bright) !important;
  border-bottom-color: var(--ls-gold-bright) !important;
}
.ls-footer-legal span[style*="underline"] { text-decoration: none !important; }

/* ── Responsive ── */
@media (max-width: 767px) {
  footer .elementor-heading-title { margin-bottom: 12px !important; }
  footer .elementor-social-icons-wrapper { justify-content: flex-start !important; }
  .ls-footer-legal p { line-height: 1.7 !important; }
}


/* ── Utilities ── */
.ls-divider { height:3px; border:0; background:linear-gradient(90deg,transparent,var(--ls-gold) 12%,var(--ls-gold-bright) 50%,var(--ls-gold) 88%,transparent); margin:0 auto; }
.ls-band-dark { background: var(--ls-ink-900) !important; }
.ls-band-bone { background: var(--ls-bone-50) !important; color: var(--ls-ink-900) !important; }
.ls-gold { color: var(--ls-gold) !important; }
.ls-gold-bright { color: var(--ls-gold-bright) !important; }

/* ── FAQ plugin — Q&E toggle plugin ── */
.qe-toggle-title {
  background: var(--ls-ink-900) !important;
  color: var(--ls-bone-50) !important;
  border: 1px solid var(--ls-gold-line) !important;
  border-radius: var(--ls-radius) !important;
  font-family: var(--ls-font-display) !important;
  font-size: 1.05rem !important;
}
.qe-toggle-title * { color: var(--ls-bone-50) !important; }
.qe-toggle-title:hover {
  background: var(--ls-ink-850) !important;
  border-color: var(--ls-gold) !important;
}
.qe-toggle-content {
  background: var(--ls-bone-50) !important;
  color: var(--ls-ink-900) !important;
  border: 1px solid var(--ls-bone-100) !important;
  border-top: none !important;
  border-radius: 0 0 var(--ls-radius) var(--ls-radius) !important;
}
.qe-toggle-content * { color: var(--ls-ink-900) !important; }

/* FAQ filter tabs */
.qe-faqs-filter {
  font-family: var(--ls-font-cond) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-size: 12px !important;
  border: 1px solid var(--ls-gold-line) !important;
  border-radius: var(--ls-radius) !important;
  padding: 6px 14px !important;
}
.qe-faqs-filter.all-faqs,
.qe-faqs-filter:hover {
  background: var(--ls-gold-tint) !important;
  border-color: var(--ls-gold) !important;
}

/* FAQ group headings */
.qe-faqs-group-title {
  font-family: var(--ls-font-display) !important;
  color: var(--ls-bone-50) !important;
  border-bottom: 1px solid var(--ls-gold-line) !important;
  padding-bottom: 8px !important;
}

/* ── FAQ "Didn't find" CTA strip ── */
.contact-cta {
  padding: 56px 40px 64px !important;
  border-top: 1px solid var(--ls-gold-line) !important;
  border-bottom: 1px solid var(--ls-gold-line) !important;
}
.contact-cta .elementor-widget-container,
.contact-cta .elementor-element,
.contact-cta .elementor-widget {
  background-color: transparent !important;
}
.contact-cta h4, .contact-cta .the7-heading-title {
  font-family: var(--ls-font-display) !important;
  color: var(--ls-bone-50) !important;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem) !important;
  margin-bottom: 8px !important;
}
.contact-cta p { color: var(--ls-bone-50) !important; opacity: .75; }

/* ── Strip/spacer fixes ── */
.top-bar-bg { background: transparent !important; }

.elementor-background-overlay {
  background-color: rgba(20, 17, 12, 0.45) !important;
}

.masthead, .inline-header { background: transparent !important; }

[class*="elementor-section"] > .elementor-background-overlay,
[class*="e-con"] > .elementor-background-overlay {
  background-color: rgba(20, 17, 12, 0.5) !important;
}

/* Hero sections — transparent inner containers so bg image shows */
.elementor-section:has(> .elementor-background-overlay) .elementor-column,
.elementor-section:has(> .elementor-background-overlay) .elementor-widget-wrap,
.elementor-section:has(> .elementor-background-overlay) .elementor-element-populated,
.elementor-section:has(> .elementor-background-overlay) .elementor-widget-container,
.elementor-section:has(> .elementor-background-overlay) .elementor-element {
  background-color: transparent !important;
}

/* Enroll-your-sire hero specific */
.elementor-element-03d33e6 .elementor-column,
.elementor-element-03d33e6 .elementor-widget-wrap,
.elementor-element-03d33e6 .elementor-element-populated,
.elementor-element-03d33e6 .elementor-widget-container,
.elementor-element-03d33e6 .elementor-element { background-color: transparent !important; }

/* Form labels — bone-50 */
label, .wpcf7 label, .elementor-field-label, .elementor-field-group > label {
  color: var(--ls-bone-50) !important;
}
textarea {
  background: var(--ls-ink-900) !important;
  color: var(--ls-bone-50) !important;
}

/* unlock-your-competitive-edge hero */
.elementor-element-a9dd6fa .elementor-column,
.elementor-element-a9dd6fa .elementor-widget-wrap,
.elementor-element-a9dd6fa .elementor-element-populated,
.elementor-element-a9dd6fa .elementor-widget-container,
.elementor-element-a9dd6fa .elementor-element { background-color: transparent !important; }

/* ls-notify-form — light inputs to match cream card */
#ls-notify-form input[type="text"],
#ls-notify-form input[type="email"],
#ls-notify-form input[type="tel"],
#ls-notify-form input[type="number"],
#ls-notify-form textarea {
  background: var(--ls-paper) !important;
  color: var(--ls-ink-900) !important;
  border: 1px solid var(--ls-bone-100) !important;
}
#ls-notify-form input::placeholder,
#ls-notify-form textarea::placeholder { color: rgba(20,17,12,0.45) !important; }

/* Disciplines list on enroll-your-sire */
.elementor-element-115115d *:not(img):not(svg):not(path):not(i) {
  color: var(--ls-bone-50) !important;
}

/* ── Contact forms — consistent cream card style ── */
.subscribe-box, .newsletter-container {
  background: var(--ls-bone-50) !important;
  border-radius: var(--ls-radius-lg) !important;
  border: 1px solid var(--ls-bone-100) !important;
  padding: 40px !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}
.subscribe-box label, .newsletter-container label,
.subscribe-box .wpcf7 label {
  color: var(--ls-ink-900) !important;
  font-family: var(--ls-font-sans) !important;
  font-weight: 500 !important;
}
.subscribe-box input[type="text"],
.subscribe-box input[type="email"],
.subscribe-box input[type="tel"],
.subscribe-box input[type="number"],
.subscribe-box textarea,
.newsletter-container input[type="text"],
.newsletter-container input[type="email"],
.newsletter-container input[type="tel"],
.newsletter-container textarea {
  background: var(--ls-paper) !important;
  color: var(--ls-ink-900) !important;
  border: 1px solid var(--ls-bone-100) !important;
}
.subscribe-box input::placeholder,
.subscribe-box textarea::placeholder,
.newsletter-container input::placeholder { color: rgba(20,17,12,0.4) !important; }
.subscribe-box h1, .subscribe-box h2, .subscribe-box h3, .subscribe-box h4,
.newsletter-container h1, .newsletter-container h2, .newsletter-container h3 {
  color: var(--ls-ink-900) !important;
}
.subscribe-box p, .newsletter-container p { color: var(--ls-ink-900) !important; }

/* ── Shared contact form card style ── */
.elementor-element-f233dd0 .elementor-element-populated,
.elementor-element-a88a626 .elementor-element-populated {
  background: var(--ls-bone-50) !important;
  border: 1px solid var(--ls-bone-100) !important;
  border-radius: var(--ls-radius-lg) !important;
  padding: 40px 48px !important;
}
.elementor-element-f233dd0 .elementor-widget-container,
.elementor-element-a88a626 .elementor-widget-container,
.elementor-element-f233dd0 .elementor-element,
.elementor-element-a88a626 .elementor-element {
  background: transparent !important;
}
.elementor-element-f233dd0 h1, .elementor-element-f233dd0 h2,
.elementor-element-f233dd0 h3, .elementor-element-f233dd0 h4,
.elementor-element-f233dd0 p, .elementor-element-f233dd0 label,
.elementor-element-a88a626 h1, .elementor-element-a88a626 h2,
.elementor-element-a88a626 h3, .elementor-element-a88a626 h4,
.elementor-element-a88a626 p, .elementor-element-a88a626 label {
  color: var(--ls-ink-900) !important;
}
.elementor-element-f233dd0 input[type="text"],
.elementor-element-f233dd0 input[type="email"],
.elementor-element-f233dd0 input[type="tel"],
.elementor-element-f233dd0 input[type="number"],
.elementor-element-f233dd0 textarea,
.elementor-element-a88a626 input[type="text"],
.elementor-element-a88a626 input[type="email"],
.elementor-element-a88a626 input[type="tel"],
.elementor-element-a88a626 input[type="number"],
.elementor-element-a88a626 textarea,
#sire-enroll-form input[type="text"],
#sire-enroll-form input[type="email"],
#sire-enroll-form input[type="tel"],
#sire-enroll-form textarea {
  background: var(--ls-paper) !important;
  color: var(--ls-ink-900) !important;
  border: 1px solid var(--ls-bone-100) !important;
}
.elementor-element-f233dd0 input::placeholder,
.elementor-element-f233dd0 textarea::placeholder,
.elementor-element-a88a626 input::placeholder,
.elementor-element-a88a626 textarea::placeholder,
#sire-enroll-form input::placeholder,
#sire-enroll-form textarea::placeholder { color: rgba(20,17,12,0.4) !important; }
.elementor-element-f233dd0 input[type="submit"],
.elementor-element-a88a626 input[type="submit"],
#sire-enroll-form input[type="submit"],
#sire-enroll-form button[type="submit"] {
  background: linear-gradient(180deg, var(--ls-gold-bright), var(--ls-gold)) !important;
  color: var(--ls-ink-950) !important;
}

/* ── Homepage "How It Works" — gap between cards ── */
.elementor-element-50263e2 > .elementor-container {
  gap: 24px !important;
}
.elementor-element-50263e2 .elementor-widget-wrap.elementor-element-populated {
  margin: 0 !important;
}

/* Gold circle step number badges */
.elementor-element-125a123 .elementor-widget-container,
.elementor-element-0e94e10 .elementor-widget-container,
.elementor-element-e643df5 .elementor-widget-container {
  background: linear-gradient(180deg, var(--ls-gold-bright), var(--ls-gold)) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
}
.elementor-element-125a123 .elementor-widget-container *,
.elementor-element-0e94e10 .elementor-widget-container *,
.elementor-element-e643df5 .elementor-widget-container * {
  color: var(--ls-ink-950) !important;
  font-family: var(--ls-font-cond) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

/* ── Five ways cards — uniform image, aligned buttons ── */
.elementor-element-eae22ce .the7-box-wrapper {
  display: flex !important;
  flex-direction: column !important;
}
.elementor-element-eae22ce .the7-box-wrapper .box-content-wrapper {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding-top: 16px !important;
}
.elementor-element-eae22ce .the7-box-wrapper .box-button {
  margin-top: auto !important;
  padding-top: 16px !important;
}
.elementor-element-eae22ce .the7-box-wrapper .img-css-resize-wrapper,
.elementor-element-eae22ce .the7-box-wrapper .post-thumbnail-rollover {
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  overflow: hidden !important;
  border-radius: 6px 6px 0 0 !important;
  width: 100% !important;
}
.elementor-element-eae22ce .the7-box-wrapper .img-css-resize-wrapper img,
.elementor-element-eae22ce .the7-box-wrapper .post-thumbnail-rollover img,
.elementor-element-eae22ce .the7-box-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  display: block !important;
}
.elementor-element-eae22ce .the7-box-wrapper,
.elementor-element-eae22ce .the7-box-wrapper .box-content-wrapper {
  padding-bottom: 24px !important;
}
.elementor-element-eae22ce .the7-box-wrapper .box-button a,
.elementor-element-eae22ce .the7-box-wrapper .box-button {
  margin-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   LS LEGAL PAGES
   Append to brand-overrides.css.

   Styling for the Terms of Use and Privacy Policy pages. Both are pasted
   into the WordPress editor wrapped in <div class="ls-legal">, so the
   content stays editable in WordPress rather than living in a template.

   The pages currently render at the full content width, which is far too
   wide a measure for continuous legal prose. This narrows it to roughly
   72 characters per line, opens up the leading, and gives the numbered
   sections a clear hierarchy.
   ══════════════════════════════════════════════════════════════════════ */

.ls-legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 0 56px;
  font-family: var(--ls-font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ls-bone-100);
  text-align: left;
}

/* Effective date / supersedes line, directly under the page title */
.ls-legal__meta {
  font-family: var(--ls-font-cond) !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11.5px !important;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ls-stone-400) !important;
  padding-bottom: 20px;
  margin: 0 0 32px !important;
  border-bottom: 1px solid var(--ls-gold-line);
}

/* Numbered sections */
.ls-legal h2 {
  font-family: var(--ls-font-display) !important;
  font-weight: 600;
  font-size: 26px !important;
  line-height: 1.2;
  color: var(--ls-bone-50) !important;
  margin: 44px 0 14px !important;
  padding-top: 4px;
  text-transform: none !important;
}
.ls-legal h2:first-of-type { margin-top: 0 !important; }

/* Sub-sections, e.g. "2.1 Information you give us" */
.ls-legal h3 {
  font-family: var(--ls-font-cond) !important;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px !important;
  font-weight: 700;
  color: var(--ls-gold) !important;
  margin: 28px 0 10px !important;
}
.ls-legal h4 {
  font-family: var(--ls-font-sans) !important;
  font-weight: 700;
  font-size: 15px !important;
  color: var(--ls-bone-50) !important;
  margin: 22px 0 8px !important;
}

.ls-legal p {
  margin: 0 0 18px !important;
  color: var(--ls-bone-100) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.ls-legal ul,
.ls-legal ol {
  margin: 0 0 20px !important;
  padding-left: 22px;
}
.ls-legal li {
  margin-bottom: 12px !important;
  color: var(--ls-bone-100) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}
.ls-legal li::marker { color: var(--ls-gold-deep); }
.ls-legal li p { margin: 0 0 8px !important; }

/* Defined terms are bolded throughout both documents */
.ls-legal strong,
.ls-legal b {
  color: var(--ls-bone-50) !important;
  font-weight: 700;
}

.ls-legal a {
  color: var(--ls-gold-bright) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--ls-gold-line);
  overflow-wrap: anywhere;
}
.ls-legal a:hover { border-bottom-color: var(--ls-gold-bright); }

/* The all-caps disclaimer sections — Texas equine notice, warranties,
   limitation of liability. Legally these must stay prominent, but a wall
   of capitals at body size is punishing to read, so drop the size and
   open the leading rather than reducing the emphasis. */
.ls-legal p:has(> strong:only-child),
.ls-legal .ls-legal__caps {
  font-size: 14.5px !important;
  line-height: 1.75 !important;
}

@media (max-width: 700px) {
  .ls-legal { font-size: 15.5px; padding-bottom: 40px; }
  .ls-legal h2 { font-size: 22px !important; margin-top: 34px !important; }
  .ls-legal p, .ls-legal li { font-size: 15.5px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HEADER — PRIORITY NAV, 992px TO 1365px
   Added 2026-08-31.

   THE DEFECT THIS FIXES
   The7 hands off from its mobile header to the desktop header at 992px.
   The desktop nav needs roughly 1400px to fit eight menu items plus the
   two microwidget buttons. Everything between those two numbers gets a
   nav that cannot fit in a header that will not grow.

   The masthead carries "fixed-masthead", so it is out of flow and its
   height is reserved by a sibling spacer, "header-space", which is
   hardcoded to 74px. One row. When the nav wraps to two rows the masthead
   grows to roughly 200px but the spacer stays at 74px, so the second row
   has nothing beneath it and renders over the page content. On the
   Leaderboard this put "Chat Now" on top of the results table header.

   Confirmed by measurement, not inference: masthead height 74px against a
   mobile-header-bar height of 150px, both at top 32.

   WHAT THIS BLOCK DOES
   Between 992px and 1365px it hides the five lower-priority menu items and
   reveals The7's own hamburger, which opens a panel that still contains all
   seven items. Nothing becomes unreachable. Below 992px The7's mobile
   header takes over and this block must not apply. Above 1365px the full
   desktop nav fits on one line and this block must not apply.

   WHY NOT JUST RAISE THE BREAKPOINT
   Because that setting lives in Theme Options, which is disabled by
   "Optimize The7 for: Elementor". Raising it is the durable fix and it
   remains the right answer. See PROJECT_STATE section 6.

   WHY NOT DO IT IN CSS ANYWAY
   The7 toggles the class "masthead-mobile" from JavaScript on resize,
   reading the same breakpoint. Shifting only the CSS would leave the
   markup and the script disagreeing about which header is active, and the
   sticky and spacer calculations would run against the wrong one.

   THIS BLOCK IS DELETABLE
   If the "Optimize The7 for: Custom" migration ever happens, set the
   mobile header breakpoint to about 1330px and remove this entire block.

   THE MENU ITEM CLASSES ARE DATABASE IDS
   WordPress assigns them. Rebuilding the menu under Appearance then Menus
   issues new IDs and these selectors will silently stop matching, leaving
   a two-row header with no error anywhere. If the menu is ever rebuilt,
   re-read the IDs and update the list below.

   EVERY RULE HERE NEEDS THE IMPORTANT FLAG. They are all competing with
   The7's own media queries, which are more specific and load later.
   ═══════════════════════════════════════════════════════════════════════ */

@media screen and (min-width: 992px) and (max-width: 1365px) {

  /* Hidden from the visible bar. All five remain in the hamburger panel. */
  .main-nav > li.menu-item-59106,   /* 2026 Events  */
  .main-nav > li.menu-item-59398,   /* What's at Stake */
  .main-nav > li.menu-item-58420,   /* Sires        */
  .main-nav > li.menu-item-52,      /* FAQs         */
  .main-nav > li.menu-item-15964 {  /* News         */
    display: none !important;
  }

  /* Kept visible: menu-item-58532 Results / Leaderboard,
     menu-item-42 Chat Now. JOIN FOR FREE and LOGIN are microwidgets,
     not menu items, and are unaffected by the rules above. */

  /* The mobile bar ships a logo and a widget slot alongside the icon.
     The logo tiles across the header if left alone. */
  .mobile-branding,
  .mobile-mini-widgets {
    display: none !important;
  }

  /* Reveal the toggle and the panel it opens.

     The panel must be display block, not merely present. The7 activates a
     focus trap on open, and a focus trap throws if its container holds no
     tabbable node. Links inside a display none element are not tabbable,
     so leaving the panel hidden makes the hamburger throw instead of open.

     This does not make the panel visible. It sits off-canvas until The7
     adds show-overlay-mobile-header to the body. */
  .dt-mobile-menu-icon {
    display: flex !important;
  }
  .dt-mobile-header {
    display: block !important;
  }

  /* Position the bar into the header.

     It is its own block strip and drops below the masthead if left in
     flow. The masthead is a positioned ancestor, so absolute works.

     Do not use height 100 percent here. The7 forces a min-height on this
     bar that overrides it, giving a 150px box inside a 74px header and
     dropping the icon well below the row. Centring on the row with top 50
     percent and a translate is height-independent and survives the header
     resizing. */
  .masthead .mobile-header-bar {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    align-items: center !important;
    z-index: 20 !important;
  }

  /* The bar is absolutely positioned, so it displaces nothing. LOGIN is
     also right-aligned and the two overlap without this. Three selectors
     because the microwidget wrapper class varies by header layout; the
     ones that do not match are inert. */
  .masthead .header-bar > .mini-widgets,
  .masthead .mini-widgets,
  .masthead .header-elements {
    padding-right: 56px !important;
  }
}

/* Outside the media query on purpose. A button label should never wrap to
   three lines at any width. Cheap insurance if the header ever tightens
   again. */
.header-elements-button-1,
.header-elements-button-1 span {
  white-space: nowrap !important;
}

/* ── Menu active-page state, desktop and mobile ──
   The7 gives the current item a gold-tint pill but leaves the text at the
   gold it uses on dark, so active reads as dark-gold on dark-gold. Worst
   on mobile, where it is the least legible item in the panel.

   Not reachable from Elementor: this is The7's header, styled in Theme
   Options, which "Optimize The7 for: Elementor" disables.

   The link nests three levels:
     a > span.menu-item-text > span.menu-text
   and .menu-text carries its own colour, so setting the outer two is not
   enough. All three are set below.

   Several state classes because The7 marks the current item with .act,
   .current-menu-item and .current_page_item together. The ones that do
   not match are inert. */
.dt-mobile-header .mobile-main-nav > li.act > a,
.dt-mobile-header .mobile-main-nav > li.current-menu-item > a,
.dt-mobile-header .mobile-main-nav > li.current_page_item > a,
.dt-mobile-header .mobile-main-nav > li.act > a .menu-item-text,
.dt-mobile-header .mobile-main-nav > li.act > a .menu-text,
.masthead .main-nav > li.act > a,
.masthead .main-nav > li.current-menu-item > a,
.masthead .main-nav > li.current_page_item > a,
.masthead .main-nav > li.act > a .menu-item-text,
.masthead .main-nav > li.act > a .menu-text {
  color: var(--ls-bone-50) !important;
}