/* Common hero containers (adjust to your theme’s actual classes) */
header.hero,
.modular-hero,
.section.hero,
.hero,
.modular .hero,
.hero-section {
  min-height: 60vh;                 /* ensure there's height */
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center bottom !important; /* keep bottom visible */
}

/* If the background is applied to a child element */
header.hero .hero-background,
.modular-hero .hero-background {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center bottom !important;
}

/* If the theme injects inline styles you can’t out-specify easily */
[style*="background-image"] {
  background-position: center bottom !important;
  background-size: cover !important;
}

.header-transparent #header:not(.scrolled) {
    background: rgba(255, 255, 255, .20);
}

.blog-listing .card {
  box-shadow: 0 10px 45px -9px rgba(0, 0, 0, .4);
}

/* For menu items */
/* ---- Tweak these to taste ---- */
:root{
  /* Top of page (transparent header) */
  --nav-top:          #ffffff;  /* normal */
  --nav-top-hover:    #ffd166;  /* hover/focus */
  --nav-top-active:   #ffffff;  /* current page */

  /* After scroll (solid/white header) */
  --nav-solid:        #111111;  /* normal */
  --nav-solid-hover:  #0f6ab4;  /* hover/focus */
  --nav-solid-active: #111111;  /* current page */
}

/* ===== DESKTOP — transparent header at top ===== */
#header .dropmenu > ul > li > a { color: var(--nav-top) !important; }
#header .dropmenu ul li > a:hover,
#header .dropmenu ul li > a:focus { color: var(--nav-top-hover) !important; }

/* Current page (don’t use hover colour) */
#header .dropmenu ul li.active > a,
#header .dropmenu ul li.selected > a,
#header .dropmenu ul li.current > a { color: var(--nav-top-active) !important; }

/* ===== DESKTOP — after scroll (solid header) ===== */
#header.scrolled .dropmenu > ul > li > a { color: var(--nav-solid) !important; }
#header.scrolled .dropmenu ul li > a:hover,
#header.scrolled .dropmenu ul li > a:focus { color: var(--nav-solid-hover) !important; }

/* Current page after scroll */
#header.scrolled .dropmenu ul li.active > a,
#header.scrolled .dropmenu ul li.selected > a,
#header.scrolled .dropmenu ul li.current > a { color: var(--nav-solid-active) !important; }

/* Logo colours to match (optional) */
#header .logo a { color: var(--nav-top) !important; }
#header.scrolled .logo a { color: var(--nav-solid) !important; }

/* ===== MOBILE (optional) ===== */
.mobile-menu .treemenu a { color: var(--nav-solid) !important; }
.mobile-menu .treemenu a:hover,
.mobile-menu .treemenu a:focus { color: var(--nav-solid-hover) !important; }
.mobile-menu .treemenu li.active > a,
.mobile-menu .treemenu li.selected > a,
.mobile-menu .treemenu li.current > a { color: var(--nav-solid-active) !important; }