/* ==========================================================================
   Dark Mode — ETU Webb
   
   Approach: CSS custom properties on :root (light) toggled via
   html[data-theme="dark"].  Header-first implementation.
   
   WCAG AA contrast targets:
   - Normal text:  4.5:1 minimum
   - Large text:   3:1 minimum
   - UI components: 3:1 minimum
   
   Dark bg #111827 with #f0f0f0 text = 15.4:1  ✓
   Dark bg #111827 with #93c5fd link = 6.8:1    ✓
   Dark bg #1e293b input with #e5e7eb text = 11.1:1 ✓
   ========================================================================== */

/* ---------- Light-mode defaults (custom-properties) ---------- */
:root {
  --dm-bg-header:        #ffffff;
  --dm-bg-input:         #ffffff;
  --dm-text-nav:         #000000;
  --dm-text-nav-hover:   #1e2945;
  --dm-text-input:       #000;
  --dm-border-input:     #000000;
  --dm-border-underline: #1e2945;
  --dm-accent:           #1E2945;
  --dm-accent-hover:     rgba(30, 41, 69, 0.85);
  --dm-btn-text:         #ffffff;
  --dm-search-btn-bg:    #1E2945;
  --dm-placeholder:      #999; 
  --dm-submenu-bg:       #232A44;
  --dm-submenu-text:     #fff;
  --dm-submenu-border:   rgb(204 204 204 / 20%);
  --dm-toggle-text:      #1E2945;
  --dm-toggle-border:    #1E2945;

  /* Focus ring (same in both modes for consistency) */
  --dm-focus-inner:      #F9F9D1;
  --dm-focus-ring:       #396196;
  --dm-focus-outer:      #F9F9D1;

  /* Full-page variables — light defaults (no-op, matches existing styles) */
  --dm-bg-body:          #ffffff;
  --dm-bg-surface:       #f7f7f7;      /* cards, boxes, slide-content */
  --dm-bg-footer:        #1E2945;
  --dm-bg-socket:        #111827;
  --dm-text-body:        #1E2945;
  --dm-text-heading:     #1E2945;
  --dm-text-meta:        #4b5563;
  --dm-text-link:        #1E2945;
  --dm-text-link-hover:  #B31B1B;
  --dm-border-general:   #e5e7eb;
  --dm-btn-bg:           #1E2945;
  --dm-btn-border:       #ffffff;
  --dm-btn-hover-bg:     #ffffff;
  --dm-btn-hover-text:   #0c0723;
  --dm-btn-hover-border: #0c0723;
  --dm-icon-filter:      none;
}

/* ---------- Dark-mode overrides ---------- */
html[data-theme="dark"] {
  /* Background: deep navy-grey, not pure black — easier on eyes */
  --dm-bg-header:        #111827;
  --dm-bg-input:         #1e293b;

  /* Text: off-white for body, soft blue for links — all AA+ */
  --dm-text-nav:         #f0f0f0;       /* 15.4:1 on #111827 */
  --dm-text-nav-hover:   #93c5fd;       /* 6.8:1  on #111827 */
  --dm-text-input:       #e5e7eb;       /* 11.1:1 on #1e293b */
  --dm-border-input:     #64748b;       /* 3.7:1  on #111827 — AA UI ✓ */
  --dm-border-underline: #93c5fd;

  --dm-accent:           #93c5fd;       /* 6.8:1  on #111827 */
  --dm-accent-hover:     rgba(147, 197, 253, 0.85);
  --dm-btn-text:         #111827;
  --dm-search-btn-bg:    #93c5fd;
    --dm-placeholder:      #bfc5cc;

  --dm-submenu-bg:       #1e293b;
  --dm-submenu-text:     #f0f0f0;
  --dm-submenu-border:   rgba(148, 163, 184, 0.2);

  --dm-toggle-text:      #f0f0f0;
  --dm-toggle-border:    #64748b;

  --dm-focus-inner:      #1e293b;
  --dm-focus-ring:       #64748b;
  --dm-focus-outer:      #1e293b;

  /* Full-page overrides — soft dark palette */
  --dm-bg-body:          #111827;       /* deep navy-grey, not pure black */
  --dm-bg-surface:       #1e293b;       /* cards, boxes — slightly lighter */
  --dm-bg-footer:        #0d1117;       /* footer slightly darker than body */
  --dm-bg-socket:        #080c14;       /* socket bar darkest */
  --dm-text-body:        #e2e8f0;       /* off-white body text — 13.5:1 on #111827 ✓ */
  --dm-text-heading:     #f1f5f9;       /* headings slightly brighter — 14.8:1 ✓ */
  --dm-text-meta:        #94a3b8;       /* meta/dates — 4.6:1 ✓ */
  --dm-text-link:        #93c5fd;       /* soft blue links — 6.8:1 ✓ */
  --dm-text-link-hover:  #bfdbfe;       /* lighter blue on hover — 9.6:1 ✓ */
  --dm-border-general:   rgba(148, 163, 184, 0.2);
  --dm-btn-bg:           rgba(147, 197, 253, 0.12); /* subtle blue tint — not flat pastel */
  --dm-btn-border:       #93c5fd;
  --dm-btn-hover-bg:     #93c5fd;
  --dm-btn-hover-text:   #000000;       /* pure black on #93c5fd = 11.7:1 AAA ✓ */
  --dm-btn-hover-border: #93c5fd;
  --dm-icon-filter:      brightness(0) invert(1);
}

/* ====================================================================
   HEADER
   ==================================================================== */

/* Header wrapper backgrounds — high specificity to beat inline styles */
html[data-theme="dark"] #header,
html[data-theme="dark"] #header_meta,
html[data-theme="dark"] #header_main,
html[data-theme="dark"] #header_main .container,
html[data-theme="dark"] .header_bg,
html[data-theme="dark"] .header_color {
  background-color: var(--dm-bg-header) !important;
}

/* ---- Nav links ---- */
/* Kill ALL backgrounds that Enfold dynamic CSS + child theme set on nav items.
   Enfold's dynamic-css.php sets background-color on .header_color a, .header_color span, etc.
   Child theme sets #f2f2f2 on .current-menu-parent > a.
   We need ultra-high specificity + !important to win. */
html[data-theme="dark"] #top #header .av-main-nav > li > a,
html[data-theme="dark"] #top #header .av-main-nav > li > a:visited,
html[data-theme="dark"] #top #header .av-main-nav > li.current-menu-parent > a,
html[data-theme="dark"] #top #header .av-main-nav > li.current-menu-item > a,
html[data-theme="dark"] #top #header .av-main-nav > li.current-menu-ancestor > a,
html[data-theme="dark"] .header_color .av-main-nav > li > a,
html[data-theme="dark"] .header_color a.av-menu-text {
  color: var(--dm-text-nav) !important;
  background: transparent !important;
  background-color: transparent !important;
  transition: background-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
}

