/*----------------------------------------------------------
MIT Graduation Portal — shared design system
Additive stylesheet, layered on top of the legacy Site.css.
Tokens + reusable classes for the portal redesign.
----------------------------------------------------------*/

:root {
    --mit-red: #e31937;
    --mit-red-dark: #b81329;
    --mit-red-tint: #fdecef;

    --page-bg: #f4f4f2;
    --surface: #ffffff;
    --surface-border: #e2e0dc;

    --text-primary: #2b2b2b;
    --text-secondary: #5a5a5a;
    --text-on-red: #ffffff;
    --text-accent: #b81329;

    --notice-info-border: #2f6fed;
    --notice-info-bg: #eaf1fe;
    --notice-warning-border: var(--mit-red);
    --notice-warning-bg: var(--mit-red-tint);
    --notice-success-border: #2e7d32;
    --notice-success-bg: #eaf6ea;
    --notice-amber-border: #b7791f;
    --notice-amber-bg: #fdf3e2;

    --radius: 8px;
    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Badge (pill label)
----------------------------------------------------------*/
.mit-badge {
    display: inline-block;
    background-color: var(--mit-red-tint);
    color: var(--mit-red-dark);
    font-size: 0.8em;
    font-weight: 500;
    line-height: 1;
    padding: 0.35em 0.7em;
    border-radius: 999px;
}

/* FAQ page — flows full width within #main, same edges as the rest of the page
----------------------------------------------------------*/
.mit-faq-page {
    width: 100%;
}

.mit-faq-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    margin-bottom: 1em;
}

.mit-faq-title {
    margin: 0;
}

/* Two-column flow for the long accordion list */
.mit-faq-columns {
    column-count: 2;
    column-gap: 2em;
}

.mit-faq-columns .accordion-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 0.75em;
}

/* Bootstrap strips the top border from every item except the first, assuming
   a single stacked list; in a two-column flow the first item of the second
   column isn't :first-of-type in DOM order, so it loses its top border too.
   Each item here is a self-contained box, not a shared-edge row, so restore
   the top border on all of them. */
.mit-faq-columns .accordion-item:not(:first-of-type) {
    border-top: var(--bs-accordion-border-width, 1px) solid var(--bs-accordion-border-color, var(--surface-border));
}

@media (max-width: 767px) {
    .mit-faq-columns {
        column-count: 1;
    }
}

/* Distinguish collapsed question row from expanded answer content — a single
   1px divider (drawn once, on the body only) separates question from answer,
   no solid grey fill behind the answer. */
.mit-faq-columns .accordion-body {
    background-color: var(--surface);
    border-top: 1px solid var(--surface-border);
    padding: 1em 1.25em 1em 1.75em;
}

/* The question text sits in an <h4 class="accordion-title">, which carries
   its own default bottom margin (browser UA stylesheet) inside the header
   row — that margin was pushing the header/body divider down, showing as
   a grey gap between the pink header and the answer content below it. */
.mit-faq-columns .accordion-title {
    margin-bottom: 0;
}

/* Accordion header question text is a toggle control, not a hyperlink — force
   it neutral in every state (overrides Site.css's legacy a:link blue/underline
   rule) and drop the underline. Red stays limited to the expanded background
   tint and chevron icon below, never the text itself. */
.mit-faq-columns .accordion-button,
.mit-faq-columns .accordion-button:hover,
.mit-faq-columns .accordion-button:focus,
.mit-faq-columns .accordion-button:not(.collapsed) {
    color: var(--text-primary);
    text-decoration: none;
}

/* Expanded accordion header — replace Bootstrap's default blue "active"
   background and chevron icon with the brand red equivalents. No box-shadow
   here: the divider line is drawn once, by .accordion-body's border-top
   above, so the two don't stack into a doubled/thicker seam. */
.mit-faq-columns .accordion-button:not(.collapsed) {
    background-color: var(--mit-red-tint);
    box-shadow: none;
}

.mit-faq-columns .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b81329'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}

/* Replace Bootstrap's default blue accordion focus ring with a brand-red one,
   shown only for keyboard focus so mouse clicks stay unringed. */
.mit-faq-columns .accordion-button:focus {
    box-shadow: none;
}

.mit-faq-columns .accordion-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--mit-red);
}

/* Base typography
----------------------------------------------------------*/
.mit-theme body {
    background-color: var(--page-bg);
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.6;
}

