/**
 * DoMyLLC dark theme (Claude, 2026-09-20)
 * Retrofit dark mode for the marketplus-child (WPBakery) theme.
 * Activation: <html data-theme="dark"> (set by dark-toggle.js from localStorage,
 * default = OS preference). The @media auto-follow block is added in step 2 after QA.
 * Scope: site chrome, typography, links, buttons, forms, tables, tabs/accordions, cards,
 * and the common WPBakery inline section fills (#fff / #ebedee) via [style*=] + !important.
 * Brand: navy #2e3092, blues #2f5fca/#287feb; lightened for contrast on dark surfaces.
 */

:root[data-theme="dark"] {
  --dm-bg:        #0f1020;   /* page background */
  --dm-surface:   #181a2e;   /* header/footer/section fill (was #fff / #ebedee) */
  --dm-card:      #1e2138;   /* cards, wells, table stripes */
  --dm-border:    #2c2f4d;
  --dm-text:      #e7e9f2;   /* body text (was #343434/#474747) */
  --dm-muted:     #a9adc6;
  --dm-heading:   #f2f3fa;
  --dm-link:      #8f93ff;   /* was #2e3092 */
  --dm-link-hover:#b9bcff;
  --dm-brand:     #3a3ea8;   /* navy sections, lightened */
  --dm-brand-2:   #2f5fca;   /* blue accent */
  --dm-accent:    #eb5528;   /* keep the orange tab-active accent */
  --dm-input-bg:  #14162a;
  --dm-shadow:    rgba(0,0,0,.55);
}

/* ---- global chrome ---------------------------------------------------- */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .body-wrapper,
:root[data-theme="dark"] #page,
:root[data-theme="dark"] #wrapper,
:root[data-theme="dark"] .page-wrapper { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; }
/* 2026-09-21 PM (Randi's "rectangle boxes" report): #wrapper used to sit in the
   --dm-surface group below while every .vc_row was painted --dm-bg, so each
   content-width row showed as a darker box on a lighter page. One page color now. */

:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3,
:root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6 { color: var(--dm-heading) !important; }

:root[data-theme="dark"] p, :root[data-theme="dark"] li, :root[data-theme="dark"] span,
:root[data-theme="dark"] td, :root[data-theme="dark"] th, :root[data-theme="dark"] label,
:root[data-theme="dark"] .wpb_text_column { color: var(--dm-text); }

:root[data-theme="dark"] a { color: var(--dm-link); }
:root[data-theme="dark"] a:hover, :root[data-theme="dark"] a:focus { color: var(--dm-link-hover); }

/* header + footer + top bar
   Real theme IDs/classes (verified against the live marketplus-child markup +
   style.css, 2026-09-21 QA pass) - #wrapper and #header ship with a hardcoded
   `background:#fff` in style.css, and .sf-menu is the real nav-link class
   (the theme does not use .navbar/.nav-menu/#menu/.main-navigation - those
   were dead selectors that never matched anything). #topbar and #footer
   already ship dark (#343434) in style.css and need no override. */
:root[data-theme="dark"] header, :root[data-theme="dark"] .header,
:root[data-theme="dark"] .top-bar, :root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .main-header, :root[data-theme="dark"] .site-header,
:root[data-theme="dark"] footer, :root[data-theme="dark"] .footer,
:root[data-theme="dark"] .site-footer,
:root[data-theme="dark"] #header-wrapper,
:root[data-theme="dark"] #header-sticky, :root[data-theme="dark"] .header-sticky-inner,
:root[data-theme="dark"] #header-v1, :root[data-theme="dark"] #header-v2,
:root[data-theme="dark"] #header-v3, :root[data-theme="dark"] #header-v4,
:root[data-theme="dark"] #header-v5, :root[data-theme="dark"] #header-v6,
:root[data-theme="dark"] #header-v7, :root[data-theme="dark"] #header,
:root[data-theme="dark"] .header-search-wrapper
  { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; }

/* dropdowns only (2026-09-21 PM): a fill on the top-level ul.menu drew a lighter box
   behind the topbar secondary menu and the footer menu, which already sit on #343434. */
:root[data-theme="dark"] .sub-menu, :root[data-theme="dark"] .sf-menu ul {
  background-color: var(--dm-surface) !important; }
