/* Shared responsive layer for the public pages.
   Each page still owns its desktop <style> block; this file is linked AFTER it
   so these overrides win at equal specificity. Loaded via render_responsive_head()
   in app/functions.php. /links is excluded — it was already built mobile-first. */

html{-webkit-text-size-adjust:100%;}
body{overflow-x:hidden;}
img,video{max-width:100%;}

/* The hamburger and its full-screen menu ship in the markup on every page but
   only exist below the nav breakpoint; the page <style> blocks know nothing
   about them, so their desktop-off state has to live here, outside any query. */
.nav-menu-toggle,.site-menu-close{display:none;}
.site-menu{display:none;}

/* The wordmark is a link home. It must stay visually identical to the plain
   text it replaced, at every width, so drop the UA anchor styling. */
.brand{display:block;color:inherit;text-decoration:none;}

/* ---------- Nav ----------
   The brand is absolutely centered on desktop and starts overlapping the link
   row at about 1150px, so below that the links collapse into a hamburger that
   opens a full-screen menu, leaving one row: hamburger | brand | cart. */
@media (max-width: 1160px){
  nav{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    padding:16px 24px;gap:16px;
  }
  .nav-left{display:none;} /* superseded by the hamburger menu */

  .nav-menu-toggle{
    display:flex;flex-direction:column;justify-content:space-between;
    align-self:center;justify-self:start;
    /* content-box so the negative-margin padding below grows the tap target to
       ~40px without changing the 24x16 the bars actually draw in. */
    grid-column:1;grid-row:1;
    box-sizing:content-box;width:24px;height:16px;
    padding:10px 8px;margin:-10px -8px;
    background:none;border:none;cursor:pointer;
  }
  .nav-menu-toggle span{display:block;height:1px;width:100%;background:var(--paper);}

  .brand{
    grid-column:2;grid-row:1;
    position:static;left:auto;transform:none;justify-self:center;text-align:center;
  }
  .nav-right{grid-column:3;grid-row:1;justify-self:end;}

  /* The header sits ABOVE the overlay and morphs in place: the hamburger and
     cart fade out, the close fades in, and the one brand element slides from
     centre to the left edge. Two separate brands (one here, one in the menu)
     would just swap with nothing to tween. */
  nav{position:relative;z-index:96;}
  .brand{
    transition:transform .5s cubic-bezier(0.22,0.61,0.36,1);
    will-change:transform;
  }
  /* The hamburger/cart and the close occupy the same two spots, and the wordmark
     slides through the hamburger's. Crossfading made them overlap mid-flight, so
     the outgoing element goes immediately on tap and the incoming one waits for
     the space to clear. The delay is per-state, which makes it directional. */
  .nav-menu-toggle,.nav-right{
    opacity:1;transition:opacity .2s ease .3s;   /* fading back in on close */
  }
  .site-menu-close{
    display:block;
    transition:opacity .12s ease;                /* leaving immediately on close */
    grid-column:3;grid-row:1;justify-self:end;align-self:center;
    background:none;border:none;color:var(--paper);
    font-size:30px;line-height:1;cursor:pointer;padding:8px;margin:-8px;
    opacity:0;pointer-events:none;
  }

  /* --brand-shift is measured in nav.js: the exact distance from the brand's
     centred position to the nav's left padding edge, so it lands flush at any
     width without hard-coding a number. */
  body.menu-open .brand{transform:translateX(var(--brand-shift, 0px));}
  body.menu-open .nav-menu-toggle,
  body.menu-open .nav-right{
    opacity:0;pointer-events:none;
    transition:opacity .12s ease;                /* leaving immediately on tap */
  }
  body.menu-open .site-menu-close{
    opacity:1;pointer-events:auto;
    transition:opacity .2s ease .3s;             /* arriving once the cart is gone */
  }

  /* Full-screen menu, opening below the header the brand slides across. */
  .site-menu{
    position:fixed;top:var(--nav-h, 0px);left:0;right:0;bottom:0;z-index:95;
    background:var(--bg);flex-direction:column;padding:0 24px 40px;overflow-y:auto;
  }
  .site-menu.open{display:flex;}
  .site-menu-list{display:flex;flex-direction:column;align-items:stretch;text-align:left;margin-top:40px;}
  .site-menu-list a{
    color:var(--dim);text-decoration:none;
    font-size:26px;letter-spacing:0.12em;text-transform:uppercase;
    padding:20px 0;border-bottom:1px solid var(--line);
  }
  .site-menu-list a:first-child{border-top:1px solid var(--line);}
  .site-menu-list a.active{color:var(--paper);}
}

