/* =========================================================
   RHTC DISPLAY
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
    --midnight-navy-rgb: 25,16,73;
    --midnight-navy: #191049;

    --light-blue-rgb: 102,204,255;
    --light-blue: #99ccff;

    --poster-navy: #0b0a46;
    --royal-indigo: #384b8b;

    --off-white: #e6e8f5;
    --white: #ffffff;

    --mist-indigo: #d8dbeb;
    --grey-indigo: #9f9db1;

    --accent-pink-rgb: 255,51,102;
    --accent-pink: #ff3366;
    --accent-pink-hover: #e62e5c;

    --text-grey: #444444;
    --text-light: #eeeeee;
    --text-muted: #cccccc;

    --display-bar-height: 48px;
}


/* =========================================================
   RESET & GLOBALS
   ========================================================= */

*, *::before, *::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;

    font-family: Arial, sans-serif;

    background: var(--off-white);
    color: var(--midnight-navy);
}

body {
    overflow: hidden;
}

a {
    text-decoration: none;
}


/* =========================================================
   DISPLAY APP
   ========================================================= */

#display-app {
    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    overflow: hidden;
}


/* =========================================================
   DISPLAY BAR
   ========================================================= */

#display-bar {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: var(--display-bar-height);

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 14px;

    background: var(--midnight-navy);

    z-index: 1000;
}


/* =========================================================
   RHTC LOGO
   ========================================================= */

#display-logo {
    display: flex;
    align-items: center;

    height: 100%;
}

#display-logo a {
    display: flex;
    align-items: center;

    height: 100%;
}

#display-logo img {
    display: block;

    width: auto;
    height: 32px;

    object-fit: contain;
}


/* =========================================================
   BURGER MENU
   ========================================================= */

#display-menu {
    background: none;
    border: none;

    cursor: pointer;

    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 5px;
}

#display-menu span {
    display: block;

    height: 3px;
    width: 22px;

    background: var(--white);

    border-radius: 2px;

    transition: 0.3s;
}

#display-menu.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

#display-menu.active span:nth-child(2) {
    opacity: 0;
}

#display-menu.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

#display-menu-panel {
    position: absolute;

    top: var(--display-bar-height);
    right: 0;

    width: 300px;

    background: var(--midnight-navy);

    display: block;

    border-bottom: 3px solid var(--accent-pink);

    z-index: 999;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-10px);

    pointer-events: none;

    transition:
        opacity .8s ease,
        transform .8s ease,
        visibility .8s ease;

    border-radius: 0 0 8px 8px;

    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

#display-menu-panel.active {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}


/* =========================================================
   NAV CONTENT
   ========================================================= */

#display-menu-panel nav {
    position: static;

    width: 100%;

    display: flex;
    flex-direction: column;

    background: transparent;

    border: 0;

    opacity: 1;
    visibility: visible;

    transform: none;

    pointer-events: auto;
}


/* =========================================================
   NAV LINKS
   ========================================================= */

#display-menu-panel nav > a {
    display: block;

    padding: 10px 20px;

    border: 0;

    border-top: 1px solid rgba(255,255,255,0.1);

    font-size: 14px;

    color: var(--white);

    cursor: pointer;

    text-decoration: none;

    transition:
        background 0.2s,
        color 0.2s;
}

#display-menu-panel nav > a:hover {
    background: rgba(var(--accent-pink-rgb),0.15);

    color: var(--accent-pink);
}


/* =========================================================
   DISPLAY CANVAS
   ========================================================= */

#display-canvas {
    position: absolute;

    top: var(--display-bar-height);
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: calc(100% - var(--display-bar-height));

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: var(--off-white);
}


/* =========================================================
   SLIDESHOW
   ========================================================= */

#display-slideshow {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: var(--off-white);
}


/* =========================================================
   INDIVIDUAL SLIDES
   ========================================================= */

.display-slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    opacity: 0;

    transition: opacity 800ms ease;

    pointer-events: none;

    background: var(--off-white);
}

.display-slide.active {
    opacity: 1;
}


/* =========================================================
   DISPLAY IMAGES
   ========================================================= */

.display-slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    user-select: none;
    pointer-events: none;

    -webkit-user-drag: none;
}


/* =========================================================
   MENU CLOSE BUTTON
   ========================================================= */

#display-menu-close {
    position: absolute;

    top: 8px;
    right: 10px;

    width: 32px;
    height: 32px;

    padding: 0;

    border: none;
    outline: none;

    background: transparent;

    color: var(--white);

    font-size: 28px;
    line-height: 1;

    cursor: pointer;
}

#display-menu-close:hover {
    color: var(--accent-pink);
}


/* =========================================================
   MENU CONTENT
   ========================================================= */

#display-menu-content {
    position: relative;

    padding: 20px;
}


/* =========================================================
   MENU NAVIGATION SPACING
   ========================================================= */

#display-menu-content nav {
    padding-top: 25px;
}