/* ================================================================
   AUDITENA DESIGN SYSTEM
   Global styles shared by public, account, authentication,
   error, and administration pages.
   ================================================================ */


/* ----------------------------------------------------------------
   1. Design tokens
   ---------------------------------------------------------------- */

:root {
    /* Brand: deep navy for authority, vivid azure blue as the working accent */
    --color-navy-950: #060f1a;
    --color-navy-900: #0a1a2b;
    --color-navy-800: #14293f;

    --color-accent-800: #0a3363;
    --color-accent-700: #0d4d97;
    --color-accent-600: #105ca7;
    --color-accent-500: #458acf;
    --color-accent-100: #d8e9fb;
    --color-accent-50: #eff6fe;

    /* Secondary "spark" accent: a vivid magenta-pink, used only in a few
       concentrated, non-functional spots (hero kicker, selection, pull
       quotes) - never on interactive controls, so it never competes
       with the blue accent's job of meaning "click here". */
    /* --color-spark-700: #ff209e;
    --color-spark-600: #ff40ac;
    --color-spark-100: #f9d9ea;
    --color-spark-50: #fdf0f7; */

    /* --color-spark-700: rgb(0, 200, 200);
    --color-spark-600: rgb(0, 255, 255);
    --color-spark-100: #c9f7f8;
    --color-spark-50: #e0fcfe; */

    --color-spark-700: #55c9ff;
    --color-spark-600: #a4e2ff;
    --color-spark-100: #ceefff;
    --color-spark-50: #e0f5ff;

    /* Neutral (warm, low-saturation - kept out of the accent's hue) */
    --color-white: #ffffff;
    --color-gray-950: #14181f;
    --color-gray-900: #1c2430;
    --color-gray-700: #48505f;
    --color-gray-600: #5b6472;
    --color-gray-500: #6b7480;
    --color-gray-300: #ced3d9;
    --color-gray-200: #e2e5e9;
    --color-gray-100: #edeeef;
    --color-gray-50: #f6f6f4;
    --color-gray-25: #f8f8f6;

    /* Semantic: brightened to match the more vivid accent system */
    --color-success-700: #15803d;
    --color-success-600: #17a34a;
    --color-success-50: #eafbf1;

    --color-warning-700: #92400e;
    --color-warning-600: #f59e0b;
    --color-warning-50: #fffbeb;

    --color-danger-700: #b42318;
    --color-danger-600: #e0242f;
    --color-danger-50: #fff1f0;

    --color-info-700: #1a63d1;
    --color-info-50: #eff8ff;

    /* Surfaces */
    --color-background: var(--color-gray-25);
    --color-surface: var(--color-white);
    --color-surface-subtle: #f9f9f7;

    /* Typography */
    --font-sans:
        "Inter",
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-mono:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.75rem;

    /* Layout */
    --container-wide: 1120px;
    --container-reading: 760px;
    --container-form: 720px;
    --header-height: 76px;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Borders and radii - sharp, institutional; not a rounded/pill system */
    --border-color: var(--color-gray-200);
    --border-color-strong: var(--color-gray-300);

    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-xl: 4px;
    --radius-pill: 3px;

    /* Shadows: fine and low-contrast - edges do the work, not elevation */
    --shadow-sm:
        0 1px 2px rgb(10 20 30 / 4%);

    --shadow-md:
        0 6px 20px rgb(10 20 30 / 8%);

    /* Interaction */
    --transition-fast: 140ms ease;
    --focus-ring: 0 0 0 3px rgb(20 115 212 / 24%);
}


/* ----------------------------------------------------------------
   2. Reset and global foundation
   ---------------------------------------------------------------- */

