/* ==========================================================================
   GOLIVO — ELEMENTOR / XSTORE OVERRIDES
   NOT portable — tied to this specific theme install.
   These selectors are a best-effort pass based on:
     - xstore-options export (Plus Jakarta Sans, #5260fe accent, 30px pill buttons)
     - standard Elementor widget markup
     - etheme_* widget classes seen in the current Home export
   VERIFY on the live site with devtools and adjust selectors — XStore's
   compiled CSS was not available at authoring time, only its options JSON.
   ========================================================================== */

/* Elementor default + XStore "text_button" widget → route through our button system */
.elementor-button,
.elementor-button-link,
a.text_button,
.text_button a{
  font-family: var(--golivo-font-body) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  border-radius: var(--golivo-radius-md) !important;
  background: var(--golivo-terracotta-deep) !important;
  color: #FFF7EE !important;
  box-shadow: var(--golivo-shadow-cta) !important;
  transition: background-color .15s ease;
}
.elementor-button:hover,
.elementor-button-link:hover,
a.text_button:hover{
  background: var(--golivo-terracotta-deep-hover) !important;
}

/* Outline / secondary text_button variant — apply class "golivo-outline" in
   Elementor's "CSS Classes" advanced field to opt a specific button out of
   the primary-fill treatment above */
a.golivo-outline.text_button,
.golivo-outline a.text_button{
  background: var(--golivo-card) !important;
  color: var(--golivo-terracotta-deep) !important;
  border: 1px solid var(--golivo-terracotta-deep) !important;
  box-shadow: none !important;
}

/* Header utility links (Login / My Account) — these are small secondary
   affordances, not the page's primary CTA, so they shouldn't get the
   same full terracotta-fill treatment as a "Get Golivo" button. Ghost
   style instead: no fill, just text, minimal hover background.
   Selectors are a best-effort guess at XStore's account/login markup —
   verify the exact class in DevTools if this doesn't land. */
#masthead a[href*="my-account"],
#masthead a[href*="/login"],
.header-main a[href*="my-account"],
.header-main a[href*="/login"],
.etheme-header-account,
.etheme-header-account a,
#header-account,
#header-account a{
  background: transparent !important;
  color: var(--golivo-text-primary) !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  font-weight: 500 !important;
}
#masthead a[href*="my-account"]:hover,
#masthead a[href*="/login"]:hover,
.header-main a[href*="my-account"]:hover,
.header-main a[href*="/login"]:hover,
.etheme-header-account:hover,
#header-account:hover{
  background: var(--golivo-linen) !important;
  color: var(--golivo-terracotta-deep) !important;
}

/* ==========================================================================
   MOBILE PANEL — 3 elements flagged from a mobile screenshot.
   Best-effort selectors using plausible XStore/plugin class-name
   patterns plus wildcard fallbacks — verify the real class in DevTools
   if any of these three doesn't land, same as every other header fix
   in this file.
   ========================================================================== */

/* 1) Hamburger/mobile-menu toggle — confirmed via DevTools: it carries
   the theme's own "elementor-button" class, which our general CTA-button
   override above was painting terracotta. Excluding this specific
   element by targeting its real class, more specific + later in the
   cascade so it wins over the generic rule. */
a.elementor-button.etheme-elementor-off-canvas__toggle_button{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: var(--golivo-text-primary) !important;
}
a.elementor-button.etheme-elementor-off-canvas__toggle_button .et-icon,
a.elementor-button.etheme-elementor-off-canvas__toggle_button i{
  color: var(--golivo-text-primary) !important;
}
/* Kept as a fallback in case a different XStore build uses these
   generic names instead of the class confirmed above. */
.mobile-menu-toggle,
.mobile-panel-toggle,
.hamburger-icon,
[class*="mobile-menu-toggle"],
[class*="mobile-panel-toggle"],
[class*="hamburger"]{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: var(--golivo-text-primary) !important;
}
.mobile-menu-toggle svg,
.mobile-panel-toggle svg,
.hamburger-icon svg,
[class*="mobile-menu-toggle"] svg,
[class*="hamburger"] svg{
  fill: var(--golivo-text-primary) !important;
  stroke: var(--golivo-text-primary) !important;
}

/* 2) "Account" in the mobile panel — remove the button treatment
   entirely, per your request: just text/icon, no fill. */
.mobile-panel-account,
.mobile-menu-account,
[class*="mobile-panel"] a[href*="my-account"],
[class*="mobile-menu"] a[href*="my-account"]{
  background: transparent !important;
  color: var(--golivo-text-primary) !important;
  box-shadow: none !important;
  border: none !important;
  font-weight: 500 !important;
}

/* 3) Mobile off-canvas menu item labels — theme renders them all-caps
   (FEATURES, HELP & FAQ...); switching to normal case so they read as
   proper title case ("Features", "Help & FAQ") instead of shouting. */
.etheme-elementor-off-canvas a,
[class*="off-canvas"] .elementor-item,
[class*="off-canvas"] nav a,
[class*="mobile-panel"] a{
  text-transform: none !important;
}

