/* ==========================================================================
   Bottle Gases — Brand tokens & Woodmart override sheet
   --------------------------------------------------------------------------
   Loaded after Woodmart's parent stylesheet. Pulls the design system
   tokens from `Bottle Gases Design System/colors_and_type.css` into the
   live site, then overrides the Woodmart selectors that need to shift.
   Where Woodmart exposes its own CSS variables (`--wd-*`), we set those
   directly — that's the cleanest path to recolouring buttons, links,
   product-card hovers, etc., without selector-by-selector wrestling.

   Fonts are pulled via @import here (not wp_enqueue_style alone) because
   LiteSpeed CSS-combine strips the cross-origin <link> in production.
   The @import gets inlined into the combined bundle and survives.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Manrope:wght@400;500;600;700;800&family=Nunito:wght@400;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============================ BRAND COLOURS ============================
     Updated 2026-05-09 — owner switched primary brand colour from orange
     to a brown hierarchy after importing the Woodmart Pets prebuilt.
     Orange tokens kept (--bg-orange-*) as a secondary palette for
     warning/promo accents; the existing SVG logo still uses orange
     and works fine against the brown chrome. Don't drop them — they're
     wired into existing badges + on-sale price tags.
     ====================================================================== */

  /* Primary palette — warm earthy brown */
  --bg-brown-50:    #FBF7F2;   /* page bg, cream */
  --bg-brown-100:   #F2E8D8;   /* soft beige */
  --bg-brown-200:   #E2C9A6;   /* sand */
  --bg-brown-300:   #C9A073;   /* tan */
  --bg-brown-400:   #A8794D;   /* camel */
  --bg-brown-500:   #7C4F2A;   /* PRIMARY — rich brown */
  --bg-brown-600:   #623D1F;   /* dark brown */
  --bg-brown-700:   #4A2D17;   /* espresso */
  --bg-brown-800:   #321D0E;   /* deep brown */
  --bg-brown-900:   #1F1207;   /* near-black brown */

  /* ACTIVE PRIMARY — navy. Rebrand 2026-05-27: brown → navy chrome,
     yellow action accent on top. Keep --bg-brown-* defined so anything
     still hard-pointed at brown renders without breakage during transition.
     New work should reference --bg-navy-* and --bg-yellow. */
  --bg-navy-50:    #E6ECF3;
  --bg-navy-100:   #C2CDDC;
  --bg-navy-200:   #99A9C0;
  --bg-navy-300:   #6E84A3;
  --bg-navy-400:   #426488;
  --bg-navy-500:   #08203C;   /* PRIMARY — brand navy */
  --bg-navy-600:   #061A32;
  --bg-navy-700:   #051527;
  --bg-navy-800:   #03101C;
  --bg-navy-900:   #020A12;

  /* High-attention action accent — used on Add-to-basket, hero CTA, primary buttons. */
  --bg-yellow:       #FA9F03;
  --bg-yellow-hover: #E08A00;

  /* Secondary — orange (kept for badges, sale tags, promo accents) */
  --bg-orange-50:   #FFF4E6;
  --bg-orange-100:  #FFE3BF;
  --bg-orange-200:  #FFC982;
  --bg-orange-300:  #FFAE45;
  --bg-orange-400:  #FB9722;
  --bg-orange-500:  #F58220;
  --bg-orange-600:  #DC6E10;
  --bg-orange-700:  #B5570A;
  --bg-orange-800:  #8C4308;
  --bg-orange-900:  #5E2C04;

  /* Neutrals — slightly warmer to harmonise with brown primary */
  --bg-ink-0:       #FFFFFF;
  --bg-ink-50:      #FAF7F2;   /* page background — matches --bg-brown-50 */
  --bg-ink-100:     #F0EAE0;
  --bg-ink-200:     #DFD5C5;
  --bg-ink-300:     #C5B8A3;
  --bg-ink-400:     #948776;
  --bg-ink-500:     #695F50;
  --bg-ink-600:     #463E32;
  --bg-ink-700:     #2C2620;
  --bg-ink-800:     #1C1812;
  --bg-ink-900:     #110E08;

  --bg-success:     #2F8F4E;
  --bg-warning:     #E0A100;
  --bg-danger:      #C9362F;
  --bg-info:        #2A6FB5;

  /* Design-system aliases — names from the Bottle Gases Design System spec.
     Mapped to the warm ramp so anything written against the spec resolves. */
  --bg-border:         var(--bg-ink-200);   /* default 1px card / input border */
  --bg-surface:        #FFFFFF;              /* card surface */
  --bg-surface-light:  var(--bg-ink-50);    /* page background, soft cream */

  /* ============================ TYPOGRAPHY ============================== */
  --font-display:  'Anton', 'Bebas Neue', 'Impact', sans-serif;
  --font-brand:    'Nunito', 'Quicksand', system-ui, sans-serif;
  --font-body:     'Manrope', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ============================ SHAPE & SHADOW ========================== */
  --r-md: 6px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(31, 18, 7, 0.06);
  --shadow-md: 0 2px 6px rgba(31, 18, 7, 0.08), 0 1px 2px rgba(31, 18, 7, 0.04);
  --shadow-lg: 0 8px 24px rgba(31, 18, 7, 0.10), 0 2px 6px rgba(31, 18, 7, 0.05);

  /* ============================ WOODMART OVERRIDES ======================
     Woodmart exposes these on :root. NAVY chrome (rebrand 2026-05-27).
     Action buttons get yellow override below (see .add_to_cart_button).
     ====================================================================== */
  --wd-primary-color:        var(--bg-navy-500);
  --wd-alternative-color:    var(--bg-navy-900);
  --wd-text-color:           var(--bg-ink-700);
  --wd-title-color:          var(--bg-navy-900);
  --wd-link-color:           var(--bg-navy-500);
  --wd-link-color-hover:     var(--bg-navy-700);
  --wd-bg-color:             var(--bg-ink-50);
  --wd-border-color:         var(--bg-ink-200);

  /* Woodmart typography hooks. */
  --wd-text-font:            var(--font-body);
  --wd-title-font:           var(--font-display);
  --wd-secondary-font:       var(--font-display);
  --wd-btn-font:             var(--font-body);

  /* Woodmart radii (used across cards, inputs, buttons). */
  --wd-brd-radius:           6px;
  --wd-form-brd-radius:      6px;
  --wd-btn-brd-radius:       6px;
}

