/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-text);
    background: var(--color-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* Sitewide keyboard-focus baseline. :focus-visible (not :focus) so it only
   shows for keyboard/assistive-tech navigation, not mouse clicks — the
   individual :focus-visible rules elsewhere in this file and in each
   page's stylesheet override this per-component (border-color instead of
   an outline, etc.), but anything not explicitly handled still gets a
   clear, consistent indicator instead of silently having none. */
:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
}

/* =============================================
   LAYOUT
   ============================================= */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

@media (max-width: 768px) {
    .container { padding-inline: var(--container-pad-mobile); }
}

/* =============================================
   TYPOGRAPHY
   ============================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}

h1 { font-size: var(--text-6xl); letter-spacing: var(--leading-tight); }
h2 { font-size: var(--text-5xl); letter-spacing: var(--leading-tight); }
h3 { font-size: var(--text-4xl); letter-spacing: var(--leading-tight); }
h4 { font-size: var(--text-3xl); }
h5 { font-size: var(--text-2xl); }
h6 { font-size: var(--text-xl); }

p { color: var(--color-text-secondary); line-height: 1.7; }

@media (max-width: 768px) {
    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    h3 { font-size: var(--text-2xl); }
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: var(--font-primary);
    transition: background var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition);
    white-space: nowrap;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
    border: 2px solid var(--color-primary);
}
.btn--primary:hover { background: var(--color-primary-mid); border-color: var(--color-primary-mid); }

.btn--outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}
.btn--outline:hover { background: var(--color-primary); color: var(--color-white); }

.btn--accent {
    background: var(--color-accent);
    color: var(--color-text);
    border: 2px solid var(--color-accent);
}
.btn--accent:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }

.btn--ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border);
}
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn--full { width: 100%; }

.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-md); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }

.btn:disabled {
    background: var(--color-border);
    border-color: var(--color-border);
    color: var(--color-text-placeholder);
    cursor: not-allowed;
}

/* =============================================
   FORMS — shared by any front-end contact/application
   form (Partner with Us, Join Community, ...)
   ============================================= */
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.form-field input,
.form-field textarea {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-family: var(--font-primary);
    resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus { border-color: var(--color-primary-light); }
.form-field input:focus-visible,
.form-field textarea:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 2px; }

.form-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}
.form-consent input { margin-top: 3px; }
.form-consent a { color: var(--color-primary); font-weight: 600; }

/* Server-side submission error (invalid input, mail failure, etc.) —
   shown in place of the success panel, which only appears once the
   backend actually confirms the email sent. */
.form-error-message {
    font-size: var(--text-sm);
    color: var(--color-error-dark);
    background: var(--color-error-bg);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
}

.form-success { max-width: 480px; }
.form-success__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: var(--color-green);
    color: var(--color-white);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
}
.form-success__heading { color: var(--color-green); margin-bottom: var(--space-3); }
.form-success__body { margin-bottom: var(--space-8); }

.btn-link {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-primary-light);
    text-decoration: underline;
    cursor: pointer;
}
.btn-link:hover { color: var(--color-primary); }

/* =============================================
   STORY CARD — shared by the homepage strip, the
   Impact Stories archive grid, and "Related stories"
   ============================================= */
.story-card {
    display: block;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    transition: box-shadow var(--transition), transform var(--transition);
}
.story-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}
.story-card__media { position: relative; height: 220px; overflow: hidden; display: block; }
.story-card__media img,
.story-card__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-card__media--placeholder { background: var(--color-surface-mid); }

/* Decorative play icon for video-category stories */
.story-card__play {
    position: absolute;
    top: 50%;
    left: var(--space-4);
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-error);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-card__body { padding: var(--space-5); }
.story-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.story-card__category {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-surface-mid);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}
.story-card__read-time {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.story-card__title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-3);
    line-height: 1.3;
}
.story-card__title a { color: var(--color-text); }
.story-card__title a:hover { color: var(--color-primary-light); }
.story-card__excerpt { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.6; }

