/* ==================================================
   RESPONSIVE OVERRIDES

   Contains:
   - Tablet layout
   - Sticky mobile header and navigation
   - Small-screen adjustments
   - Daily Scripture scaling
   - Touch-device behavior
   - Reduced-motion preferences
   ================================================== */


/* ==================================================
   1. DAILY SCRIPTURE SCALING
   ================================================== */

@media (max-width: 1100px) {
  .daily-scripture {
    max-width: 460px;
  }

  .scripture-content {
    font-size: 0.78rem;
  }

  .scripture-text {
    font-size: 0.84rem;
  }

  .scripture-reference {
    font-size: 0.75rem;
  }

  .scripture-translation {
    font-size: 0.61rem;
  }

  .scripture-copyright {
    font-size: 0.52rem;
  }
}


/* ==================================================
   2. TABLET AND MOBILE
   ================================================== */

@media (max-width: 980px) {

  /* ---------- Sticky mobile header ---------- */

  .site-header {
    position: sticky;
    top: 0;
    z-index: 1200;

    background: rgba(251, 247, 239, 0.97);
    border-bottom: 1px solid var(--border);

    box-shadow: 0 4px 14px rgba(51, 47, 45, 0.08);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /*
     Disable the desktop condensed-header positioning
     on tablet and mobile.
  */

  .site-header.is-condensed {
    padding-bottom: 0;
  }

  .site-header.is-condensed .header-actions {
    position: absolute;
    top: 30px;
  }


  /* ---------- Mobile header layout ---------- */

  .header-main {
    position: relative;

    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    column-gap: 16px;

    min-height: 100px;
  }

  .mobile-menu-button {
    position: relative;
    z-index: 40;

    display: inline-grid;
    grid-column: 1;
    justify-self: start;
    place-items: center;

    pointer-events: auto;
  }

  .header-main .brand {
    position: relative;
    z-index: 10;

    grid-column: 2;
    justify-self: center;
  }

  .header-main .daily-scripture {
    display: none;
  }


  /* ---------- Mobile header actions ---------- */

  /*
     The same Search, Account, and Cart group remains in
     the DOM. On mobile, only Cart remains visible.

     The wrapper itself cannot receive pointer events,
     which prevents it from covering the hamburger.
  */

  .header-actions {
    position: absolute;
    top: 30px;
    left: 50%;
    z-index: 20;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    pointer-events: none;

    transform: translateX(-50%);
  }

  .header-icons {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    width: 100%;
    gap: 0;

    pointer-events: none;
  }

  .header-icons .search-button,
  .header-icons .account-button {
    display: none;
  }

  .header-icons .cart-button {
    display: inline-grid;

    pointer-events: auto;
  }

  .header-icons .icon-button {
    width: 38px;
    height: 38px;
  }

  .header-icons .icon-button svg {
    width: 20px;
    height: 20px;
  }


  /* ---------- Desktop navigation ---------- */

  .desktop-navigation {
    display: none;
  }


  /* ---------- Expandable mobile navigation ---------- */

  .mobile-navigation {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 1000;

    display: grid;

    padding: 0 20px;

    border-top: 1px solid var(--border);

    background: var(--cream);

    box-shadow: 0 20px 35px rgba(51, 47, 45, 0.1);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: scaleY(0);
    transform-origin: top;

    transition:
      opacity 180ms ease,
      visibility 180ms ease,
      transform 180ms ease;
  }

  .mobile-navigation.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: scaleY(1);
  }

  .mobile-navigation a {
    padding: 15px 0;

    border-bottom: 1px solid var(--border);

    font-weight: 700;
  }


  /* ---------- Hero ---------- */

  .hero-grid,
  .story-grid,
  .tutorial-grid,
  .newsletter-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 760px;
  }

  .hero-visual {
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
  }


  /* ---------- Trust ---------- */

  .trust-grid {
    grid-template-columns: 1fr;
  }

  .trust-grid article + article {
    border-top: 1px solid rgba(255, 255, 255, 0.17);
    border-left: 0;
  }


  /* ---------- Products ---------- */

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 45px;
  }


  /* ---------- Story ---------- */

  .story-media {
    max-width: 650px;
  }

  .play-button {
    right: 20px;
  }


  /* ---------- Testimonials ---------- */

  .testimonial-grid {
    grid-template-columns: 1fr;
  }


  /* ---------- Social ---------- */

  .social-grid {
    grid-template-columns: repeat(3, 1fr);
  }


  /* ---------- Footer ---------- */

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .footer-grid > div:last-child {
    grid-column: 2 / 4;
  }
}


