/* =============================
   Peverdisal Fahrzeugfinder – style.css
   Design: gradient_modern (flexbox-only)
   ============================= */

/* -----------------------------
   1) CSS Reset / Normalize
----------------------------- */
* { box-sizing: border-box; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
ol, ul { list-style: disc; padding-left: 20px; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* -----------------------------
   2) Theme Variables & Base
----------------------------- */
:root {
  --color-primary: #0D2B45;
  --color-secondary: #2CA58D;
  --color-accent: #F2F6FA;
  --color-dark: #0B1E33;
  --color-light: #FFFFFF;
  --text-color: #1C2A3A;
  --muted: #6B7A90;
  --ring: rgba(44,165,141,0.35);
  --shadow: 0 6px 20px rgba(13, 43, 69, 0.12);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --transition-fast: 180ms ease;
  --transition-base: 260ms ease;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: var(--text-color);
  background-color: var(--color-accent);
  min-height: 100vh;
  display: flex; /* flexbox-only layout */
  flex-direction: column;
}

/* Typography scale */
h1 { font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif; font-weight: 700; font-size: 28px; line-height: 1.2; color: var(--color-dark); }
h2 { font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif; font-weight: 700; font-size: 22px; line-height: 1.3; color: var(--color-dark); }
h3 { font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.35; color: var(--color-dark); }
p { font-size: 16px; line-height: 1.7; color: var(--text-color); }
strong { font-weight: 700; color: var(--color-dark); }

/* Links */
a { color: var(--color-primary); text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 6px; }

/* Container & Wrappers (Flex-only) */
.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex; /* flex container */
  flex-direction: column;
}
.content-wrapper {
  display: flex; /* flex container */
  flex-direction: column;
  gap: 24px; /* ensure 20px+ gap */
  align-items: flex-start;
  justify-content: flex-start;
}
.text-section {
  display: flex; /* flex container to align nested elements neatly */
  flex-direction: column;
  gap: 12px;
}

