/* The Mirchi House — brand color overrides on top of the template's default
   purple/yellow/teal palette (#6046b6 / #ffe745 / #73cca1). Colors drawn from
   the logo: cream background, near-black, deep chili red, small stem-green accent. */

:root {
    --mirchi-primary: #9C1D1D;
    --mirchi-primary-dark: #711414;
    --mirchi-green: #3F5D3F;
    --mirchi-dark: #201B17;
    --mirchi-cream: #FBF6EC;
}

/* About page tabs (About Us/Our Mission/Our Vision/Our Promise) - the
   active-tab underline indicator, only spotted at tablet width where the
   tabs render as a horizontal bar instead of the desktop vertical list. */
.list-category-item a::before {
    background: var(--mirchi-primary) !important;
}

/* Contact page aside cards (Phone/E-mail/Address/Opening Hours) - the
   small icon glyphs, only spotted at tablet width when scrolled into
   view (same 2-column layout exists at desktop width too, so this was
   likely always wrong, just not scrolled past before). */
.aside-contacts span.icon {
    color: var(--mirchi-primary) !important;
}
.aside-contacts a:hover {
    color: var(--mirchi-primary) !important;
}

/* Page-load preloader - was the template's default spinning triangle
   animation in its original purple/blue accent color; replaced with a
   simple pulsing chili icon. */
.preloader-icon {
    width: 84px;
    height: 84px;
    animation: preloaderPulse 1.1s ease-in-out infinite;
}
@keyframes preloaderPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.12); opacity: 1; }
}

/* Gallery page - YouTube video embeds. The template's .embed-responsive
   utility only covers <video>, not <iframe> - extend it. */
.embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.video-card {
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    overflow: hidden;
    margin-bottom: 30px;
}
.video-card-title {
    padding: 16px 20px;
    font-weight: 700;
    margin: 0;
}

/* Header - plain white instead of the template's light gray. */
.rd-navbar-modern {
    background: #ffffff;
}
.rd-navbar-modern.rd-navbar-static.rd-navbar--is-stuck,
.rd-navbar-modern.rd-navbar-static.rd-navbar--is-clone {
    background: #ffffff;
}

/* Footer - Wix-style layout (heading + address/hours/contact row,
   legal links/social/copyright row) on a solid dark-gray background. */
.footer-mirchi-top {
    background: #38393B;
    padding: 60px 0 30px;
}
.footer-mirchi-heading {
    text-align: center;
    color: #F0E4DC;
    font-family: "Raleway", sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: 36px;
    margin-bottom: 40px;
}
.footer-mirchi-row {
    margin-bottom: 30px;
}
.footer-mirchi-col-center {
    text-align: center;
}
.footer-mirchi-col-right {
    text-align: right;
}
.footer-mirchi-label {
    color: #F0E4DC;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.footer-mirchi-text {
    color: #F0E4DC;
    margin-bottom: 4px;
}
.footer-mirchi-text a {
    color: #F0E4DC;
    transition: color .2s ease;
}
.footer-mirchi-text a:hover {
    color: #ffffff;
}
.footer-mirchi-brand {
    display: inline-block;
    margin-bottom: 14px;
}
.footer-mirchi-brand .logo-crop {
    width: 70px;
    height: 70px;
    overflow: visible;
    background: transparent;
}
.footer-mirchi-brand .logo-crop img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
}
.footer-mirchi-social {
    margin: 16px 0 0;
    padding: 0;
    text-align: center;
}
.footer-mirchi-social li {
    margin: 0 6px !important;
}
.footer-mirchi-social .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #F0E4DC;
    font-size: 20px;
    transition: color .2s ease;
}
.footer-mirchi-social .icon:hover {
    color: var(--mirchi-primary);
}
.footer-mirchi-bottom {
    background: #8E2A24;
    padding: 20px 0;
    text-align: center;
}
.footer-mirchi-copyright {
    color: #F0E4DC;
    font-size: 13px;
    margin-bottom: 2px;
}
@media (max-width: 767px) {
    .footer-mirchi-col,
    .footer-mirchi-col-center,
    .footer-mirchi-col-right {
        text-align: center;
        margin-bottom: 24px;
    }
    /* Stack order on mobile: hours+social first, then logo/address,
       then contact - desktop keeps its own left-to-right column order
       (address/hours/contact), only the mobile stack differs. Base
       .footer-mirchi-col rule must come first so the more specific
       -center/-right modifiers win the tie on elements carrying both
       classes. */
    .footer-mirchi-col {
        order: 2;
    }
    .footer-mirchi-col-center {
        order: 1;
    }
    .footer-mirchi-col-right {
        order: 3;
    }
}

