/* =============================================================
   Paisanos — Main Stylesheet
   All colors reference CSS custom properties from style.css.
   Swap the values there to apply your full color scheme.
   ============================================================= */

/* ----- Base ----- */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--color-text);
    background-color: var(--color-white);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-secondary);
}

img {
    max-width: 100%;
    height: auto;
}

/* ----- Utility ----- */
.section-heading {
    color: var(--color-heading);
    font-weight: 700;
    letter-spacing: -.01em;
}

.section-label {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .75rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: .5rem;
}

.section-divider {
    width: 48px;
    height: 3px;
    background-color: var(--color-primary);
    border: none;
    margin: .75rem auto 1.5rem;
    opacity: 1;
}

.section-divider.text-start {
    margin-left: 0;
}

/* ----- Homepage highlights strip ----- */
.highlights-section {
    padding: 5rem 0;
}

/* ----- Homepage location / map ----- */
.location-section {
    padding: 5rem 0;
    background-color: var(--color-cream);
}

/* ----- Homepage specials (CPT) -----
   Uses the Food Menu's printed-menu classes (.menu-scroll / .menu-section,
   defined further down) plus these overrides, mirroring the printed
   specials sheet: dish names in red boxes, bold price beside them. */
.specials-header {
    padding: 4rem 0 1rem;
    background: var(--color-light);
}

.menu-scroll.menu-scroll--specials .menu-section {
    padding: 2rem 0 5rem;
}

.menu-scroll.menu-scroll--specials .menu-section.has-banner {
    padding-top: 0;
}

.menu-scroll.menu-scroll--specials .menu-items-columns {
    column-gap: 4rem;
}

.menu-scroll.menu-scroll--specials .specials-single {
    column-count: 1;
    max-width: 680px;
    margin: 0 auto;
}

.menu-scroll.menu-scroll--specials .special-item {
    padding: 1rem 0;
}

.menu-scroll.menu-scroll--specials .menu-item-name {
    margin-bottom: .45rem;
    font-size: 1.05rem;
    line-height: 1.5;
    text-transform: none;
}

.special-name {
    padding: .1rem .45rem;
    background: var(--color-primary);
    color: #fff;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}

.special-subtitle {
    margin-left: .2rem;
    font-weight: 700;
}

.menu-scroll.menu-scroll--specials .menu-item-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 1.1rem;
    line-height: 1.5;
}

.special-price-note {
    font-size: .75rem;
    font-weight: 600;
    opacity: .8;
    line-height: 1.2;
}

.specials-empty {
    max-width: 560px;
    background-color: var(--color-white);
    border: 2px dashed var(--color-accent);
    padding: 3rem 1.5rem;
}

.specials-empty > i {
    font-size: 2.5rem;
    color: var(--color-primary);
}

/* ----- Homepage reviews carousel ----- */
.reviews-section {
    padding: 5rem 0;
    background-color: var(--color-white);
}

.reviews-carousel {
    max-width: 760px;
    margin: 0 auto;
}

.review-card {
    text-align: center;
    padding: 0 3.5rem;
    min-height: 220px;
}

.review-stars {
    color: var(--color-primary);
    font-size: .9rem;
    letter-spacing: .15em;
    margin-bottom: 1.25rem;
}

.review-text {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--color-text);
    margin-bottom: 1.25rem;
}

.review-author {
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .review-card {
        padding: 0 2.5rem;
    }
}

/* ----- Navbar brand wordmark ----- */
.navbar-wordmark {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-cream) !important;
    text-decoration: none;
    padding: 0;
    line-height: 1;
    transition: color .2s;
}

.navbar-wordmark:hover {
    color: var(--color-accent) !important;
}

.navbar-wordmark-sub {
    display: block;
    font-size: .55rem;
    font-weight: 600;
    letter-spacing: .22em;
    color: var(--color-accent);
    margin-top: .1rem;
}

/* ----- Navbar ----- */
#site-navbar .nav-link {
    color: var(--color-nav-link);
    font-size: .875rem;
    font-weight: 500;
    padding-left: 1rem;
    padding-right: 1rem;
    transition: color .2s;
}

/* Keep every link and the ORDER ONLINE button on one line. */
#site-navbar .nav-link,
#site-navbar .btn-order-online {
    white-space: nowrap;
}

