/*
 * Butte College — Fee Estimator (widget-specific styles)
 *
 * Layered on top of resource-hub-surface.css. The base surface
 * provides typography (1rem floor), color tokens, focus indicators,
 * button defaults, and the bleed-to-edge embed behavior. This file
 * only covers the calc-specific layout: input grid, total hero,
 * breakdown items, detail table, and the disclosure-toggle widget.
 *
 * Markup expected (see the Cascade page content field on
 * __staging-site/home/apply-and-pay/costs_and_tuition/index):
 *
 *   <section class="bc-hub-surface bc-fee-estimator" ...>
 *     <header class="bc-hub-surface__header">...</header>
 *     <div class="bc-hub-surface__body">
 *       <fieldset><legend>...</legend>
 *         <div class="bc-fee-estimator__grid"> 4 fields </div>
 *       </fieldset>
 *       <div id="fe-results"> (populated by fee-estimator.js) </div>
 *       <p id="fe-status" role="status" aria-live="polite" ...>
 *     </div>
 *     <footer class="bc-hub-surface__footer">disclaimer</footer>
 *   </section>
 *
 * The JS (fee-estimator.js, unchanged) renders into #fe-results using
 * stable class names (.results-card, .total-row, .breakdown-item,
 * .detail-table, etc.) — this stylesheet targets those names scoped
 * to .bc-fee-estimator so the existing JS works unmodified.
 *
 * WCAG 2.2 notes:
 *   - All text ≥ 1rem (inherits from .bc-hub-surface base)
 *   - All form controls native + labeled (markup-side)
 *   - Focus indicators inherited from surface
 *   - Touch targets ≥ 44px (selects, toggle, buttons)
 *   - Color uses surface tokens — same audited contrast ratios
 *   - prefers-reduced-motion respected on the chevron rotation
 *   - The "waived" line-through uses additional "Waived" text label,
 *     not just the strike-through, so info isn't conveyed by color
 *     or strike-through alone
 */

.bc-fee-estimator {
    /* Slightly more generous internal stack than the base — calculator
       sections need a bit more breathing room between input/result. */
    --bc-hub-stack: 1.25rem;
    /* Same gold top accent as other interactive surfaces in Resource Hubs. */
    border-top: 4px solid var(--bc-hub-fill-gold);
}

/* Constrain the inner content width for readability while the surface
   itself bleeds to the row edges. Same pattern as .bc-counseling-router. */
.bc-fee-estimator > .bc-hub-surface__header,
.bc-fee-estimator > .bc-hub-surface__body,
.bc-fee-estimator > .bc-hub-surface__footer {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}

/* ----- Input grid (4 selects in 2 columns; stacks on phone) -----
 *
 * Subgrid keeps the labels in one shared row and the <select>s in
 * another, so a label that wraps to two lines doesn't push its
 * <select> out of alignment with the <select> in the next column.
 * Without subgrid, each .bc-fee-estimator__field is its own
 * independent stack and selects stagger when label lengths differ.
 *
 * Supported in Chrome 117+, Safari 16+, Firefox 71+ — well within
 * Butte's browser baseline. Falls back to vertical stacking on older
 * engines (no breakage, just no alignment). */

.bc-fee-estimator__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-auto-rows: auto auto;
    gap: 0.4rem 1rem;
}

@media (max-width: 40rem) {
    .bc-fee-estimator__grid {
        grid-template-columns: 1fr;
    }
}

.bc-fee-estimator__field {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    gap: 0.4rem;
}

.bc-fee-estimator__field label {
    /* Uppercase / tracked "label" treatment is visual hierarchy only —
       the <label> element is still properly associated to the <select>
       via `for=`. */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bc-hub-muted);
}

.bc-fee-estimator__field select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--bc-hub-bg);
    border: 2px solid var(--bc-hub-border-strong);
    border-radius: var(--bc-hub-radius-sm);
    padding: 0.6rem 2.5rem 0.6rem 0.85rem;
    font: inherit;
    color: var(--bc-hub-ink);
    cursor: pointer;
    min-height: 44px; /* AAA touch target */
    /* Custom dropdown chevron rendered as an SVG background, so the
       <select> doesn't get the OS-default arrow that varies by
       browser. data-URI is a tiny static SVG; no extra HTTP request. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231a1a1a' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
}

.bc-fee-estimator__field select:hover {
    border-color: var(--bc-hub-accent-strong);
}

.bc-fee-estimator__field select:focus-visible {
    outline: 3px solid var(--bc-hub-accent-strong);
    outline-offset: 2px;
    border-color: var(--bc-hub-accent-strong);
}

/* ----- Results card (rendered by fee-estimator.js) ----- */

.bc-fee-estimator .results-card {
    margin-top: 0.5rem;
}

