/*
 * Global responsive fixes for Sweet BakeArt website
 *
 * Optimized for:
 * - Small Android phones (~360px wide)
 * - iPhone 11 Pro / X / XS (375px wide)
 * - iPhone 12 / 12 Pro / 13 / 14 (390px wide)
 * - Tablets and small laptops
 */

html,
body {
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Make media fluid */
img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent common overflow issues */
section,
div,
main,
header,
footer {
  max-width: 100%;
}

/* Reduce text overflow risks */
h1,
h2,
h3,
p,
a,
span,
li {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Support equal row heights in feature grids */
.feature-grid {
  grid-auto-rows: 1fr;
}

/* Ensure feature cards align buttons properly */
.feature-card {
  display: flex;
  flex-direction: column;
}

.feature-card .btn {
  margin-top: auto !important;
  align-self: flex-start !important;
}

/* =========================================
   TABLET / SMALL LAPTOP
   ========================================= */
@media (max-width: 1024px) {
  .contact-content {
    gap: 1.5rem !important;
  }

  .footer-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 220px !important;
  }
}

/* =========================================
   MOBILE / TABLET NAVBAR
   ========================================= */
@media (max-width: 860px) {
  header.navbar,
  header.navbar.scrolled {
    top: 20px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding-top: 0 !important;
  }

  .navbar .nav-container {
    position: relative !important;
    display: block !important;
    min-height: 140px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .navbar .nav-right {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    z-index: 1 !important;
  }

  .navbar .logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .navbar .nav-links {
    display: none !important;
  }

  .navbar .menu-toggle {
    display: inline-flex !important;
  }

  .mobile-drawer {
    display: block !important;
  }

  .navbar .cart-icon,
  .navbar .menu-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    aspect-ratio: 1 / 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 40px !important;
  }

  .navbar .logo img {
    width: 96px !important;
    height: 96px !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block !important;
  }

  .hero {
    padding-top: 8rem !important;
    min-height: 82vh !important;
    height: auto !important;
  }

  /* Contact page order */
  .contact-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    margin-bottom: 1.25rem !important;
    align-items: stretch !important;
  }

  .contact-form-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    order: 1 !important;
  }

  .contact-info {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    order: 2 !important;
    margin-top: 0.25rem !important;
  }

  .map-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    order: 3 !important;
  }

  .founder-block,
  .founder-block.reverse {
    grid-template-columns: 1fr !important;
  }

  .founder-block.reverse .founder-image,
  .founder-block.reverse .founder-info {
    order: 0 !important;
  }

  .about-features {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================
   CONTACT PAGE FINAL STRONG FIX
   ========================================= */
@media (max-width: 768px) {
  .contact-content {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    align-items: stretch !important;
  }

  .contact-content > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .contact-form-container {
    order: 1 !important;
  }

  .contact-info {
    order: 2 !important;
    margin-top: 0 !important;
  }

  .map-card {
    order: 3 !important;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 200px !important;
  }
}

/* =========================================
   GENERAL MOBILE
   ========================================= */
@media (max-width: 600px) {
  .container,
  .wrap,
  .page,
  main {
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Stack common button groups */
  .btn-row,
  .actions,
  .product-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  .btn-row .btn,
  .actions .btn,
  .product-actions .btn {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Contact page blocks */
  .contact-form-container,
  .contact-info,
  .map-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.25rem !important;
    border-radius: 16px !important;
  }

  .contact-form-container h2,
  .contact-info h2,
  .map-card h2 {
    font-size: 1.3rem !important;
    margin-bottom: 1rem !important;
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 0.95rem !important;
  }

  .btn-submit {
    width: 100% !important;
  }

  .map-wrap iframe {
    height: 260px !important;
  }

  /* Footer */
  .footer-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .navbar .nav-right {
    margin-left: auto !important;
  }

  /* Floating buttons */
  .float-actions {
    right: 14px !important;
    bottom: 14px !important;
    gap: 0.5rem !important;
  }

  .float-actions .fab {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  .hero {
    padding-top: 8rem !important;
    min-height: 72vh !important;
  }

  .founder-block,
  .founder-block.reverse {
    gap: 1.25rem !important;
    padding: 1.5rem !important;
  }

  .about-feature-item {
    padding: 1.5rem 1rem !important;
  }

  img,
  video,
  iframe,
  svg,
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* =========================================
   SMALL MOBILE DEVICES
   Covers Tecno Spark 10C and similar phones
   ========================================= */
@media (max-width: 400px) {
  .container,
  .wrap,
  .page,
  main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Stack common button groups */
  .btn-row,
  .actions,
  .product-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  /* Only grouped CTA buttons become full width */
  .btn-row .btn,
  .actions .btn,
  .product-actions .btn {
    width: 100% !important;
  }

  /* Contact page */
  .contact-form-container,
  .contact-info,
  .map-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem !important;
  }

  /* Footer */
  .footer-container {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  /* Floating buttons */
  .float-actions {
    right: 12px !important;
    bottom: 12px !important;
    gap: 0.5rem !important;
  }

  .float-actions .fab {
    width: 40px !important;
    height: 40px !important;
  }

  /* Hero spacing for very small phones */
  .hero {
    padding-top: 7.5rem !important;
  }

  .navbar .nav-container {
    min-height: 132px !important;
  }

  .navbar .logo img {
    width: 88px !important;
    height: 88px !important;
  }

  .navbar .nav-right {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .navbar .cart-icon,
  .navbar .menu-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex: 0 0 38px !important;
  }

  .gallery-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 240px !important;
  }

  .gallery-item.signature {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}

/* =========================================
   EXTRA TUNING FOR IPHONE 11 PRO / 375px
   ========================================= */
@media (max-width: 390px) {
  .navbar .nav-container {
    min-height: 134px !important;
  }

  .navbar .logo img {
    width: 90px !important;
    height: 90px !important;
  }

  .navbar .nav-right {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero {
    padding-top: 7.8rem !important;
    min-height: 68vh !important;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 0.8rem 0.9rem !important;
  }

  .map-wrap iframe {
    height: 220px !important;
  }

  .hours-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.15rem !important;
  }
}

/* =========================================
   VERY SMALL DEVICES
   ========================================= */
@media (max-width: 360px) {
  .navbar .nav-container {
    min-height: 126px !important;
  }

  .navbar .logo img {
    width: 82px !important;
    height: 82px !important;
  }

  .hero {
    padding-top: 7.2rem !important;
    min-height: 66vh !important;
  }

  .container,
  .wrap,
  .page,
  main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* =========================================
   EXTRA SMALL DEVICES
   ========================================= */
@media (max-width: 340px) {
  header.navbar .logo img,
  .navbar .logo img {
    width: 76px !important;
    height: 76px !important;
  }

  .navbar .nav-container {
    min-height: 120px !important;
  }
}

/* =========================================
   SMALL ADMIN TABLE SAFETY
   ========================================= */
@media (max-width: 560px) {
  table,
  .table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
}