/* ==========================================================================
   Buffalo Mama Bakery — Brand CSS Overrides
   Sits on top of Astra theme. Only overrides what needs customizing.
   ========================================================================== */


/* ==========================================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* Brand Colors */
  --bmb-pink:            #ffc8e8;
  --bmb-pink-dark:       #f0a4cc;
  --bmb-pink-light:      #ffe0f0;
  --bmb-pink-subtle:     #fff0f7;
  --bmb-teal:            #3fe0d0;
  --bmb-teal-dark:       #2bbcae;
  --bmb-teal-light:      #7aeade;
  --bmb-teal-subtle:     #e0faf7;

  /* Neutrals */
  --bmb-white:           #ffffff;
  --bmb-cream:           #fdf9f6;
  --bmb-gray-100:        #f5f2ef;
  --bmb-gray-200:        #e8e4df;
  --bmb-gray-300:        #c4bfb6;
  --bmb-gray-400:        #a39e94;
  --bmb-gray-500:        #7a756c;
  --bmb-gray-600:        #5c5850;
  --bmb-gray-800:        #2e2c27;
  --bmb-gray-900:        #1a1916;

  /* Semantic */
  --bmb-text:            var(--bmb-gray-800);
  --bmb-text-light:      var(--bmb-gray-500);
  --bmb-heading:         var(--bmb-gray-900);
  --bmb-border:          var(--bmb-gray-200);
  --bmb-sale:            #d50000;

  /* Typography */
  --bmb-font:            'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --bmb-radius:          8px;
  --bmb-radius-lg:       12px;
  --bmb-radius-full:     9999px;

  /* Transitions */
  --bmb-transition:      250ms ease;
  --bmb-transition-fast: 150ms ease;
}


/* ==========================================================================
   2. GLOBAL OVERRIDES
   ========================================================================== */

body {
  font-family: var(--bmb-font);
  color: var(--bmb-text);
  background-color: var(--bmb-white);
}

a {
  color: var(--bmb-teal-dark);
  transition: color var(--bmb-transition-fast);
}

a:hover {
  color: var(--bmb-pink-dark);
}

/* Focus styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bmb-teal);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background-color: var(--bmb-pink);
  color: var(--bmb-gray-900);
}


/* ==========================================================================
   3. BUTTONS — Pink primary, Teal accent
   ========================================================================== */

/* Primary button (Astra's .ast-button, WooCommerce .button) */
.ast-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit {
  background-color: var(--bmb-pink) !important;
  color: var(--bmb-gray-900) !important;
  border: 2px solid var(--bmb-pink) !important;
  border-radius: var(--bmb-radius) !important;
  font-family: var(--bmb-font);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 12px 28px;
  transition:
    background-color var(--bmb-transition),
    border-color var(--bmb-transition),
    box-shadow var(--bmb-transition),
    transform var(--bmb-transition-fast);
}

.ast-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--bmb-pink-dark) !important;
  border-color: var(--bmb-pink-dark) !important;
  color: var(--bmb-gray-900) !important;
  box-shadow: 0 4px 16px rgba(255, 200, 232, 0.4);
  transform: translateY(-1px);
}

.ast-button:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
  transform: scale(0.97);
}

/* Outline / secondary button style via Spectra or WP block */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--bmb-pink-dark) !important;
  border: 2px solid var(--bmb-pink) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--bmb-pink) !important;
  color: var(--bmb-gray-900) !important;
}


/* ==========================================================================
   4. PINK LINEN TEXTURE SECTIONS
   Use class "bmb-linen" on any Spectra/block section to apply texture.
   ========================================================================== */

.bmb-linen {
  background-image: url('../images/pink-linen-texture.jpg');
  background-size: 400px 400px;
  background-repeat: repeat;
  background-color: var(--bmb-pink-subtle);
}

/* Lighter overlay if text needs more contrast */
.bmb-linen-light {
  background-image: url('../images/pink-linen-texture.jpg');
  background-size: 400px 400px;
  background-repeat: repeat;
  background-color: var(--bmb-pink-subtle);
  position: relative;
}

.bmb-linen-light::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}


/* ==========================================================================
   5. WOOCOMMERCE PRODUCT CARDS
   ========================================================================== */

/* Product card styling */
.woocommerce ul.products li.product {
  background: var(--bmb-white);
  border: 1px solid var(--bmb-border);
  border-radius: var(--bmb-radius-lg);
  overflow: hidden;
  transition:
    box-shadow var(--bmb-transition),
    transform var(--bmb-transition);
  padding-bottom: 0;
}

.woocommerce ul.products li.product:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

/* Product image */
.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce ul.products li.product a img {
  border-radius: 0;
  transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover a img {
  transform: scale(1.05);
}

/* Product image container — clip overflow for scale effect */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
  overflow: hidden;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .astra-shop-summary-wrap .woocommerce-loop-product__title {
  font-family: var(--bmb-font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--bmb-heading);
  padding: 12px 16px 4px;
}

/* Product price */
.woocommerce ul.products li.product .price {
  font-family: var(--bmb-font);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--bmb-heading);
  padding: 0 16px 12px;
}

