/* ==========================================================================
   STARR — Shared Design System
   B Optimal Consulting, LLC
   Single source of truth for tokens, base, header, footer, buttons,
   callouts, tables, accessibility and print.

   Page-specific components stay in each page's own <style> block.
   ========================================================================== */

/* --- Fonts --------------------------------------------------------------- */
/* Poppins is loaded per-page via <link> to keep this file dependency-free. */


/* --- Tokens -------------------------------------------------------------- */
:root {
    /* Brand — 1a Evolved Teal & Coral */
    --teal:        #12879A;   /* bright teal — kickers, accents */
    --navy:        #0F4C5C;   /* deep teal — headings, primary */
    --primary:     #0F4C5C;
    --link:        #1C6C8A;
    --ink:         #1D2730;   /* body text */
    --ice:         #cce7f1;
    --lemon:       #F4E44D;   /* focus yellow */
    --deep:        #0E3D4A;   /* darkest teal — gradient top */
    --coral:       #E89218;   /* golden orange accent — sparing */
    --slate:       #5A6A7B;

    /* Text & surface */
    --text:        #1D2730;
    --muted:       #5A6A7B;
    --white:       #ffffff;
    --border-gray: #6e7b86;
    --surface:     #F2F5F7;
    --surface-2:   #FFFFFF;

    /* Callout accents */
    --info-bg:     #cce7f1;
    --success-bg:  #e8f5e9;
    --success-line:#2E7D32;
    --warn-bg:     #fff9e6;
    --warn-line:   #8C3F00;

    /* Elevation & shape */
    --shadow:      0 2px 8px rgba(16, 71, 91, 0.1);
    --shadow-lg:   0 4px 20px rgba(16, 71, 91, 0.15);
    --radius:      8px;
    --radius-lg:   12px;

    /* Layout */
    --container:   920px;

    /* --- Hub layer -------------------------------------------------------
       Semantic aliases used by the Staff and Student Hub pages.
       Derived from the base tokens above; kept separate so hub markup
       needs no rewriting. --------------------------------------------- */
    --brand-primary:          var(--deep);
    --brand-primary-soft:     var(--navy);
    --accent-teal:            var(--teal);
    --accent-yellow:          var(--lemon);
    --accent-color:           var(--deep);
    --accent-soft:            var(--ice);

    --surface-white:          var(--white);
    --surface-page-light:     #F2F5F7;
    --surface-tint-blue:      rgba(204, 231, 241, 0.45);
    --surface-highlight-blue: var(--ice);
    --surface-soft:           #F7F9FC;
    --surface-color:          var(--white);

    --text-main:              var(--ink);
    --text-muted:             #3F4B56;
    --text-color:             var(--ink);
    --muted-text-color:       #3F4B56;

    --border-light:           #7F8EA0;
    --border-medium:          #7F8EA0;
    --border-strong:          #7F8EA0;
    --border-focus:           #0066CC;

    --warning-text:           #7A3608;
    --chip-bg:                rgba(204, 231, 241, 0.45);
    --chip-text:              var(--navy);
    --background-gradient:    linear-gradient(135deg, #0b2233 0%, #173b52 40%, #10475B 100%);
    --gradient:    linear-gradient(135deg, var(--teal) 0%, var(--deep) 100%);
    --gradient-dark: linear-gradient(135deg, var(--deep) 0%, var(--navy) 100%);

    /* Skills in Action — sphere palette */
    --green:       #2E7D32;
    --green-mid:   #43a047;
    --green-light: #e8f5e9;
    --cyan:        #0097B2;
    --tint:        #EAF3F7;
    --highlight:   #CCE7F1;
    --border:      #B8C4CE;
    --focus:       #10475B;
}


/* --- Reset & base -------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Poppins', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--surface);
    color: var(--text);
    line-height: 1.7;
    font-size: 16px;
}

a { color: var(--link); }

strong { color: var(--navy); }

p { margin-bottom: 1rem; }
ul, ol { margin: .7rem 0 1rem; padding-left: 1.4rem; }
li { margin-bottom: .45rem; }


/* --- Accessibility ------------------------------------------------------- */
.sr-only {
    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 {
    position: absolute;
    top: -48px; left: 0;
    background: var(--navy);
    color: var(--white);
    padding: 10px 18px;
    z-index: 1200;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { top: 0; }

a:focus, button:focus, textarea:focus, [tabindex]:focus {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--lemon);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #0F4C5C;
}


/* --- Header -------------------------------------------------------------- */
.header {
    background: var(--navy);
    color: var(--white);
    padding: 2.5rem 2rem 3rem;
    text-align: center;
    position: relative;
}
.header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 5px;
    background: var(--coral);
}
.header-content { max-width: 840px; margin: 0 auto; }

/* Eyebrow: "STARR+ · Story Works" / "· Implementation Supplement" */
.eyebrow, .tool-eyebrow {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .78rem;
    font-weight: 600;
    color: #ffffff; /* full white: AA over teal gradient stop (was 0.85 → 4.07:1) */
    margin-bottom: .9rem;
}

/* Fluid: replaces eight hand-tuned h1 sizes */
.header h1 {
    font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.4rem);
    font-weight: 700;
    margin-bottom: .55rem;
    line-height: 1.24;
}
.header .subtitle {
    font-size: 1.03rem;
    color: #ffffff; /* full white: AA over teal gradient stop (was 0.92 → 4.48:1) */
    max-width: 700px;
    margin: 0 auto;
}
/* Hub pages use a lemon byline instead of a white subtitle */
.header .byline {
    font-size: 1.1rem;
    color: var(--lemon);
    font-weight: 500;
}
/* When the header carries a download button */
.header .subtitle + .download-btn { margin-top: 1.6rem; }


