/* ==========================================================================
   IPC 2026 — Theme Override
   --------------------------------------------------------------------------
   Loaded AFTER bootstrap.css and exam.css (see app\assets\ExamAsset).
   Purpose: re-skin the frontend with the gold / navy identity without
   touching any markup styling inside the PHP view files.

   Palette
     primary   #bf9449  gold      -> buttons, icons, accents, hero band
     secondary #2c3a4f  navy      -> footer, dark sections, headings
     cream     #faf7f2            -> page background
   All rules here are additive overrides; nothing in exam.css is deleted so
   the theme can be reverted by simply unregistering this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* typography */
    --ipc-font: 'IBM Plex Sans Arabic', 'Tajawal', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* brand */
    --ipc-gold: #bf9449;
    --ipc-gold-dark: #a8813c;
    --ipc-gold-darker: #8d6b2f;
    --ipc-gold-soft: #e8d7b4;
    --ipc-gold-tint: #f6efe3;

    --ipc-navy: #2c3a4f;
    --ipc-navy-dark: #222d3d;
    --ipc-navy-soft: #46566e;

    /* neutrals */
    --ipc-cream: #faf7f2;
    --ipc-page: #f2ede5;
    --ipc-surface: #ffffff;
    --ipc-border: #ece5da;
    --ipc-border-strong: #ddd2c2;
    --ipc-heading: #2c3a4f;
    --ipc-text: #4a4f58;
    --ipc-muted: #8b8f98;

    /* shape + depth */
    --ipc-radius-sm: .625rem;
    --ipc-radius: 1rem;
    --ipc-radius-lg: 1.5rem;
    --ipc-radius-pill: 999px;
    --ipc-shadow-sm: 0 .25rem .75rem rgba(44, 58, 79, .06);
    --ipc-shadow: 0 .75rem 2rem rgba(44, 58, 79, .09);
    --ipc-shadow-lg: 0 1.25rem 3rem rgba(44, 58, 79, .13);

    /* legacy variables consumed by exam.css — remapped to the new identity */
    --primary: #bf9449;
    --secondary: #2c3a4f;
    --light: #f6efe3;
    --dark: #222d3d;

    /* bootstrap 5 theming hooks */
    --bs-primary: #bf9449;
    --bs-primary-rgb: 191, 148, 73;
    --bs-secondary: #2c3a4f;
    --bs-secondary-rgb: 44, 58, 79;
    --bs-link-color: #a8813c;
    --bs-link-hover-color: #8d6b2f;
    --bs-body-color: #4a4f58;
    /* every bootstrap component that says font-family: var(--bs-body-font-family)
       or inherits from body picks the stack up from here */
    --bs-body-font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-border-radius: 1rem;
    --bs-border-color: #ece5da;
    --bs-focus-ring-color: rgba(191, 148, 73, .28);
}

/* --------------------------------------------------------------------------
   2. Base document
   -------------------------------------------------------------------------- */
body {
    background-color: var(--ipc-page) !important;
    color: var(--ipc-text);
    font-size: .975rem;
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
    font-family: var(--ipc-font);
}

/* RTL typography. Elements that do not inherit from body by default — form
   controls and buttons carry the UA font — are named explicitly. Icon fonts
   (.fa*, .bi*, [class*="ti-"]) are deliberately left alone. */
html[dir="rtl"] body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] .h1, html[dir="rtl"] .h2, html[dir="rtl"] .h3,
html[dir="rtl"] .h4, html[dir="rtl"] .h5, html[dir="rtl"] .h6,
html[dir="rtl"] .display-1, html[dir="rtl"] .display-2, html[dir="rtl"] .display-3,
html[dir="rtl"] .display-4, html[dir="rtl"] .display-5, html[dir="rtl"] .display-6,
html[dir="rtl"] .btn,
html[dir="rtl"] .navbar,
html[dir="rtl"] .nav-link,
html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] .modal,
html[dir="rtl"] .card,
html[dir="rtl"] .table,
html[dir="rtl"] .badge,
html[dir="rtl"] .alert,
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[dir="rtl"] .form-label,
html[dir="rtl"] .form-check-label,
html[dir="rtl"] .input-group-text,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] button {
    font-family: var(--ipc-font);
    
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ipc-heading);
    letter-spacing: 0;
}

h1, .h1, .display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
    line-height: 1.35;
}

a {
    color: var(--ipc-gold-dark);
    text-decoration: none;
    transition: color .25s ease;
}

a:hover {
    color: var(--ipc-gold-darker);
}

hr {
    border-top: 1px solid var(--ipc-border);
    opacity: 1;
}

::selection {
    background: var(--ipc-gold-soft);
    color: var(--ipc-navy-dark);
}

/* the app shell — a soft cream sheet floating over the page background */
.container-xxl.bg-white {
    background-color: var(--ipc-cream) !important;
    box-shadow: var(--ipc-shadow);
}

@media (min-width: 1200px) {
    /* no overflow:hidden here — it would clip the hero-header bloom's parent
       stacking context and, more importantly, is the kind of scrolling ancestor
       that silently disables a position:sticky navbar */
    .container-xxl.bg-white {
        border-radius: var(--ipc-radius-lg);
    }
}

/* --------------------------------------------------------------------------
   3. Utility colour remaps
   -------------------------------------------------------------------------- */
.bg-primary {
    background-color: var(--ipc-gold) !important;
}

.bg-secondary {
    background-color: var(--ipc-navy) !important;
}

.bg-light {
    background-color: var(--ipc-gold-tint) !important;
}

.bg-dark {
    background-color: var(--ipc-navy-dark) !important;
}

.text-primary {
    color: var(--ipc-gold-dark) !important;
}

.text-secondary {
    color: var(--ipc-navy) !important;
}

.text-muted {
    color: var(--ipc-muted) !important;
}

.border-primary {
    border-color: var(--ipc-gold) !important;
}

.border-secondary {
    border-color: var(--ipc-navy) !important;
}

/* keep contrast readable inside the gold hero / footer bands */
.bg-primary h1, .bg-primary h2, .bg-primary h3,
.bg-primary h4, .bg-primary h5, .bg-primary h6 {
    color: #ffffff;
}

.bg-primary .text-secondary {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-padding-y: .625rem;
    --bs-btn-padding-x: 1.5rem;
    border-radius: var(--ipc-radius-pill);
    font-weight: 700;
    letter-spacing: 0;
    border-width: 1px;
    transition: background-color .25s ease, border-color .25s ease,
    color .25s ease, box-shadow .25s ease, transform .2s ease;
}

