/* ==========================================================================
   Public (logged-out) top nav — shared across every marketing page.

   One geometry, themed per page through the custom properties on `.qg-topnav`.
   Pages that need a different accent set the vars in a modifier class rather
   than redeclaring layout, so the bar height stays identical everywhere.

   Load this AFTER the page stylesheet: several pages carry broad rules like
   `body.letters-page a { color: inherit }` that tie on specificity.
   ========================================================================== */

:root {
    --qg-topnav-pad-x: 1.5rem;
    --qg-topnav-pad-y: 0.65rem;
    --qg-topnav-logo-h: 56px;
    --qg-topnav-toggle-size: 42px;
    /* Derived from whichever control is tallest, plus gutters and border, so
       pages reserving space can't drift out of sync with the rendered height. */
    --qg-topnav-offset: calc(
        max(var(--qg-topnav-logo-h), var(--qg-topnav-toggle-size)) +
        2 * var(--qg-topnav-pad-y) + 1px
    );
}

.qg-topnav {
    /* Default theme: blue glass with a white pill that warms to gold. */
    --qg-topnav-bg: rgba(0, 40, 100, 0.72);
    --qg-topnav-blur: blur(16px) saturate(160%);
    --qg-topnav-border: rgba(255, 255, 255, 0.1);
    --qg-topnav-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
    --qg-topnav-link: rgba(255, 255, 255, 0.82);
    --qg-topnav-link-hover: #ffffff;
    --qg-topnav-cta-bg: #ffffff;
    --qg-topnav-cta-fg: #004aad;
    --qg-topnav-cta-bg-hover: #ffd700;
    --qg-topnav-cta-fg-hover: #00317a;
    --qg-topnav-cta-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    --qg-topnav-cta-shadow-hover: 0 10px 26px rgba(255, 215, 0, 0.35);
    --qg-topnav-cta-ring: rgba(255, 255, 255, 0.55);

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: block;
    margin: 0;
    padding: 0;
    background: var(--qg-topnav-bg);
    -webkit-backdrop-filter: var(--qg-topnav-blur);
    backdrop-filter: var(--qg-topnav-blur);
    border-bottom: 1px solid var(--qg-topnav-border);
    box-shadow: var(--qg-topnav-shadow);
    /* Poppins regardless of the host page's body font, so the bar reads the
       same on the serif/Manrope letters pages as it does on home. */
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Apprenticeship's deep-navy canvas and violet CTA. */
.qg-topnav--violet {
    --qg-topnav-bg: rgba(7, 23, 68, 0.82);
    --qg-topnav-blur: blur(14px);
    --qg-topnav-border: rgba(255, 255, 255, 0.08);
    --qg-topnav-shadow: none;
    --qg-topnav-cta-bg: linear-gradient(135deg, #6d3aed 0%, #4f2ad9 100%);
    --qg-topnav-cta-fg: #ffffff;
    --qg-topnav-cta-bg-hover: linear-gradient(135deg, #6d3aed 0%, #4f2ad9 100%);
    --qg-topnav-cta-fg-hover: #ffffff;
    --qg-topnav-cta-shadow: 0 6px 20px rgba(109, 58, 237, 0.35);
    --qg-topnav-cta-shadow-hover: 0 10px 26px rgba(109, 58, 237, 0.45);
    --qg-topnav-cta-ring: rgba(139, 92, 246, 0.55);
}

/* --------------------------------------------------------------------------
   Bar
   -------------------------------------------------------------------------- */
.qg-topnav .qg-topnav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--qg-topnav-pad-y) var(--qg-topnav-pad-x);
    box-sizing: border-box;
}

.qg-topnav .qg-topnav-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    flex-shrink: 0;
}

.qg-topnav .qg-topnav-logo img {
    display: block;
    height: var(--qg-topnav-logo-h);
    width: auto;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Desktop links
   -------------------------------------------------------------------------- */
.qg-topnav .qg-topnav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    /* Set here too so pages whose `a` rules force `color: inherit` still
       land on the right colour. */
    color: var(--qg-topnav-link);
}

.qg-topnav a.qg-topnav-link {
    color: var(--qg-topnav-link);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.qg-topnav a.qg-topnav-link:hover,
.qg-topnav a.qg-topnav-link:focus-visible,
.qg-topnav a.qg-topnav-link.is-active {
    color: var(--qg-topnav-link-hover);
}

/* --------------------------------------------------------------------------
   Primary CTA — shared by the desktop list and the compact mobile cluster
   -------------------------------------------------------------------------- */
.qg-topnav a.qg-topnav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    background: var(--qg-topnav-cta-bg);
    color: var(--qg-topnav-cta-fg);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--qg-topnav-cta-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease,
        background 0.25s ease, color 0.25s ease;
    animation: qg-topnav-cta-pulse 2s infinite;
}

/* The pulse animates box-shadow, which would otherwise outrank the hover
   shadow, so it's switched off once the pointer is on the button. */
