/*
Theme Name: XS Lighting (Astra Child)
Theme URI: https://xslighting.com
Description: Astra child theme with custom XS Lighting service and enquiry page layouts.
Author: Gecko
Author URI: https://gecko.rent
Version: 1.7.7
Template: astra
Text Domain: xs-lighting
*/

/*
  Keep this file intentionally light so Astra controls global styling,
  typography, header, footer, and Customizer settings.
*/

.ast-site-identity .custom-logo-link img,
.site-logo-img .custom-logo-link img,
.site-logo-img img.custom-logo {
  width: auto;
  max-height: 56px;
  object-fit: contain;
}

.xs-logo-fallback {
  display: inline-block;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  color: inherit;
  text-decoration: none;
}

/* Shared XS header palette. The page body receives xs-theme-red/green/blue
 * from includes/theme-palette.php; red is the safe default for ordinary
 * pages, posts, archives, and any design added later. */
body.xs-theme-red,
body.xs-theme-green,
body.xs-theme-blue {
  --xs-header-text: #edf3f8;
  --xs-header-muted: #b8c6d1;
  --xs-header-cta: #3a8ee8;
  --xs-header-bg-start: #14283b;
  --xs-header-bg-end: #1f3448;
}

body.xs-theme-red {
  --xs-header-text: #fff5f5;
  --xs-header-muted: #e9c9cb;
  --xs-header-cta: #ff5d63;
  --xs-header-bg-start: #2a0d11;
  --xs-header-bg-end: #45141a;
  --xs-header-button-ink: #9e1f24;
}

body.xs-theme-green {
  --xs-header-text: #f1fff7;
  --xs-header-muted: #c2ddce;
  --xs-header-cta: #2eae6d;
  --xs-header-bg-start: #102b20;
  --xs-header-bg-end: #194533;
  --xs-header-button-ink: #145f3b;
}

body.xs-theme-blue {
  --xs-header-text: #edf5ff;
  --xs-header-muted: #c2d2e2;
  --xs-header-cta: #3a8ee8;
  --xs-header-bg-start: #14283b;
  --xs-header-bg-end: #1f3448;
  --xs-header-button-ink: #164f86;
}

body.xs-theme-red .ast-primary-header-bar,
body.xs-theme-red .main-header-bar,
body.xs-theme-green .ast-primary-header-bar,
body.xs-theme-green .main-header-bar,
body.xs-theme-blue .ast-primary-header-bar,
body.xs-theme-blue .main-header-bar {
  background: linear-gradient(90deg, var(--xs-header-bg-start), var(--xs-header-bg-end), var(--xs-header-bg-start)) !important;
}

body.xs-theme-red .site-title a,
body.xs-theme-red .ast-site-title-wrap a,
body.xs-theme-green .site-title a,
body.xs-theme-green .ast-site-title-wrap a,
body.xs-theme-blue .site-title a,
body.xs-theme-blue .ast-site-title-wrap a,
body.xs-theme-red .main-header-menu > .menu-item > .menu-link,
body.xs-theme-red .ast-builder-menu-1 .menu-item > .menu-link,
body.xs-theme-green .main-header-menu > .menu-item > .menu-link,
body.xs-theme-green .ast-builder-menu-1 .menu-item > .menu-link,
body.xs-theme-blue .main-header-menu > .menu-item > .menu-link,
body.xs-theme-blue .ast-builder-menu-1 .menu-item > .menu-link {
  color: var(--xs-header-text) !important;
}

body.xs-theme-red .main-header-menu > .menu-item:hover > .menu-link,
body.xs-theme-red .main-header-menu > .menu-item.current-menu-item > .menu-link,
body.xs-theme-red .ast-builder-menu-1 .menu-item:hover > .menu-link,
body.xs-theme-red .ast-builder-menu-1 .current-menu-item > .menu-link,
body.xs-theme-green .main-header-menu > .menu-item:hover > .menu-link,
body.xs-theme-green .main-header-menu > .menu-item.current-menu-item > .menu-link,
body.xs-theme-green .ast-builder-menu-1 .menu-item:hover > .menu-link,
body.xs-theme-green .ast-builder-menu-1 .current-menu-item > .menu-link,
body.xs-theme-blue .main-header-menu > .menu-item:hover > .menu-link,
body.xs-theme-blue .main-header-menu > .menu-item.current-menu-item > .menu-link,
body.xs-theme-blue .ast-builder-menu-1 .menu-item:hover > .menu-link,
body.xs-theme-blue .ast-builder-menu-1 .current-menu-item > .menu-link {
  color: var(--xs-header-cta) !important;
}

body.xs-theme-red .ast-custom-button,
body.xs-theme-red .ast-custom-button-link,
body.xs-theme-green .ast-custom-button,
body.xs-theme-green .ast-custom-button-link,
body.xs-theme-blue .ast-custom-button,
body.xs-theme-blue .ast-custom-button-link {
  color: var(--xs-header-cta) !important;
  border-color: var(--xs-header-cta) !important;
}