html {
    min-height: 100%;
    scroll-behavior: smooth;

    /*
     * Prevents horizontal movement when navigating between pages
     * that do and do not require a vertical scrollbar.
     */
    scrollbar-gutter: stable;

    /*
     * Safety net: a table, image, or other wide element on any page
     * (current or future) that isn't properly contained (e.g. missing
     * .table-wrapper) will get clipped here instead of forcing the whole
     * page to scroll sideways on mobile. Setting this on html rather than
     * body keeps position: sticky elements (the header) working normally.
     */
    overflow-x: hidden;
}

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

/* Sticky-footer layout: main grows to fill any leftover space so the
   footer always sits at the bottom of the viewport on short pages,
   without ever needing to know the header's actual height (which varies
   once the mobile nav wraps or collapses). This also sidesteps mobile
   browsers' unreliable 100vh (address-bar) behavior, which previously
   caused a sliver of scrollable empty space below the footer. */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    color: var(--color-gray-900);
    background: var(--color-background);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

main {
    flex: 1 0 auto;
}

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

button,
input,
textarea,
select {
    font: inherit;
}

button,
input,
textarea,
select,
a {
    -webkit-tap-highlight-color: transparent;
}

::selection {
    color: var(--color-navy-950);
    background: var(--color-spark-100);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}


/* ----------------------------------------------------------------
   3. Typography
   ---------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
    margin: 0;
    color: var(--color-navy-900);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

h1 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 650;
    letter-spacing: -0.04em;
}

h2 {
    font-size: clamp(1.3rem, 2vw, 1.625rem);
}

h3 {
    font-size: var(--text-xl);
    font-weight: 650;
    letter-spacing: -0.015em;
}

h4 {
    font-size: var(--text-lg);
    font-weight: 650;
    letter-spacing: -0.01em;
}

p {
    margin: 0;
}

p + p {
    margin-top: var(--space-4);
}

strong {
    color: var(--color-gray-950);
}

small {
    color: var(--color-gray-600);
    font-size: var(--text-sm);
}

code,
pre {
    font-family: var(--font-mono);
}

code {
    padding: 0.15rem 0.35rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    color: var(--color-navy-800);
    background: var(--color-gray-50);
    font-size: 0.9em;
}

pre {
    max-width: 100%;
    overflow-x: auto;
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--color-navy-950);
    color: #e5edf7;
}

pre code {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}


/* ----------------------------------------------------------------
   4. Links and focus states
   ---------------------------------------------------------------- */

a {
    color: var(--color-accent-600);
    text-decoration: none;
    text-underline-offset: 0.2em;
    transition:
        color var(--transition-fast),
        text-decoration-color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-700);
    text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}


/* ----------------------------------------------------------------
   5. Layout
   ---------------------------------------------------------------- */

.container {
    width: min(
        calc(100% - 2 * var(--space-6)),
        var(--container-wide)
    );
    margin-inline: auto;
}

.container.narrow,
.narrow {
    max-width: var(--container-form);
}

.page {
    padding-block: var(--space-16);
}

.page > .container {
    display: grid;
    gap: var(--space-8);
}

.page header {
    display: grid;
    max-width: 780px;
    gap: var(--space-3);
}

.page header > p:first-child {
    margin-bottom: var(--space-2);
}

.page header h1 + p {
    max-width: 680px;
    color: var(--color-gray-600);
    font-size: var(--text-lg);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    color: var(--color-spark-700);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--color-spark-600);
}


/* ----------------------------------------------------------------
   6. Header and navigation
   ---------------------------------------------------------------- */

.site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    min-height: var(--header-height);
    border-bottom: 1px solid var(--border-color);
    background: rgb(255 255 255 / 97%);
    backdrop-filter: blur(6px);
}

.nav {
    display: flex;
    min-height: var(--header-height);
    align-items: center;
    gap: var(--space-8);
}

/* Pushes #site-nav (and the language dropdown after it) to the right of
   the brand - a plain flex item rather than relying on space-between,
   since the language dropdown needs to sit outside <nav> as its own flex
   item (see .lang-dropdown order rules below) without leaving a second
   gap between it and the nav links. */

.nav #site-nav {
    margin-left: auto;
}

.brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    color: var(--color-navy-900);
    font-size: var(--text-xl);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    white-space: nowrap;
}

.brand:hover {
    color: var(--color-accent-600);
    text-decoration: none;
}

.nav nav {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-5);
}

.nav nav > a,
.nav .link-button {
    color: var(--color-gray-700);
    font-size: var(--text-sm);
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
}

.nav nav > a:hover,
.nav .link-button:hover {
    color: var(--color-accent-600);
    text-decoration: none;
}


/* Header language dropdown - shares .lang-dropdown with the footer version
   (see section 8), overridden here for a light background, and opening
   downward/right-aligned since it sits in the top-right corner. */

.nav .lang-dropdown summary {
    color: var(--color-gray-700);
}

.nav .lang-dropdown summary:hover {
    color: var(--color-accent-600);
}

.nav .lang-dropdown__menu {
    top: calc(100% + var(--space-2));
    bottom: auto;
    left: auto;
    right: 0;
}


/* Mobile menu toggle - hidden on desktop, and hidden without JS (see the
   .js class added by an inline script in <head>) since there is no
   collapsed panel to reveal in that case; the plain wrapped nav from the
   responsive rules below is shown instead. */

.nav-toggle {
    display: none;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-md);
    background: var(--color-white);
    cursor: pointer;
}

.nav-toggle:hover {
    border-color: var(--color-accent-600);
}

.nav-toggle__bar {
    width: 18px;
    height: 2px;
    background: var(--color-gray-900);
    border-radius: 1px;
    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast),
        background var(--transition-fast);
}

/* The generic button:hover/:active rules (section 9) turn the toggle's
   background blue, same as every other button on the site. Follow suit
   here instead of fighting it: switch the bars to white so they stay
   readable against that blue instead of showing black-on-blue. */
.nav-toggle:hover .nav-toggle__bar,
.nav-toggle:focus-visible .nav-toggle__bar,
.nav-toggle:active .nav-toggle__bar {
    background: var(--color-white);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}


/* ----------------------------------------------------------------
   7. Hero
   ---------------------------------------------------------------- */

.hero {
    padding-block: var(--space-20);
    border-bottom: 1px solid var(--border-color);
    background: var(--color-surface);
}

.hero .container {
    display: grid;
    gap: var(--space-20);
}

.hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    align-items: center;
    gap: var(--space-10);
}

.hero-copy {
    display: grid;
    gap: var(--space-6);
}

.hero-media img {
    display: block;
    width: 100%;
    height: auto;
}

.hero h1 {
    max-width: 780px;
    font-weight: 650;
    font-size: clamp(2.5rem, 5.5vw, 4.25rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.hero p:not(.eyebrow) {
    max-width: 640px;
    color: var(--color-gray-600);
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    line-height: 1.7;
}


/* ----------------------------------------------------------------
   8. Grids and cards
   ---------------------------------------------------------------- */

.grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, 260px), 1fr)
    );
    gap: var(--space-6);
}

.grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.card:hover {
    border-color: var(--color-accent-600);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.card h2,
.card h3 {
    font-size: var(--text-xl);
}

.card p {
    color: var(--color-gray-600);
}

.card > a:last-child,
.card > .btn:last-child,
.card > .button:last-child {
    align-self: flex-start;
    margin-top: auto;
}

/* Whole-card link: use <a class="card"> instead of <article class="card">
   whenever the entire tile should be clickable (bigger touch target than
   a link buried inside), on this page or any future one. The hover lift
   and border highlight above already apply to .card either way; this
   just resets the anchor's own color/underline so it doesn't turn the
   heading and body text link-blue. */

a.card {
    color: inherit;
    text-decoration: none;
}

a.card:hover {
    text-decoration: none;
}

.card__meta {
    margin-top: auto;
    color: var(--color-accent-600);
    font-size: var(--text-xs);
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Content-preview tiles (insights, courses, resources, library items):
   clamp the title and description to a fixed number of lines so every
   tile reaches a consistent height regardless of how long its text is -
   grid rows already equalize height within a row, but a later row with
   shorter content would otherwise still end up visibly shorter than the
   row above it. This clamp behavior is shared; the min-height floor is
   set per page below since each has a different amount of card content
   (resources show two extra status lines insights/courses/library don't). */

.card--content h2,
.card--content h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.card--content p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.card--insight {
    min-height: 220px;
}

.card--course {
    min-height: 180px;
}

.card--resource {
    min-height: 180px;
}

.card--library {
    min-height: 180px;
}

/* Groups the resource type badges and the action cue (Download /
   Open website) into a single row pinned to the bottom of the card -
   keeps them together regardless of how short the description is,
   instead of leaving a gap between the badges and the link below them. */

.card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
}

.card__footer .card__meta {
    margin-top: 0;
}

.resource-badges {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-gray-600);
}

.resource-badge {
    display: inline-flex;
}

.resource-badge svg {
    width: 20px;
    height: 20px;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

.pagination__link {
    color: var(--color-accent-600);
    font-size: var(--text-xs);
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
}

.pagination__link:hover {
    text-decoration: underline;
}

.pagination__link--disabled {
    color: var(--color-gray-400, var(--color-gray-600));
    opacity: 0.5;
    pointer-events: none;
}

.pagination__status {
    color: var(--color-gray-600);
    font-size: var(--text-xs);
    white-space: nowrap;
}


/* ----------------------------------------------------------------
   9. Buttons and actions
   ---------------------------------------------------------------- */

.actions,
.form-actions,
.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.btn,
.button,
button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--color-accent-600);
    color: var(--color-white);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.btn:hover,
.button:hover,
button:hover {
    background: var(--color-accent-700);
    color: var(--color-white);
    text-decoration: none;
}

.btn:active,
.button:active,
button:active {
    transform: translateY(1px);
}

.btn.secondary,
.button--secondary,
.secondary {
    border-color: var(--color-accent-600);
    background: var(--color-white);
    color: var(--color-accent-600);
}

.btn.secondary:hover,
.button--secondary:hover,
.secondary:hover {
    border-color: var(--color-accent-700);
    background: var(--color-accent-50);
    color: var(--color-accent-700);
}

.button--primary {
    background: var(--color-accent-600);
    color: var(--color-white);
}

.btn-danger,
.button--danger {
    border-color: var(--color-danger-600);
    background: var(--color-danger-600);
    color: var(--color-white);
}

.btn-danger:hover,
.button--danger:hover {
    border-color: var(--color-danger-700);
    background: var(--color-danger-700);
}

button:disabled,
.btn[aria-disabled="true"],
.button[aria-disabled="true"],
.btn-link[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}

.inline-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.inline,
.form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.link-button,
.btn-link {
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-accent-600);
    font-weight: 650;
}

.link-button:hover,
.btn-link:hover {
    background: transparent;
    color: var(--color-accent-700);
    text-decoration: underline;
}

.btn-link.btn-danger,
.link-button.btn-danger {
    background: transparent;
    color: var(--color-danger-700);
}


/* ----------------------------------------------------------------
   10. Forms
   ---------------------------------------------------------------- */

.form,
form:not(.inline-form) {
    display: grid;
    gap: var(--space-6);
}

.form-group {
    display: grid;
    gap: var(--space-2);
}

/* Anti-spam honeypot field: present in the DOM (so bots find it) but
   invisible and unreachable for real visitors, screen readers included. */