.mit-theme h1,
.mit-theme h2,
.mit-theme h3 {
    color: var(--text-primary);
    line-height: 1.3;
}

.mit-theme h1 {
    font-size: 1.85em;
    font-weight: 600;
    margin: 0 0 0.35em;
}

.mit-theme h2 {
    font-size: 1.15em;
    font-weight: 600;
    margin: 1.25em 0 0.5em;
}

.mit-theme h3 {
    font-size: 1.05em;
    font-weight: 600;
    margin: 0.75em 0 0.3em;
}

.mit-theme p {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 0.75em;
}

.mit-theme a {
    color: var(--text-accent);
}

/* Site.css sets a hardcoded 200px width on every input[type="text"]/
   [type="password"] site-wide — a leftover from the old fixed-width layout.
   Bootstrap's .form-control (width:100%) and .login-panel's own input rule
   already beat that by specificity, but any plain, unclassed text input
   elsewhere (e.g. the USI-update field) is still stuck at 200px. Override
   it globally so every form input sizes to its own container instead. */
.mit-theme input[type="text"],
.mit-theme input[type="password"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Site.css also hardcodes #Address (300px) and #Postcode (100px) — ID
   selectors, which outrank .form-control and the element-selector override
   above regardless of specificity, so Address/Postcode were still stuck at
   their old fixed widths despite already having .form-control applied.
   Matched at ID specificity so these actually take effect. */
#Address.form-control,
#Postcode.form-control {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Page shell / content area
----------------------------------------------------------*/
/* #main (Site.css) sets a legacy white full-bleed panel with a fixed
   top margin and a single rounded corner; the id selector there outranks
   the .mit-main class here, so those properties are overridden explicitly
   at matching specificity to let the new page shell take over. */
#main.mit-main {
    padding: 0 1.25em;
    background-color: transparent;
    border-radius: 0;
}

/* Cards
----------------------------------------------------------*/
.card {
    box-sizing: border-box;
    background-color: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 1.5em 1.75em;
}

/* Buttons inside any .card size to their own content by default — only the
   login page's own .login-panel (not a .card) opts into a full-width
   button via its own explicit rule below. */
.card .btn {
    display: inline-block;
    width: auto;
}

/* Brand strip (used across all pages, replaces the old full red header bar) */
.mit-brand-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 1.1em 0;
    border-bottom: 3px solid var(--mit-red);
    flex-wrap: wrap;
}

.mit-brand-strip a {
    display: flex;
    align-items: center;
    gap: 0.85em;
    color: var(--text-primary);
    text-decoration: none;
}

.mit-brand-strip img {
    height: 38px;
    width: auto;
    vertical-align: middle;
}

.mit-brand-divider {
    width: 1px;
    height: 28px;
    background-color: var(--surface-border);
}

.mit-brand-title {
    font-size: 1.25em;
    font-weight: 600;
}

/* #logindisplay (Site.css) sets display:block/text-align:right/white text for
   the old red header — that block display is why "Welcome ... [ Log Off ]"
   wrapped onto its own line instead of sitting on the brand strip's row.
   Overridden here at matching id specificity for the light brand strip. */
#logindisplay.mit-brand-login {
    display: flex;
    align-items: center;
    gap: 0.75em;
    font-size: 0.9em;
    margin: 0;
    color: var(--text-secondary);
    text-align: right;
}

.mit-user-status {
    display: flex;
    align-items: center;
    gap: 0.75em;
}

.mit-user-status-name {
    white-space: nowrap;
}

.mit-logoff-link {
    display: inline-block;
    padding: 0.3em 0.75em;
    border: 1px solid var(--surface-border);
    border-radius: 999px;
    font-size: 0.9em;
    white-space: nowrap;
}

/* Site.css's #logindisplay a:link { color: white } is an ID selector, which
   outranks a plain class rule regardless of how many classes are stacked —
   that's why the button's default state was invisible (white on white/
   transparent) and only became visible on hover once the background itself
   turned red. Matched at #logindisplay specificity so ours actually wins. */
#logindisplay .mit-logoff-link:link,
#logindisplay .mit-logoff-link:visited {
    color: var(--text-accent);
    text-decoration: none;
}

#logindisplay .mit-logoff-link:hover {
    color: var(--text-on-red);
    background-color: var(--mit-red);
    border-color: var(--mit-red);
    text-decoration: none;
}

