/*
 * Doha Cafe Website Pilot 01 — W05.2 responsive enhancement.
 * Loaded AFTER style.css and order.css so these layout improvements are isolated.
 * No product, pricing, cart, or WhatsApp business logic is changed.
 * Breakpoints: compact <= 600px; tablet 601–900px; wide > 900px.
 */

/* 01. Shared safety: prevent accidental horizontal scrolling on narrow screens. */
html { scroll-behavior: smooth; }
body { min-width: 0; overflow-wrap: break-word; }
img, video, svg { max-width: 100%; height: auto; }
button, input, textarea { max-width: 100%; }
#menu, #cart, #request { scroll-margin-top: 16px; }

/* 02. Header: links stay visible and can wrap rather than overflow. */
.site-header { position: relative; z-index: 1; }
.header-content { min-width: 0; }
.site-header nav { align-items: center; row-gap: 8px; }
.site-header nav a { padding: 8px 2px; border-radius: 4px; }
.site-header nav a:focus-visible,
.primary-button:focus-visible { outline: 3px solid #b97730; outline-offset: 3px; }

/* 03. Category strip: swipeable on phones AND tablets (including 768px).
 * The old flex-wrap: wrap in style.css prevents overflow and thus scrolling.
 * Keeping this outside the mobile breakpoint makes the behavior consistent.
 * On desktop, the category strip also remains usable with a trackpad.
 */
.menu-filters {
    display: flex;
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-padding-inline: 8px;
    padding: 4px 2px 12px;
    touch-action: pan-x pan-y;
}
.menu-filter {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 44px;
}
.menu-card { min-width: 0; }
.menu-price-row { flex-wrap: wrap; }
.menu-add-button, .cart-action, .cart-remove { min-height: 44px; }

/* 04. Cart: allow controls to wrap without clipping on compact devices. */
#cart-items { min-width: 0; }
.cart-line { min-width: 0; }
.cart-line-details { min-width: 0; }
.cart-controls { min-width: 0; }
#cart-clear, #cart .primary-button { min-height: 44px; margin: 4px 8px 4px 0; }

/* 05. Request: preserve readable labels, inputs and message draft. */
.order-form, .order-preview { width: 100%; max-width: 740px; min-width: 0; }
.order-fields > label { min-width: 0; }
.order-fields input, .order-fields textarea { min-width: 0; min-height: 44px; }
.order-preview pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.order-preview-button { min-height: 44px; }

/* 06. Tablet: two product columns and a compact but readable header. */
@media (min-width: 601px) and (max-width: 900px) {
    .container { width: min(100% - 40px, 1100px); }
    .hero { padding: 72px 0; }
    .section { padding: 48px 0; }
    .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .menu-card { padding: 20px; }
    .header-content { align-items: flex-start; }
}

/* 07. Mobile: one-column products and easy horizontal category navigation. */
@media (max-width: 600px) {
    .container { width: calc(100% - 32px); }
    .header-content { padding: 12px 0; gap: 8px; }
    .brand { font-size: 21px; }
    .site-header nav { display: flex; width: 100%; gap: 6px 14px; }
    .site-header nav a { font-size: 0.9rem; padding: 8px 0; }
    .hero { padding: 44px 0; }
    .hero h1 { font-size: clamp(2rem, 9vw, 2.75rem); }
    .section { padding: 36px 0; }
    .menu-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .menu-card { padding: 18px; }
    .menu-cart-actions { align-items: stretch; }
    .menu-add-button { flex: 1 1 140px; }
    .cart-line { align-items: flex-start; gap: 10px; }
    .cart-line-details { flex: 1 1 100%; }
    .cart-controls { flex: 1 1 auto; }
    .cart-line-total { min-width: 0; margin-left: auto; text-align: right; }
    .order-form { padding: 16px; }
    .order-fields { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .order-type label { display: inline-flex; align-items: center; gap: 6px; margin: 6px 14px 6px 0; }
    .order-preview { padding: 16px; }
    .order-preview-button { width: 100%; }
}

/* 08. Respect accessibility preferences: do not force animated scrolling. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* 09. W05.4 desktop rhythm refinement.
 * The base stylesheet gives each section 64px above and below, creating
 * 128px of empty space between neighboring sections. Restrict this override
 * to wide screens so the already-tested mobile and tablet layouts remain intact.
 */
@media (min-width: 901px) {
    .hero { padding-block: 64px; }
    .section { padding-block: 40px; }
    .section h2 { margin-top: 0; margin-bottom: 16px; }
    .menu-filters { margin-bottom: 20px; }
}