/* ============================ TYPE BASELINE ============================== */
/* Woodmart sets its own font-family on body / headings — assert ours back. */
body,
.woodmart-page-content,
.wd-text-block,
input, select, textarea, button {
  font-family: var(--font-body);
  color: var(--bg-ink-700);
}

h1, h2,
.h1, .h2,
.woodmart-title-container .liner-continer,
.woodmart-title-container .title,
.entry-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 400;        /* Anton ships only at 400. */
  color: var(--bg-ink-900);
}

h3, h4, h5, h6,
.h3, .h4, .h5, .h6 {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--bg-ink-900);
}

/* The wordmark style (logo word "Bottle Gases" if rendered as text rather than SVG). */
.wordmark,
.site-title.has-text-logo {
  font-family: var(--font-brand);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--bg-navy-500);
}

/* Eyebrow / overline reused from the design system. */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg-navy-600);
}

/* ============================ COLOUR HOOKS =============================== */
/* Chrome lives on navy. Primary action buttons get the yellow accent so the
   "Add to basket" CTA stays high-attention against navy nav, links, and
   icons across the rest of the surface. */
.color-primary,
.text-primary,
.btn-color-primary { color: var(--bg-navy-500); }

.bg-primary,
.btn-style-default,
.btn-color-primary.btn-style-default,
.add_to_cart_button,
.single_add_to_cart_button {
  background-color: var(--bg-yellow);
  border-color: var(--bg-yellow);
  color: var(--bg-navy-900);
  border-radius: var(--r-md);
}

.btn-style-default:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover {
  background-color: var(--bg-yellow-hover);
  border-color: var(--bg-yellow-hover);
  color: var(--bg-navy-900);
}

.btn-style-default:active,
.add_to_cart_button:active,
.single_add_to_cart_button:active {
  background-color: var(--bg-yellow-hover);
  border-color: var(--bg-yellow-hover);
  color: var(--bg-navy-900);
}

/* Outline / bordered buttons — secondary actions, navy chrome. */
.btn-style-bordered {
  border-color: var(--bg-navy-500);
  color: var(--bg-navy-500);
  border-radius: var(--r-md);
}
.btn-style-bordered:hover {
  background-color: var(--bg-navy-50);
  border-color: var(--bg-navy-500);
  color: var(--bg-navy-700);
}