/* 992–1199px (laptops): with 7 links, ORDER ONLINE and 3 social icons the bar is
   wider than the 960px container at default link spacing, so tighten link padding
   here only (.5rem leaves ~16px spare at 1000px). Re-check if links/icons are added. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #site-navbar .nav-link {
        padding-left: .5rem;
        padding-right: .5rem;
    }
}

#site-navbar .nav-link:hover,
#site-navbar .nav-link.active {
    color: var(--color-nav-link-hover);
}

#site-navbar .dropdown-menu {
    background-color: var(--color-brown);
    border: none;
    border-radius: 0;
    margin-top: 0;
}

#site-navbar .dropdown-item {
    color: var(--color-nav-link);
    font-size: .875rem;
    padding: .5rem 1.25rem;
}

#site-navbar .dropdown-item:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* ----- Navbar: ORDER ONLINE button + social icons ----- */
#site-navbar .btn-order-online {
    background-color: var(--color-cta-bg);
    color: var(--color-cta-text);
    border: none;
    letter-spacing: .05em;
    transition: background-color .2s, color .2s;
}

#site-navbar .btn-order-online:hover,
#site-navbar .btn-order-online:focus-visible {
    background-color: var(--color-white);
    color: var(--color-primary);
}

#site-navbar .navbar-social-link {
    color: var(--color-nav-link);
    font-size: 1.05rem;
    line-height: 1;
    padding: .25rem;
    text-decoration: none;
    transition: color .2s;
}

#site-navbar .navbar-social-link:hover,
#site-navbar .navbar-social-link:focus-visible {
    color: var(--color-nav-link-hover);
}

/* ----- Hero (shared base) ----- */
.hero-section {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-hero-overlay);
}

.hero-section .hero-content {
    position: relative;
    z-index: 2;
    color: var(--color-white);
}

.hero-section h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

.hero-section .lead {
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

/* ----- Hero — brand solid background variant ----- */
.hero-brand-bg {
    background-image: none !important;
    background-color: var(--color-primary);
    min-height: 90vh;
}

/* suppress the dark overlay on solid-color hero */
.hero-brand-bg::after {
    display: none;
}

/* ----- Hero — photo slider variant ----- */
.hero-slider-bg {
    background-color: var(--color-dark);
    min-height: 90vh;
}

.hero-slider {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: hero-slide-fade 20s infinite;
}

.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 5s; }
.hero-slide:nth-child(3) { animation-delay: 10s; }
.hero-slide:nth-child(4) { animation-delay: 15s; }

@keyframes hero-slide-fade {
    0%   { opacity: 0; }
    5%   { opacity: 1; }
    25%  { opacity: 1; }
    30%  { opacity: 0; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide {
        animation: none;
        opacity: 0;
    }

    .hero-slide:first-child {
        opacity: 1;
    }
}

/* ----- Hero animations — keyframes ----- */
@keyframes logo-entrance {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes logo-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

@keyframes flag-in-left {
    from {
        opacity: 0;
        transform: rotate(-22deg) translateX(-28px);
    }
    to {
        opacity: 1;
        transform: rotate(-22deg) translateX(0);
    }
}

@keyframes flag-in-right {
    from {
        opacity: 0;
        transform: rotate(22deg) translateX(28px);
    }
    to {
        opacity: 1;
        transform: rotate(22deg) translateX(0);
    }
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----- Hero logo ----- */
.hero-logo {
    display: block;
    margin: 0 auto 1rem;
    max-width: 320px;
    width: 70%;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .35));

    /* entrance, then float loop once entrance finishes */
    animation:
        logo-entrance 1s cubic-bezier(.22, .61, .36, 1) both,
        logo-float    4s ease-in-out 1s infinite;
}

/* ----- Crossed flags ----- */
.hero-flags {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
}

.hero-flags .flag-left,
.hero-flags .flag-right {
    position: absolute;
    bottom: 0;
    font-size: 4rem;
    line-height: 1;
    transform-origin: bottom center;
}

.hero-flags .flag-left {
    left: 0;
    animation: flag-in-left .7s cubic-bezier(.22, .61, .36, 1) .7s both;
}

.hero-flags .flag-right {
    right: 0;
    animation: flag-in-right .7s cubic-bezier(.22, .61, .36, 1) .7s both;
}

/* ----- Hero CTA buttons fade up ----- */
.hero-section .hero-content .d-flex {
    animation: fade-up .7s ease 1.1s both;
}

/* ----- Hero CTA buttons (cream outline style on dark red bg) ----- */
.btn-hero-primary {
    background-color: var(--color-cream);
    color: var(--color-primary);
    border: 2px solid var(--color-cream);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .65rem 1.75rem;
    transition: background-color .2s, color .2s, border-color .2s;
}

.btn-hero-primary:hover {
    background-color: transparent;
    color: var(--color-cream);
    border-color: var(--color-cream);
}

.btn-hero-outline {
    background-color: transparent;
    color: var(--color-cream);
    border: 2px solid var(--color-cream);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .65rem 1.75rem;
    transition: background-color .2s, color .2s;
}

.btn-hero-outline:hover {
    background-color: var(--color-cream);
    color: var(--color-primary);
}

/* ----- Buttons ----- */
.btn-primary-brand {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 2px solid var(--color-primary);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .65rem 1.75rem;
    transition: background-color .2s, border-color .2s;
}

.btn-primary-brand:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

/* Outline twin of .btn-primary-brand — same size, for a secondary CTA
   beside it on a light background (e.g. "Order Online" next to "View the Menu"). */
.btn-outline-primary-brand {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .65rem 1.75rem;
    transition: background-color .2s, border-color .2s, color .2s;
}

.btn-outline-primary-brand:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.btn-outline-brand {
    background-color: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .65rem 1.75rem;
    transition: background-color .2s, color .2s;
}

.btn-outline-brand:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
}

