/* ============================================================
   Tastee UI Fixes  (served via the shared tastee-rebrand CSS ref)
   Added 2026-06-13 — fixes two broken features:
     1) Home hero blank/unreliable on load
     2) Menu "DETAILS" dish modal had no styling
   Loaded on every page (referenced as
   wp-content/uploads/tastee-rebrand/ui-fixes.css?v=...).
   ============================================================ */

/* ---- 0) PAGE BACKGROUND -----------------------------------
   The Elementor kit (.elementor-kit-371) forces the site/body background to
   Tastee yellow (rgb(255,199,44)), overriding the theme's own
   `body { background: var(--dark-bg) }`. On full-bleed pages the dark sections
   hide it, but on About the dark sections don't cover the full width and the
   yellow bleeds through on the right. Force the page background dark to match
   the theme everywhere. */
html,
body,
body.elementor-kit-371 { background-color: #121212 !important; }

/* ---- 1) HERO RELIABILITY ----------------------------------
   Root cause: the hero's .container is a flex item inside the
   display:flex .hero-slide, so it shrink-wraps to its content.
   On first paint the talent <img> hasn't resolved a width, so the
   content is narrow and the container collapses (~844px instead of
   1200px). The grid, headline and talent image all collapse with it,
   leaving the hero blank/partial until a slide change forces a reflow
   (a chicken-and-egg). Forcing container + grid to full width breaks
   the cycle; giving the talent image a block, full-width box stops it
   resolving to 0. Scoped to the ACTIVE slide (others are display:none). */
.hero-slide.active .container { width: 100% !important; }
.hero-slide.active .hero-grid { width: 100% !important; }
/* Bottom-anchor the talent cutout on EVERY slide. The wrapper must stay a
   flex column-end box (NOT display:block — that dropped the image to the top of
   its cell, leaving a gap below on wide/landscape cutouts like talent-2/3).
   The image fills the wrapper box (100% x 100%) and object-fit:contain +
   object-position:center bottom seats it on the slide floor regardless of the
   cutout's own aspect ratio (portrait Girl-Patty or landscape talent-2/3). */
.hero-slide.active .hero-image-wrapper {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  height: 100% !important;
  overflow: hidden !important;
}
.hero-slide.active .hero-talent-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  /* Drop the heavy offset drop-shadow (10px 0 30px rgba(0,0,0,.5)) that was
     smudging a dark halo along the cutout edge — keep the cuts clean. */
  filter: none !important;
}
/* Belt-and-suspenders: keep the scroll-animation (.animate-on-scroll/
   .fade-up) from hiding above-the-fold hero content, which also races
   with the slider + clean-init on load. */
.hero-slide.active .animate-on-scroll,
.hero-slide.active .animate-on-scroll.fade-up {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.hero-slide.active .hero-talent-img,
.hero-slide.active .hero-script-img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ---- 2) DISH "DETAILS" MODAL ------------------------------
   The modal markup + click handler exist on menu.html, but the CSS
   was never injected, so the modal rendered as an unstyled static
   <div> at the bottom of the page. This styles it as a centered
   overlay, hidden until .active is added. */
.dish-details-modal {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10050;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.dish-details-modal.active { display: flex; }
.dish-details-content {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  padding: 2rem 2rem 2.25rem;
  box-shadow: 0 24px 64px rgba(0, 40, 44, 0.35);
  animation: dishModalIn 0.25s ease;
}
@keyframes dishModalIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dish-details-content h3 {
  color: var(--tastee-red, #d9232d);
  font-size: 1.5rem;
  margin: 0 0 0.75rem;
}
.dish-details-content p {
  color: #4a5a5d;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}
.dish-details-close {
  position: absolute;
  top: 0.6rem;
  right: 1rem;
  background: none;
  border: none;
  color: #6b7a7d;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.2s;
}
.dish-details-close:hover { opacity: 1; color: #1a1a1a; }

/* ---- 3) CENTER SECTION SUBTITLES --------------------------
   In centered sections (.text-center) a paragraph with a max-width is left-
   aligned because text-align:center doesn't center a block child — only its
   text. Give those paragraphs auto side-margins so the box itself centers
   (fixes the home "Our Favorites" subtitle, etc.). */
.text-center > p {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- 4) ABOUT PAGE TWEAKS ---------------------------------
   Remove the "60 Years of Jamaican Excellence" badge, and make the
   "Our Story" highlighted word use the block heading font (Outfit)
   instead of the italic Playfair serif so it matches the other headings. */
.years-badge { display: none !important; }
.about-hero-content h1 .highlight,
.about-hero .highlight {
  font-family: "Outfit", sans-serif !important;
  font-style: normal !important;
}

/* ---- 5) CONTACT PAGE --------------------------------------
   (a) "Find Our Branches" is dark-themed (white heading + white card titles,
   glass cards) but its background was resolving to light #fafafa — force it
   dark so the text is legible.
   (b) The contact 2-column grid had no max-width, so it spanned nearly edge-to-
   edge while the centered hero sat above it — center it to line things up. */
.locations-page-section { background: #121212 !important; }
.contact-grid {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- 6) ABOUT PAGE SECTION ALIGNMENT ----------------------
   Root cause: the founders ("Chang Family Legacy"), values ("What We Stand For")
   and CTA sections are content-width flex items (~1200px) sitting flush-LEFT
   inside a full-width (1440px) `.elementor-widget-wrap` flex container — so their
   `.container` has no room to centre and the content hugs the left edge with a
   big gap on the right (cards looked shoved left). The stats/timeline sections
   are full-width, so they centre fine. Fix: make these sections full-width too,
   then their `.container { margin: 0 auto }` centres normally and every section
   shares the same content edges. */
.founders-section,
.values-section,
.padding-section { width: 100% !important; }
.founders-section .container,
.values-section .container,
.padding-section .container {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- 7) FOOTER / LAST-SECTION SPACING ---------------------
   The last content section's bottom padding (6rem) stacked with the footer's
   top padding (3rem) into a ~144px empty dark band above the footer — it read
   as a "black area with nothing". Tighten both so the footer sits closer to the
   content (still breathes, just not a void). */
.tastee-footer { padding-top: 1.5rem !important; }
section.padding-section:last-of-type,
section.locations-section:last-of-type { padding-bottom: 2.5rem !important; }

/* ---- 8) MOBILE --------------------------------------------
   (a) The hero headline graphics (.hero-script-img) had no width cap, so on
   narrow phones they spilled past the screen edge and got clipped. Cap them to
   the viewport width.
   (b) "Our Favorites"/menu dish cards were `repeat(2, 1fr)` down to 600px, which
   overflowed on small phones — stack them one-per-row at phone widths. */
.hero-script-img { max-width: 100% !important; }
@media (max-width: 480px) {
  .menu-grid { grid-template-columns: 1fr !important; max-width: 360px !important; margin-left: auto !important; margin-right: auto !important; }
}

/* ---- 9) ABOUT TIMELINE VISIBILITY -------------------------
   The scroll-reveal observer (.animate-on-scroll starts at opacity:0, JS adds
   .visible on intersection) intermittently fails to fire, leaving entries stuck
   hidden (opacity:0) and/or offset by a stale transform — which is why the 1966
   "Where It All Started" and 1968 "Kingston Falls in Love" entries didn't show
   and the line had a big empty gap. Force every timeline entry visible and in
   place so all four (1966 / 1968 / 1980s / 2026) always render. */
.timeline-stop,
.timeline-stop.animate-on-scroll {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}