/*
Theme Name: MenuManager
Theme URI: https://menumanager.in
Description: Professional Full Site Editing theme for MenuManager QR-based restaurant ordering system. Features fresh green brand colors, modern design, and optimized for SaaS conversion. Standalone FSE theme with no dependencies.
Author: MenuManager Team
Author URI: https://menumanager.in
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: menumanager
Tags: restaurant, saas, qr-ordering, hospitality, food-service, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, one-column, rtl-language-support, template-editing, translation-ready, wide-blocks
*/

/* ========================================
   MenuManager Brand Colors
   ======================================== */
:root {
  /* Primary Brand Colors */
  --mm-lime-green: #9DFF20;
  --mm-dark-green: #345C00;
  --mm-light-gray: #F6F6F6;
  --mm-white: #FFFFFF;
  --mm-black: #000000;

  /* Functional Colors */
  --mm-success: #28a745;
  --mm-warning: #ffc107;
  --mm-error: #dc3545;
  --mm-info: #17a2b8;

  /* Text Colors */
  --mm-heading-color: #1a1a1a;
  --mm-body-text: #454545;
  --mm-text-light: #6c757d;

  /* Background Colors */
  --mm-bg-primary: #FFFFFF;
  --mm-bg-secondary: #F6F6F6;
  --mm-bg-dark: #345C00;

  /* Border & Shadow */
  --mm-border-color: #e0e0e0;
  --mm-shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --mm-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --mm-shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}

/* ========================================
   Global Overrides
   ======================================== */

/* Override pink primary color with lime green */
.has-primary-color {
  color: var(--mm-lime-green) !important;
}

.has-primary-background-color {
  background-color: var(--mm-lime-green) !important;
}

/* Override secondary navy with dark green */
.has-seconadry-color,
.has-secondary-color {
  color: var(--mm-dark-green) !important;
}

.has-seconadry-background-color,
.has-secondary-background-color {
  background-color: var(--mm-dark-green) !important;
}

/* ========================================
   Button Styling
   ======================================== */

.wp-block-button__link,
.wp-element-button {
  background-color: var(--mm-lime-green) !important;
  color: var(--mm-dark-green) !important;
  border: 2px solid var(--mm-lime-green) !important;
  border-radius: 30px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  background-color: var(--mm-dark-green) !important;
  color: var(--mm-white) !important;
  border-color: var(--mm-dark-green) !important;
  transform: translateY(-2px);
  box-shadow: var(--mm-shadow-md);
}

/* Secondary Button Style */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--mm-dark-green) !important;
  border: 2px solid var(--mm-dark-green) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--mm-dark-green) !important;
  color: var(--mm-white) !important;
}

/* ========================================
   Header & Navigation
   ======================================== */

.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--mm-white) !important;
}

.wp-block-navigation a {
  color: var(--mm-heading-color) !important;
  font-weight: 500;
  transition: color 0.3s ease;
}

.wp-block-navigation a:hover {
  color: var(--mm-lime-green) !important;
}

/* ========================================
   Hero Section / Slider
   ======================================== */

/* Prevent stacking contexts on page content - DO NOT set position or z-index */
.wp-block-cover,
.wp-block-group:not(.mm-main-header):not(.mm-header-left):not(.mm-header-right),
main,
.wp-site-blocks,
body > *:not(header):not(.mm-main-header),
.wp-block-template-part:not([data-area="header"]),
article,
section,
.wp-block-cover.alignfull,
.has-background,
.wp-block-group.alignfull:not(.mm-main-header) {
  /* Keep content in default stacking order - no position or z-index */
  isolation: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
}

/* Ensure WordPress wp-site-blocks wrapper doesn't clip dropdowns */
.wp-site-blocks,
body > .wp-site-blocks {
  overflow: visible !important;
  isolation: auto !important;
}