body.xs-theme-red .ast-mobile-menu-trigger-outline,
body.xs-theme-green .ast-mobile-menu-trigger-outline,
body.xs-theme-blue .ast-mobile-menu-trigger-outline {
  color: var(--xs-header-cta) !important;
  border-color: var(--xs-header-cta) !important;
}

/* Astra can use either the outlined or minimal mobile trigger depending on
 * the header builder settings. Keep both variants on the active palette. */
body.xs-theme-red .menu-toggle,
body.xs-theme-green .menu-toggle,
body.xs-theme-blue .menu-toggle {
  color: var(--xs-header-cta) !important;
  border-color: var(--xs-header-cta) !important;
}

body.xs-theme-red .ast-mobile-menu-trigger-outline .ast-mobile-svg,
body.xs-theme-green .ast-mobile-menu-trigger-outline .ast-mobile-svg,
body.xs-theme-blue .ast-mobile-menu-trigger-outline .ast-mobile-svg {
  fill: var(--xs-header-cta) !important;
}

body.xs-theme-red .menu-toggle .ast-mobile-svg,
body.xs-theme-green .menu-toggle .ast-mobile-svg,
body.xs-theme-blue .menu-toggle .ast-mobile-svg {
  color: var(--xs-header-cta) !important;
  fill: var(--xs-header-cta) !important;
}

body.xs-theme-red .ast-mobile-header-content,
body.xs-theme-green .ast-mobile-header-content,
body.xs-theme-blue .ast-mobile-header-content {
  background: var(--xs-header-bg-start) !important;
}

body.xs-theme-red .ast-builder-menu-mobile .main-navigation .menu-link,
body.xs-theme-green .ast-builder-menu-mobile .main-navigation .menu-link,
body.xs-theme-blue .ast-builder-menu-mobile .main-navigation .menu-link {
  color: var(--xs-header-text) !important;
  background-color: transparent !important;
}

/* Pair menu surfaces with their light text. Astra's light/dark presets differ
 * between installations, including the nested mobile menu background. These
 * rules only own colours; Astra retains the header and menu layout. */
body:is(.xs-theme-red, .xs-theme-green, .xs-theme-blue) #masthead .main-header-menu .sub-menu,
body:is(.xs-theme-red, .xs-theme-green, .xs-theme-blue) #masthead .ast-builder-menu-mobile .main-header-menu {
  background: var(--xs-header-bg-start) !important;
  color: var(--xs-header-text) !important;
  border-color: var(--xs-header-cta) !important;
}

body:is(.xs-theme-red, .xs-theme-green, .xs-theme-blue) #masthead .main-header-menu .sub-menu .menu-link,
body:is(.xs-theme-red, .xs-theme-green, .xs-theme-blue) #masthead .ast-builder-menu-mobile .menu-link {
  background: transparent !important;
  color: var(--xs-header-text) !important;
  border-color: rgba(255, 255, 255, .16) !important;
}

body:is(.xs-theme-red, .xs-theme-green, .xs-theme-blue) #masthead .main-header-menu .sub-menu :is(.menu-item:hover, .menu-item:focus-within, .current-menu-item) > .menu-link,
body:is(.xs-theme-red, .xs-theme-green, .xs-theme-blue) #masthead .ast-builder-menu-mobile :is(.menu-item:hover, .menu-item:focus-within, .current-menu-item) > .menu-link {
  background: var(--xs-header-bg-end) !important;
  color: var(--xs-header-text) !important;
}

body:is(.xs-theme-red, .xs-theme-green, .xs-theme-blue) #masthead .ast-menu-toggle {
  background: transparent !important;
  color: var(--xs-header-text) !important;
  border-color: var(--xs-header-text) !important;
}

body:is(.xs-theme-red, .xs-theme-green, .xs-theme-blue) #masthead :is(.menu-link, .ast-menu-toggle):focus-visible {
  outline: 2px solid var(--xs-header-text);
  outline-offset: -3px;
}

/* Keep production's light header buttons, with a darker service accent for
 * readable text. The mobile Astra preset otherwise supplies a blue fill. */
body:is(.xs-theme-red, .xs-theme-green, .xs-theme-blue) #masthead :is(.ast-custom-button, .menu-toggle) {
  background: #f3f7ff !important;
  color: var(--xs-header-button-ink) !important;
  border-color: var(--xs-header-button-ink) !important;
}

body:is(.xs-theme-red, .xs-theme-green, .xs-theme-blue) #masthead .menu-toggle .ast-mobile-svg {
  color: var(--xs-header-button-ink) !important;
  fill: currentColor !important;
}

body:is(.xs-theme-red, .xs-theme-green, .xs-theme-blue) #masthead .ast-custom-button-link:is(:hover, :focus-visible) .ast-custom-button {
  background: var(--xs-header-button-ink) !important;
  color: #fff !important;
}