/*
 * Mills50.org — ADA Accessibility Fixes
 * Child theme: Twenty Twelve — Mills 50 ADA
 *
 * Patches the Twenty Twelve parent theme to meet WCAG 2.1 Level AA.
 * Loaded after the parent stylesheet so every rule here wins on specificity.
 *
 * Fixes covered:
 *   1. WCAG 2.4.7  — Keyboard focus indicators (outline:none removed)
 *   2. WCAG 1.4.3  — Colour contrast (failing #9f9f9f → passing #6b6b6b)
 *   3. WCAG 1.4.4  — Text resize / minimum font sizes
 *   4. WCAG 1.3.1  — Heading hierarchy (<hgroup> → <div>, tagline <h2> → <p>)
 *   5. WCAG 2.4.2  — Page landmarks
 *   6. WCAG 2.5.5  — Touch / click target sizes (min 44 × 44 px)
 *   7. WCAG 1.4.8  — Text spacing / line height
 */


/* ============================================================
   FIX 1 — WCAG 2.4.7: Keyboard focus indicators
   The parent theme sets a { outline: none } which hides the
   browser focus ring for keyboard and switch-device users.
   We restore and define an explicit, high-contrast ring.
   ============================================================ */

a:focus,
a:focus-visible {
    outline: 3px solid #21759b !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}

button:focus,
button:focus-visible,
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
[tabindex]:focus,
[tabindex]:focus-visible {
    outline: 3px solid #21759b !important;
    outline-offset: 2px !important;
}

/* Navigation links on dark background — white ring is more visible */
.main-navigation a:focus,
.main-navigation a:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 2px !important;
    background-color: rgba(33, 117, 155, 0.15);
}


/* ============================================================
   FIX 2 — WCAG 1.4.3: Colour contrast
   #9f9f9f on #ffffff = 2.85 : 1  (FAIL — requires 4.5 : 1)
   #6b6b6b on #ffffff = 5.74 : 1  (PASS)
   ============================================================ */

.entry-meta,
.entry-meta a,
.entry-footer,
.comment-meta,
.post-date,
.cat-links,
.tags-links,
.comments-link,
.byline {
    color: #6b6b6b;
}

/* Constant Contact newsletter GO button
   The button uses class="submit" (not id="submit") so the rule below doesn't
   reach it.  The parent-theme gradient gives text colour ~#555 on #e9e9e9
   which fails at small font sizes.
   #595959 on #f4f4f4 = 5.44 : 1  PASS  (WCAG 1.4.3 / axe wcag143) */
input[name="go"][value="GO"].submit {
    color: #595959 !important;
    background: #f4f4f4 !important;
    border-color: #767676 !important;
}

/* Post navigation links */
.nav-previous a,
.nav-next a {
    color: #595959;
}

/* Disabled form elements */
button[disabled],
input[type="button"][disabled],
input[type="reset"][disabled],
input[type="submit"][disabled] {
    color: #595959;
    background-color: #d4d4d4;
}

/* Footer links */
#colophon a,
footer[role="contentinfo"] a {
    color: #595959;
}

/* Comment form inputs — placeholder text contrast
   Twenty Twelve sets ::placeholder to #bbb which is only 1.84:1 on white — FAIL.
   #767676 on #ffffff = 4.55 : 1 — PASS  (axe: color-contrast) */
#respond input[type="text"]::placeholder,
#respond input[type="email"]::placeholder,
#respond input[type="url"]::placeholder,
#respond textarea::placeholder {
    color: #767676;
}


/* Comment form — WCAG 1.4.3 text contrast + 1.4.11 non-text contrast
   ─────────────────────────────────────────────────────────────────────
   Submit button:   #7c7c7c on #f4f4f4→#e6e6e6 gradient = 3.17:1  FAIL
   Active state:    #757575 on #e1e1e1                   = 3.52:1  FAIL
   Fix: #595959 on lightest gradient stop #f4f4f4        = 5.44:1  PASS

   Required (*):    #ff0000 on #ffffff                   = 4.00:1  FAIL
   Fix: #c00000 on #ffffff                               = 6.25:1  PASS

   Input borders:   #cccccc on #ffffff                   = 1.55:1  FAIL (1.4.11)
   Fix: #767676 on #ffffff                               = 4.48:1  PASS  */

