/*
 * =====================================================
 * ZOIK CUSTOM CSS - TAILWIND VERSION
 * =====================================================
 * Custom overrides for Zoik website using Tailwind CSS
 * This file contains ALL client-specific customizations
 * 
 * IMPORTANT: Keep this file separate from the main theme files for easy maintenance
 * All CSS customizations MUST be done in this file to maintain theme update compatibility
 * 
 * Structure:
 * 1. Brand Colors & Variables
 * 2. Responsive Typography
 * 3. WordPress Gutenberg Customizations
 * 4. Layout Components  
 * 5. Custom Utility Classes
 * 6. Component Specific Styles
 * =====================================================
 */

/* =====================================================
   1. BRAND COLORS & VARIABLES
   ===================================================== */

/* Zoik Brand Colors */
/* Primary Pink: #f857a6 */
/* Secondary Yellow: #fbce5e */
/* Blue Accent: #3f78e0 */
.offcanvas {
  background-color: #272957;
}
.text-pink {
  --bs-text-opacity: 1;
  color: #d16b86 !important;
}
.text-yellow {
  --bs-text-opacity: 1;
  color: #fbce5e !important;
}
.text-blue {
  --bs-text-opacity: 1;
  color: #3f78e0 !important;
}

/* =====================================================
   GUTENBERG CUSTOM COLOR PALETTE CLASSES
   ===================================================== */

/* Text Colors */
.has-black-color {
  color: #0f0404 !important;
}

.has-green-color {
  color: #40a03b !important;
}

.has-yellow-color {
  color: #ffd903 !important;
}

.has-orange-color {
  color: #f78d1b !important;
}

.has-red-color {
  color: #e01a20 !important;
}

.has-purple-color {
  color: #402988 !important;
}

.has-blue-color {
  color: #0394d8 !important;
}

.has-indigo-color {
  color: #464c9d !important;
}

/* Background Colors */
.has-black-background-color {
  background-color: #0f0404 !important;
}

.has-green-background-color {
  background-color: #40a03b !important;
}

.has-yellow-background-color {
  background-color: #ffd903 !important;
}

.has-orange-background-color {
  background-color: #f78d1b !important;
}

.has-red-background-color {
  background-color: #e01a20 !important;
}

.has-purple-background-color {
  background-color: #402988 !important;
}

.has-blue-background-color {
  background-color: #0394d8 !important;
}

.has-indigo-background-color {
  background-color: #464c9d !important;
}

.has-light-gray-color {
  color: #aab0bc;
}
.has-zoik-blue-color {
  color: #3f78e0;
}
.has-zoik-yellow-color {
  color: #fbce5e;
}
.has-zoik-pink-color {
  color: #d16b86;
}
.has-dark-gray-color {
  color: #343f52;
}

.ad-item h6 {
  font-size: 0.48rem !important;
}
div.info h3 {
  font-size: 1.15rem !important;
}
/* =====================================================
   2. RESPONSIVE TYPOGRAPHY SYSTEM
   ===================================================== */

/* Header responsive button text */

.btn .hidden {
  display: none !important;
}

.btn .hidden.md\:inline {
  display: inline; /* Default: visible on desktop */
}

@media (width < 768px) {
  .btn .md\:hidden {
    display: inline !important; /* Mobile: show short text */
  }

  .btn .hidden.md\:inline {
    display: none !important; /* Mobile: hide long text */
  }
}

/* Base responsive font scaling - simplified to two breakpoints */

/* List elements - consistent sizing across all devices */
dl,
ol,
ul,
.wp-block-list {
  font-size: 0.88rem !important;
}
/* Custom font size utility classes - override all theme defaults */
.text-\[0\.5rem\] {
  font-size: 0.5rem !important;
}

.text-\[0\.6rem\] {
  font-size: 0.6rem !important;
}

.text-\[0\.7rem\] {
  font-size: 0.7rem !important;
}

.text-\[0\.8rem\] {
  font-size: 0.8rem !important;
}

.text-\[0\.85rem\] {
  font-size: 0.85rem !important;
}

.text-\[0\.9rem\] {
  font-size: 0.9rem !important;
}

/* WordPress registered font sizes - match Gutenberg editor */
.has-small-font-size {
  font-size: 0.875rem !important; /* 14px */
}

.has-regular-font-size {
  font-size: 1rem !important; /* 16px */
}

