/*
   Colour palette and typography definitions derived from the
   Brand‑to‑Product visual identity narrative.  Using CSS variables makes
   it easy to adjust the look in one place.  Nesting selectors inside
   context classes keeps our stylesheet readable and avoids a class
   proliferation.  Modern browsers support a limited form of nesting
   without a pre‑processor, so we take advantage of hierarchical
   structures rather than duplicating long class names.
 */
:root {
    /*color-scheme: light dark;*/

    --base-unit: 1rem;
    --golden-number: 1,6180339887;
    /* font will scale to screen size */
    font-size: calc(var(--base-unit) + 0.333vw);

    --deep-indigo: #3c3f76; /* Deep Indigo */
    --darker-deep-indigo: #101229;
    --electric-coral: #eb0800; /* Electric Coral */
    --soft-sand: #f5ede0; /* Soft Sand */
    --dark-sand: #dfd3c0;
    --neon-mint: #a1ffd7; /* Neon Mint */
    --font-display: "Poppins", sans-serif;
    --font-body: "Inter", sans-serif;

    --light: white;
    --dark: var(--darker-deep-indigo);

    --color-primary: var(--light);
    --color-accent: var(--electric-coral);
    --color-highlight: var(--neon-mint);
    --color-background: var(--dark);
    --gradient-color: black;

    --max-content-size: 768px;
    --logo-width: 80px;

    --border-style: 1px solid var(--color-highlight);

    /* NAV Settings */ 
    --nav-panel-display:flex;
}

/* NAV Control Logic */ 
body > nav {
    --display: var(--nav-display, flex);
    --panel-display: var(--nav-panel-display, block);

    & > section {
        display: none;
    }

    & > section[data-nav] {
        display: var(--display);
    }

    & > section:target {
        display: var(--panel-display);
    }

    [data-nav-close] {
        display:none;
    }

    &:has( > section:target ) {
        [data-nav-open] { display: none;}
        [data-nav-close] { display: inline; }
    }
}

body {
    --spacing: var(--base-unit);
    --top-menu-height: 4rem;

    color: var(--color-primary);
    background-color: var(--color-background);
    font-family: var(--font-body);
    line-height: 160%;
    margin: 0;
    width: 100%;
    height: 100vh;
    background: radial-gradient(var(--color-background), var(--gradient-color));

    & > * {
        width: 100%;
        display: grid;
        grid-template-columns:
            minmax(var(--spacing), 1fr)
            min(calc(100% - var(--spacing) * 2), var(--max-content-size))
            minmax(var(--spacing), 1fr);

        & > * {
            grid-column: 2;
        }
    }

    & > *:nth-child(2) {
        /* height: calc(100vh - var(--top-menu-height));*/
        margin-top: var(--top-menu-height);
    }

    & > hr {
        width: min(calc(100% - var(--spacing) * 2), var(--max-content-size));
    }

    & > section {
        padding-bottom: calc(var(--spacing) * 2);
    }

    &.credits {
        h1 {
            display: flex;
            flex-direction: row;
            gap: calc(var(--spacing) * 2);
            justify-content: start;
            align-items: start;
        }

        section p {
            display: flex;
            flex-direction: row;
            gap: var(--spacing);
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--color-primary);
            padding-bottom: var(--spacing);

            > :nth-child(1) {
                flex-grow: 2;
            }
        }
    }

    &.login {

        > section {
            height: calc(100vh - calc(var(--base-unit) * 2));
            margin: 0;
            padding: 0;
            align-items: center;    
        }

        > section, footer {
            text-align: center;
        }
    }

    & > nav {
        padding: var(--spacing) 0;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        backdrop-filter: blur(21px);
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

        .logo {
            width: var(--logo-width);
        }

        a {
            text-decoration: none;
        }



        & > section[data-nav] {
                position: sticky;
                top: 0;
                z-index: 15;

                flex-direction: row;
                justify-content: start;
                align-items: center;
                gap: var(--spacing);
        }

        & > section:target {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: start;
            gap:1rem;
            
            height:100vh;
            overflow-y: auto;

            -ms-overflow-style: none;        /* IE/Edge legacy */
            scrollbar-width: none;           /* Firefox */
            &::-webkit-scrollbar { display: none; }  /* WebKit */


            h3 {
                display: flex;
                flex-direction: row;
                gap:1rem;
                margin:0;
            }

            ul {
                list-style-type:none;
                padding-left:calc(var(--spacing)*1.6);
            }

            & > header {
                width:100%;
                margin-top:2rem;
                padding: 0 0 1rem 1rem;
                border-left: 1px solid var(--color-primary);
                border-bottom: 1px solid var(--color-primary);
                border-radius: 0 0 0 1rem;
            }

            & > article {
                border-left: 1px solid var(--color-highlight);
                padding: 1rem 0 0 1rem;
                border-top: 1px solid var(--color-highlight);
                border-radius: 1rem 0 0 0;

                width:100%;

                @media screen and (width > 480px) {
                    width:217px;
                }

                ul {
                    li a.link,
                    li a.link:visited {
                        color: var(--color-primary);
                    }
                }
            }

            & > footer {
                padding: var(--spacing) 0 calc(var(--spacing)*4) 0;
                width:100%;
                margin-top:2rem;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                gap:0.5rem;

                span {
                    flex-grow:2;
                }
            }

        }

    }

    & > footer {
        font-size: 80%;
        text-align: center;

        & > .links {
            display: flex;
            flex-direction: row;
            justify-content: center;
            gap: 1rem;
        }
        & a .icon {
            width:1rem;
        }
    }

    @media screen and (width > 768px) {
        font-size: 80%;
    }
}