/* =============================================
   BREADCRUMB — shared by the remaining custom (non-page-hero)
   headers still in use (Initiatives hub + single Initiative)
   ============================================= */
.initiatives-hub__breadcrumb,
.initiative__breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-6);
}
.initiatives-hub__breadcrumb a:hover,
.initiative__breadcrumb a:hover {
    color: var(--color-primary);
}

/* =============================================
   NAVBAR
   ============================================= */
.navbar {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border-light);
    transform: translateY(0);
    transition: transform 0.3s ease;
}
/* Slid out of view on scroll-down, back on scroll-up — see the scroll
   listener in main.js. Stays position:sticky throughout, so it's already
   in place (just off-screen) the instant it needs to reappear. */
.navbar--hidden { transform: translateY(-100%); }

.navbar__inner {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    height: 150px;
    padding: var(--space-3) 0;
}

/* Logo */
.navbar__logo { display: flex; align-items: center; flex-shrink: 0; }
.navbar__logo img { width: auto; }
.navbar__logo-img { height: 130px; width: auto; }
.navbar__logo-text { font-size: var(--text-lg); font-weight: 700; color: var(--color-primary); }

/* Desktop nav */
.navbar__nav { flex: 1; }

.navbar__menu {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Each nav item is a positioning context for its dropdown */
.navbar__item {
    position: relative;
    display: flex;
    align-items: center;
}

.navbar__link {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    transition: color var(--transition), background var(--transition);
    white-space: nowrap;
}
.navbar__link:hover,
.navbar__item.is-active > .navbar__link { color: var(--color-primary); }
.navbar__item.is-open > .navbar__link  { color: var(--color-primary); background: var(--color-primary-bg); }

/* Chevron toggle button — sits right of the link */
.navbar__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    transition: color var(--transition), background var(--transition), transform var(--transition);
}
.navbar__toggle:hover { color: var(--color-primary); background: var(--color-primary-bg); }
.navbar__item.is-open > .navbar__toggle { color: var(--color-primary); transform: rotate(180deg); }

.navbar__chevron { display: block; }

/* Standard dropdown */
.navbar__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    z-index: 10;
}
.navbar__submenu { display: flex; flex-direction: column; gap: 2px; }
.navbar__submenu li a {
    display: block;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    transition: background var(--transition), color var(--transition);
}
/* A background highlight, not just a text-color change, so the hovered/
   focused item is easy to pick out at a glance — same tint strength as
   the hero search dropdown's option hover. */
.navbar__submenu li a:hover,
.navbar__submenu li a:focus-visible {
    background: rgba(0, 146, 200, 0.12);
    color: var(--color-primary);
}

/* Section labels + divider — used by the Industries dropdown to group
   Current/Past industries (dropdown-industries.php); harmless if unused
   elsewhere. */
.navbar__submenu-label {
    padding: var(--space-2) var(--space-4) var(--space-1);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.navbar__submenu-divider {
    height: 1px;
    margin: var(--space-2) var(--space-2);
    background: var(--color-border-light);
}

/* Mega menu — Industries */
.navbar__mega {
    position: fixed;
    top: 80px; /* match navbar height */
    left: 0;
    right: 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-lg);
    z-index: 10;
    padding-block: var(--space-6);
}

.navbar__mega-inner {
    display: flex;
    gap: var(--space-10);
}

.mega-section { flex: 1; }
.mega-section--past { border-left: 1px solid var(--color-border-light); padding-left: var(--space-10); }

.mega-section__label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-4);
}

.mega-section__grid {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    scrollbar-width: thin;
}

.industry-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 140px;
    max-width: 160px;
    flex-shrink: 0;
    transition: opacity var(--transition);
}
.industry-tile:hover { opacity: 0.85; }

.industry-tile__image {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface-mid);
}
.industry-tile__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.industry-tile__image--placeholder { background: var(--color-surface-mid); }