/* ----- Welcome section ----- */
.welcome-section {
    background-color: var(--color-white);
    padding: 5rem 0;
    text-align: center;
}

/* ----- Promo cards ("Happening Now") ----- */
.promo-section {
    background-color: var(--color-cream);
    padding: 5rem 0;
}

.promo-card {
    border: none;
    border-radius: 0;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    transition: transform .2s, box-shadow .2s;
}

.promo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
}

.promo-card .card-img-top {
    height: 200px;
    object-fit: cover;
}

.promo-card .card-body {
    padding: 1.5rem;
}

.promo-card .promo-badge {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .25rem .6rem;
    margin-bottom: .75rem;
}

.promo-card .card-title {
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: .5rem;
}

/* ----- 3-column feature grid ----- */
.feature-grid-section {
    padding: 5rem 0;
    background-color: var(--color-white);
}

.feature-card {
    position: relative;
    overflow: hidden;
    border-radius: 0;
}

.feature-card img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: transform .4s;
}

.feature-card:hover img {
    transform: scale(1.04);
}

.feature-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
    color: var(--color-white);
}

.feature-card-body h4 {
    font-weight: 700;
    margin-bottom: .25rem;
}

/* ----- Daily deals list ----- */
.deals-section {
    background-color: var(--color-dark);
    padding: 5rem 0;
    color: var(--color-white);
}

.deal-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.deal-row:last-child {
    border-bottom: none;
}

.deal-row.reverse {
    flex-direction: row-reverse;
}

.deal-row img {
    width: 280px;
    height: 200px;
    object-fit: cover;
    flex-shrink: 0;
}

.deal-row .deal-info h3 {
    font-weight: 800;
    font-size: 1.5rem;
    margin-bottom: .5rem;
}

.deal-row .deal-info .deal-time {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-accent);
    font-weight: 700;
    margin-bottom: .5rem;
}

.deal-row .deal-info p {
    color: rgba(255,255,255,.75);
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .deal-row,
    .deal-row.reverse {
        flex-direction: column;
        text-align: center;
    }

    .deal-row img {
        width: 100%;
        height: 220px;
    }
}

/* ----- Menu page ----- */
.menu-page {
    padding: 5rem 0;
}

.nav-tabs.menu-tabs .nav-link {
    color: var(--color-text);
    font-weight: 600;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: .75rem 1.5rem;
}

.nav-tabs.menu-tabs .nav-link.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: transparent;
}

.menu-item-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 1rem 0;
    border-bottom: 1px dashed var(--color-border);
}

.menu-item-row:last-child {
    border-bottom: none;
}

.menu-item-name {
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: .15rem;
}

.menu-item-desc {
    color: var(--color-muted);
    font-size: .875rem;
    margin-bottom: 0;
}