:root[data-theme="dark"] #topbar ul.menu, :root[data-theme="dark"] #topbar .secondary-menu,
:root[data-theme="dark"] #footer ul.menu, :root[data-theme="dark"] .footer-menu, :root[data-theme="dark"] #footer-menu {
  background-color: transparent !important; }
:root[data-theme="dark"] .menu a, :root[data-theme="dark"] .nav a,
:root[data-theme="dark"] .navbar a,
:root[data-theme="dark"] .sf-menu a, :root[data-theme="dark"] .sf-menu > li > a
  { color: var(--dm-text) !important; }
:root[data-theme="dark"] .sub-menu { border-color: var(--dm-border) !important; }

/* ---- sections / cards / wells ---------------------------------------- */
:root[data-theme="dark"] .container, :root[data-theme="dark"] .container-fluid,
:root[data-theme="dark"] .panel, :root[data-theme="dark"] .well,
:root[data-theme="dark"] .card, :root[data-theme="dark"] .widget
  { background-color: transparent; }

:root[data-theme="dark"] .panel, :root[data-theme="dark"] .well,
:root[data-theme="dark"] .card { background-color: var(--dm-card) !important; border-color: var(--dm-border) !important; }

/* ---- WPBakery row/column light fills (2026-09-21 QA) ------------------
   WPBakery writes each row/column's background as a UNIQUE, unpredictable
   class (.vc_custom_1507788648328{background-color:#ebedee!important}) in a
   <style> block, not as an inline style= attribute - the earlier [style*=]
   catches above never matched these. Since :root[data-theme="dark"] .vc_row
   (2 selectors) is more specific than a single .vc_custom_XXXX class (1
   selector), this wins even though both sides use !important, regardless of
   which prints later in <head>. This intentionally also overrides light
   accent-color bands (e.g. #287feb) - a flattened dark palette beats
   unreadable text; the true brand navy band (inline style, ALSO !important)
   is untouched because inline !important always outranks a stylesheet rule. */
:root[data-theme="dark"] .vc_row, :root[data-theme="dark"] .wpb_row
  { background-color: var(--dm-bg) !important; }
/* 2026-09-21 PM: columns were in the rule above too, which painted a page-color box
   over rows whose photo lives in a parallax child (e.g. "People Love Us"). Columns
   are now left alone; dark-toggle.js tags any element that really has a LIGHT
   computed fill (WPBakery .vc_custom_NNN on a column, etc.) with .dm-light. */
:root[data-theme="dark"] .dm-light { background-color: var(--dm-bg) !important; }

/* ---- WPBakery inline section fills (inline styles beat non-important) -
   "i" flag = case-insensitive attribute match (covers #FFF/#FFFFFF too). */
:root[data-theme="dark"] [style*="background-color: #fff" i],
:root[data-theme="dark"] [style*="background-color:#fff" i],
:root[data-theme="dark"] [style*="background: #fff" i],
:root[data-theme="dark"] [style*="background:#fff" i],
:root[data-theme="dark"] [style*="background-color: #ffffff" i],
:root[data-theme="dark"] [style*="background-color:#ffffff" i] { background-color: var(--dm-bg) !important; }

:root[data-theme="dark"] [style*="background-color: #ebedee" i],
:root[data-theme="dark"] [style*="background-color:#ebedee" i],
:root[data-theme="dark"] [style*="background-color: #f0f0f0" i],
:root[data-theme="dark"] [style*="background-color: #f4f4f4" i],
:root[data-theme="dark"] [style*="background-color: #f5f5f5" i],
:root[data-theme="dark"] [style*="background-color: #f8f9fa" i],
:root[data-theme="dark"] [style*="background-color: #f9f9f9" i],
:root[data-theme="dark"] [style*="background-color: #eee" i] { background-color: var(--dm-bg) !important; }
/* ^ was --dm-surface; unified to --dm-bg 2026-09-21 PM (the three #ebedee service
   blurbs on the homepage were showing as lighter boxes on the page). */

