/* ── The Brownie Girl — supplemental styles ── */

html { scroll-behavior: smooth; }

body { overflow-x: hidden; }

/* Hero section ----------------------------------------------- */
.bg-hero {
  background:
    radial-gradient(ellipse at 60% 40%, rgba(168,82,45,0.35) 0%, transparent 65%),
    radial-gradient(ellipse at 20% 80%, rgba(200,121,65,0.2)  0%, transparent 50%),
    var(--wp--preset--color--chocolate);
  color: var(--wp--preset--color--cream);
  position: relative;
}

/* Order CTA section — same brown-dark warmth as the original design */
.bg-order {
  background:
    radial-gradient(circle at 85% 25%, rgba(232,169,81,0.14) 0%, transparent 55%),
    var(--wp--preset--color--brown-dark);
  color: var(--wp--preset--color--cream);
  position: relative;
}

/* Hero & order CTA — force light text over dark backgrounds.
   !important needed because WP block classes (.has-X-color.has-text-color)
   have higher specificity than our scoped selectors. */
.bg-hero,
.bg-order,
.has-chocolate-background-color,
.has-brown-dark-background-color,
.has-brown-mid-background-color,
.has-chocolate-color.has-background,
.has-brown-dark-color.has-background {
  color: var(--wp--preset--color--cream);
}

.bg-hero h1, .bg-hero h2, .bg-hero h3, .bg-hero h4,
.bg-hero .wp-block-heading,
.bg-hero p:not(.hero-tag):not(.section-label),
.bg-hero li,
.bg-order h1, .bg-order h2, .bg-order h3, .bg-order h4,
.bg-order .wp-block-heading,
.bg-order p:not(.section-label),
.bg-order li,
.has-chocolate-background-color h1,
.has-chocolate-background-color h2,
.has-chocolate-background-color h3,
.has-chocolate-background-color p,
.has-brown-dark-background-color h1,
.has-brown-dark-background-color h2,
.has-brown-dark-background-color h3,
.has-brown-dark-background-color p {
  color: var(--wp--preset--color--cream) !important;
}

.bg-hero em, .bg-order em,
.has-chocolate-background-color em,
.has-brown-dark-background-color em {
  color: var(--wp--preset--color--caramel) !important;
  font-style: italic;
}

.bg-hero .hero-tag,
.bg-hero p.hero-tag,
.bg-hero .section-label,
.bg-order .section-label {
  color: var(--wp--preset--color--gold) !important;
}

/* Plain links (not buttons) on dark backgrounds → gold */
.bg-hero a:not(.wp-block-button__link):not(.wp-element-button),
.bg-order a:not(.wp-block-button__link):not(.wp-element-button),
.has-chocolate-background-color a:not(.wp-block-button__link),
.has-brown-dark-background-color a:not(.wp-block-button__link) {
  color: var(--wp--preset--color--gold) !important;
}

/* Light text on dark — strong default for any container with dark bg color */
[style*="background-color:#2c1408"],
[style*="background-color:#3b1f0e"],
[style*="background-color:#6b3a1f"],
[style*="background:#2c1408"],
[style*="background:#3b1f0e"] {
  color: var(--wp--preset--color--cream);
}
[style*="background-color:#2c1408"] h1,
[style*="background-color:#2c1408"] h2,
[style*="background-color:#2c1408"] h3,
[style*="background-color:#2c1408"] p,
[style*="background-color:#3b1f0e"] h1,
[style*="background-color:#3b1f0e"] h2,
[style*="background-color:#3b1f0e"] h3,
[style*="background-color:#3b1f0e"] p {
  color: var(--wp--preset--color--cream) !important;
}

.hero-tag {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--wp--preset--color--gold);
}

.hero-logo img {
  width: min(320px, 70vw);
  height: auto;
  border-radius: 16px;
  mix-blend-mode: lighten;
  filter: drop-shadow(0 6px 28px rgba(0,0,0,0.5)) brightness(1.05);
}