.btn:focus,
.btn:focus-visible {
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
    outline: 0;
}

.btn-lg {
    --bs-btn-padding-y: .8rem;
    --bs-btn-padding-x: 1.9rem;
    font-size: 1rem;
}

.btn-sm {
    --bs-btn-padding-y: .375rem;
    --bs-btn-padding-x: 1rem;
}

/* gold — the main call to action */
.btn-primary,
.btn.btn-primary {
    color: #ffffff !important;
    background-color: var(--ipc-gold) !important;
    border-color: var(--ipc-gold) !important;
    box-shadow: 0 .5rem 1.25rem rgba(191, 148, 73, .28);
}

.btn-primary:hover,
.btn.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:focus,
.btn-primary:active,
.btn.btn-primary:active {
    color: #ffffff !important;
    background-color: var(--ipc-gold-dark) !important;
    border-color: var(--ipc-gold-dark) !important;
    transform: translateY(-1px);
}

.btn-primary:disabled,
.btn.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--ipc-gold-soft) !important;
    border-color: var(--ipc-gold-soft) !important;
    box-shadow: none;
}

/* navy — the secondary action */
.btn-secondary,
.btn.btn-secondary {
    color: #ffffff !important;
    background-color: var(--ipc-navy) !important;
    border-color: var(--ipc-navy) !important;
    box-shadow: 0 .5rem 1.25rem rgba(44, 58, 79, .2);
}

.btn-secondary:hover,
.btn.btn-secondary:hover,
.btn-secondary:focus,
.btn.btn-secondary:focus,
.btn-secondary:active,
.btn.btn-secondary:active {
    color: #ffffff !important;
    background-color: var(--ipc-navy-dark) !important;
    border-color: var(--ipc-navy-dark) !important;
    transform: translateY(-1px);
}

/* outline variants — used for the download / attachment links */
.btn-outline-primary {
    color: var(--ipc-gold-dark) !important;
    border-color: var(--ipc-gold) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #ffffff !important;
    background-color: var(--ipc-gold) !important;
    border-color: var(--ipc-gold) !important;
}

.btn-outline-secondary {
    color: var(--ipc-navy) !important;
    border-color: var(--ipc-border-strong) !important;
    background-color: var(--ipc-surface) !important;
    box-shadow: var(--ipc-shadow-sm);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: var(--ipc-navy-dark) !important;
    border-color: var(--ipc-gold) !important;
    background-color: var(--ipc-gold-tint) !important;
}

.btn-success {
    background-color: #2f8f6b !important;
    border-color: #2f8f6b !important;
    color: #ffffff !important;
    box-shadow: 0 .5rem 1.25rem rgba(47, 143, 107, .24);
}

.btn-success:hover,
.btn-success:focus {
    background-color: #27795a !important;
    border-color: #27795a !important;
}

/* download / attachment rows read better as wide cards than as pills */
.btn-outline-secondary.w-100,
.btn-lg.btn-outline-secondary {
    border-radius: var(--ipc-radius);
    text-align: start;
    font-weight: 600;
}

.btn-outline-secondary.w-100 i,
.btn-lg.btn-outline-secondary i {
    color: var(--ipc-gold-dark);
    margin-inline-end: .5rem;
}

/* square icon buttons keep their fixed size but pick up the new radius */
.btn-square,
.btn-sm-square,
.btn-lg-square {
    border-radius: var(--ipc-radius-sm);
}

/* back to top — the physical properties come first so the logical ones win */
.back-to-top {
    right: auto;
    left: auto;
    inset-inline-end: 45px;
    inset-inline-start: auto;
    box-shadow: var(--ipc-shadow);
}

/* --------------------------------------------------------------------------
   5. Navbar

   Behaviour, driven by .site-navbar--stuck which main.js toggles on scroll:

     < lg          in the flow, solid white, no sticking (it would cover the
                   form fields on a phone)
     >= lg         out of the flow, transparent, overlaying the gold hero
     >= lg stuck   still out of the flow but pinned to the viewport, white,
                   shadowed, tighter padding

   The navbar never re-enters the flow, so no state change reflows the page —
   that was the header jump of the previous .sticky-top approach, which also
   silently died because position:sticky is cancelled by a scrolling ancestor
   with overflow:hidden.
   -------------------------------------------------------------------------- */
.site-navbar {
    background-color: transparent;
    transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
}

/* links */
.site-navbar .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 10px;
    font-size: .95rem;
    font-weight: 700;
    text-transform: none;
    color: var(--ipc-navy) !important;
    border-bottom: 2px solid transparent;
    transition: color .25s ease, border-color .25s ease;
}

.site-navbar .navbar-nav .nav-link:hover,
.site-navbar .navbar-nav .nav-link.active,
.site-navbar .navbar-nav .show > .nav-link {
    color: var(--ipc-gold-dark) !important;
    border-bottom-color: var(--ipc-gold);
}

.site-navbar .navbar-nav .nav-link:focus-visible {
    outline: 2px solid var(--ipc-gold);
    outline-offset: 3px;
    border-radius: .25rem;
}

/* brand + competition logo — the img.  selector matches the specificity of
   exam.css's `.navbar-light .navbar-brand img`, so source order decides */
.site-navbar .navbar-brand {
    padding-block: 0;
}

.site-navbar .navbar-brand img.navbar-brand__logo {
    /* block, so the inline baseline strut does not add ~13px of phantom
       descender to the navbar's height */
    display: block;
    max-height: 78px;
    width: auto;
    transition: max-height .3s ease;
}

/* the source may now be an admin upload of any dimensions, so cap both axes */
#comp-header-logo img {
    max-height: 104px;
    max-width: 100%;
    width: auto !important;
    height: auto;
    object-fit: contain;
    transition: max-height .3s ease, opacity .3s ease;
}

/* toggler */
.site-navbar__toggler {
    border-color: var(--ipc-border-strong);
    border-radius: var(--ipc-radius-sm);
    padding: .4rem .6rem;
}

