/*
 * Butte College — Counseling Appointment Router (widget-specific styles)
 *
 * Layered on top of resource-hub-surface.css. This file only contains the
 * layout and per-step rules unique to the appointment router widget. Anything
 * generic (typography, buttons, focus, color tokens) lives in the surface
 * stylesheet so other resource-hub widgets can reuse it.
 *
 * Markup expected (see counseling-router-snippet.html):
 *
 *   <section class="bc-hub-surface bc-counseling-router" data-counseling-router>
 *     ...rendered by counseling-router.js
 *   </section>
 *
 * WCAG 2.2 notes specific to this widget:
 *   - Step regions get role="region" and aria-labelledby for screen readers
 *   - Checkbox cards are real <input type="checkbox"> with <label> wrappers
 *   - Radio cards are real <input type="radio"> in a <fieldset>/<legend>
 *   - Live-region announces step transitions
 *   - The print artifact (.bc-counseling-router__print-only) is in the DOM
 *     but visually hidden until window.print() promotes it
 */

.bc-counseling-router {
    /* Slightly tighter inner gutter than the base surface, since the widget
       has its own internal section padding. */
    --bc-hub-stack: 1.1rem;
    /* The router fills its host hub row. Gold top bar is the visual cue
       that this row is an interactive tool, not just static content.
       border-top is intentionally a single solid line — it spans the
       widget's full width, never floats with margin. */
    border-top: 4px solid var(--bc-hub-fill-gold);
}

/* Cap the inner content width for readability without breaking the
   full-bleed surface — the widget's content lives inside this wrapper,
   centered within a wider hub row when present. */
.bc-counseling-router > .bc-hub-surface__header,
.bc-counseling-router > .bc-hub-surface__body,
.bc-counseling-router > .bc-hub-surface__footer {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}

.bc-counseling-router__intro p {
    font-size: 1.5rem;
    color: var(--bc-hub-ink);
    max-width: 48rem;
}

.bc-counseling-router__intro ul {
    margin-top: 0.25rem;
}

.bc-counseling-router__intro-cta {
    margin-top: 1rem;
}

/* ----- Step 1: Eligibility checkboxes ----- */

.bc-counseling-router__eligibility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 0.4rem 0.75rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.bc-counseling-router__eligibility-grid li { margin: 0; }

/* "None of these apply" lives at the bottom of the same fieldset as the
   specialized programs. It spans the full width of the grid and has a
   subtle top divider so its mutually-exclusive role is visually clear. */
.bc-counseling-router__eligibility-none {
    grid-column: 1 / -1;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--bc-hub-border-strong);
}

.bc-counseling-router__eligibility-help {
    display: block;
    font-size: 1.4rem;
    color: var(--bc-hub-muted);
    margin-top: 0.25rem;
}

/* ----- Step 2: Academic program (COI) cards ----- */

.bc-counseling-router__coi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 0.75rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.bc-counseling-router__coi-grid li { margin: 0; }

.bc-counseling-router__coi-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "badge title"
        "help  help";
    gap: 0.4rem 0.75rem;
    height: 100%;
    padding: 0.85rem 1rem;
    /* Same 1.4.11 reasoning as the need-card: card border is the
       affordance for an interactive control and must hit 3:1 contrast.
       The left-edge accent uses the COI brand color (set inline via
       --coi-color on each card); it's purely decorative — the COI code
       in the title carries the identifier, so any color contrast on the
       border alone is fine. Falls back to the neutral strong-border
       when --coi-color is unset (e.g., "Not sure yet"). */
    border: 2px solid var(--bc-hub-border-strong);
    border-left: 6px solid var(--coi-color, var(--bc-hub-border-strong));
    border-radius: var(--bc-hub-radius);
    background: var(--bc-hub-bg);
    cursor: pointer;
    min-height: 44px;
}

.bc-counseling-router__coi-card:hover {
    background: var(--bc-hub-bg-alt);
}

.bc-counseling-router__coi-card input[type="radio"] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.bc-counseling-router__coi-card:has(input:checked) {
    border-color: var(--bc-hub-accent-strong);
    background: var(--bc-hub-bg-alt);
    box-shadow: inset 0 0 0 2px var(--bc-hub-fill-gold);
}

.bc-counseling-router__coi-card:has(input:focus-visible) {
    outline: 3px solid var(--bc-hub-accent-strong);
    outline-offset: 2px;
}

.bc-counseling-router__coi-card-badge {
    grid-area: badge;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: 0.2rem 0.5rem;
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bc-hub-fill-dark);
    color: var(--bc-hub-fill-dark-on);
    border-radius: 3px;
}

/* COI logo — same grid slot as the text badge. Sized to a square,
   pinned to a consistent footprint so cards stay aligned even when
   logos have different intrinsic dimensions. Alt text on the <img>
   carries the COI code for screen-reader users. */
