/* =============================================
   Pelines Tequila & Mezcal - Color & Branding Overrides
   Original: KITCHN template (#bf0000 red)
   New: Pelines brand palette from Figma
   - Red:    #F21D1D
   - Green:  #12733C
   - Orange: #F2A71B
   - Blue:   #048ABF
   - Light:  #F2F2F2
   ============================================= */

/* Global font override — Webflow default is DM Sans */
body {
  font-family: 'Work Sans', sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Bree Serif', serif !important;
}

/* Primary color: #bf0000 → #F21D1D (Pelines red) */
a { color: #F21D1D; }

.form-checkbox-icon.w--redirected-checked {
  background-color: #F21D1D;
  border-color: #F21D1D;
}
.form-input:focus { border-color: #F2A71B; }
.form-radio-icon:active,
.form-radio-icon.w--redirected-checked,
.form-radio-icon.w--redirected-focus { border-color: #F21D1D; }

.button-tertiary { color: #F21D1D; }
.stylesystem-color-sample.primary-color { background-color: #F21D1D; }

.button {
  background-color: #F21D1D;
}
.button:hover {
  background-color: #c91616;
}

.text-size-1-25rem.text-weight-medium.text-color-primary-c1 { color: #F21D1D; }

.tab-link-style-empty.w--current {
  color: #F21D1D;
  border-bottom-color: #F21D1D;
}

.subtitle { color: #F21D1D; }

.position-absolute.item-12 { background-color: #F21D1D; }

.background-color-primary-c1 {
  color: #fff;
  background-color: #F21D1D;
}

.background-color-primary-c1---xtra-light {
  background-color: #FFF5F5;
}

.icon-wrapper { background-color: #F21D1D; }

/* Navbar Order Online button */
.pelines-navbar .button.button-small {
  background-color: #F21D1D !important;
  border: 2px solid #F21D1D !important;
  color: #fff !important;
}
.pelines-navbar .button.button-small:hover {
  background-color: #c91616 !important;
  border-color: #c91616 !important;
}

.newsletter-button { background-color: #F2A71B; }
.newsletter-button:hover { background-color: #d9940f; }

.error-message { color: #F21D1D; }

.w-slider-dot.w-active { background-color: #F21D1D; }

.menu-card-style:hover {
  border-color: #F21D1D;
}

.button.white:hover {
  background-color: #F2A71B;
  color: #1A1A2E;
}

/* Location-specific colors: Troutdale (red) */
.location-troutdale .background-color-primary-c1 { background-color: #F21D1D; }
.location-troutdale .button { background-color: #F21D1D; }
.location-troutdale .button:hover { background-color: #c91616; }
.location-troutdale .subtitle { color: #F21D1D; }
.location-troutdale .text-size-1-25rem.text-weight-medium.text-color-primary-c1 { color: #F21D1D; }

/* Location-specific colors: Tualatin (green) */
.location-tualatin .background-color-primary-c1 { background-color: #12733C; }
.location-tualatin .button { background-color: #12733C; }
.location-tualatin .button:hover { background-color: #0d5a2e; }
.location-tualatin .subtitle { color: #12733C; }
.location-tualatin .text-size-1-25rem.text-weight-medium.text-color-primary-c1 { color: #12733C; }
.location-tualatin .nav-link.w--current { color: #12733C; }
.location-tualatin .background-color-primary-c1---xtra-light { background-color: #E8F5ED; }

/* Dark section */
.background-color-dark-c1 {
  color: #f5f5f5;
  background-color: #1A1A2E;
}
.text-color-primary-c1 { color: #F21D1D; }
.text-color-white { color: #fff; }
.text-color-300 { color: #eff2f6; }
.text-color-600 { color: #6b7280; }
.text-color-black { color: #272f39; }

/* grid-menu layout fixes */
.grid-menu > .margin-bottom.margin-small {
  grid-column: 1 / -1;
}
.grid-menu > .divider-line {
  grid-column: 1 / -1;
}
.grid-menu > .button {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 1rem;
}

.background-color-dark-c1 .text-size-1-25rem.text-weight-medium {
  color: #fff;
}
.background-color-dark-c1 .button {
  color: #272f39;
  background-color: #fff;
}
.background-color-dark-c1 .button:hover {
  background-color: #F2A71B;
}
.location-tualatin .background-color-dark-c1 .button {
  color: #272f39;
  background-color: #fff;
}

/* Menu/image styles */
.hero-section---image-full {
  object-position: 50% 50%;
}
.thumbnail-image {
  height: 200px;
  max-height: 200px;
  min-height: 200px;
}

/* Hide old Webflow navbar if it ever appears */
.navbar.w-nav {
  display: none !important;
}

/* Tighter container padding */
.container-90 {
  max-width: 95%;
}

/* Footer link colors */
.pelines-footer .footer-link {
  color: #fff;
}
.pelines-footer a {
  color: #fff;
}

/* =============================================
   Responsive
   ============================================= */
@media screen and (max-width: 991px) {
  /* Grid sections stack on mobile */
  .grid-2x0 {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .grid-3x0 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Legacy section: image below text on mobile */
  .legacy-image-col {
    order: 2 !important;
  }
  .legacy-text-col {
    order: 1 !important;
  }

  /* Location info section: text on top, image below */
  .location-info-wrapper {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
  .location-info-flex {
    flex-direction: column-reverse !important;
    gap: 2rem !important;
    align-items: center !important;
  }
  .location-info-image {
    width: 100% !important;
    flex-shrink: 1 !important;
  }
  .location-info-image img {
    width: 80% !important;
    height: auto !important;
    max-width: 350px !important;
    margin: 0 auto !important;
    aspect-ratio: 1/1 !important;
  }

  /* Green location section: use mobile pattern */
  .location-green-section {
    background-image: url(/patterns/greenphone.png) !important;
    background-size: 100% 100% !important;
    padding: 3rem 0 !important;
  }

  /* Catering CTA section: mobile layout */
  .catering-cta-section {
    background-image: url(/patterns/redphone.png) !important;
    background-size: 100% 100% !important;
    padding: 3rem 0 !important;
  }
  .catering-cta-section > div {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
  .catering-cta-section > div > div {
    flex-direction: column-reverse !important;
    gap: 2rem !important;
    align-items: center !important;
  }
  .catering-cta-section > div > div > div:first-child {
    flex-shrink: 1 !important;
    width: 100% !important;
  }
  .catering-cta-section > div > div > div:first-child img {
    width: 80% !important;
    height: auto !important;
    max-width: 350px !important;
    margin: 0 auto !important;
    aspect-ratio: 1/1 !important;
    transform: none !important;
  }
  .catering-cta-section > div > div > div:last-child {
    text-align: left;
  }

  /* Menu sections: tighter spacing on mobile */
  .location-troutdale section,
  .location-tualatin section {
    padding-top: 0.5rem !important;
    padding-bottom: 0 !important;
  }

  /* Menu & catering tabs: fit all in one row without scroll */
  .bottom-tabs-scroll,
  .catering-tabs-scroll {
    overflow-x: hidden !important;
    flex-wrap: nowrap !important;
  }
  .bottom-tabs-scroll button,
  .catering-tabs-scroll button {
    white-space: normal !important;
    font-size: 0.65rem !important;
    padding: 0.7rem 0.3rem !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
  }

  /* Reviews: show only first review on mobile */
  .reviews-grid > div:nth-child(n+2) {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  /* "Why Pelines Catering" heading needs breathing room */
  .pelines-catering-heading {
    font-size: 1.6rem !important;
    line-height: 1.4 !important;
  }
  .pelines-catering-heading span {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 1.6rem !important;
  }

  /* More padding on mobile sections */
  section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Hero text sizing on mobile */
  .location-troutdale h1,
  .location-tualatin h1 {
    font-size: 2rem !important;
  }

  .pelines-footer-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .pelines-footer-grid > div {
    text-align: center;
  }
  .footer-logo-link {
    justify-content: center !important;
  }
  .pelines-footer .margin-bottom.margin-medium {
    text-align: center;
  }
  .pelines-footer .margin-bottom.margin-medium > div:last-child {
    justify-content: center;
  }

  /* Navbar logo smaller on mobile */
  .pelines-navbar img {
    height: 50px !important;
  }
}