.bc-fee-estimator .results-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.bc-fee-estimator .results-header h3 {
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
    /* surface base sets h3 to 1.35rem — fine */
}

.bc-fee-estimator .results-badge {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    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;
    /* size inherits 1rem from .bc-hub-surface */
}

/* ----- The hero total — the answer the student came for ----- */

.bc-fee-estimator .total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.25rem;
    background: var(--bc-hub-fill-gold);
    color: var(--bc-hub-fill-gold-on);
    border-radius: var(--bc-hub-radius);
}

.bc-fee-estimator .total-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bc-fee-estimator .total-amount {
    /* The single visually-dominant number on the page — students see
       this first. 2.5rem on 1.4rem body = strong but not overwhelming. */
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ----- Breakdown items ----- */

.bc-fee-estimator .breakdown-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bc-hub-muted);
    margin: 0 0 0.5rem;
}

.bc-fee-estimator .breakdown-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.bc-fee-estimator .breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem 1rem;
    padding: 0.6rem 0.9rem;
    background: var(--bc-hub-bg-alt);
    border-radius: var(--bc-hub-radius-sm);
}

.bc-fee-estimator .bi-label { font-weight: 500; }

.bc-fee-estimator .bi-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* "Waived" badge — color + word, never color alone. */
.bc-fee-estimator .bi-waived {
    color: var(--bc-hub-error-text);
}

.bc-fee-estimator .materials-note {
    color: var(--bc-hub-muted);
    margin: 0.25rem 0 0;
    font-style: italic;
}

/* ----- Detail toggle (disclosure widget) -----
 *
 * The toggle is rendered by fee-estimator.js with the standard surface
 * button classes (.bc-hub-surface__btn .bc-hub-surface__btn--ghost) so
 * it inherits primary/secondary button styling from the surface — only
 * the disclosure-widget-specific behavior (top margin, chevron
 * rotation on aria-expanded) lives here. */

.bc-fee-estimator .detail-toggle {
    margin-top: 1.25rem;
}

.bc-fee-estimator .toggle-icon {
    display: inline-block;
    transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
    .bc-fee-estimator .toggle-icon {
        transition: transform 180ms ease;
    }
}

.bc-fee-estimator .detail-toggle[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

.bc-fee-estimator .detail-breakdown {
    display: none;
    margin-top: 0.75rem;
}

.bc-fee-estimator .detail-breakdown[data-open="true"] {
    display: block;
}

/* ----- Detail table ----- */

.bc-fee-estimator .detail-table {
    width: 100%;
    border-collapse: collapse;
}

.bc-fee-estimator .detail-table caption {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bc-hub-muted);
    text-align: left;
    padding: 0 0 0.5rem;
    caption-side: top;
}

.bc-fee-estimator .detail-table thead th {
    text-align: left;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bc-hub-muted);
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--bc-hub-border-strong);
}

.bc-fee-estimator .detail-table thead th:last-child { text-align: right; }

.bc-fee-estimator .detail-table tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--bc-hub-border);
}

.bc-fee-estimator .detail-table tbody td:last-child {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bc-fee-estimator .detail-table tbody tr.waived td {
    color: var(--bc-hub-muted);
    text-decoration: line-through;
}

/* Waived row's value column re-asserts non-strike + red color +
   keeps the explicit " — Waived" suffix the JS appends. Three signals
   for "waived": strike-through (label), red color (amount), explicit
   text ("Waived"). No single-signal failure. */
.bc-fee-estimator .detail-table tbody tr.waived td:last-child {
    color: var(--bc-hub-error-text);
    text-decoration: none;
    font-weight: 700;
}

.bc-fee-estimator .detail-table tfoot th,
.bc-fee-estimator .detail-table tfoot td {
    padding: 0.75rem;
    font-weight: 700;
    border-top: 2px solid var(--bc-hub-accent-strong);
}

.bc-fee-estimator .detail-table tfoot td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bc-fee-estimator .detail-note {
    margin-top: 0.5rem;
    color: var(--bc-hub-muted);
}

/* ----- "Estimate uses fallback rates" warning box ----- */

.bc-fee-estimator .note-box {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--bc-hub-bg-alt);
    border-radius: var(--bc-hub-radius);
    border-left: 4px solid var(--bc-hub-accent-strong);
}

.bc-fee-estimator .note-box p {
    margin: 0;
    line-height: 1.55;
}

.bc-fee-estimator .no-data {
    text-align: center;
    padding: 2rem;
    color: var(--bc-hub-muted);
}

/* ----- Small-viewport tuning ----- */

@media (max-width: 30rem) {
    .bc-fee-estimator .total-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .bc-fee-estimator .total-amount {
        font-size: 2.25rem;
    }
}