.hp-field {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.form-group > label,
.form-check > label,
.form label {
    color: var(--color-gray-900);
    font-size: var(--text-sm);
    font-weight: 700;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
textarea,
select {
    width: 100%;
    min-height: 44px;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-md);
    color: var(--color-gray-900);
    background: var(--color-white);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}

textarea {
    min-height: 130px;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: #94a0b2;
}

input:hover,
textarea:hover,
select:hover {
    border-color: #9eacbf;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-accent-600);
    outline: none;
    box-shadow: var(--focus-ring);
}

input[readonly],
textarea[readonly] {
    cursor: default;
    color: var(--color-gray-600);
    background: var(--color-gray-50);
}

input[type="checkbox"],
input[type="radio"] {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.2rem;
    accent-color: var(--color-accent-600);
}

.form-help {
    margin: 0;
    color: var(--color-gray-500);
    font-size: var(--text-sm);
}

.form-error {
    margin: 0;
    color: var(--color-danger-700);
    font-size: var(--text-sm);
    font-weight: 650;
}

fieldset {
    display: grid;
    gap: var(--space-5);
    margin: 0;
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
}

legend {
    padding-inline: var(--space-2);
    color: var(--color-navy-900);
    font-size: var(--text-sm);
    font-weight: 800;
}

.insights-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

/* form.search-form (not just .search-form) to match the specificity of
   "form:not(.inline-form)" above, which would otherwise win the tie and
   force this back into a stacked grid instead of a single search row. */
form.search-form {
    display: flex;
    flex: 0 1 340px;
    gap: var(--space-3);
}

/* Flex items default to min-width: auto, which would stop the input
   shrinking below its intrinsic content width on narrow screens. */
.search-form input[type="search"] {
    flex: 1;
    min-width: 0;
}

@media (max-width: 640px) {
    form.search-form {
        flex-basis: 100%;
    }
}


/* ----------------------------------------------------------------
   11. Flash messages
   ---------------------------------------------------------------- */

.flash-stack {
    display: grid;
    gap: var(--space-3);
    padding-top: var(--space-4);
}

.flash {
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.flash.success {
    border-color: #a7e3cf;
    border-left-color: var(--color-success-600);
    background: var(--color-success-50);
    color: var(--color-success-700);
}

.flash.error {
    border-color: #f5c2bd;
    border-left-color: var(--color-danger-600);
    background: var(--color-danger-50);
    color: var(--color-danger-700);
}

.flash.warning {
    border-color: #f6d996;
    border-left-color: var(--color-warning-600);
    background: var(--color-warning-50);
    color: var(--color-warning-700);
}

.flash.info {
    border-color: #b9d7ff;
    border-left-color: var(--color-info-700);
    background: var(--color-info-50);
    color: var(--color-info-700);
}


/* ----------------------------------------------------------------
   12. Tables
   ---------------------------------------------------------------- */

.table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    background: var(--color-surface);
}

th,
td {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--color-navy-800);
    background: var(--color-spark-600);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

tbody tr:last-child td {
    border-bottom: 0;
}

tbody tr {
    transition: background var(--transition-fast);
}

tbody tr:hover {
    background: var(--color-surface-subtle);
}

td .inline-form {
    margin-left: var(--space-3);
}

.table-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.table-secondary-text {
    max-width: 440px;
    margin-top: var(--space-1);
    color: var(--color-gray-500);
    font-size: var(--text-sm);
    line-height: 1.5;
}


/* ----------------------------------------------------------------
   13. Article content
   ---------------------------------------------------------------- */

.article {
    display: grid;
    gap: var(--space-8);
    width: min(100%, var(--container-reading));
    margin-inline: auto;
}

.article > * + * {
    margin-top: var(--space-1);
}

.article h2 {
    margin-top: var(--space-1);
}

.article h3 {
    margin-top: var(--space-1);
}

.article p,
.article li {
    color: var(--color-gray-700);
}

.article a {
    text-decoration: underline;
}

.article img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    border-radius: var(--radius-lg);
}

.article .table-wrapper {
    max-width: 100%;
}

/* Content-driven column widths instead of the fixed 680px min-width
   used elsewhere, so a table's own text (not a shared default) decides
   how much room each column gets - works for any column count. */
.article table {
    min-width: 0;
    table-layout: auto;
}

