/* ============================================================
   Over-Bhoj Floating Header Widget — ob-header-style.css v1.0.4
   Primary: #D4431A | Accent/Gold: #F5A800 | Dark BG: #4a2e1a
   FIX #12: version comment updated
   FIX #13: @import removed — fonts loaded via wp_enqueue_style()
   ============================================================ */

/* ─── Outer sticky wrapper ───────────────────────────────── */
.ob-header-outer {
    width: 100%;
    padding: 12px 16px 0;
    box-sizing: border-box;
    z-index: 9999;
}

.ob-header-outer.ob-sticky {
    position: sticky;
    top: 0;
}

/* ─── Pill container ─────────────────────────────────────── */
.ob-header-pill {
    --ob-bg: #4a2e1a;
    --ob-bg-opacity: 0.82;
    --ob-blur: 20px;
    --ob-glass-shine: rgba(255,255,255,0.12);

    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;

    max-width: 1280px;
    margin: 0 auto;
    min-height: 68px;
    padding: 10px 24px;
    box-sizing: border-box;

    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    overflow: visible; /* logo can hang outside the pill */
    isolation: isolate;

    background-color: color-mix(in srgb, var(--ob-bg) calc(var(--ob-bg-opacity)*100%), transparent);
    backdrop-filter: blur(var(--ob-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--ob-blur)) saturate(160%);

    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.20),
        inset -1px -1px 0 rgba(0,0,0,0.22),
        0 8px 40px rgba(0,0,0,0.28),
        0 2px 8px rgba(0,0,0,0.18);

    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* color-mix fallback for older browsers */
@supports not (background-color: color-mix(in srgb, red 80%, transparent)) {
    .ob-header-pill             { background-color: rgba(74,46,26,0.82); }
    .ob-header-pill.is-scrolled { background-color: rgba(74,46,26,0.92); }
}

/* Glass shine — scoped to pill shape, overflow stays inside */
.ob-header-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg,
        var(--ob-glass-shine) 0%,
        rgba(255,255,255,0.04) 40%,
        transparent 65%
    );
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Bottom rim light */
.ob-header-pill::after {
    content: '';
    position: absolute;
    bottom: 0; left: 6%; right: 6%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.28) 35%,
        rgba(255,255,255,0.28) 65%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Scrolled state */
.ob-header-pill.is-scrolled {
    border-color: rgba(255,255,255,0.18);
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.24),
        inset -1px -1px 0 rgba(0,0,0,0.26),
        0 12px 48px rgba(0,0,0,0.36),
        0 4px 12px rgba(0,0,0,0.22);
}

.ob-header-pill > * {
    position: relative;
    z-index: 1;
}

/* ─── Logo ───────────────────────────────────────────────── */
.ob-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    flex-shrink: 0;
    order: 1;
}

.ob-logo:hover,
.ob-logo:focus {
    text-decoration: none !important;
}

.ob-logo-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    /* FIX #2: NO default filter/shadow here.
       Shadow is applied as inline style="filter:drop-shadow(...)"
       directly on the <img> element from PHP when enabled.
       This means the element-level style always wins — no CSS specificity fight. */
    transition: filter 0.3s ease;
}

.ob-logo-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ob-logo-title {
    font-family: 'Syne', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #f5e6d0;
    line-height: 1;
    text-transform: uppercase;
}

.ob-logo-tagline {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(245,230,208,0.70);
    line-height: 1;
}

/* ─── Desktop nav ─────────────────────────────────────────
   FIX #1: was declared TWICE causing flex:1 / justify-content:center
   to be overwritten. Now ONE combined rule with all properties.      */
.ob-nav {
    display: flex;
    align-items: center;
    justify-content: center;  /* center links within the flex-grow area */
    flex: 1;                  /* grow to fill space between logo and CTA */
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
    order: 2;
}

.ob-nav-link {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: rgba(245,230,208,0.85);
    text-decoration: none !important;
    white-space: nowrap;
    transition: color 0.2s ease;
    position: relative; /* anchor point for pointer pseudo-elements */
}

