/*
Theme Name: Astra Child
Template: astra
Version: 1.0.1
Description: Astra child theme with light/dark mode support
*/

/* ============================================================
   SMOOTH TRANSITIONS — applied globally so switching feels fluid
   ============================================================ */
body,
#masthead,
.ast-primary-header-bar,
.main-header-bar,
#content,
#colophon,
.footer-widget-area,
.site-below-footer-wrap,
.ast-above-footer-wrap,
.wp-block-uagb-container,
.uagb-container-inner-blocks-wrap,
.wp-block-uagb-info-box,
.uagb-infobox__content-wrap,
.entry-content,
.sub-menu {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, fill 0.35s ease;
}

/* ============================================================
   LIGHT MODE — CSS CUSTOM PROPERTY OVERRIDES
   The Astra palette is dark by default. In light mode we flip
   the key vars so background → light, text → dark.
   ============================================================ */
html:not(.dark-mode) {
  color-scheme: light;
  /* Flip the palette: backgrounds go light, text goes dark */
  --ast-global-color-2: #1C2A3C;   /* headings: dark blue */
  --ast-global-color-3: #3A4E5C;   /* body text: slate */
  --ast-global-color-4: #EDF6F3;   /* card/section bg: mint tint */
  --ast-global-color-5: #FFFFFF;   /* page bg: white */
  --ast-global-color-6: #C8D6D2;   /* borders: muted green-gray */
  --ast-global-color-7: #F5F9F7;   /* overlay: near-white */
  --ast-global-color-8: #2A3D4E;   /* misc dark text */

  /* Astra internal vars that reference palette */
  --ast-code-block-background: #F0F5F3;
  --ast-comment-inputs-background: #FFFFFF;
  --ast-global-dark-bg-style: #FFFFFF;
  --ast-global-dark-lfs: #FFFFFF;
  --ast-widget-bg-color: #F0F5F3;
  --ast-wc-container-head-bg-color: #F0F5F3;
  --ast-title-layout-bg: #FFFFFF;
  --ast-search-border-color: rgba(0,0,0,0.12);
  --ast-lifter-hover-bg: #E4EDE9;
}

/* ============================================================
   LIGHT MODE — BODY & PAGE
   ============================================================ */
html:not(.dark-mode) body {
  background-color: #FFFFFF;
  color: #3A4E5C;
}

html:not(.dark-mode) #content,
html:not(.dark-mode) .site-content,
html:not(.dark-mode) #primary,
html:not(.dark-mode) #main {
  background-color: #FFFFFF;
}

/* ============================================================
   LIGHT MODE — HEADER
   ============================================================ */
html:not(.dark-mode) #masthead,
html:not(.dark-mode) .ast-primary-header-bar,
html:not(.dark-mode) .main-header-bar,
html:not(.dark-mode) #ast-desktop-header {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

html:not(.dark-mode) .ast-nav-menu > li > .menu-link,
html:not(.dark-mode) .main-header-menu .menu-link {
  color: #1C2A3C !important;
}
html:not(.dark-mode) .ast-nav-menu > li > .menu-link:hover,
html:not(.dark-mode) .main-header-menu .menu-link:hover,
html:not(.dark-mode) .main-header-menu .current-menu-item > .menu-link {
  color: #0FAF9F !important;
}

/* Site title / logo text if any */
html:not(.dark-mode) .site-title a,
html:not(.dark-mode) .ast-site-identity .site-title a {
  color: #1C2A3C !important;
}