.woocommerce ul.products li.product .price del {
  color: var(--bmb-gray-400);
  font-size: 0.875rem;
}

.woocommerce ul.products li.product .price ins {
  color: var(--bmb-sale);
  text-decoration: none;
}

/* Add to cart on product cards */
.woocommerce ul.products li.product .button {
  border-radius: 0 0 var(--bmb-radius-lg) var(--bmb-radius-lg) !important;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 10px 16px;
}

/* Sale badge */
.woocommerce span.onsale {
  background-color: var(--bmb-sale) !important;
  color: #fff !important;
  font-family: var(--bmb-font);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--bmb-radius) !important;
  padding: 4px 10px;
  min-height: unset;
  min-width: unset;
  line-height: 1.4;
}


/* ==========================================================================
   6. SINGLE PRODUCT PAGE
   ========================================================================== */

.single-product .summary .product_title {
  font-family: var(--bmb-font);
  color: var(--bmb-heading);
}

.single-product .summary .price {
  color: var(--bmb-heading);
  font-weight: 600;
}

.single-product .summary .price ins {
  color: var(--bmb-sale);
  text-decoration: none;
}

/* Quantity input */
.woocommerce .quantity .qty {
  border: 2px solid var(--bmb-border);
  border-radius: var(--bmb-radius);
  font-family: var(--bmb-font);
  padding: 8px 12px;
  width: 70px;
  transition: border-color var(--bmb-transition-fast);
}

.woocommerce .quantity .qty:focus {
  border-color: var(--bmb-teal);
  outline: none;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--bmb-pink-dark);
  border-bottom-color: var(--bmb-pink);
}


/* ==========================================================================
   7. CART & CHECKOUT
   ========================================================================== */

.woocommerce-cart .woocommerce table.cart td.actions .coupon .input-text,
.woocommerce-checkout .woocommerce-input-wrapper input,
.woocommerce-checkout .woocommerce-input-wrapper select,
.woocommerce-checkout textarea {
  border: 2px solid var(--bmb-border);
  border-radius: var(--bmb-radius);
  font-family: var(--bmb-font);
  padding: 10px 14px;
  transition: border-color var(--bmb-transition-fast);
}

.woocommerce-cart .woocommerce table.cart td.actions .coupon .input-text:focus,
.woocommerce-checkout .woocommerce-input-wrapper input:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--bmb-teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(63, 224, 208, 0.15);
}

/* Order total highlight */
.woocommerce-checkout #order_review .order-total td {
  color: var(--bmb-heading);
  font-weight: 700;
  font-size: 1.2rem;
}


/* ==========================================================================
   8. HEADER TWEAKS
   ========================================================================== */

/* Sticky header shadow on scroll (Astra adds .ast-header-sticky-active) */
.ast-header-sticky-active {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06) !important;
}

/* Nav link hover */
.ast-header-sections-navigation .menu-item a:hover,
.main-header-menu .menu-item a:hover {
  color: var(--bmb-pink-dark) !important;
}

/* Active nav link */
.main-header-menu .current-menu-item > a,
.main-header-menu .current-menu-ancestor > a {
  color: var(--bmb-pink-dark) !important;
}

/* Cart icon count badge */
.ast-cart-menu-wrap .count,
.ast-header-woo-cart .count {
  background-color: var(--bmb-pink) !important;
  color: var(--bmb-gray-900) !important;
  font-weight: 700;
}


/* ==========================================================================
   9. FOOTER TWEAKS
   ========================================================================== */

.site-footer {
  font-family: var(--bmb-font);
}

.site-footer a:hover {
  color: var(--bmb-pink) !important;
}


/* ==========================================================================
   10. CONTACT FORM 7 STYLING
   ========================================================================== */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  border: 2px solid var(--bmb-border);
  border-radius: var(--bmb-radius);
  font-family: var(--bmb-font);
  font-size: 0.95rem;
  padding: 12px 16px;
  color: var(--bmb-text);
  background: var(--bmb-white);
  transition: border-color var(--bmb-transition-fast), box-shadow var(--bmb-transition-fast);
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  border-color: var(--bmb-teal);
  box-shadow: 0 0 0 3px rgba(63, 224, 208, 0.15);
  outline: none;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: var(--bmb-gray-400);
}

/* CF7 submit button */
.wpcf7 input[type="submit"] {
  background-color: var(--bmb-pink) !important;
  color: var(--bmb-gray-900) !important;
  border: 2px solid var(--bmb-pink) !important;
  border-radius: var(--bmb-radius) !important;
  font-family: var(--bmb-font);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 14px 32px;
  cursor: pointer;
  transition:
    background-color var(--bmb-transition),
    box-shadow var(--bmb-transition),
    transform var(--bmb-transition-fast);
}

.wpcf7 input[type="submit"]:hover {
  background-color: var(--bmb-pink-dark) !important;
  border-color: var(--bmb-pink-dark) !important;
  box-shadow: 0 4px 16px rgba(255, 200, 232, 0.4);
  transform: translateY(-1px);
}

/* CF7 validation messages */
.wpcf7-not-valid-tip {
  color: var(--bmb-sale);
  font-size: 0.8rem;
  margin-top: 4px;
}

