/*
Theme Name:   BG waves
Theme URI:    https://bgwaves.com
Description:  BG waves child theme — technical-coastal design system. Syne + Space Mono.
Author:       BG waves
Template:     generatepress
Version:      1.1.3
Text Domain:  bgwaves
*/

/* ==========================================================================
   1. SEMANTIC TOKEN ALIASES
   WordPress generates --wp--preset--* from theme.json. These aliases give the
   short, readable names used across patterns and Woo overrides. Change a color
   in theme.json only — never redefine a hex here.
   ========================================================================== */

:root {
  /* Color */
  --bg-sand:            var(--wp--preset--color--sand);
  --bg-sand-deep:       var(--wp--preset--color--sand-deep);
  --border-dune:        var(--wp--preset--color--dune);   /* #D2C8B5 — 1.56:1 on sand; raw coastal edge, visible without squinting */
  --text-marine:        var(--wp--preset--color--marine);
  --accent-seaglass:    var(--wp--preset--color--seaglass);
  --accent-coral:       var(--wp--preset--color--coral);
  --accent-mist:        var(--wp--preset--color--mist);

  /* Derived — muted text. NEVER use --accent-mist for text (fails WCAG AA). */
  --text-muted:         color-mix(in srgb, var(--text-marine) 68%, transparent);
  --tint-seaglass:      color-mix(in srgb, var(--accent-seaglass) 12%, transparent);
  --tint-coral:         color-mix(in srgb, var(--accent-coral) 14%, transparent);

  /* Type */
  --font-display:       var(--wp--preset--font-family--display);
  --font-body:          var(--wp--preset--font-family--body);

  /* Space */
  --space-1:            var(--wp--preset--spacing--10);
  --space-2:            var(--wp--preset--spacing--20);
  --space-3:            var(--wp--preset--spacing--30);
  --space-4:            var(--wp--preset--spacing--40);
  --space-5:            var(--wp--preset--spacing--50);
  --space-6:            var(--wp--preset--spacing--60);

  /* System */
  --radius-card:        1rem;
  --radius-control:     0.5rem;
  --tap-min:            48px;
  --ease-brand:         300ms ease-out;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body {
  background-color: var(--bg-sand);
  color: var(--text-marine);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Space Mono is already wide. Never add positive tracking at body size. */
p, li, dd { letter-spacing: 0; }

/* Uppercase labels — the one place tracking is allowed. */
.bgw-label,
.bgw-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}
.bgw-eyebrow { color: var(--accent-seaglass); }

.bgw-meta {
  font-size: var(--wp--preset--font-size--small);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Article measure is calibrated to Space Mono (~70 chars at 42rem).
   GeneratePress renders body copy in its OWN container at its own width and
   does not inherit theme.json's contentSize — verified on staging, where the
   measure blew out to ~112 chars. These selectors put it back.
   Monospace makes a long measure worse, not better: wide glyphs mean the eye
   travels further per line with fewer landmarks to track back to. */
.entry-content > *,
.inside-article > *:not(.post-image):not(.entry-header),
.entry-summary > *,
.page-content > * {
  max-width: var(--wp--style--global--content-size);
}

/* GP renders some text outside .entry-content (archive descriptions, system
   messages, GP's own page-header). Catch those too — anything that is a
   run of prose gets the measure, regardless of which container GP chose. */
.site-content p:not([class*="align"]):not(.bgw-meta):not(.bgw-label),
.page-header-content > *,
.taxonomy-description > *,
.no-results > * {
  max-width: var(--wp--style--global--content-size);
}

/* Wide and full alignments opt out — they are meant to break the measure. */
.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > .wp-block-group.alignfull,
.entry-content > .wp-block-columns.alignwide {
  max-width: none;
}

/* ==========================================================================
   3. SECTION RHYTHM
   ========================================================================== */

.bgw-section {
  padding-block: var(--space-5);
}
@media (min-width: 782px) {
  .bgw-section { padding-block: var(--space-6); }
}
.bgw-section--tinted { background-color: var(--bg-sand-deep); }

/* ==========================================================================
   4. PRODUCT CARD
   ========================================================================== */

.bgw-card {
  border: 1px solid var(--border-dune);
  border-radius: var(--radius-card);
  background-color: var(--bg-sand);
  padding: var(--space-3);
  transition: transform var(--ease-brand), border-color var(--ease-brand);
}
.bgw-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-mist);
}
@media (prefers-reduced-motion: reduce) {
  .bgw-card, .bgw-card:hover { transition: none; transform: none; }
}

