/*
Theme Name: The Ginger Brewers - Child Theme
Description: Custom child theme for The Ginger Brewers brewing education platform
Template: adestra
Version: 1.0.0
Text Domain: ginger-brewers-child
*/

/* Import parent theme styles */
@import url("../adestra/style.css");

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Open+Sans:wght@400;600&family=Pacifico&display=swap');

/* ===========================
   BRAND COLOR VARIABLES
   =========================== */
:root {
  /* Primary Brand Colors */
  --brew-amber: #D28A3E;
  --stout-brown: #4B3621;
  --creamy-foam: #F0EAD6;
  
  /* Secondary Accent Colors */
  --hoppy-green: #7A9C59;
  --zest-orange: #EAA655;
  
  /* Neutral & Utility Colors */
  --dark-grey: #333333;
  --light-grey: #CCCCCC;
  --pure-white: #FFFFFF;
  
  /* Font Variables */
  --heading-font: 'Montserrat', sans-serif;
  --body-font: 'Open Sans', sans-serif;
  --accent-font: 'Pacifico', cursive;
}

/* ===========================
   TYPOGRAPHY OVERRIDES
   =========================== */

/* Headings */
h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.widget-title,
.page-title,
.section-title {
  font-family: var(--heading-font);
  font-weight: 700;
  color: var(--stout-brown);
  line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; font-weight: 600; }
h5 { font-size: 1.25rem; font-weight: 600; }
h6 { font-size: 1.1rem; font-weight: 600; }

/* Body Text */
body,
p,
.entry-content,
.widget-content,
.comment-content,
input,
textarea,
select {
  font-family: var(--body-font);
  font-weight: 400;
  color: var(--dark-grey);
  line-height: 1.6;
}

/* Accent/Handwriting Font for Special Elements */
.tagline,
.signature,
.special-text,
.brewing-quote {
  font-family: var(--accent-font);
  color: var(--brew-amber);
}

/* ===========================
   BRAND COLOR IMPLEMENTATIONS
   =========================== */

/* Primary Brand Elements */
.site-header,
.main-navigation {
  background-color: var(--stout-brown);
}

.site-title a,
.main-navigation a {
  color: var(--creamy-foam);
}

