/* =========================
   Crystal Lace Rasenpflege — style.css
   Warm & friendly design system
   Requirements:
   - Mobile-first
   - ONLY Flexbox layouts (no grid/columns)
   - Soft, warm, approachable aesthetics
   - Strong contrast for readability (esp. testimonials)
   - Cookie banner + Mobile menu styling
   ========================= */

/* ============ CSS Reset & Normalize (lean) ============ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
ul, ol { padding-left: 1.2rem; }
a { text-decoration: none; color: inherit; }
button { background: none; border: 0; font: inherit; cursor: pointer; }
input, button, textarea, select { font: inherit; }
:focus-visible { outline: 3px solid #FFB77C; outline-offset: 2px; }

/* ============ Design Tokens ============ */
:root {
  /* Brand */
  --color-primary: #2F6B3F;  /* deep garden green */
  --color-secondary: #1B4332;/* forest green */
  --color-accent: #F3F6F1;   /* light greenish */
  /* Warm Neutrals */
  --color-warm-50: #FFF7EE;  /* warm background */
  --color-warm-100: #FFEFE0; /* subtle section tint */
  --color-warm-200: #FDE4CE; /* accents */
  /* Text & Surfaces */
  --color-text: #243424;     /* dark, friendly */
  --color-muted: #5A6B5F;    /* muted */
  --color-white: #FFFFFF;
  --color-border: #E6E6E0;
  /* Elevation */
  --shadow-soft: 0 6px 18px rgba(0,0,0,0.08);
  --shadow-subtle: 0 2px 8px rgba(0,0,0,0.06);
  /* Radius */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  /* Spacing scale */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-60: 60px;
  /* Transitions */
  --ts-quick: 160ms ease;
  --ts-med: 220ms ease;
}

/* ============ Base Typography ============ */
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: var(--color-text);
  background: var(--color-accent);
  line-height: 1.6;
  font-size: 16px;
}
h1, h2, h3 { font-family: "Trebuchet MS", Verdana, Geneva, Tahoma, sans-serif; color: var(--color-secondary); letter-spacing: 0.2px; }
h1 { font-size: 32px; line-height: 1.2; margin-bottom: var(--space-16); }
h2 { font-size: 24px; line-height: 1.25; margin-bottom: var(--space-16); }
h3 { font-size: 18px; line-height: 1.3; margin-bottom: var(--space-8); color: var(--color-primary); }
p { margin-bottom: var(--space-12); color: var(--color-text); }
.small, small { font-size: 0.875rem; color: var(--color-muted); }

/* Links */
a:hover { color: var(--color-primary); }

/* ============ Layout Helpers ============ */
.container { max-width: 1140px; margin: 0 auto; padding: 0 var(--space-16); width: 100%; }
.content-wrapper { display: flex; flex-direction: column; gap: var(--space-20); align-items: flex-start; }

/* MANDATORY: spacing and alignment patterns */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); padding: var(--space-20); }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-subtle); border: 1px solid var(--color-border); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Consistent gaps for lists/grids across pages */
.feature-grid, .service-cards, .service-list, .addon-services-list, .faq-list, .testimonials-list, .pricing-table, .contact-cards {
  display: flex; flex-wrap: wrap; gap: var(--space-20); align-items: stretch;
}
.testimonials-list { align-items: stretch; }

/* Default Section styling */
section { margin-bottom: var(--space-60); }

/* ============ Header ============ */
header { position: sticky; top: 0; z-index: 20; background: var(--color-white); box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-12) 0; }
.brand img { height: 42px; width: auto; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.04)); }

.main-nav { display: none; align-items: center; gap: var(--space-16); }
.main-nav a { padding: 10px 12px; border-radius: var(--radius-sm); color: var(--color-secondary); }
.main-nav a:hover { background: var(--color-accent); color: var(--color-primary); }

.header-cta { display: none; gap: var(--space-12); align-items: center; }

.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-warm-100); color: var(--color-secondary); box-shadow: var(--shadow-subtle); }
.mobile-menu-toggle:hover { background: var(--color-warm-200); }

/* ============ Buttons ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: var(--radius-md); font-weight: 700; transition: background var(--ts-med), color var(--ts-med), box-shadow var(--ts-med), transform var(--ts-quick); box-shadow: var(--shadow-subtle); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: #275b36; box-shadow: var(--shadow-soft); }

.btn-secondary { background: var(--color-warm-200); color: var(--color-secondary); }
.btn-secondary:hover { background: #ffd9b8; box-shadow: var(--shadow-soft); }

.cta-group { display: flex; gap: var(--space-12); flex-wrap: wrap; }

/* ============ Hero ============ */
.hero { background: var(--color-warm-50); border-bottom: 1px solid var(--color-border); }
.hero .content-wrapper { padding: var(--space-32) 0 var(--space-24); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--color-warm-200); color: var(--color-secondary); padding: 6px 10px; border-radius: 999px; font-weight: 700; font-size: 0.875rem; }
.subheadline { color: var(--color-muted); font-size: 1rem; }

/* Trust badges */
.trust-badges { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-subtle); color: var(--color-secondary); }
.badge img { width: 20px; height: 20px; }

