/* =====================================================================
   Trainify Tennis — Brand Theme (Clay Court) — v4.0
   Terracotta + tennis-green racket + navy/blue wordmark.

   Unlike earlier versions, every selector below was verified against
   the real site's exported database + theme source (Astra + Elementor
   free), not guessed. Specifically:
     - Header/nav/"Download App" button are rendered by the ASTRA THEME
       (not Elementor — this site uses Elementor free, which has no
       Theme Builder for headers), using Astra's real classes:
       .main-header-bar, .main-header-menu, .ast-custom-button
     - The homepage hero section's real Elementor element ID is
       995c984 — hardcoded below for a guaranteed-exact match on top of
       the generic fallback.
     - Headings, buttons, and text inside the page content use
       Elementor's standard core widget classes (.elementor-heading-title,
       .elementor-button, .elementor-widget-text-editor) — these already
       matched correctly, which is why your headings/logo were working
       before this version.
   ===================================================================== */

:root {
  --ttbt-terracotta:        #E0793F;
  --ttbt-terracotta-dark:   #8A3A12;
  --ttbt-sage:              #9CB86B;
  --ttbt-sage-dark:         #4B6B2D;
  --ttbt-navy:              #0B2454;
  --ttbt-blue:              #4C7FE0;
  --ttbt-cream:             #F4E1C1;
  --ttbt-ink:               #3B1A08;
  --ttbt-white:             #FFFFFF;

  --ttbt-font-display: 'Archivo Black', 'Poppins', Arial, sans-serif;
  --ttbt-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* ---------------------------------------------------------------------
   Base typography
   --------------------------------------------------------------------- */
body {
  font-size: 16px !important;
}

body,
button,
input,
select,
textarea,
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: var(--ttbt-font-body) !important;
  color: var(--ttbt-ink) !important;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--ttbt-font-display) !important;
  color: var(--ttbt-navy) !important;
  letter-spacing: 0.5px;
}

.elementor-heading-title {
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}
.elementor-heading-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 64px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ttbt-terracotta), var(--ttbt-sage));
}

/* Paragraph/body copy reads better a size up from UI chrome at typical
   marketing-page line lengths — 18px rather than the 16px baseline.
   Justified so both edges are flush, giving the feature blocks a
   cleaner, more deliberate look instead of a ragged right edge. */
p, li, .elementor-widget-container p,
.elementor-widget-text-editor p {
  font-family: var(--ttbt-font-body) !important;
  font-size: 18px !important;
  color: var(--ttbt-ink) !important;
  line-height: 1.65;
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
}

a {
  color: var(--ttbt-navy) !important;
  transition: color 0.2s ease;
}
a:hover,
a:focus {
  color: var(--ttbt-terracotta-dark) !important;
}

/* ---------------------------------------------------------------------
   ASTRA header bar — real classes verified from theme source. Subtle
   warm gradient (rather than flat white) plus a tri-color accent line
   along the bottom ties it to the full brand palette at a glance.
   --------------------------------------------------------------------- */
.main-header-bar,
.main-header-bar-wrap,
#masthead {
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFAF5 100%) !important;
  background-image: none !important;
  min-height: 96px !important;
  position: relative !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.main-header-bar-wrap::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--ttbt-terracotta), var(--ttbt-sage), var(--ttbt-blue)) !important;
}

.main-header-menu,
.main-header-bar-navigation ul {
  margin: 0 !important;
  padding: 0 !important;
}

.main-header-menu a,
.main-header-menu .menu-link,
.main-header-bar-navigation a {
  position: relative;
  font-family: var(--ttbt-font-body) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--ttbt-navy) !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding-bottom: 4px;
}
.main-header-menu li a::after,
.main-header-bar-navigation li a::after {
  content: "";
  position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: linear-gradient(90deg, var(--ttbt-terracotta), var(--ttbt-sage));
  transition: width 0.2s ease;
}
.main-header-menu li a:hover::after,
.main-header-bar-navigation li a:hover::after {
  width: 100%;
}
.main-header-menu a:hover,
.main-header-menu .menu-link:hover {
  color: var(--ttbt-terracotta-dark) !important;
}
/* The header button lives inside the same menu area on some layouts —
   it should never get the underline-on-hover treatment above. */
.main-header-menu a.ast-custom-button::after {
  display: none !important;
}

/* Astra's real "header button" component classes — this is what
   renders "Download App"; it is NOT an Elementor button. */