.ob-nav-link:hover,
.ob-nav-link.is-active {
    color: #F5A800;
}

/* ─── CTA (Order Now) ────────────────────────────────────── */
.ob-cta-wrap {
    flex-shrink: 0;
    order: 3;
}

.ob-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 999px;
    background: #F5A800;
    color: #2a1800;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none !important;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.2s ease,
        box-shadow 0.25s ease;
    box-shadow:
        0 2px 12px rgba(245,168,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.28);
}

.ob-cta-btn:hover {
    background: #D4431A;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow:
        0 6px 20px rgba(212,67,26,0.40),
        inset 0 1px 0 rgba(255,255,255,0.20);
}

.ob-cta-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ─── Hamburger ──────────────────────────────────────────── */
.ob-hamburger {
    display: none; /* default hidden; shown by CSS breakpoint or visibility toggle */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.10);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    order: 4;
    transition: background 0.2s ease;
}

.ob-hamburger:hover {
    background: rgba(255,255,255,0.18);
}

.ob-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #f5e6d0;
    transform-origin: center;
    transition:
        transform 0.3s cubic-bezier(.22,.68,0,1.2),
        opacity 0.2s ease,
        width 0.2s ease;
}

/* X animation */
.ob-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ob-hamburger.is-open span:nth-child(2) { opacity: 0; width: 0; }
.ob-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Mobile drawer ──────────────────────────────────────── */
.ob-mobile-drawer {
    display: none; /* shown by JS toggle only */
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding: 16px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(58,32,16,0.95);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.14),
        0 8px 32px rgba(0,0,0,0.30);
    overflow: hidden;
    transform-origin: top center;
}

/* FIX #5: animation only plays when drawer is actively opened (class added by JS),
   NOT on page load, preventing flash in editor and on initial render */
.ob-mobile-drawer.is-opening {
    animation: ob-drawer-in 0.28s cubic-bezier(.22,.68,0,1.2) both;
}

.ob-mobile-drawer.is-closing {
    animation: ob-drawer-out 0.22s ease forwards;
}

@keyframes ob-drawer-in {
    from { opacity: 0; transform: scaleY(0.88) translateY(-8px); }
    to   { opacity: 1; transform: scaleY(1)    translateY(0);    }
}

@keyframes ob-drawer-out {
    from { opacity: 1; transform: scaleY(1)    translateY(0);    }
    to   { opacity: 0; transform: scaleY(0.88) translateY(-8px); }
}

.ob-mobile-link {
    display: block;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.07);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #f5e6d0;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease;
}

.ob-mobile-link:hover,
.ob-mobile-link.is-active {
    background: rgba(245,168,0,0.18);
    color: #F5A800;
}

/* ─── Responsive breakpoints ─────────────────────────────
   FIX #9: visibility toggle inline CSS uses .elementor-element-X
   scope with !important and will always beat these breakpoint rules.
   These serve as the safe CSS-only fallback when JS hasn't loaded.  */
@media (max-width: 1023px) {
    .ob-nav      { display: none; flex: none; }
    .ob-cta-wrap { display: none; }
    .ob-hamburger { display: flex; }
}

@media (max-width: 767px) {
    .ob-header-outer {
        padding: 10px 12px 0;
    }
    .ob-header-pill {
        border-radius: 20px;
        padding: 8px 14px;
        min-height: 58px;
    }
    .ob-logo-img     { width: 40px; height: 40px; }
    .ob-logo-title   { font-size: 13px; }
    .ob-logo-tagline { font-size: 9px; }
}

/* ─── Elementor editor — show everything for styling ─────── */
.elementor-editor-active .ob-hamburger { display: flex !important; }
.elementor-editor-active .ob-nav       { display: flex !important; flex: 1 !important; }
.elementor-editor-active .ob-cta-wrap  { display: flex !important; }