.site-navbar__toggler:focus {
    box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

/* ---- >= lg: overlay the hero, then pin on scroll ---- */
@media (min-width: 992px) {
    .site-navbar {
        position: absolute;
        top: 0;
        inset-inline: 0;
        width: 100%;
        z-index: 1030;
    }

    /* over the gold hero the links read best in white */
    .site-navbar:not(.site-navbar--stuck) .navbar-nav .nav-link {
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(34, 45, 61, .25);
    }

    .site-navbar:not(.site-navbar--stuck) .navbar-nav .nav-link:hover,
    .site-navbar:not(.site-navbar--stuck) .navbar-nav .nav-link.active,
    .site-navbar:not(.site-navbar--stuck) .navbar-nav .show > .nav-link {
        color: var(--ipc-gold-tint) !important;
        border-bottom-color: #ffffff;
    }

    .site-navbar--stuck {
        position: fixed;
        top: 0;
        background-color: var(--ipc-surface);
        box-shadow: 0 .375rem 1.5rem rgba(44, 58, 79, .12);
        padding-top: .35rem !important;
        padding-bottom: .35rem !important;
        animation: site-navbar-drop .3s ease;
    }

    /* exam.css puts 35px of vertical padding on the links, which would keep the
       bar tall no matter what the navbar's own padding says. The value also sets
       how far the dropdowns hang below their label, since the menu is anchored
       to the bottom of the <li> — 35px left a conspicuous gap. */
    .site-navbar .navbar-nav .nav-link {
        padding-block: 1.35rem;
    }

    .site-navbar--stuck .navbar-nav .nav-link {
        padding-block: .85rem;
    }

    .site-navbar--stuck .navbar-brand img.navbar-brand__logo {
        max-height: 46px;
    }

    /* the big competition logo only fits while the bar is transparent */
    .site-navbar--stuck #comp-header-logo {
        display: none !important;
    }

    /* The dropdowns open on hover (main.js), so the menu has to touch the link:
       a margin would leave a dead band that fires mouseleave before the pointer
       gets there. The breathing room comes from padding instead. */
    .site-navbar .dropdown-menu {
        padding-top: .35rem;
    }
}

@keyframes site-navbar-drop {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-navbar--stuck {
        animation: none;
    }
}

/* ---- < lg: in the flow, solid, stacked menu ---- */
@media (max-width: 991.98px) {
    .site-navbar {
        position: relative;
        background-color: var(--ipc-surface);
        box-shadow: var(--ipc-shadow-sm);
    }

    .site-navbar .navbar-collapse {
        margin-top: .75rem;
        border-top: 1px solid var(--ipc-border);
        background: var(--ipc-surface);
        border-radius: var(--ipc-radius);
        padding: .5rem 1rem;
    }

    .site-navbar .navbar-nav .nav-link {
        margin: 0;
        padding-block: .75rem;
        border-bottom: 1px solid var(--ipc-border);
    }

    .site-navbar .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: 0;
    }

    .site-navbar .navbar-brand img.navbar-brand__logo {
        max-height: 46px;
    }

    /* inside the burger menu a floating panel would be cut off, so the
       dropdowns render as an indented block instead */
    .site-navbar .dropdown-menu {
        position: static !important;
        transform: none !important;
        border: 0;
        box-shadow: none;
        background-color: var(--ipc-gold-tint);
        margin: 0 0 .5rem !important;
        padding: .35rem;
    }

    /* the stacked menu has room for the labels the desktop toggles hide */
    .site-navbar .navbar-collapse .nav-lang__name,
    .site-navbar .navbar-collapse .nav-user__name {
        display: inline !important;
    }
}

/* dropdowns */
.dropdown-menu {
    border: 1px solid var(--ipc-border);
    border-radius: var(--ipc-radius);
    box-shadow: var(--ipc-shadow);
    padding: .4rem;
    min-width: 11.5rem;
}

.site-navbar .dropdown-menu {
    margin-top: 0 !important;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    border-radius: var(--ipc-radius-sm);
    padding: .45rem .7rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ipc-navy);
}

.dropdown-item > i {
    flex: 0 0 1rem;
    font-size: .95rem;
    color: var(--ipc-gold-dark);
    transition: color .2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ipc-gold-tint);
    color: var(--ipc-gold-darker);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--ipc-gold) !important;
    color: #ffffff !important;
}

.dropdown-item.active > i,
.dropdown-item:active > i {
    color: #ffffff;
}

.dropdown-header {
    padding: .35rem .85rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ipc-muted);
}

.dropdown-divider {
    border-top-color: var(--ipc-border);
    opacity: 1;
    margin: .35rem .35rem;
}

.dropdown-menu .nav-item.nav-link {
    color: var(--ipc-navy) !important;
    margin: 0 !important;
    border-bottom: 0 !important;
}

.dropdown-menu .nav-item.nav-link:hover {
    color: var(--ipc-gold-dark) !important;
}

/* --------------------------------------------------------------------------
   5b. Language switcher
   -------------------------------------------------------------------------- */
.nav-lang,
.nav-user {
    /* the two utility items are pushed away from the page links */
    margin-inline-start: .35rem;
}

.nav-lang__toggle,
.nav-user__toggle {
    cursor: pointer;
}

/* the caret is only a hint next to a logo / avatar, so it is toned down */
.nav-lang__toggle.dropdown-toggle::after,
.nav-user__toggle.dropdown-toggle::after {
    margin-inline-start: .35rem;
    opacity: .55;
}

.nav-lang__logo {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--ipc-surface);
    border: 1px solid var(--ipc-border-strong);
    box-shadow: 0 .125rem .375rem rgba(44, 58, 79, .12);
}

/* lettered stand-in for a language with no logo uploaded */
.nav-lang__logo--text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .55rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    color: var(--ipc-gold-darker);
    background-color: var(--ipc-gold-tint);
    border-color: var(--ipc-gold-soft);
}

.nav-lang__name {
    white-space: nowrap;
}

.nav-lang__menu {
    min-width: 10.5rem;
}

.nav-lang__menu .dropdown-item {
    padding-inline-start: .6rem;
}

/* the hero repeats the switcher below lg, where it is a real button.
   Flex rather than the old .float-end, so the menu below it cannot escape its
   container. */
.hero-lang {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: .5rem;
}

.hero-lang .nav-lang__toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.hero-lang .nav-lang__logo {
    border-color: rgba(255, 255, 255, .5);
}

/* .hero-header clips its decorative bloom with overflow:hidden, which would
   also cut off a floating menu opened near the bottom of the band — so this one
   stays in the flow and pushes the hero open instead */
.hero-lang .dropdown-menu {
    position: static !important;
    transform: none !important;
    margin-top: .5rem !important;
}

/* --------------------------------------------------------------------------
   5c. Account menu
   -------------------------------------------------------------------------- */
.nav-user__menu {
    min-width: 13.5rem;
}

.nav-user__avatar {
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .75);
    box-shadow: 0 .125rem .375rem rgba(44, 58, 79, .16);
}

