/**
 * @package     Gystiq.Template.CassiopeiaGystiq
 * @copyright   (C) 2026 GYSTiq
 * @license     GNU General Public License version 2 or later
 *
 * Header chrome added by cassiopeia_gystiq: the scheme toggle and the
 * light/dark logo pair.
 *
 * The toggle sits in the header's top-right corner. Cassiopeia's
 * .container-header is position: relative (z-index 10), so the button anchors
 * to it and stays inside the header's stacking context. At narrow widths it
 * shares the top row with the brand; check it does not cover the logo or the
 * menu toggler.
 */

.container-header .gystiq-scheme-toggle {
    position: absolute;
    top: .5rem;
    inset-inline-end: .75rem;
    z-index: 11;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: var(--template-text-light);
    background: transparent;
    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
    border-radius: var(--border-radius-pill);
    cursor: pointer;
}
.container-header .gystiq-scheme-toggle:hover {
    background: color-mix(in srgb, currentColor 15%, transparent);
}
.container-header .gystiq-scheme-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.gystiq-scheme-toggle .fa-sun,
html[data-bs-theme="dark"] .gystiq-scheme-toggle .fa-moon {
    display: none;
}
html[data-bs-theme="dark"] .gystiq-scheme-toggle .fa-sun {
    display: inline-block;
}

.gystiq-logo-dark,
html[data-bs-theme="dark"] .gystiq-logo-light {
    display: none;
}
html[data-bs-theme="dark"] .gystiq-logo-dark {
    display: inline-block;
}

/* Logo Height (style param): set as --gystiq-logo-height by index.php, applied
   only when the param is non-zero so an unset style keeps Cassiopeia's sizing. */
.gystiq-logo-sized .container-header .brand-logo img {
    display: block;
    height: var(--gystiq-logo-height);
    width: auto;
    max-width: none;
}
@media (max-width: 600px) {
    .gystiq-logo-sized .container-header .brand-logo img {
        height: calc(var(--gystiq-logo-height) * .75);
    }
}

/* Tagline (Cassiopeia's own Site Description field): a small uppercase label
   beside the logo on the brand header; hidden on phones to keep the header short. */
.container-header .site-description {
    margin-inline-start: 1rem;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--template-text-light);
    opacity: .75;
}
@media (max-width: 600px) {
    .container-header .site-description { display: none; }
}