/* brand navy/blue inline sections already read as dark - just ensure text is light */
:root[data-theme="dark"] [style*="background-color: #2e3092"] *,
:root[data-theme="dark"] [style*="background-color: #2f5fca"] *,
:root[data-theme="dark"] [style*="background-color: #287feb"] * { color: #ffffff; }

/* ---- typography containers on white -> transparent -------------------- */
:root[data-theme="dark"] .wpb_wrapper, :root[data-theme="dark"] .vc_row,
:root[data-theme="dark"] .entry-content, :root[data-theme="dark"] article,
:root[data-theme="dark"] .post, :root[data-theme="dark"] .page-content { color: var(--dm-text); }

/* ---- buttons ---------------------------------------------------------- */
:root[data-theme="dark"] .btn, :root[data-theme="dark"] button,
:root[data-theme="dark"] input[type="submit"], :root[data-theme="dark"] .vc_btn3 {
  border-color: var(--dm-border); }
:root[data-theme="dark"] .btn-default, :root[data-theme="dark"] .btn-white {
  background-color: var(--dm-card) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; }
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .vc_btn3-color-primary {
  background-color: var(--dm-brand-2) !important; border-color: var(--dm-brand-2) !important; color:#fff !important; }

/* ---- forms ------------------------------------------------------------ */
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea,
:root[data-theme="dark"] select, :root[data-theme="dark"] .form-control {
  background-color: var(--dm-input-bg) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; }
:root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--dm-muted); }

/* ---- tables (fee tables, annual-report grids) ------------------------- */
:root[data-theme="dark"] table { background-color: transparent !important; color: var(--dm-text) !important; }
:root[data-theme="dark"] table th { background-color: var(--dm-brand) !important; color:#fff !important; border-color: var(--dm-border) !important; }
:root[data-theme="dark"] table td { border-color: var(--dm-border) !important; }
/* 2026-09-22 (Randi, round three): stripes now live on the ROW, not the cell. The article
   tables (.domyllc-data-table) paint odd rows white and even rows #ebedee on the <tr>; the old
   rule below only darkened even-row <td>s, so odd rows stayed white with light text on them.
   Every body row gets a dark fill, every cell is transparent and light, and the emphasised
   first column (navy in light mode) becomes the lighter link tint. */
:root[data-theme="dark"] table tbody tr, :root[data-theme="dark"] table tr,
:root[data-theme="dark"] .domyllc-data-table tbody tr:nth-child(2n+1),
:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--dm-card) !important; }
:root[data-theme="dark"] table tbody tr:nth-child(2n),
:root[data-theme="dark"] .domyllc-data-table tbody tr:nth-child(2n) { background-color: var(--dm-surface) !important; }
:root[data-theme="dark"] table thead tr, :root[data-theme="dark"] table tr:has(> th) { background-color: transparent !important; }
:root[data-theme="dark"] table td, :root[data-theme="dark"] .domyllc-data-table tbody td,
:root[data-theme="dark"] table td p, :root[data-theme="dark"] table td span, :root[data-theme="dark"] table td strong,
:root[data-theme="dark"] table td li, :root[data-theme="dark"] table td div
  { background-color: transparent !important; color: var(--dm-text) !important; }