/* Buttons and CTAs */
.btn,
.button,
.wp-block-button__link,
input[type="submit"],
button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.memberpress_register_buttons .mp-btn,
.learnpress-button {
  background-color: var(--brew-amber);
  color: var(--pure-white);
  border: 2px solid var(--brew-amber);
  font-family: var(--heading-font);
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 5px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.btn:hover,
.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button:hover {
  background-color: var(--stout-brown);
  border-color: var(--stout-brown);
  color: var(--pure-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(75, 54, 33, 0.3);
}

/* Secondary Buttons */
.btn-secondary,
.button-secondary {
  background-color: var(--hoppy-green);
  border-color: var(--hoppy-green);
}

.btn-secondary:hover,
.button-secondary:hover {
  background-color: var(--zest-orange);
  border-color: var(--zest-orange);
}

/* Links */
a {
  color: var(--brew-amber);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--stout-brown);
}

/* Backgrounds */
.hero-section,
.cta-section {
  background-color: var(--creamy-foam);
}

.section-alt {
  background-color: var(--light-grey);
}

/* ===========================
   GIFT PACKAGES STYLING
   =========================== */
.gift-packages,
.gift-packages-section,
.homepage-gifts-section {
  padding: 60px 0;
  background-color: var(--creamy-foam);
}

.gift-packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.gift-package-card {
  background: var(--pure-white);
  border: 2px solid var(--light-grey);
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}

.gift-package-card:hover {
  border-color: var(--brew-amber);
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(210, 138, 62, 0.2);
}

.gift-package-card .price {
  font-size: 2.5rem;
  color: var(--brew-amber);
  font-family: var(--heading-font);
  font-weight: 700;
  margin: 15px 0;
}

.gift-package-card .package-name {
  color: var(--stout-brown);
  font-family: var(--heading-font);
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.gift-package-card .package-content {
  flex-grow: 1;
  margin-bottom: 20px;
  color: var(--dark-grey);
  line-height: 1.6;
}

.gift-package-card .package-actions {
  margin-top: auto;
}

.gift-package-featured {
  border-color: var(--brew-amber);
  border-width: 3px;
  background: linear-gradient(135deg, var(--creamy-foam) 0%, var(--pure-white) 100%);
  position: relative;
}

.gift-package-featured::before {
  content: "Most Popular";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brew-amber);
  color: var(--pure-white);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}

/* ===========================
   SEASONAL BANNERS
   =========================== */
.seasonal-banner {
  background: linear-gradient(45deg, var(--brew-amber), var(--zest-orange));
  color: var(--pure-white);
  text-align: center;
  padding: 15px;
  font-family: var(--heading-font);
  font-weight: 600;
}

.seasonal-banner.fathers-day {
  background: linear-gradient(45deg, var(--stout-brown), var(--brew-amber));
}

.seasonal-banner.christmas {
  background: linear-gradient(45deg, var(--hoppy-green), var(--zest-orange));
}

/* ===========================
   MEMBER AREA STYLING
   =========================== */
.member-dashboard {
  background-color: var(--creamy-foam);
  padding: 40px;
  border-radius: 10px;
  margin: 20px 0;
}

.premium-tools-cta {
  background: linear-gradient(135deg, var(--brew-amber), var(--zest-orange));
  color: var(--pure-white);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  margin: 30px 0;
}

.premium-tools-cta h3 {
  color: var(--pure-white);
  margin-bottom: 15px;
}

.course-progress {
  background-color: var(--light-grey);
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.course-progress-bar {
  background: linear-gradient(90deg, var(--hoppy-green), var(--zest-orange));
  height: 100%;
  transition: width 0.5s ease;
}

/* ===========================
   MOBILE RESPONSIVENESS
   =========================== */
@media (max-width: 767px) {
  /* Mobile-first typography adjustments */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  
  /* Mobile navigation */
  .main-navigation {
    background-color: var(--stout-brown);
  }
  
  .mobile-menu-toggle {
    background-color: var(--brew-amber);
    color: var(--pure-white);
  }
  
  /* Mobile gift cards */
  .gift-package-card {
    margin-bottom: 20px;
    padding: 20px;
  }
  
  .gift-package-card .price {
    font-size: 2rem;
  }
  
  /* Touch-friendly buttons */
  .btn,
  .button {
    padding: 15px 25px;
    font-size: 1rem;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet styles */
  .gift-package-card {
    display: inline-block;
    width: 48%;
    margin: 1%;
  }
}

@media (min-width: 1025px) {
  /* Desktop styles */
  .gift-package-card {
    display: inline-block;
    width: 31%;
    margin: 1%;
  }
}

/* ===========================
   ACCESSIBILITY ENHANCEMENTS
   =========================== */
/* Focus states for better accessibility */
button:focus,
input:focus,
textarea:focus,
select:focus,
a:focus {
  outline: 2px solid var(--brew-amber);
  outline-offset: 2px;
}

/* High contrast text where needed */
.high-contrast {
  color: var(--stout-brown);
  background-color: var(--creamy-foam);
}

/* Screen reader text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ===========================
   PLUGIN COMPATIBILITY
   =========================== */

/* MemberPress Styling */
.mp_wrapper {
  font-family: var(--body-font);
}

.mp-form-row input {
  border: 2px solid var(--light-grey);
  border-radius: 5px;
  padding: 10px;
}

.mp-form-row input:focus {
  border-color: var(--brew-amber);
}

/* LearnDash Styling */
.learndash-wrapper .ld-item-list-item {
  border-left: 4px solid var(--brew-amber);
}

.learndash-wrapper .ld-progress-bar {
  background-color: var(--light-grey);
}

.learndash-wrapper .ld-progress-bar-percentage {
  background: linear-gradient(90deg, var(--hoppy-green), var(--brew-amber));
}

/* WPForms Styling */
.wpforms-container {
  font-family: var(--body-font);
}

.wpforms-field input,
.wpforms-field textarea {
  border: 2px solid var(--light-grey);
  border-radius: 5px;
}

.wpforms-field input:focus,
.wpforms-field textarea:focus {
  border-color: var(--brew-amber);
}

/* ===========================
   CUSTOM ANIMATIONS
   =========================== */
@keyframes brewingBubbles {
  0% { transform: translateY(0px) scale(1); opacity: 0.7; }
  50% { transform: translateY(-20px) scale(1.1); opacity: 1; }
  100% { transform: translateY(-40px) scale(0.9); opacity: 0; }
}

.brewing-animation {
  animation: brewingBubbles 2s ease-in-out infinite;
}

/* Hover effects for cards */
.card-hover-effect {
  transition: all 0.3s ease;
}

.card-hover-effect:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(75, 54, 33, 0.15);
}






/* ===========================
   VISUAL IMPROVEMENTS BASED ON SCREENSHOTS
   Add these to the bottom of your style.css
   =========================== */

/* Fix sidebar gift CTA box */
.widget.gift-cta,
#text-2 {
  background: linear-gradient(135deg, var(--brew-amber), var(--zest-orange));
  padding: 25px;
  border-radius: 8px;
  color: var(--pure-white);
  text-align: center;
  margin-bottom: 30px;
}

.widget.gift-cta h3,
.widget.gift-cta .widget-title {
  color: var(--pure-white) !important;
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.widget.gift-cta p {
  color: var(--pure-white);
  margin-bottom: 15px;
}

/* Fix value proposition icons */
.value-props-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  margin-top: 40px;
}

.value-prop-card {
  text-align: center;
  padding: 30px 20px;
  background: var(--pure-white);
  border-radius: 10px;
  box-shadow: 0 2px 15px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

.value-prop-card:hover {
  transform: translateY(-5px);
}

.prop-icon {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  background: var(--creamy-foam);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
}

.prop-icon img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.value-prop-card h3 {
  color: var(--stout-brown);
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.value-prop-card p {
  color: var(--dark-grey);
  line-height: 1.7;
}

/* Improve hero section text contrast */
.hero-section {
  background: linear-gradient(135deg, var(--creamy-foam) 0%, rgba(240, 234, 214, 0.7) 100%);
  padding: 80px 0;
  position: relative;
}

.hero-title {
  font-size: 3rem;
  color: var(--stout-brown);
  margin-bottom: 20px;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 1.2rem;
  color: var(--dark-grey);
  margin-bottom: 30px;
  line-height: 1.6;
  max-width: 700px;
}

.hero-stats {
  display: flex;
  gap: 40px;
  margin: 30px 0;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--brew-amber);
  font-family: var(--heading-font);
}


/* Improve button styling */
.hero-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.btn-large {
  padding: 16px 32px;
  font-size: 1.1rem;
}

/* Fix "Watch Our Story" button */
.hero-video-overlay {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.play-button {
  background: rgba(210, 138, 62, 0.95);
  border: 3px solid var(--pure-white);
  border-radius: 50px;
  padding: 12px 25px;
  color: var(--pure-white);
  font-family: var(--heading-font);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.play-button:hover {
  background: var(--brew-amber);
  transform: scale(1.05);
}

.play-icon {
  font-size: 1.2rem;
}

/* Fix section spacing and headings */
.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-header h2 {
  font-size: 2.5rem;
  color: var(--stout-brown);
  margin-bottom: 15px;
}

.section-header p {
  font-size: 1.1rem;
  color: var(--dark-grey);
  max-width: 700px;
  margin: 0 auto;
}

/* Improve gift section styling */
.homepage-gifts-section {
  background: linear-gradient(180deg, var(--pure-white) 0%, var(--creamy-foam) 100%);
}

.gifts-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 50px;
  align-items: center;
}

.section-badge {
  display: inline-block;
  background: var(--hoppy-green);
  color: var(--pure-white);
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.gifts-benefits {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.gifts-benefits li {
  padding: 8px 0;
  font-size: 1.05rem;
  color: var(--dark-grey);
}

.popular-badge {
  display: inline-block;
  margin-left: 10px;
  color: var(--zest-orange);
  font-weight: 600;
}

/* Fix course cards */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.course-card {
  background: var(--pure-white);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 15px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.course-image {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: var(--creamy-foam);
}

.course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(75, 54, 33, 0.9);
  color: var(--pure-white);
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
}

.course-content {
  padding: 25px;
}

.course-title {
  font-size: 1.4rem;
  color: var(--stout-brown);
  margin-bottom: 10px;
}

.course-excerpt {
  color: var(--dark-grey);
  line-height: 1.6;
  margin-bottom: 15px;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: var(--dark-grey);
}

/* Fix testimonials */
.testimonials-slider {
  background: var(--pure-white);
  border-radius: 10px;
  padding: 40px;
  box-shadow: 0 2px 15px rgba(0,0,0,0.08);
  margin-bottom: 30px;
}

.testimonial-slide {
  text-align: center;
}

.rating {
  margin-bottom: 20px;
  font-size: 1.5rem;
  color: var(--zest-orange);
}

.rating .star.filled {
  color: var(--zest-orange);
}

.rating .star {
  color: var(--light-grey);
}

blockquote {
  font-style: italic;
  font-size: 1.15rem;
  color: var(--dark-grey);
  line-height: 1.7;
  margin: 20px 0;
  quotes: """ """ "'" "'";
}

blockquote::before {
  content: open-quote;
  font-size: 3rem;
  color: var(--brew-amber);
  margin-right: 10px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 25px;
}

.author-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--brew-amber);
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-name {
  display: block;
  font-weight: 600;
  color: var(--stout-brown);
  font-size: 1.05rem;
}

.author-location {
  display: block;
  font-size: 0.9rem;
  color: var(--dark-grey);
}

/* Fix pricing cards */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.pricing-card {
  background: var(--pure-white);
  border: 2px solid var(--light-grey);
  border-radius: 10px;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.3s ease;
}

.pricing-card:hover {
  border-color: var(--brew-amber);
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(210, 138, 62, 0.15);
}

.featured-card {
  border-color: var(--brew-amber);
  border-width: 3px;
  position: relative;
  background: linear-gradient(135deg, var(--creamy-foam) 0%, var(--pure-white) 100%);
}

.popular-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brew-amber);
  color: var(--pure-white);
  padding: 6px 20px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
}

.card-header h3 {
  font-size: 1.8rem;
  color: var(--stout-brown);
  margin-bottom: 15px;
}

.price {
  font-size: 3rem;
  color: var(--brew-amber);
  font-family: var(--heading-font);
  font-weight: 700;
  margin: 20px 0;
}

.currency {
  font-size: 1.5rem;
  vertical-align: super;
}

.period {
  font-size: 1.2rem;
  color: var(--dark-grey);
  font-weight: 400;
}

.savings {
  background: var(--hoppy-green);
  color: var(--pure-white);
  display: inline-block;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.9rem;
  margin-top: 10px;
}

.card-features ul {
  list-style: none;
  padding: 0;
  margin: 30px 0;
  text-align: left;
}

.card-features li {
  padding: 10px 0;
  color: var(--dark-grey);
  font-size: 1.05rem;
}

.trial-note {
  font-size: 0.9rem;
  color: var(--dark-grey);
  margin-top: 10px;
}

.pricing-guarantee {
  text-align: center;
  margin-top: 40px;
  padding: 20px;
  background: var(--creamy-foam);
  border-radius: 8px;
}

/* Fix email capture section */
.email-capture-section {
  background: linear-gradient(135deg, var(--brew-amber), var(--zest-orange));
  padding: 60px 0;
  color: var(--pure-white);
}

.email-capture-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.email-capture-content h2 {
  color: var(--pure-white);
  margin-bottom: 15px;
}

.email-capture-form {
  background: var(--pure-white);
  padding: 30px;
  border-radius: 10px;
  margin-top: 30px;
}

.email-capture-form h3 {
  color: var(--stout-brown);
}

.form-group {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.form-group input[type="email"] {
  flex: 1;
  padding: 12px 20px;
  border: 2px solid var(--light-grey);
  border-radius: 5px;
  font-size: 1rem;
}

.form-group input[type="email"]:focus {
  border-color: var(--brew-amber);
  outline: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .gifts-content {
    grid-template-columns: 1fr;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-stats {
    justify-content: space-between;
  }
  
  .pricing-cards {
    grid-template-columns: 1fr;
  }
  
  .form-group {
    flex-direction: column;
  }
  
  .value-props-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   HEADER & NAVIGATION FIXES
   Add these to your style.css
   =========================== */

/* Fix header background and navigation */
.site-header,
.main-navigation,
header.site-header {
  background-color: var(--stout-brown) !important;
}


/* Custom Desktop Header Adjustment - Targeting the specific row for spacing fix */
.ast-builder-grid-row-layout-default.ast-builder-grid-row-no-center {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Optional secondary check: Target the main bar wrapping the row */
.ast-primary-header-bar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* Fix navigation menu text colors */
.main-navigation a,
.main-navigation .menu-item a,
.site-header .main-navigation a,
nav.main-navigation a {
  color: var(--creamy-foam) !important;
  font-weight: 600;
  transition: color 0.3s ease;
}

.main-navigation a:hover,
.main-navigation .menu-item a:hover {
  color: var(--brew-amber) !important;
}

/* Active/current menu items */
.main-navigation .current-menu-item a,
.main-navigation .current_page_item a {
  color: var(--brew-amber) !important;
}

/* Fix site title/logo area */
.site-branding,
.site-title {
  background-color: transparent;
}

.site-title a {
  color: var(--creamy-foam) !important;
}

/* Mobile menu toggle button */
/* FIX: .ast-mobile-menu-trigger-fill is the SVG fill colour of the burger lines.
   Setting it to white makes the lines invisible against the amber background.
   We target the wrapper for the background and the SVG paths for the icon colour. */
.menu-toggle,
.ast-mobile-menu-trigger-wrap,
.ast-mobile-menu-buttons {
  background-color: var(--brew-amber) !important;
  border: none;
}

/* The three burger lines are SVG paths — set fill to white so they're visible */
.ast-mobile-menu-trigger-fill path,
.ast-mobile-menu-trigger-fill rect,
.ast-mobile-menu-trigger-fill span {
  fill: var(--pure-white) !important;
  background-color: var(--pure-white) !important;
}

/* Astra renders the icon inside a button — ensure the SVG itself is visible */
button.ast-mobile-menu-trigger-fill svg,
.ast-mobile-menu-buttons svg {
  fill: var(--pure-white) !important;
  color: var(--pure-white) !important;
  width: 24px;
  height: 24px;
}

/* Mobile menu */

@media (max-width: 921px) {
  .main-navigation,
  .main-header-menu {
    background-color: var(--stout-brown) !important;
}
  
  
  .main-navigation .menu-item a {
    color: var(--creamy-foam) !important;
    padding: 15px 20px;
  }
}




/* =================================
   FINAL MOBILE MENU COLOR FIX
   Using Specific IDs and Classes
   ================================= */

/* Target the mobile screen size */
@media (max-width: 1024px) {

    /* 1. FORCE MOBILE MENU CONTAINER BACKGROUND */
    /* Targeting the specific ID for maximum specificity */
    #ast-hf-mobile-menu {
        /* Set a clean, readable background color for the menu overlay */
        background-color: var(--pure-white) !important; /* #FFFFFF */
        /* Ensure the container takes up the full viewport height if needed */
        min-height: 100vh;
        padding-top: 15px !important; /* Add some padding at the top */
    }

    /* 2. FORCE MOBILE MENU LINKS (TEXT COLOR) */
    /* Target the specific ID and the highly specific link class */
    #ast-hf-mobile-menu .menu-link {
        color: var(--stout-brown) !important; /* FORCE DARK TEXT: #4B3621 */
        /* Ensure the link block is full width and has tap-friendly padding */
        display: block !important;
        width: 100% !important;
        padding: 15px 30px !important; 
        border-bottom: 1px solid var(--creamy-foam) !important; /* Optional separator for clarity */
        text-align: left;
    }
    
    /* 3. FORCE HOVER/ACTIVE/FOCUS STATES for Links */
    #ast-hf-mobile-menu .menu-link:hover,
    #ast-hf-mobile-menu .menu-link:focus,
    #ast-hf-mobile-menu .current-menu-item .menu-link {
        color: var(--brew-amber) !important; /* FORCE ACCENT COLOR: #D28A3E */
        background-color: var(--creamy-foam) !important; /* FORCE LIGHT BACKGROUND: #F0EAD6 */
    }
}


/* ===========================
   OFF-CANVAS MENU FIX
   (To prevent items from stretching full width)
   =========================== */

/* Target the list items inside the mobile/off-canvas menu */
.ast-builder-menu-mobile .main-navigation .menu-item {
    /* Ensure the list item doesn't stretch or use flex properties */
    display: block; 
    /* Remove any full-width padding that might be stretching the item */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Target the actual menu links inside the list items to center the text */
.ast-builder-menu-mobile .main-navigation a.menu-link {
    /* Make the link take the full width of the list item */
    display: block; 
    /* Center the text within the link */
    text-align: center;
    /* You might want to remove any extra padding from the links */
    /* padding-left: 10px; 
    padding-right: 10px; */ 
}

/* Optional: Center the entire list if needed, depending on the structure */
.ast-builder-menu-mobile .main-navigation ul.menu {
    text-align: center;
}

/* =================================
   MOBILE MENU VERTICAL STRETCH FIX
   Reduces vertical space and ensures scrolling
   ================================= */
@media (max-width: 1024px) {
    /* 1. Reduce vertical padding on the menu links for a more compact list. */
    #ast-hf-mobile-menu .menu-link {
        padding: 10px 30px !important; /* Reduced top/bottom padding from 15px to 10px */
        line-height: 1.4 !important; /* Ensure line height is reasonable */
    }

    /* 2. Remove any extra margin on the list items. */
    #ast-hf-mobile-menu .menu-item {
        margin: 0 !important;
    }

    /* 3. Set a max-height and enable scrolling on the main menu UL container */
    /* to prevent the menu from being stretched off-screen. */
    #ast-hf-mobile-menu .menu {
        /* Calculates 100% viewport height minus an assumed header height (80px) */
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important; /* Enable vertical scrolling if items overflow */
        width: 100% !important;
    }
}




/* ===========================
   FOOTER FIXES
   =========================== */

/* Hide or replace "Powered by Astra" text */
.site-footer .ast-footer-copyright,
.ast-small-footer-section,
footer .copyright-text {
  font-size: 0 !important; /* Hide original text */
}

/* Add custom footer text */
.site-footer .ast-footer-copyright::after,
.ast-small-footer-section::after {
  content: "Copyright © 2025 | The Ginger Brewers - Brewing Experts";
  font-size: 14px;
  color: var(--dark-grey);
  display: block;
}

/* Alternative: If you want to completely replace footer */
.site-footer {
  background-color: var(--stout-brown);
  color: var(--creamy-foam);
  padding: 40px 0 20px;
}

.site-footer a {
  color: var(--brew-amber);
}

.site-footer a:hover {
  color: var(--zest-orange);
}

/* ===========================
   ADDITIONAL HEADER IMPROVEMENTS
   =========================== */

/* Make header sticky (optional) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Improve header spacing */
.site-header .main-header-bar {
  padding: 15px 0;
}

/* Logo adjustments */
.site-logo-img img,
.custom-logo {
  max-height: 80px;
  width: auto;
}

/* Primary menu styling */
.main-navigation .menu {
  display: flex;
  gap: 10px;
}

.main-navigation .menu-item {
  margin: 0;
}

/* Dropdown menus */
.main-navigation .sub-menu {
  background-color: var(--stout-brown);
  border-top: 3px solid var(--brew-amber);
}

.main-navigation .sub-menu a {
  padding: 12px 20px;
}

.main-navigation .sub-menu a:hover {
  background-color: rgba(210, 138, 62, 0.1);
}

/* ===========================
   GIFT CTA SIDEBAR BOX FIX
   =========================== */

/* The orange sidebar box */
.textwidget p {
  color: inherit;
  line-height: 1.6;
}

/* Ensure text widget in sidebar has proper styling */
.sidebar .widget {
  margin-bottom: 30px;
}

/* Style the gift CTA widget specifically */
aside#text-2,
.widget_text {
  background: linear-gradient(135deg, var(--brew-amber), var(--zest-orange));
  padding: 25px;
  border-radius: 8px;
  color: var(--pure-white);
}

aside#text-2 p,
.widget_text p {
  color: var(--pure-white) !important;
  margin-bottom: 15px;
}

aside#text-2 h3,
aside#text-2 .widget-title,
.widget_text .widget-title {
  color: var(--pure-white) !important;
  text-align: center;
  margin-bottom: 15px;
}

/* ===========================
   BUTTON CONSISTENCY
   =========================== */

/* Ensure all buttons follow brand colors */
.btn,
.button,
.wp-block-button__link,
input[type="submit"],
button[type="submit"],
.ast-button,
.button {
  background-color: var(--brew-amber) !important;
  color: var(--pure-white) !important;
  border: 2px solid var(--brew-amber) !important;
  font-family: var(--heading-font);
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 5px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.btn:hover,
.button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--stout-brown) !important;
  border-color: var(--stout-brown) !important;
  color: var(--pure-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(75, 54, 33, 0.3);
}

/* Secondary/green buttons */
.btn-secondary,
.button-secondary {
  background-color: var(--hoppy-green) !important;
  border-color: var(--hoppy-green) !important;
}

.btn-secondary:hover,
.button-secondary:hover {
  background-color: var(--zest-orange) !important;
  border-color: var(--zest-orange) !important;
}

/* ===========================
   TESTIMONIAL QUOTE STYLING
   =========================== */

/* Fix the testimonial quote marks */
.testimonials-slider blockquote,
blockquote {
  position: relative;
  padding: 20px 20px 20px 60px;
  border-left: 4px solid var(--brew-amber);
  background: rgba(240, 234, 214, 0.3);
  border-radius: 8px;
}

blockquote::before {
  content: '"';
  position: absolute;
  left: 15px;
  top: 10px;
  font-size: 4rem;
  color: var(--brew-amber);
  opacity: 0.5;
  font-family: Georgia, serif;
  line-height: 1;
}

/* ===========================
   SPACING & LAYOUT IMPROVEMENTS
   =========================== */

/* Add consistent section spacing */
section {
  padding: 60px 0;
}

/* Container max-width */
.container,
.ast-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Improve section backgrounds */
section:nth-child(even) {
  background-color: var(--creamy-foam);
}

section:nth-child(odd) {
  background-color: var(--pure-white);
}

/* ===========================
   RESPONSIVE IMPROVEMENTS
   =========================== */

@media (max-width: 768px) {
  /* Mobile header */
  .site-header .main-header-bar {
    padding: 10px 0;
  }
  
  .site-logo-img img,
  .custom-logo {
    max-height: 60px;
  }
  
  /* Mobile sections */
  section {
    padding: 40px 0;
  }
  
  /* Mobile footer */
  .site-footer {
    text-align: center;
    padding: 30px 0 15px;
  }
}





/* ===========================
   ABOUT PAGE SPECIFIC FIXES
   Add these to your style.css
   =========================== */

/* Fix text color contrast issues on About page */
.page-template-default .entry-content,
.about-page .entry-content {
  color: var(--dark-grey);
}

/* Fix headings on beige/cream backgrounds */
.page-template-default h1,
.page-template-default h2,
.page-template-default h3,
.about-page h1,
.about-page h2,
.about-page h3 {
  color: var(--stout-brown) !important;
}

/* Fix text on colored blocks */
.has-background p,
.has-background h1,
.has-background h2,
.has-background h3,
.wp-block-cover__inner-container p,
.wp-block-cover__inner-container h1,
.wp-block-cover__inner-container h2 {
  color: var(--pure-white) !important;
}

/* Remove or reduce dark overlay on cover images */
.wp-block-cover::before,
.wp-block-cover-image::before {
  background-color: rgba(0, 0, 0, 0.3) !important; /* Reduced from default 0.5 */
}

/* Alternative: Remove overlay completely to see Dan clearly */
.wp-block-cover.has-custom-content-position::before,
.about-hero-section .wp-block-cover::before {
  background-color: rgba(0, 0, 0, 0) !important; /* No overlay */
}

/* If text needs background for readability without overlay */
.wp-block-cover__inner-container {
  background: rgba(75, 54, 33, 0.8);
  padding: 30px;
  border-radius: 10px;
  backdrop-filter: blur(5px);
}

/* Fix "About Us" section background and text */
.about-section,
.wp-block-group.has-background {
  padding: 40px 30px;
  border-radius: 10px;
}

/* Ensure proper contrast on cream backgrounds */
.has-creamy-foam-background-color,
.has-pale-background {
  background-color: var(--creamy-foam) !important;
}

.has-creamy-foam-background-color p,
.has-creamy-foam-background-color h2,
.has-creamy-foam-background-color h3 {
  color: var(--stout-brown) !important;
}

/* Fix brown background sections */
.has-stout-brown-background-color,
.has-dark-background {
  background-color: var(--stout-brown) !important;
}

.has-stout-brown-background-color p,
.has-stout-brown-background-color h2,
.has-stout-brown-background-color h3 {
  color: var(--creamy-foam) !important;
}

/* FAQ Section styling */
.faq-section,
.frequently-asked-questions {
  background-color: var(--stout-brown);
  color: var(--creamy-foam);
  padding: 60px 30px;
}

.faq-section h2 {
  color: var(--brew-amber) !important;
  text-align: center;
  margin-bottom: 40px;
}

.faq-section h3,
.faq-section h4 {
  color: var(--creamy-foam) !important;
  margin-top: 25px;
  margin-bottom: 10px;
}

.faq-section p {
  color: var(--creamy-foam);
  line-height: 1.8;
}



/* =======================================
   UAGB CTA FIXES (About Page Bottom)
   Using MAX Specificity
   ======================================= */

/* 1. Fix the Title Text Color */
/* Target the title element h3 with the specific class */
.uagb-cta__wrap h3.uagb-cta__title {
    /* Set a dark, readable color using your brand variables */
    color: var(--stout-brown) !important; /* #4B3621 */
    /* If the title has a background, clear it */
    background-color: transparent !important;
}

/* 2. Fix the Description Text Color (uagb-cta__desc) */
/* Target the description text to ensure it's also readable */
.uagb-cta__wrap p.uagb-cta__desc {
    color: var(--dark-grey) !important; /* #333333 */
}


/* 3. Hide the Random Horizontal Line */
/* Target the CTA block and its children to remove all borders. 
   If the line is a shadow, this will also help. 
   We target the two main wrapping elements from your inspect code.
*/
.uagb-cta__wrap {
    border: none !important;
    outline: none !important;
    box-shadow: none !important; /* Check for shadow used as a line */
}

/* Target any HR or divider element that might be hidden inside the CTA */
.uagb-cta__wrap hr,
.uagb-cta__wrap div[class*="separator"], /* Generic separator class check */
.uagb-cta__wrap div[data-type="line"] {
    display: none !important;
    height: 0 !important;
    border: none !important;
}




/* ===========================
   FOOTER COPYRIGHT DUPLICATE FIX
   =========================== */

/* Hide duplicate copyright text */
.site-footer .ast-footer-copyright {
  display: flex;
  flex-direction: column;
}

/* Hide any duplicate "Powered by" text */
.site-footer a[href*="wpastra.com"],
.site-footer a[href*="wordpress.org"] {
  display: none;
}

/* Style the main copyright line */
.ast-footer-copyright > * {
  text-align: center;
  color: var(--creamy-foam);
}

/* Remove extra spacing from duplicate footers */
.site-footer .ast-small-footer > .ast-container {
  padding: 20px 0;
}

/* If there are multiple footer sections, combine them */
.site-footer .ast-small-footer-section-1,
.site-footer .ast-small-footer-section-2 {
  text-align: center;
  width: 100%;
}

/* Hide empty footer sections */
.ast-small-footer-section:empty {
  display: none;
}

/* ===========================
   HERO/BANNER IMAGE IMPROVEMENTS
   =========================== */

/* Make hero images more visible */
.about-hero,
.page-hero,
.wp-block-cover {
  min-height: 400px;
  position: relative;
}










/* Improve text readability on hero images */
.wp-block-cover h1,
.wp-block-cover h2 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  color: var(--pure-white) !important;
}