.nav-user__avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    background: linear-gradient(135deg, var(--ipc-gold) 0%, var(--ipc-gold-darker) 100%);
    text-shadow: none;
}

.nav-user__name {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* name + role block pinned to the top of the menu */
.nav-user__card {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .75rem .75rem;
    margin-bottom: .25rem;
 
}

.nav-user__card .nav-user__avatar {
    width: 2.1rem;
    height: 2.1rem;
    font-size: .9rem;
    border-color: var(--ipc-gold-soft);
}

.nav-user__card-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.4;
}

.nav-user__card-name {
    font-weight: 800;
    color: var(--ipc-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-user__card-role {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ipc-gold-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-user__logout,
.nav-user__logout > i {
    color: #c2384a !important;
}

.nav-user__logout:hover,
.nav-user__logout:focus {
    background-color: #fdf0f1 !important;
    color: #96222f !important;
}

.nav-user__logout:hover > i,
.nav-user__logout:focus > i {
    color: #96222f !important;
}

/* --------------------------------------------------------------------------
   6. Hero header
   -------------------------------------------------------------------------- */
.hero-header {
    background: linear-gradient(135deg, var(--ipc-gold) 0%, var(--ipc-gold-dark) 55%, var(--ipc-gold-darker) 100%) !important;
    position: relative;
    overflow: hidden;
    /*border-bottom-left-radius: var(--ipc-radius-lg);
    border-bottom-right-radius: var(--ipc-radius-lg);*/
}

/* soft light bloom, echoing the curved highlight in the reference design */
.hero-header::after {
    content: "";
    position: absolute;
    inset-inline-end: -12%;
    top: -45%;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.hero-header > .container {
    position: relative;
    z-index: 1;
}

.hero-header h1,
.hero-header .display-6 {
    color: #ffffff !important;
    font-weight: 800;
    text-shadow: 0 .125rem .5rem rgba(34, 45, 61, .18);
}

.hero-header .text-secondary {
    color: #ffffff !important;
}

.header-bg {
    min-height: 210px !important;
    background-size: contain !important;
}

/* --------------------------------------------------------------------------
   7. Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumb {
    --bs-breadcrumb-divider: "";
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--ipc-radius-pill);
    padding: .45rem 1.1rem;
    display: inline-flex;
    flex-wrap: wrap;
    backdrop-filter: blur(2px);
    margin-bottom: 0;
}

.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item.active {
    color: #ffffff !important;
    font-size: .875rem;
    font-weight: 600;
}

.breadcrumb-item a:hover {
    color: var(--ipc-gold-tint) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "\2022";
    color: rgba(255, 255, 255, .7);
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "\2022";
    color: rgba(255, 255, 255, .7);
    float: none;
    padding-inline-end: .5rem;
    padding-inline-start: 0;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::after {
    content: none;
}

/* --------------------------------------------------------------------------
   8. Content cards
   -------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--ipc-border);
    border-radius: var(--ipc-radius);
    background-color: var(--ipc-surface);
    box-shadow: var(--ipc-shadow-sm);
    transition: box-shadow .3s ease, transform .3s ease;
}

.card:hover {
    box-shadow: var(--ipc-shadow);
    transform: translateY(-2px);
}

.card-header {
    background-color: var(--ipc-gold-tint);
    border-bottom: 1px solid var(--ipc-border);
    font-weight: 700;
    color: var(--ipc-navy);
}

/* The terms, form and result blocks become white cards.
   .exam-box / .questions-index are kept only because the 2023 and 2024 themes
   still render them; this theme uses .exam-page and .question-card (section 19)
   and the shared .answer-review markup. */
.exam-box,
.questions-index,
.site-login,
.form-card,
.result-card {
    background-color: var(--ipc-surface);
    border: 1px solid var(--ipc-border);
    border-radius: var(--ipc-radius-lg);
    box-shadow: var(--ipc-shadow);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

/* forms sit in a grid, so the card padding has to survive the negative
   gutters that .row applies inside it */
.form-card > form > .row,
.form-card > .row {
    margin-inline: 0;
}

.form-card h2 {
    width: 100%;
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: .35rem;
}

.form-card hr {
    width: 100%;
    border-top: 2px solid var(--ipc-gold-soft);
    margin: .35rem 0 1.25rem;
}

.form-card .form-group:last-child {
    margin-bottom: 0;
    margin-top: .5rem;
}

/* pass / fail summary */
.result-card {
    padding: 2.5rem 1.75rem;
}

.result-card img {
    max-width: 140px;
    height: auto;
}

.result-card h3 {
    font-weight: 800;
}

.result-card h4 {
    color: var(--ipc-muted);
    font-size: 1.05rem;
    margin-bottom: 0;
}

/* landing page CTA row */
.exam-actions {
    margin-bottom: .5rem;
}

/* answer review list on the result page (site/correct.php).
   The exam page's own list is styled in section 19 — do not add a
   `.question-list > li` rule here, it would outrank `.question-card`. */
.answer-list > li {
    background-color: var(--ipc-cream);
    border: 1px solid var(--ipc-border);
    border-radius: var(--ipc-radius);
    padding: 1.15rem 1.25rem;
    margin-bottom: 1rem !important;
}

.exam-box hr {
    border-top: 2px solid var(--ipc-gold-soft);
    margin: 1.25rem 0 1.75rem;
}

.exam-box h2,
.exam-box h3 {
    font-size: 1.15rem;
    font-weight: 700;
}

.exam-box ul,
.exam-box ol {
    padding-inline-start: 0;
}

/* terms list on the landing page — checklist styling instead of raw bullets */
.exam-terms {
    background-color: var(--ipc-surface);
    border: 1px solid var(--ipc-border);
    border-radius: var(--ipc-radius-lg);
    box-shadow: var(--ipc-shadow);
    padding: 1.75rem;
}

.exam-terms h2 {
    font-size: 1.35rem;
    font-weight: 800;
    padding-bottom: .85rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--ipc-gold-soft);
}

.exam-terms ul {
    list-style: none;
    padding-inline-start: 0;
    margin-bottom: 0;
}

.exam-terms ul > li {
    position: relative;
    padding-inline-start: 1.75rem;
    padding-block: .4rem;
    border-bottom: 1px dashed var(--ipc-border);
}

.exam-terms ul > li:last-child {
    border-bottom: 0;
}

.exam-terms ul > li::before {
    content: "\2713";
    position: absolute;
    inset-inline-start: 0;
    top: .45rem;
    width: 1.15rem;
    height: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    color: #ffffff;
    background: var(--ipc-gold);
    border-radius: 50%;
}

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */
.form-label,
label:not(.modal-radio):not(.form-check-label) {
    font-weight: 700;
    color: var(--ipc-navy);
    margin-bottom: .35rem;
}

.form-control,
.form-select {
    border: 1px solid var(--ipc-border-strong);
    border-radius: var(--ipc-radius-sm);
    padding: .7rem .95rem;
    background-color: var(--ipc-surface);
    color: var(--ipc-text);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ipc-gold);
    box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

.form-control::placeholder {
    color: var(--ipc-muted);
}

.form-group {
    margin-bottom: 1.1rem;
}

.input-group-text {
    background-color: var(--ipc-gold-tint);
    border-color: var(--ipc-border-strong);
    color: var(--ipc-gold-darker);
}

.help-block {
    font-size: .825rem;
    color: #c2384a;
}

.has-error input,
.has-error select,
.has-error .form-control,
.has-error .form-select {
    border-color: #c2384a !important;
}

.has-success input,
.has-success select,
.has-success .form-control,
.has-success .form-select {
    border-color: #2f8f6b !important;
}

/* radio answers in the exam — each option is a selectable tile */
.form-check-input:checked {
    background-color: var(--ipc-gold);
    border-color: var(--ipc-gold);
}

.form-check-input:focus {
    border-color: var(--ipc-gold);
    box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

label.modal-radio {
    width: 100%;
    margin: 0;
    padding: .7rem 1rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--ipc-text);
    background-color: var(--ipc-cream);
    border: 1px solid var(--ipc-border);
    border-radius: var(--ipc-radius-sm);
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

label.modal-radio:hover {
    border-color: var(--ipc-gold);
    background-color: var(--ipc-gold-tint);
}

label.modal-radio:has(input:checked) {
    border-color: var(--ipc-gold);
    background-color: var(--ipc-gold-tint);
    color: var(--ipc-gold-darker);
    box-shadow: 0 0 0 .15rem var(--bs-focus-ring-color);
}

label.modal-radio input[type="radio"] {
    accent-color: var(--ipc-gold);
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   10. Alerts
   -------------------------------------------------------------------------- */
.alert {
    border: 1px solid transparent;
    border-inline-start-width: .3rem;
    border-radius: var(--ipc-radius);
    box-shadow: var(--ipc-shadow-sm);
    padding: 1rem 1.15rem;
}

.alert-info {
    background-color: var(--ipc-gold-tint);
    border-color: var(--ipc-gold-soft);
    border-inline-start-color: var(--ipc-gold);
    color: var(--ipc-gold-darker);
}

.alert-warning {
    background-color: #fdf6e6;
    border-color: #f2e0b5;
    border-inline-start-color: #d9a326;
    color: #8a6410;
}

.alert-success {
    background-color: #edf7f2;
    border-color: #c6e5d8;
    border-inline-start-color: #2f8f6b;
    color: #1f6b4f;
}

.alert-danger {
    background-color: #fdf0f1;
    border-color: #f3ccd1;
    border-inline-start-color: #c2384a;
    color: #96222f;
}

/* --------------------------------------------------------------------------
   11. Progress + result states
   -------------------------------------------------------------------------- */
.progress {
    height: .85rem;
    background-color: var(--ipc-border);
    border-radius: var(--ipc-radius-pill);
    overflow: hidden;
}

.progress-bar {
    background-color: var(--ipc-gold);
    font-size: .7rem;
    font-weight: 700;
}

.progress-bar.bg-success {
    background-color: #2f8f6b !important;
}

.progress-bar.bg-danger {
    background-color: #c2384a !important;
}

.text-success {
    color: #2f8f6b !important;
}

.text-danger {
    color: #c2384a !important;
}

/* --------------------------------------------------------------------------
   12. Tables + pagination (admin-ish views rendered on the frontend)
   -------------------------------------------------------------------------- */
.table {
    --bs-table-bg: var(--ipc-surface);
    border-color: var(--ipc-border);
    margin-bottom: 0;
}

.table > thead {
    background-color: var(--ipc-gold-tint);
}

.table > thead th {
    color: var(--ipc-navy);
    font-weight: 700;
    border-bottom-color: var(--ipc-border-strong);
    white-space: nowrap;
}

.table > tbody > tr:hover > * {
    background-color: var(--ipc-gold-tint);
}

.pagination {
    --bs-pagination-color: var(--ipc-navy);
    --bs-pagination-active-bg: var(--ipc-gold);
    --bs-pagination-active-border-color: var(--ipc-gold);
    --bs-pagination-hover-bg: var(--ipc-gold-tint);
    --bs-pagination-hover-color: var(--ipc-gold-darker);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
    --bs-pagination-border-color: var(--ipc-border);
    gap: .25rem;
}

.pagination .page-link {
    border-radius: var(--ipc-radius-sm);
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.footer {
    background-color: var(--ipc-navy) !important;
    color: rgba(255, 255, 255, .78) !important;
    margin-top: 3rem !important;
    padding-top: 1rem;
    position: relative;
}

/* thin gold rule sitting on top of the navy footer */
.footer::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ipc-gold-darker), var(--ipc-gold), var(--ipc-gold-soft));
}

.footer.text-secondary,
.footer .text-secondary {
    color: rgba(255, 255, 255, .78) !important;
}

.footer b,
.footer strong {
    color: #ffffff;
}

.footer a {
    color: rgba(255, 255, 255, .82);
}

.footer a:hover {
    color: var(--ipc-gold-soft);
}

/* ---- upper band: brand / links / partner ---- */
.footer__top {
    padding: 2.5rem 0 1.75rem;
}

.footer__brand {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.footer__logo {
    max-height: 76px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    align-self: flex-start;
}

.footer__tagline {
    margin-bottom: 0;
    max-width: 24rem;
    font-size: .9rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .62);
}

.footer__heading {
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.footer__links {
    margin-bottom: 0;
}

.footer__links li + li {
    margin-top: .5rem;
}

.footer__links a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .92rem;
    font-weight: 600;
    transition: color .25s ease, padding-inline-start .25s ease;
}

.footer__links a > i {
    font-size: .95rem;
    color: var(--ipc-gold-soft);
    transition: color .25s ease;
}

.footer__links a:hover {
    padding-inline-start: .25rem;
}

.footer__links a:hover > i {
    color: #ffffff;
}

/* the partner mark is a dark PNG, so it is knocked out to white to sit on navy */
.footer__partner {
    display: inline-flex;
    align-items: center;
    padding: .65rem 1rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--ipc-radius);
    transition: background-color .25s ease, border-color .25s ease;
}

.footer__partner:hover {
    background: rgba(255, 255, 255, .1);
    border-color: var(--ipc-gold-soft);
}

.footer__partner img {
    max-height: 46px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .85;
    transition: opacity .25s ease;
}

.footer__partner:hover img {
    opacity: 1;
}

/* ---- lower band: legal line ---- */
.footer .copyright {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 1.25rem 0;
}

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem .6rem;
    font-size: .85rem;
    text-align: center;
}

@media (max-width: 991.98px) {
    .footer__top {
        padding: 2rem 0 1.25rem;
    }

    .footer__logo {
        max-height: 62px;
    }
}

@media (max-width: 575.98px) {
    .footer__brand {
        align-items: center;
        text-align: center;
    }

    .footer__logo {
        align-self: center;
    }

    .footer__heading {
        margin-bottom: .75rem;
    }
}

/* --------------------------------------------------------------------------
   14. Decorative pattern band
   -------------------------------------------------------------------------- */
/*
   Decorative pattern on the hero band and the footer — both already carry
   .bg-primary, so the artwork has to sit over that gold without tinting the
   content above it. Hence a ::before layer rather than the element's own
   background.

   Recolouring, without touching the source file: ramadan-pattern.svg is drawn
   as #E6E6E6 on an opaque white ground — only ~10% contrast, and the wrong way
   round for us. invert(1) flips it to a near-black ground with a very dark
   pattern; brightness(10) then multiplies that 10% difference up to a near-white
   pattern while the ground, being 0, stays black. mix-blend-mode: screen finally
   drops the black entirely (screening with black is a no-op) and lets only the
   pattern lighten the gold. Net effect: a white pattern, from a grey source,
   with no image editing.
*/
.bg-pattern {
    position: relative;
    isolation: isolate;
}

.bg-pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url('../img/ramadan-pattern.svg');
    background-size: 900px auto;
    background-repeat: repeat;
    background-position: center;
    filter: invert(1) brightness(10);
    mix-blend-mode: screen;
    /* the one knob worth touching: raise for a bolder pattern */
    opacity: .16;
}

@media (max-width: 767.98px) {
    .bg-pattern::before {
        background-size: 520px auto;
    }
}

@media print {
    .bg-pattern::before {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   15. Spinner
   -------------------------------------------------------------------------- */
#spinner {
    background-color: var(--ipc-cream) !important;
}

#spinner .spinner-border {
    color: var(--ipc-gold) !important;
    border-width: .25rem;
}

/* replaces the inline width/height that used to sit on the spinner markup */
.spinner-border.spinner-brand {
    width: 3rem;
    height: 3rem;
}

/* --------------------------------------------------------------------------
   16. RTL nudges
   -------------------------------------------------------------------------- */
html[dir="rtl"] .float-end {
    float: left !important;
}

/* .text-lg-start only flips from lg up, otherwise it would beat .text-center
   and left-align the hero title on phones */
@media (min-width: 992px) {
    html[dir="rtl"] .text-lg-start {
        text-align: right !important;
    }
}

html[dir="rtl"] .me-2 {
    margin-right: 0 !important;
    margin-left: .5rem !important;
}

html[dir="rtl"] .ms-2 {
    margin-left: 0 !important;
    margin-right: .5rem !important;
}

html[dir="rtl"] .header-bg {
    background-position: top left !important;
}

/* --------------------------------------------------------------------------
   17. Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .exam-box,
    .exam-terms,
    .site-login,
    .form-card,
    .result-card {
        padding: 1.15rem;
        border-radius: var(--ipc-radius);
    }

    .answer-list > li {
        padding: .9rem 1rem;
    }

    .hero-header {
        border-bottom-left-radius: var(--ipc-radius);
        border-bottom-right-radius: var(--ipc-radius);
    }

    .footer .footer-menu a {
        padding: .25rem .65rem;
    }

    .back-to-top {
        inset-inline-end: 20px;
        bottom: 20px;
    }
}

/* --------------------------------------------------------------------------
   19. Exam page (site/exam.php + js/exam.js)
   -------------------------------------------------------------------------- */
.exam-page {
    padding-bottom: 1rem;
}

/* ---- sticky bar: countdown + progress ---- */
.exam-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    /* the pinned navbar (z-index 1030) owns the top of the viewport from lg up,
       so the bar has to stop below it — see the media query further down */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.25rem;
    margin-bottom: 1.5rem;
    padding: .85rem 1.25rem;
    background-color: var(--ipc-surface);
    border: 1px solid var(--ipc-border);
    border-radius: var(--ipc-radius);
    box-shadow: var(--ipc-shadow);
}