.article th,
.article td {
    /* break-word (not anywhere): still wraps a truly long unbroken
       string as a last resort, but - unlike anywhere - doesn't count
       toward the column's minimum-width calculation, so table-layout:
       auto can't starve a short label column down below one whole
       word (e.g. splitting "Mandate" into "Mand"/"ate") to make room
       for a neighboring column with long paragraph text. */
    overflow-wrap: break-word;
}

/* Below this width, replace the scrolling table with stacked cards:
   each row becomes a card and each cell is prefixed with its column's
   header via data-label (set server-side in services.py for every
   table, regardless of column count or wording). */
@media (max-width: 720px) {
    .article .table-wrapper {
        overflow-x: visible;
        border: none;
        box-shadow: none;
        background: transparent;
    }

    .article table {
        display: block;
        width: 100%;
    }

    .article thead {
        display: none;
    }

    .article tbody {
        display: block;
    }

    .article tr {
        display: block;
        margin-bottom: var(--space-4);
        padding: var(--space-3);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--color-surface);
        box-shadow: var(--shadow-sm);
    }

    .article tbody tr:last-child {
        margin-bottom: 0;
    }

    .article td {
        display: flex;
        gap: var(--space-3);
        padding: var(--space-2) 0;
        border-bottom: 1px dashed var(--border-color);
    }

    .article td:last-child {
        border-bottom: 0;
    }

    .article td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 40%;
        max-width: 40%;
        font-weight: 700;
        font-size: var(--text-xs);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--color-navy-800);
    }
}

.article blockquote {
    margin: var(--space-1) 0;
    padding: var(--space-1) var(--space-1);
    border-left: 4px solid var(--color-spark-600);
    background: var(--color-spark-50);
    color: var(--color-navy-800);
}

.article hr {
    margin-block: var(--space-1);
    border: 0;
    border-top: 1px solid var(--border-color);
}


/* ----------------------------------------------------------------
   14. Insight sidebar
   ---------------------------------------------------------------- */

.insight-layout {
    align-items: start;
}

/* .article normally *is* the full container (courses/legal pages), where
   centering it below the reading-width cap is correct. Here it's nested
   inside .insight-main, a narrower column sized for the sidebar - that
   column is still wider than the reading-width cap, so the inherited
   centering added a stray gap between the article and the container's
   left edge that the /insights heading and tiles don't have. Pin it
   flush left instead so both pages share the same left edge. */
.insight-main .article {
    margin-inline: 0;
}

/* Grid items default to min-width: auto, which stops them shrinking
   below their content's intrinsic width - without this, a long
   unbroken pager title could hold the whole layout wider than the
   viewport instead of wrapping, since overflow-x: hidden on <html>
   hides the resulting scroll instead of preventing it. */
.insight-main,
.insight-sidebar {
    min-width: 0;
}

.insight-sidebar {
    display: grid;
    gap: var(--space-6);
}

.sidebar-card {
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.sidebar-card__title {
    margin: 0 0 var(--space-4);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-navy-800);
}

.sidebar-nav-list,
.sidebar-list {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav-list li + li,
.sidebar-list li + li {
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
}

.sidebar-nav-list__label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent-600);
}

.sidebar-nav-list a,
.sidebar-list a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: var(--color-navy-800);
    font-size: var(--text-sm);
    font-weight: 650;
    line-height: 1.4;
    text-decoration: none;
}

.sidebar-nav-list a:hover,
.sidebar-list a:hover {
    color: var(--color-accent-600);
    text-decoration: underline;
}

.insight-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-6);
    width: min(100%, var(--container-reading));
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border-color);
}

.insight-pager__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    max-width: 320px;
    color: inherit;
    text-decoration: none;
}

.insight-pager__link--next {
    margin-left: auto;
    text-align: right;
}

.insight-pager__eyebrow {
    font-size: var(--text-xs);
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent-600);
}

.insight-pager__title {
    font-weight: 650;
    color: var(--color-navy-800);
}

