/* Theme toggle and alternate palette for Northwind Air, Essential.
   Generated by _design-system/builder/gallery_theme/apply.py; edit themes.py there, not this file. */
/* Theme toggle button. It inherits the header's text colour, so it reads correctly over
   footage and on solid bars alike. Hidden until the head script has set a theme (no-JS visitors
   keep the designed palette and never see a dead control). */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;margin:0;padding:0;border:1px solid color-mix(in srgb,currentColor 28%,transparent);border-radius:50%;background:transparent;color:inherit;line-height:0;cursor:pointer;transition:border-color .2s,background-color .2s}
.theme-toggle:hover{border-color:currentColor;background:color-mix(in srgb,currentColor 8%,transparent)}
.theme-toggle:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.theme-toggle .theme-toggle__icon{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .theme-toggle__sun{display:none}
html[data-theme="dark"] .theme-toggle .theme-toggle__sun{display:block}
html[data-theme="dark"] .theme-toggle .theme-toggle__moon{display:none}
html:not([data-theme]) .theme-toggle{display:none}
@media (prefers-reduced-motion:reduce){.theme-toggle{transition:none}}
/* Toggle placement in this header. */
.site-header{grid-template-columns:1fr auto auto 1fr}
.site-header>.theme-toggle{margin-left:-12px}
@media (max-width:1040px){
.site-header{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"brand toggle phone" "nav nav nav";row-gap:0;column-gap:10px;padding-bottom:0}
.site-header>.brand{grid-area:brand}
.site-header>.theme-toggle{grid-area:toggle;justify-self:end;align-self:center;width:34px;height:34px;margin:0}
.site-header .header-phone{grid-area:phone;justify-self:end}
.site-header>.site-nav{grid-area:nav;min-width:0;display:flex;flex-wrap:wrap;column-gap:14px;row-gap:2px;overflow:visible;margin:0;padding:4px 0 10px;-webkit-mask-image:none;mask-image:none}
.site-header>.site-nav a{white-space:nowrap}
}
@media (max-width:420px){
.site-header>.site-nav{column-gap:6px;justify-content:space-between}
.site-header>.site-nav a{font-size:13.5px}
/* The phone pill becomes an icon button so the brand keeps its room; the number stays in the link text and the call bar. */
.site-header .header-phone{font-size:0;gap:0;padding:9px}
.site-header .header-phone .icon{width:18px;height:18px}
}
/* Alternate palette. The designed palette stays the default. */
html[data-theme="dark"]{color-scheme:dark;--bg:#10171D;--surface:#172129;--ink:#E8EFF2;--muted:#9EB0BB;--line:#2A3842;--accent:#3FB2C2;--accent-deep:#6CCAD7;--accent-ink:#0B1216;--warm:#F08A45}
html[data-theme="dark"] .site-header{background:color-mix(in srgb,var(--bg) 94%,transparent)}
html[data-theme="dark"] .skip-link{color:var(--bg)}
html[data-theme="dark"] .emergency{background:#0B4A54}
html[data-theme="dark"] .reviews{background:#1B2730}
html[data-theme="dark"] .warranty{background:linear-gradient(90deg,#0B5F6C,#0F7C8C)}
html[data-theme="dark"] :is(.header-phone,.jump-list a:hover,.install-meta .cool){background:rgba(63,178,194,.16)}
html[data-theme="dark"] .header-phone:hover{background:rgba(63,178,194,.26)}
html[data-theme="dark"] .install-meta .warm{background:rgba(240,138,69,.16);color:#F2A06B}
html[data-theme="dark"] .install-before-tag{color:#121C24}
html[data-theme="dark"] .contact-after{background:rgba(240,138,69,.1)}
html[data-theme="dark"] .field :is(input,select,textarea){background:var(--surface);border-color:#3A4A55;color:var(--ink)}