h1, h2, h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
}

hgroup,
.heading-group {
    margin-bottom:2rem;
    h2 {
        margin-bottom: 0;
    }
    p {
        margin-top:0;
    }
}

ul {
    li {
        margin:calc(var(--base-unit) / 2);
    }
}

a, a:visited {
    color: var(--color-primary);

    &.link, &.link:visited {
        color: var(--color-accent);
        text-decoration: underline;
    }

    &.link-icon {
        display:inline-flex;
        flex-direction: row;
        align-items:center;
        gap:0.5rem;

    }

    &.link-icon img {
        width: 1rem!important;
    }

    &.btn {
        padding: 1rem;
        border-radius: 2rem;
        border: none;
        text-align: center;
        justify-self: center; 
        text-decoration:none;
    }

    &.btn-accent {
        background-color: var(--color-accent);
    }

    &.btn-icon {
        display: inline-flex;
        flex-direction:row;
        align-items: center;
        gap:1rem;
    }
}

p {
    &.note {
        padding:calc(var(--base-unit)/2);
        box-sizing: border-box;
        background:rgba(255,255,255,0.1);
        border:1px solid rgba(255, 255, 255, 0.2);
        border-radius: var(--base-unit);
    }
}

form {
    input {
        padding: calc(var(--base-unit)/2);
        margin-bottom: 1rem;
        
        &[type="text"],
        &[type="email"] {
            width:100%;
        }
    }

    & > button[type="submit"] {
        border: 1px solid transparent;
        border-radius: 2rem;
        background-color:var(--color-accent);
        color: white;
        padding: var(--base-unit);
        cursor: pointer;
    }

    & > button:first-of-type {
        margin-right: var(--base-unit)
    }
}

.icon {
    width: calc(var(--base-unit) * 2);

    &.small {
        width: calc(var(--base-unit) * 1.5);
    }
}

.table {
    --spacing: var(--base-unit);

    & > .row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--spacing);
        padding: calc(var(--spacing) / 2) 0;
        border-bottom: 1px solid var(--color-primary);
    }
}

table {
    tr {
        td, th {
            padding: calc(var(--spacing)) calc(var(--spacing) / 2);
            border-bottom: 1px solid var(--color-primary);
        }
    }
}

blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--color-accent); /* colored left bar */
    background: color-mix(
        in srgb,
        var(--color-background) 85%,
        var(--color-primary) 15%
    );
    border-radius: 6px;
    font-style: italic;

    p {
        margin: 0;
        color: var(--color-primary);
        line-height: 1.5;
    }
}

pre {
    white-space: pre-wrap; /* allow wrapping */
    word-wrap: break-word; /* break long words */
    max-width: 100%; /* never exceed container width */
    overflow-x: auto; /* allow scroll if needed */
    box-sizing: border-box; /* padding counts inside width */
    padding: var(--base-unit);
    border: 1px solid var(--color-primary);
    & > code {
        opacity: 0.7;
    }
}

.cta {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.8rem 1.6rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.3s ease;
    background: var(--color-accent);
    color: #ffffff;
    border: none;

    &.secondary {
        border: 2px solid var(--color-accent);
        color: white;
        background: transparent;
    }
}


.list-inline {
    display: flex;
    flex-direction: row;
    gap: var(--base-unit);
    justify-content: start;
    align-items: center;
}

.front-matter {
    li {
        padding: calc(var(--base-unit) * 0.5) 0;
    }
    a {
        text-decoration: underline;
    }
}

#logo, .logo {
    width: 120px;
}

.buttons {
    display: flex;
    flex-direction:row;
    gap:2rem;
}

.hero {
    min-height:100vh;
    margin-bottom: 2rem;;

    & > img {
        width:100%;
        height: 100vh;
        position: absolute;
        top:0;
        left:0;
        object-fit: cover;
        object-position: center;
        mix-blend-mode: soft-light;
        z-index:-1;
    }

    h1 {
        padding-top:4rem;
        font-size:300%;
        line-height: 161.8%;
    }
    .sub-headline {
        font-size:120%
    }

    .btn {
        text-transform: uppercase;
        display: inline-block;
    }
}

/* styles */ 
.file {
    border-left: 1px solid var(--color-highlight);
    padding: 1rem 0 0 1rem;
    border-top: 1px solid var(--color-highlight);
    border-radius: 1rem 0 0 0;
}

.product-specification {
    --sub-header-size: 100%;
    --icon-size: 2rem;
    --icon-gap: calc(var(--icon-size)/2);

    & > hr {
        width:100%;
        border: 1px dashed rgba(255,255,255,0.1);
    }

    & > header h1 {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap:var(--icon-gap);

        & > img {
            width: var(--icon-size);
        }
    }

    & > h2 {
        font-size: var(--sub-header-size);
    }

    & > footer {
        border-bottom: var(--border-style);
        padding-bottom: 1rem;

        & > h2 {
            font-size: var(--sub-header-size);
        }
    }
}

.product-meta {
    --border-style: 1px solid var(--color-highlight);

    display: flex;
    flex-direction: column;
    font-family: var(--font-display);

    & > * {
        display: flex;
        flex-direction: row;
        justify-content:space-between;
        border-bottom: var(--border-style);
        margin:0;
        padding:0.5rem 0;
    }

    & > *:nth-child(1) {
        border-top: var(--border-style);
    }
}