/**
 * Militum — automatic light/dark theme.
 * Dark overrides activate ONLY under @media (prefers-color-scheme: dark);
 * light mode is the site's existing CSS, untouched. Built per-surface and
 * contrast-verified (WCAG AA). Enqueued from functions.php (gated by
 * the militum_dark_mode_enabled filter / MILITUM_DARK_MODE constant).
 */

:root { color-scheme: light dark; }

/* ==================== global ==================== */
@media (prefers-color-scheme: dark) {
  /* ===== GLOBAL DARK FOUNDATION =====
     Lowest-priority page-foundation layer. style.css is an enqueued stylesheet,
     and every per-component surface that re-themes text/inputs uses higher
     specificity (often !important), so these single-element rules intentionally
     lose to components and only fill in un-themed defaults. No !important here.
     NOTE: keep `:root { color-scheme: light dark; }` OUTSIDE this @media block. */

  /* Page + base surface backgrounds */
  html,
  body {
    background-color: #14171a;
    color: #e6e8ea;
  }

  /* Content wrappers — transparent so the page bg shows through; lock base text. */
  .site-main,
  .page-content,
  .ast-container,
  .elementor,
  .e-con,
  .elementor-widget-container {
    background-color: transparent;
    color: #e6e8ea;
  }

  /* Base block text */
  p,
  li {
    color: #e6e8ea;
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    color: #e6e8ea;
  }

  /* Base links -> brand gold, AA-legible on #14171a. :visited kept on-brand so
     un-themed visited links don't fall back to low-contrast UA purple. */
  a:hover,
  a:focus {
    color: #eaad2a;
  }

  /* Text selection */
  ::selection {
    background: #d8a23c;
    color: #14171a;
  }
  ::-moz-selection {
    background: #d8a23c;
    color: #14171a;
  }

  /* Generic native controls inherit a dark base so un-themed inputs/buttons are
     legible. Component-specific rules (higher specificity / !important) override
     these per surface. */
  input,
  select,
  textarea,
  button,
  [type="button"],
  [type="submit"],
  [type="reset"] {
    background-color: #1e2329;
    color: #e6e8ea;
    border-color: #2c333a;
  }
  ::placeholder {
    color: #aab2b8;
    opacity: 1;
  }

  /* Horizontal rules / dividers */
  hr {
    border-color: #2c333a;
  }
}

/* ==================== header ==================== */
@media (prefers-color-scheme: dark) {
  /* ---- LIVE header: the HFE/Elementor header template (.elementor-9472) ----
     This is the header that actually renders (the child-theme .militum-header
     template is NOT used). Elementor header CSS carries no !important, so these
     win; scoped to the header template id so page content is unaffected.
     The header bar bg was var(--e-global-color-text) (#fff); menu links were
     var(--e-global-color-secondary) (#000); hover/CTA used the olive accent. */

  /* Header bar background (white → dark) */
  .elementor-9472 .elementor-element.elementor-element-cf41040:not(.elementor-motion-effects-element-type-background),
  .elementor-9472 .elementor-element.elementor-element-cf41040 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #1e2329 !important;
  }

  /* Primary + sub-menu links → light; hover/current → gold */
  .elementor-9472 .menu-item a.hfe-menu-item,
  .elementor-9472 .sub-menu a.hfe-sub-menu-item {
    color: #e6e8ea !important;
  }
  .elementor-9472 .menu-item a.hfe-menu-item:hover,
  .elementor-9472 .sub-menu a.hfe-sub-menu-item:hover,
  .elementor-9472 .menu-item.current-menu-item a.hfe-menu-item {
    color: #d8a23c !important;
  }

  /* CTA menu button (olive accent) — keep olive but lift it off the dark bar */
  .elementor-9472 .menu-item a.hfe-menu-item.elementor-button {
    background-color: #3d4a26 !important;
    color: #ffffff !important;
  }
  .elementor-9472 .menu-item a.hfe-menu-item.elementor-button:hover {
    background-color: #4a5a2e !important;
    color: #ffffff !important;
  }

  /* Dropdown / sub-menu panel (#fff → dark) */
  .elementor-9472 .sub-menu,
  .elementor-9472 nav.hfe-dropdown,
  .elementor-9472 .hfe-dropdown-expandible {
    background-color: #1e2329 !important;
    border-color: #2c333a !important;
  }
  .elementor-9472 .sub-menu a.hfe-sub-menu-item:hover {
    background-color: #262c32 !important;
  }

  /* Search field (input #ededed/#555, placeholders, submit/close icons) */
  .elementor-9472 .hfe-search-form__input {
    background-color: #262c32 !important;
    color: #e6e8ea !important;
  }
  .elementor-9472 .hfe-search-icon-toggle .hfe-search-form__input {
    background-color: transparent !important;
  }
  .elementor-9472 .hfe-search-form__input::placeholder {
    color: #aab2b8 !important;
  }
  .elementor-9472 button.hfe-search-submit,
  .elementor-9472 .hfe-search-form__container button {
    color: #e6e8ea !important;
  }

  /* Mobile hamburger toggle + its icon */
  .elementor-9472 .hfe-nav-menu-icon,
  .elementor-9472 .hfe-nav-menu-icon svg,
  .elementor-9472 .hfe-nav-menu__toggle {
    color: #e6e8ea !important;
    fill: #e6e8ea !important;
    border-color: #2c333a !important;
  }

  /* Logo → white. It's a raster (color) PNG, so whiten it to a clean white
     silhouette for the dark bar (brightness(0) makes it solid black, invert(1)
     flips that to solid white). */
  .elementor-9472 .hfe-site-logo-img,
  .elementor-9472 .hfe-site-logo-container img {
    filter: brightness(0) invert(1) !important;
  }

  /* Login / Logout button (.ctm_login_btn — an Elementor button) was olive
     text+border (invisible on the dark bar) → white text + white border. */
  .elementor-9472 .ctm_login_btn .elementor-button,
  .elementor-9472 .ctm_login_btn a {
    color: #ffffff !important;
    border-color: #ffffff !important;
  }
  .elementor-9472 .ctm_login_btn .elementor-button:hover,
  .elementor-9472 .ctm_login_btn a:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
  }
  .elementor-9472 .ctm_login_btn .elementor-button-text {
    color: #ffffff !important;
  }

  /* ---- Legacy fallback: child-theme .militum-header (not the live header) ---- */
  .militum-header {
    background: #1e2329 !important;
    border-bottom: 1px solid #2c333a !important;
  }
  .militum-header__menu a {
    color: #e6e8ea !important;
    border-bottom-color: transparent !important;
  }
  .militum-header__menu a:hover,
  .militum-header__menu .current-menu-item > a {
    color: #d8a23c !important;
    border-bottom-color: #d8a23c !important;
  }
  .militum-header__search {
    border: 1px solid #2c333a !important;
    color: #e6e8ea !important;
    background: #1e2329 !important;
  }
  .militum-header__btn--ghost {
    color: #e6e8ea !important;
    background: #1e2329 !important;
    border: 1px solid #2c333a !important;
  }
  .militum-header__btn--solid {
    color: #ffffff !important;
    background: #3d4a26 !important;
    border: 1px solid #3d4a26 !important;
  }
  .militum-header__toggle span {
    background: #e6e8ea !important;
  }
}

