/* itsrlabs/apps/platform/static/css/_shared/nav_header_footer_2_variant_f.css */
/* Pill header: card + expand-on-hover brand pill, pill-shaped nav, account pill dropdown. Import after nav_header_footer_2.css. */

/* ========= PILL HEADER — NAV WRAPPER ========= */
.itsr-header.itsr-header--pill {
    background: linear-gradient(180deg, rgba(243, 244, 246, 0.95) 0%, rgba(249, 250, 251, 0) 100%);
    border: none;
    box-shadow: none;
    padding: 1.25rem 1.5rem 0rem;
    min-height: 0;
}

body:has(.itsr-header--pill) main {
    padding-top: 0rem;
}

/* Only the direct child container (avoid affecting nested .container and warping layout) */
body:has(.itsr-header--pill) main > .container {
    margin-top: 25px;
}

.itsr-header.itsr-header--pill .navbar {
    min-height: 0;
    padding: 0;
}

/* ========= PILL HEADER CARD (the “card” that holds the pill) ========= */
.itsr-pill-header-card {
    --pill-card-bg: #ffffff;
    --pill-card-border: rgba(11, 110, 79, 0.12);
    --pill-card-shadow: 0 4px 24px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
    --pill-card-radius: 1.25rem;
    --pill-brand-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --pill-brand-text: #f8fafc;
    --pill-brand-font: 'Syne', sans-serif;
    --pill-accent: var(--p1-dark-emerald);
    --pill-accent-soft: rgba(11, 110, 79, 0.08);
    --pill-accent-hover: rgba(11, 110, 79, 0.14);
    --pill-text: var(--clr-text-main);
    --pill-text-muted: var(--clr-text-muted);
    --pill-nav-radius: 9999px;
    --pill-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    max-width: 1200px;
    margin-inline: auto;
    padding: 0.75rem 1rem;
    background: var(--pill-card-bg);
    border: 1px solid var(--pill-card-border);
    border-radius: var(--pill-card-radius);
    box-shadow: var(--pill-card-shadow);
    transition: box-shadow var(--pill-transition), border-color var(--pill-transition);
}

.itsr-pill-header-card:hover,
.itsr-pill-header-card.itsr-pill-header-card--expanded {
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.1), 0 2px 8px rgba(15, 23, 42, 0.06);
    border-color: rgba(11, 110, 79, 0.18);
}

/* Full-width variant: bar spans the page content width (matches .mk-wrap) instead of
   shrink-wrapping — needed because .navbar is display:flex, which otherwise shrinks
   the card to its content width regardless of max-width. Scoped so it only affects
   the home/public nav; scRIPT_nav_options.html keeps the original shrink-wrapped pill. */
.itsr-pill-header-card.itsr-pill-header-card--full {
    width: 100%;
    max-width: 1180px;
}

.itsr-pill-header-card--full .itsr-pill-header-inner {
    justify-content: space-between;
}

.itsr-pill-header-card--full .itsr-pill-brand-zone {
    justify-content: flex-start;
    flex: 1 1 0;
}

/* Inner flex: brand zone + account zone */
.itsr-pill-header-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
}

.itsr-pill-header-card--authenticated .itsr-pill-header-inner {
    justify-content: space-between;
}

/* ========= BRAND ZONE (main pill + expand panel) ========= */
.itsr-pill-brand-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.itsr-pill-header-card--authenticated .itsr-pill-brand-zone {
    justify-content: flex-start;
    flex: 1 1 0;
}

.itsr-pill-brand-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0;
    position: relative;
    cursor: default;
    max-width: 100%;
    min-width: 0;
}

/* Main pill — “ITSR LABS INC.” (nameplate) */
.itsr-pill-brand {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.5rem;
    border-radius: var(--pill-nav-radius);
    background: var(--pill-brand-bg);
    color: var(--pill-brand-text);
    text-decoration: none;
    font-family: var(--pill-brand-font);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
    transition: background var(--pill-transition), color var(--pill-transition);
}