/* Dropdown */
html:not(.dark-mode) .sub-menu {
  background-color: #FFFFFF !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
html:not(.dark-mode) .sub-menu .menu-link {
  color: #3A4E5C !important;
  border-bottom-color: rgba(0,0,0,0.05) !important;
}
html:not(.dark-mode) .sub-menu .menu-link:hover {
  color: #0FAF9F !important;
  background-color: #F5F9F7 !important;
}

/* Mobile header */
html:not(.dark-mode) .ast-mobile-header-wrap,
html:not(.dark-mode) #ast-mobile-site-navigation,
html:not(.dark-mode) #ast-mobile-header {
  background-color: #FFFFFF !important;
}
html:not(.dark-mode) .ast-mobile-header-wrap .menu-link,
html:not(.dark-mode) #ast-mobile-site-navigation .menu-link {
  color: #1C2A3C !important;
  border-bottom-color: rgba(0,0,0,0.06) !important;
}
html:not(.dark-mode) .ast-menu-toggle span,
html:not(.dark-mode) .ast-menu-toggle span::before,
html:not(.dark-mode) .ast-menu-toggle span::after {
  background-color: #1C2A3C;
}

/* ============================================================
   LIGHT MODE — UAGB CONTAINERS
   ============================================================ */
html:not(.dark-mode) .wp-block-uagb-container:not([style*="background"]) {
  background-color: #FFFFFF;
}
/* Containers that had hardcoded dark backgrounds — flip to light */
html:not(.dark-mode) .uagb-block-66fe1c83,
html:not(.dark-mode) .uagb-block-a31af704,
html:not(.dark-mode) .uagb-block-5755988a,
html:not(.dark-mode) .uagb-block-d0e3ffef,
html:not(.dark-mode) .uagb-block-9dbb18d7,
html:not(.dark-mode) .uagb-block-84e20ad5,
html:not(.dark-mode) .uagb-block-1fd5f659,
html:not(.dark-mode) .uagb-block-de5ccef8,
html:not(.dark-mode) .uagb-block-7c9b606a,
html:not(.dark-mode) .uagb-block-1b57b157,
html:not(.dark-mode) .uagb-block-692a02bd,
html:not(.dark-mode) .uagb-block-d41716ea,
html:not(.dark-mode) .uagb-block-47642bea,
html:not(.dark-mode) .uagb-block-7262fc64,
html:not(.dark-mode) .uagb-block-41f9834f,
html:not(.dark-mode) .uagb-block-415a0380,
html:not(.dark-mode) .uagb-block-5ec9849a,
html:not(.dark-mode) .uagb-block-21680daa {
  background-color: #FFFFFF !important;
}

/* ============================================================
   LIGHT MODE — UAGB INFO BOXES
   ============================================================ */
html:not(.dark-mode) .uagb-infobox__content-wrap .uagb-ifb-title,
html:not(.dark-mode) .wp-block-uagb-info-box .uagb-ifb-title,
html:not(.dark-mode) .uagb-ifb-title {
  color: #1C2A3C !important;
}
html:not(.dark-mode) .uagb-infobox__content-wrap .uagb-ifb-desc,
html:not(.dark-mode) .wp-block-uagb-info-box .uagb-ifb-desc,
html:not(.dark-mode) .uagb-ifb-desc {
  color: #3A4E5C !important;
}
html:not(.dark-mode) .uagb-infobox__content-wrap .uagb-ifb-icon-wrap svg,
html:not(.dark-mode) .uagb-ifb-content .uagb-ifb-icon-wrap svg {
  fill: #21B4A6 !important;
  color: #21B4A6 !important;
}

/* ============================================================
   LIGHT MODE — UAGB HEADINGS
   ============================================================ */
html:not(.dark-mode) .wp-block-uagb-advanced-heading .uagb-heading-text,
html:not(.dark-mode) .wp-block-uagb-advanced-heading .uagb-sub-heading-text {
  color: #1C2A3C !important;
}

/* ============================================================
   LIGHT MODE — GENERAL HEADINGS & TEXT
   ============================================================ */
html:not(.dark-mode) h1, html:not(.dark-mode) h2, html:not(.dark-mode) h3,
html:not(.dark-mode) h4, html:not(.dark-mode) h5, html:not(.dark-mode) h6 {
  color: #1C2A3C;
}
html:not(.dark-mode) p {
  color: #3A4E5C;
}
html:not(.dark-mode) .entry-content a:not(.wp-block-button__link):not(.uagb-infobox-cta-link) {
  color: #0FAF9F;
}

/* ============================================================
   LIGHT MODE — FOOTER
   ============================================================ */