/* Hover: box background + text underline */
html[data-theme="dark"] #top #header .av-main-nav > li > a:hover {
  background-color: rgba(240, 240, 240, 0.12) !important;
  border-radius: 4px;
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Hide the sliding underline pseudo-element in dark mode */
html[data-theme="dark"] #top #header .av-main-nav > li:after {
  display: none !important;
}
html[data-theme="dark"] #top #header .av-main-nav > li.current-menu-item > a,
html[data-theme="dark"] #top #header .av-main-nav > li.current-menu-parent > a,
html[data-theme="dark"] #top #header .av-main-nav > li.current-menu-ancestor > a {
  background-color: rgba(240, 240, 240, 0.12) !important;
  border: none !important;
  border-radius: 4px;
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Enfold avia-menu-fx highlight bar — force dark-mode accent */
html[data-theme="dark"] .header_color .avia-menu-fx,
html[data-theme="dark"] .header_color .avia-menu-fx .avia-arrow {
  background-color: var(--dm-accent) !important;
}

/* Nav separator line between items — needs 3:1 for UI components */
html[data-theme="dark"] #top #header .av-main-nav > li:before {
  background: var(--dm-border-input) !important;  /* #64748b — 3.7:1 ✓ */
}

/* Dropdown arrow SVG pseudo-element — the SVG has hardcoded fill:#1E2945
   (dark navy), invisible on the dark header.  Use filter to make it white. */
html[data-theme="dark"] #top #header .av-main-nav > li.menu-item-has-children > a:after,
html[data-theme="dark"] #top #header .av-main-nav > li.menu-item-has-children a:after {
  filter: brightness(0) invert(1) !important;
}

/* On hover keep arrow white (text stays light) */
html[data-theme="dark"] #top #header .av-main-nav > li.menu-item-has-children > a:hover:after {
  filter: brightness(0) invert(1) !important;
}

/* Ensure spans inside nav links inherit transparent bg at ALL widths.
   Enfold dynamic CSS sets background-color on .header_color span etc.
   Exclude hamburger spans so .av-hamburger-inner keeps its bar color. */
html[data-theme="dark"] #top #header .av-main-nav > li > a span:not(.av-hamburger-inner):not(.av-hamburger-box):not(.av-hamburger),
html[data-theme="dark"] .header_color .main_menu a span:not(.av-hamburger-inner):not(.av-hamburger-box):not(.av-hamburger) {
  color: inherit !important;
  background-color: transparent !important;
  background: transparent !important;
}

/* Sub-menu UL wrappers — Enfold dynamic CSS sets #fff on these containers */
html[data-theme="dark"] .header_color .main_menu ul ul,
html[data-theme="dark"] .header_color .avia_mega_div,
html[data-theme="dark"] .header_color .pointer_arrow_wrap .pointer_arrow,
html[data-theme="dark"] .header_color .av-subnav-menu > li ul,
html[data-theme="dark"] #top .av-main-nav .sub-menu {
  background-color: var(--dm-submenu-bg) !important;
}

/* Header transparency becomes opaque at responsive breakpoints — override */
html[data-theme="dark"] #top #wrap_all .av_header_transparency {
  background-color: var(--dm-bg-header) !important;
}

/* ---- Sub-menus / dropdowns ---- */
html[data-theme="dark"] #top .sub-menu li a,
html[data-theme="dark"] .header_color .sub-menu li a,
html[data-theme="dark"] #top #header .av-main-nav ul li a {
  background: var(--dm-submenu-bg) !important;
  color: var(--dm-submenu-text) !important;
  border-bottom-color: var(--dm-submenu-border) !important;
}

html[data-theme="dark"] #top .sub-menu li a:hover,
html[data-theme="dark"] .header_color .sub-menu li a:hover,
html[data-theme="dark"] #top #header .av-main-nav ul li a:hover {
  background: #334155 !important;            /* subtle lighter surface — 11.3:1 white text ✓ */
  color: var(--dm-text-nav-hover) !important; /* #93c5fd — 4.7:1 on #334155 ✓ */
}

/* ---- Logo ---- */
/* Inline SVG uses fill="currentColor" — just set color on the link. */
html[data-theme="dark"] #top #header .logo a {
  color: rgba(240, 240, 240, 0.9);
}

/* ---- Search bar ---- */
/* Beat: #top #s { border: 1px solid #000000; color: #999 !important } */
html[data-theme="dark"] #top #s,
html[data-theme="dark"] #top .main_color input[type='text'] {
  background-color: var(--dm-bg-input) !important;
  border: 1px solid var(--dm-border-input) !important;
  color: var(--dm-text-input) !important;
}

html[data-theme="dark"] #top #s::placeholder {
  color: var(--dm-placeholder) !important;
}

html[data-theme="dark"] #top #header #searchsubmit {
  background-color: var(--dm-search-btn-bg) !important;
  color: var(--dm-btn-text) !important;
}

html[data-theme="dark"] #top #searchsubmit:hover {
  opacity: 0.9;
}

/* ---- Meta bar (top bar with secondary nav) ---- */
html[data-theme="dark"] #header_meta {
  border-bottom-color: var(--dm-submenu-border) !important;
}

html[data-theme="dark"] #header_meta a,
html[data-theme="dark"] #header_meta .sub_menu a,
html[data-theme="dark"] #header_meta .phone-info span {
  color: var(--dm-text-nav) !important;
}

html[data-theme="dark"] #header_meta a:hover {
  color: var(--dm-text-nav-hover) !important;
}

/* ====================================================================
   DARK MODE TOGGLE BUTTON
   ==================================================================== */

/* Layout: place toggle inline beside the search */
.custom_search_inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--dm-toggle-border);
  border-radius: 6px;
  background: transparent;
  color: var(--dm-toggle-text);
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  vertical-align: middle;
  flex-shrink: 0;
}

.dm-toggle:hover {
  background-color: var(--dm-accent);
  color: var(--dm-btn-text);
}

