/*
 * my-student-loan.co.uk
 *
 * The shared house style, then this site's own palette and type, then
 * whatever its pages needed beyond both. Generated by
 * _shared/design/build.mjs; edit core.css, themes.mjs or the page markup
 * rather than this file.
 *
 * Academic maroon, off the back of a degree certificate.
 */

/*
 * The house style for the calculator sites.
 *
 * Every page used to carry its own <style> block, so a site had twelve
 * independent designs that drifted apart the moment one page was touched.
 * This is the single sheet all of them load instead.
 *
 * It is deliberately written against the class names the pages already use
 * rather than a fresh vocabulary, so the markup does not have to be rewritten
 * to pick up the design. Anything a page invents beyond this still works; it
 * just inherits the tokens below.
 *
 * The register is UK reference material: a well-set form or a good pocket
 * guide, not a software landing page. These are tools someone opens while
 * worried about money, a deadline or a letter from the council. Legibility,
 * calm and obvious structure matter more than personality, so the personality
 * is confined to one accent and one display face, set per site in theme.css.
 */

/* ---------------------------------------------------------------- tokens */

:root {
    /*
     * Neutrals carry a slight warmth rather than being pure grey, so pages
     * read as printed stock instead of a default browser canvas. theme.css
     * shifts them fractionally towards each site's accent.
     */
    --paper: #FBFAF8;
    --card: #FFFFFF;
    --ink: #1A1D21;
    --ink-soft: #454C54;
    --muted: #6B747E;
    --rule: #E3E0DA;
    --rule-strong: #CFCBC3;

    /* Set per site. These are the fallbacks if a theme forgets one. */
    --accent: #2B4C6F;
    --accent-deep: #1D3550;
    --accent-tint: #EDF1F5;
    --accent-ink: #FFFFFF;

    /*
     * Semantic colours are separate from the accent so a site whose accent is
     * green does not make every success message invisible.
     */
    --good: #2F6B4F;
    --good-tint: #EAF3ED;
    --warn: #8A6212;
    --warn-tint: #FBF3E0;
    --bad: #9A3324;
    --bad-tint: #FBEDEA;

    --font-display: Georgia, 'Times New Roman', serif;
    --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-figure: ui-monospace, 'SF Mono', Menlo, monospace;

    /*
     * One scale, used everywhere. Values are on a 1.2 ratio from 1rem, which
     * is tight enough that a heading and the paragraph under it still feel
     * like the same document.
     */
    --step-0: 1rem;
    --step-1: 1.2rem;
    --step-2: 1.44rem;
    --step-3: 1.728rem;
    --step-4: 2.074rem;
    --step-5: 2.488rem;

    --space: 1rem;
    --radius: 10px;
    --radius-sm: 6px;
    --measure: 68ch;
    --page: 68rem;

    /*
     * Shadows are almost invisible on purpose. The old design leaned on large
     * soft drop shadows for hierarchy, which is what made it read as generic;
     * here hierarchy comes from rules, weight and space.
     */
    --lift: 0 1px 2px rgba(26, 29, 33, 0.05), 0 1px 1px rgba(26, 29, 33, 0.04);
    --lift-lg: 0 2px 4px rgba(26, 29, 33, 0.06), 0 8px 20px rgba(26, 29, 33, 0.06);
}

/*
 * Dark mode has three triggers because the sites arrived with three: the OS
 * preference, a data-theme attribute, and a body class from the older
 * hand-rolled toggles. All three land on the same tokens.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --paper: #14161A;
        --card: #1B1F24;
        --ink: #E8EAEC;
        --ink-soft: #BFC5CC;
        --muted: #8C959F;
        --rule: #2A2F36;
        --rule-strong: #3A4149;
        --accent-tint: #1E262F;
        --good-tint: #17251E;
        --warn-tint: #251E10;
        --bad-tint: #2A1815;
        --lift: 0 1px 2px rgba(0, 0, 0, 0.4);
        --lift-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.3);
    }
}

:root[data-theme='dark'],
body.dark-mode {
    --paper: #14161A;
    --card: #1B1F24;
    --ink: #E8EAEC;
    --ink-soft: #BFC5CC;
    --muted: #8C959F;
    --rule: #2A2F36;
    --rule-strong: #3A4149;
    --accent-tint: #1E262F;
    --good-tint: #17251E;
    --warn-tint: #251E10;
    --bad-tint: #2A1815;
    --lift: 0 1px 2px rgba(0, 0, 0, 0.4);
    --lift-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    /*
     * An explicit background rather than a gradient. Several sites shipped a
     * pale blue or blue-to-orange wash behind white cards, which is the single
     * thing that dated them most.
     */
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Icons sit on the text baseline, so they need to opt out of the above. */
svg.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.135em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--accent-deep);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