/* ============ Text Sections as Cards ============ */
.text-section { background: var(--color-white); border-radius: var(--radius-md); padding: var(--space-20); box-shadow: var(--shadow-subtle); border: 1px solid var(--color-border); flex: 1 1 260px; }
.text-section:hover { box-shadow: var(--shadow-soft); }

/* Lists common styling */
ul, ol { display: flex; flex-direction: column; gap: 8px; }
ul li, ol li { color: var(--color-text); }

/* Specific lists */
.supporting-points, .usp-list, .included-items-list, .benefits-list, .package-inclusions, .addons-list, .surcharge-conditions, .industry-segments-list, .metrics-list, .maintenance-improvements, .client-types-list, .use-cases-list, .rights-list, .next-steps-list, .what-to_prepare_list {
  background: var(--color-white); border-radius: var(--radius-md); padding: var(--space-16) var(--space-20); border: 1px solid var(--color-border); box-shadow: var(--shadow-subtle);
}

/* Process steps */
.process-steps { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-20); counter-reset: step; }
.process-steps li { position: relative; padding-left: 36px; }
.process-steps li::before { content: counter(step); counter-increment: step; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-warm-200); color: var(--color-secondary); font-weight: 700; margin-right: 10px; left: -10px; }

.timeline, .turnaround-times, .billing-frequency-options, .value-props, .guarantee-note, .notes-on-scheduling, .disclaimers, .coverage-notes, .contact-prompt, .rating-summary, .guarantee-badge, .response-time-note, .service-window-info, .languages-supported, .how-to-exercise-rights, .noise-reduction-practices, .insurance-note, .energy-use-notes, .link-summary { color: var(--color-secondary); background: var(--color-accent); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-16) var(--space-20); }

/* Pricing table */
.pricing-table { align-items: stretch; }
.pricing-table .text-section { flex: 1 1 280px; border-top: 6px solid var(--color-primary); }
.pricing-table .text-section h3 { margin-top: 0; }

/* Testimonials - ensure high contrast */
.testimonial-card p { margin: 0; color: #222; }
.testimonial-card strong { color: var(--color-secondary); }

/* Before/After */
.before-after { display: flex; flex-direction: column; gap: var(--space-12); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-20); }

/* Contact cards */
.contact-cards .text-section { display: flex; flex-direction: row; align-items: center; gap: var(--space-16); }
.contact-cards .text-section img { width: 28px; height: 28px; }

/* Footer */
footer { background: var(--color-secondary); color: #F0F5F2; padding: var(--space-32) 0; margin-top: var(--space-60); }
footer .content-wrapper { flex-direction: column; align-items: stretch; gap: var(--space-20); }
.footer-nav, .footer-legal, .footer-contact { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.footer-nav a, .footer-legal a { color: #EAF2EC; padding: 6px 10px; border-radius: var(--radius-sm); }
.footer-nav a:hover, .footer-legal a:hover { background: rgba(255,255,255,0.1); }
.brand-tagline { color: #EAF2EC; opacity: 0.9; }

/* Quick links */
.quick-links { display: flex; flex-wrap: wrap; gap: var(--space-8); color: var(--color-secondary); }
.quick-links a { text-decoration: underline; }

/* ============ Mobile Menu ============ */
.mobile-menu { position: fixed; inset: 0; background: rgba(27, 67, 50, 0.1); backdrop-filter: blur(2px); z-index: 1000; display: flex; justify-content: flex-end; pointer-events: none; opacity: 0; transition: opacity var(--ts-med);
}
.mobile-menu .mobile-nav { width: 86%; max-width: 360px; height: 100%; background: var(--color-white); box-shadow: -2px 0 16px rgba(0,0,0,0.12); border-left: 4px solid var(--color-primary); border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); transform: translateX(100%); transition: transform var(--ts-med);
}
.mobile-menu .mobile-nav a { padding: 12px 10px; border-radius: var(--radius-sm); color: var(--color-secondary); font-weight: 700; }
.mobile-menu .mobile-nav a:hover { background: var(--color-accent); color: var(--color-primary); }
.mobile-menu-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; background: var(--color-warm-200); color: var(--color-secondary); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-subtle); }

/* Open states supported */
.mobile-menu.is-open,
.mobile-menu.open,
.mobile-menu.active,
body.menu-open .mobile-menu,
.mobile-menu[aria-hidden="false"] { pointer-events: auto; opacity: 1; }
.mobile-menu.is-open .mobile-nav,
.mobile-menu.open .mobile-nav,
.mobile-menu.active .mobile-nav,
body.menu-open .mobile-menu .mobile-nav,
.mobile-menu[aria-hidden="false"] .mobile-nav { transform: translateX(0); }

/* Prevent scroll when menu is open */
body.menu-open { overflow: hidden; }

/* ============ Cookie Consent ============ */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-12); transform: translateY(120%); opacity: 0; transition: transform var(--ts-med), opacity var(--ts-med);
}
.cookie-banner.show, .cookie-banner.is-visible, .cookie-banner.active { transform: translateY(0); opacity: 1; }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.cookie-banner .btn-cookie-accept { background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-md); padding: 10px 14px; box-shadow: var(--shadow-subtle); }
.cookie-banner .btn-cookie-accept:hover { background: #275b36; }
.cookie-banner .btn-cookie-reject { background: var(--color-warm-200); color: var(--color-secondary); border-radius: var(--radius-md); padding: 10px 14px; }
.cookie-banner .btn-cookie-settings { background: var(--color-accent); color: var(--color-secondary); border-radius: var(--radius-md); padding: 10px 14px; }

/* Cookie modal */
.cookie-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 1100; opacity: 0; pointer-events: none; transition: opacity var(--ts-med); }
.cookie-modal.show, .cookie-modal.active { opacity: 1; pointer-events: auto; }
.cookie-modal .cookie-modal-content { background: var(--color-white); width: 92%; max-width: 720px; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); border: 1px solid var(--color-border); padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-16); }
.cookie-modal .cookie-modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.cookie-modal .cookie-categories { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); background: var(--color-accent); border-radius: var(--radius-md); padding: 12px 14px; }
.cookie-switch { display: inline-flex; align-items: center; gap: 10px; }
/* Basic switch look (for inputs if present) */
.cookie-switch input[type="checkbox"] { appearance: none; width: 44px; height: 24px; border-radius: 999px; background: #d6d6d6; position: relative; transition: background var(--ts-med); }
.cookie-switch input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-white); box-shadow: var(--shadow-subtle); transition: left var(--ts-med); }
.cookie-switch input[type="checkbox"]:checked { background: var(--color-primary); }
.cookie-switch input[type="checkbox"]:checked::after { left: 23px; }
.cookie-modal .cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); justify-content: flex-end; }