/* Logo - the source file has a lot of empty/blurred padding around the
   actual mark, and the template's own responsive rules scale
   .rd-navbar-brand img up to 200-240px at wider breakpoints. This crops
   into the image (zooming past the padding) and holds a small, fixed
   on-screen size so it aligns with the nav text at every breakpoint. */
.logo-crop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    overflow: hidden;
    border-radius: 6px;
    vertical-align: middle;
}
.logo-crop img {
    width: 170% !important;
    height: 170% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    flex-shrink: 0;
}
.rd-navbar-brand {
    display: flex;
    align-items: center;
    height: auto;
}
/* ------------------------------------------------------------------
   Navbar redesign (desktop / .rd-navbar-static breakpoints only -
   mobile keeps the plugin's compact hamburger layout, which is fine
   as-is and doesn't need this treatment).

   Fixed two-row layout, same at every desktop width:
     Row 1: contact info (phone/address) + social icons - right-aligned
     Row 2: logo (left) + menu links (same line, following the logo)

   .rd-navbar-panel (logo) and .rd-navbar-right (which wraps .rd-navbar-aside
   contact info and .rd-navbar-main menu) are siblings in the markup, and
   aside/main are nested a level deeper inside rd-navbar-right. To put
   "aside" alone on its own top row while "panel" and "main" share the
   row below - across that nesting - .rd-navbar-right is set to
   `display: contents` so its children become direct grid items
   alongside .rd-navbar-panel, and a named CSS Grid places all three.
   ------------------------------------------------------------------ */
/* NOTE: selectors here use .rd-navbar-modern.rd-navbar-static (matching
   the template's own two-class prefix) rather than just .rd-navbar-static.
   The template's base rules for these same elements use that exact
   two-class prefix, which is MORE specific than a single-class version -
   without matching it, the base rules win regardless of source order or
   !important on individual properties, and this whole layout silently
   fails back to the template's default flex row. Learned this the hard
   way: it looked like it was working in isolated testing (content
   happened to flex-wrap at the widths tested), but was never actually
   using this grid. */
.rd-navbar-modern.rd-navbar-static .rd-navbar-inner {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "top    top"
        "panel  main";
    align-items: center;
    row-gap: 6px;
    padding: 10px 0 !important;
}
.rd-navbar-modern.rd-navbar-static .rd-navbar-right {
    display: contents !important;
}
.rd-navbar-modern.rd-navbar-static .rd-navbar-aside {
    grid-area: top;
    justify-self: end;
    padding: 0 !important;
}
.rd-navbar-modern.rd-navbar-static .rd-navbar-panel {
    grid-area: panel;
    margin-bottom: 0;
    padding: 0 30px 0 0 !important;
    /* Reset the width the template reserved for its old skewed decorative
       panel (min-width up to 280px) - the logo alone doesn't need it. */
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
}
.rd-navbar-modern.rd-navbar-static .rd-navbar-main {
    grid-area: main;
    justify-self: end;
    /* Leave room for the gallery-toggle hamburger icon, which sits
       absolutely positioned at the far right (48px wide, right:4px). */
    padding: 0 60px 0 0 !important;
    max-width: none !important;
}
/* The template draws decorative skewed white wedges behind the logo
   panel and the aside block, sized well beyond the logo/content itself -
   not wanted here, the logo should be the only visible "block". */