.ast-custom-button,
a.ast-custom-button,
.ast-header-button-1 .ast-custom-button,
.ast-header-button-2 .ast-custom-button,
.ast-builder-button-wrap .ast-custom-button,
.main-header-menu a.ast-custom-button {
  background: linear-gradient(135deg, var(--ttbt-terracotta), var(--ttbt-terracotta-dark)) !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  color: var(--ttbt-white) !important;
  font-family: var(--ttbt-font-display) !important;
  font-size: 15px !important;
  letter-spacing: 0.6px;
  border-radius: 999px !important;
  padding: 1em 2.2em !important;
  box-shadow: 0 8px 20px rgba(138, 58, 18, 0.25);
  transition: transform 0.18s ease, background 0.18s ease;
}
.ast-custom-button:hover,
.ast-header-button-1 .ast-custom-button:hover,
.ast-header-button-2 .ast-custom-button:hover {
  background: linear-gradient(135deg, var(--ttbt-sage), var(--ttbt-sage-dark)) !important;
  color: var(--ttbt-white) !important;
}

/* ---------------------------------------------------------------------
   Logo — Astra outputs WordPress core's standard custom_logo markup,
   so the generic .custom-logo class is already correct.
   --------------------------------------------------------------------- */
.custom-logo,
.site-logo-img img {
  content: var(--ttbt-logo-mark) !important;
  width: 76px !important;
  height: auto !important;
  object-fit: contain !important;
}

.ttbt-full-logo img {
  content: var(--ttbt-logo-full) !important;
  width: 220px !important;
  height: auto !important;
}

/* ---------------------------------------------------------------------
   Elementor content buttons (e.g. "BUY NOW") — standard core widget
   class, already correctly matching.
   --------------------------------------------------------------------- */
.elementor-button,
a.elementor-button,
.elementor-button-link {
  background: linear-gradient(135deg, var(--ttbt-terracotta), var(--ttbt-terracotta-dark)) !important;
  border: none !important;
  color: var(--ttbt-white) !important;
  font-family: var(--ttbt-font-display) !important;
  letter-spacing: 0.5px;
  border-radius: 999px !important;
  padding: 0.9em 2em !important;
  box-shadow: 0 8px 20px rgba(138, 58, 18, 0.25);
  transition: transform 0.18s ease, background 0.18s ease;
}
.elementor-button:hover,
a.elementor-button:hover {
  background: linear-gradient(135deg, var(--ttbt-sage), var(--ttbt-sage-dark)) !important;
  color: var(--ttbt-white) !important;
  transform: translateY(-2px);
}
.elementor-button .elementor-button-text {
  color: inherit !important;
}

/* ---------------------------------------------------------------------
   Sections with their own dark background color set in Elementor.
   Two real sections had this: the hero (995c984, was sky-blue) and the
   "SUBSCRIBE TO TRAINIFY TENNIS" section (d4f47dc, was dark navy
   #04045c with white heading text). Our global heading-color rule above
   forces ALL headings to navy text — great on a white background, but
   it turned the Subscribe heading into navy-on-navy (unreadable) since
   we weren't also correcting that section's background. Fixed by
   bringing both sections to the same white/washed background as the
   rest of the page, so the forced-navy heading text stays legible.
   --------------------------------------------------------------------- */
.elementor-element-995c984,
.elementor-element-d4f47dc,
.elementor-location-header + section:first-of-type,
.elementor-top-section:first-of-type {
  background: var(--ttbt-white) !important;
  background-image:
    radial-gradient(circle at 85% 0%, rgba(224, 121, 63, 0.10), transparent 55%),
    radial-gradient(circle at 10% 100%, rgba(156, 184, 107, 0.12), transparent 55%) !important;
}

/* ---------------------------------------------------------------------
   Existing native image-carousel widget — real Elementor Swiper
   classes. Styles the arrows IF they're visible. Note: your carousel's
   Navigation setting is currently "None", so the arrow elements don't
   exist in the page HTML at all yet — switch it to "Arrows" or "Both"
   in the Elementor editor (click the carousel → Content → Navigation)
   to actually show them; this CSS then makes them on-brand.
   --------------------------------------------------------------------- */
.elementor-swiper-button,
.elementor-swiper-button-prev,
.elementor-swiper-button-next {
  color: var(--ttbt-terracotta-dark) !important;
  background: var(--ttbt-white) !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 16px rgba(138, 58, 18, 0.25);
}
.elementor-swiper-button svg,
.elementor-swiper-button-prev svg,
.elementor-swiper-button-next svg {
  fill: var(--ttbt-terracotta-dark) !important;
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
footer,
#colophon,
.elementor-location-footer,
.site-footer {
  background-color: var(--ttbt-navy) !important;
  color: var(--ttbt-cream) !important;
}
footer a,
#colophon a,
.elementor-location-footer a,
.site-footer a {
  color: var(--ttbt-cream) !important;
}
footer a:hover,
#colophon a:hover,
.site-footer a:hover {
  color: var(--ttbt-sage) !important;
}

/* ---------------------------------------------------------------------
   Misc brand touches
   --------------------------------------------------------------------- */
::selection {
  background: var(--ttbt-sage);
  color: var(--ttbt-white);
}
blockquote {
  border-left: 4px solid var(--ttbt-terracotta);
  color: var(--ttbt-navy);
}