html:not(.dark-mode) #colophon,
html:not(.dark-mode) .footer-widget-area,
html:not(.dark-mode) .site-below-footer-wrap,
html:not(.dark-mode) .ast-footer-wrap,
html:not(.dark-mode) .ast-above-footer-wrap {
  background-color: #F0F5F3 !important;
  color: #3A4E5C !important;
}
html:not(.dark-mode) .footer-sml-navigation li a,
html:not(.dark-mode) .ast-footer-copyright,
html:not(.dark-mode) .ast-footer-copyright a {
  color: rgba(0,0,0,0.45) !important;
}

/* ============================================================
   LIGHT MODE — INPUTS & FORMS
   ============================================================ */
html:not(.dark-mode) input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
html:not(.dark-mode) textarea,
html:not(.dark-mode) select {
  background-color: #FFFFFF !important;
  color: #1C2A3C !important;
  border-color: rgba(0,0,0,0.15) !important;
}
html:not(.dark-mode) label,
html:not(.dark-mode) legend {
  color: #3A4E5C !important;
}

/* ============================================================
   LIGHT MODE — UAGB SHAPE DIVIDERS
   ============================================================ */
html:not(.dark-mode) .uagb-container__shape-fill {
  fill: #FFFFFF !important;
}

/* ============================================================
   DARK MODE — CSS CUSTOM PROPERTY OVERRIDES
   ============================================================ */
html.dark-mode {
  color-scheme: dark;
  --ast-code-block-background: #1C2A3C;
  --ast-comment-inputs-background: #1C2A3C;
  --ast-global-dark-bg-style: #1C2A3C;
  --ast-global-dark-lfs: #1C2A3C;
  --ast-widget-bg-color: #1C2A3C;
  --ast-wc-container-head-bg-color: #1C2A3C;
  --ast-title-layout-bg: #1C2A3C;
  --ast-search-border-color: rgba(255,255,255,0.15);
  --ast-lifter-hover-bg: #2a3d54;
}

/* ============================================================
   DARK MODE — BODY & PAGE BACKGROUND
   ============================================================ */
html.dark-mode body {
  background-color: #111A28;
  color: #c8d8d5;
}

html.dark-mode #content,
html.dark-mode .site-content,
html.dark-mode #primary,
html.dark-mode #main {
  background-color: #111A28;
}

/* ============================================================
   DARK MODE — HEADER
   ============================================================ */
html.dark-mode #masthead,
html.dark-mode .ast-primary-header-bar,
html.dark-mode .main-header-bar,
html.dark-mode #ast-desktop-header {
  background-color: #0e1e2e !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

html.dark-mode .ast-nav-menu > li > .menu-link,
html.dark-mode .main-header-menu .menu-link {
  color: rgba(255,255,255,0.75) !important;
}
html.dark-mode .ast-nav-menu > li > .menu-link:hover,
html.dark-mode .main-header-menu .menu-link:hover,
html.dark-mode .main-header-menu .current-menu-item > .menu-link {
  color: #21B4A6 !important;
}

/* Dropdown */
html.dark-mode .sub-menu {
  background-color: #1C2A3C !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .sub-menu .menu-link {
  color: rgba(255,255,255,0.8) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
html.dark-mode .sub-menu .menu-link:hover {
  color: #21B4A6 !important;
  background-color: rgba(255,255,255,0.04) !important;
}

/* Mobile header */
html.dark-mode .ast-mobile-header-wrap,
html.dark-mode #ast-mobile-site-navigation,
html.dark-mode #ast-mobile-header {
  background-color: #0e1e2e !important;
}
html.dark-mode .ast-mobile-header-wrap .menu-link,
html.dark-mode #ast-mobile-site-navigation .menu-link {
  color: rgba(255,255,255,0.8) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
html.dark-mode .ast-menu-toggle span,
html.dark-mode .ast-menu-toggle span::before,
html.dark-mode .ast-menu-toggle span::after {
  background-color: #EDF6F3;
}

/* ============================================================
   DARK MODE — UAGB CONTAINERS
   ============================================================ */