::selection {
    background: var(--accent-tint);
    color: var(--ink);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: 1.15;
    text-wrap: balance;
    font-weight: 700;
}

h1 {
    font-size: clamp(var(--step-4), 4.5vw, var(--step-5));
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--step-3);
    letter-spacing: -0.01em;
}

h3 {
    font-size: var(--step-1);
}

h4 {
    font-size: var(--step-0);
}

p,
li {
    color: var(--ink-soft);
}

p {
    max-width: var(--measure);
}

strong {
    color: var(--ink);
    font-weight: 650;
}

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: calc(var(--space) * 2) 0;
}

code,
kbd {
    font-family: var(--font-figure);
    font-size: 0.9em;
    background: var(--accent-tint);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------- layout */

.container,
.content,
main {
    width: 100%;
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/*
 * A couple of sites have no wrapper element: their sections sit straight on
 * the body, so without this they run edge to edge with no gutter at all. This
 * cannot disturb the sites that do have a container, because there the body's
 * children are the nav, main and footer instead.
 */
body > :where(section, article) {
    width: 100%;
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

body > :where(section, article) + :where(section, article) {
    margin-block-start: calc(var(--space) * 2);
}

.prose-wrap {
    max-width: var(--measure);
}

/* Nested containers would double the gutter and halve the width. */
.container .container,
main .container {
    padding-inline: 0;
    max-width: none;
}

/*
 * Vertical rhythm.
 *
 * These are :where() so they carry no specificity at all: every one of them
 * can be overridden by a single class from the rules a page carried over,
 * which is what lets bespoke calculator layouts keep their own spacing while
 * ordinary prose gets sensible defaults everywhere else.
 *
 * The reset above zeroes every margin, so without this the FAQ answers and
 * guide pages run together into one solid block of text.
 */
:where(p, ul, ol, dl, blockquote, figure, pre, table, .help-text) {
    margin-block-end: 1rem;
}

:where(h2, h3, h4) {
    margin-block-start: 1.75rem;
    margin-block-end: 0.5rem;
}

:where(h1) {
    margin-block-end: 0.5rem;
}

/* A heading that opens a card should not push itself away from the top of it. */
:where(h1, h2, h3, h4):first-child {
    margin-block-start: 0;
}

:where(p, ul, ol):last-child {
    margin-block-end: 0;
}

:where(main, .content, .container) > * + * {
    margin-block-start: calc(var(--space) * 2);
}

:where(section) > * + * {
    margin-block-start: var(--space);
}

/* --------------------------------------------------------------- masthead */

.breadcrumb-nav,
.gov-header,
.site-header,
.site-nav {
    background: var(--card);
    border-bottom: 1px solid var(--rule);
    padding: 0.75rem clamp(1rem, 4vw, 2rem);
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-nav,
.breadcrumb-inner,
.gov-header-inner,
.nav-container {
    max-width: var(--page);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

/*
 * Where the bar is also the flex row, it must stay full bleed or the rule and
 * background stop short of the window edge. Padding does the centring instead
 * of a max-width, which a single element cannot have both of.
 */
.site-nav {
    max-width: none;
    padding-inline: max(clamp(1rem, 4vw, 2rem), calc((100% - var(--page)) / 2));
}

.nav-brand,
.nav-logo,
.gov-logo,
.sidebar-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-1);
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: auto;
}

.nav-brand:hover,
.nav-logo:hover,
.gov-logo:hover {
    color: var(--accent);
}

.nav-links,
.gov-nav {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    align-items: center;
}

.nav-links a,
.gov-nav a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 550;
    font-size: 0.9rem;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
}

.nav-links a:hover,
.gov-nav a:hover,
.nav-links a[aria-current],
.gov-nav a[aria-current] {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

.breadcrumb-inner a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 550;
}

.breadcrumb-inner a:hover {
    text-decoration: underline;
}

.breadcrumb-sep {
    margin: 0 0.4rem;
    color: var(--rule-strong);
}

.breadcrumb-current {
    color: var(--muted);
}

/* ------------------------------------------------------------------ hero */

.hero {
    padding: clamp(2rem, 6vw, 4rem) 0 0;
}

/*
 * Where a page puts its tool alongside the introduction, keep them side by
 * side on a wide screen: the whole value of these pages is that the thing you
 * came to use is visible without scrolling. Stacked below the breakpoint,
 * introduction first.
 */
.hero-content {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

@media (min-width: 62rem) {
    .hero-content:has(.calculator-card) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        align-items: center;
    }
}

.hero-text {
    max-width: var(--measure);
}

.hero-description,
.subtitle,
.value-proposition {
    font-size: var(--step-1);
    color: var(--muted);
    margin-top: 0.75rem;
    max-width: 54ch;
    line-height: 1.55;
}

/*
 * The band at the top of a content page. It is a heading and a standfirst,
 * not a hero, so it gets space rather than a background.
 */
.page-header,
.header-section {
    padding-block: clamp(1.5rem, 4vw, 2.5rem) 0;
}

.page-header p,
.header-section p,
.section-intro,
.lede {
    font-size: var(--step-1);
    color: var(--muted);
    max-width: 54ch;
    line-height: 1.55;
}

.content-section,
.article-content {
    max-width: var(--measure);
}

.faq-answer > * + * {
    margin-top: 0.5rem;
}

/*
 * A header band that carries white text.
 *
 * A couple of pages build their header from Tailwind utilities and lean on a
 * .gradient-bg class for the ground. Stripping that background along with the
 * rest of the old palette left white type on a white page, which is invisible
 * rather than merely wrong. The band comes back in the site's own accent, and
 * the text inside it inherits rather than falling back to the ink colour.
 */
.gradient-bg,
.hero-gradient {
    background: var(--accent);
    color: #fff;
}

.gradient-bg :where(h1, h2, h3, h4, p, li, a, strong),
.hero-gradient :where(h1, h2, h3, h4, p, li, a, strong) {
    color: inherit;
}

/*
 * Buttons whose class is bespoke to one calculator. Each carried its colour in
 * its own rule, so once that was stripped they were left as unstyled inline
 * text next to the fields they act on.
 */
[class*='-btn'],
[class*='-button'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font: inherit;
    font-weight: 650;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--accent);
    color: var(--accent-ink);
    cursor: pointer;
    text-decoration: none;
}

[class*='-btn']:hover,
[class*='-button']:hover {
    background: var(--accent-deep);
    color: var(--accent-ink);
}

/* Removing something is not the accent action. */
[class*='delete-'],
[class*='remove-'],
[class*='clear-'] {
    background: var(--card);
    color: var(--muted);
    border-color: var(--rule-strong);
}

[class*='delete-']:hover,
[class*='remove-']:hover,
[class*='clear-']:hover {
    background: var(--bad-tint);
    color: var(--bad);
    border-color: var(--bad);
}

/* ----------------------------------------------------------------- cards */

.calculator-card,
.content-card,
.info-card,
.article-card,
.blog-card,
.faq-card,
.card,
.result-box,
.history-item,
.email-box,
.contact-box,
.faq-section,
.summary-card,
.balance-card {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: var(--lift);
}

/*
 * The tool itself is the reason anyone is here, so it gets the one piece of
 * emphasis on the page: a heavier rule in the accent along its top edge.
 */
.calculator-card {
    border-top: 3px solid var(--accent);
    box-shadow: var(--lift-lg);
}

.article-card,
.blog-card {
    display: block;
    text-decoration: none;
}

.article-card:hover,
.blog-card:hover {
    border-color: var(--rule-strong);
    box-shadow: var(--lift-lg);
}

.article-date,
.blog-date,
.history-date,
.date,
.last-updated {
    font-size: 0.8rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.article-summary,
.blog-summary {
    margin-top: 0.5rem;
}

/*
 * Card lists. Two columns is the most a 68rem measure can hold before the
 * titles start wrapping every other word.
 */
.blog-grid,
.related-grid,
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: 1.25rem;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

.read-more:hover {
    gap: 0.6rem;
    text-decoration: underline;
}

/* ----------------------------------------------------------------- forms */

.form-row,
.input-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 1rem;
}

.form-group + .form-group,
.form-group {
    margin-top: 0;
}

.form-row + .form-row,
.calculator-card .form-group + .form-group {
    margin-top: 1rem;
}

label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
    margin-bottom: 0.35rem;
}