.tech-software-slider-section .wp-block-cover__background {
  background: linear-gradient(135deg, var(--mm-dark-green) 0%, #1a3a00 100%) !important;
}

.slider-small-heading {
  color: var(--mm-lime-green) !important;
}

.slider-heading {
  color: var(--mm-white) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.slider-para {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ========================================
   Links
   ======================================== */

a {
  color: var(--mm-dark-green);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--mm-lime-green);
}

/* ========================================
   Typography
   ======================================== */

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  color: var(--mm-heading-color) !important;
  font-weight: 700;
}

p {
  color: var(--mm-body-text);
  line-height: 1.75;
}

/* ========================================
   Forms
   ======================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
  border: 2px solid var(--mm-border-color);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--mm-lime-green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(157, 255, 32, 0.1);
}

/* ========================================
   Cards & Sections
   ======================================== */

.wp-block-group.has-background:not(.mm-main-header) {
  border-radius: 12px;
  overflow: hidden;
}

/* Feature Cards - Dark Green Themed Shadows */
.mm-feature-card,
.wp-block-group.mm-feature-card {
  background: var(--mm-white);
  padding: 40px 30px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(52, 92, 0, 0.15), 0 2px 4px rgba(52, 92, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(52, 92, 0, 0.08);
  position: relative;
  transform: translateY(0);
  will-change: transform, box-shadow;
}

/* Hover effect with dark green shadow */
.mm-feature-card:hover,
.wp-block-group.mm-feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 32px rgba(52, 92, 0, 0.25), 0 8px 16px rgba(52, 92, 0, 0.15);
  border-color: rgba(157, 255, 32, 0.4);
}

/* Reset on focus */
.mm-feature-card:focus,
.wp-block-group.mm-feature-card:focus {
  outline: none;
  transform: translateY(0);
}

/* ========================================
   Pricing Tables
   ======================================== */

.mm-pricing-card {
  background: var(--mm-white);
  border: 2px solid var(--mm-border-color);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  transition: all 0.3s ease;
}

.mm-pricing-card:hover,
.mm-pricing-card.featured {
  border-color: var(--mm-lime-green);
  box-shadow: var(--mm-shadow-lg);
  transform: scale(1.05);
}

.mm-price {
  font-size: 48px;
  font-weight: 700;
  color: var(--mm-dark-green);
  margin: 20px 0;
}

.mm-price-currency {
  font-size: 24px;
  vertical-align: super;
}

/* ========================================
   Testimonials
   ======================================== */

.mm-testimonial {
  background: var(--mm-bg-secondary);
  padding: 30px;
  border-radius: 12px;
  border-left: 4px solid var(--mm-lime-green);
  margin-bottom: 20px;
}

.mm-testimonial-author {
  font-weight: 600;
  color: var(--mm-dark-green);
  margin-top: 15px;
}

/* ========================================
   Stats / Numbers Section
   ======================================== */

.mm-stat-number {
  font-size: 56px;
  font-weight: 700;
  color: var(--mm-lime-green);
  line-height: 1;
}

.mm-stat-label {
  font-size: 18px;
  color: var(--mm-body-text);
  margin-top: 10px;
}

/* ========================================
   Footer
   ======================================== */

footer,
.wp-block-template-part[data-area="footer"] {
  background-color: var(--mm-dark-green) !important;
  color: var(--mm-white);
}

/* Footer links - ALWAYS VISIBLE with high specificity to override WordPress classes */
footer a,
footer .has-background-color a,
footer .has-text-color a,
footer p a,
.wp-block-template-part[data-area="footer"] a,
.has-secondary-background-color a {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
}

footer a:hover,
footer .has-background-color a:hover,
footer .has-text-color a:hover,
footer p a:hover,
.wp-block-template-part[data-area="footer"] a:hover,
.has-secondary-background-color a:hover {
  color: var(--mm-lime-green) !important;
  transform: translateX(4px);
  text-decoration: none;
}

/* Footer headings */
footer h4,
footer .wp-block-heading,
footer .has-primary-color {
  color: var(--mm-lime-green) !important;
  font-weight: 700;
  margin-bottom: 20px;
  font-size: 18px;
}

/* Footer structure improvements */
footer .wp-block-group.alignwide {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 48px;
  padding: 80px 40px 40px;
}

/* Footer columns */
footer .wp-block-group > .wp-block-group {
  flex: 1;
  min-width: 200px;
}

/* Footer description text */
footer .has-background-color p:not(:has(a)),
footer p.has-white-color {
  color: rgba(255, 255, 255, 0.75) !important;
  line-height: 1.6;
}

/* Footer separator */
footer .wp-block-separator {
  opacity: 0.2;
  margin: 40px 0 32px;
}

/* Footer bottom section */
footer .wp-block-group.alignwide:last-child {
  padding: 24px 40px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Footer bottom links */
footer .wp-block-group.alignwide:last-child p {
  color: rgba(255, 255, 255, 0.65) !important;
}

footer .wp-block-group.alignwide:last-child a {
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 4px;
}

/* Footer brand/logo section */
.mm-footer-brand {
  flex: 1.5 !important;
  max-width: 350px;
}

.mm-footer-brand .wp-block-site-title {
  font-size: 28px;
  margin-bottom: 16px;
  color: var(--mm-lime-green) !important;
}

.mm-footer-brand p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 16px;
}

/* Footer social media icons */
.mm-footer-social {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.mm-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--mm-white) !important;
  transition: all 0.3s ease;
  transform: none !important;
}

/* Touch feedback for social icons */
.mm-footer-social a:active {
  transform: scale(0.9) !important;
  background: rgba(157, 255, 32, 0.8);
}

.mm-footer-social a:hover {
  background: var(--mm-lime-green);
  color: var(--mm-dark-green) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 4px 12px rgba(157, 255, 32, 0.3);
}

.mm-footer-social svg {
  width: 20px;
  height: 20px;
}

/* Responsive footer */
@media (max-width: 768px) {
  footer .wp-block-group.alignwide {
    flex-direction: column;
    padding: 40px 24px 32px;
    gap: 40px;
  }

  footer .wp-block-group > .wp-block-group {
    min-width: 100%;
  }

  footer .wp-block-group.alignwide:last-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
  }

  .mm-footer-brand {
    max-width: 100%;
  }

  /* Increase footer text readability on mobile */
  footer p {
    font-size: 15px !important;
  }

  /* Stack footer bottom links vertically on mobile */
  footer .wp-block-group.alignwide:last-child p {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  footer .wp-block-group.alignwide:last-child p a {
    padding: 8px 0;
    display: inline-block;
  }
}

/* ========================================
   Utility Classes
   ======================================== */

.mm-bg-lime {
  background-color: var(--mm-lime-green);
}

.mm-bg-dark-green {
  background-color: var(--mm-dark-green);
}

.mm-bg-light {
  background-color: var(--mm-light-gray);
}

.mm-text-lime {
  color: var(--mm-lime-green);
}

.mm-text-dark-green {
  color: var(--mm-dark-green);
}

.mm-text-center {
  text-align: center;
}

.mm-section-spacing {
  padding: 80px 0;
}

.mm-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ========================================
   UI/UX Improvements - Dark Background Buttons
   ======================================== */

/* Fix outline buttons on dark backgrounds */
.has-dark-green-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-secondary-background-color .wp-block-button.is-style-outline .wp-block-button__link,
[style*="background-color: #345C00"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="background-color:#345C00"] .wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--mm-white) !important;
  border: 2px solid var(--mm-white) !important;
}

.has-dark-green-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-secondary-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
[style*="background-color: #345C00"] .wp-block-button.is-style-outline .wp-block-button__link:hover,
[style*="background-color:#345C00"] .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--mm-white) !important;
  color: var(--mm-dark-green) !important;
  border-color: var(--mm-white) !important;
}

/* ========================================
   Feature Cards Enhancement
   ======================================== */

/* Additional feature card styling - now consolidated above */
.wp-block-group.is-style-feature-card {
  /* Inherits from .mm-feature-card above */
}

/* Feature card icons */
.mm-feature-card .wp-block-image img,
.wp-block-group.is-style-feature-card .wp-block-image img {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
}

/* Feature card headings */
.mm-feature-card h3,
.mm-feature-card h4,
.wp-block-group.is-style-feature-card h3,
.wp-block-group.is-style-feature-card h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--mm-heading-color) !important;
}

/* Feature card descriptions */
.mm-feature-card p,
.wp-block-group.is-style-feature-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mm-text-light);
  margin-bottom: 0;
}

/* ========================================
   Stats Section Enhancement
   ======================================== */

/* Improved stats boxes with better proportions */
.mm-stat-box,
.wp-block-group.is-style-stat-box {
  background: transparent;
  border: 3px solid var(--mm-lime-green);
  border-radius: 24px;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.3s ease;
}

.mm-stat-box:hover,
.wp-block-group.is-style-stat-box:hover {
  background: rgba(157, 255, 32, 0.05);
  transform: translateY(-4px);
}

.mm-stat-number {
  font-size: 56px;
  font-weight: 800;
  color: var(--mm-lime-green);
  line-height: 1;
  margin-bottom: 16px;
  display: block;
}