/* Use the same focus style as the rest of the site */
.dm-toggle:focus-visible {
  outline: 2px solid var(--dm-focus-ring) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* Icon inside the button */
.dm-toggle__icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.dm-toggle__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Show/hide the correct label + icon per theme */
.dm-toggle__label--light,
.dm-toggle__icon--light {
  display: inline-flex;
}
.dm-toggle__label--dark,
.dm-toggle__icon--dark {
  display: none;
}

html[data-theme="dark"] .dm-toggle__label--light,
html[data-theme="dark"] .dm-toggle__icon--light {
  display: none;
}
html[data-theme="dark"] .dm-toggle__label--dark,
html[data-theme="dark"] .dm-toggle__icon--dark {
  display: inline-flex;
}

/* ====================================================================
   HAMBURGER ICON — DARK MODE
   The Enfold burger_color DB setting is #1e2945 (dark navy), nearly
   invisible on the dark header (#111827).  Enfold's dynamic-css.php
   generates selectors that use BOTH background-color: (for burger_color)
   and background: shorthand (for header-transparency).  We use the
   background: shorthand with !important to override both.
   ==================================================================== */

html[data-theme="dark"] .av-hamburger-box {
  height: 24px !important;
  overflow: visible !important;
}

/* ---- Closed state (three bars) ---- */
html[data-theme="dark"] #top #header .header_color .av-hamburger-inner,
html[data-theme="dark"] #top #header .header_color .av-hamburger-inner::before,
html[data-theme="dark"] #top #header .header_color .av-hamburger-inner::after,
html[data-theme="dark"] #top .header_color div .av-hamburger-inner,
html[data-theme="dark"] #top .header_color div .av-hamburger-inner::before,
html[data-theme="dark"] #top .header_color div .av-hamburger-inner::after,
html[data-theme="dark"] .av_header_transparency div .av-hamburger-inner,
html[data-theme="dark"] .av_header_transparency div .av-hamburger-inner::before,
html[data-theme="dark"] .av_header_transparency div .av-hamburger-inner::after,
html[data-theme="dark"] .av-hamburger-inner,
html[data-theme="dark"] .av-hamburger-inner::before,
html[data-theme="dark"] .av-hamburger-inner::after {
  background: #f0f0f0 !important;
}

/* ---- Open state (X close button) ---- */
html[data-theme="dark"].av-burger-overlay-active #top .av-hamburger-inner,
html[data-theme="dark"].av-burger-overlay-active #top .av-hamburger-inner::before,
html[data-theme="dark"].av-burger-overlay-active #top .av-hamburger-inner::after,
html[data-theme="dark"].av-burger-overlay-active .av-hamburger-inner,
html[data-theme="dark"].av-burger-overlay-active .av-hamburger-inner::before,
html[data-theme="dark"].av-burger-overlay-active .av-hamburger-inner::after,
html[data-theme="dark"] .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner,
html[data-theme="dark"] .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::before,
html[data-theme="dark"] .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::after {
  background: #fff !important;
}

/* Hover on the X close button — invert bars to dark */
html[data-theme="dark"].av-burger-overlay-active .av-burger-menu-main > a:hover .av-hamburger-inner,
html[data-theme="dark"].av-burger-overlay-active .av-burger-menu-main > a:hover .av-hamburger-inner::before,
html[data-theme="dark"].av-burger-overlay-active .av-burger-menu-main > a:hover .av-hamburger-inner::after {
  background: var(--dm-bg-header) !important;
}

/* ====================================================================
   BURGER OVERLAY / SLIDE-OUT MENU — DARK MODE
   ==================================================================== */

html[data-theme="dark"] .av-burger-overlay-bg {
  background: var(--dm-bg-header) !important;
}

html[data-theme="dark"] .av-burger-overlay-scroll {
  background: var(--dm-bg-header) !important;
}

html[data-theme="dark"] #top #av-burger-menu-ul a,
html[data-theme="dark"] .html_av-overlay-side #top #wrap_all div .av-burger-overlay-scroll #av-burger-menu-ul a {
  color: var(--dm-text-nav) !important;
  border-color: var(--dm-submenu-border) !important;
}

html[data-theme="dark"] #top #av-burger-menu-ul a:hover,
html[data-theme="dark"] .html_av-overlay-side #top #wrap_all div .av-burger-overlay-scroll #av-burger-menu-ul a:hover,
html[data-theme="dark"] .html_av-overlay-side #top #wrap_all div .av-burger-overlay-scroll #av-burger-menu-ul .current_page_item a {
  background-color: var(--dm-accent) !important;
  color: var(--dm-btn-text) !important;
}

/* Mobile search icon — SVG has hardcoded fill:#1E2945, invert to white */
html[data-theme="dark"] .mobile-search {
  filter: brightness(0) invert(1) !important;
}

/* ====================================================================
   MOBILE — EXTRA SIDE PADDING
   ==================================================================== */

@media only screen and (max-width: 989px) {
  html[data-theme="dark"] #top #header #header_main .container,
  html[data-theme="dark"] #top #header #header_main .inner-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* ====================================================================
   FULL-PAGE DARK MODE — BODY, CONTENT, SECTIONS
   ====================================================================

   Palette philosophy (soft for the eyes):
   - bg-body    #111827  deep navy-grey — avoids pure black OLED harshness
   - bg-surface #1e293b  cards/boxes — subtle lift without glaring contrast
   - text-body  #e2e8f0  warm off-white — 13.5:1 on body bg ✓
   - text-head  #f1f5f9  headings — 14.8:1 ✓
   - text-meta  #94a3b8  muted for dates/metadata — 4.6:1 ✓ (AA normal text)
   - link       #93c5fd  soft blue — 6.8:1 ✓
   - link hover #bfdbfe  lighter blue — 9.6:1 ✓

   All colour pairs verified against WCAG 2.1 AA.
   ==================================================================== */

/* ---- Body & main wrappers ---- */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] #top,
html[data-theme="dark"] #wrap_all,
html[data-theme="dark"] #main,
html[data-theme="dark"] .container_wrap,
html[data-theme="dark"] .container,
html[data-theme="dark"] .content {
  background-color: var(--dm-bg-body) !important;
  color: var(--dm-text-body) !important;
}

/* Enfold dynamic CSS sets color/background on .main_color and ALL its descendants.
   We must override every element type that dynamic-css.php targets. */