input[type='text'],
input[type='number'],
input[type='email'],
input[type='tel'],
input[type='date'],
input[type='search'],
select,
textarea {
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.75rem;
    transition: border-color 0.12s, box-shadow 0.12s;
}

/* Figures line up in columns, so they get tabular digits. */
input[type='number'],
input[inputmode='numeric'] {
    font-variant-numeric: tabular-nums;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
    opacity: 0.75;
}

select {
    appearance: none;
    /* The arrow is drawn rather than fetched, so it inherits the ink colour. */
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.75rem) 55%;
    background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
    background-repeat: no-repeat;
    padding-right: 2.25rem;
}

textarea {
    min-height: 8rem;
    resize: vertical;
}

.help-text {
    display: block;
    font-size: 0.825rem;
    color: var(--muted);
    margin-top: 0.3rem;
}

/* --------------------------------------------------------------- buttons */

.btn,
.btn-primary,
.btn-secondary,
.calculate-btn,
.cta-button,
.submit-btn,
.add-holiday-btn,
.clear-history-btn,
/*
 * Bare buttons with no class at all. Several existed only as a colour in a
 * style attribute, so once that was stripped they had nothing left. The
 * toggles further down redefine themselves after this and are unaffected.
 */
button,
button[type='submit'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font: inherit;
    font-weight: 650;
    line-height: 1.2;
    padding: 0.7rem 1.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.12s, border-color 0.12s, transform 0.06s;
}