.itsr-pill-brand:hover {
    color: var(--pill-brand-text);
    background: linear-gradient(135deg, #020617 0%, #111827 100%);
}

.itsr-pill-brand-text {
    white-space: nowrap;
}

/* Expand panel (nav options) — to the right of nameplate; expands horizontally on hover */
.itsr-pill-expand {
    display: grid;
    grid-template-columns: 0fr;
    overflow: hidden;
    opacity: 0;
    transition:
        grid-template-columns 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.25s ease 0.06s;
}

.itsr-pill-header-card--expanded .itsr-pill-expand {
    grid-template-columns: 1fr;
    opacity: 1;
}

.itsr-pill-expand-inner {
    display: flex;
    align-items: center;
    padding-left: 0.5rem;
    white-space: nowrap;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.itsr-pill-expand-inner::-webkit-scrollbar {
    display: none;
}

.itsr-nav-main.itsr-nav-main--pill {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* In horizontal expand: single row to the right of nameplate */
.itsr-pill-expand-inner .itsr-nav-main--pill {
    flex-wrap: nowrap;
}

.itsr-nav-main--pill .nav-item {
    display: block;
}

/* Nav links — pill-shaped, same hover feel as before but pill style */
.itsr-nav-main--pill .itsr-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    border-radius: var(--pill-nav-radius);
    color: var(--pill-text-muted);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color var(--pill-transition), background var(--pill-transition);
}

/* Nav link hover: very faded dark blue (not green); Login stays green, Logout stays red */
.itsr-nav-main--pill .itsr-nav-link:hover {
    color: var(--p1-dusk-blue);
    background: rgba(46, 80, 119, 0.06);
}

.itsr-nav-main--pill .itsr-nav-link.active {
    color: var(--p1-dusk-blue);
    background: rgba(46, 80, 119, 0.06);
    font-weight: 600;
}

.itsr-nav-main--pill .itsr-nav-icon {
    font-size: 1rem;
    opacity: 0.9;
}

.itsr-nav-main--pill .itsr-nav-link--cta {
    color: #fff;
    background: var(--p1-dark-emerald);
}

.itsr-nav-main--pill .itsr-nav-link--cta:hover {
    background: #0a5c3f;
    color: #fff;
}

.itsr-nav-main--pill .itsr-nav-link--logout:hover {
    color: var(--p1-spicy-paprika);
    background: rgba(207, 92, 54, 0.08);
}

/* ========= ACCOUNT ZONE (logged-in dropdown, or disabled "coming soon" trigger) ========= */
.itsr-pill-account-zone {
    flex-shrink: 0;
    margin-left: 1rem;
}

.itsr-pill-account-wrapper {
    position: relative;
}

.itsr-pill-account-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--pill-card-border);
    border-radius: var(--pill-nav-radius);
    background: var(--pill-card-bg);
    color: var(--pill-text);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--pill-transition), background var(--pill-transition), box-shadow var(--pill-transition);
}

.itsr-pill-account-trigger:hover {
    color: var(--pill-text);
    border-color: var(--pill-accent);
    background: var(--pill-accent-soft);
}

/* Logged-out state: same shape as the account trigger, greyed out and inert */
.itsr-pill-account-trigger:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.itsr-pill-account-trigger:disabled:hover {
    border-color: var(--pill-card-border);
    background: var(--pill-card-bg);
}

.itsr-pill-account-icon {
    font-size: 1.1rem;
    color: var(--pill-text-muted);
}

.itsr-pill-account-chevron {
    font-size: 0.7rem;
    color: var(--pill-text-muted);
    transition: transform var(--pill-transition);
}

.itsr-pill-account-wrapper--open .itsr-pill-account-chevron {
    transform: rotate(180deg);
}

/* Account dropdown — expands down */
.itsr-pill-account-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.4rem;
    min-width: 180px;
    padding: 0.4rem;
    background: var(--pill-card-bg);
    border: 1px solid var(--pill-card-border);
    border-radius: 0.75rem;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--pill-transition), visibility var(--pill-transition), transform var(--pill-transition);
    z-index: 110;
}

.itsr-pill-account-wrapper--open .itsr-pill-account-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.itsr-pill-dropdown-item {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--pill-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--pill-transition), color var(--pill-transition);
}

.itsr-pill-dropdown-item:hover {
    background: rgba(46, 80, 119, 0.06);
    color: var(--p1-dusk-blue);
}

.itsr-pill-dropdown-divider {
    display: block;
    height: 1px;
    margin: 0.35rem 0;
    background: var(--pill-card-border);
}

.itsr-pill-dropdown-item--logout:hover {
    color: var(--p1-spicy-paprika);
    background: rgba(207, 92, 54, 0.08);
}

/* ========= OPTIONS HINT (ellipsis pill — visible only when collapsed) ========= */