.has-large-font-size {
  font-size: 1.25rem !important; /* 20px */
}

.has-display-6-font-size {
  font-size: calc(1.4rem * 0.6) !important; /* 1.2rem - 60% of Display 6 */
  line-height: 1.3;
  font-family: "DM Serif Display", sans-serif !important;
}

.has-display-5-font-size {
  font-size: calc(1.6rem * 0.6) !important; /* 1.5rem - 60% of Display 5 */
  line-height: 1.3;
  font-family: "DM Serif Display", sans-serif !important;
}

.has-display-4-font-size {
  font-size: calc(2rem * 0.6) !important; /* 1.8rem - 60% of Display 4 */
  line-height: 1.3;
  font-family: "DM Serif Display", sans-serif !important;
}

.has-display-3-font-size {
  font-size: calc(2.4rem * 0.6) !important; /* 2.1rem - 60% of Display 3 */
  line-height: 1.3;
  font-family: "DM Serif Display", sans-serif !important;
}

.has-display-2-font-size {
  font-size: calc(44px * 0.6) !important; /* Large: 26.4px - Default */
  line-height: 1.3;
  font-family: "DM Serif Display", sans-serif !important;
}

/* Medium screens and below */
@media (width < 1600px) {
  .has-display-2-font-size {
    font-size: calc(36px * 0.6) !important; /* Desktop: 21.6px */
  }
}

/* Mobile screens */
@media (width < 768px) {
  .has-display-2-font-size {
    font-size: calc(28px * 0.6) !important; /* Mobile: 16.8px */
  }
}

.has-display-1-font-size {
  font-size: 300% !important; /* 2.7rem - 60% of Display 1 */
  line-height: 1.3;
  font-family: "DM Serif Display", sans-serif !important;
}

/* Heading hierarchy - 60% of Display sizes for proportional scaling */
li,
ol,
ul,
p {
  font-size: 0.94rem !important;
}

h1 {
  font-size: calc(4.2rem * 0.6) !important; /* 2.7rem - 60% of Display 1 */
  font-family: "DM Serif Display", sans-serif !important;
  font-weight: 600;
  color: #bf363f !important;
}

h2 {
  font-size: calc(3rem * 0.6) !important; /* 2.4rem - 60% of Display 2 */
  font-family: "DM Serif Display", sans-serif !important;
  font-weight: 600;
  color: #bf363f !important;
}

h3 {
  font-size: calc(2.2rem * 0.6) !important; /* 2.1rem - 60% of Display 3 */
  font-family: "DM Serif Display", sans-serif !important;
  font-weight: 600;
}

h4 {
  font-size: calc(1.8rem * 0.6) !important; /* 1.8rem - 60% of Display 4 */
  font-weight: 600;
}

h5 {
  font-size: calc(1.6rem * 0.6) !important; /* 1.5rem - 60% of Display 5 */
}

h6 {
  font-size: calc(1.4rem * 0.6) !important; /* 1.2rem - 60% of Display 6 */
}

@media (width < 1600px) {
  li,
  ol,
  ul,
  p {
    font-size: 0.88rem !important;
  }
  h1 {
    font-size: calc(3.2rem * 0.6) !important; /* 2.7rem - 60% of Display 1 */
  }

  h2 {
    font-size: calc(2.2rem * 0.6) !important; /* 2.4rem - 60% of Display 2 */
  }

  h3 {
    font-size: calc(1.8rem * 0.6) !important; /* 2.1rem - 60% of Display 3 */
  }
  h4 {
    font-size: calc(1.6rem * 0.6) !important; /* 1.8rem - 60% of Display 4 */
  }
  h5 {
    font-size: calc(1.5rem * 0.6) !important; /* 1.8rem - 60% of Display 4 */
  }
  h6 {
    font-size: calc(1.4rem * 0.6) !important; /* 1.8rem - 60% of Display 4 */
  }
}
@media (width < 768px) {
  li,
  ol,
  ul,
  p {
    font-size: 0.85rem !important;
  }
  h1 {
    font-size: calc(2.5rem * 0.6) !important; /* 2.7rem - 60% of Display 1 */
  }

  h2 {
    font-size: calc(1.76rem * 0.6) !important; /* 2.4rem - 60% of Display 2 */
  }

  h3 {
    font-size: calc(1.46rem * 0.6) !important; /* 2.1rem - 60% of Display 3 */
  }
  h4 {
    font-size: calc(1.4rem * 0.6) !important; /* 1.8rem - 60% of Display 4 */
  }
  h5 {
    font-size: calc(1.3rem * 0.6) !important; /* 1.8rem - 60% of Display 4 */
  }
  h6 {
    font-size: calc(1.2rem * 0.6) !important; /* 1.8rem - 60% of Display 4 */
  }
}