.exam-bar__timer {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--ipc-navy);
}

.exam-bar__timer > i {
    font-size: 1.15rem;
    color: var(--ipc-gold-dark);
}

.exam-bar__timer-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--ipc-muted);
}

.exam-bar__clock {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    color: var(--ipc-navy);
}

.exam-bar__timer--expired > i,
.exam-bar__timer--expired .exam-bar__clock {
    color: #c2384a;
}

.exam-bar__progress {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 1 1 14rem;
    min-width: 0;
}

.exam-bar__progress .progress {
    flex: 1 1 auto;
    height: .6rem;
}

.exam-bar__count {
    flex: 0 0 auto;
    font-size: .82rem;
    font-weight: 700;
    color: var(--ipc-gold-darker);
    white-space: nowrap;
}

/* ---- question cards ---- */
.exam-page .question-list {
    counter-reset: none;
    padding-inline-start: 0;
    margin-bottom: 0;
}

.question-card {
    position: relative;
    background-color: var(--ipc-surface);
    border: 1px solid var(--ipc-border);
    border-inline-start: 4px solid var(--ipc-border-strong);
    border-radius: var(--ipc-radius);
    box-shadow: var(--ipc-shadow-sm);
    padding: 1.25rem;
    margin-bottom: 1.25rem !important;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.question-card--answered {
    border-inline-start-color: #2f8f6b;
}

.question-card--flash {
    border-color: var(--ipc-gold);
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

.question-card__head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1rem;
}

.question-card__index {
    flex: 0 0 1.85rem;
    height: 1.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, var(--ipc-gold) 0%, var(--ipc-gold-darker) 100%);
    border-radius: 50%;
}

