/**
 * Prairie Landing Golf Club — Restaurant Menu Styles
 *
 * Responsive two-column menu layout using CSS multi-column.
 * Uses design tokens from theme.css (--plgc-* custom properties).
 *
 * WCAG 2.1 AA: 4.5:1 text contrast, 3:1 UI contrast, 44px touch
 * targets, visible focus rings, reduced-motion safe, print-friendly.
 *
 * @package PLGC
 * @since   1.7.26
 */

/* ============================================================
   MENU CONTAINER
   ============================================================ */
.plgc-menu {
    max-width: 75rem;       /* 1200px — standard container */
    margin: 0 auto;
    padding: 0 1.5rem;
    font-family: var(--plgc-font-body);
    color: var(--plgc-black);
}

/* ============================================================
   MENU HEADER
   ============================================================ */
.plgc-menu__header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--plgc-yellow);
}

.plgc-menu__title {
    font-family: var(--plgc-font-heading);
    font-size: 2.25rem;
    line-height: 1.333;
    font-weight: 400;
    color: var(--plgc-black);
    margin: 0 0 0.5rem;
}

.plgc-menu__note {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
    font-style: italic;
}

/* ============================================================
   COLUMN LAYOUT — Multi-column for natural flow
   ============================================================ */
.plgc-menu__grid {
    column-count: 2;
    column-gap: 3rem;
}

.plgc-menu--single-col .plgc-menu__grid {
    column-count: 1;
}

/* ============================================================
   MENU SECTION
   ============================================================ */
.plgc-menu-section {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 2rem;
}

.plgc-menu-section__heading {
    font-family: var(--plgc-font-heading);
    font-size: 1.75rem;
    line-height: 1.3;
    font-weight: 400;
    color: var(--plgc-dark-green);
    margin: 0 0 0.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--plgc-yellow);
}

.plgc-menu-section__subtitle {
    font-size: 0.9375rem;
    font-style: italic;
    color: #555;
    margin: 0.25rem 0 0;
    line-height: 1.5;
}

.plgc-menu-section__note {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #555;
    margin: 0.375rem 0 0;
    padding: 0.5rem 0.75rem;
    background: var(--plgc-light-grey);
    border-radius: 4px;
}

.plgc-menu-section__items {
    margin-top: 1rem;
}

/* ============================================================
   MENU ITEM
   ============================================================ */
.plgc-menu-item {
    margin-bottom: 1.25rem;
}

.plgc-menu-item:last-child {
    margin-bottom: 0;
}

/* ── Item Header: Name ... Price ────────────────────────── */
.plgc-menu-item__header {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.plgc-menu-item__name {
    font-family: var(--plgc-font-body);
    font-size: 1.0625rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--plgc-black);
    margin: 0;
    flex-shrink: 0;
}

/* Dotted leader line */
.plgc-menu-item__dots {
    flex: 1;
    min-width: 1rem;
    border-bottom: 1px dotted #999;
    margin: 0 0.25rem;
    position: relative;
    top: -0.25em;
}

/* Single price */
.plgc-menu-item__price {
    font-family: var(--plgc-font-body);
    font-size: 1.0625rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--plgc-black);
    white-space: nowrap;
    flex-shrink: 0;
}

.plgc-menu-item__qualifier {
    font-weight: 400;
    font-size: 0.875rem;
    font-style: italic;
}

/* Tiered prices (Cup $4 | Bowl $5) */
.plgc-menu-item__prices {
    font-family: var(--plgc-font-body);
    font-size: 0.9375rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--plgc-black);
    white-space: nowrap;
    flex-shrink: 0;
}

.plgc-menu-item__price-tier {
    /* inherits from parent */
}

.plgc-menu-item__price-sep {
    color: #999;
    font-weight: 400;
    margin: 0 0.125rem;
}

/* ── Description ────────────────────────────────────────── */
.plgc-menu-item__description {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #444;
    margin: 0.25rem 0 0;
}

/* ── Add-on Modifiers ───────────────────────────────────── */
.plgc-menu-item__modifiers {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}

.plgc-menu-item__modifiers li {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--plgc-dark-green);
    font-weight: 600;
}

/* ── Dietary Badges ─────────────────────────────────────── */
.plgc-menu-item__dietary {
    list-style: none;
    padding: 0;
    margin: 0.375rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.plgc-menu-item__dietary li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    color: var(--plgc-dark-green);
    background: var(--plgc-very-light-green);
    border-radius: 3px;
}

