/* Illuminate microsite theme — mobile first.
   Paste into the microsite's custom CSS. Styles the existing Breeze session page only. */

:root {
    --ill-black: #000000;
    --ill-white: #f7f8fc;
    --ill-amber: #d0a040;
    --ill-line: rgba(247, 248, 252, 0.16);
    color-scheme: dark;
}

html,
body {
    margin: 0;
    background-color: var(--ill-black) !important;
    color: var(--ill-white);
    font-family: 'Space Mono', monospace;
    -webkit-font-smoothing: antialiased;
}

/* Page column: edge to edge on phones, capped on larger screens */
.session-page {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 0 0 env(safe-area-inset-bottom);
    box-sizing: border-box;
}

/* Header: amber wordmark bar, like the label on the print */
.session-page .header {
    padding: 0;
}

.session-page .gallery-header {
    margin: 0;
    padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
    align-items: flex-start;
    text-align: left;
}

.session-page .gallery-header::before {
    content: "Illuminate";
    color: var(--ill-amber);
    font-family: 'Work Sans', 'Space Mono', sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
}

.session-page .logo-wrapper:empty,
.session-page .event-title:empty {
    display: none;
}

/* Cards: media sits flush on black, no chrome */
.session-page .card {
    margin: 0 0 28px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.session-page .card-body,
.session-page figure {
    margin: 0;
    padding: 0;
}

.session-page figure img.preview {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* Strip video: tall and narrow, so size it by screen height and centre it */
.session-page figure .plyr,
.session-page figure > video {
    width: min(62%, calc(78vh * 264 / 1080));
    width: min(62%, calc(78svh * 264 / 1080));
    min-width: 0;
    margin: 0 auto;
    border-radius: 0;
    background: var(--ill-black);
    --plyr-color-main: var(--ill-amber);
    --plyr-video-background: var(--ill-black);
    --plyr-video-control-color: var(--ill-white);
    --plyr-video-control-color-hover: var(--ill-black);
    --plyr-control-icon-size: 16px;
    --plyr-control-spacing: 8px;
    --plyr-range-thumb-height: 12px;
}

/* The player is narrow: keep play, progress and fullscreen only */
.session-page .plyr__controls .plyr__time,
.session-page .plyr__controls .plyr__volume,
.session-page .plyr__controls .plyr__menu,
.session-page .plyr__controls [data-plyr="pip"],
.session-page .plyr__controls [data-plyr="airplay"],
.session-page .plyr__controls [data-plyr="captions"] {
    display: none !important;
}

.session-page .plyr__control--overlaid {
    background: var(--ill-amber);
    color: var(--ill-black);
    padding: 18px;
}

/* Share row */
.session-page .card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 10px 12px 10px 6px;
    border-bottom: 1px solid var(--ill-line);
}

.session-page .social-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
}

.session-page .social-buttons > .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--ill-white) !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.session-page .social-buttons .button .button {
    margin: 0;
    font-size: 18px;
    line-height: 1;
}

.session-page .social-buttons > .button:active,
.session-page .social-buttons > .button:active .button {
    color: var(--ill-amber) !important;
}

/* Download: the one filled button */
.session-page .action-buttons {
    margin: 0 0 0 auto;
}

.session-page .action-buttons form {
    margin: 0;
}

.session-page .action-buttons button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ill-amber);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.session-page .action-buttons button .fa-download {
    margin: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--ill-black) !important;
}

.session-page .action-buttons button:active {
    background: var(--ill-white);
}

/* Footer */
.session-page .footer {
    margin: 0;
    padding: 8px 0 20px;
    background-color: var(--ill-black) !important;
}

.session-page .footer-content,
.session-page .footer-content a {
    font-family: 'Space Mono', monospace !important;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(247, 248, 252, 0.6) !important;
}

/* "Copied!" toast */
#toast-container > .toast {
    background-color: var(--ill-amber) !important;
    background-image: none !important;
    color: var(--ill-black) !important;
    font-family: 'Space Mono', monospace;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    padding: 14px 16px;
}

/* Larger screens: a little breathing room */
@media (min-width: 560px) {
    .session-page {
        padding-top: 16px;
    }

    .session-page .card-footer {
        padding-left: 0;
        padding-right: 0;
    }

    .session-page .gallery-header {
        padding-left: 0;
        padding-right: 0;
    }
}