.industry-tile__title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
    display: block;
}
.industry-tile__excerpt {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CTA button */
.navbar__actions { flex-shrink: 0; }
.navbar__cta { height: 48px; padding-inline: var(--space-8); border-radius: var(--radius-md); }

/* Hamburger */
.navbar__hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-2);
    margin-left: auto;
    border-radius: var(--radius-md);
}
.navbar__hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    border-radius: var(--radius-full);
    transition: transform var(--transition), opacity var(--transition);
}
.navbar__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__hamburger.is-open span:nth-child(2) { opacity: 0; }
.navbar__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile drawer ---- */
.navbar__mobile {
    border-top: 1px solid var(--color-border-light);
    background: var(--color-white);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
}
.navbar__mobile-inner { padding: var(--space-4) var(--container-pad-mobile) var(--space-6); }

/* Reuse walker output inside mobile */
.navbar__mobile .navbar__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.navbar__mobile .navbar__item {
    flex-direction: column;
    align-items: stretch;
    border-bottom: 1px solid var(--color-border-light);
}
.navbar__mobile .navbar__item:last-child { border-bottom: none; }

.navbar__mobile .navbar__link {
    padding: var(--space-4) 0;
    font-size: var(--text-md);
    justify-content: space-between;
    width: 100%;
}
.navbar__mobile .navbar__toggle { margin-left: auto; }

/* Mobile sub-menus */
.navbar__mobile .navbar__dropdown {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 var(--space-3) var(--space-4);
    border-radius: 0;
}
.navbar__mobile .navbar__mega {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 var(--space-3) 0;
}
.navbar__mobile .navbar__mega-inner { flex-direction: column; gap: var(--space-5); }
.navbar__mobile .mega-section--past { border-left: none; padding-left: 0; border-top: 1px solid var(--color-border-light); padding-top: var(--space-4); }
.navbar__mobile .mega-section__grid { flex-wrap: wrap; }

.navbar__mobile-actions {
    margin-top: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
    .navbar__nav, .navbar__actions { display: none; }
    .navbar__hamburger { display: flex; }
}

@media (min-width: 1025px) {
    .navbar__mobile { display: none !important; }
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
    background: var(--color-white);
    padding: var(--space-5) var(--space-5) 0;
}

.site-footer__wrap {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-12) var(--space-12) var(--space-8);
}

/* Shared left/right split — .site-footer__row--top (logo | newsletter) and
   .site-footer__row--bottom (link columns | safeguarding card) both use
   this same 1fr/1fr definition, so the logo lines up above the link
   columns and the newsletter lines up above the safeguarding card,
   instead of each row having its own unrelated column widths. */
.site-footer__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--space-16);
}
.site-footer__row--top { margin-bottom: var(--space-10); }
.site-footer__row--bottom { margin-bottom: var(--space-8); }

.site-footer__logo a,
.site-footer__logo-text {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-white);
    display: block;
}
.site-footer__logo img {
    width: 180px;
    height: auto;
}
/*
   Now that .site-footer__logo sits in a much wider grid column (half the
   footer, since the logo/link-columns restructure), the image's own
   max-width:100% (global reset) let it balloon up to fill that whole
   column instead of staying its intended compact size — width:auto alone
   didn't cap anything, it was only ever "small" by accident, because the
   old fixed 200px column happened to constrain it. Pinning an explicit
   width fixes that regardless of how wide this column ever gets.
*/
.site-footer__logo-img {
    width: 180px;
    height: auto;
}

.site-footer__newsletter-text {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.9);
    margin-bottom: var(--space-4);
    max-width: 560px;
}