/* POD mockups are not full-bleed photography — contain, don't cover. */
.bgw-card__media {
  background-color: var(--bg-sand-deep);
  border-radius: var(--radius-card);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.bgw-card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--space-2);
}

.bgw-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.25;
  margin-block: var(--space-2) var(--space-1);
}
.bgw-card__price {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--text-marine);
}
.bgw-card__fulfillment {
  font-size: var(--wp--preset--font-size--small);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.bgw-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background-color: var(--tint-seaglass);
  color: var(--accent-seaglass);
}
.bgw-badge--drop {
  background-color: var(--tint-coral);
  color: var(--text-marine);
}

/* ==========================================================================
   5. CONTROLS
   ========================================================================== */

.bgw-btn-secondary,
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  border: 1px solid var(--accent-seaglass);
  color: var(--accent-seaglass);
  border-radius: var(--radius-control);
  min-height: var(--tap-min);
}

/* Every interactive target clears 48px. Size swatches included. */
.bgw-swatch,
.wp-block-button__link {
  min-height: var(--tap-min);
}

/* WebKit doesn't center a <select>'s value vertically inside a min-height
   box on its own — needs explicit block padding or the text sits high. */
.woocommerce div.product form.cart .variations select {
  min-height: var(--tap-min);
  padding-block: 0.5rem;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent-seaglass);
  outline-offset: 2px;
}

/* ==========================================================================
   6. SIZE & FIT TABLE
   Space Mono earns its keep here — genuinely tabular data, mono alignment.
   ========================================================================== */

.bgw-fit-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--wp--preset--font-size--small);
  font-variant-numeric: tabular-nums;
}
.bgw-fit-table th,
.bgw-fit-table td {
  border-bottom: 1px solid var(--border-dune);
  padding: var(--space-2) var(--space-1);
  text-align: left;
}
.bgw-fit-table th {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bgw-fit-table tbody tr:nth-child(even) { background: none; } /* no zebra */

/* ==========================================================================
   7. WAVE DIVIDER
   ========================================================================== */

.bgw-divider {
  display: block;
  width: 100%;
  height: auto;
  color: var(--accent-mist);
  opacity: 0.3;
}
.bgw-divider--dune { color: var(--border-dune); opacity: 0.4; }

/* ==========================================================================
   8. STICKY ADD TO BAG (mobile)
   ========================================================================== */

@media (max-width: 781px) {
  .bgw-sticky-bag {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
    background-color: var(--bg-sand);
    border-top: 1px solid var(--border-dune);
  }
  .bgw-sticky-bag .wp-block-button__link { flex: 1; }
  body.single-product { padding-bottom: 5.5rem; }
}

/* ==========================================================================
   9. WOOCOMMERCE OVERRIDES
   ========================================================================== */

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--text-marine);
}

.woocommerce div.product .stock {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-seaglass);
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  border-top-color: var(--accent-seaglass);
  background-color: var(--bg-sand-deep);
  font-family: var(--font-body);
}

.bgw-empty { font-family: var(--font-body); }

/* Kill Woo's default sale flash — banned by the design system. */
.woocommerce span.onsale { display: none !important; }

/* ==========================================================================
   10. PRINT — Size & Fit table should print cleanly
   ========================================================================== */