/* Footer typography overrides */
footer .widget-title,
footer h4.widget-title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

footer ul li a,
footer .widget ul li a {
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  transition: opacity 0.2s ease-in-out !important;
}

footer ul li a:hover,
footer .widget ul li a:hover {
  opacity: 0.8 !important;
  text-decoration: none !important;
}

/* Footer widget spacing */
footer .widget {
  margin-bottom: 2rem !important;
}

footer .widget:last-child {
  margin-bottom: 0 !important;
}

/* Base body font size fallback */
body {
  font-size: 0.88rem !important;
}

/* Ensure italic, emphasis, and span elements use consistent font size - frontend only */

/* =====================================================
   3. WORDPRESS GUTENBERG CUSTOMIZATIONS
   ===================================================== */

/* Override Default Gutenberg Button Styling */
.wp-block-button__link {
  /* Remove default styles */
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-decoration: none !important;

  /* Apply custom button styling to match your design */
  display: inline-block !important;
  padding: 0.75rem 1.5rem !important;
  background-color: #3f78e0 !important;
  color: white !important;
  border: 1px solid #3f78e0 !important;
  border-radius: 50rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
  margin-right: 0.25rem !important;
  transition: all 0.2s ease !important;
}

/* Ensure button container doesn't interfere */
.wp-block-button {
  margin-bottom: 0 !important;
}

