/* ============================================================
   PHASE 4 -- Premium Polish & Launch Readiness
   ============================================================ */

/* --- 1. Site-wide card hover treatment ----------------------- */
.pk-dish-card,
.pk-menu-card,
.lift-card,
.pk-hover-card,
.team-card > [class*="aspect-"] {
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 350ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.pk-dish-card:hover,
.pk-menu-card:hover,
.lift-card:hover,
.pk-hover-card:hover,
.team-card:hover > [class*="aspect-"] {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -12px rgba(28, 26, 24, 0.18) !important;
}
@media (prefers-reduced-motion: reduce) {
  .pk-dish-card, .pk-menu-card, .lift-card, .pk-hover-card, .team-card > [class*="aspect-"] {
    transition: box-shadow 150ms ease;
  }
  .pk-dish-card:hover, .pk-menu-card:hover, .lift-card:hover, .pk-hover-card:hover, .team-card:hover > [class*="aspect-"] {
    transform: none;
  }
}

/* --- 2. Food image hover zoom (Home featured dishes + Menu cards) --- */
.pk-aspect-45 img, .pk-menu-card img {
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pk-dish-card:hover .pk-aspect-45 img, .pk-menu-card:hover img {
  transform: scale(1.045);
}
@media (prefers-reduced-motion: reduce) {
  .pk-dish-card:hover .pk-aspect-45 img, .pk-menu-card:hover img { transform: none; }
}

/* --- 3. Mobile nav open/close transition (replaces instant display cut) --- */
.pk-mobile-toggle .elementor-tab-content {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1), transform 260ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 260ms;
}
.pk-mobile-toggle .elementor-tab-title.elementor-active + .elementor-tab-content {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1), transform 260ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .pk-mobile-toggle .elementor-tab-content,
  .pk-mobile-toggle .elementor-tab-title.elementor-active + .elementor-tab-content {
    transition: opacity 1ms linear, visibility 0s linear;
    transform: none;
  }
}

/* --- 4. Branded focus-visible states -------------------------- */
.pk-pill-btn .elementor-button:focus-visible,
.pk-header-nav .elementor-button-link:focus-visible,
.pk-mobile-toggle .elementor-tab-content a:focus-visible,
#elementor-tab-content-2631 a:focus-visible,
footer .elementor-button-link:focus-visible,
footer .elementor-social-icon:focus-visible,
.pk-mobile-toggle .elementor-tab-title:focus-visible,
.wpcf7-form .wpcf7-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FAFAF7, 0 0 0 4px #ED286E;
  border-radius: 999px;
}
.lwc-input:focus-visible, .lwc-textarea:focus-visible, .lwc-select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(237,40,110,.15);
}

/* --- 5. Image fade-in after load (class toggled by phase4-polish.js) --- */
.pk-fade-in-img {
  opacity: 0;
  transition: opacity 250ms ease-out;
}
.pk-fade-in-img.pk-loaded {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .pk-fade-in-img { opacity: 1; transition: none; }
}

/* ============================================================
   Responsive production fixes (bugs, not polish)
   ============================================================ */

/* --- Tablet 768-1024px: only one nav pattern active at a time.
   Desktop nav pills only hide below 768px natively; extend that
   through the full tablet range so the hamburger is the sole nav
   there too (matches mobile behavior). Desktop (>=1025px) keeps
   its existing dual presence unchanged. --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .pk-header-nav { display: none !important; }
}

/* Pill CTA buttons should never wrap their 2-3 word label. */
.pk-pill-btn .elementor-button,
.elementor-widget-button .elementor-button {
  white-space: nowrap;
}

/* --- Franchise hero: no tablet override existed for the 12-col
   grid, so it rendered the desktop column-span at tablet width and
   collided. Stack single-column through the tablet range like
   mobile already does. --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-fr0013 {
    grid-template-columns: 1fr !important;
  }
}

/* --- Contact hero: decorative photo + spinning badge are hidden
   on mobile already; extend through tablet where they collided
   with the heading (heading is centered and reads cleanly alone). --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-lwc0000d9,
  .elementor-element-lwc0000di {
    display: none !important;
  }
}

/* --- About hero: spinning "EST. BENGALURU" badge overlaps the
   heading at mobile widths only (fine at tablet+). --- */
@media (max-width: 767px) {
  .elementor-element-lwc00004w {
    display: none !important;
  }
}

/* --- Home hero (mobile): bottom-anchored subtext/pills/CTA block
   needs more headroom than the hero's mobile min-height allowed,
   clipping its top line against the video frame. --- */
@media (max-width: 767px) {
  .elementor-element-lwc0000np {
    min-height: 560px;
  }
}