/* ============================================================
   header.css — EduNudge GeoLab · Plate Tectonics Simulator
   Site header, logo, nav bar, tab strip and tab panels.
   Depends on: base.css (custom properties, resets)
   ============================================================ */

/* ----------------------------------------------------------
   1. SITE HEADER
   ---------------------------------------------------------- */
#site-header {
    position: relative;
    z-index: var(--z-raised);
    height: var(--header-height);
    background: var(--clr-teal);
    border-bottom: 1px solid var(--clr-border-strong);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--sp-5);
    gap: var(--sp-4);
    flex-shrink: 0;

    /* subtle bottom glow */
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45),
        0 1px 0 rgba(232, 108, 47, 0.15);
}

/* ----------------------------------------------------------
   2. LOGO / BRAND
   ---------------------------------------------------------- */
.header-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
    text-decoration: none;
}

.header-brand:hover {
    text-decoration: none;
}

/* Icon badge */
.brand-icon {
    width: 32px;
    height: 32px;
    background: var(--clr-orange);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-md);
    color: var(--clr-white);
    flex-shrink: 0;
    box-shadow: var(--shadow-glow-orange);
    transition: transform var(--dur-normal) var(--ease-spring);
}

.header-brand:hover .brand-icon {
    transform: scale(1.10) rotate(-6deg);
}

/* Text stack */
.brand-text {
    display: flex;
    flex-direction: column;
    line-height: var(--lh-tight);
}

.brand-name {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--clr-white);
    letter-spacing: -0.02em;
}

.brand-name span {
    color: var(--clr-orange);
}

.brand-sub {
    font-size: var(--fs-xs);
    color: var(--clr-text-muted);
    font-weight: var(--fw-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ----------------------------------------------------------
   3. HEADER CENTRE  (page title on wider screens)
   ---------------------------------------------------------- */
.header-title {
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    color: var(--clr-text-secondary);
    letter-spacing: 0.01em;
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-title strong {
    color: var(--clr-text-primary);
}

/* ----------------------------------------------------------
   4. HEADER ACTIONS  (right side)
   ---------------------------------------------------------- */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

/* Icon button — used for info / settings / share */
.header-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    font-size: var(--fs-base);
    transition: color var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}

.header-icon-btn:hover {
    color: var(--clr-white);
    background: var(--clr-teal-light);
    border-color: var(--clr-border-strong);
}

.header-icon-btn:active {
    transform: scale(0.93);
}

/* Canonical URL chip */
.header-url-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--clr-text-muted);
    background: var(--clr-teal-mid);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    padding: 3px var(--sp-3);
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);
}

.header-url-chip i {
    font-size: var(--fs-xs);
    opacity: 0.7;
}

.header-url-chip:hover {
    color: var(--clr-orange-light);
    text-decoration: none;
    border-color: var(--clr-border-strong);
}

/* ----------------------------------------------------------
   5. METRICS BAR
   Thin strip below the header showing headline numbers.
   ---------------------------------------------------------- */
#metrics-bar {
    height: var(--metrics-height);
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    padding-inline: var(--sp-4);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

#metrics-bar::-webkit-scrollbar {
    display: none;
}

/* individual metric cell */
.metric-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: var(--sp-4);
    gap: 1px;
    flex-shrink: 0;
    position: relative;
}

/* vertical divider between cells */
.metric-cell+.metric-cell::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--clr-border);
}

.metric-cell__value {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--clr-orange);
    line-height: var(--lh-tight);
}

.metric-cell__value small {
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    color: var(--clr-text-muted);
}

.metric-cell__label {
    font-size: var(--fs-xs);
    color: var(--clr-text-muted);
    white-space: nowrap;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ----------------------------------------------------------
   6. TAB STRIP
   ---------------------------------------------------------- */
#tab-strip {
    display: flex;
    align-items: stretch;
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    padding-inline: var(--sp-3);
    gap: var(--sp-1);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

#tab-strip::-webkit-scrollbar {
    display: none;
}

