/* ===============================
   ZestyTrek Motorhaus – style.css
   Minimalist, flexbox-only, mobile-first
   =============================== */

/* --------- CSS RESET & BASELINE --------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { padding-left: 1.2rem; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button, input, select, textarea { font: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #0B2545; outline-offset: 2px; }

/* --------- THEME VARIABLES (with fallbacks) --------- */
:root {
  --color-primary: #0B2545;
  --color-secondary: #6B7280;
  --color-accent: #F5F7FA;
  --color-white: #FFFFFF;
  --color-border: #E5E7EB;
  --color-muted: #9CA3AF;
  --shadow-sm: 0 2px 8px rgba(11, 37, 69, 0.06);
  --shadow-md: 0 8px 24px rgba(11, 37, 69, 0.08);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --container-w: 1120px;
}

/* --------- TYPOGRAPHY --------- */
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* body font */
  color: var(--color-primary);
  background: var(--color-white);
  line-height: 1.6;
  font-size: 16px;
}
h1, h2, h3 { font-family: "Trebuchet MS", Verdana, Geneva, Tahoma, sans-serif; letter-spacing: 0.2px; }
h1 { font-size: 36px; line-height: 1.2; font-weight: 700; }
h2 { font-size: 28px; line-height: 1.3; font-weight: 700; margin-bottom: 16px; }
h3 { font-size: 20px; line-height: 1.4; font-weight: 700; }
p { color: var(--color-secondary); font-size: 16px; }
strong { font-weight: 700; color: var(--color-primary); }
small { font-size: 14px; color: var(--color-muted); }

/* Responsive type scale */
@media (min-width: 768px) {
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
  h3 { font-size: 22px; }
  p { font-size: 17px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 48px; }
}

/* --------- LAYOUT PRIMITIVES --------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 20px;
}
.content-wrapper {
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
section { padding: 40px 0; margin-bottom: 60px; }

/* 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; }
.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; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Utilities */
.hidden { display: none !important; }
.no-scroll { overflow: hidden; }
.muted { color: var(--color-muted); }
.divider { height: 1px; width: 100%; background: var(--color-border); }
.spacer-20 { height: 20px; }
.spacer-40 { height: 40px; }

/* --------- HEADER & NAV --------- */
header { position: sticky; top: 0; background: var(--color-white); border-bottom: 1px solid var(--color-border); z-index: 1000; }
header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; }
header img { height: 32px; width: auto; }

.main-nav { display: none; align-items: center; gap: 16px; }
.main-nav a { color: var(--color-primary); padding: 8px 10px; border-radius: 6px; transition: color .2s ease, background-color .2s ease; }
.main-nav a:hover { background: var(--color-accent); }

.header-cta { display: none; align-items: center; gap: 10px; }

.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border); background: var(--color-white); color: var(--color-primary); border-radius: 8px; cursor: pointer; transition: background .2s ease, transform .1s ease; }
.mobile-menu-toggle:hover { background: var(--color-accent); }
.mobile-menu-toggle:active { transform: scale(0.98); }

/* Desktop nav */
@media (min-width: 992px) {
  .main-nav { display: flex; }
  .header-cta { display: flex; }
  .mobile-menu-toggle { display: none; }
}

/* --------- MOBILE MENU OVERLAY --------- */
.mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 420px; background: var(--color-white); box-shadow: var(--shadow-md); transform: translateX(100%); transition: transform .3s ease; z-index: 1200; display: flex; flex-direction: column; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; margin: 14px; width: 40px; height: 40px; border: 1px solid var(--color-border); background: var(--color-white); color: var(--color-primary); border-radius: 8px; cursor: pointer; }
.mobile-nav { display: flex; flex-direction: column; gap: 8px; padding: 10px 20px 30px; }
.mobile-nav a { padding: 12px 10px; border-radius: 8px; color: var(--color-primary); transition: background .2s ease; }
.mobile-nav a:hover { background: var(--color-accent); }

/* Optional dim overlay when menu open */
.mobile-menu-backdrop { position: fixed; inset: 0; background: rgba(11,37,69,0.32); opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 1100; }
.mobile-menu-backdrop.show { opacity: 1; pointer-events: auto; }