.mm-stat-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--mm-white);
  margin-bottom: 8px;
  display: block;
}

.mm-stat-description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

/* ========================================
   Pricing Card Enhancement
   ======================================== */

/* Improved pricing card with better proportions */
.mm-pricing-card {
  background: var(--mm-white);
  border: 3px solid var(--mm-lime-green);
  border-radius: 24px;
  padding: 48px 40px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
}

.mm-pricing-card:hover,
.mm-pricing-card.featured {
  border-color: var(--mm-lime-green);
  box-shadow: 0 16px 32px rgba(157, 255, 32, 0.2);
  transform: translateY(-4px);
}

/* Pricing badge */
.mm-pricing-badge {
  background: var(--mm-lime-green);
  color: var(--mm-dark-green);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 24px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 24px;
}

.mm-price {
  font-size: 56px;
  font-weight: 800;
  color: var(--mm-dark-green);
  margin: 24px 0;
  line-height: 1;
}

.mm-price-period {
  font-size: 16px;
  font-weight: 400;
  color: var(--mm-text-light);
  display: block;
  margin-top: 8px;
}

/* Pricing features list */
.mm-pricing-features {
  list-style: none;
  padding: 0;
  margin: 32px 0;
  text-align: left;
}

.mm-pricing-features li {
  padding: 12px 0;
  padding-left: 32px;
  position: relative;
  color: var(--mm-body-text);
  font-size: 16px;
  line-height: 1.5;
}

.mm-pricing-features li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--mm-lime-green);
  font-weight: 700;
  font-size: 18px;
}

/* ========================================
   Hero Section Improvements
   ======================================== */

/* Better contrast for hero text */
.slider-small-heading {
  color: var(--mm-lime-green) !important;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}

.slider-heading {
  color: var(--mm-white) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.slider-para {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 24px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Hero feature bullets */
.slider-features,
.hero-features {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

.slider-features li,
.hero-features li {
  padding: 8px 0;
  padding-left: 32px;
  position: relative;
  color: rgba(255, 255, 255, 0.95);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

.slider-features li:before,
.hero-features li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--mm-lime-green);
  font-weight: 700;
  font-size: 20px;
}

/* ========================================
   CTA Section Improvements
   ======================================== */

/* Better spacing for CTA sections */
.mm-cta-section {
  padding: 80px 40px;
  text-align: center;
}

.mm-cta-heading {
  font-size: 42px;
  font-weight: 800;
  color: var(--mm-white);
  margin-bottom: 16px;
  line-height: 1.2;
}

.mm-cta-description {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 32px;
}

.mm-cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* ========================================
   Typography Enhancements
   ======================================== */

/* Better heading hierarchy */
h1, .wp-block-heading.has-x-large-font-size {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 24px;
}

h2, .wp-block-heading.has-large-font-size {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 20px;
}

h3 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 16px;
}

p {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.75;
  margin-bottom: 16px;
}

/* Section headings */
.mm-section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--mm-text-light);
  margin-bottom: 12px;
  display: block;
}

/* ========================================
   Responsive Adjustments
   ======================================== */

/* Mobile devices */
@media (max-width: 480px) {
  .mm-stat-number {
    font-size: 36px;
  }

  .mm-price {
    font-size: 42px;
  }

  .mm-section-spacing {
    padding: 40px 0;
  }

  .mm-feature-card,
  .mm-pricing-card {
    padding: 24px 20px;
  }

  .mm-cta-heading {
    font-size: 28px;
  }

  .mm-cta-section {
    padding: 60px 20px;
  }

  .mm-cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .mm-cta-buttons .wp-block-button {
    width: 100%;
  }

  .slider-heading {
    font-size: 32px !important;
  }

  .mm-stat-box,
  .wp-block-group.is-style-stat-box {
    padding: 30px 20px;
  }
}

/* Tablets */
@media (max-width: 768px) {
  .mm-stat-number {
    font-size: 44px;
  }

  .mm-price {
    font-size: 48px;
  }

  .mm-section-spacing {
    padding: 60px 0;
  }

  .mm-feature-card,
  .mm-pricing-card {
    padding: 30px 24px;
  }

  .mm-cta-heading {
    font-size: 36px;
  }

  .mm-cta-section {
    padding: 70px 30px;
  }
}

/* Small laptops */
@media (max-width: 1024px) {
  .mm-container {
    padding: 0 24px;
  }
}

/* Large screens */
@media (min-width: 1440px) {
  .mm-container {
    max-width: 1320px;
  }
}

/* ========================================
   Button Size Variations
   ======================================== */

/* Large button size */
.wp-block-button.is-style-large .wp-block-button__link,
.wp-block-button__link.is-large {
  padding: 16px 40px;
  font-size: 16px;
  min-width: 200px;
}

/* Small button size */
.wp-block-button.is-style-small .wp-block-button__link,
.wp-block-button__link.is-small {
  padding: 10px 24px;
  font-size: 14px;
}

/* Full width button on mobile */
.wp-block-button.is-full-width {
  width: 100%;
}

.wp-block-button.is-full-width .wp-block-button__link {
  width: 100%;
  display: block;
}

/* ========================================
   Grid & Spacing Utilities
   ======================================== */

/* Feature grid - 3 columns on desktop, 2 on tablet, 1 on mobile */
.mm-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 992px) {
  .mm-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .mm-features-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Stats grid - 4 columns on desktop, 2 on tablet, 1 on mobile */
.mm-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 992px) {
  .mm-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .mm-stats-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Pricing grid - for multiple pricing tiers */
.mm-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .mm-pricing-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ========================================
   Image Enhancements
   ======================================== */

/* Hero images with proper positioning */
.mm-hero-image {
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.2);
  max-width: 100%;
  height: auto;
}

/* Feature icons */
.mm-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* Logo styling */
.mm-logo {
  max-height: 48px;
  width: auto;
}

/* ========================================
   Accessibility Enhancements
   ======================================== */

/* Improved focus states */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--mm-lime-green);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(157, 255, 32, 0.2);
}

/* Skip to content link */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--mm-lime-green);
  color: var(--mm-dark-green);
  padding: 12px 24px;
  text-decoration: none;
  font-weight: 600;
  z-index: 10000;
  border-radius: 0 0 8px 0;
}

