/**
 * SPDX-FileCopyrightText: Copyright (c) 2026-present Robert Anderson / Shifty Logic.
 * SPDX-License-Identifier: MIT
**/

/**
 * Top-level
**/
:root {
    --sl-logo-size: 3rem;

    --sl-nav-width: 20rem;
    --sl-nav-width-mobile: 100vw;

    --sl-blue: rgb(29, 89, 208);

    --sl-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");

}


body > nav {
    border-bottom: 1px solid var(--pico-muted-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
}

body > nav > ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1rem;
}

.nav-brand {
    gap: 0.75rem;
}

.nav-controls {
    gap: 0.75rem;
    flex-shrink: 0;
}

.site-title {
    margin-bottom: 0;
}

.header-logo {
    height: var(--sl-logo-size);
}

.center-pane {
    max-width: 40vh;
}

/* Hide hamburger button by default on desktop */
#nav-btn {
  display: none;
}

/* Mobile Breakpoint Styles (Below 768px) */
@media (max-width: 768px) {
    #nav-btn {
        display: inline-block;
    }

    /* Hide the menu links list by default on mobile */
    #nav-menu {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: var(--pico-background-color);
        padding: 1.5rem;
        box-shadow: var(--pico-box-shadow);
        border-bottom: 1px solid var(--pico-muted-border-color);
        z-index: 100;
    }

    /* Display dropdown block when toggled */
    #nav-menu.open {
        display: flex;
    }
}


/* Main contains multiple sections, one showing at a time */
main {
    display: grid;
}

.main-section {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
}

.main-section.active {
    opacity: 1;
    visibility: visible;
}


.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.card-summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.content-card {
    min-width: 250px;
}

.content-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content-cards {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* default 'mobile' to stacked */
    gap: 16px;
}

@media (min-width: 600px) {
    .content-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .content-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.content-link {
    font-size: 16px;
    color: var(--sl-blue);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    width: fit-content;
}

.content-link::after {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;

    background-color: var(--sl-blue);

    -webkit-mask-image: var(--sl-arrow-right);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: var(--sl-arrow-right);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    transition: transform 0.2s ease-in-out;
}

.content-link:hover::after {
    transform: translateX(0.25rem);
}

#content-frame {
    max-width: 80vh;
    max-height: 80vh;
    overflow: auto;
}