@import '_content/FlexCore/FlexCore.z0qmvsctcy.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
.site-shell[b-4h3o76wn5e] {
    min-height: 100vh;
    color: var(--ink);
}

.site-header[b-4h3o76wn5e] {
    background: rgba(253, 251, 246, 0.86);
    border-bottom: 1px solid rgba(18, 33, 47, 0.08);
    position: sticky;
    top: 0;
    z-index: 20;
    /* A centred flex row, so the three items sit together as one group in the
       middle of the header. The alternative — a three-column grid with the nav in
       an `auto` centre column — centres the NAV on the page but leaves the group
       looking off-centre, because the gold pill is roughly twice the width of the
       LinkedIn button. Only one of the two can be centred; this centres the group.
       Reverts to a grid below 820px, where the nav takes its own row. */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 18px 0;
    backdrop-filter: blur(22px);
}

/* align-self/align-items: stretch make this pill exactly as tall as the nav
   beside it, without hard-coding a height. The header row is sized by its
   tallest child — the nav — so the pill simply fills it. A literal `65px` would
   drift the moment the nav's padding, border or font size changed, and nothing
   would flag it. Width still hugs the text: only the vertical is matched. */
.brand-mark[b-4h3o76wn5e] {
    display: inline-flex;
    align-self: stretch;
    align-items: stretch;
    gap: 12px;
    width: max-content;
    color: var(--paper);
    text-decoration: none;
}

.brand-mark > span[b-4h3o76wn5e] {
    display: flex;
}


/* Gold-filled. This pill held the wordmark until 2026-08-28 and now holds the
   Corporate Training link — the strongest element in the header carrying the
   thing being sold. Dark text on gold measures 10.8:1.

   nowrap because the label went from 11 characters to 18. The header is a
   three-column grid whose outer columns are minmax(0, 1fr), so without it the
   longer label wraps to two lines and makes the header taller than the nav. */
.brand-mark strong[b-4h3o76wn5e] {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 9px 18px;
    /* Black rather than the old translucent gold, so the pill reads as a defined
       object against the cream header instead of dissolving into it. Requested
       2026-08-29 to make it more prominent. box-sizing is border-box globally, so
       the extra width comes out of the padding and the pill does not grow. */
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--gold-bright);
    color: var(--ink);
    box-shadow: 0 14px 34px rgba(244, 184, 96, 0.32);
    line-height: 1.05;
    font-size: 0.98rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    transition: background 180ms ease, transform 180ms ease;
}

.brand-mark:hover strong[b-4h3o76wn5e] {
    background: #ffcc7a;
    transform: translateY(-1px);
}

.site-nav[b-4h3o76wn5e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Padding grows with the border so the links are not crowded against the
       frame — a thick border with tight padding reads as heavy, not expensive. */
    padding: 9px;
    /* 4px at full strength. This is the element carrying the brand on a light
       page; at 1px translucent it was a hairline, at 2px an outline, and at 4px
       it reads as a deliberate frame. */
    border: 4px solid #f4b860;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(18, 33, 47, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

.site-nav a[b-4h3o76wn5e] {
    padding: 9px 14px;
    border-radius: 999px;
    color: var(--paper);
    font-size: 0.86rem;
    font-weight: 900;
    text-decoration: none;
    /* Two-word labels would otherwise wrap inside the pill on narrow screens,
       making that one item taller than the rest and knocking the row out of
       alignment. The nav already scrolls sideways, so keeping links on one line
       costs nothing. */
    white-space: nowrap;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.site-nav a:hover[b-4h3o76wn5e],
.site-nav a:focus-visible[b-4h3o76wn5e] {
    background: rgba(244, 184, 96, 0.14);
    color: var(--paper);
    transform: translateY(-1px);
}

/* The page you are on. Only /corporate-training is a real route — the other four
   items are home-page fragments, which never reach the server. Marked with
   aria-current rather than a class so the state is announced, not just drawn. */
/* Matches both tokens. "page" is the route, set server-side; "location" is the
   section you have scrolled to, set by js/nav-scrollspy.js — ARIA's token for a
   position within the current page rather than a different page. They look the
   same deliberately: to a reader it is simply "where you are". */
.site-nav a[aria-current][b-4h3o76wn5e],
.site-nav a[aria-current]:hover[b-4h3o76wn5e] {
    color: var(--mint-bright);
    background-color: var(--panel-dark);
    background-image: linear-gradient(rgba(45, 212, 191, 0.08), rgba(45, 212, 191, 0.08));
}

.header-cta[b-4h3o76wn5e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 17px;
    border: 1px solid rgba(45, 212, 191, 0.45);
    border-radius: 999px;
    color: var(--mint-bright);
    font-weight: 800;
    text-decoration: none;
    /* Deliberately dark on a light page: the tint is the original, painted over
       an explicit dark base so it composites the same way it used to. */
    background-color: var(--panel-dark);
    background-image: linear-gradient(rgba(45, 212, 191, 0.08), rgba(45, 212, 191, 0.08));
}

#blazor-error-ui[b-4h3o76wn5e] {
    color-scheme: light only;
    display: none;
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1000;
    max-width: 420px;
    padding: 1rem 3rem 1rem 1.1rem;
    border: 1px solid rgba(239, 123, 69, 0.5);
    border-radius: 18px;
    background: #fff4df;
    color: #331d12;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}

#blazor-error-ui .reload[b-4h3o76wn5e] {
    color: #7c2d12;
    font-weight: 800;
}

#blazor-error-ui .dismiss[b-4h3o76wn5e] {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    cursor: pointer;
}

