/* header.css — Quantblocks global header
 * Self-contained: defines its own tokens on .qb-header so it can ride
 * on top of any page's existing CSS without leaking variables.
 * Built on Carbon Web Components UI Shell with our mint accent. */

/* =====================================================================
   Token scope — local to .qb-header, no global pollution
   ===================================================================== */
.qb-header {
    /* Surfaces */
    --hd-bg:        #0A0A0A;
    --hd-elev-1:    #1C1C1C;
    --hd-elev-2:    #242424;
    --hd-rule:      #1F1F1F;
    --hd-rule-2:    #2A2A2A;
    --hd-rule-hi:   #3A3A3A;

    /* Text */
    --hd-text:        #FFFFFF;
    --hd-text-soft:   #EDEDED;
    --hd-text-faint:  #797979;

    /* Mint accent */
    --hd-mint:        #65D6A5;
    --hd-mint-hover:  #84E0BA;
    --hd-mint-soft:   rgba(101, 214, 165, 0.14);
    --hd-mint-ink:    #04231A;

    /* Carbon token overrides for the header scope */
    --cds-background: var(--hd-bg);
    --cds-background-hover: var(--hd-elev-1);
    --cds-background-active: var(--hd-elev-2);
    --cds-text-primary: var(--hd-text);
    --cds-link-primary: var(--hd-text-soft);
    --cds-link-primary-hover: var(--hd-text);
    --cds-border-subtle-01: var(--hd-rule);
    --cds-button-primary: var(--hd-mint);
    --cds-button-primary-hover: var(--hd-mint-hover);
    --cds-button-primary-active: #4DBE8E;
    --cds-button-tertiary: var(--hd-mint);
    --cds-button-tertiary-hover: var(--hd-mint-hover);
    --cds-button-tertiary-active: #4DBE8E;
    --cds-text-on-color: var(--hd-mint-ink);
    --cds-focus: var(--hd-mint);
    --cds-interactive: var(--hd-mint);

    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 48px;
    background: var(--hd-bg);
    border-bottom: 1px solid var(--hd-rule);
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    /* Lock the layout left-edge to the viewport on every page so the
       brand + nav buttons sit at exactly the same x-position on landing,
       dashboard, settings, etc. — regardless of the page's own container
       padding or max-width. */
    box-sizing: border-box;
}
.qb-header::part(header) {
    background: var(--hd-bg);
    border-bottom: 1px solid var(--hd-rule);
    width: 100%;
    box-sizing: border-box;
}

/* Hide undefined Carbon custom elements until their JS loads — prevents
   the header from rendering with native HTML defaults first, then
   re-laying-out once Carbon hydrates. Reserve the 48px slot so layout
   stays stable. */
cds-button:not(:defined),
cds-link:not(:defined),
cds-header:not(:defined),
cds-header-name:not(:defined),
cds-header-nav:not(:defined),
cds-header-menu-item:not(:defined),
cds-header-global-action:not(:defined) { visibility: hidden; }
cds-header:not(:defined) { display: block; height: 48px; }
.qb-header > .qb-header__brand,
.qb-header > .qb-header__nav,
.qb-header > .qb-header__actions {
    position: relative;
    z-index: 1;
}

/* =====================================================================
   Brand — clickable logo block
   ===================================================================== */
.qb-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 0 16px;
    color: var(--hd-text);
    text-decoration: none;
    transition: background-color 0.12s ease;
    flex-shrink: 0;
}
.qb-header__brand:hover { background: var(--hd-elev-1); color: var(--hd-text); }
.qb-header__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--hd-mint-soft);
    color: var(--hd-mint);
    flex-shrink: 0;
    transition: background-color 0.12s ease;
}
.qb-header__brand:hover .qb-header__brand-mark { background: rgba(101, 214, 165, 0.22); }
.qb-header__brand-name {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--hd-text);
    white-space: nowrap;
}

/* =====================================================================
   Left-side nav (Pricing, Dashboard) and right-side actions share rules
   ===================================================================== */
.qb-header__nav {
    display: inline-flex;
    align-items: center;
    height: 100%;
    gap: 0;
    margin: 0;
    padding: 0;
}
.qb-header__actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding-right: 0;
    height: 100%;
}
.qb-header__nav > *,
.qb-header__actions > * {
    box-sizing: border-box;
    height: 40px;
    flex-shrink: 0;
}

.qb-header__nav cds-button,
.qb-header__actions cds-button {
    display: inline-flex;
    align-items: center;
    margin: 0;
}
/* Defence in depth: if any page-level CSS adds margin between cds-buttons
   (a common pattern for stacked CTAs), neutralise it inside the header
   so Pricing/Dashboard etc. never drift sideways. */
.qb-header cds-button + cds-button { margin-left: 0; }
.qb-header__nav cds-button::part(button),
.qb-header__actions cds-button::part(button) {
    box-sizing: border-box;
    height: 40px !important;
    min-height: 40px;
    max-height: 40px;
    min-width: 124px;
    padding-inline: 18px;
    justify-content: center;
    transform: none !important;
}
.qb-header__nav cds-button::part(button):focus,
.qb-header__nav cds-button::part(button):focus-visible,
.qb-header__actions cds-button::part(button):focus,
.qb-header__actions cds-button::part(button):focus-visible {
    outline-offset: -3px;
}

/* =====================================================================
   Language toggle
   ===================================================================== */
.qb-header__lang {
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin: 0;
    border: 1px solid var(--hd-rule-2);
    background: var(--hd-elev-1);
    box-sizing: border-box;
}
.qb-header__lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 10px;
    font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--hd-text-faint);
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.qb-header__lang-btn + .qb-header__lang-btn { border-left: 1px solid var(--hd-rule-2); }
.qb-header__lang-btn:hover { color: var(--hd-text-soft); background: var(--hd-elev-2); }
.qb-header__lang-btn--active { color: var(--hd-mint); background: var(--hd-elev-2); }

/* =====================================================================
   Icon link (settings, login, logout) — works on <a> AND <button>
   ===================================================================== */
.qb-header__icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--hd-text-faint);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    transition: color 0.12s ease, background-color 0.12s ease;
}
.qb-header__icon-link:hover {
    color: var(--hd-text);
    background: var(--hd-elev-1);
}
.qb-header__icon-link:focus-visible {
    outline: 2px solid var(--hd-mint);
    outline-offset: -3px;
}

.qb-header__logout { display: inline-flex; align-items: center; height: 40px; }

/* =====================================================================
   Mobile — collapse to brand + essentials
   ===================================================================== */
@media (max-width: 720px) {
    .qb-header__brand { padding: 0 12px; }
    .qb-header__brand-name { display: none; }
    .qb-header__lang { display: none; }
    /* Keep Pricing + Dashboard nav visible on mobile so users can
       still navigate between sections (e.g. Settings → Dashboard).
       Buttons get a much tighter footprint to fit on phone widths. */
    .qb-header__nav cds-button::part(button),
    .qb-header__actions cds-button::part(button) {
        min-width: 0;
        padding-inline: 12px;
        font-size: 13px;
    }
}
@media (max-width: 380px) {
    /* Very narrow phones — keep Dashboard but drop Pricing to free
       horizontal space. Pricing is reachable from the footer. */
    .qb-header__nav cds-button:first-child { display: none; }
}