/*
 * customizations.css
 * Global overrides for style-new.css — loaded after the main stylesheet.
 * Add targeted fixes here instead of scattering <style> blocks across pages.
 */

/* ── Input-group accent corner marks ─────────────────────────────────────── */
/* The .input-group container is ~2.5px taller than its control due to accent  */
/* span pseudo-element font metrics, causing the + marks to sit off the border.*/
.input-group .input-group__accent:first-child { top: -1px; }
.input-group .input-group__accent:last-child  { bottom: 5px; }

/* ── step--intro button: undo absolute positioning from style-new.css ──────── */
/* That rule pins .btn to bottom — breaks layouts with multiple/long content.   */
/* btn--alt needs position:relative so its spin-ring pseudo-elements anchor     */
/* to the button itself rather than a distant ancestor.                         */
.test-drive .main-container.sidebar-content .step--intro .btn {
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    z-index: auto;
    margin: 0 0 1rem 0;
}
.test-drive .main-container.sidebar-content .step--intro .btn--alt {
    position: relative;
    width: 7.8125rem;
    height: 7.8125rem;
    display: block;
    margin: 0 auto;
}
.test-drive .main-container.sidebar-content .step--intro {
    padding-bottom: 12.5em;
}

/* ── Add some space to the bottom ──────────────────────────────────────────── */
.step--complete {
    padding-bottom: 12.5em;
}

/* ── Test-drive backdrop: base rule uses color:rgba(0,0,0,.4) — invisible on dark bg */
/* Matches .trivia .backdrop (color:#fff; opacity:.15) — applies to testdrive,        */
/* workshop, complete, training, training_workshop, falcon, falcon2023, intel.        */
.test-drive .backdrop {
    color: #fff;
    opacity: .15;
}

/* ── Sidebar (Console Access) sticky fix ─────────────────────────────────── */
/* Default position:absolute causes sidebar to scroll away. Fixed keeps it    */
/* visible below the 98px header at all scroll positions.                     */
/* Applies to both body.test-drive and body.trivia game types.                */
.test-drive .sidebar,
.trivia .sidebar {
    position: fixed;
    top: 98px;
    left: 0;
    z-index: 10;
}

/* ── Trivia question list: prevent clipping under the 98px header ─────────── */
/* style-new.css uses top:50%;transform:translateY(-50%) which causes the list */
/* to overlap the header on events with many questions. Anchor to below header.*/
.trivia-progress {
    top: 108px !important;
    transform: none !important;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

/* ── Progress tracker step labels ────────────────────────────────────────── */
/* style-new.css sets color:hsla(0,0%,100%,.4) but JS sets opacity:0.        */
/* site-new.js now only toggles --active class, never clears text.           */
/* Three visibility levels: very faint always, highlighted on hover, normal  */
/* when active (current scenario).                                            */
.testdrive-progress__item span {
    opacity: 0.25;
    transition: opacity 0.15s ease;
}
.testdrive-progress__item:hover span {
    opacity: 0.7;
}
.testdrive-progress__item--active span {
    opacity: 1;
}

/* ── Activity icon + text in header ──────────────────────────────────────── */
/* Replaces the combined falcon-*-logo.svg with a separate icon + text block. */
/* Usage: <img class="application-icon hidden-tablet" src="...">              */
/*        <span class="application-label hidden-tablet">FALCON<br>WORKSHOP</span> */
img.application-icon {
    height: 64px;
    width: auto;
}
.application-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 0.5rem;
    line-height: 1.3;
}
.application-label span:first-child {
    font-family: neue-haas-grotesk-display, sans-serif;
    font-size: 0.7rem;
    opacity: 0.6;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
}
.application-label span:last-child {
    font-family: 'Bruno Ace', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
}

/* Thin vertical separator between CrowdStrike logo and activity icon,       */
/* replacing the close.svg "X" which read as a dismiss/close action.         */
.logo__separator {
    display: inline-flex;
    align-items: center;
    margin: 0 4px;
}
.logo__separator::before {
    content: "";
    display: block;
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.3);
}

