/*
 * Fixed home logo vertical center is at --site-logo anchor; 48px tall → bottom at anchor + 24px.
 * Exam-period back links stack under the logo, horizontally centered on the logo (see those format CSS files).
 */
:root {
    --site-logo-anchor-top: 3.25rem;
    --site-logo-anchor-left: 3.25rem;
    --site-logo-display-size: 48px;
    --site-logo-back-top: calc(var(--site-logo-anchor-top) + var(--site-logo-display-size) / 2 + 0.5rem);
    /* Horizontal center of fixed logo — use with translateX(-50%) on the back link */
    --site-logo-back-center-x: calc(var(--site-logo-anchor-left) + var(--site-logo-display-size) / 2);
    /* Default Exam Period back position (before administrator image upload): right of logo, vertically centered */
    --site-logo-back-legacy-top: var(--site-logo-anchor-top);
    --site-logo-back-legacy-left: calc(var(--site-logo-anchor-left) + var(--site-logo-display-size) + 0.75rem);
}

/* Logo / home — fixed on every page (stays in viewport while scrolling) */
.site-logo {
    position: fixed !important;
    top: var(--site-logo-anchor-top);
    left: var(--site-logo-anchor-left);
    width: 48px;
    height: 48px;
    z-index: 10000;
    cursor: pointer;
    transition: transform 0.2s ease;
    background: transparent;
    border: none;
    padding: 0;
    text-decoration: none;
    display: block;
    transform: translateY(-50%);
    box-sizing: border-box;
}

.site-logo:hover,
.site-logo:active {
    transform: translateY(-50%) scale(1.1);
}

.site-logo svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* School branding beside the fixed home logo (see administratorImageUploadedBoot.js) */
.site-school-logo-addon {
    position: fixed !important;
    top: var(--site-logo-anchor-top);
    left: var(--site-logo-back-legacy-left);
    z-index: 10000;
    transform: translateY(-50%);
    height: var(--site-logo-display-size);
    max-width: min(160px, calc(100vw - var(--site-logo-back-legacy-left) - 1rem));
    pointer-events: none;
    box-sizing: border-box;
}

.site-school-logo-addon img {
    height: 100%;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

/* Ensure logo doesn't interfere with other fixed elements */
body {
    position: relative;
}