/* Engineer Underground: dark mode. Everything here only applies when <html data-theme="dark">.
   The token colors (--eu-*) are switched in the tokens list; this file covers the theme's own colors and the few things that need a decision. */

/* Header toggle button */
.eu-theme-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--eu-text,#334155);cursor:pointer}
.eu-theme-btn:hover{color:var(--eu-accent,#0369A1);background:var(--eu-accent-soft,#E0F2FE)}
.eu-theme-btn:focus-visible{outline:3px solid var(--eu-accent,#0369A1);outline-offset:2px}
.eu-theme-sun{display:none}
html[data-theme="dark"] .eu-theme-moon{display:none}
html[data-theme="dark"] .eu-theme-sun{display:block}

/* Kadence palette: the theme paints the page, headings, links and menus from these variables */
html[data-theme="dark"]{
  --global-palette1:#38BDF8;
  --global-palette2:#7DD3FC;
  --global-palette3:#E6EDF7;
  --global-palette4:#C4CFDD;
  --global-palette5:#A3B1C4;
  --global-palette6:#8190A5;
  --global-palette7:#263449;
  --global-palette8:#0B1220;
  --global-palette9:#121B2B;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .site,
html[data-theme="dark"] .content-bg,
html[data-theme="dark"] .entry.content-bg{background-color:var(--eu-page,#F1F5F9)}
html[data-theme="dark"] .content-bg,
html[data-theme="dark"] .entry.content-bg,
html[data-theme="dark"] .site-header-wrap,
html[data-theme="dark"] #masthead,
html[data-theme="dark"] .site-main-header-wrap,
html[data-theme="dark"] .site-top-header-wrap,
html[data-theme="dark"] .site-bottom-header-wrap{background-color:var(--eu-card,#fff)}
html[data-theme="dark"] .site-header-row-container-inner{background-color:var(--eu-card,#fff);border-color:var(--eu-border,#E2E8F0)}
html[data-theme="dark"] .site-header{border-bottom:1px solid var(--eu-border,#E2E8F0)}

/* Text and links in prose */
html[data-theme="dark"] body{color:var(--eu-text,#334155)}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] h4,html[data-theme="dark"] h5,html[data-theme="dark"] h6,
html[data-theme="dark"] .entry-title{color:var(--eu-ink,#0F172A)}

/* Forms */
html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background-color:var(--eu-surface-2,#F8FAFC);border-color:var(--eu-border-2,#CBD5E1);color:var(--eu-ink,#0F172A)}
html[data-theme="dark"] ::placeholder{color:var(--eu-faint,#94A3B8);opacity:1}

/* Tables and lines */
html[data-theme="dark"] table,html[data-theme="dark"] th,html[data-theme="dark"] td{border-color:var(--eu-border,#E2E8F0)}
html[data-theme="dark"] hr,html[data-theme="dark"] .wp-block-separator{border-color:var(--eu-border,#E2E8F0);background-color:var(--eu-border,#E2E8F0)}

/* Diagrams, calculators and tool panels stay on a light surface: their colors are drawn for white */
html[data-theme="dark"] figure.topic-fig,
html[data-theme="dark"] .topic-fig svg,
html[data-theme="dark"] .wp-block-html svg{background:#FFFFFF;border-radius:10px}
html[data-theme="dark"] .topic-fig{background:#FFFFFF;border-radius:12px;padding:8px}
html[data-theme="dark"] .topic-fig figcaption{color:#475569}

/* The logo is black lettering on a transparent background: lift it onto the dark header */
html[data-theme="dark"] .custom-logo{filter:invert(1) hue-rotate(180deg);}

/* Code blocks and the join band are dark in both themes already */
html[data-theme="dark"] .menu-toggle-open,
html[data-theme="dark"] .drawer-toggle{color:var(--eu-text,#334155)}

/* Home hero: a dark blueprint grid instead of the light one */
html[data-theme="dark"] body.home .hero{background-color:#0F1A2C;background-image:linear-gradient(rgba(56,189,248,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.07) 1px,transparent 1px);background-size:22px 22px}
html[data-theme="dark"] body.home .hero::before{opacity:.18}

/* Calculators written as Custom HTML keep their own light card, so their fields stay light too */
html[data-theme="dark"] body.eu-calc .entry-content input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] body.eu-calc .entry-content select,
html[data-theme="dark"] body.eu-calc .entry-content textarea{background-color:#FFFFFF;border-color:#CBD5E1;color:#0F172A}
/* Footer and dropdown menus are dark panels in both themes */
html[data-theme="dark"] #colophon,
html[data-theme="dark"] #colophon .site-footer-wrap,
html[data-theme="dark"] #colophon .site-footer-row-container-inner{background-color:#070C16 !important;color:#C4CFDD !important;border-color:#1E293B}
html[data-theme="dark"] #colophon a,html[data-theme="dark"] #colophon .footer-navigation a,html[data-theme="dark"] #colophon .site-info,html[data-theme="dark"] #colophon .site-footer-section p{color:#C4CFDD !important}
html[data-theme="dark"] #colophon a:hover{color:#7DD3FC}
html[data-theme="dark"] .header-navigation ul ul.sub-menu,
html[data-theme="dark"] .header-navigation ul ul.submenu{background:#121B2B;border:1px solid #263449;color:#C4CFDD}
html[data-theme="dark"] .header-navigation ul ul li a{color:#C4CFDD}
html[data-theme="dark"] .header-navigation ul ul li a:hover{color:#7DD3FC;background:#1A2536}
/* Phone menu drawer and search drawer: dark panels in both themes */
html[data-theme="dark"] #mobile-drawer .drawer-inner,
html[data-theme="dark"] #search-drawer .drawer-inner{background:#0B1220 !important;color:#C4CFDD}
html[data-theme="dark"] #mobile-drawer .drawer-header,
html[data-theme="dark"] #mobile-drawer .mobile-navigation a,
html[data-theme="dark"] #mobile-drawer .drawer-toggle{color:#C4CFDD !important}
html[data-theme="dark"] #mobile-drawer .mobile-navigation li{border-color:#1E293B}
html[data-theme="dark"] #mobile-drawer .mobile-navigation .current-menu-item>a{color:#7DD3FC !important}
/* The Join the Underground band is the same in both themes */
html[data-theme="dark"] .join-band input[type="email"]{background-color:#FFFFFF;border-color:#CBD5E1;color:#0F172A}
html[data-theme="dark"] .join-band h2,html[data-theme="dark"] .join-band h3{color:#FFFFFF}
html[data-theme="dark"] .join-band{border:1px solid #2A3A52}