.qg-topnav a.qg-topnav-cta:hover,
.qg-topnav a.qg-topnav-cta:focus-visible {
    animation: none;
    background: var(--qg-topnav-cta-bg-hover);
    color: var(--qg-topnav-cta-fg-hover);
    transform: translateY(-2px);
    box-shadow: var(--qg-topnav-cta-shadow-hover);
}

.qg-topnav a.qg-topnav-cta:active {
    animation: none;
    transform: translateY(0);
    box-shadow: var(--qg-topnav-cta-shadow);
    transition-duration: 0.09s;
}

.qg-topnav a.qg-topnav-cta i {
    font-size: 0.85em;
}

/* Expanding ring. The resting drop shadow is repeated in every frame so it
   isn't dropped while the animation owns the box-shadow property. */
@keyframes qg-topnav-cta-pulse {
    0% {
        box-shadow: var(--qg-topnav-cta-shadow),
            0 0 0 0 var(--qg-topnav-cta-ring);
    }
    70% {
        box-shadow: var(--qg-topnav-cta-shadow), 0 0 0 10px transparent;
    }
    100% {
        box-shadow: var(--qg-topnav-cta-shadow), 0 0 0 0 transparent;
    }
}

/* --------------------------------------------------------------------------
   Compact cluster shown once the desktop list is hidden
   -------------------------------------------------------------------------- */
.qg-topnav .qg-topnav-actions {
    display: none;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
    color: var(--qg-topnav-link);
}

.qg-topnav a.qg-topnav-login {
    color: var(--qg-topnav-link);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.qg-topnav a.qg-topnav-login:hover {
    color: var(--qg-topnav-link-hover);
}

.qg-topnav .qg-topnav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--qg-topnav-toggle-size);
    height: var(--qg-topnav-toggle-size);
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.qg-topnav .qg-topnav-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* --------------------------------------------------------------------------
   Collapsible menu (pages with section links)
   -------------------------------------------------------------------------- */
.qg-topnav .qg-topnav-menu {
    display: none;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.qg-topnav .qg-topnav-menu.is-expanded {
    max-height: 520px;
}

/* The divider sits inside the clipped area so a collapsed menu adds no height
   to the bar — otherwise pages with section links reserve one pixel too few. */
.qg-topnav .qg-topnav-menu-inner {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem var(--qg-topnav-pad-x) 1rem;
    box-sizing: border-box;
    border-top: 1px solid var(--qg-topnav-border);
}

.qg-topnav a.qg-topnav-menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.qg-topnav a.qg-topnav-menu-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.qg-topnav a.qg-topnav-menu-link i {
    width: 1.25rem;
    text-align: center;
    font-size: 1rem;
}

/* Admin shortcut, shown only to staff. */
.qg-topnav a.qg-topnav-link.qg-topnav-admin,
.qg-topnav a.qg-topnav-menu-link.qg-topnav-admin {
    color: #ffcb05;
}

.qg-topnav a.qg-topnav-link.qg-topnav-admin:hover,
.qg-topnav a.qg-topnav-menu-link.qg-topnav-admin:hover {
    color: #ffe566;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    :root {
        --qg-topnav-logo-h: 46px;
    }

    .qg-topnav .qg-topnav-links--desktop {
        display: none !important;
    }

    .qg-topnav .qg-topnav-actions {
        display: flex;
    }

    .qg-topnav--menu .qg-topnav-menu {
        display: block;
    }
}

/* Bars carrying several in-page section links run out of room well before the
   plain Sign In / Get Started pair does, so they fold into the hamburger
   sooner. The logo still steps down at 860px, keeping every bar equal height. */
@media (max-width: 1100px) {
    .qg-topnav--sections .qg-topnav-links--desktop {
        display: none !important;
    }

    .qg-topnav--sections .qg-topnav-actions {
        display: flex;
    }

    .qg-topnav--sections .qg-topnav-menu {
        display: block;
    }
}

/* Smallest phones: step the logo down again so the CTA keeps its full label. */
@media (max-width: 360px) {
    :root {
        --qg-topnav-logo-h: 38px;
        --qg-topnav-toggle-size: 38px;
    }
}

/* Long CTA labels collapse to a short form on small phones so they never wrap. */
.qg-topnav .qg-topnav-cta-short {
    display: none;
}

@media (max-width: 480px) {
    :root {
        --qg-topnav-pad-x: 1rem;
        --qg-topnav-pad-y: 0.55rem;
    }

    /* The 3:1 wordmark leaves no room for both actions on a phone, so the
       secondary text link gives way to the CTA. */
    .qg-topnav a.qg-topnav-login {
        display: none;
    }

    /* The trailing "Free" in "Get Started Free". */
    .qg-topnav .qg-topnav-cta-trim {
        display: none;
    }

    .qg-topnav .qg-topnav-cta-full {
        display: none;
    }

    .qg-topnav .qg-topnav-cta-short {
        display: inline;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qg-topnav a.qg-topnav-cta {
        animation: none;
        transition: none;
    }

    .qg-topnav a.qg-topnav-cta:hover,
    .qg-topnav a.qg-topnav-cta:focus-visible,
    .qg-topnav a.qg-topnav-cta:active {
        transform: none;
    }

    .qg-topnav .qg-topnav-menu {
        transition: none;
    }
}