/*
 * The Mobius design language, on Storefront's markup.
 *
 * Ported from the festival site (liquidfes.com), which is where these decisions
 * were made and proven: a slim transparent bar instead of a logo slab, one
 * display face with wide-tracked uppercase eyebrows, hairline cards on
 * near-black, and a single gradient reserved for the one button that matters.
 *
 * The gradient is not a festival invention — it is the Mobius player's own
 * (--grad in the player chrome), so bringing it here makes the two sides of the
 * business look like one company rather than two.
 *
 * dark.css makes Storefront dark. This file gives it a point of view. Colour
 * still comes from the --ms-* tokens in functions.php; nothing is re-declared.
 */

:root {
  /* The player's gradient, unchanged. */
  --ms-grad: linear-gradient(115deg, #2fd4ff, #3b5bff 38%, #8a4cff 68%, #ff8a3c);

  --ms-font-display: "Space Grotesk", "Zen Kaku Gothic New", system-ui, sans-serif;
  --ms-font-body: "Inter", "Noto Sans JP", system-ui, -apple-system, sans-serif;

  --ms-nav-h: 72px;
  --ms-radius-card: 16px;
  --ms-radius-pill: 100px;
  --ms-measure: 68ch;          /* ~65 characters, where reading is easiest */
  --ms-gutter: clamp(1rem, 4vw, 2.5rem);
}

/* ------------------------------------------------------------------- type */

body,
button,
input,
select,
textarea {
  font-family: var(--ms-font-body);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.price,
.woocommerce-Price-amount {
  font-family: var(--ms-font-display);
  letter-spacing: .01em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); font-weight: 500; line-height: 1.15; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 500; line-height: 1.22; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 500; }

/* Body copy stops at a readable measure even on a wide screen. Excludes the
   layout containers, which must keep their full width. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.woocommerce-product-details__short-description {
  max-width: var(--ms-measure);
}

/*
 * The eyebrow. On the festival this labels every section — small, weight 300,
 * wide tracking — and it is most of why those pages read as considered rather
 * than merely dark. Applied to the places Storefront already has a label.
 */
.widget .widget-title,
.widget .widgettitle,
.woocommerce-MyAccount-navigation-link,
.product_meta,
.woocommerce-breadcrumb {
  font-family: var(--ms-font-display);
  font-size: .8rem;
  font-weight: 300;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ms-text-dim);
}

.woocommerce-breadcrumb { letter-spacing: .18em; }

/* The shop's page title is a heading, not a label. */
.woocommerce-products-header__title {
  font-family: var(--ms-font-display);
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--ms-heading);
  margin-bottom: .6rem;
}

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

/*
 * A 72px bar, not a logo slab.
 *
 * Storefront stacks a large logo above the navigation, which on this site came
 * to 263px — a third of a laptop screen gone before any content. The festival
 * puts everything on one slim row and gives the page back to the page.
 */
.site-header {
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--ms-line);
}

/* Storefront puts the branding in `.col-full` and the navigation in a SIBLING
   `.storefront-primary-navigation`, so the row has to be built on the header
   itself — flexing `.col-full` alone leaves the menu stranded underneath. */
.site-header {
  display: flex;
  /* NOT wrap. With wrapping allowed the browser puts the navigation on its own
     row the moment it does not fit, instead of shrinking it — which is how the
     header came to be 202px tall on a 1400px screen even after the logo was
     capped. Wrapping is re-enabled below the phone breakpoint, where two rows
     are the right answer. */
  flex-wrap: nowrap;
  align-items: center;
  column-gap: var(--ms-gutter);
  min-height: var(--ms-nav-h);
  padding-inline: var(--ms-gutter);
}

.site-header > .col-full {
  display: flex;
  align-items: center;
  gap: var(--ms-gutter);
  flex: 0 0 auto;      /* the brand takes what it needs and no more */
  width: auto;
  max-width: none;
  padding: .4rem 0;
  margin: 0;
  min-width: 0;
}