.menu-item-price {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1rem;
    white-space: nowrap;
    margin-left: 1rem;
}

.menu-item-note {
    color: var(--color-primary);
    font-size: .8125rem;
    font-style: italic;
    margin: .2rem 0 0;
}

.menu-item-variants {
    color: var(--color-muted);
    font-size: .8125rem;
    font-weight: 600;
    margin: .3rem 0 0;
}

/* Replaces the old manual col-md-6 array split: items flow into balanced
   columns automatically regardless of how many exist. */
.menu-items-columns {
    column-count: 2;
    column-gap: 2.5rem;
}

.menu-items-columns .menu-item-row {
    break-inside: avoid;
}

@media (max-width: 767.98px) {
    .menu-items-columns {
        column-count: 1;
    }
}

.menu-subsection {
    margin-bottom: 2.5rem;
}

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

.menu-subsection-title {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: .25rem;
}

.menu-subsection-note,
.menu-category-note {
    color: var(--color-muted);
    font-size: .875rem;
    font-style: italic;
    margin-bottom: 1.25rem;
}

.menu-tabs {
    flex-wrap: wrap;
    row-gap: .25rem;
}

/* ----- Food Menu — printed-menu style (page-menu.php) -----
   One scrolling page of colored sections that mirrors paisano-menu.pdf.
   Everything is scoped to .menu-scroll / .menu-* page classes so the
   Cocktails page (tabs, same menu blocks) keeps its own look. */
.menu-hero h1,
.menu-section-label span,
.menu-scroll .menu-subsection-title {
    font-family: 'Noto Serif Display', Georgia, 'Times New Roman', serif;
    font-stretch: 68%;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .01em;
}

.menu-hero h1 {
    font-size: clamp(3rem, 8vw, 5rem);
    line-height: 1;
}

/* Sticky section chips, tucked under the sticky navbar (height set in main.js). */
.menu-jumpnav {
    position: sticky;
    top: var(--site-nav-h, 53px);
    z-index: 1010; /* under the navbar's .sticky-top (1020) */
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(46, 26, 22, .08);
}

.menu-jumpnav-list {
    display: flex;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: .65rem 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}

.menu-jumpnav-list::-webkit-scrollbar {
    display: none;
}

.menu-jumpnav-list li:last-child {
    padding-right: 2.5rem; /* so the last chip clears the fade */
}

.menu-jumpnav-link {
    display: block;
    white-space: nowrap;
    padding: .35rem .9rem;
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    color: var(--color-text);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
}

.menu-jumpnav-link:hover,
.menu-jumpnav-link:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.menu-jumpnav-link.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-cream);
}

/* Sections + panel colors */
.menu-section {
    position: relative;
    padding: 4rem 0;
    scroll-margin-top: calc(var(--site-nav-h, 53px) + 56px);
    background: var(--color-paper);
    color: var(--color-text);
}

.menu-panel--sand { background: var(--color-light); }
.menu-panel--rose { background: var(--color-accent); }
.menu-panel--red  { background: var(--color-primary); color: var(--color-cream); }

/* Banner photo with a torn-paper bottom edge, like the printed menu. */
.menu-section.has-banner {
    padding-top: 0;
}

.menu-section-banner {
    height: clamp(200px, 30vw, 380px);
    overflow: hidden;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V94L100 94L99.8 96.2L96.8 94.3L94.7 91.1L91.8 93.2L90.1 91.4L87.3 90.9L85.9 91.7L83.8 90.7L81.2 93.2L79.5 96.3L76.3 95.0L73.7 90.9L71.1 93.8L68.1 96.4L65.9 94.6L63.6 95.4L61.7 96.6L59.4 95.9L56.8 90.8L54.7 91.6L52.0 93.4L50.5 97.4L48.7 95.6L45.8 94.2L43.4 92.2L40.8 96.1L39.0 93.7L36.7 92.7L34.6 95.3L33.0 90.9L31.7 94.3L29.7 95.0L27.4 91.8L24.5 92.7L23.1 91.5L21.3 96.5L20.0 97.3L18.0 94.5L14.9 94.9L13.3 91.4L10.4 93.5L9.1 91.0L7.0 90.8L4.8 90.9L2.8 94.3L1.5 95.1L0.0 92.8Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V94L100 94L99.8 96.2L96.8 94.3L94.7 91.1L91.8 93.2L90.1 91.4L87.3 90.9L85.9 91.7L83.8 90.7L81.2 93.2L79.5 96.3L76.3 95.0L73.7 90.9L71.1 93.8L68.1 96.4L65.9 94.6L63.6 95.4L61.7 96.6L59.4 95.9L56.8 90.8L54.7 91.6L52.0 93.4L50.5 97.4L48.7 95.6L45.8 94.2L43.4 92.2L40.8 96.1L39.0 93.7L36.7 92.7L34.6 95.3L33.0 90.9L31.7 94.3L29.7 95.0L27.4 91.8L24.5 92.7L23.1 91.5L21.3 96.5L20.0 97.3L18.0 94.5L14.9 94.9L13.3 91.4L10.4 93.5L9.1 91.0L7.0 90.8L4.8 90.9L2.8 94.3L1.5 95.1L0.0 92.8Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
}