/* Alternative: Use gradient overlay instead of solid */
.wp-block-cover.use-gradient-overlay::before {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(75, 54, 33, 0.7) 100%
  ) !important;
}

/* ===========================
   CALL-TO-ACTION SECTIONS
   =========================== */

/* Orange CTA blocks */
.cta-block,
.wp-block-group.has-brew-amber-background-color {
  background: linear-gradient(135deg, var(--brew-amber), var(--zest-orange)) !important;
  color: var(--pure-white) !important;
  padding: 40px;
  border-radius: 10px;
  text-align: center;
}

.cta-block h2,
.cta-block h3,
.wp-block-group.has-brew-amber-background-color h2 {
  color: var(--pure-white) !important;
  margin-bottom: 20px;
}

.cta-block p {
  color: var(--pure-white);
  font-size: 1.1rem;
  margin-bottom: 20px;
}

/* ===========================
   MISSION/VALUES SECTIONS
   =========================== */

/* Two-column layout sections */
.about-content-grid,
.two-column-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 40px 0;
}

@media (max-width: 768px) {
  .about-content-grid,
  .two-column-section {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* Section headings */
.section-heading {
  font-size: 2rem;
  color: var(--stout-brown);
  margin-bottom: 20px;
  border-bottom: 3px solid var(--brew-amber);
  padding-bottom: 10px;
}

/* List styling in content */
.about-page ul,
.entry-content ul {
  list-style: none;
  padding-left: 0;
}

.about-page ul li,
.entry-content ul li {
  padding: 10px 0 10px 30px;
  position: relative;
  color: var(--dark-grey);
}

.about-page ul li::before,
.entry-content ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--hoppy-green);
  font-weight: bold;
  font-size: 1.2rem;
}