/*
 * The navigation must be allowed to SHRINK.
 *
 * Storefront gives it no width limit, so as a flex item it measured 2451px
 * inside a 1400px header, which forced a wrap and put the menu on its own row —
 * the other half of why the header was 295px tall rather than 72. `min-width:0`
 * is the part that actually does it: without it a flex item refuses to shrink
 * below its content's intrinsic width.
 */
.site-header > .storefront-primary-navigation {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  /* Push the navigation and cart to the right edge. Without this everything
     sits bunched against the brand and a 1400px header has 540px of nothing
     after it — the flex items only take their content width, and nothing was
     claiming the gap. */
  margin: 0 0 0 auto;
  padding: 0;
}

/*
 * The cart is one line, not a paragraph.
 *
 * Storefront stacks the amount above "0 items" and keeps the drop-down panel
 * in the flow, which made the cart 104px tall and set the height of the whole
 * bar. The panel still opens on hover; it just no longer decides how tall the
 * header is.
 */
.site-header .site-header-cart {
  display: flex;
  align-items: center;
  height: auto;
  margin: 0;
  padding: 0;
}

.site-header .site-header-cart > li {
  display: flex;
  align-items: center;
  position: relative;
}

.site-header .site-header-cart .cart-contents {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: auto;
  padding: .4rem .2rem;
  white-space: nowrap;
  font-family: var(--ms-font-display);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.site-header .site-header-cart .widget_shopping_cart {
  position: absolute;
  top: 100%;
  right: 0;
}

.site-header .site-search {
  flex: 0 0 auto;
  margin: 0;
}

/*
 * Do NOT set `display` on the menu list.
 *
 * Storefront keeps it `display: none` until its own breakpoint or the toggle
 * opens it. Forcing `display: flex` here made the collapsed menu render
 * expanded and vertical, which turned the header into a 467px column at
 * 1024px — worse than the problem it was meant to fix. Spacing only; the parent
 * theme decides visibility.
 */
.site-header .main-navigation ul.nav-menu > li > a,
.site-header .main-navigation ul.menu > li > a {
  margin-inline: .7rem;
}

.site-header > .storefront-primary-navigation .col-full {
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
}

.site-branding,
.site-header .site-logo-anchor,
.site-header .custom-logo-link {
  margin: 0;
  flex: 0 0 auto;
}

/*
 * The logo.
 *
 * Storefront sets `width: 100%` on it, which turned a 200x200 mark into a
 * 210x36 ellipse once the height was capped — so width has to be released, not
 * just height limited. And at desktop Storefront resets `max-height` to none,
 * which let the same mark render at its full 200px and made the header 295px
 * tall. Hence !important on both: this is a size the design decides, not the
 * parent theme.
 */
.site-header img,
.site-header .custom-logo,
.site-header .site-logo-anchor img,
.site-branding img {
  max-height: 44px !important;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  object-fit: contain;
}

.site-header .main-navigation,
.site-header .site-header-cart {
  margin-left: auto;
  margin-bottom: 0;
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
  font-family: var(--ms-font-display);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .6rem .2rem;
}

/* ---------------------------------------------------------------- buttons */

/*
 * Pills, and one gradient.
 *
 * The gradient is spent on the primary action only. Everything else is a quiet
 * outline, which is what keeps the one coloured thing on the screen meaningful.
 */
button,
input[type="button"],
input[type="submit"],
.button,
a.button,
.wp-block-button__link,
.wc-block-components-button {
  border-radius: var(--ms-radius-pill);
  font-family: var(--ms-font-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .85em 1.9em;
  /* A pill whose label wraps is not a pill. The home page's "Visual Player"
     button was rendering 146x72 with the words stacked. */
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .18s cubic-bezier(.23,1,.32,1), filter .18s ease;
}

button:hover,
.button:hover,
a.button:hover,
.wc-block-components-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/*
 * A width chosen in the block editor is a floor, not a clamp.
 *
 * The home page's author set "25% width" on the Visual Player button back when
 * this theme's buttons had tighter padding. The wider padding and letter
 * spacing here made the label no longer fit, and `white-space: nowrap` turned
 * that from a wrap into a clip. Honour the intent — the button is still that
 * wide — but never narrower than its own words.
 */
.wp-block-button.has-custom-width .wp-block-button__link {
  min-width: max-content;
  width: auto;
}

.wp-block-button.has-custom-width {
  min-width: max-content;
}

/* The one that matters: add to cart, place order, checkout. */
.button.alt,
button.alt,
a.button.alt,
.single_add_to_cart_button,
#place_order,
.checkout-button,
.wc-block-components-checkout-place-order-button,
.wp-block-button__link:not(.has-background) {
  background-image: var(--ms-grad);
  background-color: transparent;
  border-color: transparent;
  color: #08101c;
}

/* Everything else: a hairline, not a slab. */
.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button),
a.button:not(.alt):not(.checkout-button) {
  background-color: transparent;
  border-color: var(--ms-line-strong);
  color: var(--ms-text);
}

/*
 * The content column is the whole column.
 *
 * Storefront sizes `.content-area` at 73.9% to leave room for a widget column.
 * That column is never printed here, so the page was rendering 786px wide
 * inside a 1064px container with a band of nothing beside it. Removing the body
 * class was not enough — the width survives it.
 */
.site-content #primary,
.site-content .content-area,
.storefront-full-width-content #primary {
  width: 100%;
  float: none;
  margin-right: 0;
  margin-left: 0;
}

