/*
 * /dinner/css/dinner.css
 *
 * Senior-friendly overrides on top of the parent legacy.css. Goals:
 *   - 48px minimum tap targets
 *   - 18px minimum body / 20px+ buttons
 *   - High contrast (no gray-on-gray)
 *   - Mobile: calendar collapses to a stacked day list
 *   - Print: hide nav + help footer, leave content clean
 */

/* ---------- Base type + spacing ------------------------------- */
body.dinner-page {
    font-size: 18px;
    line-height: 1.5;
    color: #111;
    background: #f6f7fa;
}
body.dinner-page a { color: #1F4E79; }
body.dinner-page a:focus { outline: 3px solid #ffbf00; outline-offset: 2px; }

/* ---------- Topbar: dinner-specific branding ------------------ */
.dinner-topbar {
    padding: 12px 20px;
    background: #1F4E79;
    color: #fff;
}
.dinner-brand-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.dinner-brand-location {
    font-size: 15px;
    opacity: 0.9;
    margin-top: 2px;
}
.dinner-topbar .lp-user {
    color: #fff;
    font-size: 15px;
}

/* ---------- Nav: dinner-only, large tap targets --------------- */
/* Specificity + !important here because legacy.css (loaded first)
 * also styles .lp-nav a and would otherwise paint the links black
 * on this blue background. */
body.dinner-page .dinner-nav {
    background: #2E74B5;
}
body.dinner-page .dinner-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}
body.dinner-page .dinner-nav li { margin: 0; }
body.dinner-page .dinner-nav a,
body.dinner-page .dinner-nav a:link,
body.dinner-page .dinner-nav a:visited {
    display: block;
    padding: 14px 18px;
    min-height: 48px;
    font-size: 18px;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 600;
}
body.dinner-page .dinner-nav a:hover,
body.dinner-page .dinner-nav a:focus {
    background: #1F4E79;
    color: #ffffff !important;
}

/* ---------- Buttons: oversized .lp-btn for seniors ------------ */
.dinner-main .lp-btn,
.dinner-main button,
.dinner-main input[type="submit"],
.dinner-main .dinner-btn {
    display: inline-block;
    min-height: 48px;
    padding: 12px 22px;
    font-size: 20px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid #1F4E79;
    background: #2E74B5;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}
.dinner-main .dinner-btn-secondary {
    background: #f6f7fa;
    color: #1F4E79;
}
.dinner-main .dinner-btn-danger {
    background: #b02a2a;
    border-color: #7f1d1d;
}

/* ---------- Form fields: large, high contrast ----------------- */
.dinner-main input[type="text"],
.dinner-main input[type="date"],
.dinner-main input[type="time"],
.dinner-main input[type="number"],
.dinner-main input[type="email"],
.dinner-main input[type="tel"],
.dinner-main select,
.dinner-main textarea {
    font-size: 20px;
    padding: 10px 12px;
    min-height: 48px;
    border: 2px solid #1F4E79;
    border-radius: 6px;
    background: #fff;
    color: #111;
    max-width: 100%;
}
.dinner-main label {
    font-size: 18px;
    font-weight: 600;
    display: block;
    margin-top: 14px;
    margin-bottom: 4px;
}

/* ---------- Month calendar grid (desktop) --------------------- */
.dinner-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 10px;
    flex-wrap: wrap;
}
.dinner-cal-head h2 {
    font-size: 28px;
    margin: 0;
    color: #1F4E79;
}
.dinner-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    background: #c7d0db;
    border: 1px solid #c7d0db;
}
.dinner-cal-dow {
    background: #1F4E79;
    color: #fff;
    text-align: center;
    padding: 10px 4px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.dinner-cal-cell {
    background: #fff;
    min-height: 110px;
    padding: 6px 8px 8px;
    position: relative;
    cursor: pointer;
}
.dinner-cal-cell:hover { background: #eef5ff; }
.dinner-cal-cell.is-empty { background: #f3f4f6; cursor: default; }
.dinner-cal-cell.is-past  { background: #f3f4f6; color: #666; cursor: default; }
.dinner-cal-cell.is-today { outline: 3px solid #ffbf00; outline-offset: -3px; z-index: 1; }
.dinner-cal-day {
    font-size: 20px;
    font-weight: 700;
    color: #1F4E79;
    margin-bottom: 4px;
}
.dinner-cal-add {
    font-size: 14px;
    color: #666;
    display: none;
}
.dinner-cal-cell:hover .dinner-cal-add { display: block; }

/* Status bands inside a day cell */
.dinner-res {
    display: block;
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 18px;
    line-height: 1.3;
    text-decoration: none;
    color: #111;
}
.dinner-res-time  { font-weight: 700; font-size: 18px; }
.dinner-res-count { margin-left: 6px; font-size: 18px; font-weight: 700; color: #111; }
.dinner-res-status-Requested { background: #fff3bf; border-left: 4px solid #b98908; }
.dinner-res-status-Confirmed { background: #d6f1dc; border-left: 4px solid #2b6b2b; }
.dinner-res-status-NotMade   { background: #e4e6ea; border-left: 4px solid #666; }

/* ---------- Mobile: stack days vertically (one per card) ------ */
@media (max-width: 720px) {
    .dinner-cal-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        background: transparent;
        border: 0;
    }
    .dinner-cal-dow { display: none; }
    .dinner-cal-cell {
        min-height: 72px;
        border: 2px solid #c7d0db;
        border-radius: 6px;
        padding: 10px 12px;
    }
    .dinner-cal-cell.is-empty { display: none; } /* hide blanks before/after month */
    .dinner-cal-day::after {
        content: " - " attr(data-weekday);
        font-weight: 500;
        color: #333;
        font-size: 17px;
    }
    .dinner-nav a { padding: 16px 20px; }
}

/* ---------- Sticky "List my reservations" bar ----------------- */
.dinner-sticky-bar {
    position: sticky;
    top: var(--lp-topbar-h, 0px);
    background: #fff;
    padding: 10px 0;
    z-index: 5;
    border-bottom: 1px solid #c7d0db;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* ---------- Help footer -------------------------------------- */
.dinner-footer {
    background: #1F4E79;
    color: #fff;
    padding: 14px 20px;
    text-align: center;
    font-size: 16px;
}
.dinner-help-link {
    color: #ffe08a !important;
    font-weight: 700;
    text-decoration: none;
    font-size: 20px;
}
.dinner-foot-brand { font-size: 13px; opacity: 0.8; margin-top: 4px; }

/* ---------- Print: content-only, big fonts ------------------- */
@media print {
    .no-print, .dinner-nav, .dinner-topbar, .dinner-footer { display: none !important; }
    body.dinner-page { background: #fff; font-size: 14pt; color: #000; }
    .dinner-main { padding: 0; margin: 0; }
    a { color: #000; text-decoration: none; }
}