/* ===========================
   WORDPRESS BLOCK FIXES
   =========================== */

/* Fix Gutenberg blocks color inheritance */
.wp-block-group {
  margin-bottom: 30px;
}

/* Columns block */
.wp-block-columns {
  margin-bottom: 40px;
}

.wp-block-column {
  padding: 20px;
}

/* Button blocks */
.wp-block-button__link {
  background-color: var(--brew-amber) !important;
  color: var(--pure-white) !important;
}

/* Quote blocks */
.wp-block-quote {
  border-left: 4px solid var(--brew-amber);
  padding-left: 20px;
  font-style: italic;
  color: var(--dark-grey);
}

/* ===========================
   RESPONSIVE ADJUSTMENTS
   =========================== */

@media (max-width: 768px) {
  /* Reduce padding on mobile */
  .about-section,
  .wp-block-group.has-background {
    padding: 30px 20px;
  }
  
  /* Stack hero content */
  .wp-block-cover__inner-container {
    padding: 20px;
  }
  
  /* Smaller hero height on mobile */
  .about-hero,
  .wp-block-cover {
    min-height: 300px;
  }
  
  /* Footer on mobile */
  .site-footer {
    padding: 30px 20px;
  }
}











/* ===========================
   FULL-WIDTH IMAGE-HEAVY BREWERY DESIGN
   FINAL VERSION - With all fixes applied
   =========================== */

