/* ═══════════════════════════════════════════════════════════════════════
   ShopexHub — Restaurant Custom Website Template
   Essential custom CSS only. All other styling via Tailwind utility classes.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

/* ── Base ── */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Serif font for all headings — applied via .font-display in HTML */
.font-display,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ── Parallax hero background ──
   background-attachment: fixed cannot be expressed purely in Tailwind.
   Disabled on mobile (iOS Safari breaks fixed attachment). */
.hero-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width: 768px) {
    .hero-bg {
        background-attachment: scroll;
    }
}

/* ── Dish card hover lift ──
   Custom transition values beyond Tailwind's presets. */
.dish-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dish-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 48px rgba(0, 0, 0, 0.45);
}

/* ── Notice bar slide-in animation ── */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.notice-animate {
    animation: slideDown 0.35s ease-out forwards;
}

/* ── Opening hours two-column grid ──
   Aligns day abbreviation and time ranges cleanly. */
.hours-row {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.75rem;
    align-items: center;
}