.rd-navbar-modern.rd-navbar-static .rd-navbar-panel::before,
.rd-navbar-modern.rd-navbar-static .rd-navbar-aside::before {
    display: none !important;
}

/* Menu links - plain text, no pill/button background (Marriott-style:
   understated, generously spaced text with a color change + underline
   on hover/active rather than a filled box). */
.rd-nav-link {
    padding: 8px 2px !important;
    background: none !important;
    border-radius: 0;
    text-transform: none;
    letter-spacing: normal;
    font-size: 15px;
    font-weight: 600;
    color: var(--mirchi-dark);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.rd-nav-link::before {
    display: none !important;
}
.rd-nav-link:hover,
.rd-nav-item.active .rd-nav-link,
.rd-nav-item.focus .rd-nav-link {
    background: none !important;
    color: var(--mirchi-primary) !important;
    border-bottom-color: var(--mirchi-primary);
}
.rd-navbar-nav {
    display: flex;
    align-items: center;
    gap: 36px;
}
.rd-navbar-static .rd-nav-item + .rd-nav-item {
    margin-left: 0 !important;
}

/* Restyled contact info - icon badges instead of bare glyphs.
   The template spaces this row via a negative-margin gutter technique
   (margin:-Npx on the row, padding on children) - reset all of that to
   zero and use flexbox `gap` instead so spacing is predictable. */
.rd-navbar-contacts-2 {
    margin: 0 !important;
    gap: 20px;
}
/* Prevent phone/address wrapping mid-item only in the desktop single-line
   row - the mobile/tablet drawer is much narrower and needs these to wrap
   onto separate lines normally, or address overflows off-screen. */
.rd-navbar-static .rd-navbar-contacts-2 {
    flex-wrap: nowrap;
}
.rd-navbar-contacts-2 > li {
    margin: 0 !important;
}
.rd-navbar-contacts-2 .unit {
    margin: 0 !important;
    gap: 8px;
}
.rd-navbar-contacts-2 .unit-left {
    min-width: 0;
}
.rd-navbar-contacts-2 .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent !important;
    color: var(--mirchi-primary) !important;
    font-size: 18px !important;
}
.rd-navbar-contacts-2 .phone,
.rd-navbar-contacts-2 .address {
    font-weight: 600;
    color: var(--mirchi-dark);
    white-space: nowrap;
}
.list-share-2 {
    margin: 0 !important;
    display: flex;
    gap: 8px;
}
.list-share-2 li {
    margin: 0 !important;
}
.list-share-2 .icon {
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
}
.list-share-2 .icon:hover {
    background: var(--mirchi-primary) !important;
}

/* Buttons */
.button-primary, .button-primary:focus,
.button-secondary, .button-secondary:focus {
    color: #ffffff;
    background-color: var(--mirchi-primary);
    border-color: var(--mirchi-primary);
}
.button-primary:hover, .button-primary:active,
.button-secondary:hover, .button-secondary:active {
    color: #ffffff;
    background-color: var(--mirchi-primary-dark);
    border-color: var(--mirchi-primary-dark);
}
.button-primary-2, .button-primary-2:focus,
.button-secondary-2, .button-secondary-2:focus {
    color: #ffffff;
    background-color: var(--mirchi-dark);
    border-color: var(--mirchi-dark);
}
.button-primary-2:hover, .button-primary-2:active,
.button-secondary-2:hover, .button-secondary-2:active {
    color: #ffffff;
    background-color: var(--mirchi-primary);
    border-color: var(--mirchi-primary);
}