.question-card__title {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.6;
}

.question-card__meta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.question-card__point {
    padding: .2rem .7rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--ipc-gold-darker);
    background-color: var(--ipc-gold-tint);
    border: 1px solid var(--ipc-gold-soft);
    border-radius: var(--ipc-radius-pill);
    white-space: nowrap;
}

/* the tick only appears once the question has an answer */
.question-card__tick {
    font-size: 1.15rem;
    color: #2f8f6b;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .25s ease, transform .25s ease;
}

.question-card--answered .question-card__tick {
    opacity: 1;
    transform: scale(1);
}

.question-card__options {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-inline-start: 0;
    margin-bottom: 0;
}

/* bootstrap5\ActiveField wraps each field in .mb-3, which would add a full
   rem of dead space at the bottom of every card */
.question-card > .mb-3 {
    margin-bottom: 0 !important;
}

/* the Tamil face is bound to .exam-box in exam.css; the pages that need it now
   are the exam sheet and the shared answer review */
html[lang=ta] .exam-page,
html[lang=ta] .answer-review,
html[lang=ta] .exam-result {
    font-family: 'TamilFont', sans-serif;
}

.question-card__option-text {
    margin-inline-start: .65rem;
}

/* ---- submit row ---- */
.exam-actions-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding: 1.15rem 1.25rem;
    background-color: var(--ipc-gold-tint);
    border: 1px solid var(--ipc-gold-soft);
    border-radius: var(--ipc-radius);
}