@media (max-width: 575px) {
    .mit-brand-strip {
        padding: 0.85em 0;
    }

    .mit-brand-strip a {
        gap: 0.6em;
        flex-wrap: wrap;
    }

    .mit-brand-strip img {
        height: 30px;
    }

    .mit-brand-divider {
        display: none;
    }
}

/* Landing page layout — content flows unboxed, only the login panel is a card
----------------------------------------------------------*/
.mit-landing-layout {
    padding-top: 1em;
}

@media (min-height: 700px) and (min-width: 768px) {
    .mit-landing-layout {
        max-height: calc(100vh - 6em);
        display: flex;
        flex-direction: column;
    }

    .mit-landing-layout .mit-columns {
        min-height: 0;
        flex: 1 1 auto;
    }

    .mit-landing-layout .mit-col-main {
        max-height: 100%;
        overflow-y: auto;
        padding-right: 0.5em;
    }

    .mit-landing-layout .mit-col-side {
        display: flex;
        align-items: flex-start;
    }

    .mit-landing-layout .mit-col-side .login-panel {
        width: 100%;
        max-height: 100%;
        overflow-y: auto;
    }
}

/* Two-column layout — main content flows unboxed and full width,
   the login panel is the only boxed element, fixed width on the right
----------------------------------------------------------*/
.mit-columns {
    display: flex;
    align-items: flex-start;
    gap: 2em;
    flex-wrap: wrap;
}

.mit-columns .mit-col-main {
    flex: 1 1 480px;
    min-width: 0;
}

.mit-columns .mit-col-side {
    flex: 0 0 340px;
    width: 340px;
}

@media (max-width: 991px) {
    .mit-columns .mit-col-side {
        flex: 1 1 280px;
        width: auto;
        min-width: 280px;
        max-width: 340px;
    }
}

@media (max-width: 767px) {
    .mit-columns .mit-col-side {
        max-width: none;
        min-width: 0;
        width: 100%;
    }
}

.badge-graduate{
    height: 50px;
  align-content: center;
  font-size: 18px;
}

/* Notices (callout style, replaces solid banners)
----------------------------------------------------------*/
.notice {
    border-left: 4px solid var(--notice-info-border);
    background-color: var(--notice-info-bg);
    padding: 0.6em 1em;
    margin: 0 0 0.75em;
    border-radius: 0 4px 4px 0;
    font-size: 1em;
}

.notice--warning {
    border-left-color: var(--notice-warning-border);
    background-color: var(--notice-warning-bg);
}

.notice--success {
    border-left-color: var(--notice-success-border);
    background-color: var(--notice-success-bg);
}

.notice--amber {
    border-left-color: var(--notice-amber-border);
    background-color: var(--notice-amber-bg);
}

.notice p:last-child {
    margin-bottom: 0;
}

.notice.alert {
    color: inherit;
}

.notice .btn-close {
    float: right;
    margin-left: 0.75em;
}

/* "Or" divider between the USI-update option and the offshore-student
   option — a horizontal rule with centred text, not a plain left-aligned
   heading floating alone. */
.mit-or-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-secondary);
    font-weight: 600;
    margin: 1em 0;
}

.mit-or-divider::before,
.mit-or-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--surface-border);
}

.mit-or-divider span {
    padding: 0 0.75em;
}

/* Checklist
----------------------------------------------------------*/
.checklist {
    list-style: none;
    margin: 0 0 0.75em;
    padding: 0;
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    padding: 0.2em 0;
}

.checklist-item::before {
    content: "\2713";
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    background-color: var(--mit-red);
    color: var(--text-on-red);
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1;
}

/* Login panel
----------------------------------------------------------*/
.login-panel {
    background-color: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 1.5em;
}

.login-panel h2 {
    margin-top: 0;
}

.login-panel .form-group {
    margin-bottom: 1em;
}

.login-panel label {
    font-size: 0.87em;
    font-weight: 500;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 0.3em;
}

.login-panel input[type="text"],
.login-panel input[type="datetime"] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    padding: 0.5em 0.7em;
}

.login-panel input[type="text"]:focus,
.login-panel input[type="datetime"]:focus {
    outline: none;
    border-color: #b3b3b3;
    box-shadow: 0 0 0 3px #e8e8e8;
}

.login-panel .btn-primary {
    width: 100%;
    max-width: 100%;
}

