/* ============================================================
   Sultan Balık — Menu Design System (v1)
   Scoped to body.page-menu. Loads AFTER style.css to refine the
   menu page into a crafted, "premium family seafood" experience.
   Palette kept (navy #1c2431 + gold #c5a059); craft elevated.
   Reversible: remove the conditional <link> in layout.php.
   ============================================================ */

body.page-menu {
    /* ---- Design tokens ---- */
    --ds-gold: var(--accent-color, #c5a059);
    --ds-gold-soft: rgba(197, 160, 89, 0.14);
    --ds-gold-line: rgba(197, 160, 89, 0.32);
    --ds-sea: #6fbfb0;                 /* fresh accent for halal/fresh cues */
    --ds-ink: #f4f1ea;                 /* warm off-white text */
    --ds-ink-soft: rgba(244, 241, 234, 0.62);
    --ds-paper: #1c2431;               /* page */
    --ds-card: #222c3b;                /* card surface */
    --ds-card-2: #26303f;
    --ds-hair: rgba(244, 241, 234, 0.08);

    /* spacing scale (8pt) */
    --ds-1: 0.25rem; --ds-2: 0.5rem; --ds-3: 0.75rem; --ds-4: 1rem;
    --ds-5: 1.5rem; --ds-6: 2rem; --ds-7: 3rem; --ds-8: 4rem; --ds-9: 6rem;

    /* radii + shadow */
    --ds-r-sm: 8px; --ds-r-md: 14px; --ds-r-lg: 20px; --ds-r-pill: 999px;
    --ds-shadow: 0 18px 50px -24px rgba(0,0,0,.65);
    --ds-shadow-hover: 0 28px 70px -28px rgba(0,0,0,.78);

    /* fluid type scale */
    --ds-fs-display: clamp(2.4rem, 1.4rem + 4vw, 4.4rem);
    --ds-fs-h2: clamp(1.7rem, 1.2rem + 2vw, 2.7rem);
    --ds-fs-h3: clamp(1.25rem, 1rem + 1vw, 1.7rem);
    --ds-fs-lead: clamp(1.02rem, 0.95rem + 0.4vw, 1.22rem);
    --ds-fs-body: 1rem;
    --ds-fs-eyebrow: 0.74rem;
}

/* ====== Rhythm ====== */
body.page-menu .menu-section-luxury { padding-top: var(--ds-7); }
body.page-menu .category-section-luxury { margin-bottom: var(--ds-8); }

/* ============================================================
   HERO
   ============================================================ */
body.page-menu .menu-hero { position: relative; }
body.page-menu .menu-hero-content { max-width: 880px; }
body.page-menu .hero-title {
    font-family: var(--font-headings);
    font-size: var(--ds-fs-display);
    line-height: 1.02;
    letter-spacing: -0.015em;
    font-weight: 700;
    margin: 0 0 var(--ds-4);
    text-wrap: balance;
}
/* gold kicker line above subtitle */
body.page-menu .menu-hero-subtitle {
    position: relative;
    font-size: var(--ds-fs-lead);
    line-height: 1.6;
    color: rgba(255,255,255,.86);
    max-width: 60ch;
    margin: 0 auto var(--ds-6);
    padding-top: var(--ds-4);
}
body.page-menu .menu-hero-subtitle::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 56px; height: 2px; background: var(--ds-gold); border-radius: 2px;
}
[dir="rtl"] body.page-menu .menu-hero-subtitle { margin-inline: auto; }

/* trust badges → refined pills */
body.page-menu .menu-hero-trust-badges {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--ds-2) var(--ds-3); margin-bottom: var(--ds-6);
}
body.page-menu .menu-trust-badge {
    display: inline-flex; align-items: center; gap: var(--ds-2);
    padding: 0.5rem 0.95rem;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--ds-gold-line);
    border-radius: var(--ds-r-pill);
    font-size: 0.82rem; font-weight: 600; letter-spacing: .01em;
    color: var(--ds-ink); backdrop-filter: blur(6px);
}
body.page-menu .menu-trust-badge i { color: var(--ds-gold); font-size: .82rem; }