.exam-actions-bar__hint {
    margin-bottom: 0;
    font-size: .9rem;
    font-weight: 600;
    color: #1f6b4f;
}

.exam-actions-bar__hint.is-incomplete {
    color: #96222f;
}

.exam-actions-bar__submit {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* --------------------------------------------------------------------------
   20. Review dialog
   -------------------------------------------------------------------------- */
.exam-review .modal-content {
    border: 0;
    border-radius: var(--ipc-radius-lg);
    box-shadow: var(--ipc-shadow-lg);
    overflow: hidden;
}

.exam-review .modal-header {
    background-color: var(--ipc-gold-tint);
    border-bottom: 1px solid var(--ipc-gold-soft);
}

.exam-review .modal-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.05rem;
    font-weight: 800;
}

.exam-review .modal-title > i {
    color: var(--ipc-gold-dark);
}

.exam-review .modal-footer {
    background-color: var(--ipc-cream);
    border-top: 1px solid var(--ipc-border);
    gap: .5rem;
}

.exam-review .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.exam-review__summary {
    margin-bottom: 1rem;
    font-weight: 700;
}

.exam-review__list {
    padding-inline-start: 0;
    margin-bottom: 0;
}

.exam-review__item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 0;
    border-bottom: 1px dashed var(--ipc-border);
}

.exam-review__item:last-child {
    border-bottom: 0;
}

.exam-review__index {
    flex: 0 0 1.7rem;
    height: 1.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 800;
    color: var(--ipc-gold-darker);
    background-color: var(--ipc-gold-tint);
    border: 1px solid var(--ipc-gold-soft);
    border-radius: 50%;
}

.exam-review__body {
    flex: 1 1 auto;
    min-width: 0;
}

.exam-review__question {
    margin-bottom: .2rem;
    font-weight: 700;
    color: var(--ipc-navy);
}

.exam-review__answer {
    margin-bottom: 0;
    font-size: .9rem;
    color: #1f6b4f;
}

.exam-review__jump {
    flex: 0 0 auto;
    align-self: center;
}

.exam-review__item--missing .exam-review__index {
    color: #ffffff;
    background-color: #c2384a;
    border-color: #c2384a;
}

.exam-review__item--missing .exam-review__answer {
    color: #96222f;
    font-weight: 700;
}

/* clear the pinned navbar */
@media (min-width: 992px) {
    .exam-bar {
        top: 4.25rem;
    }
}

@media (max-width: 575.98px) {
    .exam-bar {
        gap: .5rem;
    }

    .exam-bar__timer-label {
        display: none;
    }

    .question-card__head {
        flex-wrap: wrap;
    }

    .question-card__meta {
        width: 100%;
        justify-content: space-between;
        padding-inline-start: 2.6rem;
    }

    .exam-actions-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .exam-review__item {
        flex-wrap: wrap;
    }

    .exam-review__jump {
        margin-inline-start: 2.45rem;
    }
}

/* --------------------------------------------------------------------------
   21. Error page (site/error.php)
   -------------------------------------------------------------------------- */
.error-card {
    position: relative;
    overflow: hidden;
    padding: 3rem 1.75rem 2.25rem;
    margin-bottom: 1.5rem;
    text-align: center;
    background-color: var(--ipc-surface);
    border: 1px solid var(--ipc-border);
    border-radius: var(--ipc-radius-lg);
    box-shadow: var(--ipc-shadow);
}