.itsr-pill-options-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1.6rem;
    margin-left: 1rem;
    border: 1px solid var(--pill-card-border);
    border-radius: var(--pill-nav-radius);
    background: var(--pill-card-bg);
    color: var(--pill-text-muted);
    font-size: 1.05rem;
    letter-spacing: 0.15em;
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
    max-width: 100px;
    opacity: 1;
    transition:
        max-width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        padding 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        margin-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.22s ease,
        border-color var(--pill-transition),
        background var(--pill-transition),
        box-shadow var(--pill-transition);
}

.itsr-pill-options-hint:hover {
    border-color: var(--pill-accent);
    background: var(--pill-accent-soft);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

.itsr-pill-header-card--expanded .itsr-pill-options-hint {
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    border-color: transparent;
    opacity: 0;
    pointer-events: none;
}

/* ========= FOOTER (match pill aesthetic) ========= */
.itsr-footer {
    margin-top: auto;
    padding: 2rem 1.5rem;
    background: var(--clr-surface-muted);
    border-top: 1px solid var(--clr-border-subtle);
    color: var(--clr-text-muted);
    font-size: 0.9rem;
}

.itsr-footer-inner {
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.itsr-footer-brand {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    color: var(--clr-text-main);
    letter-spacing: 0.02em;
}

.itsr-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.itsr-footer-links a {
    color: var(--clr-text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--pill-transition);
}

.itsr-footer-links a:hover {
    color: var(--pill-accent);
}

.itsr-footer-copy {
    margin: 0;
    font-size: 0.85rem;
    color: var(--clr-text-muted);
}

@media (max-width: 768px) {
    .itsr-pill-header-card {
        padding: 0.6rem 0.75rem;
    }

    .itsr-pill-brand {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .itsr-pill-expand-inner {
        min-width: 0;
    }

    /* The horizontal expand-on-hover panel has no room beside the nameplate on
       a phone: it collapses into a sliver and the nav renders as clipped icons
       over the brand pill. Drop the panel onto its own full-width row instead.
       display:contents lifts the brand pill and the panel out of their
       wrappers so both become direct flex children of the header inner, which
       is what lets the panel wrap to a second line. Scoped to --full (the
       home/public nav); the scRIPT nav keeps the shrink-wrapped pill. */
    .itsr-pill-header-card--full .itsr-pill-header-inner {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .itsr-pill-header-card--full .itsr-pill-brand-zone,
    .itsr-pill-header-card--full .itsr-pill-brand-trigger {
        display: contents;
    }

    .itsr-pill-header-card--full .itsr-pill-account-zone {
        margin-left: auto;
    }

    .itsr-pill-header-card--full .itsr-pill-expand {
        flex: 1 0 100%;
        order: 3;
        grid-template-columns: 1fr;
        opacity: 1;
        overflow: visible;
    }

    .itsr-pill-header-card--full .itsr-pill-expand-inner {
        padding-left: 0;
    }

    /* One scrolling row, never wrapping: the header is position: absolute and
       the hero reserves a fixed --mk-nav-clearance-top for it, so the card has
       to be a predictable height. Wrapping made it grow with the link count
       (three rows at 320px, more when signed in) and slide under the hero
       copy. Signed-in navs scroll sideways instead; the public three fit. */
    .itsr-pill-header-card--full .itsr-pill-expand-inner .itsr-nav-main--pill {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0.15rem;
    }

    /* Non-full (scRIPT) nav keeps the old stacked treatment. */
    .itsr-pill-header-card:not(.itsr-pill-header-card--full) .itsr-nav-main--pill {
        flex-direction: column;
    }

    .itsr-footer-inner {
        flex-direction: column;
        text-align: center;
    }
}

/* Small phones: tighten the nav row so the public links still fit without
   scrolling at 320px. */
@media (max-width: 480px) {
    .itsr-pill-header-card--full .itsr-nav-main--pill .itsr-nav-link {
        padding: 0.4rem 0.5rem;
        font-size: 0.82rem;
        gap: 0.3rem;
    }

    .itsr-pill-header-card--full .itsr-nav-main--pill .itsr-nav-icon {
        font-size: 0.9rem;
    }
}

/* Narrowest phones (~320px): the nameplate and the account pill together
   exceed the card, so they wrap and add a third row the hero clearance is not
   sized for. Shrink both to keep the card at two rows. */
@media (max-width: 360px) {
    .itsr-pill-header-card--full .itsr-pill-brand {
        padding: 0.45rem 0.75rem;
        font-size: 0.78rem;
        letter-spacing: 0.05em;
    }

    .itsr-pill-header-card--full .itsr-pill-account-trigger {
        padding: 0.35rem 0.6rem;
        font-size: 0.8rem;
        gap: 0.25rem;
    }
}