/* Global Styles */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Crimson Text', Georgia, Cambria, 'Times New Roman', serif;
  background: #111;
  color: #eee;
}

/* Header */
header {
  position: relative;
  text-align: center;
  color: white;
}
header img {
  width: 100%;
  height: auto;
  display: block;
}
header .header-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  text-align: center;
}
header h1, header p {
  position: absolute;
  width: 100%;
  left: 0;
  margin: 0;
}
header h1 { top: 30%; font-size: 3rem; font-weight: bold; text-shadow: 2px 2px 8px #000; }
header p  { top: 45%; font-size: 1.5rem; text-shadow: 1px 1px 6px #000; }

/* Headlines switch to Montserrat */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.2;
  text-transform: uppercase;
}


h2, h3 {
  font-weight: 600;   /* semi-bold for hierarchy */
  text-transform: none; /* if uppercase is too much */
}

/* Ensure CTAs/buttons use Montserrat too */
button, .cta-btn, .btn-primary, .btn-secondary {
  font-family: 'Montserrat', Arial, sans-serif; !important
  font-weight: 600;
}

/* Center all H2 and H3 headings */
h2, h3 {
  text-align: center;
}

/* Center category titles */
.product-category > h1 {
  text-align: center;
  margin-bottom: 1.5rem; /* optional spacing tweak */
}

/* Navigation */
.site-nav {
  background: #222;
  padding: 1rem;
  text-align: center;
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.site-nav li a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}
.site-nav li a:hover {
  text-decoration: underline;
}

/* Call-To-Action Section */
.cta {
  background: #1a1a1a;
  padding: 4rem 2rem;
  margin-top: 2rem;
  text-align: center;
  /* reduce bottom padding so it doesn’t dominate */
  padding-bottom: 2rem;
  /* or add a separation border */
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cta h2 {
  margin-bottom: 1rem;
  font-size: 1.8rem;
  color: #fff;
}
.cta-form {
  margin-top: 1rem;
}
.cta-form input[type="email"] {
  padding: 0.5rem;
  width: 250px;
  max-width: 80%;
  border: none;
  border-radius: 4px;
}

.cta-form input[type="submit"] {
  padding: 0.5rem 1rem;
  border: none;
  background: #e53e3e;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.cta-form button {
  padding: 0.5rem 1rem;
  border: none;
  background: #e53e3e;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

/* Hero Section */
.hero-section {
  width: 100%;
  /* default (1×) background */
  background-image: url('/assets/KHF-Hero.jpg');
  background-position: center;
  background-size: cover;
  height: 80vh;
  min-height: 450px;
  max-height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Option A: CSS image-set (supported in WebKit, Firefox) */
.hero-section {
  background-image: image-set(
    url('/assets/KHF-Hero.jpg') 1x,
    url('/assets/KHF-Hero@2x.jpg') 2x
  );
}

.hero-overlay {
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  padding: 2rem;
  text-align: center;
  max-width: 90%;
  border-radius: 8px;
}

.hero-overlay h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.hero-overlay .subhead {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

.cta-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: #e53e3e;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.cta-btn:hover {
  background-color: #d62839;
}

/* Products Grid */
/* Featured Products Grid */
.products__grid {
  background: #111;
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  grid-auto-rows: auto;
  grid-template-rows:
    minmax(4rem, auto)  /* Testimonial*/
    auto                 /* Rating */
    auto                 /* Title + Image */
    auto                 /* Description */
    auto;                /* Downloads */
  gap: 1.5rem;
  padding: 2rem;
}

.products__grid,
#products {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  gap: 1.5rem;
  padding: 2rem;
}

/* Product card styling */
.products__grid > .product {
  background: #282828;
  padding: 1rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Ensure images don’t overflow */
.products__grid .product-card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.products__grid > .main-page-product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 1) Constrain every product image to its card’s width */
.products__grid img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 4px; 
  margin-bottom: 1rem;
}

.product-card {
  display: contents;  /* allows children to place into grid rows */
}
.product-card .testimonials { grid-row: 1; }
.product-card .product-meta { grid-row: 2; }
.product-card .titleandimage { grid-row: 3; }
.product-card .description { grid-row: 4; }
.product-card .downloads { grid-row: 5; }

.product-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* style the rating text */
.product-meta {
  display: flex;
  align-items: center;  /* centers both rating and badges on their middles */
  justify-content: center;
  gap: 0.75rem;
}

.product-meta .rating {
  font-family: 'Montserrat', Arial, sans-serif;  /* heading font */
  font-weight: 700;                 /* bold, like an <h*> */
  font-size: 1.25rem;               /* bump up above body text */
  line-height: 2rem;                /* match the badge-image height */
  color: #FFD700;                   /* gold tone to pop against dark bg */
}

.titleandimage .price {
  text-align: center;
  font-family: 'Montserrat', Arial, sans-serif;  /* heading font */
  font-weight: 700;                 /* bold, like an <h*> */
  color: #FFD700;                   /* gold tone to pop against dark bg */
}

/* now a lighter badge container */
.product-meta .product-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* scale badges down to sit nicely beside the rating */
.product-meta .product-badges img {
  width: auto;
  display: block;
}

.main-page-product-card {
  background: #282828;
  padding: 1rem;
  border-radius: 8px;
}

.mini-quote {
  font-style: italic;
  font-size: 0.9rem;
  color: #ccc;
}

.product-badges {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.product-badges img {
  width: 8rem !important;
  height: auto;
}

/* Container for product CTAs */
.product-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  justify-content: center; /* or flex-start */
}

/* Primary button (Learn More) */
.product-buttons .btn-primary {
  background: #e53e3e;
  color: #fff;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
}

/* Secondary buttons (external links) */
.product-buttons .btn-secondary {
  background: #333;
  color: #fff;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 4px;
}

.product-buttons a:hover {
  opacity: 0.8;
}

/* Center the purchase buttons */
.links.product-buttons {
  display: flex;
  justify-content: center;
  gap: 0.5rem;    /* spacing between buttons */
  margin-bottom: 1rem; /* optional space below */
}


/* Footer */
.footer-social {
  text-align: center;
  margin-top: 2rem;
}
.footer-social a {
  margin: 0 1rem;
  color: #ccc;
  text-decoration: none;
}
.footer-social a:hover {
  text-decoration: underline;
}
footer {
  background: #000;
  padding: 2rem;
  text-align: center;
  color: #aaa;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .slide-content {
    width: 80%;
    padding: 1rem;
  }
}


    /* Make links stand out without browser defaults */
    .signup-success a {
      color: #e53e3e;           /* Korvidae crimson */
      text-decoration: underline;
      font-weight: 500;
    }
    .signup-success a:hover {
      color: #c53030;           /* darker on hover */
    }


/* Option B: media query fallback for other browsers */
@media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) {
  .hero-section {
    background-image: url('/assets/KHF-Hero@2x.jpg');
  }
}

