/* ============================================================
 * HYGO HEADER — full-replacement header for GeneratePress.
 * All colours are driven by CSS custom properties set inline on
 * the .hygo-header wrapper, so a single :root-scoped variable
 * set styles every child. See inc/module-header.php for the
 * variable list.
 * ============================================================ */

.hygo-header {
    font-family: inherit;
    box-sizing: border-box;
}
.hygo-header *,
.hygo-header *::before,
.hygo-header *::after { box-sizing: border-box; }

/* ---------- Promo bar (top strip) ---------- */
.hh-promo {
    background: var(--hh-promo-bg);
    color: var(--hh-promo-color);
    padding: 10px 16px;
}
.hh-promo-inner {
    max-width: var(--content-width, 1200px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    flex-wrap: wrap;
}
/* Inline badge — the <badge>…</badge> tag inside promo_message renders as
 * this pill. Small vertical padding, rounded, uses admin-configured colours. */
.hh-promo-badge {
    display: inline-block;
    background: var(--hh-promo-badge-bg);
    color: var(--hh-promo-badge-color);
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.95em;
    font-weight: 800;
    line-height: 1.2;
    vertical-align: baseline;
}
/* Inline link — the <link url="…">…</link> tag becomes this anchor. Inherits
 * the promo bar's text colour + adds a subtle underline on hover so it's
 * discoverable without shouting. Can wrap a <badge> — the badge stays styled
 * and the whole thing becomes clickable. */
.hh-promo-inline-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.hh-promo-inline-link:hover {
    color: inherit;
    text-decoration-thickness: 2px;
}
.hh-promo-inline-link .hh-promo-badge { text-decoration: none; }

/* ---------- Main header row ---------- */
.hh-main {
    background: var(--hh-main-bg);
    color: var(--hh-main-color);
    padding: 16px;
    position: relative;
}
.hh-main-inner {
    max-width: var(--content-width, 1200px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
}

/* Burger — mobile only */
.hh-burger {
    display: none;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    color: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}
.hh-burger-icon { font-size: 22px; line-height: 1; }

/* Logo — sizing driven by --hh-logo-height / --hh-logo-height-mobile /
 * --hh-logo-max-width, all set from the admin. The text-logo font-size
 * is a fraction of the height so wordmark logos also grow/shrink with
 * the height control. */
.hh-logo {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    flex: 0 0 auto;
    font-weight: 900;
    font-size: calc(var(--hh-logo-height, 48px) * 0.55);
    line-height: 1;
    font-style: italic;
    letter-spacing: 0.5px;
    color: var(--hh-logo-text-color);
    max-width: var(--hh-logo-max-width, 280px);
}
.hh-logo:hover { text-decoration: none; }
.hh-logo img {
    height: var(--hh-logo-height, 48px);
    width: auto;
    max-width: var(--hh-logo-max-width, 280px);
    display: block;
    object-fit: contain;
}
.hh-logo-svg { display: inline-flex; align-items: center; }
.hh-logo-svg svg {
    height: calc(var(--hh-logo-height, 48px) * 0.92);
    width: auto;
    display: block;
}
.hh-logo-text { color: var(--hh-logo-text-color); }

/* Search */
.hh-search {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    max-width: 720px;
    min-width: 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.hh-search-input {
    flex: 1 1 auto;
    border: 0;
    outline: none;
    padding: 12px 16px;
    font-size: 15px;
    background: transparent;
    min-width: 0;
    color: #111;
}
.hh-search-btn {
    flex: 0 0 auto;
    background: var(--hh-search-btn-bg);
    color: var(--hh-search-btn-color);
    border: 0;
    padding: 0 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hh-search-btn:hover { filter: brightness(1.15); }

/* Trust chip */
.hh-trust {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
}
.hh-trust-icon {
    font-size: var(--hh-trust-icon-size, 34px);
    color: var(--hh-trust-icon-color);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Image variant — sized to match the emoji icon so both variants sit
 * consistently in the header. object-fit:contain protects non-square
 * uploads. max-width scales with the icon size (roughly 1.4×) so wide
 * icons like the stopwatch+lightning still fit cleanly. */
.hh-trust-icon--img { padding: 0; }
.hh-trust-icon--img img {
    height: var(--hh-trust-icon-size, 34px);
    width: auto;
    max-width: calc(var(--hh-trust-icon-size, 34px) * 1.4);
    display: block;
    object-fit: contain;
}
/* Two-line text stack — each line has its own colour AND size set inline
 * (or via CSS var), so we only handle layout here (column direction +
 * tight line-height so the two lines feel like one unit). */
.hh-trust-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    white-space: nowrap;
}
.hh-trust-line { line-height: 1.15; }
.hh-trust-line-1 { font-size: var(--hh-trust-text-size-1, 14px); }
.hh-trust-line-2 { font-size: var(--hh-trust-text-size-2, 14px); font-weight: 700; }

/* Cart */
.hh-cart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    text-decoration: none;
    color: var(--hh-cart-color);
    font-weight: 700;
    font-size: 15px;
    position: relative;
}
.hh-cart:hover { text-decoration: none; color: var(--hh-cart-color); }
.hh-cart-icon { flex: 0 0 auto; }
.hh-cart-label { line-height: 1; }
.hh-cart-badge {
    background: var(--hh-cart-badge-bg);
    color: var(--hh-cart-badge-color);
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    padding: 0 6px;
    line-height: 1;
}

/* Auth strip (Login | Register) — dedicated thin row between promo and
 * main header. Right-aligned by default so it feels like a utility row
 * rather than a call-to-action. Hidden on mobile — the burger panel
 * carries the same links at full tap size. */
.hh-auth-strip {
    background: var(--hh-main-bg);
    border-bottom: 1px solid var(--hh-nav-border);
}
.hh-auth-strip-inner {
    max-width: var(--content-width, 1200px);
    margin: 0 auto;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--hh-auth-color);
    white-space: nowrap;
}
.hh-auth-link {
    color: inherit;
    text-decoration: none;
}
.hh-auth-link:hover { text-decoration: underline; color: inherit; }
.hh-auth-sep { opacity: 0.5; }

/* ---------- Category nav (below main) ---------- */
.hh-nav {
    background: var(--hh-nav-bg);
    color: var(--hh-nav-color);
    border-top: 1px solid var(--hh-nav-border);
    border-bottom: 1px solid var(--hh-nav-border);
}
.hh-nav-inner {
    max-width: var(--content-width, 1200px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 14px 16px;
    flex-wrap: wrap;
}
.hh-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hh-nav-color);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}
.hh-nav-item:hover { opacity: 0.7; color: inherit; }
.hh-nav-emoji { font-size: 18px; line-height: 1; }

/* Mobile panel — hidden by default; opened by burger via [hidden] toggle */
.hh-mobile-panel {
    background: var(--hh-main-bg);
    border-bottom: 1px solid var(--hh-nav-border);
    display: none;
}
.hh-mobile-panel[hidden] { display: none; }
.hh-mobile-panel-inner {
    max-width: var(--content-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}
.hh-mobile-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    color: var(--hh-nav-color);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid #f0f0f0;
}
.hh-mobile-item:last-child { border-bottom: 0; }

/* ============================================================
 * MOBILE LAYOUT (below 900px)
 * Reference: burger + logo + cart on top row, then promo bar,
 * then full-width search below. Desktop nav bar hidden.
 * ============================================================ */
@media (max-width: 900px) {
    .hh-burger { display: inline-flex; }

    .hh-main {
        padding: 12px 14px;
        border-bottom: 1px solid var(--hh-nav-border);
    }
    .hh-main-inner {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    /* Row 1: burger — logo (centered) — cart */
    .hh-burger { order: 1; flex: 0 0 auto; }
    .hh-logo   { order: 2; flex: 1 1 auto; justify-content: center; font-size: calc(var(--hh-logo-height-mobile, 40px) * 0.55); max-width: none; }
    .hh-logo img { height: var(--hh-logo-height-mobile, 40px); max-width: 220px; }
    .hh-logo-svg svg { height: calc(var(--hh-logo-height-mobile, 40px) * 0.92); }
    .hh-cart   { order: 3; flex: 0 0 auto; }
    .hh-cart-label { display: none; } /* icon + badge only on mobile */

    /* Trust chip + auth line hidden on mobile (auth goes into panel) */
    .hh-trust { display: none; }
    .hh-auth-strip { display: none; }

    /* Search moves to its own row, full width, below the logo row */
    .hh-search {
        order: 4;
        flex: 0 0 100%;
        margin-top: 12px;
        max-width: 100%;
        background: #f6f7f7;
        border-color: #e5e7eb;
    }
    .hh-search-input { padding: 12px 14px; font-size: 15px; background: transparent; }
    .hh-search-btn { padding: 0 16px; }

    /* Desktop category nav hidden — replaced by the burger panel */
    .hh-nav { display: none; }

    /* Promo bar tightens up on mobile */
    .hh-promo { padding: 8px 12px; }
    .hh-promo-inner { font-size: 13px; gap: 8px; }
    .hh-promo-badge { font-size: 13px; padding: 2px 8px; }
}

@media (max-width: 420px) {
    .hh-burger-label { display: none; } /* icon only on very narrow */
    .hh-promo-inner { font-size: 12px; }
}