html[data-theme="dark"] .main_color,
html[data-theme="dark"] .main_color div,
html[data-theme="dark"] .main_color section,
html[data-theme="dark"] .main_color article,
html[data-theme="dark"] .main_color main,
html[data-theme="dark"] .main_color aside,
html[data-theme="dark"] .main_color nav,
html[data-theme="dark"] .main_color span,
html[data-theme="dark"] .main_color p,
html[data-theme="dark"] .main_color li,
html[data-theme="dark"] .main_color dt,
html[data-theme="dark"] .main_color dd,
html[data-theme="dark"] .main_color address,
html[data-theme="dark"] .main_color blockquote,
html[data-theme="dark"] .main_color figcaption,
html[data-theme="dark"] .main_color label,
html[data-theme="dark"] .main_color legend,
html[data-theme="dark"] .main_color .site-background,
html[data-theme="dark"] .main_color .grid-content,
html[data-theme="dark"] .main_color .av-catalogue-item,
html[data-theme="dark"] .main_color .av-catalogue-content {
  /* background-color: var(--dm-bg-body) !important; */
  color: var(--dm-text-body) !important;
}

/* Enfold dynamic-css sets border-color on practically everything via .main_color */
html[data-theme="dark"] .main_color,
html[data-theme="dark"] .main_color div,
html[data-theme="dark"] .main_color header,
html[data-theme="dark"] .main_color footer,
html[data-theme="dark"] .main_color article,
html[data-theme="dark"] .main_color section,
html[data-theme="dark"] .main_color fieldset,
html[data-theme="dark"] .main_color table,
html[data-theme="dark"] .main_color caption,
html[data-theme="dark"] .main_color tbody,
html[data-theme="dark"] .main_color tfoot,
html[data-theme="dark"] .main_color thead,
html[data-theme="dark"] .main_color tr,
html[data-theme="dark"] .main_color th,
html[data-theme="dark"] .main_color td {
  border-color: var(--dm-border-general) !important;
}

/* ---- Headings ---- */
html[data-theme="dark"] .main_color h1,
html[data-theme="dark"] .main_color h2,
html[data-theme="dark"] .main_color h3,
html[data-theme="dark"] .main_color h4,
html[data-theme="dark"] .main_color h5,
html[data-theme="dark"] .main_color h6,
html[data-theme="dark"] .main_color .heading-color,
html[data-theme="dark"] .main_color .av-special-heading-tag,
html[data-theme="dark"] #top h1,
html[data-theme="dark"] #top h2,
html[data-theme="dark"] #top h3,
html[data-theme="dark"] #top h4 {
  color: var(--dm-text-heading) !important;
}

/* ---- Links ---- */
html[data-theme="dark"] .main_color a,
html[data-theme="dark"] .main_color a:visited,
html[data-theme="dark"] #top .main_color a {
  color: var(--dm-text-link) !important;
}

html[data-theme="dark"] .main_color a:hover,
html[data-theme="dark"] .main_color a:focus,
html[data-theme="dark"] #top .main_color a:hover {
  color: var(--dm-text-link-hover) !important;
}

/* ---- Meta / dates / captions ---- */
html[data-theme="dark"] .main_color .meta-color,
html[data-theme="dark"] .main_color .sidebar,
html[data-theme="dark"] .main_color .minor-meta,
html[data-theme="dark"] .main_color .slide-meta,
html[data-theme="dark"] .main_color .slide-meta a,
html[data-theme="dark"] .main_color .slide-meta-time,
html[data-theme="dark"] .main_color .taglist,
html[data-theme="dark"] .main_color .taglist a,
html[data-theme="dark"] .main_color .commentmetadata a,
html[data-theme="dark"] .main_color blockquote {
  color: var(--dm-text-meta) !important;
}

/* ---- Startpage: "Till ETU" section ---- */
html[data-theme="dark"] #top .till-etu-sec {
  background-color: var(--dm-bg-body) !important;
}

html[data-theme="dark"] #top .till-etu-sec p,
html[data-theme="dark"] #top .till-etu-sec span {
  color: var(--dm-text-body) !important;
}

html[data-theme="dark"] #top .till-etu-sec h1,
html[data-theme="dark"] #top .till-etu-sec h2,
html[data-theme="dark"] #top .till-etu-sec h3,
html[data-theme="dark"] #top .till-etu-sec h3 a,
html[data-theme="dark"] #top .till-etu-sec .av-subheading p {
  color: var(--dm-text-heading) !important;
}

/* Card backgrounds inside "Till ETU" */
html[data-theme="dark"] #top .till-etu-sec .flex_column_table .flex_column .av_textblock_section {
  background: var(--dm-bg-surface) !important;
}

/* ---- "Om oss" section ---- */
html[data-theme="dark"] #top .om-oss-sec {
  background-color: var(--dm-bg-body) !important;
}

html[data-theme="dark"] #top .om-oss-sec .flex_cell p,
html[data-theme="dark"] #top .om-oss-sec .flex_cell span {
  color: var(--dm-text-body) !important;
}

html[data-theme="dark"] #top .om-oss-sec h2,
html[data-theme="dark"] #top .om-oss-sec h3 {
  color: var(--dm-text-heading) !important;
}

/* ---- "Hur hittar du?" section ---- */
html[data-theme="dark"] #top .har-finna-sec p {
  color: var(--dm-text-body) !important;
}

html[data-theme="dark"] #top .har-finna-sec h2 {
  color: var(--dm-text-heading) !important;
}

/* ---- "Vara" section (news/posts slider) ---- */
html[data-theme="dark"] #top .vara-sec .slide-content {
  background: var(--dm-bg-surface) !important;
}

html[data-theme="dark"] #top .vara-sec .slide-content h3,
html[data-theme="dark"] #top .vara-sec .slide-content h3 a {
  color: var(--dm-text-heading) !important;
}

html[data-theme="dark"] #top .vara-sec .slide-content .slide-entry-excerpt,
html[data-theme="dark"] #top .vara-sec .slide-content .slide-entry-excerpt p {
  color: var(--dm-text-body) !important;
}

html[data-theme="dark"] #top .vara-sec .slide-meta-time {
  color: var(--dm-text-meta) !important;
}

/* Calendar icon SVG — hardcoded dark fill */
html[data-theme="dark"] #top .slide-meta .slide-meta-time:before {
  filter: var(--dm-icon-filter) !important;
}

/* ---- "Kund" section ---- */
html[data-theme="dark"] #top .kund-sec {
  background-color: var(--dm-bg-body) !important;
}

html[data-theme="dark"] #top .kund-sec p,
html[data-theme="dark"] #top .kund-sec span {
  color: var(--dm-text-body) !important;
}

html[data-theme="dark"] #top .kund-sec h2,
html[data-theme="dark"] #top .kund-sec h3 {
  color: var(--dm-text-heading) !important;
}

