/* =========================================================
   Texnoqraf — Light theme + theme toggle
   ---------------------------------------------------------
   The Bringer template is fully driven by the --bringer-s-*
   colour tokens declared in template/css/config.css. The
   default (no attribute) palette stays the original dark
   scheme. Adding [data-theme="light"] on <html> re-maps the
   same tokens to a light palette built from the project's
   own colours: the dark #07090D becomes ink, the light
   #F5F7FA becomes paper, and the #3F6EE9 brand blue is kept.
   ========================================================= */

:root {
    color-scheme: dark;
}

:root[data-theme="light"] {
    color-scheme: light;

    /* Surfaces */
    --bringer-s-body-bg: #F4F6FA;
    --bringer-s-nav: #F4F6FACC;
    --bringer-s-container-bg: #FFFFFF;
    --bringer-s-container-frosted: #FFFFFFEE;

    /* Text */
    --bringer-s-heading: #0A0C12;
    --bringer-s-heading-fade: #0A0C12C0;
    --bringer-s-text: #4B5262;

    /* Accent (brand blue kept, text accent darkened for AA on paper) */
    --bringer-s-accent: #3F6EE9;
    --bringer-button-hover-bg: #3455C7;
    --bringer-s-text-accent: #2B57D4;
    --bringer-s-accented-text: #F5F7FA;

    /* Borders */
    --bringer-s-border: #0A0C1221;
    --bringer-s-border-accent: #3F6EE966;
    --bringer-s-border-mute: #0A0C120D;
    --bringer-s-border-highlight: #0A0C1214;

    /* Glow / shadow — a soft blue bloom instead of a white one */
    --bringer-s-backlight: #3F6EE914;
    --bringer-s-box-shadow: #0A0C1214;
    --bringer-s-cursor-light: #3F6EE90F;

    /* Menu */
    --bringer-c-menu: #4B5262;
    --bringer-c-menu-hover: #0A0C12;
    --bringer-c-menu-active: #0A0C12;
}

/* Selection stays readable on the blue highlight in both themes */
:root[data-theme="light"] ::selection {
    color: #F5F7FA;
    background-color: var(--bringer-s-accent);
}

/* Soften the cursor-follow bloom on paper */
:root[data-theme="light"] .bringer-backlight {
    opacity: 0.5;
}

/* --- Media blocks with text laid over a photo -------------
   In dark mode the headings are light and read fine on the
   imagery. On paper they turn dark, so keep the overlay text
   light and drop a vignette into the (clip-path'd) media box
   to hold contrast. */
:root[data-theme="light"] .bringer-masked-media[data-bg-src],
:root[data-theme="light"] .bringer-grid-cta-media[data-bg-src] {
    box-shadow: inset 0 -140px 120px -40px rgba(7, 9, 13, 0.62),
                inset 0 0 0 100vmax rgba(7, 9, 13, 0.12);
}
:root[data-theme="light"] .bringer-masked-media[data-bg-src] .bringer-page-title,
:root[data-theme="light"] .bringer-masked-media[data-bg-src] p,
:root[data-theme="light"] .bringer-masked-media[data-bg-src] .bringer-highlight,
:root[data-theme="light"] .bringer-grid-cta-media[data-bg-src] .bringer-grid-cta-heading {
    color: #F6F8FC;
    text-shadow: 0 1px 20px rgba(7, 9, 13, 0.45);
}

/* --- "Masked CTA" newsletter block --------------------------
   This block hard-codes --bringer-s-heading for text/controls
   that actually sit on the blue accent fill (rather than using
   the accented-text token). On paper that turns them dark-on-
   blue, so restore light-on-blue here. */
:root[data-theme="light"] .bringer-cta-title {
    color: var(--bringer-s-accented-text);
}
:root[data-theme="light"] .bringer-masked-cta input {
    background: rgba(255, 255, 255, 0.16);
    color: var(--bringer-s-accented-text);
}
:root[data-theme="light"] .bringer-masked-cta input::-webkit-input-placeholder { color: rgba(245, 247, 250, 0.7); }
:root[data-theme="light"] .bringer-masked-cta input::-moz-placeholder { color: rgba(245, 247, 250, 0.7); }
:root[data-theme="light"] .bringer-masked-cta input:-ms-input-placeholder { color: rgba(245, 247, 250, 0.7); }
:root[data-theme="light"] .bringer-masked-cta button,
:root[data-theme="light"] .bringer-masked-cta button:hover {
    background: #FFFFFF;
    border-color: #FFFFFF;
}

/* Icons are painted with --bringer-s-heading; on the blue
   square buttons that turns dark-on-blue in light mode. */
:root[data-theme="light"] .bringer-square-button:not(.is-secondary) .bringer-icon {
    background: var(--bringer-s-accented-text);
}

/* The logo SVG is single-colour white — invert it to ink on paper */
:root[data-theme="light"] .bringer-logo img,
:root[data-theme="light"] .tgf-logo img {
    filter: invert(1);
}

/* =========================================================
   Theme toggle
   ---------------------------------------------------------
   Styled as a square sibling of the header CTA: same 44px
   height and radius, outlined like the template's secondary
   buttons. Selectors are prefixed with `button` to beat the
   template's global `button:not([class*='pswp'])` rule.
   ========================================================= */
button.tg-toggle {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    margin: 0;
    padding: 0;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bringer-s-border);
    border-radius: var(--bringer-button-br);
    background: transparent;
    color: var(--bringer-s-heading);
    cursor: pointer;
    transition: background-color .3s, border-color .3s;
    -webkit-tap-highlight-color: transparent;
}

button.tg-toggle:hover {
    background-color: var(--bringer-s-border-mute);
    border-color: var(--bringer-s-border-highlight);
}

button.tg-toggle:active {
    transform: scale(.96);
}

button.tg-toggle:focus-visible {
    outline: 2px solid var(--bringer-s-text-accent);
    outline-offset: 2px;
}

/* Both icons are stacked; the inactive one rotates/fades out */
button.tg-toggle svg {
    position: absolute;
    width: 20px;
    height: 20px;
    display: block;
    transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}

button.tg-toggle .tg-toggle__sun {
    opacity: 0;
    transform: rotate(-90deg) scale(.5);
}
button.tg-toggle .tg-toggle__moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}
:root[data-theme="light"] button.tg-toggle .tg-toggle__sun {
    opacity: 1;
    transform: rotate(0) scale(1);
}
:root[data-theme="light"] button.tg-toggle .tg-toggle__moon {
    opacity: 0;
    transform: rotate(90deg) scale(.5);
}

@media (prefers-reduced-motion: reduce) {
    button.tg-toggle,
    button.tg-toggle svg {
        transition: none;
    }
}

/* --- Placement -------------------------------------------- */

/* Desktop: sit next to the header CTA button */
.bringer-header-rp {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Mobile header: group the toggle with the burger */
.tg-mobile-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
button.tg-toggle--mobile {
    display: none;
}

@media only screen and (max-width: 960px) {
    button.tg-toggle--desktop {
        display: none;
    }
    button.tg-toggle--mobile {
        display: inline-flex;
        width: 40px;
        height: 40px;
    }
}