.btn,
.btn-primary,
.calculate-btn,
.cta-button,
.submit-btn,
.add-holiday-btn,
button,
button[type='submit'] {
    background: var(--accent);
    color: var(--accent-ink);
}

.clear-history-btn {
    background: var(--card);
    color: var(--ink-soft);
    border-color: var(--rule-strong);
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

.clear-history-btn:hover {
    background: var(--bad-tint);
    color: var(--bad);
    border-color: var(--bad);
}

.btn:hover,
.btn-primary:hover,
.calculate-btn:hover,
.submit-btn:hover,
.add-holiday-btn:hover,
button:hover,
button[type='submit']:hover {
    background: var(--accent-deep);
    color: var(--accent-ink);
}

.btn:active,
.btn-primary:active,
.calculate-btn:active,
.submit-btn:active {
    transform: translateY(1px);
}

.btn-secondary,
.back-link {
    background: var(--card);
    color: var(--ink);
    border-color: var(--rule-strong);
}

.btn-secondary:hover,
.back-link:hover {
    background: var(--accent-tint);
    color: var(--ink);
    border-color: var(--accent);
}

/* The main action of a calculator page is full width; it is the whole point. */
.calculate-btn,
.submit-btn {
    width: 100%;
    margin-top: 1.25rem;
    padding-block: 0.85rem;
    font-size: var(--step-1);
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule-strong);
    text-decoration: none;
}

/* --------------------------------------------------------------- results */

/*
 * Results are hidden until a calculation runs. The original markup toggles a
 * .show class, so display is driven by that and not by inline styles.
 */
.results {
    display: none;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

.results.show,
.results[data-show] {
    display: block;
    animation: result-in 0.25s ease-out;
}

@keyframes result-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: 1rem;
}

.summary-card {
    background: var(--accent-tint);
    border-color: transparent;
    box-shadow: none;
    padding: 1.1rem;
}

.summary-label,
.result-label,
.breakdown-label,
.balance-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/*
 * The headline figure is the answer the visitor came for, so it is set in the
 * display face at the largest size on the page and given tabular digits so it
 * does not jitter as it recalculates.
 */
.summary-value,
.result-value,
.balance-value,
.amount,
.error-code {
    font-family: var(--font-display);
    font-size: var(--step-4);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.summary-subtext {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 0.25rem;
}

.breakdown {
    margin-top: 1.5rem;
}

.breakdown h3 {
    margin-bottom: 0.5rem;
}

.breakdown-item,
.result-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--rule);
}