/* #595959 on #f4f4f4 = 6.37 : 1  PASS  (gradient removed — axe: color-contrast) */
#submit,
.comment-form input[type="submit"] {
    color: #595959;
    background: #f4f4f4;
    border-color: #767676;
}

.comment-form input[type="submit"]:active {
    color: #595959;
    background: #e8e8e8;
}

#respond .required {
    color: #c00000;
}

#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"],
#respond textarea {
    border-color: #767676;
}


/* ============================================================
   FIX 3 — WCAG 1.4.4: Text resize / minimum font sizes
   Parent theme uses 14 px base; some elements drop to 11–12 px.
   Minimum accessible body text is 14 px; we set 16 px as the base.
   ============================================================ */

body {
    font-size: 16px;
    line-height: 1.625;
}

/* Navigation was 12–13 px */
.main-navigation ul,
.main-navigation li,
.main-navigation a {
    font-size: 14px;
}

/* Form inputs were 11 px */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea,
select {
    font-size: 15px;
    line-height: 1.5;
}

/* Entry meta was 12–13 px */
.entry-meta,
.entry-footer,
.comment-meta,
.byline {
    font-size: 14px;
}

/* Widget text was 12 px */
.widget {
    font-size: 14px;
}

/* Skip link must be readable when it surfaces on focus */
.site .screen-reader-text:focus,
.main-navigation .assistive-text:focus {
    font-size: 16px !important;
    padding: 16px 20px !important;
    z-index: 9999;
    left: 6px;
    top: 6px;
}


/* ============================================================
   FIX 4 — WCAG 1.3.1: Heading hierarchy / hgroup deprecation
   header.php replaces <hgroup> with <div class="site-branding">
   and the tagline <h2> with <p class="site-description">.
   These rules keep the visual result identical to before.
   ============================================================ */

.site-branding {
    display: block;
    margin: 0;
    padding: 0;
}

p.site-description {
    font-size: 1.142857143rem;
    font-style: italic;
    font-weight: normal;
    color: #757575;
    margin: 0;
}

@media screen and (max-width: 599px) {
    p.site-description {
        text-align: center;
    }
}


/* ============================================================
   FIX 5 — WCAG 2.4.2: Page landmarks
   The skip-link target (#content) must not show a focus ring —
   it receives focus programmatically, not from user interaction.
   ============================================================ */

#content:focus {
    outline: none;
}


/* ============================================================
   FIX 6 — WCAG 2.5.5: Touch / pointer target sizes
   Minimum recommended: 44 × 44 CSS pixels.

   Desktop top-level (≥ 600px): parent's line-height: 3.69 at our 14px
   font already produces ~52px tall links — no override needed.

   Desktop dropdowns (≥ 600px): parent gives these display:block with
   line-height: 2.18 (~24px) + 8px padding = ~40px. We apply flex to
   vertically centre the text and push them to 44px.
   Targeting li ul li a (not top-level li a) avoids the nav-wrap issue.

   Mobile (< 600px): hamburger menu links need explicit flex + padding
   since line-height no longer applies.
   ============================================================ */

/* Hamburger toggle button — only visible on mobile, safe to set globally */
.menu-toggle {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 16px;
    font-size: 14px;
}

/* Desktop: tighten top-level nav item gaps.
   Parent uses margin: 0 2.857rem 0 0 — at our 16px body base that
   inflates to ~46px per gap (7 items × 46px overflows 960px container).
   Fixed-px value keeps it predictable regardless of font-size base. */
@media screen and (min-width: 600px) {
    .main-navigation li {
        margin: 0 20px 0 0;
    }
}

/* Desktop dropdown items: vertically centred, 44px touch target.
   Parent gives display:block + line-height:2.18 + 9px padding → text
   sits in top-quarter of row. Flex centres it cleanly. */
@media screen and (min-width: 600px) {
    .main-navigation li ul li a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 10px;
        line-height: 1.5;
    }
}

/* ── Mobile nav accordion ─────────────────────────────────────────────────── */

/* Toggle chevron button — hidden on desktop, shown on mobile via media query */
.sub-menu-toggle {
    display: none;
}

