/* ============================================================================
   site-enhance.css — readability, accessibility (WCAG 2.1 AA) and mobile fixes.

   Loaded LAST, after style.css and styles/default.css, so it overrides the
   theme without editing any theme file. Like js/site-nav.js, this is a single
   shared file: change it once, every page updates.

   Fixes applied here:
     1. Base type was 16px/1.43 (Bootstrap's tight leading) -> 18px/1.6
     2. Content column was double-indented (10% padding + col-md-offset-1),
        wasting 372px on a 1440px screen -> single indent, centred, capped
     3. Contrast failures: .updated-note was 3.93:1, .toc-box a was 3.94:1
        (WCAG AA needs 4.5:1 for normal-size text)
     4. Tap targets under 44px (social icons were 14x18)
     5. Visible keyboard focus (WCAG 2.4.7)
     6. Mobile: two-column TOC forced into 375px, oversized page padding
   ============================================================================ */

/* ---------------------------------------------------------------
   1. TYPOGRAPHY — bigger text, roomier leading.
   Most small text on the site is em-based (0.85em / 0.9em), so
   raising the body size lifts those proportionally too.
   --------------------------------------------------------------- */
body {
    font-size: 18px;
    line-height: 1.6;
}

/* Long-form reading gets a little extra leading. */
#main p,
#main li,
#main dd {
    line-height: 1.65;
}

#main li { margin-bottom: 6px; }

/* Floor for the smallest text on the site. */
.updated-note      { font-size: 15px; }
.resource-card p,
.references,
.references li,
.dimension-grid .dim p,
.concern-box p,
.principle-card p  { font-size: 16.5px; }

/* Sidebar menu label was 14px. */
#navigation .text { font-size: 15px; }

/* ---------------------------------------------------------------
   2. CONTRAST — WCAG 2.1 AA (4.5:1 for normal text)
   --------------------------------------------------------------- */