/* ---------- Tablet and below ---------- */
@media (max-width: 900px){
  .page-header{padding:40px 24px 24px;}
  .flash{padding:14px 24px;}
  .breadcrumb{padding:20px 24px 0;}
  .shows-list{padding:10px 24px 50px;}
  .contact-wrap,.cart-wrap,.checkout-wrap,.confirmation-wrap{padding-left:24px;padding-right:24px;}
  .product-detail{padding:24px 24px 60px;gap:36px;}
  .empty{padding-left:24px;padding-right:24px;}
  footer{padding:22px 24px;}

  /* Two-up product grid before dropping to one column (page CSS goes
     straight from 3 to 1 at 720px, which wastes space on tablets). */
  .product-grid{grid-template-columns:repeat(2,1fr);}

  /* The home headline is unconstrained on desktop and runs to the edges well
     before phone width, so cap and wrap it from here down. */
  .block{padding:0 24px;}
  .block-label{max-width:100%;text-align:center;line-height:1.15;overflow-wrap:break-word;}
  .block-label{font-size:clamp(34px,7vw,68px);}
  .block-label.preview{font-size:clamp(22px,4.6vw,44px);}
}

/* ---------- Product detail ----------
   800px is where the page's own CSS drops the two columns and the copy starts
   sitting on top of the buy controls. Once stacked, a long description (plus a
   track listing) pushes Size/Format, Quantity and Add to cart well below the
   fold, so lift the buy controls above the description. */
@media (max-width: 800px){
  .detail-info{display:flex;flex-direction:column;}
  .detail-name{order:1;}
  .detail-price{order:2;}
  .detail-form,.sold-out-label{order:3;}
  .detail-description{order:4;margin-top:30px;margin-bottom:0;}
}