/* hero CTA */
body.page-menu .menu-hero-cta {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: 0.95rem 2rem; border-radius: var(--ds-r-pill);
    background: var(--ds-gold); color: #18202c;
    font-weight: 700; letter-spacing: .01em; text-decoration: none;
    box-shadow: 0 10px 26px -10px rgba(197,160,89,.6);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
body.page-menu .menu-hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -12px rgba(197,160,89,.75);
    background: #d4b06c; color: #18202c;
}

/* ============================================================
   FILTER BAR → sticky pill nav
   ============================================================ */
body.page-menu .menu-filter-bar {
    position: sticky; top: 0; z-index: 40;
    background: rgba(28,36,49,.82);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ds-hair);
}
body.page-menu .menu-filter-container {
    display: flex; gap: var(--ds-2); padding: var(--ds-3) var(--ds-3);
    overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
body.page-menu .menu-filter-container::-webkit-scrollbar { display: none; }
body.page-menu .filter-nav-btn {
    flex: 0 0 auto; scroll-snap-align: start;
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem 1.1rem; border-radius: var(--ds-r-pill);
    border: 1px solid var(--ds-hair);
    background: transparent; color: var(--ds-ink-soft);
    font-size: .9rem; font-weight: 600; white-space: nowrap;
    text-decoration: none; transition: all .2s ease;
}
body.page-menu .filter-nav-btn i { font-size: .82rem; opacity: .85; }
body.page-menu .filter-nav-btn:hover {
    color: var(--ds-ink); border-color: var(--ds-gold-line);
    background: var(--ds-gold-soft);
}
body.page-menu .filter-nav-btn.active {
    background: var(--ds-gold); color: #18202c; border-color: var(--ds-gold);
}
body.page-menu .filter-nav-btn.active i { opacity: 1; }

/* ============================================================
   CATEGORY HEADER → editorial
   ============================================================ */
body.page-menu .menu-main-group-title {
    font-family: var(--font-headings);
    font-size: var(--ds-fs-h2); text-align: center;
    margin: var(--ds-8) 0 var(--ds-5); letter-spacing: -.01em;
}
body.page-menu .menu-progress-indicator {
    text-align: center; font-size: var(--ds-fs-eyebrow);
    text-transform: uppercase; letter-spacing: .22em;
    color: var(--ds-gold); font-weight: 700;
    margin: 0 0 var(--ds-2);
}
body.page-menu .menu-category-header { text-align: center; margin-bottom: var(--ds-6); }
body.page-menu .menu-category-separator {
    display: flex; align-items: center; justify-content: center; gap: var(--ds-4);
    margin-bottom: var(--ds-3);
}
body.page-menu .menu-category-separator::before,
body.page-menu .menu-category-separator::after {
    content: ""; height: 1px; width: clamp(28px, 12vw, 110px);
    background: linear-gradient(to var(--_dir, right), transparent, var(--ds-gold-line));
}
body.page-menu .menu-category-separator::after { --_dir: left; }
body.page-menu .menu-category-title-luxury {
    font-family: var(--font-headings); font-size: var(--ds-fs-h3);
    color: #fff; letter-spacing: -.01em;
}
body.page-menu .menu-category-title-luxury::after { display: none; } /* drop old underline */
body.page-menu .menu-category-description {
    font-size: var(--ds-fs-body); font-style: italic;
    color: var(--ds-ink-soft); max-width: 56ch; margin: 0 auto;
    line-height: 1.6;
}

/* ============================================================
   ITEM GRID + CARD
   ============================================================ */
body.page-menu .menu-grid-luxury {
    display: grid; gap: var(--ds-4);
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
@media (max-width: 560px){
    body.page-menu .menu-grid-luxury { grid-template-columns: 1fr; }
}

body.page-menu .menu-item-luxury {
    position: relative; background: var(--ds-card);
    border: 1px solid var(--ds-hair); border-radius: var(--ds-r-md);
    overflow: hidden; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
body.page-menu .menu-item-luxury:hover {
    transform: translateY(-4px);
    border-color: var(--ds-gold-line);
    box-shadow: var(--ds-shadow-hover);
}
body.page-menu .menu-item-inner {
    display: grid; grid-template-columns: 104px 1fr; gap: var(--ds-4);
    padding: var(--ds-4);
}
body.page-menu .menu-item-thumb {
    width: 104px; height: 104px; border-radius: var(--ds-r-sm);
    overflow: hidden; background: var(--ds-card-2);
}
body.page-menu .menu-item-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s ease;
}
body.page-menu .menu-item-luxury:hover .menu-item-thumb img { transform: scale(1.07); }
body.page-menu .menu-item-thumb-placeholder {
    width: 100%; height: 100%; display: grid; place-items: center;
    color: var(--ds-gold-line); font-size: 1.6rem;
    background: radial-gradient(circle at 50% 40%, rgba(197,160,89,.10), transparent 70%);
}

body.page-menu .menu-item-details { display: flex; flex-direction: column; min-width: 0; }
body.page-menu .menu-item-title {
    font-family: var(--font-headings); font-size: 1.15rem; font-weight: 700;
    color: #fff; margin: 0 0 .15rem; line-height: 1.25;
}
body.page-menu .menu-item-name-ar {
    display: block; font-size: .9rem; color: var(--ds-gold);
    font-weight: 500; margin-bottom: .3rem;
}
body.page-menu .menu-item-description {
    font-size: .9rem; color: var(--ds-ink-soft); line-height: 1.5;
    margin: 0 0 var(--ds-3);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.page-menu .menu-item-footer {
    margin-top: auto; display: flex; align-items: center; justify-content: space-between;
    gap: var(--ds-3); flex-wrap: wrap;
}
body.page-menu .menu-item-price {
    font-family: var(--font-headings); font-size: 1.3rem; font-weight: 700;
    color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
body.page-menu .menu-item-cta-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem 1rem; border-radius: var(--ds-r-pill);
    border: 1px solid var(--ds-gold-line); color: var(--ds-gold);
    background: transparent; font-size: .85rem; font-weight: 600;
    text-decoration: none; transition: all .2s ease;
}
body.page-menu .menu-item-cta-btn:hover {
    background: var(--ds-gold); color: #18202c; border-color: var(--ds-gold);
}

/* badges */
body.page-menu .menu-item-badge {
    position: absolute; top: var(--ds-3); inset-inline-start: var(--ds-3); z-index: 2;
    padding: .3rem .7rem; border-radius: var(--ds-r-pill);
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
    box-shadow: 0 6px 16px -8px rgba(0,0,0,.6);
}
body.page-menu .menu-item-badge-popular {
    background: linear-gradient(135deg, #d4b06c, #c5a059); color: #18202c;
}
body.page-menu .menu-item-badge-chef {
    background: rgba(24,32,44,.9); color: var(--ds-gold);
    border: 1px solid var(--ds-gold-line);
}

@media (max-width: 380px){
    body.page-menu .menu-item-inner { grid-template-columns: 80px 1fr; gap: var(--ds-3); }
    body.page-menu .menu-item-thumb { width: 80px; height: 80px; }
}

/* ============================================================
   PERSONA BANNERS → restrained, crafted
   ============================================================ */
body.page-menu .persona-banner {
    margin: var(--ds-7) 0; padding: var(--ds-6);
    border-radius: var(--ds-r-lg); border: 1px solid var(--ds-hair);
    border-inline-start: 3px solid var(--ds-gold);
    box-shadow: var(--ds-shadow);
}
body.page-menu .persona-banner-heading {
    font-family: var(--font-headings); font-size: clamp(1.2rem,1rem+1vw,1.6rem);
    color: #fff; margin: 0 0 .4rem; line-height: 1.3;
}
body.page-menu .persona-banner-sub { color: var(--ds-ink-soft); margin: 0; font-size: .98rem; }
body.page-menu .persona-banner .cta-button {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .8rem 1.6rem; border-radius: var(--ds-r-pill);
    background: var(--ds-gold); color: #18202c; font-weight: 700; text-decoration: none;
    transition: transform .2s ease, background .2s ease;
}
body.page-menu .persona-banner .cta-button:hover { transform: translateY(-2px); background: #d4b06c; }

/* ============================================================
   SOCIAL PROOF
   ============================================================ */
body.page-menu .menu-social-proof { padding: var(--ds-9) 0; }
body.page-menu .menu-social-proof .section-title {
    font-family: var(--font-headings); font-size: var(--ds-fs-h2); text-align: center;
}
body.page-menu .menu-review-card {
    position: relative; height: 100%;
    background: var(--ds-card); border: 1px solid var(--ds-hair);
    border-radius: var(--ds-r-md); padding: var(--ds-6) var(--ds-5) var(--ds-5);
    transition: transform .28s ease, border-color .28s ease;
}
body.page-menu .menu-review-card:hover { transform: translateY(-4px); border-color: var(--ds-gold-line); }
body.page-menu .menu-review-card::before {
    content: "\201C"; position: absolute; top: -.35rem; inset-inline-start: var(--ds-4);
    font-family: var(--font-headings); font-size: 3.4rem; line-height: 1;
    color: var(--ds-gold-line);
}
body.page-menu .menu-review-stars { color: var(--ds-gold); letter-spacing: 2px; margin-bottom: var(--ds-3); }
body.page-menu .menu-review-text { color: var(--ds-ink); line-height: 1.65; font-size: 1rem; margin: 0 0 var(--ds-4); }
body.page-menu .menu-review-author {
    font-size: .85rem; font-weight: 700; color: var(--ds-ink-soft);
    text-transform: uppercase; letter-spacing: .08em;
}
body.page-menu .menu-google-rating {
    display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--ds-6);
    padding: .65rem 1.2rem; border-radius: var(--ds-r-pill);
    border: 1px solid var(--ds-gold-line); background: var(--ds-gold-soft);
    color: var(--ds-ink); font-weight: 600; text-decoration: none;
    transition: background .2s ease;
}
body.page-menu .menu-google-rating:hover { background: rgba(197,160,89,.22); }
body.page-menu .menu-google-rating .fa-google { color: var(--ds-gold); }

/* ============================================================
   FINAL CTA + MOBILE STICKY
   ============================================================ */
body.page-menu .menu-final-cta { padding: var(--ds-9) 0; }
body.page-menu .menu-final-cta .section-title { font-family: var(--font-headings); margin-bottom: var(--ds-4); }
body.page-menu .menu-scarcity-text { color: var(--ds-ink-soft); margin-bottom: var(--ds-5); }
body.page-menu .menu-final-cta-buttons {
    display: flex; gap: var(--ds-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--ds-5);
}
body.page-menu .menu-final-cta .cta-button {
    border-radius: var(--ds-r-pill); background: var(--ds-gold); color: #18202c;
    font-weight: 700; text-decoration: none; transition: transform .2s ease, background .2s ease;
}
body.page-menu .menu-final-cta .cta-button:hover { transform: translateY(-2px); background: #d4b06c; }
body.page-menu .cta-button-outline {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: 1rem 2rem; border-radius: var(--ds-r-pill);
    border: 1px solid var(--ds-gold-line); color: var(--ds-ink);
    text-decoration: none; transition: all .2s ease;
}
body.page-menu .cta-button-outline:hover { background: var(--ds-gold-soft); border-color: var(--ds-gold); }
body.page-menu .menu-final-cta-trust {
    display: flex; gap: var(--ds-5); justify-content: center; flex-wrap: wrap;
    color: var(--ds-ink-soft); font-size: .92rem;
}

body.page-menu .menu-mobile-sticky-cta {
    background: var(--ds-gold); color: #18202c; font-weight: 700;
    box-shadow: 0 -8px 24px -10px rgba(0,0,0,.5);
}

/* ============================================================
   Accessibility / motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
    body.page-menu * { transition: none !important; animation: none !important; }
    body.page-menu .menu-item-luxury:hover { transform: none; }
}