/* Remove default margins/padding */
.home .site-content,
.home .ast-container {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

/* Full-Width Hero with Large Background Image */
/*
.hero-section {
  position: relative;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
*/

/* Full-Width Hero with Large Background Image */
.hero-section {
  position: relative;
  min-height: 100vh;
  height: auto;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 20px 80px;
  overflow: visible;
}



.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(75, 54, 33, 0.85) 0%,
    rgba(75, 54, 33, 0.6) 50%,
    rgba(210, 138, 62, 0.4) 100%
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 1000px;
  padding: 0 40px;
  color: var(--pure-white);
}

.hero-title {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 900;
  color: var(--pure-white);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 30px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  line-height: 1;
}

.hero-subtitle {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  color: var(--creamy-foam);
  margin-bottom: 50px;
  font-weight: 400;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-large {
  padding: 20px 50px;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

.btn-primary.btn-large {
  background: var(--brew-amber);
  color: var(--pure-white);
  box-shadow: 0 4px 20px rgba(210, 138, 62, 0.4);
}

.btn-primary.btn-large:hover {
  background: var(--zest-orange);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(210, 138, 62, 0.6);
}

.btn-secondary.btn-large {
  background: transparent;
  border: 3px solid var(--pure-white);
  color: var(--pure-white);
}

.btn-secondary.btn-large:hover {
  background: var(--pure-white);
  color: var(--stout-brown);
}

/* Scroll Down Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  animation: bounce 2s infinite;
}

.scroll-indicator::before {
  content: '↓';
  font-size: 2rem;
  color: var(--pure-white);
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-20px); }
  60% { transform: translateX(-50%) translateY(-10px); }
}

/* ===========================
   STATISTICS BAR - FIXED ALIGNMENT & TEXT COLOR
   =========================== */

.stats-bar {
  background: var(--stout-brown);
  padding: 60px 0;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1400px;
  margin: 0 auto;
  gap: 60px;
  padding: 0 40px;
}

.stat-box {
  text-align: center;
  padding: 20px;
}

.stat-number {
  font-size: 4.5rem;
  font-weight: 900;
  color: var(--brew-amber);
  display: block;
  margin-bottom: 15px;
  line-height: 1;
}

.stat-label {
  font-size: 1.1rem;
  color: var(--hoppy-green);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  display: block;
  line-height: 1.4;
}

/* ===========================
   IMAGE + TEXT SPLIT SECTIONS
   =========================== */

.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}

.split-section-reverse {
  grid-template-columns: 1fr 1fr;
}

.split-image {
  background-size: cover;
  background-position: center;
  min-height: 600px;
}

.split-content {
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--pure-white);
}

