/* ==========================================================================
   RESPONSIVE.CSS — Mobile-First Responsive Rules
   ==========================================================================
   Breakpoints:
   - Base: 0–767px (mobile)
   - md: 768px+ (tablet)
   - lg: 1024px+ (desktop)
   - xl: 1280px+ (large desktop)
   ========================================================================== */

/* ==========================================================================
   MOBILE BASE (0–767px)
   ========================================================================== */

/* Typography scaling for mobile */
.text-display-xl {
  font-size: var(--text-headline-lg-mobile);
  line-height: var(--text-headline-lg-mobile-lh);
  letter-spacing: var(--text-headline-lg-mobile-ls);
  font-weight: var(--text-headline-lg-mobile-fw);
}

.text-display-lg {
  font-size: var(--text-headline-lg-mobile);
  line-height: var(--text-headline-lg-mobile-lh);
  letter-spacing: var(--text-headline-lg-mobile-ls);
  font-weight: var(--text-headline-lg-mobile-fw);
}

.text-headline-lg {
  font-size: var(--text-headline-lg-mobile);
  line-height: var(--text-headline-lg-mobile-lh);
}

/* Section padding reduction */
.section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Stack buttons on mobile */
.hero__actions {
  flex-direction: column;
  width: 100%;
}

.hero__actions .btn {
  width: 100%;
}

/* ==========================================================================
   TABLET (768px+)
   ========================================================================== */

@media (min-width: 768px) {

  /* Restore full typography */
  .text-display-xl {
    font-size: var(--text-display-xl);
    line-height: var(--text-display-xl-lh);
    letter-spacing: var(--text-display-xl-ls);
    font-weight: var(--text-display-xl-fw);
  }

  .text-display-lg {
    font-size: var(--text-display-lg);
    line-height: var(--text-display-lg-lh);
    letter-spacing: var(--text-display-lg-ls);
    font-weight: var(--text-display-lg-fw);
  }

  .text-headline-lg {
    font-size: var(--text-headline-lg);
    line-height: var(--text-headline-lg-lh);
  }

  /* Restore section padding */
  .section {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
  }

  /* Hero actions row */
  .hero__actions {
    flex-direction: row;
    width: auto;
  }

  .hero__actions .btn {
    width: auto;
  }

  /* Grid column resets for tablet */
  .md-col-span-2  { grid-column: span 2; }
  .md-col-span-4  { grid-column: span 4; }
  .md-col-span-8  { grid-column: span 8; }
  .md-col-span-12 { grid-column: span 12; }

  /* Text alignment */
  .md-text-left  { text-align: left; }
  .md-text-right { text-align: right; }

  /* Flex direction */
  .md-flex-row { flex-direction: row; }
}

/* ==========================================================================
   DESKTOP (1024px+)
   ========================================================================== */

@media (min-width: 1024px) {

  /* Grid column resets for desktop */
  .lg-col-span-4  { grid-column: span 4; }
  .lg-col-span-8  { grid-column: span 8; }
}

/* ==========================================================================
   LARGE DESKTOP (1280px+)
   ========================================================================== */

@media (min-width: 1280px) {
  /* Container already maxes at 1280px */
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  .top-nav,
  .whatsapp-fab,
  .mobile-bottom-nav,
  .glow-blob,
  .ambient-glow,
  .mobile-menu {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .glass-card {
    background: white;
    border: 1px solid #ccc;
    backdrop-filter: none;
    box-shadow: none;
  }

  .section {
    padding-top: 2rem;
    padding-bottom: 2rem;
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   RESPONSIVE TABLES (cart / checkout)
   ========================================================================== */
/* Both the theme's own .cart-table (page-cart.php) and WooCommerce's native
   table.shop_table (cart/checkout pages once WooCommerce content is present)
   naturally overflow horizontally on narrow screens, since a 4+ column table
   simply can't shrink below its content's minimum width. Below 767px both
   are restructured into a stacked, card-style layout instead: the header row
   is hidden, each row becomes its own block, and each cell becomes its own
   row within that block — with the original column label re-attached via a
   ::before pseudo-element reading the cell's data-title attribute, so
   context (Price / Quantity / Subtotal, etc.) isn't lost just because the
   header is gone. */
@media (max-width: 767px) {
  .cart-table,
  .woocommerce table.shop_table {
    border: 0;
  }

  .cart-table thead,
  .woocommerce table.shop_table thead {
    display: none;
  }

  .cart-table tr,
  .woocommerce table.shop_table tbody tr,
  .woocommerce table.shop_table tr.cart_item,
  .woocommerce table.shop_table tr.woocommerce-cart-form__cart-item {
    display: block;
    width: 100%;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    background: var(--surface-container-lowest);
  }

  .cart-table td,
  .woocommerce table.shop_table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    text-align: right;
    padding: 0.5rem 0;
    border: 0;
    border-bottom: 1px solid var(--outline-variant);
  }

  .cart-table td:last-child,
  .woocommerce table.shop_table td:last-child {
    border-bottom: 0;
  }

  /* Re-attach the column label that the hidden <thead> would have shown.
     WooCommerce already provides data-title on its cells (see core
     templates/cart/cart.php); our own .cart-table rows have it added via
     the JS that builds them in page-cart.php. Cells with no meaningful
     label (e.g. the remove-item action column) use data-title="" so
     nothing renders, rather than showing a literal "undefined". */
  .cart-table td[data-title]:not([data-title=""])::before,
  .woocommerce table.shop_table td[data-title]:not([data-title=""])::before {
    content: attr(data-title) ": ";
    font-weight: var(--text-label-bold-fw);
    color: var(--on-surface-variant);
    margin-right: 1rem;
    flex-shrink: 0;
  }

  /* The product cell (image + title) reads better left-aligned and
     stacked above its own label than squeezed onto one line. */
  .cart-table td:first-child,
  .woocommerce table.shop_table td.product-name {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .woocommerce table.shop_table td.product-name::before {
    margin-bottom: 0.5rem;
  }

  .woocommerce table.shop_table td.product-thumbnail {
    display: none;
  }
}