:root[data-theme="dark"] .domyllc-data-table tbody td:first-child { color: var(--dm-link) !important; }
:root[data-theme="dark"] table td a { color: var(--dm-link) !important; }
:root[data-theme="dark"] table td a:hover { color: var(--dm-link-hover) !important; }
/* the same tables' phone-width card view */
:root[data-theme="dark"] .domyllc-data-table-mobile-card { background-color: var(--dm-card) !important; border-color: var(--dm-border) !important; box-shadow: none !important; }
:root[data-theme="dark"] .domyllc-data-table-mobile-card-header { background-color: var(--dm-brand) !important; color: #fff !important; }
:root[data-theme="dark"] .domyllc-data-table-mobile-card-row { background-color: transparent !important; border-color: var(--dm-border) !important; }
:root[data-theme="dark"] .domyllc-data-table-mobile-label { color: var(--dm-muted) !important; }
:root[data-theme="dark"] .domyllc-data-table-mobile-value { color: var(--dm-text) !important; }

/* ---- WPBakery tabs / accordions (from custom-override.css) ------------ */
:root[data-theme="dark"] .wpb_tabs .wpb_tabs_nav li,
:root[data-theme="dark"] .vc-icon-tab .wpb_tabs_nav li,
:root[data-theme="dark"] .wpb_tour .wpb_tabs_nav li,
:root[data-theme="dark"] .wpb_accordion .wpb_accordion_wrapper .wpb_accordion_header {
  background: var(--dm-card) !important; color: var(--dm-text) !important; }
:root[data-theme="dark"] .wpb_tabs .wpb_tabs_nav li a,
:root[data-theme="dark"] .vc-icon-tab .wpb_tabs_nav li a,
:root[data-theme="dark"] .wpb_tour .wpb_tabs_nav li a { color: var(--dm-text) !important; }
:root[data-theme="dark"] .wpb_tabs .wpb_tabs_nav li.ui-tabs-active,
:root[data-theme="dark"] .wpb_tabs .wpb_tabs_nav li:hover,
:root[data-theme="dark"] .vc-icon-tab .wpb_tabs_nav li.ui-tabs-active,
:root[data-theme="dark"] .vc-icon-tab .wpb_tabs_nav li:hover {
  background-color: var(--dm-accent) !important; color:#fff !important; }
:root[data-theme="dark"] .wpb_content_element .wpb_tab,
:root[data-theme="dark"] .ui-tabs-panel { background-color: transparent !important; }

/* ---- misc: borders, hr, blockquote, code ------------------------------ */
:root[data-theme="dark"] hr { border-color: var(--dm-border) !important; }
:root[data-theme="dark"] blockquote { border-color: var(--dm-brand-2) !important; color: var(--dm-muted) !important; }
:root[data-theme="dark"] code, :root[data-theme="dark"] pre { background-color: var(--dm-input-bg) !important; color: var(--dm-text) !important; }
:root[data-theme="dark"] .breadcrumb, :root[data-theme="dark"] .breadcrumbs { background-color: transparent !important; }

/* ====== 2026-09-21 night, Doug's second dark-mode review ======================= */

/* Review cards (Endorsal "ndrsl" live testimonials on /client-experiences/ and the
   homepage "People Love Us" grid). Round two kept the cards WHITE with dark text; Randi's
   round three (2026-09-22): "in dark mode the reviews are bright white still" - so the
   cards are now dark cards with light text, like every other surface. The avatar circle
   keeps its colour (white initial on it), stars are SVG/IMG and untouched. */
:root[data-theme="dark"] .ndrsl-live-testimonial {
  background-color: var(--dm-card) !important; border-color: var(--dm-border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.45) !important; }
:root[data-theme="dark"] .ndrsl-live-testimonial,
:root[data-theme="dark"] .ndrsl-live-testimonial p,
:root[data-theme="dark"] .ndrsl-live-testimonial span, :root[data-theme="dark"] .ndrsl-live-testimonial div,
:root[data-theme="dark"] .ndrsl-live-testimonial li, :root[data-theme="dark"] .ndrsl-live-testimonial small
  { color: var(--dm-text) !important; }
:root[data-theme="dark"] .ndrsl-live-testimonial h1, :root[data-theme="dark"] .ndrsl-live-testimonial h2,
:root[data-theme="dark"] .ndrsl-live-testimonial h3, :root[data-theme="dark"] .ndrsl-live-testimonial h4,
:root[data-theme="dark"] .ndrsl-live-testimonial h5, :root[data-theme="dark"] .ndrsl-live-testimonial h6
  { color: var(--dm-heading) !important; }
:root[data-theme="dark"] .ndrsl-live-testimonial .ndrsl-live-user-company,
:root[data-theme="dark"] .ndrsl-live-testimonial .ndrsl-live-user-location,
:root[data-theme="dark"] .ndrsl-live-testimonial .ndrsl-testimonial-source { color: var(--dm-muted) !important; }
:root[data-theme="dark"] .ndrsl-live-testimonial a { color: var(--dm-link) !important; }
:root[data-theme="dark"] .ndrsl-live-testimonial a:hover { color: var(--dm-link-hover) !important; }
:root[data-theme="dark"] .ndrsl-live-testimonial .ndrsl-read-more {
  color: var(--dm-muted) !important; border-color: var(--dm-border) !important; background-color: transparent !important; }
:root[data-theme="dark"] .ndrsl-live-testimonial .ndrsl-read-more:hover { color: var(--dm-text) !important; border-color: var(--dm-muted) !important; }

/* Form fields (contact page, EmailOctopus/styled-components widget): the widget
   restyles the field on :focus and Chrome restyles it on autofill, which left black
   text on a dark box. Cover focus, autofill and -webkit-text-fill-color explicitly,
   with extra specificity so we outrank the widget's generated class rules. */
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select,
:root[data-theme="dark"] form input[class], :root[data-theme="dark"] form textarea[class],
:root[data-theme="dark"] form input[class]:focus, :root[data-theme="dark"] form textarea[class]:focus,
:root[data-theme="dark"] input:focus, :root[data-theme="dark"] textarea:focus, :root[data-theme="dark"] select:focus,
:root[data-theme="dark"] input:focus-visible, :root[data-theme="dark"] textarea:focus-visible,
:root[data-theme="dark"] [class*="TextControlBase"], :root[data-theme="dark"] [class*="TextControlBase"]:focus,
:root[data-theme="dark"] [class*="es-text-control"], :root[data-theme="dark"] [class*="es-text-control"]:focus {
  color: var(--dm-text) !important; -webkit-text-fill-color: var(--dm-text) !important;
  background-color: var(--dm-input-bg) !important; caret-color: var(--dm-text); }
:root[data-theme="dark"] input:-webkit-autofill, :root[data-theme="dark"] input:-webkit-autofill:hover,
:root[data-theme="dark"] input:-webkit-autofill:focus, :root[data-theme="dark"] textarea:-webkit-autofill,
:root[data-theme="dark"] select:-webkit-autofill {
  -webkit-text-fill-color: var(--dm-text) !important; caret-color: var(--dm-text);
  -webkit-box-shadow: 0 0 0 1000px var(--dm-input-bg) inset !important; box-shadow: 0 0 0 1000px var(--dm-input-bg) inset !important;
  transition: background-color 9999s ease-out 0s; }
:root[data-theme="dark"] input[type="submit"], :root[data-theme="dark"] input[type="button"],
:root[data-theme="dark"] button[type="submit"] { -webkit-text-fill-color: initial !important; }

/* Photo hero rows (/llc/, /pennsylvania-llc/ and the other state/service pages):
   WPBakery rows with a light photo background kept the photo while the headings
   went light -> washed out. dark-toggle.js tags every .vc_row whose computed
   background-image is a url() with .dm-photo; the photo is then multiplied with a
   dark tone and ALL text in it is forced light (the !important also beats the
   inline `color: #333` WPBakery wrote on the body copy). */
:root[data-theme="dark"] .vc_row.dm-photo { background-color: #3a3d5c !important; background-blend-mode: multiply; }
:root[data-theme="dark"] .vc_row.dm-photo h1, :root[data-theme="dark"] .vc_row.dm-photo h2,
:root[data-theme="dark"] .vc_row.dm-photo h3, :root[data-theme="dark"] .vc_row.dm-photo h4,
:root[data-theme="dark"] .vc_row.dm-photo h5, :root[data-theme="dark"] .vc_row.dm-photo h6
  { color: var(--dm-heading) !important; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
:root[data-theme="dark"] .vc_row.dm-photo p, :root[data-theme="dark"] .vc_row.dm-photo li,
:root[data-theme="dark"] .vc_row.dm-photo span, :root[data-theme="dark"] .vc_row.dm-photo strong,
:root[data-theme="dark"] .vc_row.dm-photo em, :root[data-theme="dark"] .vc_row.dm-photo .wpb_text_column
  { color: var(--dm-text) !important; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
/* review cards inside a photo row: no text-shadow on card text (cards are dark now, see above) */
:root[data-theme="dark"] .vc_row.dm-photo .ndrsl-live-testimonial,
:root[data-theme="dark"] .vc_row.dm-photo .ndrsl-live-testimonial * { text-shadow: none; }
/* Parallax rows (2026-09-22): the photo sits on an absolutely positioned child, so the
   multiply on the row above never reached it. Darken the child directly. */
:root[data-theme="dark"] .vc_row.dm-photo .vc_parallax-inner { filter: brightness(.32) saturate(.7); }
/* links inside photo rows were pinned light with !important above - give them a hover again */
:root[data-theme="dark"] .vc_row.dm-photo a:hover, :root[data-theme="dark"] .vc_row.dm-photo a:hover span,
:root[data-theme="dark"] .vc_row.dm-photo a:hover strong { color: var(--dm-link-hover) !important; }

/* Breadcrumb bar under the header (#page-header) shipped white in style.css and was
   still white in dark mode with light text on it. */
:root[data-theme="dark"] #page-header, :root[data-theme="dark"] .page-header,
:root[data-theme="dark"] #page-header .breadcrumbs { background-color: var(--dm-surface) !important; }
:root[data-theme="dark"] #page-header, :root[data-theme="dark"] #page-header a,
:root[data-theme="dark"] #page-header span { color: var(--dm-muted) !important; }

/* Logo: the standard PNG has dark-grey "DOMY" letters that vanish on the dark header.
   img/domyllc-logo-dark-360x100.png is the same mark with white letters and slightly
   brighter blues (generated from the live PNG 2026-09-21). CSS `content:` swaps it
   before first paint where supported; dark-toggle.js also swaps the src (fallback +
   live toggle). */
:root[data-theme="dark"] .logo img.logo-standard, :root[data-theme="dark"] .logo img.logo-retina,
:root[data-theme="dark"] #header-sticky .logo img
  { content: url("/assets/img/domyllc-logo-dark-360x100.png"); }

/* ---- the theme toggle button (in #topbar .topbar-right, after the phone) -----
   2026-09-21 PM rewrite after Randi's report: the old 40px button in #header
   .header-right overflowed the 1140px row (menu wrapped under the logo), and its
   inline `display:inline-block` defeated the flex centering (moon sat off-center).
   No inline style on the button any more; everything is here. */
.dm-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 28px; height: 28px; padding: 0; margin: 0;
  border: 1px solid rgba(255,255,255,.28); border-radius: 6px;
  background: transparent; cursor: pointer; vertical-align: middle;
  color: #9f9f9f; line-height: 1; transition: background .15s, border-color .15s, color .15s; }
.dm-toggle:hover, .dm-toggle:focus-visible { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); color: #ffffff; outline: none; }
.dm-toggle .dm-sun, .dm-toggle .dm-moon { display: none; width: 16px; height: 16px; line-height: 0; }
.dm-toggle svg { width: 16px; height: 16px; display: block; fill: currentColor; }
.dm-toggle .dm-moon { display: block; }
:root[data-theme="dark"] .dm-toggle .dm-sun { display: block; }
:root[data-theme="dark"] .dm-toggle .dm-moon { display: none; }
/* topbar slot: float beside the phone number (both float:left inside .topbar-right),
   vertically centred in the 45px bar: (45 - 28) / 2 = 8.5px */
#topbar .dm-toggle { float: left; margin: 8px 0 0 22px; }

/* ====== 2026-09-22 Randi round three ========================================== */

/* ---- hover states in dark mode ------------------------------------------------
   "some hover effects are missing from text url links and buttons": the nav / topbar link
   colours above are pinned with !important, which also pinned their :hover. Restore them. */
:root[data-theme="dark"] .sf-menu li a:hover, :root[data-theme="dark"] .sf-menu li li a:hover,
:root[data-theme="dark"] .sf-menu > li > a:hover, :root[data-theme="dark"] .menu a:hover,
:root[data-theme="dark"] .nav a:hover, :root[data-theme="dark"] .navbar a:hover,
:root[data-theme="dark"] #topbar a:hover, :root[data-theme="dark"] .secondary-menu a:hover,
:root[data-theme="dark"] .custom-menu-nav a:hover { color: var(--dm-link-hover) !important; }
:root[data-theme="dark"] .sf-menu li.current-menu-item > a,
:root[data-theme="dark"] .sf-menu li.current-menu-ancestor > a { color: var(--dm-link) !important; }
:root[data-theme="dark"] .btn-primary:hover, :root[data-theme="dark"] .vc_btn3-color-primary:hover
  { background-color: var(--dm-link) !important; border-color: var(--dm-link) !important; }
:root[data-theme="dark"] .btn-default:hover, :root[data-theme="dark"] .btn-white:hover
  { background-color: var(--dm-surface) !important; border-color: var(--dm-muted) !important; }
:root[data-theme="dark"] #page-header a:hover { color: var(--dm-link-hover) !important; }
:root[data-theme="dark"] .slicknav_nav a:hover, :root[data-theme="dark"] .slicknav_nav .slicknav_item:hover
  { color: #fff !important; background: var(--dm-brand) !important; }

/* ---- article FAQ accordion (.faq-container on the learning-center articles) ------
   Shipped white (.faq-container / .faq-question / .faq-answer all #fff) and was never
   covered, so the questions and the heading were light-on-white in dark mode. */
:root[data-theme="dark"] .faq-container { background-color: transparent !important; }
:root[data-theme="dark"] .faq-accordion { background-color: transparent !important; }
:root[data-theme="dark"] .faq-item { background-color: var(--dm-card) !important; border-color: var(--dm-border) !important; box-shadow: none !important; }
:root[data-theme="dark"] .faq-question, :root[data-theme="dark"] .faq-answer,
:root[data-theme="dark"] .answer-content { background-color: var(--dm-card) !important; border-color: var(--dm-border) !important; }
:root[data-theme="dark"] .faq-question:hover { background-color: var(--dm-surface) !important; }
:root[data-theme="dark"] .faq-question, :root[data-theme="dark"] .faq-question .question-text,
:root[data-theme="dark"] .faq-question span, :root[data-theme="dark"] .faq-question div,
:root[data-theme="dark"] .faq-question h3, :root[data-theme="dark"] .faq-question h4 { color: var(--dm-heading) !important; }
:root[data-theme="dark"] .faq-answer, :root[data-theme="dark"] .faq-answer p, :root[data-theme="dark"] .faq-answer li,
:root[data-theme="dark"] .faq-answer span, :root[data-theme="dark"] .answer-content p { color: var(--dm-text) !important; }
:root[data-theme="dark"] .faq-answer a { color: var(--dm-link) !important; }
:root[data-theme="dark"] .faq-header h2, :root[data-theme="dark"] .faq-header h3 { color: var(--dm-heading) !important; }

/* ---- Entity pricing / comparison table (third-party widget, now a static table) (LLC vs C-Corp vs S-Corp vs DBA under
   Start Your Business, e.g. /professional/). The widget injects its own <style> with
   white columns (#fff) and #111 text; our generic light text landed on those white
   columns. Dark columns, light text, brand-tinted icons. Their rules are not !important. */
:root[data-theme="dark"] .eapps-pricing-table-column,
:root[data-theme="dark"] .eapps-pricing-table-column-head-mobile-inner,
:root[data-theme="dark"] .eapps-pricing-table-column-head-mobile-inner > .eapps-pricing-table-column-item,
:root[data-theme="dark"] .eapps-pricing-table-column-ribbon
  { background-color: var(--dm-card) !important; box-shadow: 0 0 0 1px var(--dm-border) !important; }
:root[data-theme="dark"] .eapps-pricing-table-column-featured { box-shadow: 0 0 0 1px var(--dm-border), 0 6px 20px rgba(0,0,0,.5) !important; }
:root[data-theme="dark"] .eapps-pricing-table-column-title-container { background-color: var(--dm-brand) !important; }
:root[data-theme="dark"] .eapps-pricing-table-column-title-text,
:root[data-theme="dark"] .eapps-pricing-table-column-title-caption { color: #fff !important; }
:root[data-theme="dark"] .eapps-pricing-table-column-features-item,
:root[data-theme="dark"] .eapps-pricing-table-column-features-item-inner,
:root[data-theme="dark"] .eapps-pricing-table-column-features-item-text,
:root[data-theme="dark"] .eapps-pricing-table-column-features-item-text div,
:root[data-theme="dark"] .eapps-pricing-table-column-price-wrapper,
:root[data-theme="dark"] .eapps-pricing-table-column-price-value,
:root[data-theme="dark"] .eapps-pricing-table-column-price-currency,
:root[data-theme="dark"] .eapps-pricing-table-column-price-fix,
:root[data-theme="dark"] .eapps-pricing-table-column-price-caption,
:root[data-theme="dark"] .eapps-pricing-table-column-button-caption,
:root[data-theme="dark"] .eapps-pricing-table-toggle-item-name { color: var(--dm-text) !important; }
:root[data-theme="dark"] .eapps-pricing-table-column-price-caption,
:root[data-theme="dark"] .eapps-pricing-table-column-button-caption { color: var(--dm-muted) !important; }
:root[data-theme="dark"] .eapps-pricing-table-column-features-item-icon { fill: var(--dm-link) !important; }
:root[data-theme="dark"] .eapps-pricing-table-column-features-item-icon-cross,
:root[data-theme="dark"] .eapps-pricing-table-column-features-item-icon[class*="cross"] { fill: var(--dm-muted) !important; }
:root[data-theme="dark"] .eapps-pricing-table-hint-icon svg, :root[data-theme="dark"] .eapps-pricing-table-hint-icon { fill: var(--dm-muted) !important; color: var(--dm-muted) !important; }
:root[data-theme="dark"] .eapps-pricing-table-hint { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; }
:root[data-theme="dark"] .eapps-pricing-table-column-features-item::before,
:root[data-theme="dark"] .eapps-pricing-table-column-features-item::after { background-color: #ffffff !important; }
:root[data-theme="dark"] .eapps-pricing-table-column-button-type-filled
  { background-color: var(--dm-brand-2) !important; border-color: var(--dm-brand-2) !important; color: #fff !important; }
:root[data-theme="dark"] .eapps-pricing-table-column-button-type-outline
  { color: var(--dm-link) !important; border-color: var(--dm-link) !important; background-color: transparent !important; }
:root[data-theme="dark"] .eapps-pricing-table-column-button:hover { opacity: .85; }

/* ---- mobile header (<= 991px; Randi's mockup: logo left, search + hamburger right, on
   ONE row; top bar = utility links, then phone + theme toggle on one line) ------------
   Not theme-scoped: layout applies in light and dark. Before: the theme's slicknav
   hamburger rendered in #responsive-menu, a full-width dark bar placed AFTER the header
   (and after the search form), so on tablets/phones the menu button sat far below the
   logo. header-v7.php now puts #responsive-menu inside #header .header-right. */
#header .header-right #responsive-menu { display: none; }
@media (max-width: 991px) {
  #header-v2 #header, #header { padding: 10px 0 !important; position: relative; z-index: 60; }
  #header .main-container > .row { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; }
  #header .header-left, #header .header-right { float: none; width: auto; margin: 0; }
  #header .header-left.logo { text-align: left; margin-bottom: 0; display: block; flex: 0 1 auto; min-width: 0; }
  #header .logo img { max-height: 80px; width: auto; }
  #header .header-right { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex: 0 0 auto; text-align: right; }
  #header .header-right .main-menu { display: none !important; }
  #header .header-right #search-icon { float: none; width: auto; margin: 0 !important; display: block !important; order: 1; line-height: 0; }
  #header .header-right #search-icon #trigger i { font-size: 24px; line-height: 1; }
  #header .header-right #responsive-menu { display: block; order: 2; }
  /* NOTE on specificity: this sheet is inlined in <head> BEFORE style.css / responsive-menu.css
     load, so equal-specificity rules here LOSE to the theme's. Everything below is therefore
     anchored on #header .header-right (id + class) to outrank the theme's .slicknav_* rules. */
  #header .header-right .slicknav_menu { display: block; background: transparent; padding: 0; margin: 0; font-size: 16px; }
  #header .header-right .slicknav_btn { float: none; margin: 0; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center;
    background: transparent; border-radius: 6px; text-shadow: none; box-shadow: none; }
  #header .header-right .slicknav_btn:hover, #header .header-right .slicknav_btn.slicknav_open { background: rgba(46, 48, 146, .1); }
  #header .header-right .slicknav_menu .slicknav_menutxt { display: none; }
  #header .header-right .slicknav_menu .slicknav_icon, #header .header-right .slicknav_icon.slicknav_no-text
    { float: none; display: flex; flex-direction: column; gap: 5px; margin: 0 !important; width: auto; height: auto; }
  #header .header-right .slicknav_menu .slicknav_icon-bar { display: block; width: 24px; height: 3px; margin: 0; border-radius: 2px; background-color: #2e3092; box-shadow: none; }
  #header .header-right .slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0; }
  /* the menu list drops down full-width under the header row (#header is position:relative) */
  #header .header-right .slicknav_nav { position: absolute; left: 0; right: 0; top: 100%; z-index: 1000; margin: 0; padding: 6px 0 10px;
    background: #2f2f2f; text-align: left; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); font-size: 15px; }
  #header .header-right .slicknav_nav a, #header .header-right .slicknav_nav .slicknav_item { color: #fff; }
  /* top bar: phone + toggle on one line, centred when the bar stacks (<= 767px) */
  #topbar .topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
  #topbar .topbar-right .topbar-info { display: inline-block !important; margin: 0 !important; padding: 0 !important; float: none !important; }
  #topbar .dm-toggle { float: none; display: inline-flex; margin: 0; }
}
@media (max-width: 767px) {
  #topbar .topbar-right { float: none; width: 100%; justify-content: center; margin-top: 6px; }
  #header .logo img { max-height: 58px; }
  #header .header-right { gap: 12px; }
}
:root[data-theme="dark"] #header .header-right .slicknav_menu .slicknav_icon-bar { background-color: var(--dm-text); }
:root[data-theme="dark"] #header .header-right .slicknav_btn:hover,
:root[data-theme="dark"] #header .header-right .slicknav_btn.slicknav_open { background: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] #header .header-right .slicknav_nav { background: var(--dm-surface); box-shadow: 0 10px 24px rgba(0, 0, 0, .55); }