@media screen and (max-width: 599px) {

    /* Top-level and sub-menu links: 44px touch target, compact padding */
    .nav-menu a,
    .main-navigation a {
        min-height: 44px;
        padding: 0 14px;
        display: flex;
        align-items: center;
        border-bottom: none; /* separators handled by li */
    }

    /* Nav panel — full-width, but hidden until the toggle button is pressed.
       Parent theme sets display:none on .nav-menu and display:inline-block on
       .nav-menu.toggled-on.  We override only the toggled-on state so the panel
       fills the container; the closed state inherits display:none from the parent. */
    .main-navigation ul.nav-menu {
        width: 100%;
        /* display:none is kept from parent — do NOT set display here */
    }
    .main-navigation ul.nav-menu.toggled-on {
        display: block;
        width: 100%;
    }

    /* Each nav row = link + chevron button side by side — full-width */
    .main-navigation li {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        margin: 0;
        width: 100%;
    }

    .main-navigation li > a {
        flex: 1;
        min-width: 0;
    }

    /* Chevron toggle button: 44 × 44 px, right-aligned */
    .sub-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 44px;
        min-height: 44px;
        background: transparent;
        border: none;
        border-left: 1px solid rgba(0, 0, 0, 0.07);
        cursor: pointer;
        color: #6a6a6a;
        padding: 0;
    }

    .sub-menu-toggle:hover,
    .sub-menu-toggle:focus-visible {
        background: rgba(0, 0, 0, 0.05);
        outline: 3px solid #21759b;
        outline-offset: -3px;
    }

    /* Chevron rotates when sub-menu opens */
    .sub-menu-toggle svg {
        transition: transform 0.2s ease;
    }
    .sub-menu-toggle[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

    /* Sub-menus: override absolute/clipped desktop positioning.
       Hidden by default; shown when JS adds .is-open */
    .main-navigation .sub-menu {
        position: static !important;
        clip-path: none !important;
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
        display: none;
        flex-basis: 100%; /* wraps to full-width line in flex li */
        margin: 0;
        padding: 0;
    }

    .main-navigation .sub-menu.is-open {
        display: block;
    }

    /* Level 2 items: slightly smaller text, indented */
    .main-navigation .sub-menu > li > a {
        font-size: 13px;
        padding-left: 28px;
        background: rgba(0, 0, 0, 0.025);
    }
    .main-navigation .sub-menu > li > .sub-menu-toggle {
        background: rgba(0, 0, 0, 0.025);
    }

    /* Level 3 items: further indented */
    .main-navigation .sub-menu .sub-menu > li > a {
        font-size: 12px;
        padding-left: 44px;
        background: rgba(0, 0, 0, 0.045);
    }
    .main-navigation .sub-menu .sub-menu > li > .sub-menu-toggle {
        background: rgba(0, 0, 0, 0.045);
    }
}


/* ============================================================
   FIX 7 — WCAG 1.4.8: Text spacing / line height
   Body paragraphs and list items must have line-height ≥ 1.5.
   ============================================================ */

p, li, dd, dt {
    line-height: 1.6;
}


/* ============================================================
   FIX 8 — Mobile header image visibility
   The header banner (853 × 179 px) scales down to ~79 px tall
   on a 375 px screen, making it nearly invisible. This sets a
   minimum height and uses object-fit so it always reads clearly.
   Pre-existing issue — not caused by the child theme.
   ============================================================ */

@media screen and (max-width: 599px) {
    .header-image img {
        min-height: 120px;
        object-fit: cover;
        object-position: center;
    }
}


/* ============================================================
   FIX 9 — Mobile background image
   The desktop background (img_bkg1.jpg) is a wide tiling image
   with background-attachment:fixed set by the Customizer.
   Fixed attachment doesn't work correctly on iOS Safari and the
   desktop tile doesn't crop well at narrow widths.

   We swap in the 750×460 px mobile-optimised webp at ≤ 782 px,
   use cover sizing so it always fills the viewport, and switch
   attachment to scroll (correct iOS behaviour).

   Path: img/img_bkg_mobile.webp (bundled in child theme)
   The CSS file lives in css/ so the relative path is ../img/…
   ============================================================ */

@media screen and (max-width: 782px) {
    /* JPEG base — works on every browser including iOS ≤ 13 */
    body.custom-background {
        background-image: url('../img/img_bkg_mobile.jpg') !important;
        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
    }
    /* WebP override for browsers that support it (smaller file, better quality) */
    @supports (background-image: url('x.webp')) {
        body.custom-background {
            background-image: url('../img/img_bkg_mobile.webp') !important;
        }
    }
}