.login-panel .login-helper-text {
    color: var(--text-secondary);
    font-size: 0.85em;
    margin: 0.6em 0 0;
}

/* Application form (post-login) — rebuilt on Bootstrap 5's row/col grid and
   form-label/form-control/form-check classes instead of the old custom
   flex/editor-label system. Only spacing/brand-colour touch-ups here —
   Bootstrap itself handles the grid math, alignment, and stacking.
----------------------------------------------------------*/
.mit-application-form.card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Long <legend> text (e.g. "Select the course you are graduating from on
   [date]") can force a fieldset wider than its container in some browsers,
   since legends don't always wrap the same way as normal block content —
   constrain both explicitly so nothing inside the card can push it (or the
   page) wider than the viewport. */
.mit-application-form fieldset {
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 0 0.75em !important;
    padding: 0.85em 1.25em 0.9em !important;
}

.mit-application-form fieldset:last-of-type {
    margin-bottom: 0.5em !important;
}

.mit-application-form legend {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    font-size: 1.05em !important;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5em;
}

.mit-application-form .mit-student-context {
    color: var(--text-secondary);
    font-size: 0.95em;
    font-weight: 400;
    margin: 0 0 0.75em;
}

.mit-application-form .form-label {
    font-weight: 600;
    font-size: 0.9em;
    color: var(--text-primary);
    margin-bottom: 0.3em;
}

.mit-application-form .form-control {
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    padding: 0.45em 0.65em;
}

.mit-application-form .form-control:focus {
    outline: none;
    border-color: #b3b3b3;
    box-shadow: 0 0 0 3px #e8e8e8;
}

/* Short-value fields (Phone/Mobile, State, Postcode) stretch to fill their
   whole Bootstrap column at width:100%, which looks oversized once the
   column itself is wide (tablet/desktop, whether col-md-6 or col-lg-4).
   Cap them from the md breakpoint on — mobile (col-12) keeps them at full
   column width so they aren't cramped, md+ caps them to a sensible size. */
@media (min-width: 768px) {
    .mit-application-form .form-control-short {
        max-width: 220px;
    }
}

/* Postcode is bound to an int server-side; only its rendered input type
   changes (via TextBoxFor htmlAttributes) to type="text" so the spinner
   arrows and default "0" go away — model/binding/name are unchanged. This
   rule is a fallback in case the number spinner ever reappears. */
.mit-application-form input[type="number"]::-webkit-outer-spin-button,
.mit-application-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mit-application-form input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Radios — Bootstrap's .form-check-input, recoloured to the brand red
   instead of the browser/Bootstrap default blue. */
.mit-application-form .form-check {
    margin-bottom: 0.5em;
}

.mit-application-form .form-check-input {
    accent-color: var(--mit-red);
}

.mit-application-form .form-check-input:checked {
    background-color: var(--mit-red);
    border-color: var(--mit-red);
}

.mit-application-form .form-check-input:focus {
    border-color: var(--mit-red);
    box-shadow: 0 0 0 0.2rem var(--mit-red-tint);
}

.mit-application-form .form-text {
    color: var(--text-secondary);
    font-size: 0.85em;
}

/* Buttons
----------------------------------------------------------*/
.btn-primary {
    display: inline-block;
    min-width: 200px;
    background-color: var(--mit-red);
    border-color: var(--mit-red);
    color: var(--text-on-red);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--mit-red-dark);
    border-color: var(--mit-red-dark);
    color: var(--text-on-red);
}

/* .login-panel's own button opts back into full width on small screens
   regardless of the 200px minimum above. */
.login-panel .btn-primary {
    min-width: 0;
    width: 100%;
}

/* Full width only on small screens; the 200px minimum still applies from
   there up so the button never shrinks narrower than that. */
@media (max-width: 575px) {
    .btn-primary {
        width: 100%;
    }
}

/* "Back" button (Regalia page) — same minimum width as Next, sits
   alongside it rather than shrinking to fit a tight row. */
.btn-light {
    display: inline-block;
    min-width: 200px;
}

@media (max-width: 575px) {
    .btn-light {
        width: 100%;
    }
}

/* Brand-red button, layered on top of Bootstrap's plain .btn — never
   shrinks below 200px, sits inside the card's own padding. */
.btn-mit-red {
    display: inline-block;
    min-width: 200px;
    max-width: 200px;
    background-color: var(--mit-red);
    border: 1px solid var(--mit-red);
    color: var(--text-on-red);
}

