/* ============================================================
   Qazzaz Coffee – Modern enhancements (transitions, hover, micro-interactions)
   ============================================================ */

/* ── Global link transition ─────────────────────────────────── */
a {
  transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

/* ── Header nav link underline transition ────────────────────── */
.site-nav a::after {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Buttons: smooth transform and shadow ────────────────────── */
.btn {
  transition:
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

/* ── Hero CTA buttons ────────────────────────────────────────── */
.hero-dark-cta .btn {
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    opacity 0.25s ease;
}

.hero-dark-cta .btn:hover {
  transform: translateY(-3px);
}

/* ── Feature cards: lift, shadow, border glow ────────────────── */
.feature-card {
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 12px 32px rgba(30, 14, 5, 0.12),
    0 0 0 1px rgba(184, 151, 93, 0.15);
  border-color: rgba(184, 151, 93, 0.35);
}

.feature-card:focus-within {
  box-shadow:
    0 8px 24px rgba(30, 14, 5, 0.1),
    0 0 0 2px var(--caramel-400);
}

/* ── About split visual card ─────────────────────────────────── */
.about-visual-card {
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

.about-visual-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(212, 184, 122, 0.2);
}

/* ── Home traditions panels (focus ring) ─────────────────────── */
.tradition-panel:focus-within {
  outline: 2px solid var(--caramel-400);
  outline-offset: 3px;
}

/* About page drink showcase cards */
.drink-showcase-card:focus-within {
  outline: 2px solid var(--caramel-400);
  outline-offset: 3px;
}

/* ── Info cards (hours, location) ────────────────────────────── */
.info-card {
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    border-color 0.2s ease;
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(30, 14, 5, 0.08);
  border-color: var(--caramel-200);
}

/* ── Hours table row hover ───────────────────────────────────── */
.hours-table tbody tr {
  transition: background-color 0.2s ease;
}

.hours-table tbody tr:hover {
  background-color: rgba(184, 151, 93, 0.06);
}

/* ── CTA strip buttons ───────────────────────────────────────── */
.cta-strip .btn {
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s ease,
    opacity 0.2s ease;
}

.cta-strip .btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

/* ── Form inputs: focus transition ────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

/* ── Menu category tabs ───────────────────────────────────────── */
.menu-cat-tab {
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.menu-cat-tab:hover {
  transform: translateY(-1px);
}

.menu-cat-tab.active {
  transform: translateY(-1px);
}

/* ── Menu item cards ──────────────────────────────────────────── */
.menu-item {
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.menu-item:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 24px rgba(30, 14, 5, 0.08),
    0 0 0 1px rgba(184, 151, 93, 0.2);
}

.menu-item .add-btn {
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.menu-item .add-btn:hover {
  transform: scale(1.03);
}

/* ── Cart panel ──────────────────────────────────────────────── */
.cart-panel {
  transition: box-shadow 0.3s ease, border-color 0.2s ease;
}

.cart-panel:hover {
  box-shadow: 0 8px 32px rgba(30, 14, 5, 0.08);
}

.cart-items li {
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.cart-items li:hover {
  background-color: rgba(184, 151, 93, 0.05);
}

/* ── Footer links ────────────────────────────────────────────── */
.footer-nav a {
  transition: color 0.2s ease, opacity 0.2s ease;
}

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

.footer-social-link {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-social-link:hover {
  transform: scale(1.12);
  opacity: 0.9;
}

/* ── Logo hover ──────────────────────────────────────────────── */
.logo {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.logo:hover {
  transform: scale(1.02);
}

/* ── Section spacing: responsive scale ───────────────────────── */
@media (min-width: 900px) {
  .features-section,
  .about-split-section,
  .hours-location-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .cta-strip {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* ── Video frame hover ───────────────────────────────────────── */
.home-video-frame {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.home-video-frame:hover {
  box-shadow:
    var(--shadow-xl),
    0 0 0 1px rgba(201, 169, 98, 0.35),
    0 12px 40px rgba(30, 14, 5, 0.15);
}

/* ── Drinks ticker: smooth pause on hover ──────────────────────── */
.drinks-ticker-wrap:hover .drinks-ticker {
  animation-play-state: paused;
}

.drink-pill {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.drinks-ticker-wrap:hover .drink-pill:hover {
  transform: scale(1.05);
  opacity: 1;
}

/* ── Founder photo wrap ───────────────────────────────────────── */
.founder-photo-wrap {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.founder-photo-wrap:hover {
  transform: translateY(-4px);
  box-shadow:
    0 20px 48px rgba(30, 14, 5, 0.18),
    0 0 0 1px rgba(184, 151, 93, 0.15);
}

/* ── Contact form group focus ─────────────────────────────────── */
.contact-form .form-group:focus-within label {
  color: var(--brand-700);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--caramel-600);
  box-shadow: 0 0 0 3px rgba(184, 151, 93, 0.2);
}

/* ── Retail product cards ─────────────────────────────────────── */
.retail-product-card {
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    border-color 0.2s ease;
}

.retail-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(30, 14, 5, 0.1);
  border-color: var(--caramel-200);
}

/* ── Mobile cart button ──────────────────────────────────────── */
.mobile-cart-btn {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.mobile-cart-btn:active {
  transform: scale(0.96);
}

/* ── Nav toggle (hamburger) ────────────────────────────────────── */
.nav-toggle {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-toggle:hover {
  opacity: 0.85;
}

.nav-toggle[aria-expanded="true"] {
  transform: rotate(90deg);
}

/* ── Scroll hint bounce ───────────────────────────────────────── */
.hero-scroll-hint {
  transition: opacity 0.3s ease;
}

/* ── Reduce motion: disable transform transitions ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .feature-card:hover,
  .about-visual-card:hover,
  .info-card:hover,
  .menu-item:hover,
  .founder-photo-wrap:hover,
  .retail-product-card:hover {
    transform: none;
  }

  .hero-dark-cta .btn:hover,
  .cta-strip .btn:hover:not(:disabled),
  .menu-cat-tab:hover,
  .menu-cat-tab.active,
  .menu-item .add-btn:hover,
  .logo:hover {
    transform: none;
  }

  .footer-social-link:hover {
    transform: none;
  }
}