/* ==================================================
   3. SMALL TABLET AND MOBILE
   ================================================== */

@media (max-width: 700px) {

  /* ---------- Global ---------- */

  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  .section {
    padding: 74px 0;
  }


  /* ---------- Announcement ---------- */

  .announcement-bar p {
    font-size: 0.68rem;
  }


  /* ---------- Mobile header ---------- */

  .header-main {
    grid-template-columns: 44px 1fr 44px;
    column-gap: 12px;

    min-height: 88px;
  }

  .header-actions,
  .site-header.is-condensed .header-actions {
    top: 24px;
  }

  .brand-logo {
    width: 150px;
  }

  .brand-tagline {
    display: none;
  }

  .brand-name {
    font-size: 1.2rem;
  }

  .header-icons .icon-button {
    width: 40px;
    height: 40px;
  }


  /* ---------- Back to top ---------- */

  .back-to-top {
    right: 16px;
    bottom: 16px;

    width: 46px;
    height: 46px;
  }


  /* ---------- Collections ---------- */

  .collection-slider,
  .collection-card-large .collection-slider {
    min-height: 310px;
  }

  .collection-arrow {
    opacity: 1;

    transform:
      translateY(-50%)
      scale(1);
  }

  .collection-card:hover {
    transform: translateY(-4px);
  }
}


/* ==================================================
   4. NARROW MOBILE
   ================================================== */

@media (max-width: 430px) {

  /* ---------- Header ---------- */

  .header-main {
    grid-template-columns: 42px 1fr 42px;
    column-gap: 8px;
  }

  .brand-logo {
    width: 132px;
  }

  .header-icons .icon-button {
    width: 38px;
    height: 38px;
  }


  /* ---------- Products ---------- */

  .product-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .product-image {
    aspect-ratio: 5 / 6;
  }


  /* ---------- Social ---------- */

  .social-grid {
    gap: 8px;
  }


  /* ---------- Footer ---------- */

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand,
  .footer-grid > div:last-child {
    grid-column: auto;
  }
}


/* ==================================================
   5. TOUCH DEVICES
   ================================================== */

@media (hover: none) {

  /* Tooltips are unnecessary on touch devices. */

  .header-icons .icon-button::after {
    display: none;
  }


  /* ---------- Products ---------- */

  #best-sellers .product-card-photo {
    transform:
      translate3d(0, 0, 30px)
      rotate(-1deg)
      scale(0.96);
  }

  #best-sellers .product-card-tilt:hover .product-card-photo,
  #best-sellers .product-card-tilt:hover .product-card-shape {
    transform: inherit;
  }
}


/* ==================================================
   6. REDUCED MOTION
   ================================================== */

@media (prefers-reduced-motion: reduce) {

  /* ---------- Header ---------- */

  .header-icons,
  .header-icons .icon-button,
  .header-icons .icon-button::before,
  .header-icons .icon-button::after,
  .sticky-brand,
  .desktop-navigation,
  .desktop-navigation-links,
  .mobile-navigation {
    transition: none;
  }


  /* ---------- Hero ---------- */

  .hero-image-small,
  .hero-accent-one,
  .hero-accent-two {
    animation: none;
  }

  .hero-image-main {
    transition: none;
  }


  /* ---------- Products ---------- */

  #best-sellers .product-card-tilt,
  #best-sellers .product-image-layered,
  #best-sellers .product-card-shape,
  #best-sellers .product-card-photo {
    transition: none;
    transform: none;
  }


  /* ---------- Collections ---------- */

  .collection-card,
  .collection-card::before,
  .collection-card::after,
  .collection-slider::before,
  .collection-slide,
  .collection-slide img,
  .collection-arrow,
  .collection-dot,
  .collection-link span {
    transition-duration: 0.01ms;
  }

  .collection-sparkle {
    display: none;
  }

  .collection-card:hover,
  .collection-card:focus-within {
    transform: none;
  }
}