.skip-to-content:focus {
  top: 0;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   Dark Background Content Improvements
   ======================================== */

/* Ensure text on dark backgrounds is always readable */
.has-dark-green-background-color,
.has-secondary-background-color,
[style*="background-color: #345C00"],
[style*="background-color:#345C00"] {
  color: var(--mm-white) !important;
}

.has-dark-green-background-color h1,
.has-dark-green-background-color h2,
.has-dark-green-background-color h3,
.has-dark-green-background-color h4,
.has-dark-green-background-color h5,
.has-dark-green-background-color h6,
.has-secondary-background-color h1,
.has-secondary-background-color h2,
.has-secondary-background-color h3,
.has-secondary-background-color h4,
.has-secondary-background-color h5,
.has-secondary-background-color h6 {
  color: var(--mm-white) !important;
}

.has-dark-green-background-color p,
.has-secondary-background-color p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ========================================
   Trust Badge / Icon Row Styling
   ======================================== */

.mm-trust-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--mm-border-color);
}

.mm-trust-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--mm-text-light);
  font-weight: 500;
}

.mm-trust-badge svg,
.mm-trust-badge img {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

@media (max-width: 640px) {
  .mm-trust-badges {
    gap: 24px;
  }
}

/* ========================================
   Additional Spacing Utilities
   ======================================== */

.mm-mb-0 { margin-bottom: 0 !important; }
.mm-mb-1 { margin-bottom: 8px !important; }
.mm-mb-2 { margin-bottom: 16px !important; }
.mm-mb-3 { margin-bottom: 24px !important; }
.mm-mb-4 { margin-bottom: 32px !important; }
.mm-mb-5 { margin-bottom: 48px !important; }

.mm-mt-0 { margin-top: 0 !important; }
.mm-mt-1 { margin-top: 8px !important; }
.mm-mt-2 { margin-top: 16px !important; }
.mm-mt-3 { margin-top: 24px !important; }
.mm-mt-4 { margin-top: 32px !important; }
.mm-mt-5 { margin-top: 48px !important; }

.mm-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.mm-py-1 { padding-top: 8px !important; padding-bottom: 8px !important; }
.mm-py-2 { padding-top: 16px !important; padding-bottom: 16px !important; }
.mm-py-3 { padding-top: 24px !important; padding-bottom: 24px !important; }
.mm-py-4 { padding-top: 32px !important; padding-bottom: 32px !important; }
.mm-py-5 { padding-top: 48px !important; padding-bottom: 48px !important; }

/* ========================================
   Header & Navigation - Complete System
   ======================================== */

/* Force WordPress navigation to be horizontal */
.wp-block-navigation.is-horizontal,
.wp-block-navigation[data-orientation="horizontal"],
nav.wp-block-navigation {
  flex-direction: row !important;
  overflow: visible !important;
}

.wp-block-navigation.is-horizontal .wp-block-navigation__container,
.wp-block-navigation[data-orientation="horizontal"] .wp-block-navigation__container,
nav.wp-block-navigation .wp-block-navigation__container {
  flex-direction: row !important;
  display: flex !important;
  overflow: visible !important;
  max-width: none !important;
  width: auto !important;
}

/* ===== 1. HEADER CONTAINER ===== */
.mm-main-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--mm-white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
  isolation: auto !important;
}

/* Prevent WordPress from adding stacking contexts to header children */
.mm-main-header *,
.mm-main-header .wp-block-group {
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
  isolation: auto !important;
}

/* Force header containers to allow overflow - prevents dropdown clipping */
.mm-main-header,
.mm-main-header .wp-block-group,
.mm-main-header > * {
  overflow: visible !important;
  clip-path: none !important;
}

/* Horizontal alignment fix */
.mm-main-header .wp-block-group.alignwide {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  overflow: visible !important;
}

.mm-header-left,
.mm-header-right {
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

.mm-header-left {
  flex: 1;
  gap: 56px !important;
  overflow: visible !important;
  max-width: none !important;
}

.mm-header-right {
  flex-shrink: 0;
  overflow: visible !important;
}

/* Remove transforms that create stacking contexts */

/* Scrolled state */
.mm-main-header.scrolled {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* ===== 2. LOGO & BRANDING ===== */
.mm-logo-container {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  flex-shrink: 0;
}

.mm-site-logo {
  display: flex !important;
  align-items: center !important;
}

.mm-site-logo img {
  max-height: 40px;
  width: auto;
  display: block;
}

.wp-block-site-title {
  margin: 0 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}

.wp-block-site-title a {
  text-decoration: none;
  color: var(--mm-heading-color);
  font-size: 24px;
  font-weight: 700;
  transition: color 0.3s ease;
}

.wp-block-site-title a:hover {
  color: var(--mm-lime-green);
}

/* ===== 3. DESKTOP NAVIGATION ===== */
.mm-main-navigation {
  gap: 32px;
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  overflow: visible !important;
  max-width: none !important;
  width: auto !important;
  position: relative !important;
  z-index: 100 !important;
}

/* Force horizontal layout for navigation container */
.mm-main-navigation .wp-block-navigation__container,
.mm-main-navigation > ul,
.mm-main-navigation .wp-block-navigation-item__container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 40px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
}

.mm-main-navigation .wp-block-navigation-item {
  position: relative;
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  margin: 0 !important;
}

/* Ensure navigation items display inline */
.mm-main-navigation .wp-block-navigation-item,
.mm-main-navigation .wp-block-navigation-item__content {
  display: inline-flex !important;
  align-items: center !important;
}

/* Override any vertical stacking */
.wp-block-navigation.mm-main-navigation {
  flex-wrap: nowrap !important;
}

.wp-block-navigation.mm-main-navigation .wp-block-navigation__container {
  flex-wrap: nowrap !important;
}

.mm-main-navigation .wp-block-navigation-item > a {
  color: var(--mm-body-text);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  transition: color 0.3s ease;
  padding: 8px 4px;
  position: relative;
}

.mm-main-navigation .wp-block-navigation-item > a:hover {
  color: var(--mm-dark-green);
}

/* Active/current menu item */
.mm-main-navigation .current-menu-item > a,
.mm-main-navigation .wp-block-navigation-item.current > a {
  color: var(--mm-dark-green);
  font-weight: 600;
}

/* ===== 4. DROPDOWN MENUS (Desktop) ===== */
/* Multiple selectors to catch all variations */
.mm-main-navigation .wp-block-navigation .has-child .wp-block-navigation__submenu-container,
.mm-main-navigation .wp-block-navigation__submenu-container,
.mm-main-navigation .wp-block-navigation-submenu .wp-block-navigation__submenu-container,
nav.wp-block-navigation .wp-block-navigation__submenu-container,
.wp-block-navigation.mm-main-navigation .wp-block-navigation__submenu-container {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 9999 !important;
  background: var(--mm-white) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  padding: 8px !important;
  border: 1px solid var(--mm-border-color) !important;
  min-width: 220px !important;
  width: auto !important;
  max-width: 280px !important;
  margin-top: 0 !important;
  padding-top: 12px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
  transition: opacity 0.2s ease, visibility 0.2s !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  pointer-events: auto !important;
  flex-direction: column !important;
  isolation: auto !important;
}

/* Navigation item with dropdown - prevent stacking context */
.mm-main-navigation .wp-block-navigation .has-child,
.mm-main-navigation .wp-block-navigation-submenu,
.mm-main-navigation .has-child {
  position: relative !important;
  z-index: 10 !important;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
  isolation: auto !important;
}

.mm-main-navigation .wp-block-navigation .has-child:hover,
.mm-main-navigation .wp-block-navigation .has-child:focus-within,
.mm-main-navigation .wp-block-navigation-submenu:hover,
.mm-main-navigation .has-child:hover {
  z-index: 10 !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* Show dropdown on hover - CRITICAL FIX with WordPress compatibility */
.mm-main-navigation .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):hover > .wp-block-navigation__submenu-container,
.mm-main-navigation .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
.mm-main-navigation .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.mm-main-navigation .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
.mm-main-navigation .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
.mm-main-navigation .wp-block-navigation__submenu-container:hover,
nav.wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* Dropdown submenu container should be vertical list */
.mm-main-navigation .wp-block-navigation__submenu-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  overflow: visible !important;
}

