/* Upstate Framework — frontend styles for shortcodes/template parts.
   Assumes the theme provides the design tokens (--uw-t-*). If the theme
   isn't loaded these still degrade gracefully via fallback values. */

:root {
    --uw-open:   #2f7d32;
    --uw-closed: #b71c1c;
}

/* =============================================================
   two-column layout helper (theme uses this in hours+contact section)
   ============================================================= */
.uw-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
@media ( max-width: 768px ) {
    .uw-two-col { grid-template-columns: 1fr; }
}

/* =============================================================
   Hours widget
   ============================================================= */
.uw-hours { display: grid; gap: 1.25rem; }
.uw-hours-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--uw-t-bg-panel, #fff);
    border: 1px solid var(--uw-t-hair, #e6dfd3);
    align-self: start;
    justify-self: start;
}
.uw-hours-status.is-open   { color: var(--uw-open); }
.uw-hours-status.is-closed { color: var(--uw-closed); }
.uw-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 20%, transparent);
    display: inline-block;
}
.uw-hours-grid {
    border-collapse: collapse;
    width: 100%;
    max-width: 360px;
    font-size: 0.9375rem;
}
.uw-hours-grid th, .uw-hours-grid td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--uw-t-hair, #e6dfd3);
    font-weight: 400;
}
.uw-hours-grid th {
    font-family: var(--uw-t-font-heading, Georgia), serif;
    color: var(--uw-t-ink-mid, #494540);
    letter-spacing: 0.02em;
    width: 40%;
}
.uw-hours-grid td { color: var(--uw-t-ink, #1a1917); font-family: var(--uw-t-font-body, sans-serif); font-variant-numeric: tabular-nums; }
.uw-hours-grid tr.is-today th,
.uw-hours-grid tr.is-today td {
    color: var(--uw-t-accent, #b8651a);
    font-weight: 600;
}
.uw-hours-grid tr:last-child th,
.uw-hours-grid tr:last-child td { border-bottom: none; }

/* =============================================================
   Menu section
   ============================================================= */
.uw-menu {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
}
.uw-menu-item {
    display: grid;
    grid-template-columns: 108px 1fr;
    gap: 18px;
    padding: 18px;
    background: var(--uw-t-bg-panel, #fff);
    border: 1px solid var(--uw-t-hair, #e6dfd3);
    border-radius: var(--uw-t-radius, 10px);
    transition: transform 0.2s var(--uw-t-ease, ease), box-shadow 0.2s var(--uw-t-ease, ease), border-color 0.2s var(--uw-t-ease, ease);
}
.uw-menu-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -12px color-mix(in oklab, var(--uw-t-ink, #000) 30%, transparent);
    border-color: color-mix(in oklab, var(--uw-t-accent, #b8651a) 30%, var(--uw-t-hair));
}
.uw-menu-item.is-featured {
    border-color: color-mix(in oklab, var(--uw-t-accent, #b8651a) 40%, var(--uw-t-hair));
    box-shadow: 0 6px 20px -14px color-mix(in oklab, var(--uw-t-accent, #b8651a) 60%, transparent);
}
.uw-menu-item-photo {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: var(--uw-t-bg-warm, #f2ede4);
}
.uw-menu-item-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.uw-menu-item:not(:has(.uw-menu-item-photo)) { grid-template-columns: 1fr; }

.uw-menu-item-body { display: flex; flex-direction: column; }
.uw-menu-item-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
}
.uw-menu-item-name {
    margin: 0;
    font-family: var(--uw-t-font-heading, Georgia), serif;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--uw-t-ink, #1a1917);
}
.uw-menu-item-price {
    font-weight: 600;
    color: var(--uw-t-accent, #b8651a);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 0.9375rem;
}
.uw-menu-item-desc {
    color: var(--uw-t-ink-mid, #494540);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 4px 0 8px;
}
.uw-menu-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0; margin: 8px 0 0;
    list-style: none;
}
.uw-menu-item-tags li {
    padding: 3px 10px;
    border: 1px solid var(--uw-t-hair, #e6dfd3);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--uw-t-ink-mute, #7a746b);
    letter-spacing: 0.02em;
}
@media ( max-width: 480px ) {
    .uw-menu-item { grid-template-columns: 1fr; }
    .uw-menu-item-photo { max-width: 100%; }
}

/* =============================================================
   Delivery buttons
   ============================================================= */
.uw-delivery { display: grid; gap: 12px; }
.uw-delivery-title {
    margin: 0;
    font-family: var(--uw-t-font-heading, Georgia), serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--uw-t-ink, #1a1917);
}
.uw-delivery-buttons {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 10px;
}
.uw-delivery-btn {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    color: #fff;
    letter-spacing: 0.01em;
    transition: transform 0.15s var(--uw-t-ease, ease);
}
.uw-delivery-btn:hover { transform: translateY(-1px); color: #fff; }
.uw-delivery-btn--doordash { background: #ef2f24; }
.uw-delivery-btn--ubereats { background: #06c167; }
.uw-delivery-btn--grubhub  { background: #f63440; }

/* =============================================================
   Contact info
   ============================================================= */
.uw-contact {
    font-style: normal;
    display: grid;
    gap: 14px;
    font-size: 1rem;
}
.uw-contact > div {
    display: flex; flex-direction: column;
    line-height: 1.5;
}
.uw-contact-address span { color: var(--uw-t-ink, #1a1917); }
.uw-contact-phone a,
.uw-contact-email a,
.uw-contact-directions a {
    color: var(--uw-t-ink, #1a1917);
    text-decoration: none;
    font-weight: 500;
}
.uw-contact-phone a:hover,
.uw-contact-email a:hover,
.uw-contact-directions a:hover { color: var(--uw-t-accent, #b8651a); }
.uw-contact-directions a {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 0;
    border-bottom: 1px solid var(--uw-t-accent, #b8651a);
    color: var(--uw-t-accent, #b8651a);
    font-weight: 600;
    font-size: 0.9375rem;
}

/* =============================================================
   Map
   ============================================================= */
.uw-map {
    width: 100%;
    border-radius: var(--uw-t-radius, 10px);
    overflow: hidden;
    border: 1px solid var(--uw-t-hair, #e6dfd3);
}
.uw-map-empty {
    display: grid; place-items: center;
    padding: 40px;
    border: 1px dashed var(--uw-t-hair, #e6dfd3);
    border-radius: var(--uw-t-radius, 10px);
    color: var(--uw-t-ink-mute, #7a746b);
    font-style: italic;
    background: var(--uw-t-bg-warm, #f2ede4);
}

/* =============================================================
   Empty states
   ============================================================= */
.uw-empty {
    color: var(--uw-t-ink-mute, #7a746b);
    font-style: italic;
    font-family: var(--uw-t-font-heading, Georgia), serif;
    padding: 2rem 0;
    text-align: center;
}