.bc-counseling-router__coi-card-logo {
    grid-area: badge;
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    /* Logos are designed for dark backgrounds; sit them on a tinted
       chip that picks up the COI brand color for visual identity
       without sacrificing logo legibility. */
    background: var(--coi-color, var(--bc-hub-fill-dark));
    padding: 0.35rem;
    border-radius: 4px;
    /* Keep the logo crisp when scaled */
    image-rendering: -webkit-optimize-contrast;
}

.bc-counseling-router__coi-card-title {
    grid-area: title;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--bc-hub-ink);
    line-height: 1.25;
    align-self: center;
}

.bc-counseling-router__coi-card-help {
    grid-area: help;
    font-size: 1.4rem;
    color: var(--bc-hub-muted);
    line-height: 1.4;
}

/* ----- Step 2: Appointment need radio cards ----- */

.bc-counseling-router__need-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 0.75rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.bc-counseling-router__need-grid li { margin: 0; }

.bc-counseling-router__need-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    height: 100%;
    padding: 0.85rem 1rem;
    /* WCAG 1.4.11: the card border is the visible affordance for an
       interactive control, so it must hit 3:1 against the surrounding
       background. --bc-hub-border-strong (#8a7d56) is ~4:1 on white. */
    border: 2px solid var(--bc-hub-border-strong);
    border-radius: var(--bc-hub-radius);
    background: var(--bc-hub-bg);
    cursor: pointer;
    min-height: 44px;
}

.bc-counseling-router__need-card:hover {
    background: var(--bc-hub-bg-alt);
    border-color: var(--bc-hub-border-strong);
}

.bc-counseling-router__need-card input[type="radio"] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* When the underlying radio is checked or focused, style the card */
.bc-counseling-router__need-card:has(input:checked) {
    border-color: var(--bc-hub-accent-strong);
    background: var(--bc-hub-bg-alt);
    box-shadow: inset 0 0 0 2px var(--bc-hub-fill-gold);
}

.bc-counseling-router__need-card:has(input:focus-visible) {
    outline: 3px solid var(--bc-hub-accent-strong);
    outline-offset: 2px;
}

.bc-counseling-router__need-card-duration {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bc-hub-fill-gold);
    color: var(--bc-hub-fill-gold-on);
    border-radius: 999px;
}

.bc-counseling-router__need-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--bc-hub-ink);
    margin: 0;
    line-height: 1.25;
}

.bc-counseling-router__need-card-help {
    font-size: 1.4rem;
    color: var(--bc-hub-muted);
    margin: 0;
    line-height: 1.4;
}

/* ----- Step 3: Result ----- */

.bc-counseling-router__result-stack > * + * {
    margin-top: 1rem;
}

/* Single uniform gap across every viewport. The dark "Book" button has
   no visible border edge; the ghost buttons have a 2 px tan-brown
   border. With a small gap, the perceptual gap between a dark fill
   edge and a tan border edge reads slightly different from the gap
   between two tan border edges, even when the flex `gap` value is
   identical. A more generous 0.75rem gap makes the empty-space
   region large enough that those edge-contrast effects don't
   dominate, so the spacing reads as standardized. */
.bc-counseling-router__primary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/* Mobile button stack — vertical, full-width, primary action on top.
   The author-ordered DOM sequence (Book → Print → Email) determines
   visual order in the column, so primary stays first on phones too.
   Equal widths keep the stack visually ordered rather than ragged.
   `gap` is inherited from the rule above — no per-viewport override
   so the spacing is identical at every breakpoint. */
@media (max-width: 40rem) {
    .bc-counseling-router__primary-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .bc-counseling-router__primary-actions .bc-hub-surface__btn {
        width: 100%;
        justify-content: center;
    }
}

.bc-counseling-router__alternates {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 0.6rem;
}

.bc-counseling-router__alternate {
    background: var(--bc-hub-bg);
    border: 1px solid var(--bc-hub-border);
    border-radius: var(--bc-hub-radius);
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.bc-counseling-router__alternate strong {
    font-size: 1.4rem;
    color: var(--bc-hub-ink);
}

.bc-counseling-router__alternate small {
    font-size: 1.4rem;
    color: var(--bc-hub-muted);
}

.bc-counseling-router__alternate a {
    align-self: flex-start;
    font-size: 1.4rem;
    font-weight: 600;
}

/* ----- Form-action footer (Back / Continue) ----- */

.bc-counseling-router__step-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bc-hub-border);
}

.bc-counseling-router__step-nav-right {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

/* Step nav (Back / Continue, Back / See my plan, etc.) stays on one
   row across all viewports. The parent already has flex-wrap: wrap, so
   if the two buttons truly don't fit at very narrow widths the row
   will wrap gracefully — but for typical phones (320 px+) they do fit
   side-by-side, which keeps the Back-on-left / Forward-on-right
   convention students expect on every step. */

/* ----- Print artifact (hidden in screen view) -----
 *
 * The print summary lives in the same DOM as the widget but is collapsed and
 * removed from the accessibility tree. counseling-router-print.css promotes
 * it (and hides everything else) when @media print is active.
 */

.bc-counseling-router__print-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    /* Note: this gets reset to a normal block by the print stylesheet. */
}