/* ═══════════════════════════════════════════
   Charlie's Fried Chicken – Site Header
   Scoped under .cfc-site-header so the theme
   can't bleed in. Override-mode hides the
   theme's own header via the body class.
   ═══════════════════════════════════════════ */

:root {
    --cfc-h-red: #d4001a;
    --cfc-h-white: #ffffff;
    --cfc-h-cream: #f5f0eb;
    --cfc-h-black: #111111;
    --cfc-h-height-desktop: 96px;
    --cfc-h-height-mobile: 72px;
    --cfc-h-font-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* ── Hide the theme header when override is active (betheme + generic) ── */
body.cfc-header-active #Header_wrapper,
body.cfc-header-active #Header_creative,
body.cfc-header-active #Top_bar,
body.cfc-header-active #Action_bar,
body.cfc-header-active .mfn-header,
body.cfc-header-active .site-header,
body.cfc-header-active #masthead,
body.cfc-header-active .wp-block-template-part[data-area="header"] {
    display: none !important;
}

/* Push body content down so it isn't covered by the fixed header. The exact
   value is set by JS to match the rendered header's offsetHeight (which
   varies with the marquee on/off and logo sizes). These CSS values are just
   the FOUC-avoidance fallback before JS runs. */
body.cfc-header-active {
    padding-top: var(--cfc-h-height-mobile);
}
@media (min-width: 900px) {
    body.cfc-header-active {
        padding-top: var(--cfc-h-height-desktop);
    }
}

/* ─── Container ─── */
.cfc-site-header,
.cfc-site-header *,
.cfc-site-header *::before,
.cfc-site-header *::after {
    box-sizing: border-box;
}

.cfc-site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--cfc-h-red);
    color: var(--cfc-h-white);
    font-family: var(--cfc-h-font-body);
    -webkit-font-smoothing: antialiased;
}

.cfc-site-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 16px 32px;
    min-height: var(--cfc-h-height-desktop);
}

/* ─── Actions cluster (account + cart + cta) ─── */
.cfc-site-header__actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.cfc-site-header__account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cfc-h-white);
    color: var(--cfc-h-black);
    text-decoration: none;
    transition: transform 0.2s ease;
}
.cfc-site-header__account:hover {
    transform: scale(1.05);
}
.cfc-site-header__account svg {
    width: 20px;
    height: 20px;
}

.cfc-site-header__cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cfc-h-white);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: opacity 0.2s ease;
}
.cfc-site-header__cart:hover {
    opacity: 0.85;
    color: var(--cfc-h-white);
}
.cfc-site-header__cart-icon {
    position: relative;
    width: 22px;
    height: 22px;
}
.cfc-site-header__cart-icon svg {
    width: 100%;
    height: 100%;
}
.cfc-site-header__cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--cfc-h-white);
    color: var(--cfc-h-red);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
.cfc-site-header__cart-total {
    font-size: 15px;
    font-weight: 500;
}