html.dark-mode .wp-block-uagb-container:not([style*="background"]) {
  background-color: #111A28;
}
html.dark-mode .uagb-block-66fe1c83,
html.dark-mode .uagb-block-a31af704,
html.dark-mode .uagb-block-5755988a,
html.dark-mode .uagb-block-d0e3ffef,
html.dark-mode .uagb-block-9dbb18d7,
html.dark-mode .uagb-block-84e20ad5,
html.dark-mode .uagb-block-1fd5f659,
html.dark-mode .uagb-block-de5ccef8,
html.dark-mode .uagb-block-7c9b606a,
html.dark-mode .uagb-block-1b57b157,
html.dark-mode .uagb-block-692a02bd,
html.dark-mode .uagb-block-d41716ea,
html.dark-mode .uagb-block-47642bea,
html.dark-mode .uagb-block-7262fc64,
html.dark-mode .uagb-block-41f9834f,
html.dark-mode .uagb-block-415a0380,
html.dark-mode .uagb-block-5ec9849a,
html.dark-mode .uagb-block-21680daa {
  background-color: #111A28 !important;
}

/* ============================================================
   DARK MODE — UAGB INFO BOXES
   ============================================================ */
html.dark-mode .uagb-infobox__content-wrap .uagb-ifb-title,
html.dark-mode .wp-block-uagb-info-box .uagb-ifb-title,
html.dark-mode .uagb-ifb-title {
  color: #EDF6F3 !important;
}
html.dark-mode .uagb-infobox__content-wrap .uagb-ifb-desc,
html.dark-mode .wp-block-uagb-info-box .uagb-ifb-desc,
html.dark-mode .uagb-ifb-desc {
  color: #b8ccc8 !important;
}
html.dark-mode .uagb-infobox__content-wrap .uagb-ifb-icon-wrap svg,
html.dark-mode .uagb-ifb-content .uagb-ifb-icon-wrap svg {
  fill: rgba(255,255,255,0.7) !important;
  color: rgba(255,255,255,0.7) !important;
}

/* ============================================================
   DARK MODE — UAGB HEADINGS
   ============================================================ */
html.dark-mode .wp-block-uagb-advanced-heading .uagb-heading-text,
html.dark-mode .wp-block-uagb-advanced-heading .uagb-sub-heading-text {
  color: #EDF6F3 !important;
}

/* ============================================================
   DARK MODE — GENERAL HEADINGS & TEXT
   ============================================================ */
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 {
  color: #EDF6F3;
}
html.dark-mode p {
  color: #c8d8d5;
}
html.dark-mode .entry-content a:not(.wp-block-button__link):not(.uagb-infobox-cta-link) {
  color: #21B4A6;
}

/* ============================================================
   DARK MODE — FOOTER
   ============================================================ */
html.dark-mode #colophon,
html.dark-mode .footer-widget-area,
html.dark-mode .site-below-footer-wrap,
html.dark-mode .ast-footer-wrap,
html.dark-mode .ast-above-footer-wrap {
  background-color: #0e1e2e !important;
  color: #EDF6F3 !important;
}
html.dark-mode .footer-sml-navigation li a,
html.dark-mode .ast-footer-copyright,
html.dark-mode .ast-footer-copyright a {
  color: rgba(255,255,255,0.5) !important;
}

/* ============================================================
   DARK MODE — INPUTS & FORMS
   ============================================================ */
html.dark-mode input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
html.dark-mode textarea,
html.dark-mode select {
  background-color: #1C2A3C !important;
  color: #EDF6F3 !important;
  border-color: rgba(255,255,255,0.15) !important;
}
html.dark-mode label,
html.dark-mode legend {
  color: #c8d8d5 !important;
}

/* ============================================================
   DARK MODE — UAGB SHAPE DIVIDERS
   ============================================================ */
html.dark-mode .uagb-container__shape-fill {
  fill: #111A28 !important;
}
html.dark-mode .uagb-block-df8ee77f .uagb-container__shape-fill {
  fill: #111A28 !important;
}