/* ── Console Access modal: near-opaque background ────────────────────────── */
/* style-new.css sets background:hsla(0,0%,100%,.04) which lets page content  */
/* show through. Raise to 90% opacity for a solid, readable modal.            */
#modal .modal-content {
    background: rgba(20, 20, 20, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Enlargeable image lightbox: keep image within viewport ──────────────── */
/* style-new.css sets .modal-content{width:100%} which the enlarge lightbox   */
/* (testdrive.js/workshop.js "click .enlargeable") also applies to the        */
/* full-res <img>, causing it to overflow the viewport. Cap and center it.    */
img.modal-content {
    max-width: calc(100vw - 40px) !important;
    max-height: calc(100vh - 40px) !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: auto !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
div:has(> img.modal-content) {
    overflow: hidden !important;
    padding-top: 0 !important;
}

/* ── Copy-paste widget ────────────────────────────────────────────────────── */
.copy-parent {
    align-items: stretch !important;
    margin-bottom: 1.25rem;
}
.copy-parent .input-group {
    margin-bottom: 0;
}
.copy-parent .input-group__control {
    font-size: 1rem;
    padding: 0.75rem 1rem;
}
.copy-parent .col-shrink {
    display: flex;
    align-items: stretch;
}
/* Width uses rem so it scales with browser font-size / zoom (2.5rem = 40px at default 16px) */
.btn.btn--square {
    width: 2.5rem;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Inline click/key indicators ─────────────────────────────────────────── */
/* <b> marks clickable UI elements in scenario copy — keep it styled like kbd/code */
/* so instructions ("click <b>Next</b>") stay visually distinct across all games.  */
kbd, b, code, .lab_hostname:not(textarea) {
    padding: .2rem .4rem;
    font-size: 87.5%;
    color: #fff;
    background-color: #4e4e4e;
    border-radius: .2rem;
    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

/* ── Leaderboard modal ────────────────────────────────────────────────────── */
.leaderboardModal { background-color: transparent !important; background-image: none !important; }
.leaderboardModal::after { content: none !important; }
.leaderboardModal .modal-dialog {
    width: calc(100% - 3rem);
    max-width: calc(100% - 3rem);
    margin: 1.5rem auto;
    max-height: calc(100vh - 3rem);
    background-color: #000;
    background-image: url(//cdn.falcon.events/dist/img/shadow-top.png);
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 0 60px rgba(0,0,0,0.9), 0 0 40px rgba(252,0,0,0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.leaderboardModal .modal-dialog::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 70%;
    background-image: url(//cdn.falcon.events/dist/img/signup-bg.png);
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}
.leaderboardModal .modal-content { background: transparent !important; border: 0 !important; overflow: visible !important; }
.leaderboardModal .leaderboard__global-glow { position: absolute !important; top: 12% !important; bottom: 0 !important; }
.leaderboardModal .leaderboard__dots { display: flex !important; }
.leaderboardModal .modal-dialog > .close {
    position: absolute;
    top: 1rem; left: 50%; right: auto;
    transform: translateX(-50%);
    z-index: 20;
    opacity: 0.55;
    border: 2px solid rgba(255,255,255,0.9) !important;
    transition: opacity 0.2s ease;
}
.leaderboardModal .modal-dialog > .close:hover { opacity: 1; }
.leaderboardModal .modal-dialog > .close::before {
    background-image: url(//cdn.falcon.events/dist/img/close-icon.png) !important;
    background-size: 100% !important;
    background-repeat: no-repeat !important;
}
.leaderboardModal .leaderboard__global-glow .square {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
.leaderboardModal .leaderboard__rank--first {
    background: linear-gradient(145deg, #FFE55C 0%, #C8860A 40%, #FFD700 55%, #B07808 100%);
    color: #3A2000;
    animation: goldGlow 2s ease-in-out infinite;
}
@keyframes goldGlow {
    0%,100% { box-shadow: 0 0 8px rgba(255,200,0,0.7),  0 0 20px rgba(255,160,0,0.4); }
    50%      { box-shadow: 0 0 14px rgba(255,215,0,1),   0 0 40px rgba(255,180,0,0.6); }
}
.leaderboardModal .leaderboard__rank--second {
    background: linear-gradient(145deg, #F0F2F5 0%, #8A96A8 40%, #DDE2EA 55%, #707A8A 100%);
    color: #2A3040;
    animation: silverGlow 2s ease-in-out infinite;
}
@keyframes silverGlow {
    0%,100% { box-shadow: 0 0 8px rgba(180,200,220,0.6), 0 0 20px rgba(140,165,195,0.3); }
    50%      { box-shadow: 0 0 14px rgba(200,220,240,0.9),0 0 40px rgba(160,190,220,0.5); }
}
.leaderboardModal .leaderboard__rank--third {
    background: linear-gradient(145deg, #E8A060 0%, #7A4010 40%, #C87030 55%, #6A3008 100%);
    color: #FFF0E0;
    animation: bronzeGlow 2s ease-in-out infinite;
}
@keyframes bronzeGlow {
    0%,100% { box-shadow: 0 0 8px rgba(205,127,50,0.65), 0 0 20px rgba(160,85,20,0.35); }
    50%      { box-shadow: 0 0 14px rgba(220,140,60,0.9), 0 0 40px rgba(180,100,30,0.55); }
}