.menu-section-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
    display: block;
}

/* Heading label: black box with paper text (paper box on red panels). */
.menu-section-label {
    text-align: center;
    margin: 0 0 2.5rem;
    line-height: 1;
}

.menu-section-label span {
    display: inline-block;
    padding: .5rem 1.1rem .4rem;
    background: #1f1a17;
    color: var(--color-paper);
    font-size: clamp(2.1rem, 5vw, 3.25rem);
}

.menu-panel--red .menu-section-label span {
    background: var(--color-paper);
    color: #1f1a17;
}

.menu-section.has-banner .menu-section-label {
    position: relative;
    z-index: 1;
    margin-top: -2.4rem; /* sit on the photo's torn edge */
}

.menu-section-body {
    max-width: 1080px;
    margin: 0 auto;
}

/* Section intro + callout */
.menu-scroll .menu-category-note {
    max-width: 640px;
    margin: -1rem auto 2rem;
    color: inherit;
    opacity: .85;
    font-size: .95rem;
    text-align: center;
}

.menu-category-callout {
    display: table;
    margin: -1rem auto 1.5rem;
    padding: .45rem 1.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    color: var(--color-text);
    font-weight: 700;
    text-align: center;
}

.menu-panel--red .menu-category-callout {
    background: var(--color-paper);
}

.menu-category-callout + .menu-category-note {
    margin-top: 0;
}

/* Item rows */
.menu-scroll .menu-items-columns {
    column-gap: 3.5rem;
}

.menu-scroll .menu-item-row {
    gap: 1.25rem;
    align-items: flex-start;
    padding: .8rem 0;
    border-bottom: none;
}