/* --- Layout & headings --------------------------------------------------- */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 2.25rem 1.5rem 3rem;
}

h2 {
    color: var(--navy);
    font-size: 1.45rem;
    font-weight: 700;
    margin: 2.5rem 0 .85rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--ice);
}
h3 { color: var(--navy); font-size: 1.12rem; font-weight: 600; margin: 1.35rem 0 .5rem; }
h4 { color: var(--navy); font-size: 1rem;    font-weight: 600; margin: 1rem 0 .35rem; }


/* --- Buttons ------------------------------------------------------------- */
.download-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 48px;
    padding: .7rem 1.6rem;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: transform .15s ease;
}
.download-btn:hover { transform: translateY(-2px); }
.download-btn .ico  { font-size: 1.2rem; }
.download-btn.on-dark { background: var(--white); color: var(--teal); }
.download-btn.solid   { background: var(--gradient); color: var(--white); }

.final-cta { text-align: center; margin: 1.5rem 0 0; }


/* --- Callouts ------------------------------------------------------------ */
.lead-box, .intro-box {
    background: var(--ice);
    border-left: 4px solid var(--teal);
    padding: 1.25rem 1.4rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 1.5rem 0;
}
.lead-box p:last-child, .intro-box p:last-child { margin-bottom: 0; }
.intro-box h3 { margin-top: 0; }
/* Promoted intro/lead headings (h2 for correct outline) kept visually compact — no border, h3-scale */
.lead-box h2, .intro-box h2 { font-size: 1.12rem; font-weight: 600; margin: 0 0 .5rem; padding: 0; border: 0; color: var(--navy); }

.info-box {
    background: var(--info-bg);
    border-left: 4px solid var(--teal);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    display: flex;
    gap: .85rem;
    align-items: flex-start;
}
.info-box .icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.4; }
.info-box p { margin: 0; font-size: .95rem; }

.tip-box {
    background: var(--success-bg);
    border-left: 4px solid var(--success-line);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1.15rem 1.35rem;
    margin: 1.5rem 0;
}
.tip-box h3, .tip-box h4 { color: var(--success-line); margin: 0 0 .4rem; font-size: 1rem; }
.tip-box p:last-child { margin-bottom: 0; }

.warn-box {
    background: var(--warn-bg);
    border-left: 4px solid var(--warn-line);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1.15rem 1.35rem;
    margin: 1.5rem 0;
}
.warn-box h3 { color: var(--warn-line); margin: 0 0 .4rem; font-size: 1rem; }
.warn-box p:last-child { margin-bottom: 0; }

/* Cross-reference block that closes most pages */
.crossref {
    background: var(--surface-2);
    border: 1px solid var(--ice);
    border-radius: var(--radius-lg);
    padding: 1.2rem 1.4rem;
    margin: 2rem 0 0;
    box-shadow: var(--shadow);
}
.crossref p { margin: 0; font-size: .95rem; }
.crossref p + p { margin-top: .5rem; }

/* Dark panels — always override strong/a, or they inherit navy on navy */
.panel-dark {
    background: var(--gradient-dark);
    color: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.8rem 2rem;
    margin: 2rem 0 1rem;
    text-align: center;
}
.panel-dark h2, .panel-dark h3 { color: var(--white); border: none; margin: 0 0 .7rem; padding: 0; }
.panel-dark p      { color: rgba(255, 255, 255, 0.93); margin: 0 0 .6rem; }
.panel-dark p:last-child { margin-bottom: 0; }
.panel-dark strong { color: var(--lemon); }
.panel-dark a      { color: var(--lemon); text-decoration: underline; }


/* --- Tables -------------------------------------------------------------- */
.table-wrap {
    overflow-x: auto;
    margin: 1.25rem 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-2);
    font-size: .9rem;
    min-width: 660px;
}
thead th {
    background: var(--navy);
    color: var(--white);
    text-align: left;
    padding: .8rem .9rem;
    font-weight: 600;
    font-size: .87rem;
}
tbody td { padding: .75rem .9rem; border-bottom: 1px solid var(--ice); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: #FBFDFD; }


/* --- Footer -------------------------------------------------------------- */
.footer {
    background: var(--surface-2);
    border-top: 1px solid var(--ice);
    text-align: center;
    padding: 2rem 1.5rem 2.5rem;
    color: var(--muted);
    font-size: .85rem;
    margin-top: 2.5rem;
}
.footer-logo { max-height: 34px; width: auto; margin-bottom: .75rem; }
.footer p { margin: .2rem 0; }
.footer a { color: var(--link); }
.footer .license {
    margin-top: .75rem;
    font-size: .75rem;
    color: var(--muted);
}


/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 760px) {
    .header { padding: 2rem 1.25rem 2.5rem; }
    .container { padding: 1.75rem 1.15rem 2.5rem; }
}


/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
    .download-btn:hover { transform: none; }
}


/* --- Print --------------------------------------------------------------- */
@media print {
    body { background: var(--white); }
    .skip-link, .download-btn, .final-cta { display: none !important; }
    .header, .panel-dark, thead th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: var(--muted); }
}