/* --------- HERO --------- */
.hero { background: var(--color-accent); border-bottom: 1px solid var(--color-border); }
.hero .content-wrapper { gap: 16px; padding-top: 8px; }
.hero p { max-width: 70ch; }
.trust-badges { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.trust-badges img { height: 28px; width: auto; filter: grayscale(100%); opacity: 0.8; }

/* --------- BUTTONS --------- */
.btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 10px; font-weight: 700; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .05s ease; gap: 8px; }
.btn-primary { background: var(--color-primary); color: var(--color-white); border: 1px solid var(--color-primary); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: #0d2e57; border-color: #0d2e57; }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
.btn-secondary:hover { background: var(--color-accent); }

.cta-group { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* --------- FEATURES --------- */
.features .feature-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.feature-item { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px; width: 100%; box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .12s ease; }
.feature-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.feature-item img { height: 36px; width: 36px; }
@media (min-width: 768px) {
  .features .feature-grid .feature-item { flex: 1 1 calc(33% - 20px); max-width: calc(33% - 20px); }
}

/* --------- SERVICES CARDS --------- */
.service-cards { display: flex; flex-wrap: wrap; gap: 20px; }
.service-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; flex: 1 1 260px; min-width: 260px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; }
.service-card a { color: var(--color-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.service-card:hover { box-shadow: var(--shadow-md); }

/* --------- PROCESS / LISTS / OL --------- */
ol { display: flex; flex-direction: column; gap: 8px; padding-left: 1.2rem; }
ul { display: flex; flex-direction: column; gap: 8px; }
.benefit-list, .brand-coverage-list, .vision-points, .values-list, .usp-bullets, .maintenance-packages, .pickup-delivery-options, .safety-checks-list, .capability-list, .cookie-categories, .what-to-bring-list, .vehicle-details-fields, .service-selector, .preferred-time-picker, .next-steps-list { list-style: disc; padding-left: 1.2rem; }
.icon-list { list-style: none; padding-left: 0; }
.icon-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.icon-list img { height: 22px; width: 22px; }

/* --------- STATS --------- */
.stats .stat-counters { display: flex; flex-wrap: wrap; gap: 16px; }
.stats .stat-counters > div { flex: 1 1 160px; min-width: 160px; background: var(--color-accent); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; text-align: center; box-shadow: var(--shadow-sm); }
.stats .stat-counters strong { font-size: 24px; }

.certifications-list { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding-left: 0; }
.certifications-list li { background: var(--color-accent); border: 1px solid var(--color-border); border-radius: 999px; padding: 6px 12px; font-size: 14px; }

/* --------- TESTIMONIALS --------- */
.testimonials { background: var(--color-accent); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.testimonial-slider { display: flex; flex-wrap: wrap; gap: 16px; }
.testimonial-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-primary); box-shadow: var(--shadow-sm); flex: 1 1 280px; min-width: 260px; }
.testimonial-card p { color: var(--color-primary); }
.testimonial-card span { color: var(--color-secondary); font-size: 14px; }
.rating-summary { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.rating-summary img { height: 22px; }

/* --------- EQUIPMENT / QUALITY --------- */
.quality-standards, .equipment-highlights, .oem-oee-overview, .warranty-terms, .package-comparison, .disclaimer-notes, .case-study-summaries, .turnaround-times, .pricing-notes, .response-time-info, .follow-up-explanation, .mission-statement, .brand-story, .milestones-timeline, .awards-highlights, .jurisdiction-info, .limitations-of-liability, .consent-management-info, .request-procedure, .service-highlights, .confirmation-details { background: var(--color-accent); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; }
.awards-highlights { display: flex; align-items: center; gap: 10px; }

/* --------- VEHICLES LIST --------- */
.vehicle-list ul { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 12px; }
.vehicle-list li { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px; box-shadow: var(--shadow-sm); }
.availability-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: #E8EEF6; color: var(--color-primary); font-size: 12px; border: 1px solid #d6e2f0; }

/* --------- TABLES (PRICING) --------- */
.pricing-table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.pricing-table th, .pricing-table td { border: 1px solid var(--color-border); padding: 14px; text-align: left; }
.pricing-table th { background: var(--color-accent); font-weight: 700; }

/* --------- FAQ ACCORDION (static styles) --------- */
.faq-accordion { display: flex; flex-direction: column; gap: 12px; }
.faq-accordion > div { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px; background: var(--color-white); box-shadow: var(--shadow-sm); }
.faq-accordion h3 { margin-bottom: 6px; }

/* --------- CTA SECTIONS --------- */
.main-cta .content-wrapper { align-items: flex-start; gap: 14px; }
.main-cta { background: var(--color-white); }

/* --------- CONTACT BLOCKS --------- */
.contact-block { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.contact-details { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; }
.contact-details p { display: flex; align-items: center; gap: 10px; }
.map-placeholder { flex: 1 1 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; background: var(--color-accent); }
.phone-email { display: flex; flex-direction: column; gap: 6px; }

/* --------- ABOUT / STATS extras --------- */
.milestones-timeline ul { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 8px; }

/* --------- FOOTER --------- */
footer { background: var(--color-accent); border-top: 1px solid var(--color-border); }
.footer-main { display: flex; flex-wrap: wrap; gap: 16px; padding: 24px 0; }
.footer-brand { display: flex; flex-direction: column; gap: 8px; }
.footer-quick-links, .footer-legal-links, .footer-newsletter, .footer-social { display: flex; flex-direction: column; gap: 8px; }
.footer-social { flex-direction: row; }
.footer-social img { height: 22px; width: 22px; opacity: 0.8; transition: opacity .2s ease; }
.footer-social a:hover img { opacity: 1; }
footer a { color: var(--color-primary); }
footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Ensure spacing between all cards/sections */
section + section { margin-top: 20px; }
.service-card, .feature-item, .testimonial-card, .vehicle-list li { margin-bottom: 20px; }

/* --------- ACCESSIBILITY & STATES --------- */
a:hover { color: var(--color-primary); }
::selection { background: rgba(11,37,69,0.12); color: var(--color-primary); }

/* --------- RESPONSIVE ALIGNMENT RULES --------- */
.text-image-section { align-items: center; }
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}

/* --------- PAGE-SPECIFIC TWEAKS --------- */
/* Hero variants */
.thanks-hero, .hero { border-radius: 0; }

/* Rating badges and summaries readable */
.testimonials .rating-summary span { color: var(--color-primary); font-weight: 600; }

/* Tables wrap on small screens */
.pricing { overflow-x: auto; }

/* --------- COOKIE CONSENT BANNER & MODAL --------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; background: var(--color-white); border-top: 1px solid var(--color-border); box-shadow: 0 -8px 24px rgba(11,37,69,0.08); z-index: 1400; display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner .btn-accept { background: var(--color-primary); color: var(--color-white); border: 1px solid var(--color-primary); border-radius: 10px; padding: 10px 14px; font-weight: 700; }
.cookie-banner .btn-reject { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 10px; padding: 10px 14px; font-weight: 700; }
.cookie-banner .btn-settings { background: var(--color-accent); color: var(--color-primary); border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 14px; }

.cookie-modal-overlay { position: fixed; inset: 0; background: rgba(11,37,69,0.32); opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 1490; }
.cookie-modal-overlay.show { opacity: 1; pointer-events: auto; }
.cookie-modal { position: fixed; right: 0; top: 0; bottom: 0; width: 100%; max-width: 520px; background: var(--color-white); border-left: 1px solid var(--color-border); box-shadow: var(--shadow-md); transform: translateX(100%); transition: transform .3s ease; z-index: 1500; display: flex; flex-direction: column; }
.cookie-modal.open { transform: translateX(0); }
.cookie-modal header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.cookie-modal .modal-body { flex: 1; overflow: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px; }
.cookie-toggle { display: inline-flex; align-items: center; width: 44px; height: 26px; border-radius: 999px; background: var(--color-border); position: relative; border: 1px solid var(--color-border); }
.cookie-toggle::after { content: ""; width: 18px; height: 18px; background: var(--color-white); border-radius: 50%; position: relative; left: 3px; box-shadow: var(--shadow-sm); transition: transform .2s ease; }
.cookie-toggle.active { background: #cfe0f2; border-color: #cfe0f2; }
.cookie-toggle.active::after { transform: translateX(16px); }
.cookie-modal .modal-actions { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--color-border); }
.cookie-modal .modal-actions .btn-primary, .cookie-modal .modal-actions .btn-secondary { width: 100%; }

/* --------- MOBILE-FIRST RESPONSIVE --------- */
@media (min-width: 768px) {
  .contact-block { align-items: center; }
  .hero .content-wrapper { max-width: 820px; }
}

@media (min-width: 992px) {
  .footer-main { justify-content: space-between; }
}

/* --------- OPTIONAL GENERIC CARDS --------- */
.card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.card:hover { box-shadow: var(--shadow-md); }

/* --------- POLICIES / LEGAL PAGES --------- */
.policy .content-wrapper { gap: 16px; }
.policy ul { list-style: disc; padding-left: 1.2rem; }

/* --------- HEADER FOOTER SPACING REFINEMENTS --------- */
header .btn-primary, header .btn-secondary { padding: 10px 14px; }

/* --------- PRINT BASICS --------- */
@media print {
  header, footer, .mobile-menu, .cookie-banner, .cookie-modal, .mobile-menu-backdrop { display: none !important; }
  section { margin: 0 0 24px 0; padding: 0; }
}

/* --------- END --------- */