/* ============================================================
   main.css — Home-specific styles for improveteachingandlearning.com.
   ------------------------------------------------------------
   Shared SBCSS theme (colors, header, footer, container, typography,
   buttons) lives in /css/sbcss-tool.css. This file only covers the
   home-page's own layout: hero intro, resources link list.
   ============================================================ */

:root {
    /* Legacy aliases so any rule in this file that references --blue,
       --blue-dark, etc. continues to resolve. sbcss-tool.css defines
       --sbcss-*. If the home page someday drops these, they can be
       removed. */
    --blue:      var(--sbcss-blue);
    --blue-dark: var(--sbcss-blue-dark);
    --yellow:    var(--sbcss-yellow);
    --light-bg:  var(--sbcss-bg);
    --white:     var(--sbcss-white);
    --text:      var(--sbcss-text);
    --muted:     var(--sbcss-muted);
    --border:    var(--sbcss-border);
}

/* The home page uses .content-wrap as its main wrapper instead of the shared
   .container. This is the original narrow value; the redesign section further
   down widens it. Both rules are kept because the later one is the override and
   reads more clearly next to the grid it exists to serve. */
.content-wrap {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    padding: 24px 16px 40px;
    flex: 1;
}

/* Section label between hero card and link list */
.section-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--blue);
    margin: 24px 0 10px;
    border-bottom: none;
    padding-bottom: 0;
    display: block;
}

/* Hero welcome card */
.hero-card {
    background: var(--white);
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    text-align: center;
    margin-bottom: 8px;
}

.hero-card h2 {
    font-size: 1.3rem;
    color: var(--blue);
    font-weight: 700;
    margin: 0 0 8px;
    border-bottom: none;
    padding-bottom: 0;
    display: block;
}

.hero-card p {
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.5;
}

/* Feature boxes — only used on some pages */
.features-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.feature-card {
    flex: 1 1 calc(33.333% - 7px);
    min-width: 200px;
    background: var(--white);
    border-radius: 10px;
    padding: 18px 14px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-top: 3px solid var(--blue);
}

.feature-card strong {
    display: block;
    font-size: 0.95rem;
    color: var(--blue);
    margin-bottom: 6px;
}

.feature-card p {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.4;
}

/* Resource link buttons */
.link-grid {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.link-btn {
    display: block;
    padding: 14px 16px;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    color: var(--blue);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.link-btn span.arrow {
    float: right;
    color: var(--muted);
    font-weight: 400;
}

.link-btn:hover {
    border-color: var(--blue);
    background: var(--light-bg);
}

.link-desc {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--muted);
    margin-top: 3px;
}


/* ============================================================
   Homepage redesign — editorial / executive
   ------------------------------------------------------------
   Replaces the original "centered card + link list" with an
   editorial hero (display headline, yellow marker accent on a
   keyword, lede, featured CTA) and a tools grid with custom
   iconography. District Navigator pulled out as a featured
   full-width tile to give the SBCSS-built primary tool clear
   visual primacy over external resources. Brand blue reserved
   for hover/focus and the headline accent.
   ============================================================ */

:root {
    --tk-radius:        16px;
    --tk-radius-sm:     10px;
    --tk-shadow-sm:     0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
    --tk-shadow-md:     0 4px 6px -1px rgba(15, 23, 42, .05), 0 2px 4px -2px rgba(15, 23, 42, .04);
    --tk-border:        #e5e7eb;
    --tk-text:          #0f172a;
    --tk-text-muted:    #64748b;
    --tk-text-soft:     #94a3b8;
    --tk-surface:       #ffffff;
    /* Truly neutral: red, green and blue are all f7, so there is no color cast
       at all. The previous #f8fafc was sold as "neutral off-white" but its
       channels were 248/250/252, blue highest, which is exactly why it still
       read as faintly blue. If this ever needs changing, keep the three
       channels equal or it will pick up a tint again. */
    --tk-bg:            #f7f7f7;
    --tk-accent-soft:   #eff6ff;
    --tk-accent-yellow: rgba(255, 186, 45, .55);
}

/* Soft neutral page background, home page only.
   Scoped to .page-home on purpose. This stylesheet is also loaded by
   /state-course-codes/, which is meant to keep the shared SBCSS theme
   background (--sbcss-bg in sbcss-tool.css). An unscoped body rule here would
   silently restyle that tool too. If another page ever wants this background,
   add class="page-home" to its body rather than widening this selector. */
body.page-home { background-color: var(--tk-bg); }

/* Wide by default. The tools grid runs four across, and four tiles will not fit
   comfortably in the old 960px: each one would come out around 220px, which is
   narrower than the tile's own icon + text + arrow layout wants. Widening the
   wrapper is what actually un-squishes the cards; the bigger grid gap below
   only separates them. On a 1920px screen this leaves roughly 80px of gutter
   each side. Only the home page uses .content-wrap, so nothing else moves. */
.content-wrap {
    max-width: 1760px;
    padding: 32px 48px 56px;
}

/* ─── Editorial hero ─── */
.hero { padding: 24px 0 32px; }
.hero-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--blue);
    margin: 0 0 12px;
}
.hero-title {
    /* Override sitewide h2 defaults from sbcss-tool.css (yellow border-bottom
       and display:inline-block were producing an orange underline on cream). */
    display: block;
    border-bottom: none;
    padding-bottom: 0;
    font-size: clamp(1.625rem, 2.2vw + .9rem, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--tk-text);
    margin: 0 0 14px;
}
/* Full width, matching the grid below. There was a max-width here to hold the
   line length down; it made the paragraph sit in the left third of a wide page,
   which is not what this page wants. Lines run long as a result, so if it ever
   needs reining in, raise the font-size rather than re-adding a max-width. */