.split-section-reverse .split-content {
  order: -1;
}

.split-content h2 {
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 800;
  color: var(--stout-brown);
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.split-content p {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--dark-grey);
  margin-bottom: 20px;
}

.split-content ul {
  list-style: none;
  padding: 0;
  margin: 30px 0;
}

.split-content li {
  font-size: 1.15rem;
  padding: 15px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--dark-grey);
  display: flex;
  align-items: center;
  gap: 15px;
}

.split-content li::before {
  content: '✓';
  color: var(--brew-amber);
  font-size: 1.5rem;
  font-weight: bold;
  flex-shrink: 0;
}

/* ===========================
   GIFT SECTION - FIXED (DARK BROWN BACKGROUND)
   =========================== */

.gift-showcase-section {
  padding: 100px 0;
  background: linear-gradient(135deg, #4B3621 0%, #5D4731 100%);
  position: relative;
  overflow: hidden;
}

.gift-showcase-section::before {
  content: '';
  position: absolute;
  font-size: 20rem;
  opacity: 0.05;
  top: -50px;
  right: -50px;
  transform: rotate(15deg);
}

.gift-showcase-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;
}

.section-badge {
  display: inline-block;
  background: var(--brew-amber);
  color: var(--pure-white);
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.gift-showcase-content h2 {
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 900;
  color: var(--pure-white);
  margin-bottom: 30px;
  text-transform: uppercase;
  line-height: 1;
}

.gift-showcase-content p {
  font-size: 1.3rem;
  color: var(--creamy-foam);
  line-height: 1.8;
  margin-bottom: 25px;
  max-width: 800px;
}

.gift-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 40px 0;
  max-width: 900px;
}

.gift-feature-box {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 30px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  transition: all 0.3s ease;
}

.gift-feature-box:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--brew-amber);
  transform: translateY(-5px);
}

.gift-feature-box h4 {
  color: var(--pure-white);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.gift-feature-box p {
  color: var(--creamy-foam);
  font-size: 1rem;
  margin: 0;
  line-height: 1.6;
}

/* ===========================
   FULL-WIDTH IMAGE PARALLAX SECTIONS
   =========================== */

.parallax-section {
  position: relative;
  height: 500px;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.parallax-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(75, 54, 33, 0.7);
}

.parallax-content {
  position: relative;
  z-index: 10;
  color: var(--pure-white);
  padding: 0 40px;
  max-width: 900px;
}

.parallax-content h2 {
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 900;
  color: var(--pure-white);
  margin-bottom: 30px;
  text-transform: uppercase;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.parallax-content p {
  font-size: 1.5rem;
  color: var(--creamy-foam);
  margin-bottom: 40px;
}

/* ===========================
   COURSES GRID - IMAGE-HEAVY
   =========================== */

.courses-section {
  padding: 100px 0;
  background: var(--creamy-foam);
}

.section-title {
  text-align: center;
  margin-bottom: 80px;
}

.section-title h2 {
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 900;
  color: var(--stout-brown);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.section-title p {
  font-size: 1.3rem;
  color: var(--dark-grey);
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.course-card {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  transition: all 0.4s ease;
  background: var(--pure-white);
}

.course-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.course-image {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.course-card:hover .course-image img {
  transform: scale(1.1);
}

.course-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
}

.course-content {
  padding: 30px;
}

.course-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--stout-brown);
  margin-bottom: 15px;
  text-transform: uppercase;
}

.course-excerpt {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--dark-grey);
  margin-bottom: 20px;
}

/* ===========================
   TESTIMONIALS - FULL WIDTH DARK
   =========================== */

.testimonials-section {
  background: var(--stout-brown);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.testimonials-section::before {
  content: '"';
  position: absolute;
  font-size: 30rem;
  color: rgba(255, 255, 255, 0.03);
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, serif;
}

.testimonials-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 10;
}

.testimonial-slide {
  text-align: center;
  color: var(--pure-white);
}

.testimonial-content blockquote {
  font-size: 1.8rem;
  font-style: italic;
  line-height: 1.8;
  color: var(--creamy-foam);
  margin: 40px 0;
  font-weight: 300;
}

.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid var(--brew-amber);
  overflow: hidden;
}

.author-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--brew-amber);
  display: block;
}

.author-location {
  font-size: 1rem;
  color: var(--creamy-foam);
  display: block;
}

/* ===========================
   PRICING - SIDE BY SIDE FULL
   =========================== */

.pricing-section {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.pricing-card {
  padding: 100px 60px;
  text-align: center;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.pricing-card:first-child {
  background: var(--creamy-foam);
}

.pricing-card:last-child {
  background: var(--stout-brown);
  color: var(--pure-white);
}

.pricing-card h3 {
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  letter-spacing: 2px;
}

.pricing-card:last-child h3 {
  color: var(--brew-amber);
}

.price {
  font-size: 5rem;
  font-weight: 900;
  color: var(--brew-amber);
  margin: 30px 0;
}

.pricing-card:last-child .price {
  color: var(--zest-orange);
}

.card-features {
  margin: 40px 0;
}

.card-features ul {
  list-style: none;
  padding: 0;
}

.card-features li {
  padding: 15px 0;
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.pricing-card:last-child .card-features li {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  color: var(--creamy-foam);
}

.popular-badge {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--brew-amber), var(--zest-orange));
  color: var(--pure-white);
  padding: 10px 30px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 8px 24px rgba(210, 138, 62, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 10;
}

.savings {
  background: var(--hoppy-green);
  color: var(--pure-white);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 700;
  display: inline-block;
  margin-top: 15px;
}

/* ===========================
   EMAIL CAPTURE - FIXED ALIGNMENT
   =========================== */

.email-section {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 120px 0;
  position: relative;
}

.email-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(75, 54, 33, 0.9);
}

.email-content {
  position: relative;
  z-index: 10;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 0 40px;
}

.email-content h2 {
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 900;
  color: var(--pure-white);
  margin-bottom: 30px;
  text-transform: uppercase;
}

.email-content p {
  font-size: 1.5rem;
  color: var(--creamy-foam);
  margin-bottom: 50px;
  line-height: 1.6;
}

.email-form {
  display: flex;
  gap: 15px;
  max-width: 700px;
  margin: 0 auto;
  align-items: stretch;
}

.email-form input {
  flex: 1;
  padding: 20px 30px;
  font-size: 1.1rem;
  border: 3px solid var(--brew-amber);
  background: var(--pure-white);
  border-radius: 0;
  font-family: var(--body-font);
}

.email-form input:focus {
  outline: none;
  border-color: var(--zest-orange);
}

.email-form button {
  padding: 20px 50px;
  background: var(--brew-amber);
  color: var(--pure-white);
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--heading-font);
  white-space: nowrap;
}