.menu-scroll .menu-item-name {
    margin-bottom: .1rem;
    color: inherit;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.menu-scroll .menu-item-tag {
    margin-left: .3rem;
    font-weight: 400;
    font-size: .875rem;
    letter-spacing: 0;
    text-transform: none;
    opacity: .8;
}

.menu-scroll .menu-item-note {
    margin: 0 0 .15rem;
    color: inherit;
    font-style: normal;
    font-weight: 700;
    font-size: .875rem;
}

.menu-scroll .menu-item-desc {
    color: inherit;
    opacity: .82;
    font-size: .9rem;
    line-height: 1.45;
}

.menu-scroll .menu-item-desc--es {
    margin-top: .2rem;
    font-style: italic;
    opacity: .7;
}

.menu-scroll .menu-item-variants {
    margin-top: .35rem;
    color: inherit;
    font-weight: 700;
    font-size: .9rem;
}

.menu-scroll .menu-item-price {
    margin-left: 0;
    color: inherit;
    font-weight: 800;
    font-size: 1rem;
}

.menu-item-price--stacked {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    line-height: 1.1;
}

.menu-item-price-label {
    font-size: .7rem;
    font-weight: 400;
}

.menu-item-price-value + .menu-item-price-label {
    margin-top: .35rem;
}

/* Featured items: red box / red outline */
.menu-scroll .menu-item--filled,
.menu-scroll .menu-item--outline {
    margin: .5rem 0;
    padding: 1rem 1.25rem;
    border-radius: 16px;
}

.menu-scroll .menu-item--filled {
    background: var(--color-primary);
    color: var(--color-paper);
}

.menu-scroll .menu-item--outline {
    border: 2px solid var(--color-primary);
}

.menu-panel--red .menu-item--filled  { background: var(--color-secondary); }
.menu-panel--red .menu-item--outline { border-color: var(--color-cream); }

/* Compact layout (Sides, Pupusas): short name/price rows */
.menu-layout--compact .menu-items-columns {
    max-width: 760px;
    margin: 0 auto;
}

.menu-layout--compact .menu-item-row {
    padding: .45rem 0;
    align-items: baseline;
    border-bottom: 1px dotted rgba(242, 220, 194, .35);
}

.menu-layout--compact:not(.menu-panel--red) .menu-item-row {
    border-bottom-color: rgba(46, 26, 22, .2);
}

.menu-layout--compact .menu-item-name {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .menu-section {
        padding: 3rem 0;
    }

    .menu-scroll .menu-item--filled,
    .menu-scroll .menu-item--outline {
        padding: .9rem 1rem;
    }

    /* Short rows still fit two-up on most phones. */
    .menu-layout--compact .menu-items-columns {
        column-count: 2;
        column-gap: 1.5rem;
    }
}

@media (max-width: 419.98px) {
    .menu-layout--compact .menu-items-columns {
        column-count: 1;
    }
}

/* Soft highlight: dusty-rose box (used on the Drinks Menu, like its PDF). */
.menu-scroll .menu-item--soft {
    margin: .5rem 0;
    padding: .9rem 1.25rem;
    border-radius: 16px;
    background: var(--color-rose-deep);
}

.menu-scroll .menu-item--soft .menu-item-name {
    color: var(--color-secondary);
}

/* ----- Drinks Menu variant (page-cocktails.php) -----
   Labels follow paisano-drink-menu.pdf: bold sans in a red rounded box
   with an offset gold outline. Everything else is shared with the Food Menu. */
.menu-scroll--drinks .menu-section-label span {
    position: relative;
    padding: .5rem 1.75rem .55rem;
    border-radius: 10px;
    background: var(--color-primary);
    color: #fff;
    font-family: inherit;
    font-stretch: normal;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: clamp(1.9rem, 4.5vw, 2.75rem);
    transform: rotate(-1deg);
}

.menu-scroll--drinks .menu-section-label span::after {
    content: "";
    position: absolute;
    inset: -7px 5px 6px -5px;
    border: 2px solid var(--color-gold);
    border-radius: 12px;
    transform: rotate(2deg);
    pointer-events: none;
}

.menu-scroll--drinks .menu-panel--red .menu-section-label span {
    background: var(--color-paper);
    color: var(--color-primary);
}

/* "Make it non-alcoholic with Ritual Zero Proof…" lines: small, like the PDF. */
.menu-scroll--drinks .menu-item-variants {
    font-weight: 500;
    font-size: .8125rem;
    font-style: italic;
    opacity: .85;
}

/* Allergy notice + drinks link under the menu */
.menu-footer-notes {
    padding: 4rem 0;
    background: var(--color-paper);
}

.menu-allergy-notice {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--color-primary);
    background: rgba(255, 255, 255, .5);
    color: var(--color-text);
    font-size: .9rem;
    text-align: center;
}

/* ----- Events page ----- */
.events-page {
    padding: 5rem 0;
}

.event-card {
    border: 1px solid var(--color-border);
    border-radius: 0;
    overflow: hidden;
    height: 100%;
    transition: box-shadow .2s;
}

.event-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
}

.event-card img {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

.event-date-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: var(--color-white);
    width: 56px;
    height: 56px;
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1;
    margin-bottom: .75rem;
}

.event-date-badge span {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ----- Events (CPT) — list rows, single page, placeholders ----- */
.events-intro {
    max-width: 760px;
}

.events-group-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-heading);
    padding-bottom: .75rem;
    margin-bottom: 1.75rem;
    border-bottom: 2px solid var(--color-border);
}

.event-row {
    border: 1px solid var(--color-border);
    background: var(--color-white);
    margin-bottom: 1.75rem;
    transition: box-shadow .2s;
}

.event-row:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
}

.event-row-media {
    display: block;
    height: 100%;
}

.event-row .event-img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    display: block;
}

.event-row-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem;
}

.event-row-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: .75rem;
}

.event-row-title a {
    color: var(--color-heading);
    text-decoration: none;
}

.event-row-title a:hover {
    color: var(--color-secondary);
}

.event-when {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: .5rem;
}