.breakdown-item:last-child,
.result-item:last-child {
    border-bottom: 0;
}

.breakdown-item.highlight,
.result-item.highlight {
    border-top: 2px solid var(--ink);
    border-bottom: 0;
    margin-top: 0.35rem;
    padding-top: 0.75rem;
    font-weight: 650;
}

.breakdown-value,
.result-value-inline {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

.breakdown-value.negative,
.negative {
    color: var(--bad);
}

.breakdown-value.positive,
.positive {
    color: var(--good);
}

/* -------------------------------------------------------------- callouts */

.info-box,
.highlight-box,
.warning-box,
.tip-box,
.example-box,
.note,
.cta-box,
.info-callout,
.warning,
.success {
    border-radius: var(--radius-sm);
    padding: 1rem 1.15rem;
    /* A left rule rather than a full border, so callouts sit in the text
     * rather than interrupting it as another box. */
    border-left: 3px solid var(--accent);
    background: var(--accent-tint);
}

.tip-box,
.example-box {
    border-left-color: var(--rule-strong);
    background: transparent;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--rule-strong);
}

.warning-box,
.warning {
    border-left-color: var(--warn);
    background: var(--warn-tint);
}

.success {
    border-left-color: var(--good);
    background: var(--good-tint);
}

.cta-box {
    border-left-color: var(--accent);
    background: var(--accent-tint);
    text-align: left;
}

/* ------------------------------------------------------------------- FAQ */

.faq-section > * + * {
    margin-top: 0.75rem;
}

.faq-item {
    border-bottom: 1px solid var(--rule);
    padding: 0.9rem 0;
}

.faq-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.faq-question {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-1);
    color: var(--ink);
    margin-bottom: 0.35rem;
}

/* Where the markup uses <details>, keep the marker but make it clickable. */
.faq-item summary {
    cursor: pointer;
    font-weight: 650;
    color: var(--ink);
}

/* --------------------------------------------------------- prose sections */

.info-section > * + *,
.content-card > * + * {
    margin-top: 0.85rem;
}

.info-section h2,
.info-section h3 {
    margin-top: 1.5rem;
}

.info-section > h2:first-child,
.info-section > h3:first-child {
    margin-top: 0;
}

.info-section ul,
.info-section ol,
.helpful-links,
.related-articles ul {
    padding-left: 1.15rem;
    max-width: var(--measure);
}

.info-section li + li,
.helpful-links li + li {
    margin-top: 0.35rem;
}

.info-section ul {
    list-style: none;
    padding-left: 0;
}

.info-section ul li {
    padding-left: 1.15rem;
    position: relative;
}

/* A rule rather than a bullet: quieter, and it lines up with the text above. */
.info-section ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.5rem;
    height: 1px;
    background: var(--rule-strong);
}

.related-articles,
.helpful-links {
    margin-top: 1.5rem;
}

/* ---------------------------------------------------------------- tables */

table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
}

/* Rate tables are wider than a phone; they scroll rather than squash. */
.table-scroll {
    overflow-x: auto;
}

th,
td {
    text-align: left;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--rule);
}

th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    font-weight: 650;
}

td:not(:first-child),
th:not(:first-child) {
    text-align: right;
}

/* ---------------------------------------------------------------- contact */

.contact-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin-top: 1rem;
}

.contact-method {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 1rem;
}

.email-link {
    font-weight: 600;
    word-break: break-word;
}

.contact-form > * + * {
    margin-top: 1rem;
}

/* -------------------------------------------------------------------- 404 */

.error-code {
    font-size: clamp(4rem, 18vw, 8rem);
    color: var(--rule-strong);
    line-height: 1;
}

/* ----------------------------------------------------------------- footer */

.editorial-footer,
.gov-footer,
.app-footer,
.site-footer,
footer {
    margin-top: calc(var(--space) * 4);
    border-top: 1px solid var(--rule);
    background: var(--card);
    padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem) 1.5rem;
}

.footer-inner,
.gov-footer-inner {
    max-width: var(--page);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: 2rem;
    align-items: start;
}