@media print {
  .bgw-sticky-bag, .bgw-divider { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   11. GENERATEPRESS COMPATIBILITY
   Locked to GeneratePress Premium — NOT pure FSE. GP gives a <10kb CSS
   baseline, reliable Woo hooks, and stable checkout/mini-cart templates that
   block themes still get wrong.

   IMPORTANT: GP's Customizer colors and typography are written into its own
   stylesheet and will BEAT theme.json on specificity. Set GP's Customizer
   colors to match the palette, or leave them at defaults and let this section
   force the brand values. Do not fight it in two places.
   ========================================================================== */

/* Map GP's own custom properties onto the brand tokens so GP core components
   (buttons, nav, footer widgets) inherit without per-component overrides. */
:root {
  --contrast:        var(--text-marine);
  --contrast-2:      color-mix(in srgb, var(--text-marine) 78%, transparent);
  --contrast-3:      var(--accent-mist);
  --base:            var(--border-dune);
  --base-2:          var(--bg-sand-deep);
  --base-3:          var(--bg-sand);
  --accent:          var(--accent-seaglass);
}

.site,
.site-content,
body.wp-singular {
  background-color: var(--bg-sand);
}

/* GP content container — align to the theme.json article measure. */
.inside-article,
.entry-content {
  font-family: var(--font-body);
}

/* GP navigation — Space Mono 700, the telemetry label treatment. */
.main-navigation .main-nav ul li a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: var(--accent-seaglass);
}

/* GP headings must use Syne even where GP's Customizer typography applies. */
.entry-title,
.page-header h1,
h1, h2, h3 {
  font-family: var(--font-display);
}

/* GP buttons */
.button,
button:not(.components-button),
.wp-block-button__link {
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: var(--radius-control);
  min-height: var(--tap-min);
}

/* GP footer */
.site-footer {
  background-color: var(--text-marine);
  color: var(--bg-sand);
  font-family: var(--font-body);
}
.site-footer a { color: var(--bg-sand); }
.site-footer a:hover { color: var(--accent-mist); }

/* GP separators / borders to Dune, never GP's default grey. */
.separate-containers .inside-article,
.entry-content > hr {
  border-color: var(--border-dune);
}

/* GP WooCommerce mini-cart slide-out + GP Premium off-canvas menu panel.
   Both render outside .site-content and fall back to GP's own defaults
   (dark panel, default link color) without explicit overrides here. */
#generate-slideout-menu,
.slideout-navigation,
.wc-sidebar-cart {
  background-color: var(--bg-sand);
  color: var(--text-marine);
  font-family: var(--font-body);
}
.slideout-navigation a { color: var(--text-marine); }
.slideout-navigation a:hover { color: var(--accent-seaglass); }

/* ==========================================================================
   12. IMAGE DEFAULTS
   Every img in content gets explicit dimensions from WP. These rules stop
   CLS when a dimension is missing and enforce the sand-field treatment on
   product imagery.
   ========================================================================== */

img { max-width: 100%; height: auto; }

.wp-block-post-featured-image img,
.entry-content img {
  border-radius: var(--radius-card);
}

/* Product imagery: contain on a sand field, square frame everywhere. POD
   mockups are not photography, and a fixed 1:1 box (loop AND single-product
   gallery) stops CLS as they load in at native aspect ratios. */
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img {
  background-color: var(--bg-sand-deep);
  object-fit: contain;
  aspect-ratio: 1 / 1;
  width: 100%;
}

/* ==========================================================================
   13. FOOTER — social + nav
   Text links, not icon fonts. An icon set is a whole extra font file for
   three links.
   ========================================================================== */

.bgw-footer { color: var(--bg-sand); }
.bgw-footer .bgw-meta { color: color-mix(in srgb, var(--bg-sand) 78%, transparent); }

.bgw-social,
.bgw-footer__nav {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.bgw-social a,
.bgw-footer__nav a {
  color: var(--bg-sand);
  text-decoration: none;
  font-family: var(--font-body);
  display: inline-block;
  padding-block: 0.375rem;      /* keeps the tap target near 48px in a stacked list */
  border-bottom: 1px solid transparent;
}
.bgw-social a:hover,
.bgw-footer__nav a:hover {
  color: var(--accent-mist);
  border-bottom-color: var(--accent-mist);
}

.bgw-footer__wordmark img { filter: invert(1) brightness(1.6); }

.bgw-footer__legal { max-width: 42rem; }