/*
 * =====================================================
 * CONFIVATE APPLICATION LAYOUT
 * =====================================================
 *
 * Structural application shell.
 * Visual values are sourced from tokens.css.
 * =====================================================
 */


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


html {
    min-width: 20rem;
    background:
        var(--color-page);

    color:
        var(--color-text);

    font-family:
        var(--font-sans);

    font-size:
        100%;

    line-height:
        var(--leading-body);

    -webkit-text-size-adjust:
        100%;
}


body {
    margin: 0;

    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            var(--color-neutral-25) 0,
            var(--color-page) 20rem
        );

    color:
        var(--color-text);
}


img,
svg {
    max-width: 100%;
}


button,
input,
select,
textarea {
    font: inherit;
}


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

    text-underline-offset:
        0.2em;
}


a:hover {
    color:
        var(--color-primary-hover);
}


a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        3px solid transparent;

    box-shadow:
        var(--focus-ring);
}


.shell {
    width:
        min(
            calc(100% - 2rem),
            var(--shell-width)
        );

    margin-inline:
        auto;
}


/* --------------------------------------------------
   Accessibility
   -------------------------------------------------- */


.skip-link {
    position:
        absolute;

    left:
        var(--space-4);

    top:
        var(--space-4);

    z-index:
        1000;

    padding:
        var(--space-3)
        var(--space-4);

    border-radius:
        var(--radius-md);

    background:
        var(--color-ink-950);

    color:
        var(--color-white);

    text-decoration:
        none;

    transform:
        translateY(-200%);

    transition:
        transform
        var(--transition-fast);
}


.skip-link:focus {
    transform:
        translateY(0);
}


/* --------------------------------------------------
   Application header
   -------------------------------------------------- */


.site-header {
    position:
        relative;

    z-index:
        20;

    border-bottom:
        1px solid
        rgba(200, 209, 220, 0.75);

    background:
        rgba(255, 255, 255, 0.92);

    backdrop-filter:
        blur(16px);
}


.site-header__inner {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-4);

    min-height:
        var(--header-height);
}


.site-brand {
    display:
        inline-flex;

    align-items:
        center;

    color:
        var(--color-ink-950);

    font-size:
        var(--text-lg);

    font-weight:
        var(--weight-bold);

    letter-spacing:
        0.04em;

    text-decoration:
        none;
}


.site-brand::before {
    width:
        0.75rem;

    height:
        0.75rem;

    margin-right:
        var(--space-3);

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            var(--color-teal-500),
            var(--color-violet-600)
        );

    box-shadow:
        0 0 0 4px
        var(--color-teal-100);

    content:
        "";
}


.site-brand:hover {
    color:
        var(--color-ink-950);
}


/* --------------------------------------------------
   Primary navigation
   -------------------------------------------------- */


.site-nav {
    position:
        relative;
}


.site-nav__toggle {
    display:
        none;

    align-items:
        center;

    gap:
        var(--space-2);

    min-height:
        2.75rem;

    padding:
        var(--space-2)
        var(--space-4);

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

    border-radius:
        var(--radius-pill);

    background:
        var(--color-surface);

    color:
        var(--color-text-strong);

    cursor:
        pointer;
}


.site-nav__list {
    display:
        flex;

    align-items:
        center;

    gap:
        var(--space-2);

    padding:
        0;

    margin:
        0;

    list-style:
        none;
}


.site-nav__list a {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        2.75rem;

    padding:
        var(--space-2)
        var(--space-4);

    border-radius:
        var(--radius-pill);

    color:
        var(--color-text-muted);

    font-size:
        var(--text-sm);

    font-weight:
        var(--weight-semibold);

    text-decoration:
        none;

    transition:
        background
        var(--transition-fast),
        color
        var(--transition-fast);
}


.site-nav__list a:hover {
    background:
        var(--color-surface-muted);

    color:
        var(--color-text-strong);
}


.site-nav__list a[aria-current="page"] {
    background:
        var(--color-teal-100);

    color:
        var(--color-teal-700);
}


/* --------------------------------------------------
   Main application content
   -------------------------------------------------- */


.app-main {
    min-height:
        calc(
            100vh
            - var(--header-height)
            - 8rem
        );

    padding-block:
        var(--space-12);
}


/* --------------------------------------------------
   Foundation visual preview
   -------------------------------------------------- */


.foundation-status {
    position:
        relative;

    overflow:
        hidden;

    max-width:
        62rem;

    margin-inline:
        auto;

    padding:
        clamp(
            var(--space-8),
            6vw,
            var(--space-16)
        );

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

    border-radius:
        var(--radius-xl);

    background:
        var(--color-surface);

    box-shadow:
        var(--shadow-lg);
}