.event-meta li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .9rem;
    margin-bottom: .35rem;
}

.event-meta i {
    color: var(--color-primary);
}

.event-meta-lg li {
    font-size: 1.05rem;
    margin-bottom: .6rem;
}

/* Placeholder shown until the owner sets a featured image */
.event-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-brown));
    color: var(--color-cream);
    text-align: center;
    padding: 1.5rem;
}

.event-img-placeholder i {
    font-size: 3rem;
    opacity: .85;
}

.event-img-placeholder span {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.event-single-media .event-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.event-back {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.event-back:hover {
    color: var(--color-secondary);
}

.events-empty {
    border: 2px dashed var(--color-border);
    padding: 3rem 1.5rem;
}

.events-empty > i {
    font-size: 2.5rem;
    color: var(--color-primary);
}

.events-follow {
    background-color: var(--color-cream);
    padding: 2.5rem 1.5rem;
}

.events-follow-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 1.25rem;
    text-decoration: none;
    transition: background-color .2s;
}

.events-follow-link:hover {
    background-color: var(--color-brown);
    color: var(--color-white);
}

.events-private {
    background-color: var(--color-brown);
    color: var(--color-white);
}

.btn-cream {
    background-color: var(--color-cream);
    color: var(--color-brown);
    border: none;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.btn-cream:hover,
.btn-cream:focus-visible {
    background-color: var(--color-white);
    color: var(--color-primary);
}

@media (max-width: 767.98px) {
    .event-row .event-img {
        min-height: 200px;
        height: 200px;
    }
    .event-row-body {
        padding: 1.5rem;
    }
}

/* ----- Catering page ----- */
.catering-page {
    padding: 5rem 0;
}

.catering-step {
    padding: 1.5rem 1rem;
}

.catering-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 800;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.catering-form-card {
    max-width: 860px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-primary);
    padding: 2.5rem;
}

.catering-form-section {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-primary);
    padding-bottom: .5rem;
    margin: 2rem 0 1rem;
    border-bottom: 1px solid var(--color-border);
}

.catering-form-section:first-child {
    margin-top: 0;
}

.catering-radio .wpcf7-list-item {
    margin: 0 1.5rem .25rem 0;
}

.catering-radio label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
}

.catering-radio input[type="radio"] {
    accent-color: var(--color-primary);
    width: 1.1rem;
    height: 1.1rem;
}

@media (max-width: 575.98px) {
    .catering-form-card {
        padding: 1.5rem 1.25rem;
    }
}

/* ----- Contact page ----- */
.contact-page {
    padding: 5rem 0;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.contact-info-item .icon-wrap {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* ----- Page hero banner (interior pages) ----- */
.page-hero {
    position: relative;
    background-color: var(--color-dark);
    background-size: cover;
    background-position: center;
    padding: 4rem 0;
    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.page-hero .container {
    position: relative;
    z-index: 1;
}

.page-hero h1 {
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3.5rem);
}

/* ----- Footer wordmark ----- */
.footer-wordmark {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-cream) !important;
    line-height: 1;
    transition: color .2s;
}

.footer-wordmark:hover {
    color: var(--color-accent) !important;
}

.footer-wordmark-sub {
    display: block;
    font-size: .55rem;
    font-weight: 600;
    letter-spacing: .22em;
    color: var(--color-accent);
    margin-top: .1rem;
}

/* ----- Footer ----- */
.footer-heading {
    color: var(--color-white);
    letter-spacing: .05em;
}

.footer-social-link {
    color: var(--color-footer-text);
    transition: color .2s;
}

.footer-social-link:hover {
    color: var(--color-white);
}

.footer-contact-link {
    color: var(--color-footer-text);
    text-decoration: none;
    transition: color .2s;
}

.footer-contact-link:hover {
    color: var(--color-white);
}

.footer-nav a {
    color: var(--color-footer-text);
    font-size: .875rem;
    display: block;
    padding: .2rem 0;
    transition: color .2s;
}

.footer-nav a:hover {
    color: var(--color-white);
}

/* ----- Modal ----- */
.modal-content {
    border-radius: 0;
    border: none;
}

/* ----- Navbar height + scroll shrink -----
   ~69px tall at the top of the page (1rem padding), shrinks to ~53px once scrolled. */
#site-navbar {
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition: padding .2s, box-shadow .2s;
}