/* ---------- Phone ---------- */
@media (max-width: 620px){
  nav{padding:14px 16px;gap:12px;}
  /* Stack the wordmark onto two lines and size it up; the hamburger stretches to
     the row height so its top and bottom bars line up with the text block. */
  .brand{font-size:30px;line-height:0.98;}
  .brand .brand-line{display:block;}
  .site-menu-list a{font-size:23px;}

  /* Home. Desktop grades the photos down hard (grayscale .55 / brightness .4)
     because hover restores them — there is no hover on touch, so on mobile the
     stills are all you get. Keep the treatment but let the colour through, and
     lighten the scanlines and vignette to match. */
  .block-media{filter:grayscale(0.18) contrast(1.06) brightness(0.62);}
  .block .scanlines{opacity:0.22;}
  .block .vignette{box-shadow:inset 0 0 120px 30px rgba(0,0,0,0.55);background:radial-gradient(ellipse at center, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.38) 100%);}

  .block{height:auto;min-height:46vh;padding:0 20px;}
  .block-label{font-size:clamp(28px,9vw,68px);}
  .block-label.preview{font-size:clamp(19px,6vw,44px);}
  .eyebrow{top:16px;left:16px;}

  .subscribe{padding:48px 20px 44px;}
  .subscribe h2{font-size:24px;}
  .subscribe-form{flex-direction:column;align-items:center;gap:12px;}
  .subscribe-form input{width:100%;max-width:340px;font-size:16px;}
  .subscribe-form button{width:100%;max-width:340px;padding:15px 26px;}

  /* The footer is a three-item row on desktop (copyright, socials, email). At this width
     they crush into each other, so stack and centre instead. */
  footer{flex-direction:column;gap:14px;text-align:center;padding:24px 20px;}
  .social-row{gap:22px;}
  .social-icon svg{width:20px;height:20px;}

  /* Shared chrome */
  .page-header{padding:32px 20px 20px;}
  .page-header h1{font-size:clamp(22px,6.5vw,32px);}
  .flash{padding:12px 20px;}
  .breadcrumb{padding:18px 20px 0;}
  .shows-list{padding:6px 20px 44px;}
  .contact-wrap,.cart-wrap,.checkout-wrap,.confirmation-wrap{padding-left:20px;padding-right:20px;}
  .empty{padding-left:20px;padding-right:20px;}
  footer{padding:20px;flex-direction:column;align-items:center;gap:8px;text-align:center;}

  /* Store: drop the product overlay entirely on mobile — full colour, no
     scanlines. The sold-out grade stays, since that conveys state, not style. */
  .product-image{filter:none;transform:none;}
  .product-scanlines{display:none;}
  .product.sold-out .product-image{filter:grayscale(0.9) brightness(0.5);}

  .product-grid{grid-template-columns:1fr;}
  .product-name{padding:14px 4px 28px;}

  /* Product detail */
  .product-detail{grid-template-columns:1fr;gap:26px;padding:20px 20px 56px;}
  .detail-thumb{width:56px;height:56px;}
  .add-to-cart-btn{width:100%;padding:16px 30px;}

  /* Shows */
  .show-row{flex-direction:column;align-items:flex-start;gap:10px;padding:20px 0;}
  .show-info{font-size:13px;line-height:1.6;}
  .show-action{white-space:normal;}

  /* Cart page: five columns will not fit — reflow into a 3x2 block. */
  .cart-row{
    grid-template-columns:56px minmax(0,1fr) auto;
    column-gap:14px;row-gap:12px;align-items:start;padding:18px 0;
  }
  .cart-thumb,.cart-thumb-bg{grid-column:1;grid-row:1;width:56px;height:56px;}
  .cart-item-info{grid-column:2;grid-row:1;}
  .cart-row-total{grid-column:3;grid-row:1;min-width:0;}
  .cart-qty-form{grid-column:2;grid-row:2;}
  .cart-remove-form{grid-column:3;grid-row:2;justify-self:end;}

  .cart-summary{flex-direction:column;align-items:stretch;gap:16px;padding-top:24px;}
  .cart-subtotal{text-align:right;}
  .cart-summary .checkout-btn{text-align:center;padding:16px 28px;}

  /* Checkout / confirmation */
  .checkout-wrap{padding-top:28px;}
  .checkout-form button,.checkout-btn{width:100%;text-align:center;}
  .receipt{padding:18px;}
  .receipt-row,.checkout-row{gap:14px;}

  /* 16px keeps iOS Safari from zooming the page on focus. */
  .contact-form input,.contact-form textarea,
  .checkout-form input,.checkout-form select,
  .detail-form select,.detail-form input[type=number],
  .cart-qty-form input{font-size:16px;}
  .detail-form select,.detail-form input[type=number]{max-width:100%;}

  /* Touch targets */
  /* The cart link is 11px text — expand the tap area with a pseudo-element so the
     hit box reaches ~44px without moving it. */
  .nav-right a{position:relative;}
  .nav-right a::after{content:"";position:absolute;left:-8px;right:-8px;top:-14px;bottom:-14px;}
  .cart-sidebar-remove{top:8px;right:-6px;padding:8px;font-size:16px;}
  .contact-form button,.checkout-form button{width:100%;padding:16px 30px;}
  .cart-qty-form button,.cart-remove-form button{padding:10px 12px;}
  .qty-btn{width:30px;height:30px;font-size:14px;}
  .cart-sidebar-close{font-size:26px;padding:4px 8px;margin:-4px -8px;}
}

@media (max-width: 400px){
  .brand{font-size:26px;}
  .nav-right{font-size:10px;}
  .site-menu-list a{font-size:20px;}
  .cart-row{grid-template-columns:44px minmax(0,1fr) auto;column-gap:10px;}
  .cart-thumb,.cart-thumb-bg{width:44px;height:44px;}
}

/* Honour a reduced-motion preference: the menu still opens, it just snaps. */
@media (prefers-reduced-motion: reduce){
  .brand,.nav-menu-toggle,.nav-right,.site-menu-close{transition:none;}
}