/* Dark mode for the brailyn child theme (antimatter has none).
   Active when <html data-theme="dark">, set by the inline script in base.html.twig:
   saved choice (localStorage 'theme') or else the device's prefers-color-scheme.
   Palette: bg #121417, surface #1b1f24, raised #242a31, border #323942, text #d3d9df, muted #98a2ad, link #3cc4f2 */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"] body,
html[data-theme="dark"] #body,
html[data-theme="dark"] #sb-site,
html[data-theme="dark"] .sb-site-container{background:#121417;color:#d3d9df}
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{color:#eef1f4}
html[data-theme="dark"] a{color:#3cc4f2}
html[data-theme="dark"] a:hover{color:#8adcf8}

/* header */
html[data-theme="dark"] #header,
html[data-theme="dark"] #header.scrolled{background-color:rgba(21,24,28,.92)!important;box-shadow:0 .05rem 1rem rgba(0,0,0,.6)!important}
html[data-theme="dark"] #header #logo h3 a,
html[data-theme="dark"] #header.scrolled #logo h3,
html[data-theme="dark"] #header.scrolled #logo a,
html[data-theme="dark"] #header.scrolled #navbar span,
html[data-theme="dark"] #header #navbar .panel-activation{color:#eef1f4!important}
html[data-theme="dark"] #header.scrolled #navbar a{color:#3cc4f2!important}
html[data-theme="dark"] #header.scrolled #navbar a:hover{color:#8adcf8!important}
html[data-theme="dark"] #header #navbar .navigation > .has-children:hover > a{background:#1b1f24;border-color:#323942;border-bottom-color:#1b1f24}
html[data-theme="dark"] #header #navbar ul.navigation li ul{background-color:#1b1f24;border-color:#323942}
html[data-theme="dark"] #header #navbar ul.navigation li ul li.active > a{background-color:#242a31}
html[data-theme="dark"] #header #navbar ul.navigation li ul li:hover > a{background-color:#1BB3E9;color:#fff}

/* side panel (mobile menu) */
html[data-theme="dark"] .sb-slidebar{background-color:#0c0e10!important}
html[data-theme="dark"] #panel .navigation li,
html[data-theme="dark"] #panel .navigation li:first-child{border-color:#242a31}
html[data-theme="dark"] #panel .navigation li a:hover{background-color:#1b1f24}
html[data-theme="dark"] #panel .navigation li.active > a,
html[data-theme="dark"] #panel .navigation li.active > a:hover{background:#242a31;color:#eef1f4}

/* footer */
html[data-theme="dark"] #footer,
html[data-theme="dark"] #footer .totop span{background:#0c0e10}
html[data-theme="dark"] #footer{color:#98a2ad}

/* notice boxes: markdown-notices (.notices) and antimatter's nested blockquotes */
html[data-theme="dark"] .notices.yellow,
html[data-theme="dark"] blockquote>blockquote>blockquote>p{background:#2a2316;color:#f2b866}
html[data-theme="dark"] .notices.red,
html[data-theme="dark"] blockquote>blockquote>blockquote>blockquote>p{background:#2c1a1a;color:#ef8a87}
html[data-theme="dark"] .notices.blue,
html[data-theme="dark"] blockquote>blockquote>blockquote>blockquote>blockquote>p{background:#16242b;color:#7fd0ea}
html[data-theme="dark"] .notices.green,
html[data-theme="dark"] blockquote>blockquote>blockquote>blockquote>blockquote>blockquote>p{background:#172417;color:#86cf86}
html[data-theme="dark"] .notices a{color:inherit}
html[data-theme="dark"] .notices h1,html[data-theme="dark"] .notices h2,html[data-theme="dark"] .notices h3,
html[data-theme="dark"] .notices h4,html[data-theme="dark"] .notices h5,html[data-theme="dark"] .notices h6{color:inherit}
html[data-theme="dark"] blockquote{border-left-color:#242a31}
html[data-theme="dark"] blockquote p{color:#98a2ad}

/* code */
html[data-theme="dark"] code{background:#2a1d22;color:#f08ca6}
html[data-theme="dark"] pre{background:#1b1f24;border-color:#323942}
html[data-theme="dark"] pre code{background:transparent;color:#7fcbe6}

/* misc content */
html[data-theme="dark"] hr{border-bottom-color:#242a31}
html[data-theme="dark"] table,html[data-theme="dark"] td{border-color:#323942}
html[data-theme="dark"] th{background:#1b1f24}
html[data-theme="dark"] .callout{background:#1b1f24}
html[data-theme="dark"] .list-item,
html[data-theme="dark"] .archives li,
html[data-theme="dark"] .related-pages li{border-color:#242a31}
html[data-theme="dark"] .modular .showcase{background-color:#1b1f24}

/* forms (contact page) */
html[data-theme="dark"] fieldset{border-color:#323942}
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="email"],html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="password"],html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="url"],html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] select{background-color:#1b1f24;color:#e6eaee;border-color:#323942;box-shadow:none}
html[data-theme="dark"] textarea:hover,html[data-theme="dark"] input:hover,html[data-theme="dark"] select:hover{border-color:#4a535e}
html[data-theme="dark"] textarea:focus,html[data-theme="dark"] input:focus,html[data-theme="dark"] select:focus{border-color:#1BB3E9;box-shadow:0 0 5px rgba(27,179,233,.5)}
html[data-theme="dark"] ::placeholder{color:#6f7a86}
html[data-theme="dark"] .form-field .required{color:#3cc4f2}
html[data-theme="dark"] .button{background:transparent;color:#3cc4f2;border-color:#3cc4f2}
html[data-theme="dark"] .button:hover{background:#1BB3E9;color:#fff}
html[data-theme="dark"] .button-secondary{background:transparent;color:#f6635e;border-color:#f6635e}
html[data-theme="dark"] .button-secondary:hover{background:#F6635E;color:#fff}

/* reCAPTCHA: dark widget comes from data-theme (script in base.html.twig). The iframe document is
   colour-scheme light; matching it stops the browser painting an opaque white iframe backdrop. */
html[data-theme="dark"] .g-recaptcha iframe{color-scheme:light}

/* photo gallery cards */
html[data-theme="dark"] .photo-gallery .pg-item{background:#1b1f24;box-shadow:0 1px 3px rgba(0,0,0,.5)}
html[data-theme="dark"] .photo-gallery figcaption{color:#d3d9df}
html[data-theme="dark"] .photo-gallery figcaption .pg-date{color:#8792a0}

/* light/dark toggle button (both themes) */
#theme-toggle{float:right;margin:1.4rem .25rem 0 .5rem;padding:.3rem .55rem;background:none;border:1px solid transparent;border-radius:6px;color:#1BB3E9;font-size:1.1rem;line-height:1;cursor:pointer;transition:all .5s ease}
#theme-toggle:hover{color:#0e6e90}
#theme-toggle:hover,#theme-toggle:focus-visible{border-color:#ccc;outline:none}
html[data-theme="dark"] #theme-toggle{color:#3cc4f2}
html[data-theme="dark"] #theme-toggle:hover{color:#8adcf8}
html[data-theme="dark"] #theme-toggle:hover,html[data-theme="dark"] #theme-toggle:focus-visible{border-color:#4a535e}
#theme-toggle .fa-sun-o{display:none}
html[data-theme="dark"] #theme-toggle .fa-sun-o{display:inline-block}
html[data-theme="dark"] #theme-toggle .fa-moon-o{display:none}
/* header shrinks to 3rem after scrolling (antimatter adds #header.scrolled, nav margin-top 1.4rem → .5rem) */
#header.scrolled #theme-toggle{margin-top:.5rem}
/* mobile: sits just left of the hamburger (.panel-activation: padding 1rem, 1.8rem icon), same vertical centre */
@media only all and (max-width:59.938em){#theme-toggle{margin:0;padding:1.85rem .35rem .55rem 1rem;border:0;font-size:1.4rem}}
@media only all and (max-width:59.938em){#header.scrolled #theme-toggle{margin-top:0;padding-top:.85rem;padding-bottom:.25rem}}