/*
 * Manchester Exam — central site theme (approved Aurora + lavender tabs).
 * Edit this file for page/button colours, frame/title appearance, footer and navbar.
 * site-theme.js handles scroll state only; shared components consume these tokens.
 * The live player shares the page, frame and navbar theme; generated PDFs keep
 * their separately versioned presentation.
 */
:root, .cexam-appearance-preview {
    /* Approved Royal Lavender buttons. This is the only palette/gradient source;
     * shared and page-specific actions consume these tokens, including hover.
     * A 100%-wide horizontal gradient remains visible on short buttons. */
    --cexam-ui-blue-a: #2c52aa;
    --cexam-ui-blue-b: #4564be;
    --cexam-ui-blue-c: #6961b4;
    --cexam-ui-blue-angle: 90deg;
    --cexam-ui-blue-midpoint: 46%;
    --cexam-ui-blue-background: linear-gradient(var(--cexam-ui-blue-angle), var(--cexam-ui-blue-a) 0%, var(--cexam-ui-blue-b) var(--cexam-ui-blue-midpoint), var(--cexam-ui-blue-c) 100%);
    --cexam-ui-blue-ink: #fff;
    --cexam-ui-blue-border: #485aa6;
    --cexam-ui-blue-focus: rgb(69 100 190 / 35%);
    --cexam-ui-blue-shadow: 0 8px 18px rgb(40 79 157 / 15%), inset 0 1px 0 rgb(255 255 255 / 22%);
    --cexam-ui-blue-hover-shadow: 0 12px 24px rgb(40 79 157 / 22%), inset 0 1px 0 rgb(255 255 255 / 28%);
    --cexam-ui-blue-active-shadow: inset 0 2px 5px rgb(18 56 101 / 13%);

    --cexam-page-base: #f9fcff;
    --cexam-page-ink: #213b56;
    --cexam-page-background:
        radial-gradient(ellipse at 5% 15%, var(--cexam-page-wash-a, #e4f3fa) 0, transparent 55%),
        radial-gradient(ellipse at 95% min(36vh, 360px), var(--cexam-page-wash-b, #ece7fa) 0, transparent 60%);
    --cexam-navbar-scrolled: #f6f9fe;
    --cexam-navbar-border: rgb(112 98 174 / 14%);
    --cexam-navbar-scrolled-border: rgb(112 98 174 / 20%);
    --cexam-navbar-scrolled-shadow: 0 4px 18px rgb(43 60 108 / 5%);
    --cexam-navbar-transition: .42s ease;
    --cexam-frame-border: #7062ae;
    --cexam-frame-background: rgb(255 255 255 / 85%);
    --cexam-frame-radius: 18px;
    --cexam-frame-rail: rgb(189 180 220 / 38%);
    --cexam-frame-padding: 70px 32px 55px;
    --cexam-frame-corner-size: 67px;
    --cexam-page-gutter: 10px;
    --cexam-frame-container-max: 100%;
    --cexam-title-colour: #3b3b84;
    --cexam-title-size: 25px;
    --cexam-title-ornament-size: 235px;
    --cexam-footer-link: #365b86;
    --cexam-footer-link-hover: #2b227d;
    --cexam-footer-rule: linear-gradient(90deg, transparent, #aba4ce 20%, #9dcbdc 80%, transparent);
    --cexam-footer-bottom-background: rgb(255 255 255 / 25%);
    --cexam-footer-bottom-border: rgb(112 98 174 / 16%);
    --cexam-footer-bottom-ink: #4d6480;

    /* Approved option 3: blue lavender. Used by every primary tab-bar group. */
    --cexam-primary-nav-background: linear-gradient(135deg, var(--cexam-nav-a, #daeaff) 0%, var(--cexam-nav-b, #b9d2fa) 58%, var(--cexam-nav-c, #ddd8fb) 100%);
    --cexam-primary-nav-border: #b0b9e3;
    --cexam-primary-nav-shadow: 0 8px 22px #24577a0d;
    --cexam-primary-nav-text: #245b87;
    --cexam-primary-nav-active-text: #075f9e;
    --cexam-primary-nav-label-weight: 700;
    --cexam-primary-nav-link-weight: 650;
    --cexam-primary-nav-link-background: #ffffff40;
    --cexam-primary-nav-link-border: #ffffffaa;
    --cexam-primary-nav-link-shadow: inset 0 1px 0 #ffffff38;
    --cexam-primary-nav-hover-background: #ffffffc4;
    --cexam-primary-nav-hover-shadow: 0 5px 14px #1c507a12;
    --cexam-primary-nav-active-background: #fff;
    --cexam-primary-nav-active-border: #fff;
    --cexam-primary-nav-active-shadow: 0 5px 14px #1c507a16;
    --cexam-primary-nav-focus: #326ea6;
}

body.cexam-site-theme {
    min-height: 100vh;
    color: var(--cexam-page-ink);
    background-color: var(--cexam-page-base);
    background-image: var(--cexam-page-background);
    background-size: 100% var(--cexam-theme-page-height, 100%);
    background-repeat: no-repeat;
}

body.cexam-site-theme .site_header,
body.cexam-live-body [data-cexam-theme-header] {
    /* Paint the same opaque page background; never reveal scrolling content. */
    background-color: var(--cexam-page-base);
    background-image: var(--cexam-page-background);
    background-size: 100% var(--cexam-theme-page-height, 100vh);
    background-position: left top;
    background-origin: border-box;
    background-repeat: no-repeat;
    border: 0;
    border-bottom: 1px solid var(--cexam-navbar-border);
    box-shadow: none;
    transition: border-color var(--cexam-navbar-transition), box-shadow var(--cexam-navbar-transition);
}

body.cexam-site-theme .site_header::before,
body.cexam-live-body [data-cexam-theme-header]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--cexam-navbar-scrolled);
    opacity: 0;
    transition: opacity var(--cexam-navbar-transition);
}

body.cexam-site-theme .site_header > .container,
body.cexam-live-body [data-cexam-theme-header] > .cexam-navbar-inner {
    position: relative;
    z-index: 1;
}

body.cexam-site-theme .site_header.is-scrolled,
body.cexam-live-body [data-cexam-theme-header].is-scrolled {
    border-bottom-color: var(--cexam-navbar-scrolled-border);
    box-shadow: var(--cexam-navbar-scrolled-shadow);
}

body.cexam-site-theme .site_header.is-scrolled::before,
body.cexam-live-body [data-cexam-theme-header].is-scrolled::before {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    body.cexam-site-theme .site_header,
    body.cexam-site-theme .site_header::before,
    body.cexam-live-body [data-cexam-theme-header],
    body.cexam-live-body [data-cexam-theme-header]::before {
        transition: none;
    }
}

body.cexam-site-theme section.cexam-page-heading {
    margin: 32px 0 26px;
    padding: 0 16px;
    text-align: center;
}

body.cexam-site-theme .cexam-page-heading > .container {
    position: relative;
    isolation: isolate;
    width: fit-content;
    max-width: 100%;
    padding: 0 40px;
}

body.cexam-site-theme .cexam-page-heading > .container::before {
    content: "";
    position: absolute;
    inset: 12px 0 17px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse, #fff, transparent 72%);
    pointer-events: none;
}

body.cexam-site-theme .cexam-page-heading img {
    display: block;
    width: var(--cexam-title-ornament-size);
    height: auto;
    margin-inline: auto;
}

body.cexam-site-theme .cexam-page-heading h2 {
    margin: 3px 0 9px;
    color: var(--cexam-title-colour);
    font-size: var(--cexam-title-size);
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: .025em;
    text-transform: none;
}

/* Match the actual page shell, even when a stylesheet sits after the title. */
body.cexam-site-theme > section:has(.common_card) {
    margin-top: 0 !important;
    padding: 0 var(--cexam-page-gutter) 20px;
}

/* Four older pages use the section itself as their Bootstrap container.
 * Reserve the same outer gutter and retain Bootstrap's inner gutter there. */
body.cexam-site-theme > section.container:has(.common_card) {
    width: calc(100% - var(--cexam-page-gutter) - var(--cexam-page-gutter));
    padding-inline: var(--bs-gutter-x, .75rem);
}

/* A common cap also replaces the old public-page-only 1300px exception. */
body.cexam-site-theme > section:has(.common_card) > .container,
body.cexam-site-theme > section.container:has(.common_card) {
    max-width: var(--cexam-frame-container-max) !important;
}

body.cexam-site-theme .common_card {
    padding: var(--cexam-frame-padding) !important;
    border: 1px solid var(--cexam-frame-border) !important;
    border-radius: var(--cexam-frame-radius);
    background: var(--cexam-frame-background) !important;
    box-shadow: none;
    isolation: isolate;
}

body.cexam-site-theme .common_card::before {
    content: "";
    position: absolute;
    inset: -8px;
    border: 1px solid var(--cexam-frame-rail);
    border-radius: calc(var(--cexam-frame-radius) + 7px);
    pointer-events: none;
}

body.cexam-site-theme .common_card .common_vector {
    background: transparent !important;
    border-radius: 0;
}

body.cexam-site-theme .common_card .common_vector img {
    width: var(--cexam-frame-corner-size);
    background: transparent;
    border-radius: 0;
}

body.cexam-site-theme .common_vector.top_left_vector { top: -7px; left: -9px; }
body.cexam-site-theme .common_vector.top_right_vector { top: -9px; right: -7px; }
body.cexam-site-theme .common_vector.bottom_left_vector { bottom: -9px; left: -7px; }
body.cexam-site-theme .common_vector.bottom_right_vector { bottom: -7px; right: -9px; }

/* The body gradient is continuous through both footer areas. */
body.cexam-site-theme footer.site_footer {
    margin-top: 30px;
    padding-top: 24px;
    padding-bottom: 30px;
    background: transparent;
}

body.cexam-site-theme .footer_hr {
    height: 1px;
    margin: 18px 0 28px;
    border: 0;
    background: var(--cexam-footer-rule);
}

body.cexam-site-theme .footer_hr + .footer_hr { display: none; }
body.cexam-site-theme .footer_url ul li a { color: var(--cexam-footer-link); text-decoration: none; transition: color .18s ease; }
body.cexam-site-theme .footer_url ul li a:is(:hover,:focus-visible,:active) { color: var(--cexam-ui-blue-b); text-decoration: none; }

.site_footer .left_footer ul li .site-footer-address-icon {
    display: inline-block;
    font-size: 34px;
    line-height: 1;
    vertical-align: middle;
    color: var(--cexam-footer-link);
    margin: 0 8px 4px 0;
}

body.cexam-site-theme footer.stage_two_footer {
    margin-top: 0;
    padding: 18px 0;
    border-top: 1px solid var(--cexam-footer-bottom-border);
    background: var(--cexam-footer-bottom-background);
}

body.cexam-site-theme footer.stage_two_footer p { color: var(--cexam-footer-bottom-ink); }

@media (max-width: 767px) {
    :root {
        --cexam-frame-padding: 54px 14px 38px;
        --cexam-frame-corner-size: 55px;
        --cexam-title-size: 21px;
        --cexam-title-ornament-size: 180px;
        --cexam-page-gutter: 12px;
    }
    body.cexam-site-theme section.cexam-page-heading { margin: 23px 0; }
    body.cexam-site-theme .cexam-page-heading > .container { padding-inline: 20px; }
    body.cexam-site-theme footer.site_footer { margin-top: 18px; }
}

/* The same breakpoints apply to every framed page, including old public ones. */
@media (min-width: 576px) { :root { --cexam-frame-container-max: 540px; } }
@media (min-width: 768px) { :root { --cexam-frame-container-max: 720px; } }
@media (min-width: 992px) { :root { --cexam-frame-container-max: 960px; } }
@media (min-width: 1200px) { :root { --cexam-frame-container-max: 1140px; } }
@media (min-width: 1400px) { :root { --cexam-frame-container-max: 1320px; } }
@media (min-width: 1600px) { :root { --cexam-frame-container-max: 1515px; } }

/* Shared primary tabs: palette, shape and interaction in this one theme. */
body.cexam-site-theme .cexam-workspace-global-nav,
body.cexam-site-theme .cexam-content-global-nav,
body.cexam-site-theme .cexam-people-global-nav {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    margin:0 0 16px;
    border:1px solid var(--cexam-primary-nav-border);
    border-radius:14px;
    background:var(--cexam-primary-nav-background);
    box-shadow:var(--cexam-primary-nav-shadow);
}
body.cexam-site-theme .cexam-workspace-global-label,
body.cexam-site-theme .cexam-content-global-label,
body.cexam-site-theme .cexam-people-global-label {
    display:inline-flex;
    align-items:center;
    min-height:50px;
    padding:0 14px;
    color:var(--cexam-primary-nav-text);
    font-size:14px;
    font-weight:var(--cexam-primary-nav-label-weight);
    letter-spacing:.08em;
    text-transform:uppercase;
}
body.cexam-site-theme .cexam-workspace-global-nav a,
body.cexam-site-theme .cexam-content-global-nav a,
body.cexam-site-theme .cexam-people-global-nav a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:14px 20px;
    border:1px solid var(--cexam-primary-nav-link-border);
    border-radius:12px;
    background:var(--cexam-primary-nav-link-background);
    color:var(--cexam-primary-nav-text);
    font-size:16px;
    font-weight:var(--cexam-primary-nav-link-weight);
    text-decoration:none;
    box-shadow:var(--cexam-primary-nav-link-shadow);
    transition:background .16s,box-shadow .16s,border-color .16s;
}
body.cexam-site-theme .cexam-workspace-global-nav a:hover,
body.cexam-site-theme .cexam-content-global-nav a:hover,
body.cexam-site-theme .cexam-people-global-nav a:hover {
    border-color:var(--cexam-primary-nav-active-border);
    background:var(--cexam-primary-nav-hover-background);
    color:var(--cexam-primary-nav-text);
    box-shadow:var(--cexam-primary-nav-hover-shadow);
}
body.cexam-site-theme .cexam-workspace-global-nav a.is-active,
body.cexam-site-theme .cexam-content-global-nav a.is-active,
body.cexam-site-theme .cexam-people-global-nav a.is-active {
    border-color:var(--cexam-primary-nav-active-border);
    background:var(--cexam-primary-nav-active-background);
    color:var(--cexam-primary-nav-active-text);
    box-shadow:var(--cexam-primary-nav-active-shadow);
}
body.cexam-site-theme .cexam-workspace-global-nav a:focus-visible,
body.cexam-site-theme .cexam-content-global-nav a:focus-visible,
body.cexam-site-theme .cexam-people-global-nav a:focus-visible {
    outline:3px solid var(--cexam-primary-nav-focus);
    outline-offset:3px;
}
@media (prefers-reduced-motion:reduce) {
    body.cexam-site-theme .cexam-workspace-global-nav a,
    body.cexam-site-theme .cexam-content-global-nav a,
    body.cexam-site-theme .cexam-people-global-nav a { transition:none; }
}

@media(max-width:560px) {
    body.cexam-site-theme .cexam-workspace-global-label,
    body.cexam-site-theme .cexam-content-global-label,
    body.cexam-site-theme .cexam-people-global-label,
    body.cexam-site-theme .cexam-workspace-global-nav a,
    body.cexam-site-theme .cexam-content-global-nav a,
    body.cexam-site-theme .cexam-people-global-nav a { width:100%; }
}