/* individual tab button */
.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    /* ← reduced from sp-2 */
    padding: var(--sp-2) var(--sp-2);
    /* ← reduced from sp-3/sp-4 */
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    /* ← reduced from fs-sm */
    font-weight: var(--fw-medium);
    color: var(--clr-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    white-space: nowrap;
    position: relative;
    transition: color var(--dur-normal) var(--ease-out),
        border-color var(--dur-normal) var(--ease-out),
        background var(--dur-normal) var(--ease-out);
    cursor: pointer;
}


.tab-btn i {
    font-size: var(--fs-base);
    transition: color var(--dur-normal) var(--ease-out);
}

.tab-btn:hover {
    color: var(--clr-text-primary);
    background: var(--clr-teal-alpha);
}

.tab-btn.active {
    color: var(--clr-white);
    border-color: var(--clr-orange);
}

.tab-btn.active i {
    color: var(--clr-orange);
}

/* animated active indicator dot */
.tab-btn.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--clr-orange);
    box-shadow: var(--shadow-glow-orange);
}

/* tab count badge */
.tab-btn .tab-count {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    padding: 1px 5px;
    border-radius: var(--radius-full);
    background: var(--clr-teal-light);
    color: var(--clr-text-secondary);
    transition: background var(--dur-normal) var(--ease-out),
        color var(--dur-normal) var(--ease-out);
}

.tab-btn.active .tab-count {
    background: var(--clr-orange-alpha);
    color: var(--clr-orange-light);
}

/* ----------------------------------------------------------
   7. TAB PANELS  (visibility, transitions)
   ---------------------------------------------------------- */
.tab-panel {
    display: none;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    animation: fadeUp var(--dur-slow) var(--ease-out) both;
}

.tab-panel.active {
    display: block;
}

/* Stagger children on panel enter */
.tab-panel.active>* {
    animation: fadeUp var(--dur-slow) var(--ease-out) both;
}

.tab-panel.active>*:nth-child(1) {
    animation-delay: 0ms;
}

.tab-panel.active>*:nth-child(2) {
    animation-delay: 40ms;
}

.tab-panel.active>*:nth-child(3) {
    animation-delay: 80ms;
}

.tab-panel.active>*:nth-child(4) {
    animation-delay: 120ms;
}

.tab-panel.active>*:nth-child(5) {
    animation-delay: 160ms;
}

/* ----------------------------------------------------------
   8. RESPONSIVE — collapse items on small screens
   ---------------------------------------------------------- */

/* ≤ 768 px */
@media (max-width: 768px) {
    #site-header {
        padding-inline: var(--sp-3);
        gap: var(--sp-2);
    }

    .header-title {
        display: none;
    }

    .header-url-chip {
        display: none;
    }

    .brand-sub {
        display: none;
    }

    .brand-name {
        font-size: var(--fs-base);
    }

    .tab-btn {
        padding: var(--sp-2) var(--sp-3);
        font-size: var(--fs-xs);
        gap: var(--sp-1);
    }

    .tab-btn .tab-label {
        display: none;
        /* icon-only on mobile */
    }

    .tab-btn i {
        font-size: var(--fs-md);
    }

    .metric-cell__value {
        font-size: var(--fs-base);
    }

    .metric-cell {
        padding-inline: var(--sp-3);
    }
}

/* ≤ 480 px */
@media (max-width: 480px) {
    #metrics-bar {
        justify-content: flex-start;
    }

    .header-icon-btn {
        display: none;
    }
}

/* ----------------------------------------------------------
   LOGO IMAGE
   ---------------------------------------------------------- */
.brand-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--clr-white);
    /* white bg for logo */
    padding: 2px;
    box-shadow: var(--shadow-glow-orange);
    transition: transform var(--dur-normal) var(--ease-spring);
}

.brand-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: var(--radius-sm);
}

.header-brand:hover .brand-icon {
    transform: scale(1.10) rotate(-4deg);
}


/* ----------------------------------------------------------
   END header.css
   ---------------------------------------------------------- */