/* Responsive height tweaks */
/* Hero */
@media (max-width: 1024px) {
  .hero-section {
    height: 70vh;
    min-height: 400px;
    max-height: 700px;
  }
}

@media (max-width: 600px) {
  .hero-section {
    height: 55vh;
    min-height: 300px;
    max-height: 600px;
  }
}

/* Product Grid */

@media (max-width: 768px) {
  .products__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .products__grid {
    grid-template-columns: 1fr; /* single column on the smallest screens */
  }
}

/* 1) Mailing-list form stays dark grey */
.cta {
  background-color: #1a1a1a;
}

/* 2) Hero & products grid snap back to black */
.products {         /* again, match actual selectors */
  background-color: #111;
}


/* Add space below the CTA before the hero */
.cta {
  padding-bottom: 2rem;
}

/* Add space above and below the hero */
.hero-section {
  padding: 2rem 0;
}

/* Add space above the product grid */
.products {
  padding-top: 2rem;
}


/* ──────────────────────────────────────────────────────────────────────────── */
/* Cookie Banner Styles                                                      */
/* ──────────────────────────────────────────────────────────────────────────── */

/* Base styles for all three banners */
#cookie-banner,
#cookie-banner-alt,
#cookie-banner-declined {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #000;              /* match footer background */
  color: #aaa;                   /* muted text color */
  padding: 1rem;
  text-align: center;            /* center contents */
  z-index: 1000;                 /* sit above everything */
}

/* Hide the alt‐only and declined banners by default */
#cookie-banner-alt,
#cookie-banner-declined {
  display: none;
}

/* Link styling for all banners */
#cookie-banner a,
#cookie-banner-alt a,
#cookie-banner-declined a {
  color: #e53e3e;                /* Korvidae crimson */
  text-decoration: underline;
  font-weight: 600;
}
#cookie-banner a:hover,
#cookie-banner-alt a:hover,
#cookie-banner-declined a:hover {
  color: #c53030;                /* darker on hover */
}

/* Button styling & spacing */
#cookie-banner button,
#cookie-banner-declined button {
  margin: 0 0.5rem;
  background: #e53e3e;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 600;
}

#cookie-banner button#cookie-decline {
  background: #444;
  color: #ddd;
}

/* ─────── Mobile Header Fix ─────── */
@media (max-width: 600px) {
  /* Give the header breathing room */
  header {
    margin-bottom: 1rem;
  }

  /* Make the overlay text block static instead of absolute */
  header .header-text {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    height: auto;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
    display: block;
    text-align: center;
  }

  /* Reset the title/subtitle positioning */
  header h1,
  header p {
    position: static !important;
    width: auto;
    margin: 0.5rem 0;
    text-shadow: 2px 2px 4px #000;
  }

  /* Scale down typography */
  header h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  header p {
    font-size: clamp(1rem, 4vw, 1.25rem);
  }

  /* Ensure the nav sits cleanly beneath */
  #site-nav {
    margin-top: 0;
    z-index: 1;
  }
}

/* Restore space around reviews/quotes */
.product-card .testimonials {
  /* keep it in the first grid‐row but add some bottom gap */
  grid-row: 1;                                 /* existing rule */ :contentReference[oaicite:0]{index=0}  
  margin-bottom: 1rem;                         /* extra space below the blockquotes */
}

/* Tidy up each blockquote */
.product-card .testimonials blockquote {
  margin: 0 0 0.75rem;                         /* no top margin, some bottom margin */
  padding-left: 1rem;                          /* indent the quote text */
  border-left: 4px solid #444;                 /* optional: a visual lead-in bar */
  font-style: italic;                          /* emphasize it’s a testimonial */
  color: #ccc;
}

/* Style the citation line */
.product-card .testimonials blockquote cite {
  display: block;                              /* put the source on its own line */
  margin-top: 0.25rem;                         /* small gap above the name */
  font-size: 0.85rem;
  text-align: right;
  color: #999;
}