.email-form button:hover {
  background: var(--zest-orange);
  transform: translateY(-2px);
}

/* ===========================
   RESPONSIVE DESIGN
   =========================== */

@media (max-width: 1024px) {
  .split-section,
  .split-section-reverse {
    grid-template-columns: 1fr;
  }
  
  .split-section-reverse .split-content {
    order: 0;
  }
  
  .split-image {
    min-height: 400px;
  }
  
  .gift-showcase-content {
    padding: 0 40px;
  }
  
  .courses-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .pricing-section {
    grid-template-columns: 1fr;
  }
  
  .stats-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  
  .gift-features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hero-section {
    height: 80vh;
  }
  
  .split-content {
    padding: 60px 30px;
  }
  
  .courses-grid {
    grid-template-columns: 1fr;
  }
  
  .email-form {
    flex-direction: column;
  }
  
  .stats-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .parallax-section {
    background-attachment: scroll;
  }
  
  .gift-showcase-section {
    background-attachment: scroll;
  }
  
  .email-section {
    background-attachment: scroll;
  }
  
  .gift-showcase-content {
    padding: 0 30px;
  }
  
  
  
  
  
  /*
  --------------  Added to change the front page until we are ready for launch

/* ===========================
   FREE RECIPES LEAD MAGNET SECTION
   =========================== */

.recipes-showcase-section {
  background-color: var(--creamy-foam); /* Light background for contrast */
  padding: 100px 0;
}

.recipes-showcase-content {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
}

.recipes-showcase-content .section-title {
  color: var(--stout-brown);
  margin-bottom: 10px;
}

.recipes-showcase-content .section-subtitle {
  color: var(--dark-grey);
  font-size: 1.15rem;
  max-width: 800px;
  margin: 0 auto 50px auto;
}

/* NEW: Grid Layout for Desktop */
.recipes-grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 60px;
  align-items: start;
  text-align: left; /* Reset text alignment inside columns */
}

.recipe-signup-column {
  /* Set a minimum height to ensure the column doesn't collapse before the form loads */
  min-height: 450px; 
}

/* The form container is already styled, but let's ensure it's prominent */
.sender-form-container {
  max-width: 100%; /* Ensure it fits its grid column */
  padding: 0;
  margin: 0;
  border-radius: 8px;
  /* Add overflow visible to prevent cutting off any popups or floating elements */
  overflow: visible; 
}

/* Redesign the Feature Boxes */
.recipes-features-column {
  padding-top: 20px; /* Aligns visually with form */
}

.recipes-features {
  display: flex;
  flex-direction: column;
  gap: 30px; /* Space between the vertical features */
  margin: 0;
}

.recipes-features .feature-box {
  background-color: var(--pure-white); /* White background for features */
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Subtle shadow */
  transition: transform 0.3s ease;
}

.recipes-features .feature-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.recipes-features .feature-box i {
  font-size: 2.5rem;
  color: var(--brew-amber); /* Use a brand color for icons */
  margin-bottom: 15px;
  display: block;
}

.recipes-features .feature-box h3 {
  color: var(--stout-brown);
  font-size: 1.35rem;
  margin-bottom: 5px;
}

.recipes-features .feature-box p {
  color: var(--dark-grey);
  font-size: 1rem;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .recipes-showcase-content {
    padding: 0 40px;
  }
  
    .recipe-signup-column {
    /* Remove the min-height when stacked on mobile/tablet */
    min-height: auto; 
  }
  
  
  .recipes-grid-layout {
    grid-template-columns: 1fr; /* Stack columns on smaller screens */
    gap: 40px;
  }

  .recipe-signup-column,
  .recipes-features-column {
      text-align: center; /* Center content when stacked */
  }

  .recipes-features-column {
    padding-top: 0;
  }

  .recipes-features {
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .recipes-showcase-section {
    padding: 60px 0;
  }
  
  .recipes-showcase-content {
    padding: 0 20px;
  }
}


.recipes-showcase-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;
  text-align: center;
}