/* ---- FontAwesome chevron icons (\f105) before headings ---- */
/* These are hardcoded #1e2945 in child theme — invisible on dark bg */
html[data-theme="dark"] #top .box-content h3:before,
html[data-theme="dark"] #top .custom-post-type-sec .box-content h3:before,
html[data-theme="dark"] #top .custom-listing .box-content h3:before,
html[data-theme="dark"] .html_elegant-blog html[data-theme="dark"] #top .box-content h3:before,
html[data-theme="dark"] #top .till-etu-sec .flex_column_table .flex_column h3:before,
html[data-theme="dark"] #top .map-design-sec h3:before,
html[data-theme="dark"] #top .new-sidebar ul li a:before {
  color: #ffffff !important;
}

/* ---- .new-sidebar widget (news listing page sidebar) ---- */
html[data-theme="dark"] #top .new-sidebar ul {
  background: var(--dm-bg-surface) !important;
}
html[data-theme="dark"] #top .new-sidebar ul li a {
  color: var(--dm-text-link) !important;
}
html[data-theme="dark"] #top .new-sidebar ul li a:hover {
  color: var(--dm-text-link-hover) !important;
}
/* fastview-wrapper (quick-filter sidebar on listing page) */
html[data-theme="dark"] .fastview-wrapper {
  background: var(--dm-bg-surface) !important;
  color: var(--dm-text-body) !important;
}
html[data-theme="dark"] .fastview-wrapper ul.fastview li a {
  color: var(--dm-text-link) !important;
}

/* ---- Enfold icon boxes (lightbulb, checkmark, etc.) ---- */
/* dynamic-css.php sets color via .main_color heading-color and primary-background */
html[data-theme="dark"] .main_color .iconbox_icon,
html[data-theme="dark"] .main_color a.iconbox_icon,
html[data-theme="dark"] .main_color .av-icon-char {
  color: var(--dm-text-link) !important;
}

html[data-theme="dark"] .main_color .iconbox_top .iconbox_icon,
html[data-theme="dark"] .main_color.iconbox_top .iconbox_icon {
  background-color: var(--dm-bg-surface) !important;
  color: var(--dm-text-link) !important;
}

html[data-theme="dark"] .iconbox_content {
  background-color: var(--dm-bg-surface) !important;
}

html[data-theme="dark"] .iconbox_content .iconbox_content_title {
  color: var(--dm-text-heading) !important;
}

html[data-theme="dark"] .iconbox_content p {
  color: var(--dm-text-body) !important;
}

html[data-theme="dark"] .iconbox_content p a {
  color: var(--dm-text-link) !important;
}

html[data-theme="dark"] .iconbox_content p a:hover {
  color: var(--dm-text-link-hover) !important;
}

/* ---- Footer person/user SVG icon (fill #121212 — invisible on dark footer) ---- */
html[data-theme="dark"] #top #footer .flex_column:last-child p a:before {
  filter: brightness(0) invert(1) !important;
}

/* Reset filter on hover (switches to user-new-hover.svg which is white fill) */
html[data-theme="dark"] #top #footer .flex_column:last-child p a:hover:before {
  filter: none !important;
}

/* ---- Card hover states ---- */
/* In light mode hover bg is #1e2945 (navy) but in dark mode that equals
   --dm-bg-surface, so we lighten to create visual distinction */
html[data-theme="dark"] #top .till-etu-sec .flex_column_table .flex_column:hover .av_textblock_section {
  background: #334155 !important;
}

html[data-theme="dark"] #top .till-etu-sec .flex_column_table .flex_column:hover .av_textblock_section h3,
html[data-theme="dark"] #top .till-etu-sec .flex_column_table .flex_column:hover .av_textblock_section h3 a,
html[data-theme="dark"] #top .till-etu-sec .flex_column_table .flex_column:hover .av_textblock_section p,
html[data-theme="dark"] #top .till-etu-sec .flex_column_table .flex_column:hover .av_textblock_section h3:before {
  color: #ffffff !important;
}

html[data-theme="dark"] #top .third-row-lisitng .categoty-boxes-inner .boxes-inner:hover .box-content {
  background: #334155 !important;
}

html[data-theme="dark"] #top .third-row-lisitng .categoty-boxes-inner .boxes-inner:hover .box-content h3,
html[data-theme="dark"] #top .third-row-lisitng .categoty-boxes-inner .boxes-inner:hover .box-content h3:before,
html[data-theme="dark"] #top .third-row-lisitng .categoty-boxes-inner .boxes-inner:hover .box-content p,
html[data-theme="dark"] #top .third-row-lisitng .categoty-boxes-inner .boxes-inner:hover .box-content > span {
  color: #ffffff !important;
}

html[data-theme="dark"] #top .map-design-sec .flex_column .av_textblock_section:hover h3:before {
  color: #ffffff !important;
}

/* ---- Map / office-location cards ("Här finns vi") ---- */
html[data-theme="dark"] #top .map-design-sec .flex_column .av_textblock_section {
  background-color: var(--dm-bg-surface) !important;
}

html[data-theme="dark"] #top .map-design-sec .flex_column .av_textblock_section h3 {
  color: var(--dm-text-heading) !important;
}

html[data-theme="dark"] #top .map-design-sec .flex_column .av_textblock_section h5 a {
  color: var(--dm-text-link) !important;
}

html[data-theme="dark"] #top .map-design-sec .flex_column .av_textblock_section p,
html[data-theme="dark"] #top .map-design-sec .flex_column .av_textblock_section p a {
  color: var(--dm-text-body) !important;
}

/* Hover — lighten bg so it's distinct from the dark surface */
html[data-theme="dark"] #top .map-design-sec .flex_column .av_textblock_section:hover {
  background: #334155 !important;
}

html[data-theme="dark"] #top .map-design-sec .flex_column .av_textblock_section:hover h3,
html[data-theme="dark"] #top .map-design-sec .flex_column .av_textblock_section:hover h5 a,
html[data-theme="dark"] #top .map-design-sec .flex_column .av_textblock_section:hover p,
html[data-theme="dark"] #top .map-design-sec .flex_column .av_textblock_section:hover p a {
  color: #ffffff !important;
}

/* Map iframe — subtle border so it doesn't float in darkness */
html[data-theme="dark"] .map-design-sec iframe {
  border: 1px solid var(--dm-border-general) !important;
}

/* ---- Category boxes / item boxes (listing pages & startpage) ---- */
html[data-theme="dark"] .box-content {
  background: var(--dm-bg-surface) !important;
}

html[data-theme="dark"] #top .iteam-boxes .iteam-boxes-inner .box-content h3 {
  color: var(--dm-text-heading) !important;
}

html[data-theme="dark"] #top .iteam-boxes .iteam-boxes-inner .box-content > span,
html[data-theme="dark"] .box-icon .custom a {
  color: var(--dm-text-body) !important;
}