/* ------------------------------------------------------------------ cards */

/*
 * Hairline on near-black, 16px radius — the festival's ticket card, applied to
 * everything Storefront presents as a unit.
 */
ul.products li.product,
.woocommerce-MyAccount-content,
.woocommerce-order-details,
.woocommerce-customer-details,
.cart_totals,
.cross-sells,
#order_review,
.wc-block-components-sidebar,
.wc-block-components-order-summary,
#payment .payment_methods > li:not(.woocommerce-notice) {
  background-color: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-card);
  padding: clamp(1.1rem, 2.5vw, 1.8rem);
}

ul.products li.product img,
.woocommerce-product-gallery img {
  border-radius: calc(var(--ms-radius-card) - 4px);
}

/* Storefront's product grid puts the price and title flush; give them air. */
ul.products li.product .woocommerce-loop-product__title { margin-bottom: .35rem; }
ul.products li.product .price { font-size: 1.15rem; font-weight: 600; }

/* ----------------------------------------------------------------- rhythm */

/*
 * Storefront's vertical spacing was tuned for a white page with a sidebar. On a
 * dark full-width page the same values read as cramped, because there is no
 * sidebar edge to give the eye a boundary.
 */
.site-content .col-full {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.site-main > * + * { margin-top: 1.4rem; }

.storefront-full-width-content .site-main,
.page-template-template-fullwidth .site-main {
  max-width: 1200px;
  margin-inline: auto;
}

/* ----------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--ms-line);
  padding-top: clamp(2rem, 5vw, 3rem);
}

.site-footer .widget .widget-title,
.site-footer .widget .widgettitle {
  border-bottom-color: var(--ms-line);
}

/* ------------------------------------------------------------------ forms */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select,
.input-text {
  border-radius: 10px;
  padding: .75em .9em;
}

/* --------------------------------------------------------------- phones */

/* 767.98, not 768: Storefront's own breakpoint is `min-width: 768px`, so at
   exactly 768 both rule sets applied and the header rendered 241px tall — the
   one width where the desktop nav and the handheld nav were both laid out. */
@media (max-width: 767.98px) {
  /* Two rows is the right answer on a phone. */
  .site-header,
  .site-header .col-full {
    flex-wrap: wrap;
    row-gap: .4rem;
  }
  .site-header .custom-logo,
  .site-header .site-logo-anchor img,
  .site-branding img { max-height: 34px; }
  .site-header { padding-inline: 1rem; }
  h1 { font-size: clamp(1.8rem, 7vw, 2.3rem); }
}