/*
Theme Name: MICE
Theme URI: https://miceducation.org
Author: MICE
Description: Block theme for MICE K12 — the DBA of the Michigan Initiative for Cybersecurity Education, a 501(c)(3) nonprofit serving CTE programs in all 50 states. Built for teachers, CTE directors, and school business offices — public-education infrastructure rather than hacker costume. Carries the navy/teal brand and a pathway-rail motif drawn from MICE's own certification progressions. Pairs with the MICE LMS Orders and MICE Con plugins.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 0.6.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mice
Tags: education, block-theme, full-site-editing, one-column, block-patterns
*/

/* Design tokens come from theme.json. This file carries only what block styles
   cannot express: the pathway rail signature, the hero grid, and the quality
   floor (focus, reduced motion). */

/* ---------------------------------------------------------------------------
   Quality floor
   --------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--wp--preset--color--signal);
    outline-offset: 2px;
    border-radius: 2px;
}

@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;
    }
}

/* ---------------------------------------------------------------------------
   Eyebrow — mono label. Used for section kickers and cert codes, where the
   monospace reads as an identifier rather than as decoration.
   --------------------------------------------------------------------------- */
.mice-eyebrow {
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--teal);
    margin: 0 0 0.75rem;
}

.mice-eyebrow--on-navy { color: var(--wp--preset--color--teal-light); }

/* ---------------------------------------------------------------------------
   THE SIGNATURE — pathway rail.
   The IT pathway is an ordered progression (Tech+ → A+ → Network+ → Security+ →
   CySA+), so it is drawn as a transit line: a teal rail, one station per course,
   amber marking where a learner starts. The sequence is earned — it is real
   information, not ornament.
   Used ONLY for IT. MICE also covers Media Design and Business Administration,
   but those have no inherent course order, so they get cards (.mice-pathcard).
   Railing them would fake a progression that does not exist.
   --------------------------------------------------------------------------- */
.mice-rail {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.75rem;
    position: relative;
}

.mice-rail__stop {
    position: relative;
    padding: 0 0 1.5rem;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.mice-rail__stop:last-child { padding-bottom: 0; }

/* The line is drawn per-stop rather than once down the whole list: each segment
   runs from its own dot to the next one, so the rail always terminates exactly
   at the final station instead of trailing past it. */
.mice-rail__stop:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-start: calc(-1.75rem + (var(--wp--custom--rail--station) - var(--wp--custom--rail--width)) / 2);
    top: calc(0.45em + var(--wp--custom--rail--station));
    height: calc(100% - var(--wp--custom--rail--station));
    width: var(--wp--custom--rail--width);
    background: var(--wp--preset--color--teal);
}

/* Station dot. Ring rather than fill, so the line reads as passing through. */
.mice-rail__stop::before {
    content: "";
    position: absolute;
    inset-inline-start: -1.75rem;
    top: 0.45em;
    width: var(--wp--custom--rail--station);
    height: var(--wp--custom--rail--station);
    border-radius: 50%;
    background: var(--wp--preset--color--navy);
    border: 2px solid var(--wp--preset--color--teal);
    box-sizing: border-box;
}

/* Entry point — the one amber mark on the page. */
.mice-rail__stop--entry::before {
    background: var(--wp--preset--color--signal);
    border-color: var(--wp--preset--color--signal);
}

.mice-rail__code {
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    color: var(--wp--preset--color--teal-light);
    flex: 0 0 auto;
    min-width: 5.5rem;
}

.mice-rail__name {
    font-size: var(--wp--preset--font-size--small);
    color: rgba(255, 255, 255, 0.78);
}

/* Light-background variant, for use inside service pages. */
.mice-rail--on-paper .mice-rail__stop::before { background: var(--wp--preset--color--paper); }
.mice-rail--on-paper .mice-rail__code { color: var(--wp--preset--color--navy-soft); }
.mice-rail--on-paper .mice-rail__name { color: var(--wp--preset--color--slate); }

/* ---------------------------------------------------------------------------
   Railhead — the rail motif reduced to a section marker: one station, one line.
   --------------------------------------------------------------------------- */
.mice-railhead {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
}

.mice-railhead::before {
    content: "";
    width: var(--wp--custom--rail--station);
    height: var(--wp--custom--rail--station);
    border-radius: 50%;
    border: 2px solid var(--wp--preset--color--teal);
    box-sizing: border-box;
    flex: 0 0 auto;
}