html[data-theme="dark"] .box-icon .custom a:hover span,
html[data-theme="dark"] .box-icon .custom a:hover,
html[data-theme="dark"] #top .categoty-boxes-inner .boxes-inner:hover .box-content a:hover i,
html[data-theme="dark"] #top .categoty-boxes-inner .boxes-inner:hover .box-content a:hover i:before {
  color: var(--dm-text-link-hover) !important;
}

html[data-theme="dark"] #top .iteam-boxes .iteam-boxes-inner .img-box {
  background-color: var(--dm-bg-surface) !important;
}

/* ---- Categoty boxes (visitkort etc.) ---- */
html[data-theme="dark"] .categoty-boxes-inner .boxes-inner {
  background-color: var(--dm-bg-surface) !important;
}

/* Hover — lighten card background so the hover is visible in dark mode */
html[data-theme="dark"] .categoty-boxes-inner .boxes-inner:hover .box-content {
  background: #334155 !important;
}

html[data-theme="dark"] .categoty-boxes-inner .boxes-inner:hover .box-content h3,
html[data-theme="dark"] .categoty-boxes-inner .boxes-inner:hover .box-content h3:before,
html[data-theme="dark"] .categoty-boxes-inner .boxes-inner:hover .box-content p,
html[data-theme="dark"] .categoty-boxes-inner .boxes-inner:hover .box-content span,
html[data-theme="dark"] .categoty-boxes-inner .boxes-inner:hover .box-content a,
html[data-theme="dark"] .categoty-boxes-inner .boxes-inner:hover .box-content a i {
  color: #ffffff !important;
}

html[data-theme="dark"] .categoty-boxes-inner .boxes-inner:hover .box-content a:hover,
html[data-theme="dark"] .categoty-boxes-inner .boxes-inner:hover .box-content a:hover span {
  color: #ffffff !important;
}

html[data-theme="dark"] .categoty-boxes-inner .boxes-inner .box-content h3 {
  color: var(--dm-text-heading) !important;
}

html[data-theme="dark"] .categoty-boxes-inner .boxes-inner .box-content > span {
  color: var(--dm-text-body) !important;
}

/* Visitkort-specific-class — span text (role, location) has hardcoded #1E2945 */
html[data-theme="dark"] .categoty-boxes.visitkort-specific-class .categoty-boxes-inner .iteam-boxes-inner span {
  color: var(--dm-text-body) !important;
}

html[data-theme="dark"] .categoty-boxes.visitkort-specific-class .box-icon .custom a span {
  color: var(--dm-text-body) !important;
}

html[data-theme="dark"] .categoty-boxes.visitkort-specific-class .box-icon .custom a:hover,
html[data-theme="dark"] .categoty-boxes.visitkort-specific-class .box-icon .custom a:hover span {
  color: #ffffff !important;
}

/* ---- Visitkort blog-template cards ---- */
html[data-theme="dark"] #top .visitkort-sec.template-blog .post-entry {
  background: var(--dm-bg-surface) !important;
}

html[data-theme="dark"] #top .visitkort-sec .entry-content-header h2,
html[data-theme="dark"] #top .visitkort-sec .entry-content-header h2 a {
  color: var(--dm-text-heading) !important;
}

html[data-theme="dark"] #top .visitkort-sec .entry-content .avia_textblock p {
  color: var(--dm-text-body) !important;
}

html[data-theme="dark"] #top .visitkort-sec .entry-content .avia_textblock p a {
  color: var(--dm-text-body) !important;
}

html[data-theme="dark"] #top .visitkort-sec .entry-content .avia_textblock p a:hover {
  color: var(--dm-text-link-hover) !important;
}

/* ---- Buttons (global) ---- */
html[data-theme="dark"] #top .avia-button {
  background: var(--dm-btn-bg) !important;
  color: #ffffff !important;
  border-color: var(--dm-btn-border) !important;
}

html[data-theme="dark"] #top a.avia-button:before {
  color: #ffffff !important;
}

html[data-theme="dark"] #top .avia-button:hover {
  background: var(--dm-btn-hover-bg) !important;
  color: var(--dm-btn-hover-text) !important;
  border-color: var(--dm-btn-hover-border) !important;
}

html[data-theme="dark"] #top .avia-button:hover:before {
  color: var(--dm-btn-hover-text) !important;
}

/* YSM section button ::after — outline style: white text/icon */
html[data-theme="dark"] #top .ysm-sec .avia-button:after {
  color: #ffffff !important;
}

/* "Hitta" section button variant — transparent bg with outline */
html[data-theme="dark"] #top .har-finna-sec .avia-button {
  background: transparent !important;
  color: var(--dm-text-link) !important;
  border-color: var(--dm-text-link) !important;
}

html[data-theme="dark"] #top .har-finna-sec .avia-button:before {
  color: var(--dm-text-link) !important;
}

html[data-theme="dark"] #top .har-finna-sec .avia-button:hover {
  background: var(--dm-text-link) !important;
  color: var(--dm-bg-body) !important;
}

html[data-theme="dark"] #top .har-finna-sec .avia-button:hover:before {
  color: var(--dm-bg-body) !important;
}

/* Form submit buttons */
html[data-theme="dark"] #top .wpcf7-form input[type="submit"] {
  background-color: var(--dm-btn-bg) !important;
  color: #ffffff !important;
  border-color: var(--dm-btn-border) !important;
}

html[data-theme="dark"] #top .wpcf7-form input[type="submit"]:hover {
  background-color: var(--dm-btn-hover-bg) !important;
  color: var(--dm-btn-hover-text) !important;
  border-color: var(--dm-btn-hover-border) !important;
}

/* Submit arrow SVG — outline-style button has white text, so arrow stays white.
   On hover the bg fills solid blue so arrow flips to dark. */
html[data-theme="dark"] #top .wpcf7-form input[type="submit"] {
  background-image: url(../img/right-arrow-1.svg) !important;
}

html[data-theme="dark"] #top .wpcf7-form input[type="submit"]:hover {
  background-image: url(../img/right-arrow-hover.svg) !important;
}

/* ---- Forms & inputs (outside header) ---- */
html[data-theme="dark"] .main_color input[type="text"],
html[data-theme="dark"] .main_color input[type="email"],
html[data-theme="dark"] .main_color input[type="url"],
html[data-theme="dark"] .main_color input[type="tel"],
html[data-theme="dark"] .main_color input[type="password"],
html[data-theme="dark"] .main_color input[type="search"],
html[data-theme="dark"] .main_color input[type="number"],
html[data-theme="dark"] .main_color textarea,
html[data-theme="dark"] .main_color select {
  background-color: var(--dm-bg-surface) !important;
  color: var(--dm-text-body) !important;
  border-color: var(--dm-border-input) !important;
}