/* etheme_advanced_headline — used for the Hero H1 in the current export */
.etheme_advanced_headline,
.etheme_advanced_headline *{
  font-family: var(--golivo-font-display) !important;
  color: var(--golivo-text-primary);
}

/* Body background — replace default white with Paper White canvas */
body{
  background-color: var(--golivo-paper);
}

/* Header / nav bar — Warm Linen, not the theme's default white/dark */
#masthead,
.site-header,
.header-main{
  background-color: var(--golivo-linen) !important;
}

/* Nav menu links — brand font, not the theme's default sans.
   Targets XStore's actual generated class chain directly with !important,
   since its own scoped selector (.elementor-element-XXXX .etheme-...)
   otherwise wins on specificity even without !important. */
#masthead .main-navigation a,
#masthead nav a,
.site-header nav a,
.header-main nav a,
.etheme-elementor-nav-menu-item-parent,
.etheme-elementor-nav-menu .item-link,
.etheme-elementor-nav-menu .elementor-item{
  font-family: var(--golivo-font-body) !important;
  font-weight: 500 !important;
  color: var(--golivo-text-primary) !important;
  fill: var(--golivo-text-primary) !important;
}

/* Logo container — cap the height so the uploaded PNG/SVG sits at the
   right scale next to the nav (use golivo-header-logo@2x.png, ~96px tall
   source rendered at ~40px display height) */
#masthead .site-logo img,
.header-main .site-logo img,
#masthead .custom-logo img,
.header-main .custom-logo img{
  max-height: 40px !important;
  width: auto !important;
}

/* Kill XStore's colorful WooCommerce badges site-wide per design spec 1.4
   (this affects Shop/product pages too, not only Home) */
.onsale, .featured-label, .new-label{
  background-color: var(--golivo-terracotta) !important;
  color: var(--golivo-text-on-brand) !important;
}

/* Links inside body copy */
.golivo-site a:not(.golivo-btn):not(.elementor-button){
  color: var(--golivo-terracotta-deep);
}

/* ==========================================================================
   FOOTER — monumental dark espresso block (deliberately deferred from
   Final CTA to here, per your call: Final CTA stays on the light canvas,
   the footer closes the page on the dark note instead).
   Best-effort selectors — XStore's actual footer wrapper class needs
   verification on the live site (Inspect Element on the footer).
   ========================================================================== */
footer,
#colophon,
.site-footer,
.footer-wrap,
.footer-widgets-wrap{
  background-color: #2B1E16 !important;
}
footer *:not(.golivo-btn):not(a),
#colophon *:not(.golivo-btn):not(a),
.site-footer *:not(.golivo-btn):not(a){
  color: rgba(251, 241, 230, 0.82) !important;
}
footer a,
#colophon a,
.site-footer a{
  color: #FBF1E6 !important;
}
footer h1, footer h2, footer h3, footer h4,
#colophon h1, #colophon h2, #colophon h3, #colophon h4{
  color: #FBF1E6 !important;
  font-family: var(--golivo-font-display) !important;
}

/* ==========================================================================
   SECTION SPACING — surgical, not blanket.
   An earlier broad reset here (padding:0 !important on page wrappers,
   margin-block:0 !important on every container) turned out to also zero
   OUR OWN intentional section padding and heading-to-content gaps, since
   those are generated by Elementor without !important and this rule was
   beating them. Scoped down to just the two safe, narrow resets that
   don't touch anything we've deliberately set.
   ========================================================================== */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor p{
  margin-block: 0;
}

/* Nav menu hover/active state — override XStore's default accent color
   (#5260fe, its theme-wide blue) on the underline/highlight, not just the
   idle text color set above. */
#masthead .main-navigation a:hover,
#masthead .main-navigation a:focus,
#masthead .main-navigation .current-menu-item > a,
#masthead nav a:hover,
.site-header nav a:hover,
.header-main nav a:hover,
.etheme-elementor-nav-menu-item-parent:hover,
.etheme-elementor-nav-menu .item-link:hover{
  color: var(--golivo-terracotta-deep) !important;
  fill: var(--golivo-terracotta-deep) !important;
}
/* The animated hover underline (XStore's "e--animation-slide" effect)
   reads its color from `fill`, not `color` — this is what was still
   showing as a dark/purple bar even after the text itself turned right.
   Broadened further + overriding the CSS custom properties XStore/
   Elementor likely source this color from, in case a specific selector
   is still losing a specificity fight somewhere we haven't found yet. */
.e--animation-slide,
.e--pointer-overline,
.etheme-elementor-nav-menu-item-parent .elementor-item,
.etheme-elementor-nav-menu .elementor-item{
  fill: var(--golivo-terracotta-deep) !important;
}
:root{
  --e-global-color-accent: var(--golivo-terracotta-deep);
  --e-global-color-primary: var(--golivo-terracotta-deep);
}

#masthead .main-navigation a:hover::after,
#masthead .main-navigation .current-menu-item > a::after,
#masthead nav a:hover::after{
  background-color: var(--golivo-terracotta-deep) !important;
  border-color: var(--golivo-terracotta-deep) !important;
}