/**
 * Main Stylesheet
 * Custom CSS system for Sjamaan.nl
 *
 * Component CSS files are now enqueued individually via functions.php (WordPress way).
 * This file now only contains WooCommerce compatibility and global utility styles.
 *
 * @package Divi-Child
 * @version 2.0.0
 */

/* ==========================================================================
   WooCommerce Compatibility
   ========================================================================== */

/* Ensure WooCommerce buttons use our button styles when appropriate */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  /* Inherit our button base styles where it makes sense */
  font-family: var(--font-family-sans);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: var(--primary-600) !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: var(--primary-700) !important;
}

/* WooCommerce star ratings */
.woocommerce .star-rating span {
  color: var(--accent-500) !important;
}

/* WooCommerce prices */
.woocommerce .price,
.woocommerce .amount {
  color: var(--primary-700) !important;
  font-weight: var(--font-weight-bold);
}

/* WooCommerce sale badges */
.woocommerce .onsale {
  background-color: var(--accent-500) !important;
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Custom Page Templates
   ========================================================================== */

/* Main content wrapper for custom templates */
.main-content {
  min-height: 60vh;
}

/* Featured categories grid specific styling */
.featured-categories-grid {
  /* Inherits grid styles from components/_grid.css */
}

/* Featured products section */
.featured-products {
  /* Specific styles for WooCommerce featured products */
}

/* ==========================================================================
   Navigation & Interactive Components (jQuery-based)
   ========================================================================== */

/* Navigation Dropdown States */
.site-header__dropdown {
  display: none;
  position: absolute;
  z-index: 1000;
}

.site-header__dropdown.is-open {
  display: block;
}

.site-header__nav-button--active {
  /* Active state styles handled by BEM */
}

/* Mobile Menu States */
.mobile-menu,
.site-header__mobile-menu {
  transform: translateX(-100%);
  transition: transform var(--transition-base);
}

.mobile-menu.is-open,
.site-header__mobile-menu.is-open {
  transform: translateX(0);
}

body.mobile-menu-open {
  overflow: hidden;
}

/* Accordion States */
.accordion-content,
.accordion__content {
  display: none;
}

.accordion-item.is-open .accordion-content,
.accordion__item.is-open .accordion__content {
  display: block;
}

/* Modal States */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-modal);
}

.modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.modal-open {
  overflow: hidden;
}

/* ==========================================================================
   Responsive Typography Enhancements
   ========================================================================== */
@media (min-width: 768px) {
  h1 {
    font-size: var(--font-size-5xl);
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
  .no-print {
    display: none !important;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }
}

/* ==========================================================================
   Cloudflare Turnstile
   ========================================================================== */

/**
 * Invisible Turnstile widget container
 * Position absolutely to keep it out of layout flow
 * Completely hidden from visual presentation
 */
.turnstile-widget {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  overflow: hidden;
}