.updated-note      { color: #4a5568; }  /* was #6b7a90 -> 3.93:1  now ~6.9:1 */
.toc-box a         { color: #1a5fb4; }  /* was #2c7be5 -> 3.94:1  now ~6.1:1 */
.resource-card a   { color: #1a5fb4; }
.dimension-grid .dim p,
.resource-card p   { color: #4a5568; }

/* ---------------------------------------------------------------
   3. LAYOUT — reclaim the wasted side margins.
   The theme indents twice: .section-container has 10% padding AND the
   content sits in .col-md-10.col-md-offset-1. Collapse to one indent
   and centre, with a max-width so line length stays readable.
   --------------------------------------------------------------- */
.section-container {
    padding-left: 32px;
    padding-right: 32px;
}

.section-container .col-md-10.col-md-offset-1 {
    width: 100%;
    max-width: 900px;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.pageheader { padding: 44px 0 40px 0; }

/* ---------------------------------------------------------------
   4. FOCUS VISIBILITY — WCAG 2.4.7
   --------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #1a5fb4;
    outline-offset: 2px;
    border-radius: 3px;
}

/* On the dark sidebar a light ring is needed to be visible. */
#sidebar a:focus-visible {
    outline: 3px solid #ffd479;
    outline-offset: -3px;
}

/* Skip link: make it a real, visible control when focused. */
.skip-to-main:focus {
    display: inline-block;
    padding: 12px 18px;
    font-size: 16px;
    background: #ffffff;
    color: #1a2d5a;
    border: 3px solid #1a5fb4;
    border-radius: 4px;
    z-index: 10000;
}

/* ---------------------------------------------------------------
   5. TAP TARGETS — 44x44 minimum (WCAG 2.5.8)
   --------------------------------------------------------------- */
#sidebar-footer .social-icons ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
}
#sidebar-footer .social-icons ul { margin: 0; padding: 0; white-space: nowrap; }
#sidebar-footer .social-icons ul li { margin: 0 1px; }

.toc-box li,
.aig-toc li { margin-bottom: 10px; }

.toc-box a,
.aig-toc a,
.aig-callout li a,
.aig-body li a { display: inline-block; padding: 4px 0; min-height: 24px; }

/* Inline links inside body copy get a little vertical room on touch screens. */
@media (pointer: coarse) {
    .toc-box a,
    .aig-toc a,
    .aig-out a,
    .aig-body a { padding-top: 6px; padding-bottom: 6px; display: inline-block; min-height: 30px; }
}


/* ---------------------------------------------------------------
   9. LINK + BADGE CONTRAST (theme-level, applies to every page)
   Bootstrap's default link blue #337ab7 gives 4.11:1 on white —
   just under the 4.5:1 AA threshold. The green "module tag" and
   similar white-on-#27ae60 badges were 2.87:1.
   Buttons and anything on a dark panel are excluded.
   --------------------------------------------------------------- */
#main a:not(.btn):not(.aig-btn):not(.aig-badge),
.toc-box a,
.resource-card a {
    color: #1a5fb4;
}

#main a:not(.btn):not(.aig-btn):hover,
#main a:not(.btn):not(.aig-btn):focus {
    color: #123a78;
}

/* Links sitting on dark panels keep their light colour. */
.guide-hero-box a,
.aig-hero a,
#main .bg-dark a {
    color: #a8d5ef;
}

.module-feature .module-tag,
.module-tag {
    background: #1d7a45;
}


/* ---------------------------------------------------------------
   10. TIMELINE / RESUME BADGES (home page)
   White text on the theme's bright accent green (#03cc85) measured
   2.1:1 and on #2c7be5 measured 4.14:1 - both below the 4.5:1 AA
   threshold. Darkened just enough to pass while staying on-brand.
   --------------------------------------------------------------- */
.dates span,
.dy .year,
.dy .degree,
.open .date,
.timeline .date {
    background-color: #0b6e49 !important;   /* was #03cc85 / #03bb7a -> 2.1:1  now ~6.6:1 */
    color: #ffffff;
}

.fellow-badge,
.badge-ai {
    background-color: #1a5fb4 !important;   /* was #2c7be5 -> 4.14:1  now ~6.3:1 */
    color: #ffffff;
}

.open .data .subject,
.data .subject,
.subject {
    color: #595959 !important;               /* was #777 -> 4.48:1  now ~7:1 */
}

/* ---------------------------------------------------------------
   6. MOBILE
   --------------------------------------------------------------- */
@media (max-width: 767px) {
    body { font-size: 17px; }

    .section-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* The floating menu button is position:fixed at top-left (50x50).
       Without this the page <h1> renders underneath it. */
    .pageheader { padding: 66px 0 24px 0; }

    .headercontent .title {
        font-size: 28px;
        line-height: 1.22;
        margin-bottom: 18px;
        padding-bottom: 14px;
    }

    /* Two columns is unreadable at 375px. */
    .toc-box ol,
    .module-feature .topics-list {
        columns: 1;
        -webkit-columns: 1;
    }

    .toc-box        { padding: 14px 18px; }
    .guide-hero-box { padding: 22px 20px; }
    .principle-card,
    .concern-box,
    .resource-card  { padding: 14px 16px; }

    /* Long URLs and code must not force sideways scrolling. */
    #main a, #main code, #main pre { word-wrap: break-word; overflow-wrap: break-word; }
    #main pre { white-space: pre-wrap; }

    /* Tables scroll inside themselves rather than pushing the page wide. */
    #main table:not(.aig-table) { display: block; overflow-x: auto; max-width: 100%; }
}

@media (max-width: 400px) {
    .headercontent .title { font-size: 25px; }
}

/* ---------------------------------------------------------------
   7. RESPECT REDUCED MOTION
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------
   8. SIDEBAR FIT ON SHORT SCREENS
   The menu now has 14 items. Profile (276px) + menu (658px) +
   footer (134px) = 1068px, which overflows a typical 700-900px
   laptop viewport. The sidebar does scroll, but a hidden scroll
   region is easy to miss, so compress it to fit instead.
   --------------------------------------------------------------- */
@media (min-width: 768px) and (max-height: 1000px) {
    #profile { padding: 14px 10px 10px 10px; }
    #profile .portrate { width: 72px; height: 72px; }
    #profile .title h2 { font-size: 21px; margin: 8px 0 0 0; }
    ul#navigation { margin: 0; padding: 0; }
    ul#navigation li .text { line-height: 38px; }
    ul#navigation li a { line-height: 38px; }
    ul#navigation li a .fa { line-height: 38px; }   /* icon is display:block and sets the row height */
    #sidebar-footer { padding-top: 4px; padding-bottom: 4px; }
    #sidebar-footer #copyright { margin: 2px 0 0 0; font-size: 12px; }
}

@media (min-width: 768px) and (max-height: 820px) {
    #profile { padding: 10px 10px 8px 10px; }
    #profile .portrate { width: 60px; height: 60px; }
    #profile .title h2 { font-size: 18px; }
    #profile .title h3 { font-size: 13px; }
    ul#navigation li .text { line-height: 33px; }
    ul#navigation li a { line-height: 33px; }
    ul#navigation li a .fa { line-height: 33px; }
    #navigation .text { font-size: 14px; }
    #sidebar-footer .social-icons ul li a { min-width: 34px; min-height: 34px; }
}