.wp-block-buttons .wp-block-button {
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

/* Alternative: If Tailwind @apply doesn't work, use regular CSS */
.wp-block-button__link.fallback-style {
  display: inline-block !important;
  padding: 0.5rem 1.5rem !important;
  background-color: #3f78e0 !important;
  color: white !important;
  border: 1px solid #3f78e0 !important;
  border-radius: 50rem !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
  margin-right: 0.25rem !important;
  transition: all 0.2s ease !important;
}

.wp-block-button__link.fallback-style:hover {
  background-color: #2c5aa0 !important;
  border-color: #2c5aa0 !important;
  color: white !important;
}

/* List Block Styles - Custom appearance for Gutenberg lists */
.wp-block-list,
.editor-styles-wrapper ul {
  padding-left: 0 !important;
  list-style: none !important;
}

.wp-block-list li,
.editor-styles-wrapper ul li {
  position: relative !important;
  padding-left: 1.5rem !important;
  margin-top: 0.35rem !important;
}

.wp-block-list li:first-child,
.editor-styles-wrapper ul li:first-child {
  margin-top: 0 !important;
}

/* Default check mark style for lists */
.wp-block-list li::before,
.editor-styles-wrapper ul li::before {
  content: "\e9dd" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.2rem !important;
  width: 1rem !important;
  height: 1rem !important;
  font-size: 0.8rem !important;
  line-height: 1 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #dce7f9 !important;
  color: #3f78e0 !important;
  border-radius: 50% !important;
  font-family: "Unicons" !important;
  font-weight: normal !important;
}

/* List Style Variations */

/* Bullet Points Style */
.wp-block-list.is-style-bullet-style li,
.editor-styles-wrapper ul.is-style-bullet-style li {
  padding-left: 1rem !important;
}

.wp-block-list.is-style-bullet-style li::before,
.editor-styles-wrapper ul.is-style-bullet-style li::before {
  content: "\2022" !important;
  top: 0.1rem !important;
  width: auto !important;
  height: auto !important;
  font-size: 1rem !important;
  background-color: transparent !important;
  color: #3f78e0 !important;
  border-radius: 0 !important;
  font-family: sans-serif !important;
  display: inline !important;
  line-height: 1.5 !important;
}

/* Arrow Points Style */
.wp-block-list.is-style-arrow-style li,
.editor-styles-wrapper ul.is-style-arrow-style li {
  padding-left: 1.25rem !important;
}

.wp-block-list.is-style-arrow-style li::before,
.editor-styles-wrapper ul.is-style-arrow-style li::before {
  content: "→" !important;
  top: 0.05rem !important;
  width: auto !important;
  height: auto !important;
  font-size: 1rem !important;
  background-color: transparent !important;
  color: #3f78e0 !important;
  border-radius: 0 !important;
  font-family: sans-serif !important;
  display: inline !important;
  line-height: 1.5 !important;
}

/* Check Marks Style */
.wp-block-list.is-style-check-style li::before,
.editor-styles-wrapper ul.is-style-check-style li::before {
  background-color: #def4ee !important;
  color: #45c4a0 !important;
}

/* Button Block Styles */

/* Fill Button Style - Grey Background */
.wp-block-button.is-style-fill .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.is-style-fill .wp-block-button__link {
  background-color: #e9ecef !important;
  color: #343f52 !important;
  border: 1px solid #e9ecef !important;
  border-radius: 50rem !important;
  padding: 0.35rem 1.5rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out !important;
}

.wp-block-button.is-style-fill .wp-block-button__link:hover,
.editor-styles-wrapper
  .wp-block-button.is-style-fill
  .wp-block-button__link:hover {
  background-color: #dee2e6 !important;
  border-color: #dee2e6 !important;
  color: #343f52 !important;
  transform: translateY(-0.15rem) !important;
  box-shadow: 0 0.25rem 0.75rem rgba(52, 63, 82, 0.15) !important;
}

/* Outline Button Style - Dark Border/Text, White Background */
.wp-block-button.is-style-outline .wp-block-button__link,
.editor-styles-wrapper
  .wp-block-button.is-style-outline
  .wp-block-button__link {
  background-color: white !important;
  color: #343f52 !important;
  border: 2px solid #343f52 !important;
  border-radius: 50rem !important;
  padding: 0.35rem 1.5rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.editor-styles-wrapper
  .wp-block-button.is-style-outline
  .wp-block-button__link:hover {
  background-color: #343f52 !important;
  color: white !important;
  border-color: #343f52 !important;
  transform: translateY(-0.15rem) !important;
  box-shadow: 0 0.25rem 0.75rem rgba(52, 63, 82, 0.25) !important;
}

/* Gradient Button Style */
.wp-block-button.is-style-gradient-style .wp-block-button__link,
.editor-styles-wrapper
  .wp-block-button.is-style-gradient-style
  .wp-block-button__link {
  background-image: linear-gradient(
    120deg,
    #f857a6 10%,
    #ef3f6e 100%
  ) !important;
  background-color: transparent !important;
  color: white !important;
  border: none !important;
  border-radius: 50rem !important;
  padding: 0.35rem 1.5rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out !important;
}

.wp-block-button.is-style-gradient-style .wp-block-button__link:hover,
.editor-styles-wrapper
  .wp-block-button.is-style-gradient-style
  .wp-block-button__link:hover {
  transform: translateY(-0.15rem) !important;
  box-shadow: 0 0.25rem 0.75rem rgba(30, 34, 40, 0.15) !important;
}

/* Blue Button Style */
.wp-block-button.is-style-blue-style .wp-block-button__link,
.editor-styles-wrapper
  .wp-block-button.is-style-blue-style
  .wp-block-button__link {
  background-color: #3f78e0 !important;
  color: white !important;
  border: 1px solid #3f78e0 !important;
  border-radius: 50rem !important;
  padding: 0.35rem 1.5rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out !important;
}

.wp-block-button.is-style-blue-style .wp-block-button__link:hover,
.editor-styles-wrapper
  .wp-block-button.is-style-blue-style
  .wp-block-button__link:hover {
  background-color: #3f78e0 !important;
  border-color: #3f78e0 !important;
  transform: translateY(-0.15rem) !important;
  box-shadow: 0 0.25rem 0.75rem rgba(30, 34, 40, 0.15) !important;
}

/* Black Button Style */
.wp-block-button.is-style-black-style .wp-block-button__link,
.editor-styles-wrapper
  .wp-block-button.is-style-black-style
  .wp-block-button__link {
  background-color: #343f52 !important;
  color: white !important;
  border: 1px solid #343f52 !important;
  border-radius: 50rem !important;
  padding: 0.35rem 1.5rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out !important;
}

.wp-block-button.is-style-black-style .wp-block-button__link:hover,
.editor-styles-wrapper
  .wp-block-button.is-style-black-style
  .wp-block-button__link:hover {
  background-color: #2d3748 !important;
  border-color: #2d3748 !important;
  transform: translateY(-0.15rem) !important;
  box-shadow: 0 0.25rem 0.75rem rgba(30, 34, 40, 0.15) !important;
}

/* White Button Style */
.wp-block-button.is-style-white-style .wp-block-button__link,
.editor-styles-wrapper
  .wp-block-button.is-style-white-style
  .wp-block-button__link {
  background-color: white !important;
  color: #343f52 !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 50rem !important;
  padding: 0.35rem 1.5rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out !important;
}

.wp-block-button.is-style-white-style .wp-block-button__link:hover,
.editor-styles-wrapper
  .wp-block-button.is-style-white-style
  .wp-block-button__link:hover {
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
  transform: translateY(-0.15rem) !important;
  box-shadow: 0 0.25rem 0.75rem rgba(30, 34, 40, 0.15) !important;
}

/* Green Button Style */
.wp-block-button.is-style-green-style .wp-block-button__link,
.editor-styles-wrapper
  .wp-block-button.is-style-green-style
  .wp-block-button__link {
  background-color: #7cb798 !important;
  color: white !important;
  border: 1px solid #7cb798 !important;
  border-radius: 50rem !important;
  padding: 0.35rem 1.5rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out !important;
}

.wp-block-button.is-style-green-style .wp-block-button__link:hover,
.editor-styles-wrapper
  .wp-block-button.is-style-green-style
  .wp-block-button__link:hover {
  background-color: #6ba287 !important;
  border-color: #6ba287 !important;
  color: white !important;
  transform: translateY(-0.15rem) !important;
  box-shadow: 0 0.25rem 0.75rem rgba(124, 183, 152, 0.25) !important;
}

/* Yellow Button Style */
.wp-block-button.is-style-yellow-style .wp-block-button__link,
.editor-styles-wrapper
  .wp-block-button.is-style-yellow-style
  .wp-block-button__link {
  background-color: #fbce5e !important;
  color: #343f52 !important;
  border: 2px solid #fbce5e !important;
  border-radius: 50rem !important;
  padding: 0.35rem 1.5rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out !important;
}

.wp-block-button.is-style-yellow-style .wp-block-button__link:hover,
.editor-styles-wrapper
  .wp-block-button.is-style-yellow-style
  .wp-block-button__link:hover {
  background-color: #f5c142 !important;
  color: #343f52 !important;
  border-color: #f5c142 !important;
  transform: translateY(-0.15rem) !important;
  box-shadow: 0 0.25rem 0.75rem rgba(251, 206, 94, 0.25) !important;
}

/* =====================================================
   4. LAYOUT COMPONENTS
   ===================================================== */

/* Logo sizing - consistent across dark and light variants */
.logo-dark,
.logo-light {
  max-width: 200px; /* Default: 280px max-width */
}

/* Sticky/Fixed navbar logo - reduce by 50% */
.navbar.fixed .logo-dark,
.navbar.fixed .logo-light,
.navbar.navbar-stuck .logo-dark,
.navbar.navbar-stuck .logo-light {
  max-width: 100px !important; /* Sticky header: 50% of default */
}

@media (width < 768px) {
  .logo-dark,
  .logo-light {
    max-width: 100px; /* Mobile: 100px max-width (50% of desktop) */
  }

  /* Sticky header on mobile - further reduce */
  .navbar.fixed .logo-dark,
  .navbar.fixed .logo-light,
  .navbar.navbar-stuck .logo-dark,
  .navbar.navbar-stuck .logo-light {
    max-width: 75px !important; /* Sticky header mobile: even smaller */
  }
}

/* Container custom enhancements for large screens */
.container-custom {
  width: 100%; /* Default: 100% width */
  max-width: 80%; /* Default: 80% max-width */
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

/* Navigation container that matches container-custom but works with position-absolute */
.container-nav {
  width: 100%; /* Default: 100% width */
  max-width: 80%; /* Default: 80% max-width */
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

/* Mobile container adjustments */
@media (width < 768px) {
  .container-custom {
    width: 98%; /* Mobile: 98% width with 1% margins on each side */
    max-width: 94%; /* Mobile: 94% max-width */
  }

  .container-nav {
    width: 92%; /* Mobile: 92% width to match container-custom */
    max-width: 80%; /* Mobile: 80% max-width */
  }
}

/* =====================================================
   5. CUSTOM UTILITY CLASSES
   ===================================================== */

/* Responsive display utilities */
.mobile-only {
  display: none; /* Default: hidden */
}

.desktop-only {
  display: block; /* Default: visible */
}

address span.mobile-only {
  font-size: 0.68rem !important;
}

@media (width < 768px) {
  .mobile-only {
    display: block !important;
  }

  .desktop-only {
    display: none !important;
  }
}

/* =====================================================
   6. COMPONENT SPECIFIC STYLES
   ===================================================== */

/* Hero Form Styles - Enhanced MailChimp integration */
.mc-field-group.input-group.form-floating {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.mc-field-group input[type="email"] {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  line-height: 1.5;
  border: none;
  border-radius: 0.5rem 0 0 0.5rem;
  background-color: rgba(255, 255, 255, 0.85);
  color: #495057;
  box-shadow: none;
  outline: none;
}

.mc-field-group input[type="email"]:focus {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 0.2rem rgba(248, 87, 166, 0.25);
}

.mc-field-group input[type="email"]::placeholder {
  color: transparent;
}

.mc-field-group input[type="submit"] {
  flex: 0 0 auto;
  padding: 1rem 2rem;
  background-color: #f857a6;
  color: white;
  border: none;
  border-radius: 0 0.5rem 0.5rem 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
}

.mc-field-group input[type="submit"]:hover {
  background-color: #e63994;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(248, 87, 166, 0.3);
}

.mc-field-group label {
  position: absolute;
  top: 50%;
  left: 1.25rem;
  transform: translateY(-50%);
  color: rgba(108, 117, 125, 0.8);
  pointer-events: none;
  font-size: 1rem;
  transition: all 0.2s ease-in-out;
  background: transparent;
  padding: 0;
  z-index: 2;
}

.mc-field-group input[type="email"]:focus + label,
.mc-field-group input[type="email"]:not(:placeholder-shown) + label {
  top: 0.75rem;
  left: 1.25rem;
  font-size: 0.875rem;
  color: rgba(108, 117, 125, 0.6);
  transform: none;
}

/* =====================================================
   7. HR ELEMENT MARGIN OVERRIDES
   ===================================================== */

/* Override theme HR margins with Tailwind utilities */
hr.my-1,
hr.\!my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
  margin-block: 0.25rem !important;
}

hr.my-2,
hr.\!my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  margin-block: 0.5rem !important;
}

hr.my-3,
hr.\!my-3 {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
  margin-block: 0.75rem !important;
}

hr.my-4,
hr.\!my-4 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  margin-block: 1rem !important;
}

.contentpad {
  padding: 2% 4%; /* Default: desktop padding */
}

@media (width < 768px) {
  .contentpad {
    padding: 0% 0%; /* Mobile: no padding */
  }
}
/* =====================================================
   8. GUTENBERG EDITOR IMPROVEMENTS
   ===================================================== */

/* Add padding to Gutenberg editor for better editing experience */
.block-editor-writing-flow,
.block-editor-block-list__layout,
.editor-styles-wrapper {
  padding-left: 2rem !important; /* Default: desktop padding */
  padding-right: 2rem !important;
}

/* Ensure blocks don't touch the edges in editor */
.wp-block {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Mobile editor padding */
@media (width < 768px) {
  .block-editor-writing-flow,
  .block-editor-block-list__layout,
  .editor-styles-wrapper {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* =====================================================
   9. WIDGET CUSTOMIZATIONS
   ===================================================== */

/* Hide search widget in sidebar */
.sidebar .widget_search,
.sidebar #search-2,
.sidebar .search-form {
  display: none !important;
}

/* Ensure proper spacing for first widget when search is hidden */
.sidebar .widget:first-child {
  margin-top: 0 !important;
}

/* Convert all sidebar H2 headings to H4 styling */
.sidebar h2,
.sidebar h2.wp-block-heading,
.sidebar .wp-block-heading h2 {
  font-size: 1.5rem !important; /* H4 size */
  font-weight: bold !important;
  line-height: 1.45 !important;
  margin-bottom: 0.75rem !important;
  margin-top: 0 !important;
}

/* Specific targeting for widget titles */
.sidebar .widget-title,
.sidebar h2.widget-title {
  font-size: 1.5rem !important;
  margin-bottom: 0.75rem !important;
}
.sidebar .widget-title,
.sidebar h4.widget-title {
  font-size: 1.15rem !important;
  margin-bottom: 0.75rem !important;
}
.sidebar .widget-title,
.sidebar p {
  font-size: 0.85rem !important;
}
.sidebar .widget-title,
.sidebar address {
  font-size: 0.85rem !important;
}

/* Search term highlighting */
mark {
  background-color: #fef08a !important; /* Tailwind yellow-200 */
  color: #92400e !important; /* Tailwind yellow-800 for contrast */
  padding: 0.125rem 0.25rem !important;
  border-radius: 0.25rem !important;
  font-weight: 600 !important;
}

/* =====================================================
   MEGA MENU COLUMN LAYOUT CUSTOMIZATIONS
   ===================================================== */

/* Make dropdown wider to accommodate longer text */

h6.dropdown-header {
  font-family: "DM Serif Display", sans-serif !important;
}

.dropdown-menu.dropdown-lg {
  min-width: 450px !important;
}

/* Override theme mega menu column styling for better text wrapping */
.dropdown-lg-content ul li a {
  font-size: 0.85rem !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Make regular dropdown items consistent size too */

.dropdown-menu .dropdown-item {
  font-size: 0.85rem !important;
  line-height: 1.3 !important;
  font-weight: 300;
  margin-bottom: 8px;
}
/* Remove any unwanted borders that might appear */
.dropdown-lg-content > div {
  border-left: none !important;
  border-left-width: 0 !important;
}

/* Mobile dropdown adjustments */
@media (width < 768px) {
  .dropdown-menu.dropdown-lg {
    min-width: 320px !important;
  }
}
/* =====================================================
   ADEVERTISING WIDGET OVERRIDES
   ===================================================== */
.ad-item h6 {
  display: none;
}

/* =====================================================
   SWIPER NAVIGATION BUTTON FIXES
   ===================================================== */
.swiper-hero,
.swiper-hero .swiper-slide {
  height: auto;
}
/* Fix z-index stacking issues for Swiper navigation buttons */
.swiper-container .swiper-button-prev,
.swiper-container .swiper-button-next {
  z-index: 100 !important;
  pointer-events: auto !important;
  position: absolute !important;
}

/* Ensure navigation controls container has proper z-index */
.swiper-controls .swiper-navigation {
  z-index: 99 !important;
  pointer-events: auto !important;
}

/* Make sure buttons are clickable and visible */
.swiper-controls .swiper-navigation .swiper-button {
  pointer-events: auto !important;
  z-index: 101 !important;
  cursor: pointer !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* Fix disabled state styling */
.swiper-controls .swiper-navigation .swiper-button.swiper-button-disabled {
  opacity: 0.35 !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* Ensure hover states work */
.swiper-controls
  .swiper-navigation
  .swiper-button:hover:not(.swiper-button-disabled) {
  background-color: rgba(255, 255, 255, 0.9) !important;
  transform: scale(1.05) !important;
}

/* =====================================================
   BANNER SPOTS SECTION
   ===================================================== */

.banner-spot-item {
  position: relative;
  overflow: hidden;
}

.banner-spot-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.banner-spot-figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-spot-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.banner-spot-link:hover .banner-spot-figure img {
  transform: scale(1.05);
}

.banner-spot-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
  transition: opacity 0.3s ease;
}

.banner-spot-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .banner-spot-title {
    font-size: 1rem;
  }

  .banner-spot-overlay {
    padding: 1rem;
  }
}

/* Hover effect for linked banners */
.banner-spot-link:hover .banner-spot-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
}

/* =====================================================
   FOOTER SOCIAL ICONS
   ===================================================== */

/* Footer social icons - appear below Column 3 */
.widget .nav.social.social-white {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.widget .nav.social.social-white a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.widget .nav.social.social-white a:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-0.15rem);
}

.widget .nav.social.social-white a i {
  color: #fff !important;
  font-size: 1.1rem;
}

/* Mobile adjustments */
@media (width < 768px) {
  .widget .nav.social.social-white a {
    width: 2.2rem;
    height: 2.2rem;
  }

  .widget .nav.social.social-white a i {
    font-size: 1rem;
  }
}

/* =====================================================
   END OF ZOIK CUSTOM CSS
   ===================================================== */