/* ============================================================
   sbcss-tool.css — Shared theme for SBCSS tool pages.
   ------------------------------------------------------------
   One stylesheet that every tool linked from improveteachingandlearning.com
   pulls in for the common SBCSS look: colors, header, footer, typography,
   container widths, shared button/card primitives.

   Each tool still has its OWN stylesheet for tool-specific styles (quiz
   cards, audit tables, dashboards, etc.). This file only covers what's
   repeated across tools.

   If you tweak the palette or the header here, it updates every tool.
   ============================================================ */

:root {
    --sbcss-blue:      #026AB0;
    --sbcss-blue-dark: #01508A;
    --sbcss-yellow:    #FDE047;
    --sbcss-bg:        #f0f6fb;
    --sbcss-white:     #ffffff;
    --sbcss-text:      #1a1a2e;
    --sbcss-muted:     #555;
    --sbcss-border:    #dde8f2;
}

html {
    /* Always reserve vertical scrollbar space so the page width stays
       constant whether content is short or long. */
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    background-color: var(--sbcss-bg);
    color: var(--sbcss-text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---- Shared Container ---- */
.container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 20px 40px;
}

/* ---- Shared Header (solid blue, logo on the left, title centered) ---- */
.site-header {
    /* SOLID, AND THE SAME BLUE AS THE FOOTER, as of 2026-08-26.

       It used to be linear-gradient(135deg, --sbcss-blue, --sbcss-blue-dark),
       so it began at #026AB0 in the top-left and only reached the footer's
       #01508A at the far corner — the header's left end was about 78% lighter
       than the footer, and on a wide screen the gradient had a long way to
       travel, so the two bands never read as a pair however carefully their
       heights were matched.

       .big-btn still uses the gradient; that was not part of this change. */
    background-color: var(--sbcss-blue-dark);
    color: white;
    /* THE HEADER EVERY TOOL SHARES. 11px + a 64px logo + 11px + the 6px yellow
       rule = 92px, and the footer is built to the same number.

       This was a plain blue band, with the yellow rule and the tighter padding
       living only in dashboard/css/styles.css. That made the dashboard look like
       a different site from District Navigator, the audit tool, FiveByFive and
       the course-code reference. The look moved here so every tool gets it, and
       the dashboard override now only carries what is genuinely specific to it:
       the sticky wrapper and the section menu.

       The dashboard measures the real band into --dash-header-h at runtime, so
       its sticky filter bar follows whatever these numbers become. */
    padding: 11px 16px;
    border-bottom: 6px solid var(--sbcss-yellow);
    /* Sitewide: pin the header to the top while content scrolls between
       it and the footer. Sticky (not fixed) keeps the header in the
       body's flex flow so layout below stays correct. */
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header .container {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.header-logo {
    /* 64px everywhere, so the tools do not each pick their own. Paired with the
       11px padding above and the 6px rule, this is what makes the 92px band. */
    height: 64px;
    width: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.header-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    text-align: center;
    width: 100%;
    max-width: 600px;
    padding: 0 20px;
    z-index: 1;
    pointer-events: none;
}

.header-text h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
}

.header-text .subtitle {
    margin: 2px 0 0;
    font-size: 0.9rem;
    font-weight: 400;
}

.header-spacer {
    flex-shrink: 0;
    min-width: 52px;
    display: flex;
    justify-content: flex-end;
    /* Push the spacer to the far right so any content it holds
       (e.g. a "Sign out" link) lands on the right side of the header
       rather than next to the logo. Works even though .header-text
       between them is absolutely positioned. */
    margin-left: auto;
    position: relative;
    z-index: 2;
}

@media (max-width: 900px) {
    .site-header .container {
        flex-direction: column;
        gap: 6px;
    }
    .header-text {
        position: static;
        transform: none;
        max-width: none;
        padding: 0;
    }
}

/* ---- Shared Typography ---- */
h2 {
    font-size: 1.3rem;
    color: var(--sbcss-blue-dark);
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 3px solid var(--sbcss-yellow);
    padding-bottom: 0.4rem;
    display: inline-block;
}

h3 {
    color: var(--sbcss-blue-dark);
    margin: 1rem 0 0.5rem;
    font-size: 1.1rem;
}

/* ---- Shared Footer (dark blue bar) ---- */
.site-footer {
    background-color: var(--sbcss-blue-dark);
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    /* 4px rule + 8px + 72px logo panel + 12px gap + 15px copyright line + 8px
       = 119px. THE FOOTER IS NOW TALLER THAN THE HEADER'S 92px, and that is
       accepted rather than accidental: the copyright line has to go somewhere,
       and squeezing the band back to 92 would mean shrinking the logo panel
       that was just sized deliberately.

       If the two must match again, the header needs to grow to 113, not the
       footer shrink.

       THIN RULE, on request: the header's line is 6px and closes off a heavy
       blue band, while this one only marks where the page ends.

       The band grew from 80px on request. The extra height is AIR AROUND THE
       PANEL, not a bigger logo: the logo had just been sized down deliberately,
       so growing it back would undo that. If you want the mark itself larger
       instead, widen .footer-logo and bring this padding back down.

       Remember the footer is sticky: every pixel it gains is a pixel off every
       screen for the whole visit. */
    padding: 8px 20px;
    border-top: 4px solid var(--sbcss-yellow);
    font-size: 0.87rem;
    margin-top: auto;
    /* Sitewide: pin the footer to the bottom of the viewport. */
    position: sticky;
    bottom: 0;
    z-index: 100;
}

.site-footer .container {
    max-width: none;
    padding: 0;
}

/* THE FOOTER LOGO, in a white panel with a yellow edge — the same treatment the
   DFP tool gives it, so the Data Team mark looks the same wherever it appears.

   WIDTH-DRIVEN, NOT HEIGHT-DRIVEN. It used to be `height: 52px; width: auto`,
   which is right for artwork sitting directly on a background. Inside a padded
   box the width is what has to be controlled, or the panel grows with the
   viewport.

   THE PADDING IS DELIBERATELY SMALL because the artwork is TRIMMED. The logo
   file used to carry its own transparent margin, so 14px of CSS padding sat on
   top of the PNG's own empty space and the panel looked slack. The image is now
   cropped to its artwork and the padding is 5px/10px — less white space, and the
   mark sits closer to its frame.

   287px wide, minus 20px of side padding and 6px of border, leaves 261px of
   artwork; at 5.94:1 that is 44px tall, plus 10px of vertical padding and 6px of
   border makes a 60px panel. Change any of these and the footer band moves.

   Smaller and tighter than DFP's, which is 380px at 14px/20px, on request. */
.footer-logo {
    display: block;
    box-sizing: border-box;
    width: min(287px, 76vw);
    height: auto;
    margin: 0 auto;
    padding: 5px 10px;
    border: 3px solid var(--sbcss-yellow);
    border-radius: 10px;
    background: #ffffff;
}

@media (max-width: 600px) {
    .footer-logo { width: min(240px, 80vw); padding: 4px 8px; }
}

/* The copyright, under the logo. Small and quiet: it is a legal notice, not
   something anyone came here to read, so it should not compete with the mark
   above it. rgba white rather than a solid grey so it sits back against the
   blue without needing its own colour value. */
/* SELECTOR HAS TO BE .site-footer .footer-copyright, not .footer-copyright.
   `.site-footer p { margin: 0 }` sits below this and is MORE SPECIFIC — one
   class plus an element beats one class — so a plain .footer-copyright rule had
   its margin silently zeroed and no value set here made any difference. */
.site-footer .footer-copyright {
    /* 12px. At 6px the line sat close enough to the panel to read as part of it;
       the gap has to be bigger than the panel's own 8px of inner padding or the
       two look joined. */
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
    line-height: 1.2;
}

@media (max-width: 600px) {
    .site-footer .footer-copyright { font-size: 0.72rem; }
}

.site-footer p {
    margin: 0;
}

/* ---- Shared Buttons ---- */
.big-btn {
    background: linear-gradient(135deg, var(--sbcss-blue), var(--sbcss-blue-dark));
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 3px 10px rgba(2, 106, 176, 0.25);
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.big-btn:hover,
.big-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(2, 106, 176, 0.35);
    color: white;
    text-decoration: none;
}

.secondary-btn {
    background: var(--sbcss-white);
    border: 2px solid var(--sbcss-blue);
    color: var(--sbcss-blue);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    display: inline-block;
}

.secondary-btn:hover,
.secondary-btn:focus-visible {
    background: var(--sbcss-bg);
    text-decoration: none;
}

/* ---- Shared in-body link style ---- */
.body-link {
    color: var(--sbcss-blue);
    font-weight: 500;
    text-decoration: underline;
}

.body-link:hover,
.body-link:focus {
    color: var(--sbcss-blue-dark);
}

/* ---- Sign-out link (top-right of authenticated tools) ---- */
.signout-link {
    color: var(--sbcss-yellow);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: underline;
}

.signout-link:hover,
.signout-link:focus {
    color: white;
}

/* ---- Page navigation menu — equal-width buttons that hang flush from
        the header (square tops, lightly rounded bottoms). Shared by the
        SBCSS tool pages. ---- */
.page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 0 0 6px;
}
.page-nav-link {
    width: 7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    background: var(--sbcss-white);
    color: var(--sbcss-blue);
    border: 1px solid #e4e8ee;
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 11px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.page-nav-link:hover {
    background: #cce3f5;
    color: var(--sbcss-blue-dark);
    text-decoration: none;
}
.page-nav-link:focus-visible {
    outline: 3px solid var(--sbcss-yellow);
    outline-offset: -3px;
}
@media (max-width: 480px) {
    .page-nav-link { flex: 1 1 0; width: auto; }
}

/* ── Header logo links home ──────────────────────────────────────────────────
   The logo is wrapped in an anchor pointing at "/", which resolves to whichever
   site is serving the page, with no configuration to keep in sync.

   The anchor, not the image, is now the flex item in .site-header .container,
   so it has to carry the layout properties the image used to. Without
   flex-shrink:0 the logo squashes on narrow screens; without line-height:0 the
   anchor adds a few pixels of descender space under it. */
.header-logo-link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
    text-decoration: none;
    border-radius: 4px;
}
.header-logo-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}