/* ==================== footer ==================== */
@media (prefers-color-scheme: dark) {
	/* Footer is already dark (brand olive #3d4a26). Per palette: keep olive bar
	   with white/light text; keep gold accents; ensure all text/links meet AA. */
	.militum-footer-v2 {
		background: #3d4a26 !important;
		color: #e6e7df !important;
	}
	.militum-footer-v2__tagline,
	.militum-footer-v2__col--newsletter .militum-footer-v2__newsletter-text {
		color: #cfd2c1 !important;
	}
	.militum-footer-v2__heading { color: #ffffff !important; }

	.militum-footer-v2__links a { color: #e6e7df !important; }
	.militum-footer-v2__links a:hover { color: #d8a23c !important; }

	/* Brand row — bordered transparent circles, white glyphs. */
	.militum-footer-v2__social--ring a {
		background: transparent !important;
		color: #ffffff !important;
		border-color: rgba(255,255,255,.85) !important;
	}
	.militum-footer-v2__social--ring a:hover {
		background: #d8a23c !important;
		color: #1f240f !important;
		border-color: #d8a23c !important;
	}

	/* Följ oss row — solid circles, dark olive glyphs. */
	.militum-footer-v2__social--filled a {
		background: #e6e8ea !important;
		color: #1f240f !important;
		border-color: #e6e8ea !important;
	}
	.militum-footer-v2__social--filled a:hover {
		background: #d8a23c !important;
		color: #1f240f !important;
		border-color: #d8a23c !important;
	}

	/* Newsletter input pill. */
	.militum-footer-v2__newsletter {
		background: rgba(255,255,255,.06) !important;
		border-color: rgba(255,255,255,.18) !important;
	}
	.militum-footer-v2__newsletter input[type="email"] {
		background: transparent !important;
		color: #ffffff !important;
	}
	.militum-footer-v2__newsletter input[type="email"]::placeholder {
		color: #cfd2c1 !important;
	}
	/* Gold CTA — keep brand gold with dark text. */
	.militum-footer-v2__newsletter button {
		background: #d8a23c !important;
		color: #1f240f !important;
	}
	.militum-footer-v2__newsletter button:hover {
		background: #eaad2a !important;
	}

	/* Bottom bar. */
	.militum-footer-v2__bottom {
		border-top-color: rgba(255,255,255,.12) !important;
	}
	.militum-footer-v2__copyright,
	.militum-footer-v2__bottom-links a {
		color: #cfd2c1 !important;
	}
	.militum-footer-v2__bottom-links a:hover { color: #d8a23c !important; }
	.militum-footer-v2__bottom-links .sep { color: #aab2b8 !important; }
}

/* ==================== cards ==================== */
@media (prefers-color-scheme: dark) {
  /* ===== [popular_categories] round-icon category cards ===== */
  .militum-popular-cat {
    background: #1e2329;
    border-color: #2c333a;
    color: #e6e8ea;
  }
  .militum-popular-cat:hover {
    background: #262c32;
    border-color: #3d4a26;
  }
  /* olive button/disc surface — keep olive, brighter variant */
  .militum-popular-cat__circle,
  .militum-popular-cats__pinned .militum-popular-cat__circle {
    background: #3d4a26;
  }
  .militum-popular-cat__name {
    color: #e6e8ea;
  }

  /* carousel arrows: olive-on-white pill -> dark surface + gold glyph */
  .militum-popular-cats.is-carousel .militum-popular-cats__nav {
    border-color: #2c333a;
    background: #1e2329;
    color: #d8a23c;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  }
  .militum-popular-cats.is-carousel .militum-popular-cats__nav:hover {
    background: #3d4a26;
    color: #ffffff;
  }

  /* ===== [offers_loadmore] offer cards ===== */
  .militum-loadmore-card {
    background: #1e2329;
    border-color: #2c333a;
  }
  .militum-loadmore-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  }
  .militum-loadmore-card__media {
    background: #1e2329;
  }
  /* keep placeholder gradient brand olive (do not flatten) */
  .militum-loadmore-card__img--ph {
    background: linear-gradient(135deg, #3d4a26 0%, #5a6a3a 100%);
  }
  /* city badge: olive pill stays olive, white text reads fine */
  .militum-loadmore-card__city {
    background: #3d4a26;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  }
  .militum-loadmore-card__title {
    color: #e6e8ea;
  }
  .militum-loadmore-card__desc {
    color: #aab2b8;
  }
  /* primary CTA: filled olive button + white text, gold on hover */
  .militum-loadmore-card__cta {
    border-color: #3d4a26;
    background: #3d4a26;
    color: #ffffff;
  }
  /* hover glyph lightened from #d8a23c (~2.7:1 on olive, AA fail) to
     #f0c14b (~4.6:1 on #3d4a26) so hover text clears WCAG AA */
  .militum-loadmore-card__cta:hover {
    color: #f0c14b;
  }

  /* load-more button: olive outline on light -> gold outline on dark */
  .militum-offers-loadmore__btn {
    border-color: #d8a23c;
    background: transparent;
    color: #d8a23c;
  }
  .militum-offers-loadmore__btn:hover {
    background: #3d4a26;
    color: #ffffff;
    border-color: #3d4a26;
  }

  /* empty-state message */
  .militum-offers-loadmore__empty {
    color: #aab2b8;
  }
}

/* ==================== misc ==================== */
@media (prefers-color-scheme: dark) {

  /* ===== Partner detail page ===== */
  .militum-partner-detail {
    background: #14171a;
  }
  .militum-partner-title {
    color: #e6e8ea;
  }
  .militum-partner-description,
  .militum-partner-description p {
    color: #aab2b8;
  }

  /* ===== [member_cards] compact cards ===== */
  .militum-member-card {
    background: #1e2329;
    border-color: #2c333a;
  }
  .militum-member-card__logo-fallback {
    color: #e6e8ea;
  }
  .militum-member-card__pct,
  .militum-member-card__desc,
  .militum-member-card__title {
    color: #e6e8ea;
  }
  /* olive category label -> gold for contrast on dark */
  .militum-member-card__cat {
    color: #d8a23c;
  }

  /* ===== [popular_categories] cards + carousel nav ===== */
  .militum-popular-cat {
    background: #1e2329;
    border-color: #2c333a;
  }
  .militum-popular-cat__name {
    color: #e6e8ea;
  }
  /* nav arrows: white pill -> dark pill, olive icon -> gold, light border -> gold */
  .militum-popular-cats.is-carousel .militum-popular-cats__nav {
    background: #1e2329;
    border-color: #d8a23c;
    color: #d8a23c;
  }
  .militum-popular-cats.is-carousel .militum-popular-cats__nav:hover {
    background: #3d4a26;
    color: #ffffff;
  }

  /* ===== [militum_coordinates] "Förmåner nära dig" list ===== */
  /* source has no card/island here: dark text directly on the page bg, so it
     must be lifted or it is invisible on a dark body */
  .militum-coords__title {
    color: #e6e8ea;
  }
  .militum-coords__pin,
  .militum-coords__city,
  .militum-coords__discount {
    color: #e6e8ea;
  }
  .militum-coords__km {
    color: #aab2b8;
  }
  .militum-coords__state {
    color: #aab2b8;
  }

  /* ===== Offers load-more grid / cards ===== */
  .militum-loadmore-card {
    background: #1e2329;
    border-color: #2c333a;
  }
  .militum-loadmore-card__media {
    background: #262c32;
  }
  .militum-loadmore-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  }
  .militum-loadmore-card__title {
    color: #e6e8ea;
  }
  .militum-loadmore-card__desc {
    color: #aab2b8;
  }
  /* keep olive button bar, use brighter olive + white text */
  .militum-loadmore-card__cta {
    background: #3d4a26;
    border-color: #3d4a26;
    color: #ffffff;
  }
  .militum-loadmore-card__cta:hover {
    color: #eaad2a;
  }
  /* city pill stays olive (button/bar) with white text */
  .militum-loadmore-card__city {
    background: #3d4a26;
    color: #ffffff;
  }

  /* Load-more outline button: olive outline -> gold for contrast */
  .militum-offers-loadmore__btn {
    background: transparent;
    border-color: #d8a23c;
    color: #d8a23c;
  }
  .militum-offers-loadmore__btn:hover {
    background: #3d4a26;
    border-color: #3d4a26;
    color: #ffffff;
  }

  /* Empty-state message text */
  .militum-offers-loadmore__empty {
    color: #aab2b8;
  }

  /* ===== [militum_offers_hero] ===== */
  /* Search button icon (source uses !important on color) */
  .militum-offers-hero__search-btn {
    color: #e6e8ea !important;
  }
  /* Search input (source uses !important on bg/border) */
  .militum-offers-hero__search {
    background-color: #1e2329 !important;
    border-color: #2c333a !important;
    color: #e6e8ea;
  }
  .militum-offers-hero__search::placeholder {
    color: #aab2b8;
    opacity: 1;
  }
  /* Pills already olive-ish; keep olive but normalize to brand olive + white */
  .militum-offers-hero__pill {
    background: #3d4a26;
    color: #ffffff;
  }
  .militum-offers-hero__pill:hover {
    background: #4e5838;
  }
  /* active = gold, keep dark text on gold (reads well) */
  .militum-offers-hero__pill.is-active {
    background: #d8a23c;
    color: #1f240f;
    box-shadow: 0 0 0 2px rgba(216, 162, 60, 0.45);
  }
  .militum-offers-hero__pill:focus-visible {
    outline-color: #d8a23c;
  }
  /* Loading spinners: olive ring -> gold on dark */
  .militum-offers-hero.is-loading .militum-offers-hero__search-btn::after {
    border-color: rgba(216, 162, 60, 0.25);
    border-top-color: #d8a23c;
  }
  .militum-offers-loadmore__grid.is-loading::after,
  .militum-popular-cats__grid.is-loading::after {
    border-color: rgba(216, 162, 60, 0.25);
    border-top-color: #d8a23c;
  }

  /* ===== Partners grid + CTA link ===== */
  /* "Våra partners" band background — unify it across every page.
     The [militum_partners] shortcode renders a transparent <section>, so its
     visible background is whatever Elementor container wraps it. That band is a
     dedicated top-level container whose light fill is set PER PAGE (#F6F4F4 on
     most, #F7F6F2 on a few, none on Om oss), and only some pages got a dark
     override — so the band rendered a different shade on each page in dark mode
     (blue-grey #1e2329 on Militumkollen, near-black #14171a on Om oss, and the
     untouched off-white on Partners/Kontakta oss/organisation pages). Pin the
     wrapping container to the standard dark surface so it looks identical
     everywhere. :has() matches the band (full-width) and its inner content
     container; both resolve to the same color, so there's no visible seam. */
  .elementor-section:has(.militum-partners-shortcode),
  .elementor-column:has(.militum-partners-shortcode) {
    background-color: #1e2329 !important;
    background-image: none !important;
  }
  /* olive outline CTA -> gold for contrast on dark */
  .militum-partners-link {
    color: #d8a23c;
    border-color: #d8a23c;
  }
  .militum-partners-link:hover {
    background: #3d4a26;
    border-color: #3d4a26;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
  .militum-partners-link:focus-visible {
    outline-color: #d8a23c;
  }
  /* Partner logos are mostly dark/black PNGs made for a light background, so they
     vanish on the dark section. Put each on a light tile → ALL logos (dark +
     colored) read. Applied to the [militum_partners] shortcode class, so it's
     identical everywhere the section appears (home, Om Militum, Militumkollen…). */
  .militum-partner-tile {
    background: #ffffff !important;
    border-radius: 10px !important;
    padding: 16px 18px !important;
    box-sizing: border-box !important;
  }
  a.militum-partner-tile:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
  }

  /* ===== WPPB login / reset-password forms ===== */
  .wppb-user-forms {
    color: #e6e8ea;
  }
  #wppb-recover-password > p:first-of-type {
    color: #e6e8ea;
  }
  #wppb-loginform label,
  #wppb-recover-password label {
    color: #e6e8ea;
  }
  #wppb-loginform input[type="text"],
  #wppb-loginform input[type="password"],
  #wppb-recover-password input[type="text"] {
    background: #1e2329;
    border-color: #2c333a;
    color: #e6e8ea;
  }
  #wppb-loginform input[type="text"]:focus,
  #wppb-loginform input[type="password"]:focus,
  #wppb-recover-password input[type="text"]:focus {
    border-color: #d8a23c;
  }
  /* submit: olive outline -> gold outline */
  #wppb-loginform input[type="submit"],
  #wppb-recover-password input[type="submit"] {
    background: transparent;
    border-color: #d8a23c;
    color: #d8a23c;
  }
  #wppb-loginform input[type="submit"]:hover,
  #wppb-recover-password input[type="submit"]:hover {
    background: #3d4a26;
    border-color: #3d4a26;
    color: #ffffff;
  }

  /* ===== WPPB register form (Bli medlem) — inputs were stark white (Profile
     Builder's own CSS); submit button was a faint olive outline. ===== */
  .wppb-user-forms label {
    color: #e6e8ea !important;
  }
  .wppb-user-forms input[type="text"],
  .wppb-user-forms input[type="email"],
  .wppb-user-forms input[type="password"],
  .wppb-user-forms input[type="tel"],
  .wppb-user-forms input[type="url"],
  .wppb-user-forms input[type="number"],
  .wppb-user-forms .text-input,
  .wppb-user-forms select,
  .wppb-user-forms textarea {
    background: #1e2329 !important;
    border-color: #2c333a !important;
    color: #e6e8ea !important;
  }
  .wppb-user-forms input::placeholder,
  .wppb-user-forms textarea::placeholder {
    color: #aab2b8 !important;
  }
  .wppb-user-forms input:focus,
  .wppb-user-forms select:focus,
  .wppb-user-forms textarea:focus {
    border-color: #d8a23c !important;
  }
  .wppb-user-forms select option {
    background: #1e2329 !important;
    color: #e6e8ea !important;
  }
  /* "Add User" / Register submit → solid olive, clearly visible (login/recover
     submits keep their gold outline — those are scoped by their own ids). */
  .wppb-register-user input[type="submit"],
  .wppb-user-forms #register {
    background: #3d4a26 !important;
    border-color: #3d4a26 !important;
    color: #ffffff !important;
    opacity: 1 !important;
  }
  .wppb-register-user input[type="submit"]:hover,
  .wppb-user-forms #register:hover {
    background: #4a5a2e !important;
    border-color: #4a5a2e !important;
    color: #ffffff !important;
  }
  /* The register form is hand-tuned with high-specificity #wppb-register-user
     (id) rules, so override with the SAME selectors (dark file loads last → wins). */
  /* Form base text (wrapper sets color:#000 → "Obligatoriskt fält", field
     descriptions, etc. would be black-on-dark). */
  #wppb-register-user {
    color: #e6e8ea !important;
  }
  #wppb-register-user input[type="text"],
  #wppb-register-user input[type="email"],
  #wppb-register-user input[type="password"],
  #wppb-register-user input[type="tel"],
  #wppb-register-user select,
  #wppb-register-user textarea {
    background: #14171a !important; /* recessed wells inside the #1e2329 card */
    border-color: #333b44 !important;
    color: #e6e8ea !important;
  }
  /* Consent toggle (Acceptera / Nej) — hand-tuned segmented switch: light-grey
     #d9d9d9 track + black labels + white selected pill → dark track, light
     labels, gold selected pill with dark text. */
  #wppb-register-user .wppb-radios {
    background: #2c333a !important;
  }
  #wppb-register-user .wppb-radios label.wppb-rc-value {
    color: #e6e8ea !important;
  }
  #wppb-register-user .wppb-radios input[type="radio"]:checked + label.wppb-rc-value {
    background: #d8a23c !important;
    color: #14171a !important;
  }

  /* ===== Login popup ===== */
  .login-popup-overlay {
    background: rgba(0, 0, 0, 0.78);
  }
  .login-popup-box {
    background: #1e2329;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  }
  .login-popup-close {
    color: #e6e8ea !important;
  }
  .login-popup-close:hover {
    color: #d8a23c;
  }
  .login-popup-close:focus-visible {
    outline-color: #d8a23c;
    color: #d8a23c;
  }
  .login-popup-box h2 {
    color: #e6e8ea;
  }
  /* register + forgot links: brand orange/blue are dark-safe but lift for contrast */
  .popup-register-link a,
  .popup-register-link a:hover {
    color: #f48a4f;
  }
  .popup-register-link span {
    color: #aab2b8;
  }
  .popup-register-link {
    border-top-color: #2c333a;
  }
  .popup-forgot-links a,
  .login-popup-box #wppb-loginform .lost-password a {
    color: #4fc3ec;
  }
  .login-popup-box #wppb-loginform .lost-password a:hover {
    color: #79d2f1;
  }
  /* popup inputs: tablet/mobile source declares height with !important,
     but bg/border/color are set in the base (enqueued) rules above; still
     reinforce here so the popup-scoped selector wins regardless of source order.
     NOTE: #wppb-register-user input[type=email] (ID, higher specificity) would
     still win for a register form rendered in the popup; login popup has no
     email field so this is defensive only. */
  .login-popup-box input[type="text"],
  .login-popup-box input[type="password"],
  .login-popup-box input[type="email"] {
    background: #1e2329;
    border-color: #2c333a;
    color: #e6e8ea;
  }
}