/* CRITICAL: Override any WordPress inline styles on submenu */
.wp-block-navigation__submenu-container[style] {
  z-index: 9999 !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* Dropdown menu items */
.mm-main-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
  display: block !important;
  width: 100% !important;
}

.mm-main-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a {
  display: block !important;
  padding: 10px 16px !important;
  color: var(--mm-body-text) !important;
  font-size: 15px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  width: 100% !important;
}

.mm-main-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
  background: var(--mm-bg-secondary) !important;
  color: var(--mm-dark-green) !important;
}

/* ===== 5. CTA BUTTONS ===== */
.mm-header-buttons {
  display: flex !important;
  gap: 12px;
  align-items: center !important;
  flex-shrink: 0;
}

.mm-header-buttons .wp-block-button {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Sign In button (outline) */
.mm-btn-signin .wp-block-button__link {
  color: var(--mm-body-text);
  border-color: var(--mm-border-color);
  background: transparent;
  transition: all 0.3s ease;
}

.mm-btn-signin .wp-block-button__link:hover {
  color: var(--mm-dark-green);
  border-color: var(--mm-dark-green);
  background: var(--mm-bg-secondary);
}

/* Start Free Trial button (primary) */
.mm-btn-cta .wp-block-button__link {
  background: var(--mm-lime-green);
  color: var(--mm-dark-green);
  border: none;
  box-shadow: 0 2px 8px rgba(157, 255, 32, 0.3);
  transition: all 0.3s ease;
}

.mm-btn-cta .wp-block-button__link:hover {
  background: var(--mm-dark-green);
  color: var(--mm-white);
  box-shadow: 0 4px 12px rgba(52, 92, 0, 0.3);
  transform: translateY(-2px);
}

/* ===== 6. MOBILE MENU (< 782px) ===== */

/* Hamburger menu button */
.wp-block-navigation__responsive-container-open {
  color: var(--mm-heading-color);
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Touch feedback for menu button */
.wp-block-navigation__responsive-container-open:active {
  background: var(--mm-bg-secondary);
  border-radius: 8px;
  transform: scale(0.95);
}

/* Mobile menu overlay */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.3s ease;
}

/* Backdrop fade-in animation */
@keyframes fadeIn {
  from {
    background: rgba(0, 0, 0, 0);
  }
  to {
    background: rgba(0, 0, 0, 0.5);
  }
}

/* Mobile menu content */
.wp-block-navigation__responsive-container-content {
  background: var(--mm-white);
  padding: 24px;
  max-width: 400px;
  height: 100%;
  overflow-y: auto;
  animation: slideInRight 0.3s ease;
}

/* Slide-in animation from right */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Close button */
.wp-block-navigation__responsive-container-close {
  color: var(--mm-heading-color);
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 100001;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Touch feedback for close button */
.wp-block-navigation__responsive-container-close:active {
  background: var(--mm-bg-secondary);
  border-radius: 8px;
  transform: scale(0.95);
}

/* Mobile menu items */
.wp-block-navigation__responsive-container .wp-block-navigation-item {
  margin: 0;
  border-bottom: 1px solid var(--mm-border-color);
}

.wp-block-navigation__responsive-container .wp-block-navigation-item:last-child {
  border-bottom: none;
}

.wp-block-navigation__responsive-container .wp-block-navigation-item > a {
  display: block;
  padding: 18px 16px;
  color: var(--mm-heading-color);
  font-weight: 500;
  font-size: 16px;
  transition: all 0.2s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.wp-block-navigation__responsive-container .wp-block-navigation-item > a:hover {
  background: var(--mm-bg-secondary);
  color: var(--mm-dark-green);
  padding-left: 20px;
}

/* Touch feedback for mobile menu items */
.wp-block-navigation__responsive-container .wp-block-navigation-item > a:active {
  background: rgba(157, 255, 32, 0.2);
  color: var(--mm-dark-green);
  transform: scale(0.98);
}

/* Mobile submenu styling */
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
  position: relative;
  background: var(--mm-bg-secondary);
  margin: 8px 0 8px 20px;
  padding: 8px;
  border-radius: 8px;
  border: none;
  box-shadow: none;
}

.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item a {
  padding: 10px 12px;
  font-size: 15px;
  color: var(--mm-body-text);
}

/* Mobile CTA buttons */
.wp-block-navigation__responsive-container .mm-header-buttons {
  flex-direction: column;
  width: 100%;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--mm-border-color);
  gap: 12px;
}

.wp-block-navigation__responsive-container .mm-header-buttons .wp-block-button {
  width: 100%;
}

.wp-block-navigation__responsive-container .mm-header-buttons .wp-block-button__link {
  width: 100%;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
}

/* ===== 7. RESPONSIVE BREAKPOINTS ===== */

/* Mobile (< 782px) */
@media (max-width: 782px) {
  .mm-site-logo img {
    max-height: 32px;
  }

  .wp-block-site-title a {
    font-size: 20px;
  }

  .mm-main-header {
    padding: 12px 20px;
  }

  /* Hide desktop navigation on mobile */
  .mm-main-navigation .wp-block-navigation__container {
    display: none !important;
  }

  /* Show navigation items when mobile menu is open */
  .mm-main-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Reduce header padding on mobile */
  .mm-main-header .wp-block-group.alignwide {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Reduce logo spacing on mobile */
  .mm-header-left {
    gap: 24px !important;
  }

  /* Optimize button sizing for small screens */
  .mm-btn-signin .wp-block-button__link,
  .mm-btn-cta .wp-block-button__link {
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-size: 13px !important;
  }
}

/* Extra small screens - Additional mobile optimizations */
@media (max-width: 480px) {
  /* Further reduce header padding */
  .mm-main-header .wp-block-group.alignwide {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Tighter logo spacing */
  .mm-header-left {
    gap: 16px !important;
  }

  /* Larger touch areas for submenu items */
  .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item a {
    padding: 14px 16px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* More compact footer on very small screens */
  footer .wp-block-group.alignwide {
    padding: 32px 16px 24px !important;
    gap: 32px !important;
  }

  /* Increase footer link spacing for easier tapping */
  footer a {
    padding: 6px 0 !important;
    display: inline-block;
  }

  /* Stack footer columns with more breathing room */
  footer .wp-block-group > .wp-block-group {
    padding-bottom: 8px;
  }

  /* Optimize CTA buttons for small screens */
  .mm-btn-signin .wp-block-button__link,
  .mm-btn-cta .wp-block-button__link {
    padding-left: 16px !important;
    padding-right: 16px !important;
    font-size: 12px !important;
  }
}

/* Desktop navigation - ensure horizontal layout above mobile breakpoint */
@media (min-width: 783px) {
  .mm-main-navigation .wp-block-navigation__container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow: visible !important;
    max-width: none !important;
    width: auto !important;
  }

  /* Force all navigation items to display horizontally */
  .mm-main-navigation .wp-block-navigation-item {
    display: inline-flex !important;
    overflow: visible !important;
  }

  /* Remove all scrollbars from navigation on desktop */
  .mm-main-navigation,
  .mm-main-navigation * {
    overflow-x: visible !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
  }

  .mm-main-navigation::-webkit-scrollbar,
  .mm-main-navigation *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Submenu dropdowns should be column layout */
  .mm-main-navigation .wp-block-navigation__submenu-container {
    flex-direction: column !important;
    overflow: visible !important;
  }
}

/* Tablet (782px - 1024px) */
@media (min-width: 782px) and (max-width: 1024px) {
  .mm-main-navigation {
    gap: 24px;
  }

  .mm-main-navigation .wp-block-navigation-item > a {
    font-size: 15px;
  }

  .mm-header-buttons {
    gap: 10px;
  }

  .mm-btn-signin .wp-block-button__link,
  .mm-btn-cta .wp-block-button__link {
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* Desktop (> 1024px) */
@media (min-width: 1024px) {
  .mm-main-header .wp-block-group.alignwide {
    max-width: 1400px;
    padding: 16px 40px;
  }
}

/* ========================================
   Animations
   ======================================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mm-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* ========================================
   Accessibility
   ======================================== */

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

/* Focus states for accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus {
  outline: 2px solid var(--mm-lime-green);
  outline-offset: 2px;
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
  .wp-block-navigation,
  footer,
  .wp-block-button {
    display: none;
  }
}

/* ========================================
   BLOG & CONTENT TEMPLATES
   ======================================== */

/* ----------------------------------
   Table of Contents (TOC)
   ---------------------------------- */
.mm-toc {
  position: sticky;
  top: 100px;
  background: var(--mm-bg-secondary);
  border-left: 4px solid var(--mm-lime-green);
}

.mm-toc ol {
  list-style: none;
  counter-reset: toc-counter;
  padding-left: 0;
}

.mm-toc ol li {
  counter-increment: toc-counter;
  position: relative;
  padding-left: 30px;
  margin-bottom: 8px;
}

.mm-toc ol li::before {
  content: counter(toc-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  background: var(--mm-lime-green);
  color: var(--mm-dark-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.mm-toc a {
  color: var(--mm-heading-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.mm-toc a:hover {
  color: var(--mm-dark-green);
}

/* ----------------------------------
   Social Share Buttons
   ---------------------------------- */
.mm-social-share {
  background: var(--mm-bg-secondary);
}

.mm-share-twitter .wp-block-button__link {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.mm-share-twitter .wp-block-button__link:hover {
  background: #333333 !important;
  border-color: #333333 !important;
}

.mm-share-linkedin .wp-block-button__link {
  background: #0077b5 !important;
  color: #ffffff !important;
  border-color: #0077b5 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.mm-share-linkedin .wp-block-button__link:hover {
  background: #005885 !important;
  border-color: #005885 !important;
}

.mm-share-facebook .wp-block-button__link {
  background: #1877f2 !important;
  color: #ffffff !important;
  border-color: #1877f2 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.mm-share-facebook .wp-block-button__link:hover {
  background: #145dbf !important;
  border-color: #145dbf !important;
}

.mm-share-whatsapp .wp-block-button__link {
  background: #25d366 !important;
  color: #ffffff !important;
  border-color: #25d366 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.mm-share-whatsapp .wp-block-button__link:hover {
  background: #1da851 !important;
  border-color: #1da851 !important;
}

.mm-share-copy .wp-block-button__link {
  background: var(--mm-heading-color) !important;
  color: var(--mm-white) !important;
  border-color: var(--mm-heading-color) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.mm-share-copy .wp-block-button__link:hover {
  background: #000000 !important;
  border-color: #000000 !important;
}

/* ----------------------------------
   Author Bio Sections
   ---------------------------------- */
.mm-author-bio {
  background: var(--mm-bg-secondary);
  border: 1px solid var(--mm-border-color);
  transition: box-shadow 0.3s ease;
}

.mm-author-bio:hover {
  box-shadow: 0 8px 16px rgba(52, 92, 0, 0.1);
}

.mm-author-bio-inline {
  background: var(--mm-bg-secondary);
}

.mm-author-avatar-large {
  border: 4px solid var(--mm-lime-green);
}

/* ----------------------------------
   Related Posts
   ---------------------------------- */
.mm-related-posts .mm-related-post-card {
  background: var(--mm-bg-secondary);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mm-related-posts .mm-related-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(52, 92, 0, 0.15);
}

.mm-related-posts .wp-block-post-featured-image img {
  transition: transform 0.3s ease;
}

.mm-related-posts .mm-related-post-card:hover .wp-block-post-featured-image img {
  transform: scale(1.05);
}

.mm-card-category .wp-block-post-terms__separator {
  display: none;
}

.mm-card-category a {
  background: var(--mm-lime-green);
  color: var(--mm-dark-green);
  padding: 4px 12px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ----------------------------------
   Post Cards (Archive/Category)
   ---------------------------------- */
.mm-post-card {
  transition: all 0.3s ease;
}

.mm-post-card:hover {
  background: var(--mm-bg-secondary);
  padding: 20px;
  margin: -20px;
  border-radius: 12px;
}

.mm-post-card .wp-block-post-featured-image img {
  transition: transform 0.3s ease;
}

.mm-post-card:hover .wp-block-post-featured-image img {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(52, 92, 0, 0.2);
}

.mm-post-category .wp-block-post-terms__separator {
  display: none;
}

.mm-post-category a {
  background: var(--mm-lime-green);
  color: var(--mm-dark-green);
  padding: 4px 12px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.mm-reading-time {
  color: var(--mm-text-light);
}

/* ----------------------------------
   Breadcrumbs
   ---------------------------------- */
.mm-breadcrumbs a {
  color: var(--mm-heading-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.mm-breadcrumbs a:hover {
  color: var(--mm-dark-green);
  text-decoration: underline;
}

/* ----------------------------------
   Comparison Table
   ---------------------------------- */
.mm-comparison-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--mm-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.mm-comparison-table thead {
  background: var(--mm-dark-green);
  color: var(--mm-white);
}

.mm-comparison-table thead th {
  padding: 20px 16px;
  font-weight: 700;
  text-align: left;
  border-bottom: 2px solid var(--mm-lime-green);
}

.mm-comparison-table thead th:nth-child(2) {
  background: var(--mm-lime-green);
  color: var(--mm-dark-green);
}

.mm-comparison-table tbody tr {
  transition: background 0.3s ease;
}

.mm-comparison-table tbody tr:nth-child(even) {
  background: var(--mm-bg-secondary);
}

.mm-comparison-table tbody tr:hover {
  background: rgba(157, 255, 32, 0.1);
}

.mm-comparison-table tbody td {
  padding: 16px;
  border-bottom: 1px solid var(--mm-border-color);
}

.mm-comparison-table tbody td:nth-child(2) {
  font-weight: 600;
  color: var(--mm-dark-green);
}

/* ----------------------------------
   Newsletter Forms
   ---------------------------------- */
.mm-newsletter-form input[type="email"],
.mm-newsletter-form-inline input[type="email"] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.3s ease;
}

.mm-newsletter-form input[type="email"]:focus,
.mm-newsletter-form-inline input[type="email"]:focus {
  outline: none;
  border-color: var(--mm-lime-green);
  box-shadow: 0 0 0 3px rgba(157, 255, 32, 0.2);
}

.mm-newsletter-form button,
.mm-newsletter-form-inline button {
  transition: all 0.3s ease;
}

.mm-newsletter-form button:hover,
.mm-newsletter-form-inline button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ----------------------------------
   Sidebar Components
   ---------------------------------- */
.mm-sidebar {
  position: relative;
}

.mm-sidebar-newsletter {
  position: sticky;
  top: 100px;
}

.mm-sidebar-search .wp-block-search__input {
  border: 1px solid var(--mm-border-color);
  border-radius: 6px;
  padding: 12px 16px;
  font-family: inherit;
}

.mm-sidebar-search .wp-block-search__button {
  background: var(--mm-lime-green);
  color: var(--mm-dark-green);
  border: none;
  border-radius: 6px;
  padding: 12px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mm-sidebar-search .wp-block-search__button:hover {
  background: var(--mm-dark-green);
  color: var(--mm-white);
}

.mm-popular-posts .wp-block-post-featured-image {
  overflow: hidden;
  border-radius: 8px;
}

.mm-popular-posts .wp-block-post-featured-image img {
  transition: transform 0.3s ease;
}

.mm-popular-posts .wp-block-post-featured-image:hover img {
  transform: scale(1.1);
}

.mm-popular-posts .wp-block-post-title a {
  color: var(--mm-heading-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.mm-popular-posts .wp-block-post-title a:hover {
  color: var(--mm-dark-green);
}

.mm-sidebar-categories ul,
.mm-category-list {
  list-style: none;
  padding-left: 0;
}

.mm-sidebar-categories li,
.mm-category-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--mm-border-color);
}

.mm-sidebar-categories li:last-child,
.mm-category-list li:last-child {
  border-bottom: none;
}

.mm-sidebar-categories a,
.mm-category-list a {
  color: var(--mm-heading-color);
  text-decoration: none;
  transition: color 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mm-sidebar-categories a:hover,
.mm-category-list a:hover {
  color: var(--mm-dark-green);
  padding-left: 8px;
}

.mm-tag-cloud a {
  display: inline-block;
  background: var(--mm-bg-secondary);
  color: var(--mm-heading-color);
  padding: 6px 14px;
  border-radius: 20px;
  text-decoration: none;
  margin: 4px;
  font-size: 13px;
  transition: all 0.3s ease;
}

.mm-tag-cloud a:hover {
  background: var(--mm-lime-green);
  color: var(--mm-dark-green);
  transform: translateY(-2px);
}

/* ----------------------------------
   Comments Section
   ---------------------------------- */
.mm-comments .wp-block-comment-template {
  list-style: none;
  padding-left: 0;
}

.mm-comments .wp-block-comment-template .wp-block-comment {
  margin-bottom: 20px;
}

.mm-comments .wp-block-avatar img {
  border-radius: 50%;
  border: 2px solid var(--mm-border-color);
}

.mm-comments .wp-block-comment-author-name {
  font-weight: 600;
  color: var(--mm-heading-color);
}

.mm-comments .wp-block-comment-date {
  color: var(--mm-text-light);
  font-size: 14px;
}

.mm-comments .wp-block-comment-reply-link {
  color: var(--mm-dark-green);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.mm-comments .wp-block-comment-reply-link:hover {
  color: var(--mm-lime-green);
}

/* ----------------------------------
   Block Patterns
   ---------------------------------- */

/* Blog CTA Box */
.mm-blog-cta-box {
  background: var(--mm-bg-secondary);
  border: 2px solid var(--mm-lime-green);
  transition: all 0.3s ease;
}

.mm-blog-cta-box:hover {
  box-shadow: 0 12px 28px rgba(52, 92, 0, 0.2);
  transform: translateY(-4px);
}

/* Testimonial Card */
.mm-testimonial-card {
  background: var(--mm-bg-secondary);
  transition: all 0.3s ease;
}

.mm-testimonial-card:hover {
  box-shadow: 0 8px 20px rgba(52, 92, 0, 0.15);
  transform: translateY(-4px);
}

/* Stats Box */
.mm-stats-box {
  background: linear-gradient(135deg, var(--mm-dark-green) 0%, #234000 100%);
  box-shadow: 0 12px 28px rgba(52, 92, 0, 0.3);
}

/* ----------------------------------
   Archive/Category Layouts
   ---------------------------------- */
.mm-archive-search .wp-block-search__input,
.mm-category-search .wp-block-search__input {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 30px;
  padding: 14px 24px;
  font-size: 16px;
  width: 100%;
}

.mm-archive-search .wp-block-search__button,
.mm-category-search .wp-block-search__button {
  background: var(--mm-lime-green);
  color: var(--mm-dark-green);
  border: none;
  border-radius: 30px;
  padding: 14px 28px;
  font-weight: 600;
}

.mm-category-filter select,
.mm-sort-dropdown select {
  padding: 8px 16px;
  border: 1px solid var(--mm-border-color);
  border-radius: 6px;
  font-size: 14px;
  background: var(--mm-white);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.3s ease;
}

.mm-category-filter select:hover,
.mm-sort-dropdown select:hover {
  border-color: var(--mm-lime-green);
}

.mm-category-filter select:focus,
.mm-sort-dropdown select:focus {
  outline: none;
  border-color: var(--mm-lime-green);
  box-shadow: 0 0 0 3px rgba(157, 255, 32, 0.2);
}

/* ----------------------------------
   Post Tags
   ---------------------------------- */
.mm-post-tags .wp-block-post-terms__separator {
  display: none;
}

.mm-post-tags a {
  display: inline-block;
  background: var(--mm-bg-secondary);
  color: var(--mm-heading-color);
  padding: 6px 14px;
  border-radius: 20px;
  text-decoration: none;
  margin: 4px;
  font-size: 13px;
  transition: all 0.3s ease;
}

.mm-post-tags a:hover {
  background: var(--mm-lime-green);
  color: var(--mm-dark-green);
  transform: translateY(-2px);
}

/* ----------------------------------
   Pagination
   ---------------------------------- */
.wp-block-query-pagination {
  margin-top: 60px;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  font-weight: 600;
}

.wp-block-query-pagination a {
  color: var(--mm-heading-color);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.wp-block-query-pagination a:hover {
  background: var(--mm-lime-green);
  color: var(--mm-dark-green);
}

.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers.current {
  background: var(--mm-dark-green);
  color: var(--mm-white);
  padding: 10px 16px;
  border-radius: 6px;
}

/* ----------------------------------
   Post Navigation (Prev/Next)
   ---------------------------------- */
.wp-block-post-navigation-link {
  text-decoration: none;
  color: var(--mm-heading-color);
  transition: all 0.3s ease;
  padding: 16px;
  border-radius: 8px;
  display: block;
}

.wp-block-post-navigation-link:hover {
  background: var(--mm-bg-secondary);
  color: var(--mm-dark-green);
  transform: translateX(4px);
}

.wp-block-post-navigation-link[rel="prev"]:hover {
  transform: translateX(-4px);
}

/* ----------------------------------
   Google Discover & AI Optimization
   ---------------------------------- */

/* Ensure images are high quality */
.wp-block-post-featured-image img {
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* Structured content for AI readability */
article[itemscope][itemtype*="BlogPosting"] {
  position: relative;
}

/* Clear semantic hierarchy */
h1[itemprop="headline"],
h2[itemprop="name"] {
  font-weight: 700;
  line-height: 1.2;
  color: var(--mm-heading-color);
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ======================================== */

/* Mobile devices (default styles above) */

/* Tablets (768px and up) */
@media (min-width: 768px) {
  .mm-toc {
    position: static;
  }
  
  .mm-sidebar-newsletter {
    position: sticky;
  }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
  .mm-post-card:hover {
    margin: 0;
    padding: 0;
    background: transparent;
  }
  
  .mm-related-posts .mm-related-post-card:hover {
    transform: translateY(-8px);
  }
}

/* Large Desktop (1280px and up) */
@media (min-width: 1280px) {
  .mm-main-content {
    font-size: 18px;
    line-height: 1.8;
  }
}

/* Mobile specific adjustments */
@media (max-width: 767px) {
  .mm-toc {
    position: static;
    margin-bottom: 32px;
  }
  
  .mm-social-share .wp-block-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .mm-social-share .wp-block-button {
    width: 100%;
  }
  
  .mm-comparison-table table {
    font-size: 12px;
  }
  
  .mm-comparison-table thead th,
  .mm-comparison-table tbody td {
    padding: 10px 8px;
  }
  
  .mm-blog-cta-box,
  .mm-testimonial-card,
  .mm-stats-box,
  .mm-newsletter-inline {
    padding: 24px;
  }
  
  .mm-sidebar {
    margin-top: 60px;
  }
  
  .mm-related-posts .wp-block-columns {
    flex-direction: column;
  }
}

/* ========================================
   PRINT STYLES FOR BLOG CONTENT
   ======================================== */
@media print {
  .mm-social-share,
  .mm-sidebar,
  .mm-blog-cta-box,
  .mm-newsletter-inline,
  .wp-block-comments,
  .mm-related-posts {
    display: none !important;
  }
  
  .mm-main-content {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .mm-toc {
    border: 1px solid #000;
    page-break-inside: avoid;
  }
}

/* ========================================
   Newsletter Form - Dark Background
   ======================================== */

/* Newsletter input on dark background */
.mm-sidebar-newsletter input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.mm-sidebar-newsletter input[type="email"]:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--mm-lime-green);
  outline: none;
}

.mm-sidebar-newsletter button:hover {
  background: #8FEF10 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(157, 255, 32, 0.3);
}

/* Lead paragraph styling */
.mm-lead-paragraph {
  border-left: 4px solid var(--mm-lime-green);
  padding-left: 24px;
  margin-bottom: 32px;
}