.insight-pager__link:hover .insight-pager__title {
    text-decoration: underline;
}

@media (min-width: 961px) {
    .insight-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
        gap: var(--space-10);
    }

    .insight-sidebar {
        position: sticky;
        top: calc(var(--header-height) + var(--space-6));
        align-self: start;
    }
}


/* ----------------------------------------------------------------
   15. Empty states
   ---------------------------------------------------------------- */

.empty-state {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    padding: var(--space-10);
    border: 1px dashed var(--border-color-strong);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
}

.empty-state p {
    max-width: 620px;
    color: var(--color-gray-600);
}


/* ----------------------------------------------------------------
   16. Error pages
   ---------------------------------------------------------------- */

.error-page {
    display: flex;
    min-height: 65vh;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-6);
}

.error-page__container {
    width: min(100%, 720px);
    margin-inline: auto;
    text-align: center;
}

.error-page__code {
    margin: 0 0 var(--space-3);
    color: var(--color-accent-600);
    font-size: clamp(4.5rem, 14vw, 8rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.07em;
    opacity: 0.14;
}

.error-page__title {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.15;
}

.error-page__message {
    max-width: 580px;
    margin: var(--space-5) auto 0;
    color: var(--color-gray-600);
    font-size: var(--text-lg);
    line-height: 1.7;
}

.error-page__reference {
    margin: var(--space-5) auto 0;
    color: var(--color-gray-500);
    font-size: var(--text-sm);
}

.error-page__reference code {
    overflow-wrap: anywhere;
}

.error-page__actions {
    justify-content: center;
    margin-top: var(--space-8);
}

.error-page__actions .btn,
.error-page__actions .button {
    min-width: 150px;
}


/* ----------------------------------------------------------------
   17. Responsive behavior
   ---------------------------------------------------------------- */

@media (max-width: 860px) {
    :root {
        --header-height: auto;
    }

    .site-header {
        position: relative;
    }

    .nav {
        align-items: flex-start;
        padding-block: var(--space-4);
    }

    .nav nav {
        flex-wrap: wrap;
        gap: var(--space-3) var(--space-4);
    }

    /* With JS available, replace the wrapped inline nav above with a
       collapsible panel behind a hamburger toggle (see nav.js). Without
       JS, the wrapped nav from the rules above is what visitors get. */

    html.js .nav {
        flex-wrap: nowrap;
    }

    html.js .nav-toggle {
        display: inline-flex;
        order: 2;
    }

    html.js .nav nav {
        position: absolute;
        z-index: 90;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        border-bottom: 1px solid var(--border-color);
        background: var(--color-white);
        box-shadow: var(--shadow-md);
        transition: max-height var(--transition-fast);
    }

    html.js .nav nav.is-open {
        max-height: 80vh;
        overflow-y: auto;
    }

    html.js .nav nav > a,
    html.js .nav nav .inline-form {
        width: 100%;
        padding: var(--space-3) var(--space-6);
    }

    /* The dropdown lives outside <nav id="site-nav"> (a sibling, not one of
       its collapsible links) precisely so it stays visible next to the
       hamburger instead of being tucked inside the collapsed panel - order
       places it just to the toggle's left; margin-left:auto groups it with
       the toggle against the right edge, leaving the brand pinned left. */

    html.js .nav > .lang-dropdown {
        order: 1;
        margin-left: auto;
    }

    /* #site-nav (above) sits at z-index:90 within the header's stacking
       context, above the dropdown menu's base z-index:20 - so when the
       hamburger panel is open, it renders in front of the language popup
       instead of behind it. Outrank it here, mobile-only. */

    html.js .nav > .lang-dropdown .lang-dropdown__menu {
        z-index: 95;
    }

    /* Icon-only on mobile - room is tight with brand + dropdown + toggle
       sharing one row, and the flag alone is enough to identify it. */

    html.js .nav > .lang-dropdown summary span {
        display: none;
    }

    .hero {
        padding-block: var(--space-20);
    }

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

    .hero-media {
        max-width: 320px;
        margin-inline: auto;
    }

    .grid--cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page {
        padding-block: var(--space-12);
    }
}

@media (max-width: 640px) {
    .container {
        width: min(
            calc(100% - 2 * var(--space-4)),
            var(--container-wide)
        );
    }

    .nav {
        display: grid;
        gap: var(--space-4);
    }

    .nav nav {
        width: 100%;
        justify-content: flex-start;
    }

    /* Keep the brand/toggle split from the 860px rules intact all the way
       down to phone widths - without this, the grid fallback above (for
       browsers without JS) would also stack the toggle under the brand
       when JS *is* available, instead of keeping it pinned to the right. */

    html.js .nav {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .hero {
        padding-block: var(--space-16);
    }

    .hero h1 {
        font-size: clamp(2.35rem, 12vw, 3.5rem);
    }

    .page {
        padding-block: var(--space-10);
    }

    .grid,
    .grid--cols-2,
    .grid--cols-3 {
        grid-template-columns: 1fr;
    }

    .actions,
    .form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .actions .btn,
    .actions .button,
    .form-actions .btn,
    .form-actions .button {
        width: 100%;
    }

    fieldset {
        padding: var(--space-5);
    }

    .empty-state {
        padding: var(--space-6);
    }

    .error-page {
        min-height: 55vh;
        padding: var(--space-12) var(--space-4);
    }

    .error-page__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .error-page__actions .btn,
    .error-page__actions .button {
        width: 100%;
    }
}


/* ----------------------------------------------------------------
   18. Accessibility preferences
   ---------------------------------------------------------------- */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ----------------------------------------------------------------
   19. Footer
   ---------------------------------------------------------------- */

.site-footer {
    margin-top: var(--space-10);
    border-top: 1px solid var(--border-color);
    background: var(--color-navy-950);
    color: var(--color-gray-300);
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-8);
    padding-block: var(--space-16);
}

.footer-brand .brand {
    color: var(--color-white);
}

.footer-brand p {
    max-width: 320px;
    margin-top: var(--space-3);
    color: var(--color-gray-300);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.footer-col {
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.footer-col h2 {
    margin: 0 0 var(--space-1);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.footer-col a {
    color: var(--color-gray-300);
    font-size: var(--text-sm);
}

.footer-col a:hover {
    color: var(--color-white);
    text-decoration: none;
}

.lang-dropdown {
    position: relative;
}

.lang-dropdown summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-gray-300);
    font-size: var(--text-sm);
    font-weight: 650;
    list-style: none;
    cursor: pointer;
}

.lang-dropdown summary::-webkit-details-marker {
    display: none;
}

.lang-dropdown summary::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-left: var(--space-1);
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition-fast);
}

.lang-dropdown[open] summary::after {
    transform: rotate(-135deg);
}

.lang-dropdown summary:hover {
    color: var(--color-white);
}

.lang-dropdown__menu {
    position: absolute;
    bottom: calc(100% + var(--space-2));
    left: 0;
    z-index: 20;
    display: grid;
    gap: var(--space-1);
    min-width: 150px;
    padding: var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.lang-dropdown__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-gray-900);
    font-size: var(--text-sm);
    font-weight: 600;
}

a.lang-dropdown__option:hover {
    background: var(--color-gray-100);
    text-decoration: none;
}

.lang-dropdown__option[aria-current="true"] {
    background: var(--color-accent-50);
    color: var(--color-accent-700);
}

.lang-dropdown__option svg {
    flex-shrink: 0;
    border-radius: 2px;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-6);
    border-top: 1px solid var(--color-navy-800);
    color: var(--color-gray-500);
    font-size: var(--text-xs);
}

.footer-bottom a {
    color: var(--color-gray-300);
}

.footer-bottom a:hover {
    color: var(--color-white);
    text-decoration: none;
}

@media (max-width: 860px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}