/* Text / icon accents */
.text-primary,
.product-price,
.menu-price {
    color: var(--mirchi-primary) !important;
}
.box-icon-megan-icon {
    color: var(--mirchi-primary);
}
.services-terri-icon {
    color: #ffffff;
    background: var(--mirchi-primary);
}
.box-icon-classic-icon {
    /* The template animates this icon's color/background through its own
       purple/yellow palette via @keyframes iconClassic, which overrides any
       static color here - disable that animation and use a solid brand color. */
    animation: none !important;
    color: #ffffff !important;
    background: var(--mirchi-primary) !important;
}

/* Gallery-drawer hamburger toggle dots */
.project-hamburger-arrow {
    background-color: var(--mirchi-dark) !important;
}

/* Links */
a.phone, a.address, a.mail {
    transition: color .2s ease;
}
a.phone:hover, a.address:hover, a.mail:hover {
    color: var(--mirchi-primary);
}

/* Swiper pagination + arrows */
.swiper-pagination-bullet-active,
.swiper-pagination span.swiper-pagination-bullet-active {
    background: var(--mirchi-primary);
}
.swiper-pagination-bullet::before {
    background: var(--mirchi-primary) !important;
}
.swiper-pagination-bullet circle {
    stroke: var(--mirchi-primary) !important;
}

/* Breadcrumb decorative underline */
.breadcrumbs-custom-decor::before {
    background: var(--mirchi-primary);
}

/* Isotope / gallery caption hover */
.thumbnail-mary:hover .thumbnail-mary-caption {
    background: var(--mirchi-primary);
    color: #ffffff;
}
.thumbnail-mary:hover .thumbnail-mary-title a,
.thumbnail-mary:hover .thumbnail-mary-location {
    color: #ffffff;
}

/* Cta modern decor */
.cta-modern-decor,
.cta-modern-decor-2 {
    background: var(--mirchi-primary);
}

/* List history (used if any timeline remains) */
.list-history-circle {
    border-color: var(--mirchi-primary);
}
.list-history-item.active .list-history-circle,
.list-history-item a:hover .list-history-circle {
    background: var(--mirchi-primary);
}

/* Force consistent crop on the homepage menu-teaser photos regardless of
   each source photo's original aspect ratio. */
.services-terri-figure {
    height: 220px;
}
.services-terri-figure img {
    height: 100%;
    object-fit: cover;
}

/* Menu page (new) */
.menu-section-title {
    border-bottom: 3px solid var(--mirchi-primary);
    display: inline-block;
    padding-bottom: 8px;
    margin-bottom: 30px;
}
.menu-card {
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    padding: 20px;
    margin-bottom: 24px;
}
.menu-card-figure {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 16px;
}
.menu-card-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.menu-card-title {
    font-weight: 700;
    margin-bottom: 6px;
}
.menu-card-desc {
    color: #777777;
    font-size: 14px;
    margin-bottom: 14px;
}
.menu-variant-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.menu-variant {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
}
.menu-variant .weight { color: #777777; }
.menu-variant .price { font-weight: 700; color: var(--mirchi-primary); }
.menu-note {
    text-align: center;
    font-style: italic;
    color: #777777;
    margin-top: 10px;
}

/* Popular picks (homepage showcase, no cart/ratings) */
.pick-card {
    text-align: center;
}
.pick-figure {
    width: 100%;
    height: 200px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
}
.pick-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.pick-card:hover .pick-figure img {
    transform: scale(1.05);
}
.pick-title {
    font-weight: 700;
    margin-bottom: 6px;
}
.pick-price {
    color: var(--mirchi-primary);
    font-weight: 700;
}

/* Accessibility / robustness: never let content stay permanently hidden
   pending a scroll-triggered reveal animation (WOW.js) that may not fire -
   e.g. reduced-motion preference, or the animation library failing to load. */
@media (prefers-reduced-motion: reduce) {
    .wow {
        visibility: visible !important;
        animation: none !important;
    }
}

/* Contact info aside */
.contact-map iframe {
    width: 100%;
    min-height: 320px;
    border: 0;
    border-radius: 6px;
}