/* Section dividers ------------------------------------------- */
.section-divider-top {
  position: relative;
}
.section-divider-top::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--wp--preset--color--brown-mid),
    var(--wp--preset--color--gold),
    var(--wp--preset--color--brown-mid));
}

/* Section labels --------------------------------------------- */
.section-label {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--wp--preset--color--caramel);
  margin-bottom: 0.6rem;
}

/* Site header (chocolate nav) ------------------------------- */
.site-header,
.wp-block-template-part.site-header,
header.wp-block-template-part {
  background: var(--wp--preset--color--chocolate);
  color: var(--wp--preset--color--cream-dark);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.site-header .wp-block-site-logo img {
  max-height: 52px;
  width: auto;
  border-radius: 6px;
  mix-blend-mode: luminosity;
  filter: brightness(1.15) contrast(1.05);
}
.site-header a {
  color: var(--wp--preset--color--cream-dark);
  text-decoration: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
  transition: color 0.2s;
}
.site-header a:hover { color: var(--wp--preset--color--gold); }

/* Site footer ------------------------------------------------ */
.site-footer,
footer.wp-block-template-part {
  background: var(--wp--preset--color--chocolate);
  color: rgba(253,246,236,0.5);
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}
.site-footer .wp-block-site-logo img {
  max-height: 90px;
  width: auto;
  margin: 0 auto 0.6rem;
  border-radius: 10px;
  mix-blend-mode: lighten;
  filter: brightness(1.05);
}
.site-footer a {
  color: var(--wp--preset--color--caramel);
  text-decoration: none;
}
.site-footer a:hover { color: var(--wp--preset--color--gold); }

/* WooCommerce — product cards on shop & home ---------------- */
.woocommerce ul.products li.product,
.wp-block-woocommerce-product-template > li,
.wc-block-product,
.products li.product {
  background: var(--wp--preset--color--cream);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(59,31,14,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;

  /* Flex column so we can push price + button to a shared baseline */
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
}
.woocommerce ul.products li.product:hover,
.wp-block-woocommerce-product-template > li:hover,
.wc-block-product:hover,
.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(59,31,14,0.14);
}

/* Push the price to the bottom of the card — button follows immediately
   after, so price-and-button line up across all cards in the row. */
.wp-block-woocommerce-product-template > li .wp-block-woocommerce-product-price,
.wp-block-woocommerce-product-template > li .wc-block-components-product-price,
.wc-block-product .wp-block-woocommerce-product-price,
.wc-block-product .wc-block-components-product-price {
  margin-top: auto !important;
}

/* Image at top should not flex-grow; let the description take the slack */
.wp-block-woocommerce-product-template > li .wp-block-woocommerce-product-image,
.wc-block-product .wp-block-woocommerce-product-image {
  flex: 0 0 auto;
}
.wp-block-woocommerce-product-template > li .wp-block-post-excerpt,
.wc-block-product .wp-block-post-excerpt {
  flex: 1 1 auto;  /* description grows to fill, pushing nothing */
}

/* Ensure the row of cards stretches to equal heights */
.wp-block-woocommerce-product-collection .is-layout-flex,
.wp-block-woocommerce-product-template.is-layout-flex,
ul.wp-block-woocommerce-product-template {
  align-items: stretch;
}

/* Text-only card — no featured image yet, gold accent band on top */
.card-text-only::before,
.wp-block-woocommerce-product-template > li.card-text-only::before {
  content: '';
  display: block;
  height: 6px;
  background: linear-gradient(90deg,
    var(--wp--preset--color--brown-mid) 0%,
    var(--wp--preset--color--gold) 50%,
    var(--wp--preset--color--brown-mid) 100%);
}

/* Hide WooCommerce default placeholder image inside templates that don't include it */
.card-text-only .wp-block-woocommerce-product-image,
.card-text-only .wc-block-grid__product-image {
  display: none !important;
}
.woocommerce ul.products li.product .price,
.products li.product .price,
.wc-block-components-product-price {
  color: var(--wp--preset--color--caramel) !important;
  font-weight: 700;
}
.woocommerce ul.products li.product h2,
.products li.product h2,
.wp-block-post-title,
.wc-block-components-product-name {
  font-family: var(--wp--preset--font-family--heading);
  color: var(--wp--preset--color--brown-dark);
}

/* Buttons (WooCommerce + WP) -------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wp-block-woocommerce-mini-cart-button-block button,
.wc-block-components-button {
  background: var(--wp--preset--color--gold) !important;
  color: var(--wp--preset--color--chocolate) !important;
  border-radius: 2px !important;
  padding: 0.85rem 2.2rem !important;
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background 0.2s, transform 0.15s !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--wp--preset--color--caramel) !important;
  transform: translateY(-2px);
}

/* Outline-style button (e.g. "See the Menu") — transparent bg, cream text,
   subtle cream border, hovers to gold. theme.json elements.button.color
   sets gold bg globally, which clobbers WP's default outline styling, so
   we have to explicitly restore transparent here with !important. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > a.wp-element-button,
.is-style-outline.wp-block-button__link,
a.wp-element-button.is-style-outline {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--wp--preset--color--cream) !important;
  border: 1.5px solid rgba(253, 246, 236, 0.45) !important;
  transition: border-color 0.2s, color 0.2s !important;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > a.wp-element-button:hover {
  background: transparent !important;
  background-color: transparent !important;
  border-color: var(--wp--preset--color--gold) !important;
  color: var(--wp--preset--color--gold) !important;
}

/* Single product page --------------------------------------- */
.single-product .product .price {
  color: var(--wp--preset--color--caramel);
  font-weight: 700;
  font-size: 1.5rem;
}
.single-product .summary h1 {
  font-family: var(--wp--preset--font-family--heading);
  color: var(--wp--preset--color--brown-dark);
}

/* Quantity input — always visible now (one box = 9 brownies, customer
   types how many boxes). Custom-quantity.js adds a label + live total. */

/* Label that appears above the qty input when Custom is picked */
.custom-qty-label {
  display: block;
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brown-dark);
  margin: 1rem 0 0.5rem;
}
.custom-qty-hint {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--wp--preset--color--text-light);
  margin-left: 0.5rem;
  font-size: 0.78rem;
}
.single-product form.cart .quantity input.qty {
  width: 6rem;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  border: 1px solid rgba(59,31,14,0.25);
  border-radius: 2px;
}
.custom-total small {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--wp--preset--color--text-light);
  margin-top: 0.25rem;
  letter-spacing: 0;
  text-transform: none;
}

/* Live total readout next to the qty input */
.live-total {
  margin: 0.8rem 0 0.6rem;
  font-size: 1rem;
  color: var(--wp--preset--color--brown-dark);
  line-height: 1.4;
}
.live-total strong {
  font-size: 1.2rem;
  color: var(--wp--preset--color--caramel);
  font-weight: 700;
}
.live-total small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  color: var(--wp--preset--color--text-light);
}

/* Forms ------------------------------------------------------ */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="date"], input[type="number"],
select, textarea {
  border: 1px solid rgba(59,31,14,0.2);
  border-radius: 2px;
  padding: 0.7rem 0.9rem;
  font-family: var(--wp--preset--font-family--body);
  background: #fff;
  color: var(--wp--preset--color--text);
  transition: border-color 0.2s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--gold);
}

/* Cart / checkout chrome ------------------------------------ */
.wc-block-components-totals-wrapper,
.wc-block-cart .wc-block-cart-items {
  background: var(--wp--preset--color--cream);
}

/* Reveal animation (replicates the original HTML behaviour) - */
@keyframes brownieFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.brownie-fade-up { animation: brownieFadeUp 0.7s ease forwards; }