@media (max-width: 820px) {
    /* Back to a grid: the nav needs a row of its own, which a single flex line
       cannot give it. Brand and LinkedIn share the first row at the outer edges —
       the normal mobile header shape, and there is no centre to gather around
       once the nav is no longer between them.

       All three are placed explicitly. Left to auto-placement, the nav's
       `grid-column: 1 / -1` cannot fit beside the brand, so it takes row 2 and
       pushes LinkedIn down to a row of its own — a three-row header costing about
       280px, roughly a third of the first screen on a phone. Photographed on a
       real handset 2026-08-28; the emulator could not reproduce it. */
    .site-header[b-4h3o76wn5e] {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .brand-mark[b-4h3o76wn5e] {
        grid-row: 1;
        grid-column: 1;
        justify-self: start;
    }

    .header-cta[b-4h3o76wn5e] {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
    }

    .site-nav[b-4h3o76wn5e] {
        grid-row: 2;
        grid-column: 1 / -1;
        justify-content: space-between;
        width: 100%;
        overflow-x: auto;
    }
}

@media (max-width: 560px) {
    .site-header[b-4h3o76wn5e] {
        width: min(100% - 24px, 1180px);
        gap: 0.75rem;
        padding-top: 12px;
    }

    .header-cta[b-4h3o76wn5e] {
        min-height: 38px;
        padding: 0 13px;
        font-size: 0.84rem;
    }

    /* Tighten the nav so all five items fit without a sideways swipe. At 375px
       the row overflowed its pill by 75px and "Method" was cut off mid-word —
       and the only clue that it scrolled was the clipping itself, which most
       people will not read as an invitation to swipe.

       The room comes from the links' own padding: 14px a side across five items
       is 140px, more than the shortfall. 14 → 6 recovers 80px, the 6px gap → 4px
       another 8px, and the pill's own padding 9px → 8px a further 2px. That is
       90px against a 75px shortfall, leaving ~15px of slack so a slightly wider
       rendering of the same words does not put it back into overflow.

       Only below 560px. Above it the nav has room to spare and this spacing
       would read as cramped rather than deliberate. The link height is
       untouched, so tap targets stay 39px tall. */
    .site-nav[b-4h3o76wn5e] {
        gap: 4px;
        padding: 8px;
    }

    .site-nav a[b-4h3o76wn5e] {
        padding-left: 6px;
        padding-right: 6px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-sy0c5q70rw],
.components-reconnect-repeated-attempt-visible[b-sy0c5q70rw],
.components-reconnect-failed-visible[b-sy0c5q70rw],
.components-pause-visible[b-sy0c5q70rw],
.components-resume-failed-visible[b-sy0c5q70rw],
.components-rejoining-animation[b-sy0c5q70rw] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-sy0c5q70rw],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-sy0c5q70rw],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-sy0c5q70rw],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-sy0c5q70rw],
#components-reconnect-modal.components-reconnect-retrying[b-sy0c5q70rw],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-sy0c5q70rw],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-sy0c5q70rw],
#components-reconnect-modal.components-reconnect-failed[b-sy0c5q70rw],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-sy0c5q70rw] {
    display: block;
}


#components-reconnect-modal[b-sy0c5q70rw] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-sy0c5q70rw 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-sy0c5q70rw 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-sy0c5q70rw 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-sy0c5q70rw]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-sy0c5q70rw 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-sy0c5q70rw {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-sy0c5q70rw {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-sy0c5q70rw {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-sy0c5q70rw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-sy0c5q70rw] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-sy0c5q70rw] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-sy0c5q70rw] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-sy0c5q70rw] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-sy0c5q70rw] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-sy0c5q70rw] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-sy0c5q70rw 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-sy0c5q70rw] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-sy0c5q70rw {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}