.foundation-status::before {
    position:
        absolute;

    width:
        20rem;

    height:
        20rem;

    right:
        -8rem;

    top:
        -9rem;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(16, 163, 156, 0.15),
            rgba(107, 86, 204, 0.06) 48%,
            transparent 70%
        );

    content:
        "";

    pointer-events:
        none;
}


.foundation-status__eyebrow {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        var(--space-2);

    margin:
        0 0
        var(--space-6);

    padding:
        var(--space-2)
        var(--space-3);

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

    border-radius:
        var(--radius-pill);

    background:
        var(--color-neutral-50);

    color:
        var(--color-teal-700);

    font-size:
        var(--text-xs);

    font-weight:
        var(--weight-bold);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.foundation-status__eyebrow::before {
    width:
        0.5rem;

    height:
        0.5rem;

    border-radius:
        50%;

    background:
        var(--color-teal-500);

    content:
        "";
}


.foundation-status h1 {
    position:
        relative;

    max-width:
        13ch;

    margin:
        0;

    color:
        var(--color-text-strong);

    font-size:
        var(--text-4xl);

    font-weight:
        var(--weight-bold);

    letter-spacing:
        -0.035em;

    line-height:
        var(--leading-tight);
}


.foundation-status__lead {
    position:
        relative;

    max-width:
        42rem;

    margin:
        var(--space-6)
        0 0;

    color:
        var(--color-text-muted);

    font-size:
        var(--text-lg);
}


.foundation-status__signals {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        var(--space-4);

    margin:
        var(--space-10)
        0 0;

    padding:
        0;

    list-style:
        none;
}


.foundation-status__signals li {
    min-height:
        7rem;

    padding:
        var(--space-5);

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

    border-radius:
        var(--radius-lg);

    background:
        var(--color-neutral-25);
}


.foundation-status__signals strong {
    display:
        block;

    margin-bottom:
        var(--space-2);

    color:
        var(--color-text-strong);

    font-size:
        var(--text-sm);
}


.foundation-status__signals span {
    color:
        var(--color-text-muted);

    font-size:
        var(--text-sm);
}


/* --------------------------------------------------
   Footer
   -------------------------------------------------- */


.site-footer {
    border-top:
        1px solid
        var(--color-border);

    background:
        var(--color-surface);
}


.site-footer__inner {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        var(--space-4);

    padding-block:
        var(--space-6);

    color:
        var(--color-text-muted);

    font-size:
        var(--text-sm);
}


.site-footer p {
    margin:
        0;
}


/* --------------------------------------------------
   Enhanced mobile navigation
   -------------------------------------------------- */


@media (max-width: 47.999rem) {

    .app-main {
        padding-block:
            var(--space-8);
    }


    .site-nav[data-enhanced="true"]
    .site-nav__toggle {
        display:
            inline-flex;
    }


    .site-nav[data-enhanced="true"]
    .site-nav__list {
        display:
            none;

        position:
            absolute;

        right:
            0;

        top:
            calc(100% + var(--space-2));

        min-width:
            13rem;

        padding:
            var(--space-3);

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

        border-radius:
            var(--radius-lg);

        background:
            var(--color-surface);

        box-shadow:
            var(--shadow-md);
    }


    .site-nav[data-enhanced="true"]
    [data-nav-menu] {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .site-nav[data-enhanced="true"]
    a {
        display:
            flex;

        width:
            100%;
    }


    .site-nav[data-enhanced="true"][data-open="true"]
    .site-nav__list {
        display:
            flex;
    }


    .foundation-status__signals {
        grid-template-columns:
            1fr;
    }


    .site-footer__inner {
        flex-direction:
            column;
    }

}


/* --------------------------------------------------
   Desktop navigation
   -------------------------------------------------- */


@media (min-width: 48rem) {

    .site-nav__toggle {
        display:
            none;
    }


    .site-nav__list {
        display:
            flex;
    }

}

/* CONFIVATE production header logo */
.site-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    flex-shrink: 0;
    color: #073f32;
    text-decoration: none;
}

.site-brand-logo:hover,
.site-brand-logo:focus-visible {
    color: #073f32;
    text-decoration: none;
}

.site-brand-logo__mark {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex: 0 0 44px;
}

.site-brand-logo__wordmark {
    display: inline-block;
    color: #073f32;
    font-size: 1.12rem;
    font-weight: 750;
    letter-spacing: 0.17em;
    line-height: 1;
    white-space: nowrap;
}

.site-brand-logo__accent {
    color: #d99a00;
}

@media (max-width: 38rem) {
    .site-brand-logo {
        gap: 0.5rem;
    }

    .site-brand-logo__mark {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .site-brand-logo__wordmark {
        font-size: 0.95rem;
        letter-spacing: 0.12em;
    }
}