html[data-theme="dark"] .main_color input::placeholder,
html[data-theme="dark"] .main_color textarea::placeholder {
  color: var(--dm-placeholder) !important;
}

/* ---- List markers / bullets ---- */
html[data-theme="dark"] ::marker {
  color: var(--dm-text-body) !important;
}

/* ---- Breadcrumb ---- */
html[data-theme="dark"] nav.breadcrumb {
  background: rgba(240, 240, 240, 0.08) !important;
}
html[data-theme="dark"] nav.breadcrumb a {
  color: var(--dm-text-link) !important;
}
html[data-theme="dark"] nav.breadcrumb a:hover {
  color: var(--dm-text-link-hover) !important;
  text-decoration: underline !important;
}
html[data-theme="dark"] nav.breadcrumb a[aria-current="page"] {
  color: var(--dm-text-body) !important;
  text-decoration: none !important;
}
html[data-theme="dark"] nav.breadcrumb li + li::before {
  color: var(--dm-text-meta) !important;
}

/* ---- Enfold special heading inner border ---- */
html[data-theme="dark"] .main_color .special-heading-inner-border {
  border-color: var(--dm-text-body) !important;
}

html[data-theme="dark"] .main_color .meta-heading .special-heading-inner-border {
  border-color: var(--dm-text-meta) !important;
}

/* ---- Enfold primary-background elements (dynamic CSS sets bg to $primary) ---- */
html[data-theme="dark"] .main_color .image-overlay .image-overlay-inside:before {
  background-color: rgba(30, 41, 69, 0.7) !important;
}

/* ---- Horizontal rules & separators ---- */
html[data-theme="dark"] .main_color hr,
html[data-theme="dark"] .main_color .av-separator,
html[data-theme="dark"] .main_color .post_delimiter {
  border-color: var(--dm-border-general) !important;
}

/* ---- Scroll-to-top button ---- */
html[data-theme="dark"] #scroll-top-link {
  background-color: var(--dm-bg-surface) !important;
  color: var(--dm-text-body) !important;
  border: 1px solid var(--dm-border-input) !important;
}

html[data-theme="dark"] #scroll-top-link:hover {
  background-color: var(--dm-accent) !important;
  color: var(--dm-btn-text) !important;
}

/* ---- Footer ---- */
/* The footer is already dark in light mode (#1E2945 bg).
   In dark mode we darken it further for visual separation.
   Enfold dynamic-css.php sets background-color on many child selectors
   within .footer_color — we must override them all. */
html[data-theme="dark"] #footer,
html[data-theme="dark"] .footer_color,
html[data-theme="dark"] .footer_color div,
html[data-theme="dark"] .footer_color section,
html[data-theme="dark"] .footer_color aside,
html[data-theme="dark"] .footer_color nav,
html[data-theme="dark"] .footer_color ul,
html[data-theme="dark"] .footer_color p,
html[data-theme="dark"] .footer_color span,
html[data-theme="dark"] .footer_color li,
html[data-theme="dark"] .footer_color address,
html[data-theme="dark"] .footer_color table,
html[data-theme="dark"] .footer_color th,
html[data-theme="dark"] .footer_color td {
  /* background-color: var(--dm-bg-footer) !important; */
  color: #cbd5e1 !important;       /* 9.3:1 on #0d1117 ✓ */
}

html[data-theme="dark"] #footer a,
html[data-theme="dark"] .footer_color a,
html[data-theme="dark"] #footer .flex_column p a,
html[data-theme="dark"] #footer .flex_column ul li a,
html[data-theme="dark"] #top #footer .social-footer a {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] #footer a:hover,
html[data-theme="dark"] .footer_color a:hover,
html[data-theme="dark"] #footer .flex_column p a:hover,
html[data-theme="dark"] #footer .flex_column ul li a:hover,
html[data-theme="dark"] #top #footer .social-footer a:hover {
  color: #ffffff !important;
}

html[data-theme="dark"] #top #footer h3.widgettitle {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] #footer .flex_column ul li a:before,
html[data-theme="dark"] #footer .flex_column p a:before,
html[data-theme="dark"] #footer .combine-a a:before {
  color: #cbd5e1 !important;
}

/* Footer social icons */
html[data-theme="dark"] #top #footer .social-footer i {
  background-color: var(--dm-bg-surface) !important;
  color: #cbd5e1 !important;
}

html[data-theme="dark"] #top #footer .social-footer i:hover {
  background: #EC8B00 !important;
  color: #ffffff !important;
}

/* Footer border separators */
html[data-theme="dark"] .footer_color,
html[data-theme="dark"] .footer_color div,
html[data-theme="dark"] .footer_color fieldset {
  border-color: rgba(148, 163, 184, 0.15) !important;
}

/* ---- Socket bar ---- */
html[data-theme="dark"] #socket,
html[data-theme="dark"] .socket_color,
html[data-theme="dark"] .socket_color div,
html[data-theme="dark"] .socket_color span,
html[data-theme="dark"] .socket_color ul,
html[data-theme="dark"] .socket_color li,
html[data-theme="dark"] .socket_color p {
  background-color: var(--dm-bg-socket) !important;
  color: #94a3b8 !important;        /* 4.6:1 on #080c14 ✓ */
}

html[data-theme="dark"] #top #socket .copyright span,
html[data-theme="dark"] #top #socket .copyright span a {
  color: #94a3b8 !important;
}

html[data-theme="dark"] #top #socket .copyright span a:hover {
  color: #ffffff !important;
}

/* Cookie bar */
html[data-theme="dark"] #top #socket .cookie-custom a {
  color: #cbd5e1 !important;
}

/* ---- SVGs / icons with hardcoded dark fills ---- */
/* Calendar icon in slide-meta — handled above via filter */
/* Product-arrow (nav dropdown) — handled in header section */
/* Button ::after — no SVG content, animation only — no filter needed */

/* ---- Sub-menu focus state (keyboard nav) ---- */
html[data-theme="dark"] #top .sub-menu li a:focus {
  background: var(--dm-bg-surface) !important;
  color: var(--dm-text-heading) !important;
}

/* ---- Enfold container_wrap alternate backgrounds ---- */
html[data-theme="dark"] .container_wrap.alternate_color,
html[data-theme="dark"] .container_wrap.alternate_color div,
html[data-theme="dark"] .container_wrap.alternate_color p,
html[data-theme="dark"] .container_wrap.alternate_color span {
  background-color: var(--dm-bg-surface) !important;
  color: var(--dm-text-body) !important;
}