.cfc-site-header__cta {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    background: var(--cfc-h-white);
    color: var(--cfc-h-black);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.cfc-site-header__cta:hover {
    background: var(--cfc-h-cream);
    color: var(--cfc-h-black);
    transform: translateY(-1px);
}

/* ─── Logo ─── */
.cfc-site-header__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.cfc-site-header__logo img {
    height: 56px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}

/* ─── Inline nav (desktop layouts that don't use the burger drawer) ─── */
.cfc-site-header__inline-nav {
    display: none;
    align-items: center;
    gap: 28px;
}
.cfc-site-header__inline-link {
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}
.cfc-site-header__inline-link:hover {
    opacity: 0.75;
}

/* ─── Burger ─── */
.cfc-site-header__burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.cfc-site-header__burger span {
    display: block;
    width: 28px;
    height: 2px;
    margin: 0 auto;
    background: var(--cfc-h-white);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.cfc-site-header__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.cfc-site-header__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.cfc-site-header__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ─── Nav drawer (shared desktop+mobile, slides in from right) ─── */
.cfc-site-header__drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100%);
    background: var(--cfc-h-red);
    color: var(--cfc-h-white);
    padding: calc(var(--cfc-h-height-mobile) + 24px) 32px 32px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 9998;
    overflow-y: auto;
    box-shadow: -12px 0 32px rgba(0,0,0,0.2);
}
@media (min-width: 900px) {
    .cfc-site-header__drawer {
        padding-top: calc(var(--cfc-h-height-desktop) + 24px);
    }
}
.cfc-site-header__drawer[data-open="true"] {
    transform: translateX(0);
}
.cfc-site-header__drawer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cfc-site-header__drawer-link {
    display: block;
    padding: 14px 0;
    color: var(--cfc-h-white);
    text-decoration: none;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    transition: opacity 0.2s ease;
}
.cfc-site-header__drawer-link:hover {
    opacity: 0.75;
    color: var(--cfc-h-white);
}

.cfc-site-header__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 9997;
}
.cfc-site-header__backdrop[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
}

/* ─── Device visibility utilities ─── */
@media (max-width: 899px) {
    .cfc-hide-on-mobile { display: none !important; }
}
@media (min-width: 900px) {
    .cfc-hide-on-desktop { display: none !important; }
}

/* ═══════════════════════════════════════════
   COUNTDOWN (next-slot timer row)
   Sits as a second header row above the marquee.
   ═══════════════════════════════════════════ */
.cfc-site-header__countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.3;
}
.cfc-site-header__countdown-label {
    font-weight: inherit;
    opacity: 1;
}
.cfc-site-header__countdown-value {
    font-variant-numeric: tabular-nums;
    font-weight: inherit;
    letter-spacing: inherit;
}
@media (max-width: 599px) {
    .cfc-site-header__countdown {
        font-size: 11px;
        padding: 6px 10px;
        gap: 3px;
    }
}

/* ═══════════════════════════════════════════
   MARQUEE (sliding banner below the header row)
   Two identical runs share a track; the track
   animates by -50% so the seam never shows.
   ═══════════════════════════════════════════ */
.cfc-site-header__marquee {
    overflow: hidden;
    white-space: nowrap;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
}
.cfc-site-header__marquee-track {
    display: inline-flex;
    width: max-content;
    animation-name: cfc-marquee-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}
.cfc-site-header__marquee-run {
    display: inline-block;
    padding-right: 40px; /* breathing room before the next run starts */
    flex-shrink: 0;
}
@keyframes cfc-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.cfc-site-header__marquee:hover .cfc-site-header__marquee-track {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .cfc-site-header__marquee-track { animation: none; }
}

/* ═══════════════════════════════════════════
   DESKTOP LAYOUTS (≥ 900px)
   Positions actions / logo / inline-nav / burger
   inside the flex/grid container per layout.
   ═══════════════════════════════════════════ */