.wpcf7 .wpcf7-response-output {
  border-radius: var(--bmb-radius);
  font-family: var(--bmb-font);
  padding: 12px 16px;
  margin: 16px 0 0;
}

/* File upload area */
.wpcf7 .codedropz-upload-wrapper {
  border: 2px dashed var(--bmb-border);
  border-radius: var(--bmb-radius-lg);
  padding: 24px;
  text-align: center;
  background: var(--bmb-cream);
  transition: border-color var(--bmb-transition-fast);
}

.wpcf7 .codedropz-upload-wrapper:hover {
  border-color: var(--bmb-teal);
}

/* Form labels */
.wpcf7 label {
  font-family: var(--bmb-font);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--bmb-heading);
  display: block;
  margin-bottom: 6px;
}

/* Form field spacing */
.wpcf7 p {
  margin-bottom: 20px;
}


/* ==========================================================================
   11. SPECTRA BLOCK ENHANCEMENTS
   ========================================================================== */

/* Section headings used in Spectra sections */
.bmb-section-heading {
  text-align: center;
  margin-bottom: 48px;
}

.bmb-section-heading h2 {
  font-family: var(--bmb-font);
  font-weight: 700;
  color: var(--bmb-heading);
  margin-bottom: 12px;
}

.bmb-section-heading p {
  color: var(--bmb-text-light);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Feature/benefit icon cards */
.bmb-feature-card {
  text-align: center;
  padding: 32px 24px;
  background: var(--bmb-white);
  border: 1px solid var(--bmb-border);
  border-radius: var(--bmb-radius-lg);
  transition: box-shadow var(--bmb-transition), transform var(--bmb-transition);
}

.bmb-feature-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transform: translateY(-4px);
}

.bmb-feature-card .bmb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--bmb-pink-subtle);
  color: var(--bmb-pink-dark);
  border-radius: 16px;
  margin-bottom: 16px;
  font-size: 1.5rem;
  transition: background-color var(--bmb-transition), transform var(--bmb-transition);
}

.bmb-feature-card:hover .bmb-icon {
  background: var(--bmb-pink);
  transform: scale(1.1);
}


/* ==========================================================================
   12. NEWSLETTER SECTION
   ========================================================================== */

.bmb-newsletter {
  background-color: var(--bmb-gray-900);
  color: var(--bmb-white);
  text-align: center;
  padding: 64px 24px;
}

.bmb-newsletter h2 {
  color: var(--bmb-white);
}

.bmb-newsletter p {
  color: var(--bmb-gray-300);
}

.bmb-newsletter input[type="email"] {
  border: 2px solid transparent;
  border-radius: var(--bmb-radius);
  padding: 14px 20px;
  font-size: 1rem;
  font-family: var(--bmb-font);
  width: 100%;
  max-width: 360px;
  transition: border-color var(--bmb-transition-fast);
}

.bmb-newsletter input[type="email"]:focus {
  border-color: var(--bmb-teal);
  outline: none;
}


/* ==========================================================================
   13. FAQ ACCORDION (Spectra FAQ block)
   ========================================================================== */

.wp-block-uagb-faq .uagb-faq-child__outer-wrap {
  border: 1px solid var(--bmb-border) !important;
  border-radius: var(--bmb-radius-lg) !important;
  margin-bottom: 8px;
  overflow: hidden;
}

.wp-block-uagb-faq .uagb-faq-questions-button {
  font-family: var(--bmb-font);
  font-weight: 600;
  color: var(--bmb-heading);
  padding: 16px 20px;
}

.wp-block-uagb-faq .uagb-faq-questions-button:hover {
  color: var(--bmb-pink-dark);
}

.wp-block-uagb-faq .uagb-faq-content {
  font-family: var(--bmb-font);
  color: var(--bmb-text);
  padding: 0 20px 16px;
}

/* Active FAQ item */
.wp-block-uagb-faq .uagb-faq-child__outer-wrap.uagb-faq-item-active {
  border-color: var(--bmb-pink) !important;
  background: var(--bmb-pink-subtle);
}


/* ==========================================================================
   14. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
  /* Tighter card padding on mobile */
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.9rem;
    padding: 10px 12px 4px;
  }

  .woocommerce ul.products li.product .price {
    padding: 0 12px 10px;
    font-size: 0.95rem;
  }

  .woocommerce ul.products li.product .button {
    padding: 10px 12px;
    font-size: 0.8rem;
  }

  /* Stack newsletter form */
  .bmb-newsletter input[type="email"] {
    max-width: 100%;
  }

  /* Form fields full width */
  .wpcf7 input,
  .wpcf7 select,
  .wpcf7 textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
}


/* ==========================================================================
   15. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .woocommerce ul.products li.product:hover {
    transform: none;
  }

  .woocommerce ul.products li.product:hover a img {
    transform: none;
  }

  .bmb-feature-card:hover {
    transform: none;
  }
}


/* ==========================================================================
   16. PRINT
   ========================================================================== */

@media print {
  .bmb-linen,
  .bmb-linen-light {
    background-image: none !important;
    background-color: #fff !important;
  }
}