/* Dark mode for eakansascity.org.
   Light mode stays exactly the Webflow export; every dark rule hangs off
   html[data-theme="dark"], which an inline head snippet sets before first paint
   (saved choice in localStorage, otherwise the system preference). js/theme.js
   owns the toggle. Dark colors are contrast-checked against #101214 / #1a1d20. */

/* the toggle button, both themes */
.nav-actions{position:relative;z-index:5;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;gap:14px}
.theme-toggle{width:36px;height:36px;padding:0;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;background:none;border:1px solid rgba(26,27,31,.3);border-radius:0;color:#43464d;cursor:pointer}
.theme-toggle:hover{color:#058294;border-color:#058294}
.theme-toggle .icon-sun{display:none}
html[data-theme="dark"] .theme-toggle{border-color:rgba(232,234,237,.3);color:#b0b6bd}
html[data-theme="dark"] .theme-toggle:hover{color:#2fb3c6;border-color:#2fb3c6}
html[data-theme="dark"] .theme-toggle .icon-sun{display:block}
html[data-theme="dark"] .theme-toggle .icon-moon{display:none}

html{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark;background-color:#101214}
html[data-theme="dark"] body{background-color:#101214;color:#e8eaed}
html[data-theme="dark"] a{color:#e8eaed}
/* the mobile nav: the site css paints the wrap and menu white below 767px,
   and webflow.css paints the open dropdown #C8C8C8 */
html[data-theme="dark"] .navigation-wrap,
html[data-theme="dark"] .navigation-items{background-color:#101214}
html[data-theme="dark"] [data-nav-menu-open]{background:#1a1d20}
/* the current-page nav item pins near-black #1a1b1f; flip it to the dark ink */
html[data-theme="dark"] .navigation-item.w--current{color:#e8eaed}
html[data-theme="dark"] .navigation-item.w--current:hover,
html[data-theme="dark"] .navigation-item.w--current:active{color:#b0b6bd}
/* the logo and menu glyph are near-black art on transparency; flip them and
   swing the hue back so the teal bulb stays teal */
html[data-theme="dark"] .logo-image,
html[data-theme="dark"] .menu-icon{-webkit-filter:invert(1) hue-rotate(180deg);filter:invert(1) hue-rotate(180deg)}
html[data-theme="dark"] .divider{background-color:#26292d}
/* hero: fade the photo into the dark page instead of into white */
html[data-theme="dark"] .gradient-bg{background-image:-webkit-gradient(linear,left top,left bottom,color-stop(44%,rgba(18,80,92,.55)),to(#101214));background-image:linear-gradient(180deg,rgba(18,80,92,.55) 44%,#101214)}
html[data-theme="dark"] .intro-header{background-color:#1a1d20}