/*
 * Zeffy donate link in the site banner (header.php, .header-donate).
 * Enqueued after style.css by functions.php, so rules here can adjust the
 * header without touching style.css. header.php prints the donate link only
 * when this file exists, so upload the two (and the QR SVG) together.
 *
 * Desktop: a "Donate" pill and a scannable QR code. Phones (<=768px): the QR
 * is hidden and the link becomes a plain Donate button beside the search box.
 */

/* Search and donate sit together at the right of the banner. The group does
   not shrink (the logo's tagline wraps to make room instead); when there is
   still not enough room, as with very large text, it wraps rather than
   running off the page. */
.header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    max-width: 100%;
}

/* style.css gives .site-header-inner padding-bottom: 12px, but the later
   .container shorthand resets it to 0, so the rainbow line sits on the bottom
   edge of the tallest item. With the QR tile now tallest, that line would cut
   into the tile's quiet zone. */
.site-header-inner {
    padding-bottom: 9px;
}

/* Inside this group the search box sits further left, over a lighter part of
   the banner's gradient, where style.css's 18% white fill leaves the white
   "Search" text just under 4.5:1 (its 28% hover fill was already lower).
   The field's own 12% fill keeps it above AA at every width; the divider
   keeps the button distinct from the field, and hover brightens the borders
   instead of the fill, which would lower the contrast again. */
.header-actions .search-submit {
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.12);
    transition: border-color 0.2s;
}

.header-actions .search-submit:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.12);
}

.site-header .header-donate {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    color: white;
    /* Shapes the white focus ring inherited from .site-header a:focus-visible
       (the global :focus-visible rule would otherwise square it to 2px). */
    border-radius: 8px;
}

.header-donate-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 8.25rem;
}

/* Same look as .btn-primary, the light button already used on the dark
   hero band. The transparent border only shows in forced-colors mode, where
   it keeps the button outline that the background would otherwise lose. */
.site-header .header-donate-label {
    display: inline-block;
    padding: 5px 16px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: #ffffff;
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.4;
    white-space: nowrap;
    transition: background-color 0.2s;
}

.site-header .header-donate:hover .header-donate-label {
    background: #e3eaf1;
}

.header-donate-hint {
    font-size: 0.8rem;
    line-height: 1.35;
    /* Avoids "Zeffy" alone on the second line. */
    text-wrap: balance;
}

.site-header .header-donate:hover .header-donate-hint {
    text-decoration: underline;
}

/* 99px is exactly 3px per module (the code is 33 modules across). At a
   fractional size such as 96px, crispEdges snaps modules to a mix of 2px and
   3px widths, and OpenCV's decoder then fails on a 1x screen; whole-pixel
   modules decode at 100% zoom on every screen scale tested (1x to 2x).
   Keep the size a multiple of 33.
   The SVG has no quiet zone of its own, and scanners need 4 modules of light
   margin on every side, so the 12px padding here is exactly 4 modules. */
.header-donate-qr {
    display: block;
    flex-shrink: 0;
    padding: 12px;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    line-height: 0;
}

.header-donate-qr img {
    display: block;
    width: 99px;
    height: 99px;
}

/* Desktop: written as the exact opposite of style.css's (max-width: 768px)
   query. A (min-width: 769px) query would leave fractional widths such as
   768.5px (browser zoom, Windows display scaling) matching neither, and the
   banner then ran off the side of the page. */
@media not all and (max-width: 768px) {
    /* The 123px QR tile sets the banner height now, so trim the vertical
       padding to keep the banner within ~40px of its old height. */
    .site-header {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /* When the logo and the search/donate group cannot share a row (very
       large text on a narrow window), the group moves to a row of its own
       instead of running off the page. The logo's basis is its narrowest
       width, so the row only wraps when truly out of room, and it grows back
       to its natural width but no further, so on one row it sits exactly
       where it always has. */
    .site-header-inner {
        flex-wrap: wrap;
    }

    .site-header .site-branding {
        flex: 1 1 0;
        max-width: max-content;
    }

    /* Keeps the group at the right when it has that row to itself. */
    .header-actions {
        margin-left: auto;
    }

    /* Below ~955px the donate block squeezes the tagline onto two lines;
       balance them so "and action." is not left on its own. */
    .site-header .site-description {
        text-wrap: balance;
    }
}

/* Narrow desktops: the hint wraps to the pill's width, and the pill and gaps
   tighten, so the tagline still fits on two lines at 769px (three would add
   ~27px to the banner). The phone block below overrides each of these. */
@media (max-width: 1023px) {
    .header-actions {
        gap: 12px;
    }

    .header-donate-text {
        width: min-content;
    }

    .site-header .header-donate-label {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (max-width: 768px) {
    /* style.css stacks the header into a column here; search and donate
       share the last row. */
    .header-actions {
        gap: 8px;
    }

    /* The search box takes the rest of the row. Its basis, about the Search
       button plus a field wide enough to type in, is in rem so it grows with
       the text size: once Donate would squeeze the field below that, Donate
       wraps onto a row of its own instead. */
    .header-actions .header-search-wrap {
        flex: 1 1 10.5rem;
        min-width: 0;
    }

    /* The field sits inside a <label>, so style.css's full-width rule for it
       (flex: 1) never applies and it stops at ~175px, leaving a gap before
       Donate. Letting the label fill the form lets the field fill it too. */
    .header-actions .search-form label {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* A phone cannot scan its own screen. */
    .header-donate-qr,
    .header-donate-hint {
        display: none;
    }

    .header-donate-text {
        width: auto;
    }

    /* The link itself becomes the button (rather than the pill inside it) so
       the whole 44px box is the tap target. */
    .site-header .header-donate {
        justify-content: center;
        min-height: 44px;
        padding: 0 18px;
        border: 1px solid transparent;
        border-radius: 5px;
        background: #ffffff;
        color: var(--primary-color);
        transition: background-color 0.2s;
    }

    .site-header .header-donate:hover {
        background: #e3eaf1;
    }

    .site-header .header-donate-label,
    .site-header .header-donate:hover .header-donate-label {
        padding: 0;
        border: 0;
        background: none;
    }
}

/* Forced colors would repaint the tile's white padding with the system
   background (black in dark themes), leaving the code with no quiet zone. */
@media (forced-colors: active) {
    .header-donate-qr {
        forced-color-adjust: none;
    }
}