/* a soft wash behind the icon, tinted per status family */
.error-card::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 7.5rem;
    background: linear-gradient(180deg, var(--ipc-gold-tint) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.error-card.is-denied::before {
    background: linear-gradient(180deg, #fdf6e6 0%, rgba(255, 255, 255, 0) 100%);
}

.error-card.is-broken::before {
    background: linear-gradient(180deg, #fdf0f1 0%, rgba(255, 255, 255, 0) 100%);
}

/* 503, maintenance mode from /settings — deliberately calm rather than alarming:
   nothing is broken, the site was switched off on purpose */
.error-card.is-waiting::before {
    background: linear-gradient(180deg, #eaf2fb 0%, rgba(255, 255, 255, 0) 100%);
}

.error-card__badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1rem;
    font-size: 2rem;
    color: #ffffff;
    background: linear-gradient(135deg, var(--ipc-gold) 0%, var(--ipc-gold-darker) 100%);
    border-radius: 50%;
    box-shadow: 0 .75rem 1.5rem rgba(191, 148, 73, .3);
}

.error-card.is-denied .error-card__badge {
    background: linear-gradient(135deg, #d9a326 0%, #a97c12 100%);
    box-shadow: 0 .75rem 1.5rem rgba(217, 163, 38, .28);
}

.error-card.is-broken .error-card__badge {
    background: linear-gradient(135deg, #c2384a 0%, #96222f 100%);
    box-shadow: 0 .75rem 1.5rem rgba(194, 56, 74, .28);
}

.error-card.is-waiting .error-card__badge {
    background: linear-gradient(135deg, #4a7fb5 0%, #2f5580 100%);
    box-shadow: 0 .75rem 1.5rem rgba(74, 127, 181, .28);
}

/* the status number sits behind the heading as a watermark */
.error-card__status {
    position: relative;
    margin: 0 0 -1.35rem;
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ipc-border);
    letter-spacing: .02em;
    user-select: none;
}

.error-card__title {
    position: relative;
    margin-bottom: .75rem;
    font-size: 1.4rem;
    font-weight: 800;
}

.error-card__message {
    max-width: 34rem;
    margin: 0 auto .5rem;
    font-weight: 600;
    color: #96222f;
}

.error-card.is-missing .error-card__message {
    color: var(--ipc-navy);
}

.error-card__hint {
    max-width: 34rem;
    margin: 0 auto 1.75rem;
    font-size: .925rem;
    color: var(--ipc-muted);
}

.error-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .65rem;
}

.error-card__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.error-card__reference {
    margin: 1.75rem 0 0;
    font-size: .775rem;
    color: var(--ipc-muted);
}

.error-card__reference code {
    color: var(--ipc-gold-darker);
    background-color: var(--ipc-gold-tint);
    border: 1px solid var(--ipc-gold-soft);
    border-radius: var(--ipc-radius-sm);
    padding: .1rem .45rem;
}

@media (max-width: 575.98px) {
    .error-card {
        padding: 2.25rem 1.15rem 1.75rem;
        border-radius: var(--ipc-radius);
    }

    .error-card__status {
        font-size: 3.25rem;
        margin-bottom: -1rem;
    }

    .error-card__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   22. Landing page exam list + countdown (views/partials/_exam-countdowns.php)

   The partial is shared by every theme and ships no decoration of its own, so
   everything the list looks like is here. Two things drive the design:

   - The countdown is the reason the list exists. It gets the gold, the weight
     and the only animation on the page; the title and dates stay quiet around
     it.
   - The digits change every second, so they must not move the layout. Fixed
     tile widths and tabular figures keep the row still while the numbers run.
   -------------------------------------------------------------------------- */
.exam-list {
    margin-block: 2rem 1.5rem;
}

.exam-list__title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ipc-heading);
    text-align: center;
    margin-bottom: 1.25rem;
}

/* the short gold rule under the heading, as on .exam-terms */
.exam-list__title::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 3px;
    margin: .6rem auto 0;
    border-radius: var(--ipc-radius-pill);
    background: var(--ipc-gold);
}

.exam-list__items {
    list-style: none;
    padding-inline-start: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.exam-card {
    position: relative;
    overflow: hidden;
    background-color: var(--ipc-surface);
    border: 1px solid var(--ipc-border);
    border-radius: var(--ipc-radius-lg);
    box-shadow: var(--ipc-shadow-sm);
    padding: 1.5rem 1.75rem;
    transition: box-shadow .25s ease, transform .2s ease, border-color .25s ease;
}

/* gold spine on the reading edge — the same accent the hero and the buttons use */
.exam-card::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--ipc-gold), var(--ipc-gold-darker));
}

.exam-card:hover {
    box-shadow: var(--ipc-shadow);
    border-color: var(--ipc-gold-soft);
    transform: translateY(-2px);
}

/* a rehearsal is not the live paper, and should not look like it */
.exam-card--preview {
    background-color: var(--ipc-gold-tint);
    border-style: dashed;
    border-color: var(--ipc-gold-soft);
}

.exam-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.exam-card__title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ipc-heading);
    margin-bottom: 0;
}

.exam-card__badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--ipc-navy-dark);
    background: var(--ipc-gold-soft);
    border-radius: var(--ipc-radius-pill);
    padding: .2rem .7rem;
}

.exam-card__meta {
    list-style: none;
    padding-inline-start: 0;
    margin-bottom: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    font-size: .85rem;
    color: var(--ipc-muted);
}

.exam-card__meta li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.exam-card__meta i {
    color: var(--ipc-gold);
}

/* ---- the countdown ---- */
.exam-countdown__label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--ipc-navy-soft);
    margin-bottom: .5rem;
}

.exam-countdown__label i {
    color: var(--ipc-gold);
}

.exam-countdown__clock {
    display: flex;
    gap: .5rem;
}

.exam-countdown__unit {
    flex: 0 0 auto;
    min-width: 4rem;
    text-align: center;
    padding: .5rem .25rem .4rem;
    background: var(--ipc-gold-tint);
    border: 1px solid var(--ipc-gold-soft);
    border-radius: var(--ipc-radius-sm);
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.exam-countdown__value {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ipc-heading);
}

.exam-countdown__caption {
    display: block;
    margin-top: .2rem;
    font-size: .7rem;
    color: var(--ipc-muted);
}

/* the last hour: the tiles fill in, and the seconds tick visibly */
.exam-countdown.is-urgent .exam-countdown__unit {
    background: var(--ipc-gold);
    border-color: var(--ipc-gold-dark);
}

.exam-countdown.is-urgent .exam-countdown__value,
.exam-countdown.is-urgent .exam-countdown__caption {
    color: #ffffff;
}

.exam-countdown.is-urgent .exam-countdown__unit:last-child {
    animation: ipc-tick 1s ease-in-out infinite;
}

@keyframes ipc-tick {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* someone who prefers less motion still gets the colour change */
@media (prefers-reduced-motion: reduce) {
    .exam-card,
    .exam-countdown__unit {
        transition: none;
    }

    .exam-countdown.is-urgent .exam-countdown__unit:last-child {
        animation: none;
    }
}

.exam-countdown__over {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--ipc-muted);
    background: var(--ipc-page);
    border: 1px solid var(--ipc-border-strong);
    border-radius: var(--ipc-radius-pill);
    padding: .35rem .9rem;
}

@media (max-width: 575.98px) {
    .exam-card {
        padding: 1.15rem;
        border-radius: var(--ipc-radius);
    }

    .exam-countdown__clock {
        gap: .35rem;
    }

    .exam-countdown__unit {
        flex: 1 1 0;
        min-width: 0;
    }

    .exam-countdown__value {
        font-size: 1.25rem;
    }
}

/* --------------------------------------------------------------------------
   23. Print
   -------------------------------------------------------------------------- */
@media print {
    .navbar, .footer, .back-to-top, #spinner, .hero-header,
    .exam-bar, .exam-actions-bar, .exam-review {
        display: none !important;
    }

    .exam-box, .exam-terms, .form-card, .result-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    /* a countdown on paper is a number that was already wrong when it printed */
    .exam-countdown {
        display: none !important;
    }

    .exam-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}