/* Spacing for sections (global) */
section { margin-bottom: 60px; padding: 40px 20px; background-color: var(--color-light); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
/* Alternating subtle backgrounds for contemporary rhythm */
main > section:nth-of-type(odd) { background-color: var(--color-accent); box-shadow: none; }
/* Hero (first section) gradient_modern */
main > section:first-of-type {
  background-color: var(--color-primary); /* fallback solid */
  background-image: linear-gradient(135deg, rgba(13,43,69,0.98) 0%, rgba(44,165,141,0.9) 100%);
  color: var(--color-light);
}
main > section:first-of-type h1,
main > section:first-of-type h2,
main > section:first-of-type p,
main > section:first-of-type a { color: #0aaf41; }

/* Lists */
ul, ol { display: flex; flex-direction: column; gap: 8px; }
li { font-size: 16px; }

/* Buttons */
.cta-primary,
.cta-secondary,
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: 999px; transition: transform var(--transition-fast), box-shadow var(--transition-base), background-color var(--transition-base), color var(--transition-base); text-decoration: none; font-weight: 700; }
.cta-primary { color: #fff; background-color: var(--color-secondary); background-image: linear-gradient(135deg, #2CA58D, #0D2B45); box-shadow: 0 8px 18px rgba(44,165,141,0.28); }
.cta-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(13,43,69,0.25); text-decoration: none; }
.cta-secondary { color: var(--color-primary); background-color: #E6F3F0; border: 2px solid rgba(44,165,141,0.35); }
.cta-secondary:hover { background-color: #D9EEE9; transform: translateY(-1px); }
.btn-outline { color: var(--color-primary); background-color: transparent; border: 2px solid var(--color-primary); }
.btn-outline:hover { background-color: var(--color-primary); color: #fff; }

/* Icon alignment within text */
.text-section img[alt] { width: 20px; height: 20px; display: inline-block; vertical-align: text-bottom; margin-right: 8px; }

/* Header */
header { position: sticky; top: 0; z-index: 800; background-color: var(--color-light); background-image: linear-gradient(180deg, #FFFFFF 0%, #F8FBFD 100%); box-shadow: 0 2px 12px rgba(13,43,69,0.06); }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; padding: 14px 0; gap: 16px; }
.logo img { height: 40px; width: auto; }

/* Main navigation (desktop) */
.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.main-nav a { color: var(--color-primary); padding: 8px 10px; border-radius: 8px; }
.main-nav a:hover { background: #ECF7F4; text-decoration: none; }

/* Mobile menu toggle */
.mobile-menu-toggle { display: none; width: 40px; height: 40px; border-radius: 10px; background-color: var(--color-primary); color: #fff; align-items: center; justify-content: center; }
.mobile-menu-toggle:hover { filter: brightness(1.05); }

/* Mobile menu overlay */
.mobile-menu { position: fixed; inset: 0; background-color: #FFFFFF; background-image: linear-gradient(180deg, #FFFFFF 0%, #F3F8FB 100%); transform: translateX(100%); transition: transform 320ms ease; display: flex; flex-direction: column; gap: 16px; padding: 20px; z-index: 1000; }
.mobile-menu.open, .mobile-menu[aria-hidden="false"] { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; width: 40px; height: 40px; border-radius: 10px; background-color: #EDF3F8; color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; }
.mobile-nav { display: flex; flex-direction: column; gap: 10px; }
.mobile-nav a { padding: 14px 12px; border-radius: 10px; background-color: #F6FAFC; color: var(--color-primary); box-shadow: 0 1px 0 rgba(13,43,69,0.06) inset; }
.mobile-nav a:hover { background-color: #EAF3F7; }

/* Footer */
footer { background-color: #596a77; color: #EAF4F1; margin-top: auto; }
footer .content-wrapper { padding: 32px 0; gap: 18px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-nav a { color: #EAF4F1; opacity: 0.95; padding: 6px 8px; border-radius: 6px; }
.footer-nav a:hover { background-color: rgba(255,255,255,0.08); text-decoration: none; }
footer a { color: #C7F1E6; }

/* Cards & Layout helpers (Flex-only) */
/* 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; }
/* End mandatory block */

/* Actual card visuals */
.card, .feature-item { background: #fff; border: 1px solid #ECF1F6; border-radius: var(--radius-md); box-shadow: var(--shadow); padding: 18px; }
.card:hover, .feature-item:hover { transform: translateY(-2px); transition: transform var(--transition-fast), box-shadow var(--transition-base); box-shadow: 0 10px 24px rgba(13,43,69,0.16); }

/* Testimonials – high contrast, light background (requirement) */
.testimonial-card { background: #FFFFFF; border: 1px solid #E5EEF4; border-radius: var(--radius-md); box-shadow: var(--shadow); color: var(--color-dark); }
.testimonial-card p { color: var(--color-dark); }

/* Forms (generic) */
input, textarea, select { width: 100%; padding: 12px 14px; border: 1px solid #DCE7EF; border-radius: 10px; background: #fff; color: var(--text-color); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
input:focus, textarea:focus, select:focus { border-color: var(--color-secondary); box-shadow: 0 0 0 4px var(--ring); outline: none; }
label { font-weight: 700; margin-bottom: 6px; display: inline-block; }

/* Tables (legal pages potential) */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid #E6EEF5; }
th { color: var(--color-dark); font-weight: 700; }

/* Announcements / badges */
.badge { display: inline-flex; align-items: center; gap: 6px; background: #E8FAF5; color: var(--color-primary); border: 1px solid rgba(44,165,141,0.28); padding: 6px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; }

/* Cookie Consent Banner */
.cookie-banner { position: fixed; left: 12px; right: 12px; bottom: 12px; background-color: var(--color-primary); color: #FFFFFF; border-radius: 14px; box-shadow: 0 18px 36px rgba(13,43,69,0.28); padding: 16px; display: none; z-index: 950; }
.cookie-banner.is-visible { display: flex; }
.cookie-banner .cookie-inner { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner .cookie-title { font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif; font-weight: 700; font-size: 16px; }
.cookie-banner .cookie-text { opacity: 0.95; }
.cookie-accept { background-color: #34B59C; color: #fff; }
.cookie-accept:hover { background-color: #2AA189; }
.cookie-reject { background-color: #0E3757; color: #fff; }
.cookie-settings { background-color: #EAF3F7; color: var(--color-primary); }
.cookie-settings:hover { background-color: #DBEBF3; }

/* Cookie Modal */
.cookie-modal { position: fixed; inset: 0; background: rgba(13,43,69,0.55); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 1200; }
.cookie-modal.is-visible { display: flex; }
.cookie-modal-content { width: 100%; max-width: 740px; background: #FFFFFF; border-radius: 14px; box-shadow: 0 24px 48px rgba(13,43,69,0.35); display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.cookie-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cookie-modal-body { display: flex; flex-direction: column; gap: 12px; }
.cookie-modal-footer { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* Toggle switches */
.switch { position: relative; width: 48px; height: 28px; background: #DCE7EF; border-radius: 999px; transition: background var(--transition-fast); display: inline-flex; align-items: center; padding: 3px; }
.switch input { display: none; }
.switch .knob { width: 22px; height: 22px; background: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.15); transition: transform var(--transition-fast), background var(--transition-fast); }
.switch input:checked + .knob { transform: translateX(20px); background: #fff; }
.switch input:checked ~ .switch { background: #29A186; }

/* Utilities */
.muted { color: var(--muted); }
.center { display: flex; align-items: center; justify-content: center; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; }

/* Animations */
@keyframes slideInUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes menuSlide { from { transform: translateX(100%);} to { transform: translateX(0);} }

/* Responsive – Mobile-first */
/* Base already mobile-first; enhance progressively */
@media (min-width: 480px) {
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
}
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
  header .content-wrapper { padding: 16px 0; }
  .text-image-section { flex-direction: row; }
}
@media (min-width: 1024px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
}

/* Mobile navigation visibility rules */
@media (max-width: 992px) {
  .main-nav { display: none; }
  .mobile-menu-toggle { display: inline-flex; }
}

/* Ensure flex direction on small view for text-image sections */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; align-items: flex-start; }
}

/* Header actions spacing on small screens */
@media (max-width: 560px) {
  header .content-wrapper { gap: 10px; }
  .cta-primary { padding: 10px 14px; font-size: 14px; }
}

/* Hero content animation */
main > section:first-of-type .content-wrapper { animation: slideInUp 420ms ease both; }

/* Specific page niceties */
ol { list-style: decimal; padding-left: 20px; }

/* Make sure interactive elements have adequate hit targets */
nav a, .footer-nav a, .mobile-nav a { min-height: 36px; display: inline-flex; align-items: center; }

/* Prevent overlaps via consistent gaps and margins */
section + section { margin-top: 0; } /* already have margin-bottom on previous */

/* Extra: icons inside links spacing */
a img[alt] { margin-right: 8px; }

/* Visual hierarchy tweaks inside sections */
section h1 + p, section h2 + p { margin-top: -6px; opacity: 0.95; }

/* Ensure adequate contrast in testimonial section background variants */
main > section:has(.testimonial-card) { background-color: #FFFFFF; }

/* Accessibility: reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* End of file */