.footer-col h4,
.gov-footer-col h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-family: var(--font-body);
    font-weight: 650;
    margin-bottom: 0.6rem;
}

.footer-col p,
.gov-footer-col p {
    font-size: 0.9rem;
}

.footer-col a,
.gov-footer-col a {
    display: block;
    padding: 0.2rem 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
    text-decoration: none;
}

.footer-col a:hover,
.gov-footer-col a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/*
 * The row of legal links on pages whose footer has no columns. Several pages
 * had no footer at all and now carry this one, so it has to stand on its own
 * rather than assume the column grid above it.
 */
.site-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: baseline;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--muted);
}

.site-footer p {
    margin: 0;
    color: var(--muted);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.footer-links a {
    color: var(--muted);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.footer-bottom,
.gov-footer-bottom {
    max-width: var(--page);
    margin: 2rem auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    font-size: 0.8rem;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: center;
}

.footer-bottom a,
.gov-footer-bottom a {
    color: var(--muted);
}

/* --------------------------------------------------------- sidebar layout */

/*
 * A few sites use a fixed sidebar rather than a top bar. It keeps its shape,
 * but collapses to a normal header below the breakpoint instead of covering
 * the tool on a phone.
 */
.app-layout {
    display: grid;
    grid-template-columns: 15rem 1fr;
    min-height: 100vh;
}

.app-sidebar {
    background: var(--card);
    border-right: 1px solid var(--rule);
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sidebar-logo {
    display: inline-flex;
    color: var(--accent);
    font-size: 1.4rem;
}

.sidebar-title {
    margin-right: 0;
    font-size: var(--step-1);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 550;
    font-size: 0.925rem;
}

.sidebar-link:hover {
    background: var(--accent-tint);
    color: var(--ink);
}

.sidebar-link[aria-current] {
    background: var(--accent-tint);
    color: var(--accent-deep);
    font-weight: 650;
}

.sidebar-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
}

.sidebar-link-small {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.8rem;
}

.app-main {
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem);
    max-width: var(--page);
    width: 100%;
    /*
     * Overrides the auto centring `main` inherits above. With a fixed sidebar
     * already holding the left edge, centring the column as well opens a gap
     * between the two that reads as a mistake.
     */
    margin-inline: 0;
}

.dark-mode-toggle,
.hamburger {
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.dark-mode-toggle:hover,
.hamburger:hover {
    background: var(--accent-tint);
    color: var(--ink);
    border-color: var(--accent);
}

.hamburger {
    display: none;
}

@media (max-width: 60rem) {
    .app-layout {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: static;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--rule);
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .sidebar-footer {
        margin-top: 0;
        margin-left: auto;
    }
}

/* ------------------------------------------------------------ advertising */

/*
 * Auto ads inject their own containers. Giving them a reserved, centred band
 * stops the page reflowing around them as they arrive, which is the thing
 * that makes an ad-supported page feel cheap.
 */
ins.adsbygoogle {
    display: block;
    margin: calc(var(--space) * 2) auto;
    max-width: 100%;
    overflow: hidden;
}

/* ------------------------------------------------------------------ print */

@media print {
    .breadcrumb-nav,
    .site-header,
    .gov-header,
    .app-sidebar,
    .nav-links,
    .editorial-footer,
    .gov-footer,
    ins.adsbygoogle,
    .calculate-btn,
    .button-group {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .calculator-card,
    .content-card {
        border: 1px solid #999;
        box-shadow: none;
    }
}


/* ------------------------------------------------------------ this site */

/*
 * After the core, not before it. The core declares the same custom properties
 * as its own fallbacks, and two :root blocks of equal specificity are resolved
 * by order, so a theme placed above it loses every one of these and the site
 * renders in the default navy.
 */
:root {
    --accent: #6E2639;
    --accent-deep: #521B2A;
    --accent-tint: #F7EAEE;
    --accent-ink: #FFFFFF;

    --font-display: 'Newsreader', Georgia, serif;
    --font-body: 'Karla', system-ui, sans-serif;
}

/* ------------------------------------------ carried over from the pages */

/*
 * Layout these pages needed that the house style does not cover. Colour,
 * shadow and typeface were stripped on the way in, so these rules can place
 * things but cannot restate the old design.
 */

.helpful-links h2 {
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.helpful-links a {
    display: inline-block;
    text-decoration: none;
    margin: 0 10px;
}

.helpful-links a:hover {
    text-decoration: underline;
}

.app-footer a {
    text-decoration: none;
}

header {
    text-align: center;
    margin-bottom: 30px;
    padding: 40px 20px;
}

.tagline {
    font-size: 1.2rem;
    font-weight: 300;
}

.info-section {
    padding: 30px;
    margin-bottom: 30px;
}

.info-section p {
    margin-bottom: 15px;
    line-height: 1.8;
}

.info-section li {
    margin-bottom: 8px;
    line-height: 1.8;
}

.article-content h1 {
    font-size: 2rem;
    margin-bottom: 10px;
    line-height: 1.3;
}

.article-content h2 {
    margin-top: 30px;
    margin-bottom: 12px;
    font-size: 1.4rem;
}

.article-content h3 {
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 1.15rem;
}

.article-content p {
    margin-bottom: 16px;
    line-height: 1.8;
}

.article-content ul,
.article-content ol {
    margin-left: 20px;
    margin-bottom: 16px;
}

.article-content li {
    margin-bottom: 8px;
    line-height: 1.8;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.comparison-table th,
.comparison-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--rule);
}

.comparison-table th {
    font-weight: 600;
}

.related-articles h3 {
    margin-bottom: 15px;
}

.related-articles a {
    text-decoration: none;
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
}

.related-articles a:last-child {
    border-bottom: none;
}

.related-articles a:hover {
    text-decoration: underline;
}

nav {
    padding: 1rem 0;
}

nav .nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

nav .nav-brand {
    font-size: 1.25rem;
    font-weight: bold;
    text-decoration: none;
}

nav .nav-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

nav .nav-links a {
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s;
}

.article-card h2 {
    margin-bottom: 8px;
    font-size: 1.5rem;
}

.article-card h2 a {
    text-decoration: none;
}

.article-card h2 a:hover {
    text-decoration: underline;
}

.contact-box h3 {
    margin-top: 0;
}

.email-link:hover {
    text-decoration: underline;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.info-card h3 {
    margin-top: 0;
    font-size: 1.2em;
}

.faq-answer {
    line-height: 1.8;
}

footer a {
    text-decoration: underline;
}

.tip {
    border-left: none;
    border-top: 3px solid var(--rule);
    padding: 15px;
    margin: 20px 0;
}

.info-section h4 {
    margin-top: 20px;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.plan-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.plan-table th,
.plan-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--rule);
}

.plan-table th {
    font-weight: 600;
}

.plan-table tr:last-child td {
    border-bottom: none;
}

.plan-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 10px;
}

input[type="number"] {
    width: 100%;
    padding: 15px;
    font-size: 1.2rem;
    border: 2px solid var(--rule);
    transition: border-color 0.3s;
}

input[type="number"]:focus {
    outline: none;
}

.plan-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 25px;
}

.plan-option {
    position: relative;
}

.plan-option input[type="radio"] {
    position: absolute;
}

.plan-option label {
    display: block;
    padding: 15px 10px;
    border: 2px solid var(--rule);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
    font-size: 0.95rem;
}

.calculate-btn:focus {
    outline: none;
}

.monthly-repayment {
    padding: 25px;
    margin: 20px 0;
    text-align: center;
}

.monthly-repayment .label {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.monthly-repayment .amount {
    font-size: 2.5rem;
    font-weight: 700;
}

.annual-repayment {
    text-align: center;
    font-size: 1.1rem;
    margin-top: 10px;
}

.result-details {
    margin-top: 25px;
}

@media (max-width: 768px) {
    .app-sidebar.open {
        transform: translateX(0);
    }

    .info-section {
        padding: 20px;
    }

    .article-content h1 {
        font-size: 1.6rem;
    }

    .tagline {
        font-size: 1rem;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .plan-table {
        font-size: 0.9rem;
    }

    .plan-table th,
    .plan-table td {
        padding: 8px;
    }

    .calculator-card,
    .info-section {
        padding: 20px;
    }

    .plan-selector {
        grid-template-columns: repeat(2, 1fr);
    }

    .monthly-repayment .amount {
        font-size: 2rem;
    }
}