.recipes-text {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.section-badge {
  display: inline-block;
  background: var(--brew-amber);
  color: var(--pure-white);
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.recipes-showcase-content h2 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  color: var(--pure-white);
  margin-bottom: 25px;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: center;
}

.recipes-showcase-content > div > p,
.recipes-text > p {
  font-size: 1.2rem;
  color: var(--creamy-foam);
  line-height: 1.8;
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.recipes-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin: 50px 0;
  max-width: 100%;
}

.recipe-feature-box {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 30px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  text-align: left;
  transition: all 0.3s ease;
}

.recipe-feature-box:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--brew-amber);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.recipe-feature-box h4 {
  color: var(--pure-white);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.recipe-feature-box p {
  color: var(--creamy-foam);
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.6;
}

/* Sender.net Form Container Styling */
.sender-form-container {
  margin-top: 60px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(255, 255, 255, 0.98);
  padding: 50px;
  border-radius: 12px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
  text-align: center;
}

/* Force center alignment on the Sender.net wrapper */
.sender-form-field {
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Target the injected inline-block div that Sender.net creates - MOST IMPORTANT */
.sender-form-field > div[style*="inline-block"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  position: relative !important;
  text-align: center !important;
}

/* Target ANY div inside sender-form-field */
.sender-form-field > div {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  position: relative !important;
  text-align: center !important;
}

/* Target the iframe itself */
.sender-form-field iframe {
  width: 100% !important;
  max-width: 500px !important;
  height: auto !important;
  min-height: 430px !important;
  border: none !important;
  overflow: hidden !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Target the actual Sender form wrapper */
.sender-form-field > div,
.sender-form-field form,
div[data-sender-form-id] {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Sender.net form styling overrides with higher specificity */
.sender-form-container .sender-form-field form {
  max-width: 100% !important;
  margin: 0 auto !important;
}

.sender-form-container .sender-form-field input[type="email"],
.sender-form-container .sender-form-field input[type="text"],
.sender-form-field input[type="email"],
.sender-form-field input[type="text"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 15px 20px !important;
  font-size: 1rem !important;
  border: 2px solid #ddd !important;
  border-radius: 6px !important;
  margin-bottom: 15px !important;
  box-sizing: border-box !important;
  display: block !important;
}

.sender-form-container .sender-form-field input[type="email"]:focus,
.sender-form-container .sender-form-field input[type="text"]:focus,
.sender-form-field input[type="email"]:focus,
.sender-form-field input[type="text"]:focus {
  border-color: var(--brew-amber) !important;
  outline: none !important;
}

.sender-form-container .sender-form-field button[type="submit"],
.sender-form-container .sender-form-field input[type="submit"],
.sender-form-field button[type="submit"],
.sender-form-field input[type="submit"] {
  width: 100% !important;
  background: var(--brew-amber) !important;
  color: var(--pure-white) !important;
  padding: 15px 30px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  margin: 0 auto !important;
}

.sender-form-container .sender-form-field button[type="submit"]:hover,
.sender-form-container .sender-form-field input[type="submit"]:hover,
.sender-form-field button[type="submit"]:hover,
.sender-form-field input[type="submit"]:hover {
  background: var(--stout-brown) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Sender logo and branding */
.sender-form-container .sender-form-field img,
.sender-form-field img {
  max-width: 150px !important;
  margin: 0 auto 20px !important;
  display: block !important;
}

/* Privacy text styling */
.sender-form-container .sender-form-field p,
.sender-form-container .sender-form-field small,
.sender-form-field p,
.sender-form-field small {
  text-align: center !important;
  color: #666 !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  margin-top: 15px !important;
  width: 100% !important;
}

/* Label styling */
.sender-form-container .sender-form-field label,
.sender-form-field label {
  display: block !important;
  text-align: left !important;
  font-weight: 600 !important;
  color: var(--stout-brown) !important;
  margin-bottom: 8px !important;
  font-size: 0.95rem !important;
  width: 100% !important;
}

/* Force form fields to be full width container */
.sender-form-field div[class*="field"],
.sender-form-field div[class*="form-group"] {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 15px 0 !important;
}

/* Style the embedded form elements */
.sender-form-container iframe {
  width: 100%;
  border: none;
  min-height: 450px;
}

/* Responsive adjustments for recipes section */
@media (max-width: 1024px) {
  .recipes-showcase-section {
    padding: 80px 0;
  }
  
  .recipes-showcase-content {
    padding: 0 40px;
  }
  
  .recipes-features {
    gap: 20px;
  }
  
  .sender-form-container {
    max-width: 90%;
    padding: 40px;
  }
}

@media (max-width: 768px) {
  .recipes-showcase-section {
    padding: 60px 0;
  }
  
  .recipes-features {
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 30px 0;
  }
  
  .recipes-showcase-content {
    padding: 0 30px;
  }
  
  .recipes-showcase-content h2 {
    font-size: 2rem;
  }
  
  .sender-form-container {
    padding: 30px 20px;
    margin-top: 40px;
    max-width: 100%;
  }
  
  .recipe-feature-box {
    padding: 25px;
  }
  
  .recipe-feature-box h4 {
    font-size: 1.2rem;
  }
}/* Full-Width Hero with Large Background Image */
.hero-section {
  position: relative;
  min-height: 100vh;
  height: auto;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 20px 80px;
  overflow: visible;
}


/* ===========================
   SENDER.NET FORM CENTERING FIX
   Maximum Specificity Version
   =========================== */

/* 1. Center the main form container */
.recipes-showcase-section .sender-form-container {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 60px auto 0 auto !important;
}

/* 2. Force center alignment on ALL divs inside sender-form-field */
.sender-form-field,
.sender-form-field > *,
.sender-form-field > div,
.sender-form-field > div > * {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    position: relative !important;
}

/* 3. Target the specific inline-block wrapper that Sender creates */
.sender-form-field > div[style*="inline-block"],
.sender-form-field > div[style*="display: inline-block"] {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* 4. Center the iframe itself */
.sender-form-field iframe {
    display: block !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 500px !important;
    height: auto !important;
    min-height: 450px !important;
}

/* 5. Override any left/right positioning */
.sender-form-field [style*="left"],
.sender-form-field [style*="right"] {
    left: auto !important;
    right: auto !important;
}

/* 6. Additional centering for form wrapper */
div[data-sender-form-id] {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
    width: 100% !important;
}


/* ===========================
   RECIPES SECTION MOBILE TEXT COLOR FIX
   =========================== */

/* Force dark text color on all screen sizes */
.recipes-showcase-section h2,
.recipes-showcase-content h2,
.recipes-text h2 {
    color: var(--stout-brown) !important;
}

.recipes-showcase-section h4,
.recipe-feature-box h4 {
    color: var(--stout-brown) !important;
}

.recipes-showcase-section p,
.recipes-showcase-content p,
.recipe-feature-box p {
    color: var(--dark-grey) !important;
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
    .recipes-showcase-section h2,
    .recipes-showcase-content h2,
    .recipes-text h2 {
        color: var(--stout-brown) !important;
        text-shadow: none !important;
    }
    
    .recipes-showcase-section h4,
    .recipe-feature-box h4 {
        color: var(--stout-brown) !important;
        text-shadow: none !important;
    }
    
    .recipes-showcase-section p,
    .recipes-showcase-content p,
    .recipe-feature-box p {
        color: var(--dark-grey) !important;
        text-shadow: none !important;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .recipes-showcase-section h2 {
        color: var(--stout-brown) !important;
        font-size: 2rem !important;
    }
}


    /*
  --------------  Added to change the front page until we are ready for launch
  */
  
  
  
  
  
}

/* ===========================
   HEADER WHITE GAP + HAMBURGER FIXES
   =========================== */

/* FIX: White gap between banner and nav.
   The Astra Header Builder has a primary-header row that holds the logo.
   If no logo image is uploaded, this row still occupies its full height.
   We collapse the min-height and padding so it doesn't create a blank white band. */
.ast-primary-header-bar,
.ast-builder-grid-row-layout-default {
    min-height: 0 !important;
}

/* When there IS a logo, let it breathe */
.ast-primary-header-bar:has(.custom-logo),
.ast-primary-header-bar:has(.ast-site-identity) {
    min-height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Desktop: if the logo column is empty, hide it entirely */
@media (min-width: 922px) {
    .ast-primary-header-bar .ast-builder-layout-element:empty,
    .site-logo-img:empty {
        display: none !important;
    }

    /* Ensure the nav menu row takes up the full header bar */
    .ast-primary-header-bar .ast-builder-grid-row {
        min-height: 60px;
        align-items: center;
    }
}

/* Mobile: collapse the primary header row height when it only
   contains the logo (which is missing) — leaves only the burger + banner */
@media (max-width: 921px) {
    /* If the primary bar has no logo, give it just enough room for the burger */
    .ast-primary-header-bar {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    /* Prevent the empty logo area from adding whitespace */
    .ast-mobile-header-wrap .ast-site-identity:empty,
    .ast-mobile-header-wrap .site-logo-img:empty {
        display: none !important;
    }
}

/* ===========================
   HAMBURGER ICON LINES — COMPREHENSIVE FIX
   Astra uses an SVG with three <span> elements styled as bars.
   The previous rule set color:white on the fill wrapper which
   made the three lines invisible against the amber background.
   =========================== */

/* The button wrapper — amber background */
.ast-mobile-menu-buttons,
.ast-mobile-menu-trigger-wrap,
button.ast-mobile-menu-trigger-fill,
button.ast-mobile-menu-trigger-minimaliste,
.main-header-bar .ast-mobile-menu-buttons {
    background-color: var(--brew-amber) !important;
    border-radius: 4px !important;
    padding: 8px !important;
    border: none !important;
    cursor: pointer !important;
}

/* The SVG icon itself — white so lines are visible on amber */
.ast-mobile-menu-buttons svg,
button.ast-mobile-menu-trigger-fill svg,
.ast-mobile-menu-trigger-wrap svg {
    fill: var(--pure-white) !important;
    color: var(--pure-white) !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
}

/* Astra's specific hamburger SVG path and rect elements */
.ast-mobile-menu-buttons svg path,
.ast-mobile-menu-buttons svg rect,
button.ast-mobile-menu-trigger-fill svg path,
button.ast-mobile-menu-trigger-fill svg rect {
    fill: var(--pure-white) !important;
    stroke: var(--pure-white) !important;
}

/* Fallback: if Astra uses span-based bars instead of SVG */
button.ast-mobile-menu-trigger-fill .ast-icon,
button.ast-mobile-menu-trigger-fill .bars,
.ast-mobile-menu-trigger-fill > span {
    background-color: var(--pure-white) !important;
    display: block !important;
    height: 2px !important;
    width: 22px !important;
    margin: 5px 0 !important;
}