.plgc-menu-item__dietary abbr {
    text-decoration: none;
    cursor: help;
}

/* ============================================================
   MENU FOOTER / DISCLAIMER
   ============================================================ */
.plgc-menu__footer {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--plgc-medium-grey);
    text-align: center;
}

.plgc-menu__disclaimer {
    font-size: 0.75rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
    font-style: italic;
}

/* Empty state */
.plgc-menu__empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #666;
    font-style: italic;
}

/* ============================================================
   FOCUS STATES (WCAG 2.4.7)
   ============================================================ */
.plgc-menu a:focus-visible,
.plgc-menu [tabindex]:focus-visible {
    outline: var(--plgc-focus-width) solid var(--plgc-focus-color);
    outline-offset: var(--plgc-focus-offset);
}

/* ============================================================
   RESPONSIVE — TABLET (768px – 1024px)
   ============================================================ */
@media (max-width: 64rem) {
    .plgc-menu {
        padding: 0 1.25rem;
    }

    .plgc-menu__grid {
        column-gap: 2rem;
    }

    .plgc-menu__title {
        font-size: 2rem;
    }

    .plgc-menu-section__heading {
        font-size: 1.5rem;
    }
}

/* ============================================================
   RESPONSIVE — MOBILE (< 768px)
   ============================================================ */
@media (max-width: 47.9375rem) {
    .plgc-menu {
        padding: 0 1rem;
    }

    .plgc-menu__grid {
        column-count: 1;
    }

    .plgc-menu__header {
        margin-bottom: 1.75rem;
        padding-bottom: 1rem;
    }

    .plgc-menu__title {
        font-size: 1.75rem;
    }

    .plgc-menu-section {
        margin-bottom: 1.75rem;
    }

    .plgc-menu-section__heading {
        font-size: 1.375rem;
    }

    .plgc-menu-item {
        margin-bottom: 1rem;
    }

    .plgc-menu-item__name {
        font-size: 1rem;
    }

    .plgc-menu-item__price,
    .plgc-menu-item__prices {
        font-size: 1rem;
    }

    /* Stack tiered prices vertically on very small screens */
    .plgc-menu-item__prices {
        white-space: normal;
    }

    .plgc-menu-item__description {
        font-size: 0.8125rem;
    }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    .plgc-menu {
        max-width: none;
        padding: 0;
        font-size: 10pt;
    }

    .plgc-menu__grid {
        column-count: 2;
        column-gap: 2em;
    }

    .plgc-menu__header {
        border-bottom-color: #000;
    }

    .plgc-menu-section__heading {
        color: #000;
        border-bottom-color: #000;
    }

    .plgc-menu-section__note {
        background: none;
        border: 1px solid #ccc;
    }

    .plgc-menu-item__dietary li {
        background: none;
        border: 1px solid #999;
        color: #000;
    }

    .plgc-menu__footer {
        border-top-color: #000;
    }

    /* Avoid breaking items across pages */
    .plgc-menu-item {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .plgc-menu-section {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ============================================================
   HIGH CONTRAST / FORCED COLORS
   ============================================================ */
@media (forced-colors: active) {
    .plgc-menu-section__heading {
        border-bottom-color: CanvasText;
    }

    .plgc-menu__header {
        border-bottom-color: CanvasText;
    }

    .plgc-menu-item__dots {
        border-bottom-color: CanvasText;
    }

    .plgc-menu-item__dietary li {
        border: 1px solid CanvasText;
    }

    .plgc-menu-section__note {
        border: 1px solid CanvasText;
        background: Canvas;
    }
}

/* ============================================================
   REDUCED MOTION (safe — no animations in menu)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    /* Menu has no animations, but defensive CSS for future additions */
    .plgc-menu *,
    .plgc-menu *::before,
    .plgc-menu *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   NO-PRICES MODE
   When "Hide Menu Prices" is toggled on in PL Settings,
   the PHP adds .plgc-menu--no-prices. This ensures
   the header row (item name) fills the full width cleanly
   without orphaned dot leaders or empty space.
   ============================================================ */
.plgc-menu--no-prices .plgc-menu-item__header {
    /* Remove flex layout that spreads name…dots…price */
    display: block;
}

.plgc-menu--no-prices .plgc-menu-item__name {
    /* Remove flex-shrink and let the name fill the row */
    flex: none;
    max-width: none;
}