.mice-railhead::after {
    content: "";
    height: var(--wp--custom--rail--width);
    background: var(--wp--preset--color--rule);
    flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
   Hero — asymmetric: thesis left, pathway right. Not a centred stack.
   --------------------------------------------------------------------------- */
.mice-hero {
    background: var(--wp--preset--color--navy);
    color: var(--wp--preset--color--white);
}

.mice-hero :where(h1, h2, h3) { color: var(--wp--preset--color--white); }

.mice-hero__lede {
    font-size: var(--wp--preset--font-size--large);
    color: rgba(255, 255, 255, 0.8);
    max-width: 46ch;
}

/* The rail panel sits on a slightly lifted navy so it reads as an artifact. */
.mice-hero__panel {
    background: var(--wp--preset--color--navy-mid);
    border: 1px solid rgba(111, 211, 206, 0.22);
    border-radius: 10px;
    padding: 2rem;
}

/* ---------------------------------------------------------------------------
   Cards — quiet by design; the rail carries the personality.
   --------------------------------------------------------------------------- */

/* Four services, so the grid is stepped 4 -> 2 -> 1 explicitly rather than left to
   auto-fit. auto-fit would pass through a 3-column stage and strand the fourth
   card alone on a second row; an even split never does.
   If a fifth service is ever added, revisit this — 5 items want 3+2, not 4+1. */
.mice-cardgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1000px) {
    .mice-cardgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .mice-cardgrid { grid-template-columns: 1fr; }
}
.mice-card {
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--rule);
    border-radius: 10px;
    padding: 1.75rem;
    height: 100%;
    transition: border-color 160ms ease, transform 160ms ease;
}

.mice-card:hover {
    border-color: var(--wp--preset--color--teal);
    transform: translateY(-2px);
}

.mice-card__title {
    font-family: var(--wp--preset--font-family--display);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.mice-card__body {
    color: var(--wp--preset--color--slate);
    font-size: var(--wp--preset--font-size--small);
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Pathway cards — the three CTE pathways, on the navy field.
   Deliberately NOT rails: only the IT pathway is a real prerequisite ladder, and
   railing the other two would fake a sequence that does not exist. The numbered
   eyebrows are just labels here, not an order.
   --------------------------------------------------------------------------- */
.mice-pathgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.mice-pathcard {
    background: var(--wp--preset--color--navy-mid);
    border: 1px solid rgba(111, 211, 206, 0.22);
    border-radius: 10px;
    padding: 1.75rem;
    height: 100%;
}

.mice-pathcard__title {
    font-family: var(--wp--preset--font-family--display);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
    color: var(--wp--preset--color--white);
    margin: 0 0 0.5rem;
}

.mice-pathcard__body {
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--wp--preset--font-size--small);
    margin: 0 0 1rem;
}

.mice-pathcard__meta {
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--x-small);
    color: var(--wp--preset--color--teal-light);
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(111, 211, 206, 0.22);
}

/* ---------------------------------------------------------------------------
   Tables — the pricing grid and the CIP mapping. Both are reference material a
   CTE director scans rather than reads, so the header is a hairline-ruled label
   row and the body stays quiet.
   Wide tables scroll inside their own figure rather than pushing the page sideways.
   --------------------------------------------------------------------------- */
.wp-block-table {
    overflow-x: auto;
}

.wp-block-table table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--wp--preset--font-size--small);
}

.wp-block-table thead {
    border-bottom: 2px solid var(--wp--preset--color--navy);
}

.wp-block-table th {
    font-family: var(--wp--preset--font-family--body);
    font-weight: 700;
    text-align: left;
    color: var(--wp--preset--color--navy);
    padding: 0.6rem 0.75rem;
}

.wp-block-table td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--wp--preset--color--rule);
    vertical-align: top;
}

/* CIP codes are identifiers, so they get the mono face — same rule as the rail. */
.wp-block-table code {
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--x-small);
    background: none;
    padding: 0;
    color: var(--wp--preset--color--navy-soft);
    white-space: nowrap;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background: var(--wp--preset--color--paper);
}

.wp-block-table.is-style-stripes {
    border-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Stat row — the built-catalog figures on the curriculum page.
   A big-number row is usually the templated answer, which is why it appears once,
   on the one page where the numbers ARE the argument: 5,836 pages of built course
   is the claim, and no amount of prose makes it better than the figure does.
   --------------------------------------------------------------------------- */
/* Six figures, so the grid is 3 -> 2 explicitly. auto-fit fitted five across the
   720px prose column and stranded the sixth on its own row; six divides evenly by
   three and by two, so an orphan here is pure carelessness. */
.mice-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem 1rem;
    padding: 1.5rem 0;
    border-top: 2px solid var(--wp--preset--color--navy);
    border-bottom: 1px solid var(--wp--preset--color--rule);
    margin: 1.5rem 0;
}

@media (max-width: 480px) {
    .mice-stats { grid-template-columns: repeat(2, 1fr); }
}

.mice-stat { display: flex; flex-direction: column; gap: 0.15rem; }

.mice-stat__n {
    font-family: var(--wp--preset--font-family--display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--navy);
    font-stretch: 112%;
}

.mice-stat__l {
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--x-small);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wp--preset--color--slate);
}

/* ---------------------------------------------------------------------------
   Utilities
   --------------------------------------------------------------------------- */
.mice-fine {
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--x-small);
    color: var(--wp--preset--color--slate);
}

.skip-link:focus {
    position: fixed;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 999;
    padding: 0.75rem 1rem;
    background: var(--wp--preset--color--navy);
    color: var(--wp--preset--color--white);
}

@media (max-width: 781px) {
    .mice-hero__panel { padding: 1.5rem; }
    .mice-rail__stop { flex-wrap: wrap; gap: 0.25rem 0.75rem; }
    .mice-rail__code { min-width: 0; }
}