/* ============================================================
   DAISUKI Restaurant — Responsive Stylesheet
   Desktop-first approach: max-width breakpoints
   ============================================================ */

/* ------------------------------------------------------------
   Large Screens (min-width: 1440px)
   Widen container, scale up hero & titles
   ------------------------------------------------------------ */
@media (min-width: 1440px) {
  .container {
    max-width: 1300px;
  }

  .hero h1 {
    font-size: 5rem;
  }

  .section-title {
    font-size: 3.2rem;
  }

  .hero-content {
    padding: 10rem 2rem 5rem;
  }
}

/* ------------------------------------------------------------
   Tablet (max-width: 1024px)
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* Header */
  .site-header {
    padding: 1.25rem 0;
  }

  .site-header.scrolled {
    padding: 0.85rem 0;
  }

  .header-inner {
    padding: 0 1.5rem;
  }

  .header-nav {
    gap: 1.75rem;
  }

  /* Hero */
  .hero h1 {
    font-size: 3.5rem;
  }

  .hero-text {
    font-size: 1.05rem;
  }

  /* Page Hero */
  .page-hero h1 {
    font-size: 2.8rem;
  }

  /* Section titles */
  .section-title {
    font-size: 2.2rem;
  }

  .section-eyebrow {
    font-size: 0.75rem;
  }

  /* Dishes grid: 2 columns */
  .dishes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* Gallery: 2 columns */
  .gallery-grid {
    columns: 2;
  }

  /* Editorial layout */
  .editorial {
    gap: 3rem;
  }

  /* Brand section */
  .brand-grid {
    gap: 3rem;
  }

  /* Location grid */
  .location-grid {
    gap: 2rem;
  }

  /* Footer: 2 columns */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  /* Legal content */
  .legal-content h1 {
    font-size: 2.2rem;
  }
}