/* ============ Cards & Micro-interactions ============ */
.text-section, .card, .testimonial-card { transition: box-shadow var(--ts-med), transform var(--ts-quick); }
.text-section:hover, .card:hover, .testimonial-card:hover { transform: translateY(-2px); }

/* ============ Page-specific helpers ============ */
.area-list { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.area-list li { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 999px; padding: 8px 12px; }

.guarantee-badge { display: inline-flex; align-items: center; gap: 10px; border-left: 6px solid var(--color-primary); }

/* Typography tweaks */
.rating-summary { font-weight: 700; }
.disclaimer-note { font-size: 0.95rem; color: var(--color-muted); }

/* ============ Responsive (mobile-first) ============ */
@media (min-width: 600px) {
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
}

@media (min-width: 768px) {
  body { font-size: 17px; }
  h1 { font-size: 42px; }
  h2 { font-size: 30px; }
  h3 { font-size: 20px; }

  /* Header */
  .main-nav { display: flex; }
  .header-cta { display: flex; }
  .mobile-menu-toggle { display: none; }

  /* Layout rows */
  .content-wrapper { flex-direction: column; }

  .feature-grid, .service-cards, .service-list, .addon-services-list, .faq-list, .testimonials-list, .pricing-table, .contact-cards {
    flex-direction: row; justify-content: flex-start; align-items: stretch;
  }

  .hero .content-wrapper { padding: var(--space-48) 0 var(--space-40); }
}

@media (min-width: 1024px) {
  body { font-size: 18px; }
  h1 { font-size: 48px; }
  h2 { font-size: 34px; }
}

/* ============ Utilities ============ */
.hidden { display: none !important; }
.center { display: flex; align-items: center; justify-content: center; }

/* ============ Ensuring all named classes exist with Flex where layout is needed ============ */
/* Content groups that may appear on any page */
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* Additional wrappers encountered in pages */
.before-after, .pricing, .values-list, .team-list, .certifications-list, .equipment-list, .safety-protocols, .eco-practices { display: flex; flex-direction: column; gap: var(--space-8); }
.values-list, .team-list, .certifications-list, .equipment-list, .safety-protocols, .eco-practices { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-16) var(--space-20); box-shadow: var(--shadow-subtle); }

/* Text emphasis inside sections */
strong { color: var(--color-secondary); }
em { color: var(--color-primary); }

/* ============ Section visual separation ============ */
main > section:nth-child(odd) { background: var(--color-accent); }
main > section:nth-child(even) { background: var(--color-warm-50); }

/* Ensure adequate spacing between all cards/sections */
section .text-section, section .testimonial-card, section .card { margin-bottom: var(--space-20); }

/* ============ Prevent overlap & proper z-index ============ */
header, .mobile-menu, .cookie-modal, .cookie-banner { z-index: 10; }
.mobile-menu { z-index: 1000; }
.cookie-modal { z-index: 1100; }
.cookie-banner { z-index: 1200; }

/* ============ Forms (if added later) ============ */
input[type="text"], input[type="email"], input[type="tel"], textarea { width: 100%; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-white); box-shadow: var(--shadow-subtle) inset; }
input:focus, textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(47,107,63,0.15); }

/* ============ Image and media fit ============ */
.figure, .media { display: flex; flex-direction: column; gap: var(--space-12); }

/* ============ Accessibility contrast for testimonial/review sections ============ */
.testimonials-list, .testimonial-card { background: transparent; }
.testimonial-card { color: #222; }

/* ============ End ============ */