/* Full width only on small screens; the 200px minimum still applies. */
@media (max-width: 575px) {
    .btn-mit-red {
        width: 100%;
    }
}

.btn-mit-red:hover,
.btn-mit-red:focus {
    background-color: var(--mit-red-dark);
    border-color: var(--mit-red-dark);
    color: var(--text-on-red);
}

/* Regalia / step 2 page (GraduationOptionsAttendingCeremony) — brings this
   page onto the same .card/.notice/.form-check design system already used
   on the login and Contact Details pages.
----------------------------------------------------------*/
.mit-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75em;
    margin-bottom: 0.5em;
}

.mit-page-header-main {
    flex: 1 1 auto;
    min-width: 0;
}

.mit-page-header .mit-student-context {
    margin: 0;
}

.mit-page-header-main p {
    margin: 0.3em 0 0;
    color: var(--text-secondary);
    font-size: 0.95em;
}

/* Bootstrap's .badge nudges itself up 1px (position:relative; top:-1px) for
   sitting inline within text — that offset fights flexbox's own centering
   here, making the badge sit visibly off the student-name line. Cancelled
   so align-items: center is the only thing positioning it. */
.mit-page-header .badge {
    position: static;
    top: 0;
}

/* Section header bars ("Guest Tickets", "Academic Regalia", "Cost of Hiring
   Academic Regalia") — replaces Site.css's flat grey .section block with
   the same left-border-accent treatment as .notice elsewhere on the site. */
.mit-section-header {
    border-left: 4px solid var(--mit-red);
    background-color: var(--mit-red-tint);
    color: var(--text-primary);
    padding: 0.5em 1em;
    margin: 1em 0 0.75em;
    border-radius: 0 4px 4px 0;
    font-size: 1.05em;
    font-weight: 600;
}

.mit-required {
    color: var(--mit-red);
    font-weight: 600;
    font-size: 0.7em;
}

/* "Regalia" page-intro heading + caption — reads as a summary statement
   (payment amount + what's required), not a throwaway line lost above the
   sections below it. */
.mit-application-form .mit-page-intro-title {
    font-size: 1.2em !important;
}

.mit-intro-summary {
    background-color: var(--page-bg);
    padding: 0.75em 1em;
    border-radius: 6px;
    font-size: 1em;
    color: var(--text-primary);
}

.mit-application-form .form-check-inline {
    margin-right: 1.25em;
}

/* Pricing table — keep the on-brand red header row, change the Total row
   from Site.css's orange (#ff8d00) to dark neutral text on a light tint,
   consistent with the rest of the brand palette. */
.table-mit.table > tfoot {
    background-color: var(--page-bg);
    color: var(--text-primary) !important;
    font-weight: 700;
}

/* Review page — "Review your application" heading + "Update your Personal
   Details" button on one flex row, button right-aligned. The legend sits
   inside a wrapping div rather than as a direct <fieldset> child, so it no
   longer gets the browser's special legend layout — margin/position are
   fully controlled here instead. */
.mit-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75em;
    margin-bottom: 1em;
}

/* Site.css's legacy a:link rule (specificity 0,1,1) beats Bootstrap's bare
   .btn class (0,1,0), leaving this link-styled-as-button underlined. */
.mit-review-actions .btn:link,
.mit-review-actions .btn:visited,
.mit-review-actions .btn:hover {
    text-decoration: none;
}

.mit-review-legend {
    margin: 0 !important;
}

/* Review page — two side-by-side columns (Personal Details / Graduation
   Details), each field a label-above-value stack. Column widths/stacking
   come from Bootstrap's .row/.col-md-6; only colour/weight/spacing for the
   label+value pairs and the column headings are set here. */
.mit-review-col {
    background-color: var(--page-bg);
    border-radius: 6px;
    padding: 1em 1.25em;
    box-sizing: border-box;
}

.mit-review-col-title {
    font-size: 1.05em;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75em;
}

.mit-review-label {
    color: var(--text-secondary);
    font-size: 0.9em;
    font-weight: 500;
    margin-bottom: 0.2em;
}

.mit-review-field {
    color: var(--text-primary);
}

@media (max-width: 767px) {
    .mit-header {
        padding: 0.6em 1em;
    }

    .mit-main {
        margin: 1em auto;
        padding: 0 0.75em;
    }
}