/* ------------------------------------------------------------
   Mobile (max-width: 768px)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Body padding for mobile CTA bar */
  body {
    padding-bottom: 80px;
  }

  /* ---- Header ---- */
  .site-header {
    padding: 1rem 0;
  }

  .site-header.scrolled {
    padding: 0.75rem 0;
  }

  .header-inner {
    padding: 0 1.25rem;
  }

  /* Hide desktop nav, show hamburger */
  .header-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  /* ---- Mobile Menu ---- */
  .nav-overlay {
    display: flex;
  }

  .mobile-nav a {
    font-size: 1.5rem;
    padding: 0.75rem 1rem;
    /* Ensure touch target */
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ---- Container ---- */
  .container {
    padding: 0 1.25rem;
  }

  /* ---- Section spacing ---- */
  .section {
    padding: 4rem 0;
  }

  .section-title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  .section-text {
    font-size: 1rem;
  }

  .section-eyebrow {
    letter-spacing: 3px;
    font-size: 0.7rem;
  }

  /* ---- Hero ---- */
  .hero {
    min-height: 80vh;
  }

  .hero-content {
    padding: 5rem 1.25rem 3rem;
  }

  .hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }

  .hero-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 3px;
    margin-bottom: 1rem;
  }

  .hero-text {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-scroll {
    display: none;
  }

  /* ---- Page Hero ---- */
  .page-hero {
    min-height: 35vh;
    padding: 5rem 1.25rem 3rem;
  }

  .page-hero h1 {
    font-size: 2.2rem;
  }

  .page-hero-subtitle {
    font-size: 1rem;
  }

  /* ---- Intro Section ---- */
  .intro-section {
    padding: 4rem 0;
  }

  /* ---- Editorial Layout: stack ---- */
  .editorial {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .editorial--reverse {
    direction: ltr;
  }

  .editorial-text .section-title {
    text-align: center;
  }

  .editorial-text .section-text {
    text-align: center;
  }

  /* ---- Dishes Grid: 1 column ---- */
  .dishes-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    gap: 1.5rem;
  }

  .dishes-section {
    padding: 4rem 0;
  }

  /* ---- Brand Section: stack ---- */
  .brand-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

  .brand-text .section-title {
    text-align: center;
  }

  .brand-text .section-text {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .brand-image {
    aspect-ratio: 16 / 10;
    max-height: 350px;
  }

  /* ---- Gallery: 2 columns ---- */
  .gallery-grid {
    columns: 2;
    column-gap: 0.75rem;
    margin-top: 2rem;
  }

  .gallery-item {
    margin-bottom: 0.75rem;
  }

  .gallery-section {
    padding: 4rem 0;
  }

  /* ---- Delivery Section ---- */
  .delivery-section {
    padding: 4rem 0;
  }

  .delivery-badges {
    gap: 1rem;
  }

  .delivery-badge {
    padding: 0.85rem 1.25rem;
    font-size: 0.85rem;
  }

  /* ---- Hours Section ---- */
  .hours-section {
    padding: 4rem 0;
  }

  .hours-grid {
    grid-template-columns: 1fr;
    max-width: 350px;
    margin-top: 2rem;
  }

  .hours-card {
    padding: 1.5rem;
  }

  /* ---- Location Section: stack ---- */
  .location-section {
    padding: 4rem 0;
  }

  .location-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2rem;
  }

  .location-map {
    aspect-ratio: 16 / 9;
  }

  /* ---- WhatsApp Section ---- */
  .whatsapp-section {
    padding: 3rem 0;
  }

  .whatsapp-btn {
    padding: 1rem 2rem;
    font-size: 0.9rem;
  }

  /* ---- Social Section ---- */
  .social-section {
    padding: 3rem 0;
  }

  /* ---- CTA Final ---- */
  .cta-final {
    padding: 4rem 0;
  }

  /* ---- Footer ---- */
  .site-footer {
    padding: 3rem 0 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }

  .footer-brand {
    align-items: center;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-col h4 {
    margin-bottom: 1rem;
  }

  .footer-bottom {
    margin-top: 2rem;
    padding: 1.25rem 0;
  }

  /* ---- Mobile CTA Bar: visible ---- */
  .mobile-cta-bar {
    display: flex;
  }

  /* ---- Buttons: adjust ---- */
  .btn {
    padding: 0.875rem 2rem;
    font-size: 0.8rem;
  }

  /* ---- Lightbox ---- */
  .lightbox-close {
    top: 1rem;
    right: 1rem;
  }

  .lightbox-prev {
    left: 0.75rem;
  }

  .lightbox-next {
    right: 0.75rem;
  }

  .lightbox-nav {
    width: 40px;
    height: 40px;
  }

  /* ---- Legal Content ---- */
  .legal-content {
    padding: 4rem 0;
  }

  .legal-content h1 {
    font-size: 2rem;
  }

  .legal-content h2 {
    font-size: 1.3rem;
    margin-top: 2rem;
  }

  /* ---- Error Page ---- */
  .error-content {
    padding: 5rem 0;
  }

  .error-code {
    font-size: 5rem;
  }

  .error-content h2 {
    font-size: 1.5rem;
  }
}

/* ------------------------------------------------------------
   Small Mobile (max-width: 480px)
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  /* Hero */
  .hero {
    min-height: 75vh;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero-text {
    font-size: 0.95rem;
  }

  .hero-eyebrow {
    font-size: 0.65rem;
    letter-spacing: 2.5px;
  }

  /* Page Hero */
  .page-hero {
    min-height: 30vh;
    padding: 4.5rem 1rem 2.5rem;
  }

  .page-hero h1 {
    font-size: 1.8rem;
  }

  .page-hero-subtitle {
    font-size: 0.95rem;
  }

  /* Section titles */
  .section-title {
    font-size: 1.5rem;
  }

  .section-text {
    font-size: 0.95rem;
  }

  /* Buttons */
  .btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
  }

  .btn-order {
    padding: 0.5rem 1.25rem;
    font-size: 0.7rem;
  }

  /* Dishes */
  .dish-card-body {
    padding: 1.25rem;
  }

  .dish-card-name {
    font-size: 1.15rem;
  }

  /* Gallery: 1 column */
  .gallery-grid {
    columns: 1;
  }

  /* Hours */
  .hours-card {
    padding: 1.25rem;
  }

  .hours-time {
    font-size: 1.15rem;
  }

  /* Delivery badges */
  .delivery-badges {
    flex-direction: column;
    align-items: center;
  }

  .delivery-badge {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  /* Footer */
  .footer-logo {
    font-size: 1.2rem;
  }

  /* Legal */
  .legal-content h1 {
    font-size: 1.8rem;
  }

  .legal-content p {
    font-size: 0.95rem;
  }

  /* Error */
  .error-code {
    font-size: 4rem;
  }

  .error-content p {
    font-size: 1rem;
  }

  /* WhatsApp */
  .whatsapp-btn {
    padding: 0.875rem 1.75rem;
    font-size: 0.85rem;
  }

  /* CTA Final */
  .cta-final {
    padding: 3rem 0;
  }
}

/* ------------------------------------------------------------
   Touch Target Enforcement (all mobile breakpoints)
   Ensure interactive elements are at least 44x44px
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .header-nav a,
  .mobile-nav a,
  .footer-col ul li a,
  .footer-social a,
  .social-link,
  .gallery-item,
  .lightbox-close,
  .lightbox-nav,
  .menu-toggle {
    min-height: 44px;
    min-width: 44px;
  }

  /* Ensure buttons are tappable */
  .btn,
  .btn-order,
  .whatsapp-btn {
    min-height: 44px;
  }

  /* Footer links need padding for touch */
  .footer-col ul li a {
    display: inline-block;
    padding: 0.25rem 0;
  }
}

/* ------------------------------------------------------------
   Orientation: Landscape on small devices
   ------------------------------------------------------------ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: 4rem 0;
  }

  .hero-content {
    padding: 4rem 2rem 2rem;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .page-hero {
    min-height: auto;
    padding: 4rem 1.25rem 2rem;
  }

  .hero-scroll {
    display: none;
  }
}

/* ============================================================
   END OF RESPONSIVE STYLESHEET
   ============================================================ */