/* year/switcher.css — the top-of-page controls on /year/ and /hebrew-year/
 * (both locales, hub and dated). Server-rendered by yearControlsHtml() in
 * server.js; this file is ONLY the styling for that markup.
 *
 * A dedicated file on purpose, not a section of year.css/hebrew-year.css:
 * those two are being edited elsewhere for print rules at the same time this
 * was built, and a shared file would have meant two agents racing on the
 * same lines. Loaded by both page types, both locales — this is the one
 * asset the year and Hebrew-year pages have in common.
 *
 * Two controls, styled DELIBERATELY DIFFERENTLY from each other, because an
 * earlier version reused one shared "picker" look for both and it read as
 * one uniform strip even though the two choices are not the same kind of
 * choice:
 *   .year-type-links    — "which calendar" is NAVIGATION: text links at a
 *                          larger size; the current page gets a soft fill.
 *   .year-period-toggle — "which period" is a SETTING on this page: a real
 *                          two-state toggle button, filled/pill-shaped.
 * Both are still plain <a href> elements underneath — the visual difference
 * is CSS only, nothing about crawlability or no-JS behaviour changes.
 */

/* Sits OUTSIDE .container (see server.js) as its own block, not as a third
   child of it — .container is a plain `display:flex` row built for exactly
   two items (.Explain-div and the tiles grid); a third child there just
   becomes a squeezed extra column between them, which is the exact bug this
   placement fixes. As a sibling before .container, this renders as a full
   header bar above the whole two-column layout instead. Width/centering
   mirror .container's own (style.css) at both breakpoints, so the bar's
   edges line up with the grid below it rather than the page's raw edges. */
.year-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    width: 80%;
    margin: 20px auto;
}

@media (max-width: 768px) {
    .year-controls {
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }
}

/* --- calendar-type: plain text links --------------------------------- */

.year-type-links {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 20px;
    color: #8a8378;
}

.year-type-links a {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 8px;
    color: #6b6560;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.year-type-links a:hover,
.year-type-links a:focus-visible {
    color: #1f3a5f;
    background: #f5f3ef;
}

/* The current page's own option: still a real, working self-link (kept
   clickable on purpose — a working link is cheaper to keep correct than a
   conditional that strips href on the active item), just visually inert. */
.year-type-links a[aria-current="date"] {
    color: #1f3a5f;
    font-weight: 600;
    cursor: default;
    background: #d4e2f0;
    border: 1px solid #b8cce0;
}

/* --- period: a real toggle button ------------------------------------- */

.year-period-toggle {
    display: inline-flex;
    align-items: center;
    background: #f0ede7;
    border: 1px solid #e3ddd2;
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.year-period-toggle a {
    padding: 7px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #6b6560;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.year-period-toggle a:hover,
.year-period-toggle a:focus-visible {
    color: #1f3a5f;
}

.year-period-toggle a[aria-current="date"] {
    background: #1f3a5f;
    color: #fff;
    box-shadow: 0 1px 3px rgba(31, 58, 95, .35);
}

@media (max-width: 480px) {
    .year-controls {
        gap: 8px 14px;
    }
    .year-type-links {
        font-size: 17px;
    }

    .year-type-links a {
        padding: 5px 11px;
    }
    .year-period-toggle a {
        padding: 6px 14px;
        font-size: 12px;
    }
}

/* Screen chrome, not part of the printed sheet. This bar sits directly above
   #year-tiles, OUTSIDE .Explain-div (it moved there so it reads as a header
   for the grid rather than side/intro content) — so unlike the print buttons
   above it, it does NOT get style.css's `.Explain-div{display:none}` print
   rule for free. This is therefore the ONLY thing hiding it under print, not
   a belt-and-braces backup; verified live with page.emulateMedia('print').
   Keep it if the markup ever moves again. */
@media print {
    .year-controls {
        display: none !important;
    }
}