.site-footer__newsletter-fields {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.site-footer__newsletter-input {
    flex: 1;
    height: 48px;
    padding-inline: var(--space-4);
    /* Was transparent + a faint border — on the dark footer background
       that made it barely readable as an input at all. Design shows a
       solid white field. */
    background: var(--color-white);
    border: 1px solid var(--color-white);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-family: var(--font-primary);
    transition: border-color var(--transition);
}
.site-footer__newsletter-input::placeholder { color: var(--color-text-placeholder); }
.site-footer__newsletter-input:focus { border-color: var(--color-primary-light); }
.site-footer__newsletter-input:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 2px; }

.site-footer__newsletter-btn {
    height: 48px;
    padding-inline: var(--space-6);
    background: transparent;
    border: 1.5px solid var(--color-white);
    border-radius: var(--radius-md);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}
.site-footer__newsletter-btn:hover { background: var(--color-white); color: var(--color-primary); }

.site-footer__newsletter-consent {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
}

.site-footer__newsletter-message {
    font-size: var(--text-sm);
    font-weight: 600;
    margin-top: var(--space-2);
}
.site-footer__newsletter-message--success { color: var(--color-green-light); }
.site-footer__newsletter-message--error { color: #ff9d9d; }

/* Divider */
.site-footer__divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.2);
    margin-block: var(--space-8);
}

/* The 3 link columns — Outbox / Useful links / Follow Us — as one group
   filling .site-footer__row--bottom's left half (the safeguarding card
   fills the right half, as its own single grid item — see .site-footer__row
   above). */
.site-footer__link-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.site-footer__col-heading {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-5);
}

/* Nav menus inside footer */
.site-footer__menu { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__menu li a {
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    transition: color var(--transition);
}
.site-footer__menu li a:hover { color: var(--color-white); }

/* Social grid — 2 columns */
.site-footer__social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
.site-footer__social-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.85);
    transition: color var(--transition);
}
.site-footer__social-link:hover { color: var(--color-white); }
/* Icons default to 20x20 (baked into outbox_social_icons()'s SVG strings)
   — bumped up so this column carries similar visual weight to the two
   text-link columns beside it, instead of looking lighter/smaller. */
.site-footer__social-link svg { flex-shrink: 0; width: 24px; height: 24px; }

/* Safeguarding card */
.site-footer__safe-card {
    background: var(--color-green-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}
.site-footer__safe-heading {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-green-dark);
    margin-bottom: var(--space-3);
}
.site-footer__safe-body {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin-bottom: var(--space-5);
}
.site-footer__safe-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-green);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full);
    transition: background var(--transition);
}
.site-footer__safe-btn:hover { background: var(--color-green-dark); }

/* Legal bar */
.site-footer__legal-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}
.site-footer__copy {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.55);
}
.site-footer__legal-menu { display: flex; gap: var(--space-6); }
.site-footer__legal-menu li a {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.7);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition);
}
.site-footer__legal-menu li a:hover { color: var(--color-white); }

/* Responsive */
@media (max-width: 1024px) {
    .site-footer__link-columns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .site-footer__wrap { padding: var(--space-8) var(--space-5) var(--space-6); border-radius: var(--radius-lg); }
    .site-footer__row { grid-template-columns: 1fr; gap: var(--space-6); }
    .site-footer__row--top { margin-bottom: var(--space-6); }
    .site-footer__row--bottom { margin-bottom: var(--space-6); }
    .site-footer__legal-bar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .site-footer__link-columns { grid-template-columns: 1fr; }
    .site-footer__newsletter-fields { flex-direction: column; }
    .site-footer__newsletter-btn { width: 100%; }
}

/* =============================================
   ACCESSIBILITY
   ============================================= */
/* Standard WP-style visually-hidden utility — content still reachable by
   screen readers, just not shown on screen. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* .skip-link also carries .screen-reader-text (visually-hidden until
   focused) — :focus has to undo that clipping, not just reposition it,
   or it'd stay invisible even once focused. */
.skip-link {
    top: -100%;
    left: var(--space-4);
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    z-index: 9999;
}
.skip-link:focus {
    top: var(--space-4);
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}