@media (min-width: 900px) {

    /* Layout 1: Actions left · Logo centre · Burger right (default) */
    [data-cfc-layout-desktop="actions-logo-burger"] .cfc-site-header__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "actions logo burger";
    }
    [data-cfc-layout-desktop="actions-logo-burger"] .cfc-site-header__actions { grid-area: actions; justify-self: start; }
    [data-cfc-layout-desktop="actions-logo-burger"] .cfc-site-header__logo    { grid-area: logo;    justify-self: center; }
    [data-cfc-layout-desktop="actions-logo-burger"] .cfc-site-header__burger  { grid-area: burger;  justify-self: end; }

    /* Layout 2: Logo left · Actions + Burger right */
    [data-cfc-layout-desktop="logo-actions-burger"] .cfc-site-header__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    [data-cfc-layout-desktop="logo-actions-burger"] .cfc-site-header__logo    { margin-right: auto; }
    [data-cfc-layout-desktop="logo-actions-burger"] .cfc-site-header__actions { order: 2; }
    [data-cfc-layout-desktop="logo-actions-burger"] .cfc-site-header__burger  { order: 3; }

    /* Layout 3: Actions left · Logo centre · Inline nav right (no burger) */
    [data-cfc-layout-desktop="actions-logo-nav"] .cfc-site-header__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "actions logo nav";
    }
    [data-cfc-layout-desktop="actions-logo-nav"] .cfc-site-header__actions    { grid-area: actions; justify-self: start; }
    [data-cfc-layout-desktop="actions-logo-nav"] .cfc-site-header__logo       { grid-area: logo;    justify-self: center; }
    [data-cfc-layout-desktop="actions-logo-nav"] .cfc-site-header__inline-nav { grid-area: nav;     justify-self: end; display: flex; }
    [data-cfc-layout-desktop="actions-logo-nav"] .cfc-site-header__burger     { display: none; }

    /* Layout 4: Logo left · Inline nav centre · Actions right (no burger) */
    [data-cfc-layout-desktop="logo-nav-actions"] .cfc-site-header__inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "logo nav actions";
        gap: 32px;
    }
    [data-cfc-layout-desktop="logo-nav-actions"] .cfc-site-header__logo       { grid-area: logo;    justify-self: start; }
    [data-cfc-layout-desktop="logo-nav-actions"] .cfc-site-header__inline-nav { grid-area: nav;     justify-self: center; display: flex; }
    [data-cfc-layout-desktop="logo-nav-actions"] .cfc-site-header__actions    { grid-area: actions; justify-self: end; }
    [data-cfc-layout-desktop="logo-nav-actions"] .cfc-site-header__burger     { display: none; }
}

/* ═══════════════════════════════════════════
   MOBILE LAYOUTS (< 900px)
   ═══════════════════════════════════════════ */
@media (max-width: 899px) {
    .cfc-site-header__inner {
        padding: 12px 18px;
        min-height: var(--cfc-h-height-mobile);
        gap: 16px;
    }
    .cfc-site-header__logo img { height: 40px; }
    .cfc-site-header__inline-nav { display: none !important; }
    .cfc-site-header__actions { gap: 12px; }
    .cfc-site-header__cart        { font-size: 14px; }
    .cfc-site-header__cart-total  { font-size: 14px; }
    .cfc-site-header__cta         { padding: 8px 14px; font-size: 12px; }

    /* Layout 1 (default): Logo left · Actions + Burger right */
    [data-cfc-layout-mobile="logo-actions-burger"] .cfc-site-header__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    [data-cfc-layout-mobile="logo-actions-burger"] .cfc-site-header__logo    { margin-right: auto; }
    [data-cfc-layout-mobile="logo-actions-burger"] .cfc-site-header__actions { order: 2; }
    [data-cfc-layout-mobile="logo-actions-burger"] .cfc-site-header__burger  { order: 3; }

    /* Layout 2: Actions left · Logo centre · Burger right */
    [data-cfc-layout-mobile="actions-logo-burger"] .cfc-site-header__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    [data-cfc-layout-mobile="actions-logo-burger"] .cfc-site-header__actions { justify-self: start; }
    [data-cfc-layout-mobile="actions-logo-burger"] .cfc-site-header__logo    { justify-self: center; }
    [data-cfc-layout-mobile="actions-logo-burger"] .cfc-site-header__burger  { justify-self: end; }

    /* Layout 3: Burger left · Logo centre · Actions right */
    [data-cfc-layout-mobile="burger-logo-actions"] .cfc-site-header__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    [data-cfc-layout-mobile="burger-logo-actions"] .cfc-site-header__burger  { justify-self: start; }
    [data-cfc-layout-mobile="burger-logo-actions"] .cfc-site-header__logo    { justify-self: center; }
    [data-cfc-layout-mobile="burger-logo-actions"] .cfc-site-header__actions { justify-self: end; }
}