.hero-lede {
    font-size: 1rem;
    color: var(--tk-text-muted);
    line-height: 1.6;
    margin: 0;
}
/* ─── Tools section ─── */
.tools-section { margin-top: 12px; }
.tools-eyebrow {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tk-text-muted);
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--tk-border);
}

/* One-line confirmation after signing out. Tinted panel with a colored
   heading, no left edge stripe. */
.signout-note {
    margin: 0 0 4px;
    padding: 11px 16px;
    border-radius: var(--tk-radius-sm);
    background: #ecfdf5;
    color: #065f46;
    font-size: 0.875rem;
    font-weight: 600;
}

/* ─── Section spacing ─── */
/* Air between stacked tile sections. Written as a sibling selector rather than
   a plain margin-top on .tools-section so the FIRST section on the page keeps
   its normal distance below the hero. That matters because which section comes
   first changes with sign-in state: signed out the page starts at SBCSS Tools,
   signed in it starts at SBCSS Staff Tools. */
.tools-section + .tools-section { margin-top: 44px; }
/* Four across, so the eight public tools land as two clean rows of four.
   A fixed repeat(4, 1fr) rather than the old auto-fit/minmax: auto-fit decides
   the column count from the available width, which meant the row length changed
   with the window and the two rows of four were never guaranteed. The step-downs
   are in the breakpoints at the bottom of this file.

   The staff-tools section uses this same class with only three tiles, which is
   deliberate: its columns then line up with the public grid underneath instead
   of being three wider tiles that align with nothing. */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;  /* all rows the same height = all cards the same height */
    gap: 24px;
}

.tool-tile {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    column-gap: 20px;
    background: var(--tk-surface);
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius);
    padding: 24px 26px;
    color: var(--tk-text);
    text-decoration: none;
    box-shadow: var(--tk-shadow-sm);
    transition: border-color .15s, box-shadow .2s, transform .15s, background .15s;
}
.tool-tile:hover {
    border-color: var(--blue);
    box-shadow: var(--tk-shadow-md);
    transform: translateY(-2px);
}
.tool-tile:focus-visible {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(2, 106, 176, .2), var(--tk-shadow-md);
}

.tool-tile-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--tk-accent-soft);
    color: var(--blue);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .15s, color .15s, transform .15s;
}
.tool-tile-icon svg { width: 24px; height: 24px; }
.tool-tile:hover .tool-tile-icon {
    background: var(--blue);
    color: #fff;
}

.tool-tile-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tool-tile-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tk-text);
    line-height: 1.3;
}
.tool-tile-desc {
    font-size: 0.84375rem;
    color: var(--tk-text-muted);
    line-height: 1.5;
}
.tool-tile-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tk-text-soft);
}
.tool-tile-meta svg { width: 12px; height: 12px; }

.tool-tile-arrow {
    color: var(--tk-text-soft);
    font-size: 1.125rem;
    font-weight: 400;
    transition: color .15s, transform .15s;
}
.tool-tile-arrow svg {
    width: 18px;
    height: 18px;
    display: block;
}
.tool-tile:hover .tool-tile-arrow {
    color: var(--blue);
    transform: translateX(4px);
}

/* Featured tile (District Navigator) — same size as siblings, but a subtle
   gradient background and filled-blue icon to mark it as the primary tool. */
.tool-tile-featured {
    background: linear-gradient(135deg, #ffffff 0%, #f4f9ff 100%);
    border-color: rgba(2, 106, 176, .25);
}
.tool-tile-featured .tool-tile-icon {
    background: var(--blue);
    color: #fff;
}
.tool-tile-featured:hover .tool-tile-icon {
    background: var(--blue-dark);
}

/* ─── Responsive ───
   Four across is the layout, and it holds down to tablet width. Getting there
   takes a change of approach below ~1250px: rather than dropping to three
   columns (which breaks the two-rows-of-four the page is built around), the
   TILE changes shape. It stacks the icon above the text and drops the arrow,
   which removes the fixed 48px + gap + arrow that the horizontal layout has to
   pay for before any text fits. A stacked tile stays readable at about 175px
   wide, where a horizontal one at that size leaves roughly 20px for the
   description and every line breaks after a word.

   Only below 760px, where even a stacked tile runs out of room, does the column
   count actually drop. */
@media (max-width: 1250px) {
    .content-wrap { padding: 32px 32px 56px; }
    .tools-grid { gap: 20px; }
    .tool-tile {
        grid-template-columns: 1fr;
        align-items: start;
        row-gap: 12px;
        padding: 20px;
    }
    .tool-tile-arrow { display: none; }
}

/* Four stacked tiles no longer fit. Two. */
@media (max-width: 760px) {
    .tools-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Phones. One per row, and with the full width to itself the tile goes back to
   the horizontal layout, which reads better than a stack at that size. */
@media (max-width: 520px) {
    .content-wrap { padding: 20px 16px 32px; }
    .hero { padding: 16px 0 24px; }
    .hero-lede { font-size: 0.95rem; }
    .tools-grid { grid-template-columns: 1fr; gap: 14px; }
    .tool-tile {
        grid-template-columns: 48px 1fr;
        align-items: center;
        row-gap: 0;
        padding: 18px 20px;
    }
}

/* Waiting-for-approval notice on the home page. Only the handful of people who
   can approve ever see it, and only when somebody is actually waiting, so it is
   allowed to be prominent. */
.access-pending-notice {
    margin: 0 0 1.5rem;
    padding: 14px 18px;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    background: #fff8dc;
    color: #000000;
    font-size: 0.95rem;
}

.access-pending-notice a { font-weight: 600; }