/* Links across the body. */
a { color: var(--bg-navy-500); }
a:hover { color: var(--bg-navy-700); text-decoration-color: var(--bg-navy-500); }

/* Product titles in cards. */
.product-grid-item .wd-entities-title,
.product-grid-item .product-title {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--bg-navy-900);
}
.product-grid-item:hover .wd-entities-title,
.product-grid-item:hover .product-title {
  color: var(--bg-navy-500);
}

/* Product price. */
.price ins,
.price > .amount,
.amount {
  color: var(--bg-ink-900);
  font-weight: 700;
}
.price del,
.price .from-text {
  color: var(--bg-ink-400);
}

/* Section dividers / borders match the warm-grey neutral. */
.wd-divider,
hr,
.woocommerce-info,
.wd-divider-secondary { border-color: var(--bg-ink-200); }

/* ============================ PAGE BACKGROUND ============================ */
body { background-color: var(--bg-ink-50); }

/* ============================ HERO SLIDER OVERLAY ======================== */
/*
 * Lifestyle hero photography is busy and varies in brightness — text on top
 * needs guaranteed contrast. Add a dark overlay to the slide background and
 * force the title / text-block / button copy white. Stronger on the left
 * where headlines tend to land (the brand uses upper-left for poster copy).
 */

.wd-slider .wd-slide {
  position: relative;
}

.wd-slider .wd-slide .wd-slide-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(20, 20, 18, 0.55) 0%,
    rgba(20, 20, 18, 0.40) 50%,
    rgba(20, 20, 18, 0.20) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Pull the slide content above the overlay. */
.wd-slider .wd-slide .wd-slide-container,
.wd-slider .wd-slide .wd-slide-inner {
  position: relative;
  z-index: 2;
}

/* Force white text on slide headings + body copy regardless of inline colour. */
.wd-slider .wd-slide .woodmart-title-container,
.wd-slider .wd-slide .woodmart-title-container .title,
.wd-slider .wd-slide h1,
.wd-slider .wd-slide h2,
.wd-slider .wd-slide h3,
.wd-slider .wd-slide .wd-text-block,
.wd-slider .wd-slide .wd-text-block * {
  color: #FFFFFF !important;
  text-shadow: 0 2px 12px rgba(20, 20, 18, 0.45);
}

/* Keep hero CTA on the yellow accent — high-attention primary action over
   busy lifestyle photography. Dark navy text gives the contrast that brown-on-white
   gave previously while staying readable on bright/light slide backgrounds. */
.wd-slider .wd-slide .btn,
.wd-slider .wd-slide a.btn {
  background-color: var(--bg-yellow);
  border-color: var(--bg-yellow);
  color: var(--bg-navy-900) !important;
  text-shadow: none;
  box-shadow: 0 4px 14px rgba(8, 32, 60, 0.30);
}
.wd-slider .wd-slide .btn:hover,
.wd-slider .wd-slide a.btn:hover {
  background-color: var(--bg-yellow-hover);
  border-color: var(--bg-yellow-hover);
  color: var(--bg-navy-900) !important;
}

/* ============================ SHADOWS ==================================== */
.product-grid-item,
.wd-card,
.shadow-sm { box-shadow: var(--shadow-sm); }
.product-grid-item:hover { box-shadow: var(--shadow-md); }

/* ============================ HEADER NAV ================================= */
.main-nav > ul > li > a,
.wd-nav > li > a {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--bg-ink-900);
}
.main-nav > ul > li > a:hover,
.wd-nav > li > a:hover { color: var(--bg-navy-500); }

/* ============================ FORMS ====================================== */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="password"],
select,
textarea {
  border-radius: var(--r-md);
  border: 1px solid var(--bg-ink-200);
  background-color: #FFFFFF;
  color: var(--bg-ink-900);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: var(--bg-navy-500);
  box-shadow: 0 0 0 3px rgba(8, 32, 60, 0.20);
  outline: none;
}

/* ============================ BADGES / STOCK STATES ======================
   Sale tags stay ORANGE on purpose — they're a 2nd-tier accent, give
   visual variety on product cards, and keep working with the brown
   primary without competing for attention.
   ====================================================================== */
.product-label.onsale,
.onsale {
  background-color: var(--bg-orange-500);
  color: #FFFFFF;
  border-radius: var(--r-pill);
}
.stock.in-stock { color: var(--bg-success); }
.stock.out-of-stock { color: var(--bg-danger); }