#site-navbar.navbar-scrolled {
    padding-top: .5rem;
    padding-bottom: .5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
}

/* ----- Back to top smooth scroll ----- */
html {
    scroll-behavior: smooth;
}

/* ----- Responsive tweaks ----- */
@media (max-width: 991.98px) {
    .hero-section {
        min-height: 60vh;
    }

    .feature-card img {
        height: 240px;
    }
}

@media (max-width: 575.98px) {
    .promo-card .card-img-top {
        height: 160px;
    }
}

/* ----- Menu category image slider ----- */
.menu-category-slider {
    border-radius: 0.75rem;
    overflow: hidden;
}

.menu-category-slider .carousel-item img {
    height: 320px;
    object-fit: cover;
}

.menu-category-slider .carousel-control-prev,
.menu-category-slider .carousel-control-next {
    width: 8%;
}

@media (max-width: 575.98px) {
    .menu-category-slider .carousel-item img {
        height: 200px;
    }

    /* 8% is a comfortable click target on desktop but shrinks below a usable
       touch target (~28px) on phone-width screens — widen it back up. */
    .menu-category-slider .carousel-control-prev,
    .menu-category-slider .carousel-control-next {
        width: 15%;
    }
}

/* Categories with at least one portrait photo (detected automatically per
   folder, any page) get a taller box so that photo isn't squeezed — the
   other, landscape photos in the same carousel still look fine taller. */
.menu-category-slider--has-portrait .carousel-item img {
    height: 560px;
}

@media (max-width: 575.98px) {
    .menu-category-slider--has-portrait .carousel-item img {
        height: 420px;
    }
}

/* Mexican Plates — all landscape photos, but wide overhead shots that lose
   too much top/bottom content in the standard box. Manually opted into the
   same taller box as the portrait categories (no is-portrait photos here to
   trigger it automatically); still object-fit: cover since nothing's portrait. */
#menu-slider-mexican-plates .carousel-item img {
    height: 560px;
}

@media (max-width: 575.98px) {
    #menu-slider-mexican-plates .carousel-item img {
        height: 420px;
    }
}

/* Object-fit is decided per photo, not per category — a portrait photo
   cropped with object-fit: cover is reduced to a thin vertical sliver, so
   show it in full on a dark-backed box instead. Landscape photos keep
   cropping to fill, which looks better for them than letterboxing. */
.menu-category-slider .carousel-item img.is-portrait {
    object-fit: contain;
    background-color: var(--color-dark);
}

/* ===== About Us page ===== */
.about-story {
    padding: 5rem 0;
    background-color: var(--color-white);
}

.about-story-img {
    position: relative;
}

.about-story-img img {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: 2px;
}

/* Circular "Est. 2007" badge overlapping the story photo */
.est-badge {
    position: absolute;
    right: -1.25rem;
    bottom: -1.25rem;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-cream);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    border: 3px solid var(--color-cream);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.est-badge .est-badge-word {
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 700;
}

.est-badge .est-badge-year {
    font-size: 1.6rem;
    font-weight: 800;
}

.about-values {
    padding: 5rem 0;
    background-color: var(--color-cream);
}

.about-value {
    text-align: center;
    padding: 1rem;
}

.about-value .about-value-icon {
    font-size: 2.25rem;
    color: var(--color-primary);
    margin-bottom: .75rem;
    display: inline-block;
}

.about-value h4 {
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: .5rem;
}

.about-cta {
    padding: 5rem 0;
    background-color: var(--color-dark);
    color: var(--color-white);
    text-align: center;
}

.about-cta .section-heading {
    color: var(--color-white);
}

.about-cta-flags {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
    .est-badge {
        right: 1rem;
        bottom: -1rem;
        width: 92px;
        height: 92px;
    }

    .est-badge .est-badge-year {
        font-size: 1.3rem;
    }
}

/* ----- Contact Form 7 — Bootstrap alignment ----- */
.wpcf7-form-control-wrap {
    display: block;
}

.wpcf7-not-valid-tip {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
}

.wpcf7-form .wpcf7-not-valid {
    border-color: #dc3545;
}

.wpcf7-response-output {
    margin-top: 1.5rem !important;
    border-radius: 0.5rem;
}

.wpcf7-spinner {
    margin-left: 0.5rem;
}