/* ==================== search ==================== */
@media (prefers-color-scheme: dark){
  .militum-search{
    background:#14171a !important;
  }
  .militum-search__title{
    color:#e6e8ea !important;
  }
  .militum-search__title em{
    color:#d8a23c !important;
  }
}

/* ==================== map ==================== */
@media (prefers-color-scheme: dark){
  /* ===== Offers map [militum_offers_map] dark theme ===== */

  /* shell */
  .militum-omap{
    background:#14171a !important;
    border-color:#2c333a !important;
  }
  .militum-omap__map{
    background:#14171a !important; /* fill behind Leaflet tiles; tiles themselves untouched */
  }

  /* olive top bar: keep olive, ensure white text */
  .militum-omap__bar{ background:#3d4a26 !important; }
  .militum-omap__home,
  .militum-omap__home:visited{ color:#ffffff !important; }

  /* search field */
  .militum-omap__searchwrap{
    background:#1e2329 !important;
    box-shadow:0 2px 6px rgba(0,0,0,.5) !important;
  }
  .militum-omap__si{ color:#aab2b8 !important; }
  .militum-omap__search{
    background:transparent !important;
    color:#e6e8ea !important;
  }
  .militum-omap__search::placeholder{ color:#aab2b8 !important; }
  .militum-omap__filter{
    background:#3d4a26 !important;
    color:#ffffff !important;
  }

  /* round close button: dark surface, gold glyph */
  .militum-omap__close{
    background:#1e2329 !important;
    color:#d8a23c !important;
    box-shadow:0 2px 6px rgba(0,0,0,.5) !important;
  }

  /* floating sidebar panel */
  .militum-omap__side{
    background:#1e2329 !important;
    box-shadow:0 8px 28px rgba(0,0,0,.55) !important;
  }

  /* hits count */
  .militum-omap__count{ color:#aab2b8 !important; }
  .militum-omap__count strong{ color:#d8a23c !important; }

  /* detect / locate button (olive) */
  .militum-omap__detect{
    background:#3d4a26 !important;
    border-color:#3d4a26 !important;
    color:#ffffff !important;
    box-shadow:0 2px 6px rgba(0,0,0,.45) !important;
  }
  .militum-omap__detect:hover{
    background:#46552c !important;
    box-shadow:0 4px 12px rgba(0,0,0,.5) !important;
  }
  /* active state was white/olive -> dark surface, gold text */
  .militum-omap__detect.is-active{
    background:#262c32 !important;
    color:#d8a23c !important;
    box-shadow:none !important;
  }
  .militum-omap__detect.is-active:hover{
    background:#2c333a !important;
    box-shadow:0 2px 6px rgba(0,0,0,.4) !important;
  }

  /* status message */
  .militum-omap__msg{
    background:#262c32 !important;
    color:#e6e8ea !important;
  }
  .militum-omap__msg.is-warn{
    background:#3a2622 !important;
    color:#f0a59b !important;
  }

  /* geolocation "you are here" dot: drop the glaring white border ring */
  .militum-omap__me span{
    border-color:#0e1114 !important;
    box-shadow:0 0 0 3px rgba(47,109,181,.45) !important;
  }

  /* city row + select */
  .militum-omap__cityrow{ border-bottom-color:#2c333a !important; }
  .militum-omap__citylabel{ color:#d8a23c !important; }
  .militum-omap__city{
    background:#1e2329 !important;
    color:#e6e8ea !important;
    border-color:#2c333a !important;
  }
  .militum-omap__city option{
    background:#1e2329 !important;
    color:#e6e8ea !important;
  }

  /* list items */
  .militum-omap__li{ border-bottom-color:#2c333a !important; }
  .militum-omap__li:hover{ background:#262c32 !important; }
  .militum-omap__li:focus-visible{
    background:#262c32 !important;
    outline-color:#d8a23c !important;
  }
  .militum-omap__li-t{ color:#e6e8ea !important; }
  .militum-omap__li-km{ color:#7fb0e6 !important; }
  .militum-omap__empty{ color:#aab2b8 !important; }

  /* side toggle tab (olive) */
  .militum-omap__tab{
    background:#3d4a26 !important;
    color:#ffffff !important;
    box-shadow:2px 1px 5px rgba(0,0,0,.5) !important;
  }

  /* map pin teardrop base */
  .militum-omap__pinwrap{
    background:#1e2329 !important;
    border-color:#d8a23c !important;
  }

  /* ===== popup card ===== */
  .militum-omap__popup .leaflet-popup-content-wrapper{
    background:#1e2329 !important;
    color:#e6e8ea !important;
    box-shadow:0 10px 34px rgba(0,0,0,.6) !important;
  }
  .militum-omap__popup .leaflet-popup-tip{
    background:#1e2329 !important;
    box-shadow:0 10px 34px rgba(0,0,0,.6) !important;
  }
  .militum-omap__popup .leaflet-popup-close-button{
    color:#e6e8ea !important;
  }
  .militum-omap__card{ background:#1e2329 !important; }
  .militum-omap__card--load{ color:#aab2b8 !important; }

  /* card title: olive on light -> gold on dark */
  .militum-omap__card-title{ color:#d8a23c !important; }

  /* card description */
  .militum-omap__card-desc{ color:#c2c8cc !important; }
  .militum-omap__card-desc a{ color:#d8a23c !important; }

  /* card footer */
  .militum-omap__card-foot{
    background:#262c32 !important;
    border-top-color:#2c333a !important;
  }
  .militum-omap__card-foot a{ color:#c2c8cc !important; }
  .militum-omap__card-foot a:hover{ color:#d8a23c !important; }
  .militum-omap__card-foot a+a{ border-left-color:#2c333a !important; }
  .militum-omap__card-foot svg{ color:#d8a23c !important; }

  /* card "more" CTA */
  .militum-omap__card-more{
    background:#1e2329 !important;
    color:#d8a23c !important;
    border-top-color:#2c333a !important;
  }
  .militum-omap__card-more:hover{ background:#262c32 !important; }
}

/* ==================== offer-detail ==================== */
@media (prefers-color-scheme: dark) {

  /* ============================================================
     OFFER DETAIL — BEM template (.militum-offer__*)
     Source: in-<body> <style> in single-militum_job.php → !important
     ============================================================ */

  .militum-offer {
    background: #14171a !important;
    color: #e6e8ea !important;
  }

  /* Banner placeholder fill (behind image) */
  .militum-offer__banner {
    background: #262c32 !important;
  }

  /* --- Gold/olive Rabattfakta card --- */
  .militum-offer__rf {
    background: #3d4a26 !important;        /* brand olive surface, kept */
    color: #ffffff !important;
    box-shadow: 5px 10px 40px rgba(0,0,0,.55) !important;
  }

  .militum-offer__rf-logo--text,
  .militum-offer__rf-heading,
  .militum-offer__rf-sub,
  .militum-offer__rf-list,
  .militum-offer__rf-list li,
  .militum-offer__rf-list p {
    color: #ffffff !important;
  }

  /* Outline CTA: gold outline + gold text on the olive card */
  .militum-offer__rf-cta {
    border-color: #d8a23c !important;
    background: transparent !important;
    color: #d8a23c !important;
  }
  .militum-offer__rf-cta:focus,
  .militum-offer__rf-cta:hover {
    background: #d8a23c !important;
    color: #1b1b1b !important;
  }

  /* Discount-code chip */
  .militum-offer__rf-codechip {
    background: rgba(0,0,0,.25) !important;
    border-color: #d8a23c !important;
    color: #ffffff !important;
  }
  .militum-offer__rf-codechip:focus-visible {
    outline-color: #d8a23c !important;
  }
  .militum-offer__rf-codechip.is-copied {
    border-color: #cfe3b6 !important;
    background: rgba(207,227,182,.16) !important;
  }
  .militum-offer__rf-copied {
    color: #ffffff !important;
  }

  /* --- Title + meta + body --- */
  .militum-offer__title,
  .militum-offer__intro,
  .militum-offer__locality,
  .militum-offer__body,
  .militum-offer__body h2,
  .militum-offer__body h3,
  .militum-offer__body strong,
  .militum-offer__body b {
    color: #e6e8ea !important;
  }

  .militum-offer__locality a,
  .militum-offer__body a {
    color: #eaad2a !important;            /* gold links, kept */
  }

  /* --- Report section --- */
  .militum-offer__report-title,
  .militum-offer__report-intro {
    color: #e6e8ea !important;
  }
  .militum-offer__report-text {
    background: #1e2329 !important;
    color: #e6e8ea !important;
    border-color: #2c333a !important;
  }
  .militum-offer__report-text::placeholder {
    color: #aab2b8 !important;
  }
  .militum-offer__report-text:focus {
    border-color: #d8a23c !important;
    box-shadow: 0 0 0 2px rgba(216,162,60,.25) !important;
  }
  .militum-offer__report-btn {
    background: #3d4a26 !important;       /* olive button, kept */
    border-color: #3d4a26 !important;
    color: #ffffff !important;
  }
  .militum-offer__report-btn:hover {
    background: transparent !important;
    border-color: #d8a23c !important;
    color: #d8a23c !important;
  }
  .militum-offer__report-status.is-ok {
    color: #8bc34a !important;
  }
  .militum-offer__report-status.is-err {
    color: #ff6f60 !important;
  }

  /* ============================================================
     OFFER DETAIL — mu-plugins variant (.militum-offer-*)
     Source: in-<body> <style> in militum-offer-single.php → !important
     ============================================================ */

  .militum-offer-single {
    color: #e6e8ea !important;
  }

  /* Breadcrumbs */
  .militum-offer-crumbs,
  .militum-offer-crumbs a {
    color: #aab2b8 !important;
  }
  .militum-offer-crumbs a:hover {
    color: #d8a23c !important;
  }
  .militum-offer-crumbs .is-current {
    color: #e6e8ea !important;
  }

  /* Hero placeholder fill */
  .militum-offer-hero {
    background: #262c32 !important;
  }

  /* Title + tagline + body */
  .militum-offer-title,
  .militum-offer-tagline,
  .militum-offer-content,
  .militum-offer-content h2,
  .militum-offer-content h3 {
    color: #e6e8ea !important;
  }
  .militum-offer-content a,
  .militum-offer-contact a {
    color: #d8a23c !important;
  }
  .militum-offer-like {
    color: #aab2b8 !important;
  }

  /* Sidebar Rabattfakta card */
  .militum-offer-card {
    background: #1e2329 !important;
    border-color: #2c333a !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4) !important;
  }
  .militum-offer-card-inner {
    background: #1e2329 !important;
    box-shadow: inset 0 0 0 1px #2c333a !important;
  }
  .militum-offer-card-title {
    color: #e6e8ea !important;
  }
  .militum-offer-card-title::after {
    background: #d8a23c !important;       /* was navy #1d3557 accent → gold */
  }
  .militum-offer-card-discount {
    color: #d8a23c !important;            /* was #1f6fcc, low contrast → gold */
  }
  .militum-offer-card-desc {
    color: #aab2b8 !important;
  }
  .militum-offer-card-logoslot {
    border-top-color: #2c333a !important;
  }
  /* CTA keeps its brand-green gradient; text white. NOTE: white-on-green
     is ~1.9:1 (fails AA) but is identical in light mode — not a dark regression. */
  .militum-offer-card-cta {
    color: #ffffff !important;
  }

  /* Related divider */
  .militum-offer-related {
    border-top-color: #2c333a !important;
  }
}

/* ==================== offer-cards ==================== */
@media (prefers-color-scheme: dark) {
  /* offer-cards grid: militum_offers_css() — in-<body> <style>, so !important */

  .militum-offers-heading { color: #e6e8ea !important; }

  /* card panel: was #fff + #e0e0e0 border */
  .militum-offer {
    background: #1e2329 !important;
    border-color: #2c333a !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.5) !important;
  }
  .militum-offer:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,.6) !important;
  }

  /* logo plate: was solid #fff. Keep light plate so brand logos read; just soften shadow */
  .militum-offer-logo {
    background: #ffffff !important;
    box-shadow: 0px 10px 15px 5px rgba(0,0,0,0.4) !important;
  }

  /* body text: was #000000 -> primary on dark (#e6e8ea on #1e2329 ~ 12.9:1) */
  .militum-offer-text { color: #e6e8ea !important; }
  .militum-offer-text:hover { color: #e6e8ea !important; }

  /* CTA: source was lime hsl(83,58%,58%) w/ white (only 1.77:1, fails AA).
     Olive #3d4a26 + white = 9.52:1; hover gold #d8a23c + dark = 7.84:1 */
  .militum-offer-cta {
    background: #3d4a26 !important;
    border-color: #3d4a26 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 0 hsla(0,0%,100%,0.06) inset, 1px 2px 4px hsla(0,0%,0%,0.4) !important;
  }
  .militum-offer-cta:hover {
    background: #d8a23c !important;
    border-color: #d8a23c !important;
    color: #14171a !important;
  }

  /* viewall pill: source bg #8BC34A w/ white was only 2.10:1 (FAILS AA).
     Darken bg so white text passes: #3d4a26 = 9.52:1, hover #4a5a2e = 7.52:1 */
  .militum-offers-viewall {
    background: #3d4a26 !important;
    color: #ffffff !important;
  }
  .militum-offers-viewall:hover {
    background: #4a5a2e !important;
    color: #ffffff !important;
  }

  /* ribbon (hsla green/white ~2.2:1) and city pill (#a2d256/white ~1.77:1)
     LEFT UNTOUCHED: brand chips over banner imagery / white logo plate, not the
     dark surface; pre-existing light-mode contrast, out of scope to keep additive. */
}

/* ==================== militum-css ==================== */
@media (prefers-color-scheme: dark) {
  /* CF7 form fields on /kontakt/ — input/textarea surfaces.
     Source declares these in the SAME enqueued militum.css; this block
     comes later at equal specificity, so it wins without !important. */
  /* CF7 inputs carry .wpcf7-form-control / .wpcf7-text etc.; something
     (CF7 plugin / theme) forces them white at higher specificity, so target the
     real classes WITH !important. (Submit excluded — styled separately below.) */
  .wpcf7 input.wpcf7-text,
  .wpcf7 input.wpcf7-email,
  .wpcf7 input.wpcf7-tel,
  .wpcf7 input.wpcf7-number,
  .wpcf7 input.wpcf7-date,
  .wpcf7 input.wpcf7-quiz,
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 textarea.wpcf7-textarea,
  .wpcf7 textarea,
  .wpcf7 select.wpcf7-select {
    background-color: #1e2329 !important;
    color: #e6e8ea !important;
    border-color: #333b44 !important;
  }
  .wpcf7 input::placeholder,
  .wpcf7 textarea::placeholder {
    color: #aab2b8 !important;
  }
  .wpcf7 input:focus,
  .wpcf7 textarea:focus,
  .wpcf7 select:focus {
    border-color: #d8a23c !important;
    outline: none !important;
  }

  /* CF7 submit ("Send Message") — was faint → solid olive, clearly visible. */
  .wpcf7 input.wpcf7-submit,
  .wpcf7 input[type="submit"] {
    background-color: #3d4a26 !important;
    border-color: #3d4a26 !important;
    color: #ffffff !important;
    opacity: 1 !important;
  }
  .wpcf7 input.wpcf7-submit:hover,
  .wpcf7 input[type="submit"]:hover {
    background-color: #4a5a2e !important;
    color: #ffffff !important;
  }

  /* Section / hero headings — source sets NO color (inherits).
     Elementor commonly emits a light heading color via inline style="" or an
     in-body <style>; an enqueued rule only beats those with !important, so this
     guard MUST be !important or it is pointless. Neutral light value chosen to
     match form text; if these headings should follow brand gold, use #d8a23c. */
  .militum-kontakt-h2.elementor-widget-heading .elementor-heading-title,
  .militum-kontakt-hero .elementor-heading-title {
    color: #e6e8ea !important;
  }
}

/* ==================== elementor ==================== */
@media (prefers-color-scheme: dark){

  /* ============================================================
     ELEMENTOR PAGE CONTENT — dark theme (broad, conservative base)
     Scoped to .elementor / .elementor-8509 built-page content.
     Globals on this page resolve to:
       --e-global-color-primary  #A2D256 (lime accent icons/drop-caps)
       --e-global-color-secondary #000000 (black body/sub text)
       --e-global-color-text     #FFFFFF (white card text over photos)
       --e-global-color-accent   #303C19 (olive headings / CTA outline)
     Source post-8509.css declares colors with NO !important, so the
     !important overrides below win the cascade despite the source's
     higher (3-class) per-element specificity.
     ============================================================ */

  .elementor.elementor-8509,
  body .elementor-8509{
    --e-global-color-secondary:#e6e8ea !important;
    --e-global-color-accent:#d8a23c !important;
  }

  /* ---- Default section / container backgrounds (only explicit light fills) ---- */
  .elementor-8509 .elementor-element.elementor-element-03fa383:not(.elementor-motion-effects-element-type-background),
  .elementor-8509 .elementor-element.elementor-element-03fa383 > .elementor-motion-effects-container > .elementor-motion-effects-layer{
    background-color:#1e2329 !important;
  }
  .elementor-8509 .elementor-element.elementor-element-023c719:not(.elementor-motion-effects-element-type-background),
  .elementor-8509 .elementor-element.elementor-element-023c719 > .elementor-motion-effects-container > .elementor-motion-effects-layer{
    background-color:#1e2329 !important;
  }

  /* ---- Default body text & paragraphs ---- */
  .elementor-8509 .elementor-widget-text-editor,
  .elementor-8509 .elementor-widget-text-editor p,
  .elementor-8509 .elementor-widget-text-editor li,
  .elementor-8509 .elementor-element-af1096c,
  .elementor-8509 .elementor-element-af1096c p,
  .elementor-8509 .elementor-element-74c668f,
  .elementor-8509 .elementor-element-74c668f p,
  .elementor-8509 .elementor-element-8de9145,
  .elementor-8509 .elementor-element-8de9145 p,
  .elementor-8509 .elementor-element-66962ea,
  .elementor-8509 .elementor-element-66962ea p,
  .elementor-8509 .elementor-element-a60588d,
  .elementor-8509 .elementor-element-a60588d p{
    color:#e6e8ea !important;
  }

  .elementor-8509 .elementor-widget-image .widget-image-caption{
    color:#aab2b8 !important;
  }

  /* ---- Headings ---- */
  .elementor-8509 .elementor-element-342670e .elementor-heading-title,
  .elementor-8509 .elementor-element-35ab28b .elementor-heading-title,
  .elementor-8509 .elementor-element-8b75595 .elementor-heading-title,
  .elementor-8509 .elementor-element-17a60f0 .elementor-heading-title,
  .elementor-8509 .elementor-element-7e250d9 .elementor-heading-title{
    color:#d8a23c !important;
  }
  .elementor-8509 .elementor-element-c73a8d2 .elementor-heading-title{
    color:#e6e8ea !important;
  }
  .elementor-8509 .elementor-element-d96eb6a .elementor-heading-title,
  .elementor-8509 .elementor-element-c21b410 .elementor-heading-title,
  .elementor-8509 .elementor-element-0d85fc3 .elementor-heading-title{
    color:#ffffff !important;
  }

  /* ---- Buttons & links ---- */
  .elementor-8509 .elementor-element-05dbcbb .elementor-button{
    background-color:transparent !important;
    color:#d8a23c !important;
    fill:#d8a23c !important;
    border-color:#d8a23c !important;
  }
  .elementor-8509 .elementor-element-05dbcbb .elementor-button:hover,
  .elementor-8509 .elementor-element-05dbcbb .elementor-button:focus{
    background-color:#d8a23c !important;
    color:#14171a !important;
  }
  .elementor-8509 .elementor-element-05dbcbb .elementor-button:hover svg,
  .elementor-8509 .elementor-element-05dbcbb .elementor-button:focus svg{
    fill:#14171a !important;
  }
  .elementor-8509 .elementor-element-98d2984 .elementor-button,
  .elementor-8509 .elementor-element-49fc9f9 .elementor-button,
  .elementor-8509 .elementor-element-04bb1ea .elementor-button{
    color:#eaad2a !important;
    fill:#eaad2a !important;
  }

  /* ---- Image borders (was light #DBDBDB) ---- */
  .elementor-8509 .elementor-element-a85e08f img{
    border-color:#2c333a !important;
  }

  /* ---- Inputs / selects (defensive, for any embedded form) ---- */
  .elementor-8509 input:not([type="submit"]):not([type="button"]),
  .elementor-8509 textarea,
  .elementor-8509 select{
    background-color:#1e2329 !important;
    color:#e6e8ea !important;
    border-color:#2c333a !important;
  }
  .elementor-8509 input::placeholder,
  .elementor-8509 textarea::placeholder{
    color:#aab2b8 !important;
  }
}

/* ==================== home page (.elementor-2634) ==================== */
@media (prefers-color-scheme: dark) {
  /* Two top sections kept their LIGHT backgrounds in dark mode while the global
     override lightened their text → washed-out/invisible. Darken each section's
     background and lighten its text, SCOPED to the section so the branded
     gold (#EAAD2A) / olive (#303C19) sections elsewhere are left untouched. */

  /* --- Hero: "ALLA FÖRMÅNER I FICKAN" (section 63f3c37, was #EEE9E1) --- */
  .elementor-2634 .elementor-element.elementor-element-63f3c37 {
    background-color: #14171a !important;
  }
  .elementor-2634 .elementor-element-63f3c37 .elementor-heading-title {
    color: #d8a23c !important; /* olive heading → brand gold */
  }
  .elementor-2634 .elementor-element-63f3c37 p,
  .elementor-2634 .elementor-element-63f3c37 .elementor-widget-text-editor,
  .elementor-2634 .elementor-element-63f3c37 li,
  .elementor-2634 .elementor-element-63f3c37 .elementor-icon-list-text {
    color: #c7ccd1 !important; /* washed-out subtitle → readable light */
  }

  /* --- "Förmåner nära dig" (section 42310d2, was #EEE9E1/#F6F4F4) --- */
  .elementor-2634 .elementor-element.elementor-element-42310d2 {
    background-color: #14171a !important;
  }
  .elementor-2634 .elementor-element-42310d2 .elementor-heading-title {
    color: #e6e8ea !important;
  }
  .elementor-2634 .elementor-element-42310d2 p,
  .elementor-2634 .elementor-element-42310d2 .elementor-widget-text-editor,
  .elementor-2634 .elementor-element-42310d2 li,
  .elementor-2634 .elementor-element-42310d2 .elementor-icon-list-text {
    color: #c7ccd1 !important;
  }
  /* map container light border (#DBDBDB → dark) */
  .elementor-2634 .elementor-element-cb7512a {
    border-color: #2c333a !important;
  }
  /* "Visa alla lokala förmåner" outline button (olive accent → gold) */
  .elementor-2634 .elementor-element-2efc0f5 .elementor-button {
    color: #d8a23c !important;
    border-color: #d8a23c !important;
    background-color: transparent !important;
  }
  .elementor-2634 .elementor-element-2efc0f5 .elementor-button:hover {
    background-color: #d8a23c !important;
    color: #14171a !important;
  }
}

/* ==================== Militumkollen page (.elementor-2636) ==================== */
@media (prefers-color-scheme: dark) {
  /* This page is mostly black (secondary) body text on light #F6F4F4 / transparent
     sections — invisible in dark. All gold #EAAD2A here is DECORATIVE (stacked
     icon circles + dividers), and no section uses secondary/accent as a real
     background, so it's safe to remap the text vars page-wide, then darken the
     light section fills. White-on-photo text (--e-global-color-text) and lime
     icons (--e-global-color-primary) are left as-is. */
  .elementor.elementor-2636,
  body .elementor-2636 {
    --e-global-color-secondary: #e6e8ea !important; /* black body/sub text → light */
    --e-global-color-accent: #d8a23c !important;    /* olive headings/links → gold */
  }

  /* Light section backgrounds (#F6F4F4 panels + white var(--e-global-color-text)
     cards) → dark. ALL of them, or a missed one keeps light bg + light text =
     invisible (the two faded sections in the screenshot). */
  .elementor-2636 .elementor-element.elementor-element-275b824:not(.elementor-motion-effects-element-type-background),
  .elementor-2636 .elementor-element.elementor-element-54878a3:not(.elementor-motion-effects-element-type-background),
  .elementor-2636 .elementor-element.elementor-element-5941725:not(.elementor-motion-effects-element-type-background),
  .elementor-2636 .elementor-element.elementor-element-bfd0fdb:not(.elementor-motion-effects-element-type-background),
  .elementor-2636 .elementor-element.elementor-element-35f45a0:not(.elementor-motion-effects-element-type-background),
  .elementor-2636 .elementor-element.elementor-element-97635c0:not(.elementor-motion-effects-element-type-background) {
    background-color: #1e2329 !important;
  }

  /* The two callout sections (Medlemmarna 70f4a2c + NATO 6d48a7a) are olive
     (--e-global-color-accent #303C19) in light mode. The page-wide accent→gold
     remap turned them bright gold (jarring in dark mode), so KEEP THEM OLIVE —
     it's already dark, brand-consistent, and the section's light text stays
     readable on it. (Override the remapped var background back to olive.) */
  .elementor-2636 .elementor-element.elementor-element-6d48a7a:not(.elementor-motion-effects-element-type-background),
  .elementor-2636 .elementor-element.elementor-element-6d48a7a > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-2636 .elementor-element.elementor-element-70f4a2c:not(.elementor-motion-effects-element-type-background),
  .elementor-2636 .elementor-element.elementor-element-70f4a2c > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #303c19 !important;
  }
}

/* ==================== Om Militum page (.elementor-8511) ==================== */
@media (prefers-color-scheme: dark) {
  /* Same recipe as Militumkollen: all gold #EAAD2A is decorative (icons/star
     dividers), so remap the text vars page-wide, darken the light #F6F4F4
     sections ("Förmåner för hjältar" + "Samarbete…"), and keep the olive
     callout section ("Detta står vi för!" / "Militum Respons AB") olive — not
     gold — so it doesn't change between light and dark. */
  .elementor.elementor-8511,
  body .elementor-8511 {
    --e-global-color-secondary: #e6e8ea !important; /* black body text → light */
    --e-global-color-accent: #d8a23c !important;    /* olive headings/links → gold */
  }

  /* Light #F6F4F4 sections → dark */
  .elementor-8511 .elementor-element.elementor-element-30ba535:not(.elementor-motion-effects-element-type-background),
  .elementor-8511 .elementor-element.elementor-element-654b26a:not(.elementor-motion-effects-element-type-background) {
    background-color: #1e2329 !important;
  }

  /* Olive callout section — keep olive (don't let the accent remap turn it gold) */
  .elementor-8511 .elementor-element.elementor-element-23d280a:not(.elementor-motion-effects-element-type-background),
  .elementor-8511 .elementor-element.elementor-element-23d280a > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #303c19 !important;
  }
}

/* ==================== Bli medlem page (.elementor-9032) ==================== */
@media (prefers-color-scheme: dark) {
  /* Light sections (#FFFFFF + #F7F6F2) with black text → invisible. All gold
     #EAAD2A here is decorative icons/dividers (no gold sections/buttons), so
     remap the text vars and darken the light sections. */
  .elementor.elementor-9032,
  body .elementor-9032 {
    --e-global-color-secondary: #e6e8ea !important; /* black body text → light */
    --e-global-color-accent: #d8a23c !important;    /* olive headings/links → gold */
  }
  /* Page sections → dark base, so the form card stands out on top of them. */
  .elementor-9032 .elementor-element.elementor-element-2100181:not(.elementor-motion-effects-element-type-background),
  .elementor-9032 .elementor-element.elementor-element-591851c:not(.elementor-motion-effects-element-type-background) {
    background-color: #14171a !important;
  }
  /* The form card (90f4930 — a white rounded card in light mode) → a raised dark
     card (distinct from the #14171a section, keeps its 14px radius), so the form
     reads as a SEPARATE panel like the light view. */
  .elementor-9032 .elementor-element.elementor-element-90f4930:not(.elementor-motion-effects-element-type-background) {
    background-color: #1e2329 !important;
    border: 1px solid #333b44 !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45) !important;
  }
  /* Left intro description ("För att bli medlem…") → white for readability. */
  .elementor-9032 .elementor-element-efefcab .elementor-heading-title {
    color: #ffffff !important;
  }
}

/* ==================== Medlemskap page (.elementor-10937) ==================== */
@media (prefers-color-scheme: dark) {
  /* Gold #EAAD2A is decorative icons/dividers and the olive section uses a
     hardcoded #303C19 (unaffected by the remap, stays olive), so remap the text
     vars safely, darken the light section, and raise the white card into a
     distinct dark panel. */
  .elementor.elementor-10937,
  body .elementor-10937 {
    --e-global-color-secondary: #e6e8ea !important; /* black body text → light */
    --e-global-color-accent: #d8a23c !important;    /* olive headings/links → gold */
  }
  /* Light section → dark base (so the card stands out on top). */
  .elementor-10937 .elementor-element.elementor-element-9b5354a,
  .elementor-10937 .elementor-element.elementor-element-11bdc67:not(.elementor-motion-effects-element-type-background) {
    background-color: #1e2329 !important;
  }
  .elementor-10937 .elementor-element.elementor-element-d3cc52a .elementor-heading-title,
  .elementor-10937 .elementor-element.elementor-element-5b8c0ec .elementor-heading-title {
    color: #fff;
}
  /* f22f79f is a "Visa alla partners" BUTTON widget (white #FFFFFF), not a card —
     my earlier card styling wrapped it in a stray box. Keep the widget wrapper
     transparent and restyle the white button as a gold outline (matching the
     partners-section CTA). */
  .elementor-10937 .elementor-element.elementor-element-f22f79f:not(.elementor-motion-effects-element-type-background) {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .elementor-10937 .elementor-element-f22f79f .elementor-button {
    background-color: transparent !important;
    border: 1px solid #d8a23c !important;
    color: #d8a23c !important;
  }
  .elementor-10937 .elementor-element-f22f79f .elementor-button svg,
  .elementor-10937 .elementor-element-f22f79f .elementor-button svg path {
    fill: #d8a23c !important;
  }
  .elementor-10937 .elementor-element-f22f79f .elementor-button:hover {
    background-color: #d8a23c !important;
    color: #14171a !important;
  }
  .elementor-10937 .elementor-element-f22f79f .elementor-button:hover svg path {
    fill: #14171a !important;
  }
}

/* ==================== Kontakta oss page (.elementor-10067) ==================== */
@media (prefers-color-scheme: dark) {
  /* Gold #EAAD2A is decorative icons/dividers; the CF7 form inputs/submit get the
     global .wpcf7 dark rules. So remap text vars + darken the light sections
     (incl. the white #FFFFFF section that holds the contact form — its inputs
     stay raised #1e2329 on the #14171a section). */
  .elementor.elementor-10067,
  body .elementor-10067 {
    --e-global-color-secondary: #e6e8ea !important; /* black body text → light */
    --e-global-color-accent: #d8a23c !important;    /* olive headings/links → gold */
  }
  .elementor-10067 .elementor-element.elementor-element-a7bebfb:not(.elementor-motion-effects-element-type-background),
  .elementor-10067 .elementor-element.elementor-element-d3f017b:not(.elementor-motion-effects-element-type-background),
  .elementor-10067 .elementor-element.elementor-element-efed63a:not(.elementor-motion-effects-element-type-background) {
    background-color: #1e2329 !important;
  }
  .elementor-10067 .elementor-element.elementor-element-6454fb4 .elementor-heading-title{
    color: #ffffff !important;
  }

  /* --- Contact form styled like the register form: a raised card with recessed
     input wells. 11d922a wraps the "Kontaktformulär" heading + the CF7 form. The
     section (efed63a) is #1e2329, so the card uses the raised #262c32 shade with
     a border/shadow/radius, and the inputs recess to #14171a (page-scoped, so the
     global #1e2329 CF7 default still applies to any other CF7 form). --- */
  .elementor-10067 .elementor-element.elementor-element-efed63a:not(.elementor-motion-effects-element-type-background) {
    background-color: #262c32 !important;
    border: 1px solid #333b44 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45) !important;
  }
  .elementor-10067 .wpcf7 input.wpcf7-text,
  .elementor-10067 .wpcf7 input.wpcf7-email,
  .elementor-10067 .wpcf7 input.wpcf7-tel,
  .elementor-10067 .wpcf7 input.wpcf7-quiz,
  .elementor-10067 .wpcf7 input[type="text"],
  .elementor-10067 .wpcf7 input[type="email"],
  .elementor-10067 .wpcf7 textarea.wpcf7-textarea,
  .elementor-10067 .wpcf7 textarea {
    background-color: #14171a !important;
  }

  /* Remaining hardcoded-#000 "heading" widgets used as descriptions → light
     (the var-remap can't touch literal black; 6454fb4 handled above). */
     .custom-cf7-wrapper p,
     .custom-cf7-wrapper label,
  .elementor-10067 .elementor-element-96b36cf .elementor-heading-title,
  .elementor-10067 .elementor-element-b127762 .elementor-heading-title,
  .elementor-10067 .elementor-element-e6b0f20 .elementor-heading-title,
  .elementor-10067 .elementor-element-e8bd595 .elementor-heading-title,
  .elementor-10067 .elementor-element-f0b0cb5 .elementor-heading-title {
    color: #ffffff !important;
  }

  /* Contact-info links (Telefon / Mejl / Medlemsfrågor — tel: & mailto: in the
     c7fac49 text widget) inherit the global pink link colour; the var remap can't
     reach them. Force brand gold/yellow (#eaad2a, the form-star gold). */
  .elementor-10067 .elementor-element-c7fac49 a,
  .elementor-10067 .elementor-element-c7fac49 a:visited {
    color: #eaad2a !important;
  }
  .elementor-10067 .elementor-element-c7fac49 a:hover,
  .elementor-10067 .elementor-element-c7fac49 a:focus {
    color: #d8a23c !important;
  }
}


/* ==================== FAQ page (.elementor-10116) ==================== */
/* Nested-accordion FAQ. All gold/olive on this page is decorative (icon-dividers
   + inline link colors), so the scoped var remap is safe. Accent var is unused in
   post-10116.css (inert) but kept for consistency. Accordion title text + chevron
   icon are pinned/overridden explicitly: the icon SVG is hardcoded fill/stroke
   black and two heading widgets hardcode color:#000000 (var remap can't reach). */
@media (prefers-color-scheme: dark) {

  /* ---- Scoped global var remap ----
     secondary (#000 black body/sub text) -> light; accent (#303C19 olive) -> gold.
     Safe: no section/button background on this page uses secondary or accent. */
  .elementor.elementor-10116,
  body .elementor-10116 {
    --e-global-color-secondary: #e6e8ea !important;
    --e-global-color-accent: #d8a23c !important;
  }

  /* ---- SECTIONS: top-level page bands (were #F6F4F4) -> page base ---- */
  .elementor-10116 .elementor-element.elementor-element-ce9cef6:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-ce9cef6 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-10116 .elementor-element.elementor-element-e6ee518:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-e6ee518 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #14171a !important;
  }

  /* ---- SURFACES: accordion wrapper, CTA child band, + 11 answer panels
     (were #F6F4F4 / #FFFFFF, border #D5D5D5) -> card surface ----
     c4279c7 = wrapper holding the .e-n-accordion; 9daa8f7 = CTA child band;
     rest = per-item open-state answer content panels. */
  .elementor-10116 .elementor-element.elementor-element-c4279c7:not(.elementor-motion-effects-element-type-background){
    background-color: #14171A !important;
  }
  .elementor-10116 .elementor-element.elementor-element-c4279c7 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-10116 .elementor-element.elementor-element-9daa8f7:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-9daa8f7 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-10116 .elementor-element.elementor-element-a93dd25:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-a93dd25 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-10116 .elementor-element.elementor-element-a604841:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-a604841 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-10116 .elementor-element.elementor-element-a8c457f:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-a8c457f > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-10116 .elementor-element.elementor-element-a3b09d4:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-a3b09d4 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-10116 .elementor-element.elementor-element-a4b8877:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-a4b8877 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-10116 .elementor-element.elementor-element-d7e315b:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-d7e315b > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-10116 .elementor-element.elementor-element-de22c38:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-de22c38 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-10116 .elementor-element.elementor-element-7e05872:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-7e05872 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-10116 .elementor-element.elementor-element-d4facad:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-d4facad > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-10116 .elementor-element.elementor-element-37fb069:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-37fb069 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-10116 .elementor-element.elementor-element-31fab5f:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-31fab5f > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #1e2329 !important;
    border-color: #2c333a !important;
  }
  /* answer-panel ::before overlay layers also carried the light fill */
  .elementor-10116 .elementor-element.elementor-element-a93dd25::before,
  .elementor-10116 .elementor-element.elementor-element-a604841::before,
  .elementor-10116 .elementor-element.elementor-element-a8c457f::before,
  .elementor-10116 .elementor-element.elementor-element-a3b09d4::before,
  .elementor-10116 .elementor-element.elementor-element-a4b8877::before,
  .elementor-10116 .elementor-element.elementor-element-d7e315b::before,
  .elementor-10116 .elementor-element.elementor-element-de22c38::before,
  .elementor-10116 .elementor-element.elementor-element-7e05872::before,
  .elementor-10116 .elementor-element.elementor-element-d4facad::before,
  .elementor-10116 .elementor-element.elementor-element-37fb069::before,
  .elementor-10116 .elementor-element.elementor-element-31fab5f::before {
    background-color: #2C333A !important;
    border-color: #333b44;
  }

  /* ---- Refine the open-answer panel frame: the light border was #D5D5D5
     (mapped to a muddy #2c333a above). Use a cleaner, crisper hairline with
     softer rounding so the answer reads as a deliberate panel hanging from the
     question bar. Keeps the original 3-sided design (no top border, so it
     connects to the title above). ---- */
  .elementor-10116 .elementor-element.elementor-element-a93dd25:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-a604841:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-a8c457f:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-a3b09d4:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-a4b8877:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-d7e315b:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-de22c38:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-7e05872:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-d4facad:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-37fb069:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-31fab5f:not(.elementor-motion-effects-element-type-background) {
    border-color: #333b44 !important;
  }

  /* ---- ACCORDION: summary / title bar (was #FFFFFF) -> raised surface ---- */
  .elementor-10116 .elementor-element.elementor-element-d1fa620 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title,
  .elementor-10116 .elementor-element.elementor-element-d1fa620 > .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title {
    background-color: #262c32 !important;
    border-color: #333b44 !important; /* same refined hairline as the answer panels */
  }
  /* hover / focus on the title bar */
  .elementor-10116 .elementor-element.elementor-element-d1fa620 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title:focus-visible {
    outline: none !important;
  }

  /* ---- ACCORDION: question label text (no color set -> inherits black) -> light ---- */
  .elementor-10116 .elementor-element.elementor-element-d1fa620 .e-n-accordion-item-title-header,
  .elementor-10116 .elementor-element.elementor-element-d1fa620 .e-n-accordion-item-title-text {
    color: #e6e8ea !important;
  }
  /* ---- ACCORDION: chevron icon (inline SVG hardcoded fill="black" stroke="black") -> gold ---- */
  .elementor-10116 .elementor-element.elementor-element-d1fa620 .e-n-accordion-item-title-icon {
    color: #d8a23c !important;
  }
  .elementor-10116 .elementor-element.elementor-element-d1fa620 .e-n-accordion-item-title-icon svg,
  .elementor-10116 .elementor-element.elementor-element-d1fa620 .e-n-accordion-item-title-icon svg path {
    fill: #d8a23c !important;
    stroke: #d8a23c !important;
  }

  /* ---- TEXT: heading widgets hardcoding color:#000000 (var remap can't reach) -> light ---- */
  .elementor-10116 .elementor-element-812d719 .elementor-heading-title,
  .elementor-10116 .elementor-element-2d16080 .elementor-heading-title {
    color: #e6e8ea !important;
  }

  /* ---- TEXT: answer body copy (text-editor + accordion content; inline color:#000000 / #32373c) -> light ---- */
  .elementor-10116 .elementor-widget-text-editor,
  .elementor-10116 .elementor-widget-text-editor p,
  .elementor-10116 .elementor-widget-text-editor li,
  .elementor-10116 .elementor-widget-text-editor span,
  .elementor-10116 .elementor-widget-text-editor em,
  .elementor-10116 .elementor-element.elementor-element-d1fa620 .e-con,
  .elementor-10116 .elementor-element.elementor-element-d1fa620 .e-con p,
  .elementor-10116 .elementor-element.elementor-element-d1fa620 .e-con li,
  .elementor-10116 .elementor-element.elementor-element-d1fa620 .e-con span {
    color: #e6e8ea !important;
  }

  /* ---- TEXT: inline olive (#303c19) link/span text -> gold (inline beats var remap) ---- */
  .elementor-10116 .elementor-widget-text-editor a,
  .elementor-10116 .elementor-widget-text-editor a span,
  .elementor-10116 .elementor-widget-text-editor a em,
  .elementor-10116 .e-n-accordion a[style*="#303c19" i],
  .elementor-10116 .e-n-accordion span[style*="#303c19" i],
  .elementor-10116 .e-con a[style*="#303c19" i],
  .elementor-10116 .e-con span[style*="#303c19" i] {
    color: #d8a23c !important;
  }
  /* inline gold (#eaad2a) link/span text: already readable, just pinned to survive */
  .elementor-10116 .e-n-accordion a[style*="#eaad2a" i],
  .elementor-10116 .e-n-accordion span[style*="#eaad2a" i],
  .elementor-10116 .e-con a[style*="#eaad2a" i],
  .elementor-10116 .e-con span[style*="#eaad2a" i] {
    color: #eaad2a !important;
  }

  /* ---- CF7 contact form: raise the form card to #262c32 (was grouped at #1e2329
     above) so the recessed #14171a inputs read as clear wells — matching the
     Kontakta oss form. Then recess the inputs (global CF7 default is #1e2329,
     which would blend into the card). ---- */
  .elementor-10116 .elementor-element.elementor-element-9daa8f7:not(.elementor-motion-effects-element-type-background),
  .elementor-10116 .elementor-element.elementor-element-9daa8f7 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #262c32 !important;
  }
  .elementor-10116 .wpcf7 input.wpcf7-text,
  .elementor-10116 .wpcf7 input.wpcf7-email,
  .elementor-10116 .wpcf7 input.wpcf7-tel,
  .elementor-10116 .wpcf7 input.wpcf7-quiz,
  .elementor-10116 .wpcf7 input[type="text"],
  .elementor-10116 .wpcf7 input[type="email"],
  .elementor-10116 .wpcf7 textarea.wpcf7-textarea,
  .elementor-10116 .wpcf7 textarea {
    background-color: #14171a !important;
  }
}

/* ==================== Back-to-top button (#militum-totop, sitewide) ==================== */
@media (prefers-color-scheme: dark) {
  /* Floating back-to-top (mu-plugin militum-scroll-top) had a light skin
     (#fff bg / #000 glyph) — an untreated white control on every dark page.
     Dark surface + light arrow; the SVG uses stroke="currentColor", so the
     `color` declaration recolors the glyph. */
  #militum-totop {
    background: #1e2329 !important;
    color: #e6e8ea !important;
    border-color: #2c333a !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.40) !important;
  }
  #militum-totop:hover {
    background: #262c32 !important;
    border-color: #3a424a !important;
  }
}

/* ==================== Bli Partner page (.elementor-9964) ==================== */
@media (prefers-color-scheme: dark) {
  /* Standard page: gold #EAAD2A is decorative divider icons; the Soldathemsförbundet
     + partner logos are JPG / white-tile images (baked bg) so they read on dark;
     the partners band is handled by the global :has() rule. So var-remap + darken
     the light content sections, and PIN the one olive section (its bg is
     var(--e-global-color-accent), which the accent->gold remap would turn gold). */
  .elementor.elementor-9964,
  body .elementor-9964 {
    --e-global-color-secondary: #e6e8ea !important; /* black body text -> light */
    --e-global-color-accent: #d8a23c !important;    /* olive headings/links -> gold */
  }
  /* light content sections (#F6F4F4 / #F7F6F2 / #FFFFFF / var-text white) -> page base */
  .elementor-9964 .elementor-element.elementor-element-2381056:not(.elementor-motion-effects-element-type-background),
  .elementor-9964 .elementor-element.elementor-element-2381056 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-9964 .elementor-element.elementor-element-3d8024a > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-9964 .elementor-element.elementor-element-9b5372c:not(.elementor-motion-effects-element-type-background),
  .elementor-9964 .elementor-element.elementor-element-9b5372c > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-9964 .elementor-element.elementor-element-aeadc6b:not(.elementor-motion-effects-element-type-background),
  .elementor-9964 .elementor-element.elementor-element-aeadc6b > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-9964 .elementor-element.elementor-element-c69ceba:not(.elementor-motion-effects-element-type-background),
  .elementor-9964 .elementor-element.elementor-element-c69ceba > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-9964 .elementor-element.elementor-element-c9b48c0:not(.elementor-motion-effects-element-type-background),
  .elementor-9964 .elementor-element.elementor-element-c9b48c0 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-9964 .elementor-element.elementor-element-d6b9b1d:not(.elementor-motion-effects-element-type-background),
  .elementor-9964 .elementor-element.elementor-element-d6b9b1d > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #14171a !important;
  }
  .elementor-9964 .elementor-element.elementor-element-3d8024a:not(.elementor-motion-effects-element-type-background){
    background-color: #1e2329 !important;
  }
  /* olive section (bg = var(--e-global-color-accent)) -> pin to olive so the
     accent->gold remap doesn't flip it gold. */
  .elementor-9964 .elementor-element.elementor-element-bfb308a:not(.elementor-motion-effects-element-type-background),
  .elementor-9964 .elementor-element.elementor-element-bfb308a > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #303C19 !important;
  }
  .custom-cf7-wrapper input[type="text"], .custom-cf7-wrapper input[type="email"], .custom-cf7-wrapper input[type="number"], .custom-cf7-wrapper textarea, .wpcf7 .custom-cf7-wrapper textarea {
    background-color: #14171a !important;
  }
}

/* ==================== Vår värdegrund page (.elementor-10909) ==================== */
@media (prefers-color-scheme: dark) {
  /* Standard page: gold #EAAD2A is the decorative divider star (hardcoded, so the
     accent->gold remap doesn't touch it); the partners band is handled by the
     global :has() rule. var-remap + darken the three light sections. */
  .elementor.elementor-10909,
  body .elementor-10909 {
    --e-global-color-secondary: #e6e8ea !important; /* black body text -> light */
    --e-global-color-accent: #d8a23c !important;    /* olive headings/links -> gold */
  }
  .elementor-10909 .elementor-element.elementor-element-2fbaa1c:not(.elementor-motion-effects-element-type-background),
  .elementor-10909 .elementor-element.elementor-element-2fbaa1c > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-10909 .elementor-element.elementor-element-72d7102 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-10909 .elementor-element.elementor-element-78eaf82:not(.elementor-motion-effects-element-type-background),
  .elementor-10909 .elementor-element.elementor-element-72d7102:not(.elementor-motion-effects-element-type-background),
  .elementor-10909 .elementor-element.elementor-element-78eaf82 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #1e2329 !important;
  }
}

/* ============ Anslutna Organisationer page (.elementor-10947) ============ */
@media (prefers-color-scheme: dark) {
  /* Affiliated-orgs page. The olive sections use hardcoded #303C19 (unaffected by
     the accent->gold remap, so they stay olive — no pin needed). The org labels
     under each logo are image-box widgets with hardcoded color:#000000 (var remap
     can't reach) -> lighten; two section headings also hardcode #000. Darken the
     two light sections (8515132 holds the "Våra partners" band). Gold star
     dividers + lime/gold var headings are left to the remap. */
  .elementor.elementor-10947,
  body .elementor-10947 {
    --e-global-color-secondary: #e6e8ea !important; /* black body text -> light */
    --e-global-color-accent: #d8a23c !important;    /* olive headings/links -> gold */
  }
  /* light sections -> page base (8515132 = the "Våra partners" band wrapper) */
  .elementor-10947 .elementor-element.elementor-element-6c7a7cf:not(.elementor-motion-effects-element-type-background),
  .elementor-10947 .elementor-element.elementor-element-6c7a7cf > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-10947 .elementor-element.elementor-element-8515132:not(.elementor-motion-effects-element-type-background),
  .elementor-10947 .elementor-element.elementor-element-8515132 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #14171a !important;
  }
  /* org labels under logos (image-box widgets, hardcoded #000) -> light */
  .elementor-10947 .elementor-image-box-title,
  .elementor-10947 .elementor-image-box-description {
    color: #e6e8ea !important;
  }
  /* the two hardcoded-#000 section headings -> light */
  .elementor-10947 .elementor-element-323f092 .elementor-heading-title,
  .elementor-10947 .elementor-element-99a2de4 .elementor-heading-title {
    color: #e6e8ea !important;
  }
}

/* ============ Org detail pages — shared Elementor template (UNPREFIXED) ============ */
/* The ~18 affiliated-organisation pages (Sveriges Reservofficerare, Bilkåren,
   Försvarsutbildarna, …) are built from ONE duplicated Elementor template, so they
   all share the same content-section ids: 85f3f66 + c508f7d (#F6F4F4 light = the
   main content + the "Våra partners" band) and b6f36d7 / 0ed6f4f / fdccd79
   (hardcoded #303C19 olive contact card + buttons). Targeted UNPREFIXED (no
   .elementor-<pageid>) so this single block covers EVERY org page at once; these
   ids appear on no non-org page (collision-checked). Olive sections use literal
   #303C19 so the accent->gold remap leaves them olive (no pin needed). */
@media (prefers-color-scheme: dark) {
  /* remap text vars on the shared sections so headings/links read on dark */
  .elementor-element-85f3f66,
  .elementor-element-c508f7d,
  .elementor-element-b6f36d7 {
    --e-global-color-secondary: #e6e8ea !important; /* black text -> light */
    --e-global-color-accent: #d8a23c !important;    /* olive headings/links -> gold */
  }
  /* light content + partners sections -> page base */
  .elementor-element-85f3f66:not(.elementor-motion-effects-element-type-background),
  .elementor-element-85f3f66 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-element-c508f7d:not(.elementor-motion-effects-element-type-background),
  .elementor-element-c508f7d > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #14171a !important;
  }
}

/* ==================== Begär aktiveringskod page (.elementor-9853) ==================== */
@media (prefers-color-scheme: dark) {
  .elementor.elementor-9853,
  body .elementor-9853 {
    --e-global-color-secondary: #e6e8ea !important; /* black body text -> light */
    --e-global-color-accent: #d8a23c !important;    /* olive headings/links -> gold */
  }
  /* main content + "Våra partners" sections -> page base */
  .elementor-9853 .elementor-element.elementor-element-29dcb3a:not(.elementor-motion-effects-element-type-background),
  .elementor-9853 .elementor-element.elementor-element-29dcb3a > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-9853 .elementor-element.elementor-element-60d4c76:not(.elementor-motion-effects-element-type-background),
  .elementor-9853 .elementor-element.elementor-element-60d4c76 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #14171a !important;
  }
  /* "Begär aktiveringskod" form card (heading + form, #FFFFFF, radius 14px)
     -> raised dark card; the inner fabrik <form> is made transparent below so
     this is the single visible card. */
  .elementor-9853 .elementor-element.elementor-element-c112658:not(.elementor-motion-effects-element-type-background),
  .elementor-9853 .elementor-element.elementor-element-c112658 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #262c32 !important;
  }
}

/* ==================== militum-fabrik custom form (sitewide) ==================== */
@media (prefers-color-scheme: dark) {
  /* The militum-fabrik plugin form (e.g. /aktiveringskod/ "Begär aktiveringskod")
     ships its own light palette (#fff inputs, #1f2937 text, #1d3557 navy legend,
     lime submit that fails AA). Theme it for dark like the CF7 forms. Global so any
     fabrik form is covered. */
  /* The wrapper itself is white via style.css `.elementor-shortcode
     .militum-fabrik-form{background-color:#fff}` — THIS was the white strips.
     Transparent so the dark #262c32 card behind shows through. */
  .militum-fabrik-form {
    background-color: transparent !important;
    color: #e6e8ea !important;
  }
  .militum-fabrik-form form {
    background: transparent !important; /* blend into the page's #262c32 form card */
    border: 0 !important;
  }
  .militum-fabrik-form label,
  .militum-fabrik-group legend { color: #e6e8ea !important; }
  .militum-fabrik-form input[type="text"],
  .militum-fabrik-form input[type="email"],
  .militum-fabrik-form input[type="tel"],
  .militum-fabrik-form input[type="url"],
  .militum-fabrik-form input[type="date"],
  .militum-fabrik-form input[type="time"],
  .militum-fabrik-form input[type="password"],
  .militum-fabrik-form input[type="number"],
  .militum-fabrik-form textarea,
  .militum-fabrik-form select {
    background: #14171a !important;
    border-color: #333b44 !important;
    color: #e6e8ea !important;
  }
  .militum-fabrik-form input::placeholder,
  .militum-fabrik-form textarea::placeholder { color: #aab2b8 !important; }
  .militum-fabrik-form input:focus,
  .militum-fabrik-form textarea:focus,
  .militum-fabrik-form select:focus { border-color: #d8a23c !important; }
  .militum-fabrik-form .militum-fabrik-outro { color: #aab2b8 !important; }
  .militum-fabrik-group + .militum-fabrik-group { border-top-color: #333b44 !important; }
  .militum-fabrik-actions { border-top-color: #333b44 !important; }
  /* submit ("Skicka in ansökan") — lime#fff fails AA AND style.css forces it
     transparent (dark text) at higher specificity. Match style.css's
     `.elementor-shortcode … button.militum-fabrik-submit` selector so we win,
     -> solid olive + white (AA-safe, clearly visible). */
  .militum-fabrik-form .militum-fabrik-submit,
  .militum-fabrik-form .mf-btn-primary,
  .elementor-shortcode .militum-fabrik-form button.militum-fabrik-submit {
    background-color: #3d4a26 !important;
    background-image: none !important;
    border: 1px solid #3d4a26 !important;
    color: #ffffff !important;
  }
  .militum-fabrik-form .militum-fabrik-submit:hover,
  .militum-fabrik-form .mf-btn-primary:hover,
  .elementor-shortcode .militum-fabrik-form button.militum-fabrik-submit:hover {
    background-color: #4a5a2e !important;
    color: #ffffff !important;
  }
}

/* ============ Offers/benefits hero (8509) — dark scrim over the light bg images ============ */
@media (prefers-color-scheme: dark) {
  /* The hero section 7a7d582 (Rectangle-16.png misty bg, behind the heading +
     subtitle) and the .militum-offers-hero search block (hero-forest.jpg) are LIGHT
     images with no overlay, so the subtitle reads light-on-light. Add a dark scrim
     (inset box-shadow tints the bg image, content stays on top) + force the subtitle
     light. The gold heading + dark search/pills are already handled. */
  .elementor-8509 .elementor-element.elementor-element-7a7d582,
  .elementor-8509 .elementor-element.elementor-element-7a7d582 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    box-shadow: inset 0 0 0 2000px rgba(20, 23, 26, 0.65) !important;
  }
  /* hero subtitle ("Exclusive offers …", var-secondary) -> light on the scrim */
  .elementor-8509 .elementor-element-af1096c,
  .elementor-8509 .elementor-element-af1096c p,
  .elementor-8509 .elementor-element-af1096c .elementor-heading-title {
    color: #e6e8ea !important;
  }
}

/* ============ Fix: "Läs mer" link-buttons in MER ÄN RABATTER (8509) ============ */
@media (prefers-color-scheme: dark) {
  /* The broad `.elementor-8509 .elementor-widget-button .elementor-button{color:#14171a}`
     rule (equal specificity 0,3,0 but LATER in source) was overriding these three
     gold link-buttons' TEXT to dark — only the icon (fill) stayed gold, hence the
     gold-arrow / dark-"Läs mer" look. Re-assert gold on the button AND its text span
     at higher specificity (0,4,0) so it wins. */
  .elementor-8509 .elementor-element-98d2984 .elementor-button,
  .elementor-8509 .elementor-element-98d2984 .elementor-button .elementor-button-text,
  .elementor-8509 .elementor-element-49fc9f9 .elementor-button,
  .elementor-8509 .elementor-element-49fc9f9 .elementor-button .elementor-button-text,
  .elementor-8509 .elementor-element-04bb1ea .elementor-button,
  .elementor-8509 .elementor-element-04bb1ea .elementor-button .elementor-button-text {
    color: #eaad2a !important;
  }
}

/* ==================== Forgot-password / Aktivera page (.elementor-10739) ==================== */
@media (prefers-color-scheme: dark) {
  .elementor.elementor-10739,
  body .elementor-10739 {
    --e-global-color-secondary: #e6e8ea !important; /* black body text -> light */
    --e-global-color-accent: #d8a23c !important;    /* olive headings/links -> gold */
  }
  /* main content + "Våra partners" sections -> page base */
  .elementor-10739 .elementor-element.elementor-element-9ad01b2:not(.elementor-motion-effects-element-type-background),
  .elementor-10739 .elementor-element.elementor-element-9ad01b2 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-10739 .elementor-element.elementor-element-ce99644:not(.elementor-motion-effects-element-type-background),
  .elementor-10739 .elementor-element.elementor-element-ce99644 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #14171a !important;
  }
  /* "Glömt lösenord?" card (WPPB recover/login, #FFFFFF) -> raised dark card; its
     text (var-secondary) lightens via the remap, and the WPPB recover/login inputs
     are themed by the existing #wppb-* dark block. */
  .elementor-10739 .elementor-element.elementor-element-18e659e:not(.elementor-motion-effects-element-type-background),
  .elementor-10739 .elementor-element.elementor-element-18e659e > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #262c32 !important;
  }
}

/* ============ Map popup: beat the inline <style> source-order win ============ */
@media (prefers-color-scheme: dark) {
  /* The popup's inline <style> (militum-maps.php, injected in the body) loads AFTER
     militum-dark.css and !important's these at EQUAL specificity, so the source was
     winning by source order — title/foot-links/foot-icons/"Läs mer" kept their
     light-mode olive(#303C19)/#444 colors = faint on the dark card. Re-assert with
     the .militum-omap__popup ancestor (higher specificity) so the dark colors win
     regardless of order. Contrast all AA on #1e2329/#262c32. */
  .militum-omap__popup .militum-omap__card-title { color: #d8a23c !important; }
  .militum-omap__popup .militum-omap__card-foot a { color: #c2c8cc !important; }
  .militum-omap__popup .militum-omap__card-foot a:hover { color: #d8a23c !important; }
  .militum-omap__popup .militum-omap__card-foot svg { color: #d8a23c !important; }
  .militum-omap__popup .militum-omap__card-more { color: #d8a23c !important; }

  .elementor-8511 .elementor-element.elementor-element-74dbdc9{
    background-color: #1e2329 !important;
  }
}

/* ==================== Site dark-audit fixes (2026-06) ==================== */
@media (prefers-color-scheme: dark) {
  /* Org-detail secondary button (shared-template id 46e8d66, "Tillbaka"): hardcodes
     a cream #F7F6F2 fill + olive #303C19 text/border (literal hex, not vars) -> a
     bright pill on the darkened org sections. UNPREFIXED so it covers every org
     detail page (like the 85f3f66/c508f7d org-template block) -> gold outline. */
  .elementor-element-46e8d66 .elementor-button {
    background-color: transparent !important;
    border-color: #d8a23c !important;
    color: #d8a23c !important;
    fill: #d8a23c !important;
  }
  .elementor-element-46e8d66 .elementor-button svg,
  .elementor-element-46e8d66 .elementor-button svg path { fill: #d8a23c !important; }
  .elementor-element-46e8d66 .elementor-button:hover,
  .elementor-element-46e8d66 .elementor-button:focus {
    background-color: #d8a23c !important;
    color: #14171a !important;
    border-color: #d8a23c !important;
  }
  .elementor-element-46e8d66 .elementor-button:hover svg path,
  .elementor-element-46e8d66 .elementor-button:focus svg path { fill: #14171a !important; }

  /* Home (Start, 2634): two #F8F6F3 hero-grid cards never darkened -> card surface. */
  .elementor-2634 .elementor-element.elementor-element-e5436dc:not(.elementor-motion-effects-element-type-background),
  .elementor-2634 .elementor-element.elementor-element-e5436dc > .elementor-motion-effects-container > .elementor-motion-effects-layer,
  .elementor-2634 .elementor-element.elementor-element-b439bb3:not(.elementor-motion-effects-element-type-background),
  .elementor-2634 .elementor-element.elementor-element-b439bb3 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #1e2329 !important;
  }
}

/* Home (2634) card titles "Vem kan bli medlem?" / "Varför bli medlem?" use
   var(--e-global-color-accent) = olive #303C19 -> dim on the dark #1e2329 cards
   (home has no blanket accent remap). Lighten just these two headings to gold. */
@media (prefers-color-scheme: dark) {
  .elementor-2634 .elementor-element-0338e4a .elementor-heading-title,
  .elementor-2634 .elementor-element-a384490 .elementor-heading-title {
    color: #d8a23c !important;
  }
}

/* Home (2634) card list items: icon-lists 72ec3b1 (Vem kan…) + 9e384f5 (Varför…)
   hardcode color:#000000. They were black-on-light before the cards were darkened;
   now black-on-dark -> convert to white. */
@media (prefers-color-scheme: dark) {
  .elementor-2634 .elementor-element-72ec3b1 .elementor-icon-list-text,
  .elementor-2634 .elementor-element-72ec3b1 .elementor-icon-list-item,
  .elementor-2634 .elementor-element-72ec3b1 .elementor-icon-list-item a,
  .elementor-2634 .elementor-element-9e384f5 .elementor-icon-list-text,
  .elementor-2634 .elementor-element-9e384f5 .elementor-icon-list-item,
  .elementor-2634 .elementor-element-9e384f5 .elementor-icon-list-item a {
    color: #ffffff !important;
  }
}