/* ---- Pagination ---- */
html[data-theme="dark"] .main_color .pagination a,
html[data-theme="dark"] .main_color .pagination span {
  color: var(--dm-text-meta) !important;
  border-color: var(--dm-border-general) !important;
}

html[data-theme="dark"] .main_color .pagination .current,
html[data-theme="dark"] .main_color .pagination a:hover {
  background-color: var(--dm-accent) !important;
  color: var(--dm-btn-text) !important;
}

/* ---- Search results page ---- */

/* Search highlight — softer accent instead of harsh yellow */
html[data-theme="dark"] .search-highlight {
  background-color: rgba(147, 197, 253, 0.25) !important;
  color: #ffffff !important;
  border-color: var(--dm-text-link) !important;
}

/* Globe icon — needs lighter bg so it's visible on dark surface */
html[data-theme="dark"] #top.search .search-result-counter {
  background-color: var(--dm-bg-surface) !important;
}

/* Search result titles */
html[data-theme="dark"] #top .template-search .entry-content-header h2,
html[data-theme="dark"] #top .template-search .entry-content-header h2 a {
  color: var(--dm-text-link) !important;
}

html[data-theme="dark"] #top .template-search .entry-content-header h2 a:hover {
  color: var(--dm-text-link-hover) !important;
}

/* Search result meta (date) */
html[data-theme="dark"] #top .template-search .post-meta-infos,
html[data-theme="dark"] #top .template-search .post-meta-infos .date-container,
html[data-theme="dark"] #top .template-search .post-meta-infos time {
  color: var(--dm-text-meta) !important;
}

/* Search result excerpt */
html[data-theme="dark"] #top .template-search .entry-content p,
html[data-theme="dark"] #top .template-search .entry-content-wrapper .entry-content {
  color: var(--dm-text-body) !important;
}

/* Category section dividers */
html[data-theme="dark"] .category-title {
  border-top-color: var(--dm-border-general) !important;
  color: var(--dm-text-heading) !important;
}

/* Pagination */
html[data-theme="dark"] #top .pagination a,
html[data-theme="dark"] #top .pagination .current {
  border-color: var(--dm-border-general) !important;
  color: var(--dm-text-body) !important;
}

html[data-theme="dark"] #top .pagination .current {
  background: rgba(240, 240, 240, 0.1) !important;
  color: #ffffff !important;
}

/* ====================================================================
   SMOOTH TRANSITION (apply after first paint to avoid FOUC)
   ==================================================================== */

html.dm-transitions,
html.dm-transitions *,
html.dm-transitions *::before,
html.dm-transitions *::after {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}


html[data-theme="dark"] #top .visitkort-specific-class .categoty-boxes-inner .boxes-inner:hover .box-content > h3, html[data-theme="dark"] #top .visitkort-specific-class .categoty-boxes-inner .boxes-inner:hover .box-content span, html[data-theme="dark"] #top .visitkort-specific-class .categoty-boxes-inner .boxes-inner:hover .box-content a i {
    color: #ffffff !important;
}

html[data-theme="dark"] #top .visitkort-specific-class .categoty-boxes-inner .boxes-inner:hover .box-content > h3, html[data-theme="dark"] #top .visitkort-specific-class .categoty-boxes-inner .boxes-inner:hover .box-content span, html[data-theme="dark"] #top .visitkort-specific-class .categoty-boxes-inner .boxes-inner:hover .box-content a i {
    color: #ffffff !important;
}

html[data-theme="dark"] #top .avia-button:hover span {
    color: #000000 !important;
}

/* Enfold dynamic CSS hard-codes .main_color a/strong/b etc. to #1e2945 — override to white in dark mode */
html[data-theme="dark"] .main_color a,
html[data-theme="dark"] .main_color .widget_first,
html[data-theme="dark"] .main_color strong,
html[data-theme="dark"] .main_color b,
html[data-theme="dark"] .main_color b a,
html[data-theme="dark"] .main_color strong a,
html[data-theme="dark"] .main_color #js_sort_items a:hover,
html[data-theme="dark"] .main_color #js_sort_items a.active_sort,
html[data-theme="dark"] .main_color .av-sort-by-term a.active_sort,
html[data-theme="dark"] .main_color .special_amp,
html[data-theme="dark"] .main_color .taglist a.activeFilter,
html[data-theme="dark"] .main_color #commentform .required,
html[data-theme="dark"] #top .main_color .av-no-color.av-icon-style-border a.av-icon-char,
html[data-theme="dark"] .html_elegant-blog #top .main_color .blog-categories a,
html[data-theme="dark"] .html_elegant-blog #top .main_color .blog-categories a:hover {
    color: #ffffff !important;
}

/* ====================================================================
   OS PREFERENCE FALLBACK — @media (prefers-color-scheme: dark)

   If JS is disabled or hasn't run yet, this ensures users with
   OS-level dark mode don't see a blinding white flash.
   Only activates when no data-theme attribute is set (JS not run).
   ==================================================================== */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --dm-bg-header:        #111827;
    --dm-bg-body:          #111827;
    --dm-bg-surface:       #1e293b;
    --dm-bg-footer:        #0d1117;
    --dm-bg-socket:        #080c14;
    --dm-text-body:        #e2e8f0;
    --dm-text-heading:     #f1f5f9;
    --dm-text-meta:        #94a3b8;
    --dm-text-link:        #93c5fd;
    --dm-text-link-hover:  #bfdbfe;
    --dm-text-nav:         #f0f0f0;
    --dm-text-nav-hover:   #93c5fd;
    --dm-text-input:       #e5e7eb;
    --dm-bg-input:         #1e293b;
    --dm-border-input:     #64748b;
    --dm-border-underline: #93c5fd;
    --dm-border-general:   rgba(148, 163, 184, 0.2);
    --dm-accent:           #93c5fd;
    --dm-btn-bg:           rgba(147, 197, 253, 0.12);
    --dm-btn-text:         #111827;
    --dm-btn-border:       #93c5fd;
    --dm-btn-hover-bg:     #93c5fd;
    --dm-btn-hover-text:   #000000;
    --dm-btn-hover-border: #93c5fd;
    --dm-search-btn-bg:    #93c5fd;
    --dm-toggle-text:      #f0f0f0;
    --dm-toggle-border:    #64748b;
    --dm-icon-filter:      brightness(0) invert(1);
    background-color: #111827;
    color: #e2e8f0;
  }
}