/* ===============================
   Metropol Autokompass - style.css
   Warm & Friendly theme using brand colors
   Mobile-first, Flexbox-only layout
   =============================== */

/* ===============================
   Reset & Base
   =============================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; color: #24323A; background-color: #FFF7F0; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: #1F7A8C; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #FFB48A; outline-offset: 2px; border-radius: 8px; }

/* ===============================
   CSS Custom Properties (with fallbacks in rules)
   =============================== */
:root {
  --brand-primary: #0B2B40; /* deep teal */
  --brand-secondary: #1F7A8C; /* teal */
  --brand-accent: #F2F5F7; /* light cool gray */
  --warm-1: #FFF7F0; /* soft peach */
  --warm-2: #FFE8D6; /* light apricot */
  --warm-3: #FFD9C2; /* peachy */
  --ink: #24323A; /* body text */
  --muted: #6B7A86; /* muted text */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px;
  --shadow-sm: 0 2px 8px rgba(11, 43, 64, 0.08);
  --shadow-md: 0 6px 18px rgba(11, 43, 64, 0.10);
  --shadow-lg: 0 10px 30px rgba(11, 43, 64, 0.14);
}

/* ===============================
   Typography
   =============================== */
h1, h2, h3, h4, h5, h6 { font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; color: var(--brand-primary); margin: 0 0 12px; line-height: 1.25; }
p { margin: 0 0 12px; }
small, .microcopy { font-size: 14px; color: var(--muted); }

/* Type scale (mobile-first) */
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }

@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 32px; }
  h3 { font-size: 24px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 48px; }
}

/* ===============================
   Layout Helpers (Flex-only)
   =============================== */
.container { display: flex; justify-content: center; width: 100%; padding: 0 20px; }
.content-wrapper { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 1120px; margin: 0 auto; }

/* Mandatory spacing patterns */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: #FFFFFF; border: 1px solid var(--brand-accent); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 20px; }
.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: #FFFFFF; border: 1px solid #E9EEF1; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: #222; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Generic sections */
section { margin-bottom: 60px; padding: 40px 0; }

/* ===============================
   Header & Navigation
   =============================== */
header { background: #FFFFFF; box-shadow: 0 1px 0 rgba(11,43,64,0.08); position: sticky; top: 0; z-index: 1500; }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 0; gap: 16px; }
.logo img { height: 40px; width: auto; }

.main-nav { display: none; align-items: center; gap: 10px; }
.main-nav a { padding: 10px 12px; border-radius: var(--radius-sm); color: var(--brand-primary); font-weight: 600; transition: background-color 200ms ease, color 200ms ease, transform 120ms ease; }
.main-nav a:hover { background: var(--warm-2); color: var(--brand-primary); text-decoration: none; }
.main-nav a:active { transform: translateY(1px); }

.header-cta { display: none; }

.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; background: var(--warm-2); color: var(--brand-primary); border: 1px solid #FFD9C2; border-radius: 999px; padding: 8px 12px; font-size: 20px; line-height: 1; box-shadow: var(--shadow-sm); transition: background-color 200ms ease, transform 120ms ease; }
.mobile-menu-toggle:hover { background: #FFD9C2; }
.mobile-menu-toggle:active { transform: translateY(1px); }

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

/* ===============================
   Mobile Menu (overlay + slide panel)
   =============================== */
.mobile-menu { position: fixed; inset: 0; display: flex; justify-content: flex-end; align-items: stretch; background: rgba(11,43,64,0.25); backdrop-filter: blur(2px); transform: translateX(100%); transition: transform 300ms ease; z-index: 2000; pointer-events: none; }
.mobile-menu[aria-hidden="false"], .mobile-menu.open { transform: translateX(0); pointer-events: auto; }
.mobile-menu-close { position: relative; align-self: flex-start; margin: 16px 16px 0 0; background: var(--warm-2); border: 1px solid #FFD9C2; border-radius: 999px; padding: 8px 10px; font-size: 18px; color: var(--brand-primary); box-shadow: var(--shadow-sm); }
.mobile-nav { display: flex; flex-direction: column; gap: 8px; width: 86%; max-width: 380px; background: #FFFFFF; padding: 24px; border-radius: 16px 0 0 16px; box-shadow: var(--shadow-lg); overflow-y: auto; }
.mobile-nav a { display: flex; align-items: center; padding: 14px 12px; border-radius: var(--radius-md); color: var(--brand-primary); font-weight: 600; background: #FFFFFF; border: 1px solid #EFF3F5; transition: background-color 200ms ease, transform 120ms ease; }
.mobile-nav a:hover { background: var(--warm-2); text-decoration: none; }
.mobile-nav a:active { transform: translateY(1px); }

/* ===============================
   Hero Section
   =============================== */
.hero { background: var(--warm-1); border-bottom: 1px solid #FFE8D6; }
.hero .content-wrapper { padding: 20px 0; }
.hero p { color: #3A4A53; font-size: 16px; }

/* CTA Row */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (min-width: 768px) { .cta-row { gap: 16px; } }

/* ===============================
   Buttons
   =============================== */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 999px; font-weight: 700; border: 2px solid transparent; box-shadow: var(--shadow-sm); transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 120ms ease; }
.button:active { transform: translateY(1px); }
.button.primary { background: var(--brand-secondary); color: #FFFFFF; }
.button.primary:hover { background: #196377; }
.button.primary:focus-visible { border-color: #FFB48A; }

.button.secondary { background: var(--warm-2); color: var(--brand-primary); border-color: #FFD9C2; }
.button.secondary:hover { background: #FFD9C2; }

/* ===============================
   Text Sections, Lists & Utilities
   =============================== */
.text-section { display: flex; flex-direction: column; gap: 12px; }
.text-section ul, .text-section ol { display: flex; flex-direction: column; gap: 10px; padding-left: 0; margin: 0; }
.text-section li { list-style: none; display: flex; align-items: center; gap: 10px; color: #24323A; }
.text-section li img { width: 20px; height: 20px; }
.text-section a { color: var(--brand-secondary); font-weight: 600; }

/* ===============================
   Cards & Testimonials
   =============================== */
.testimonial-card p { margin: 0; }
.testimonial-card strong { color: var(--brand-primary); }

/* Make testimonial layout adapt */
@media (min-width: 768px) {
  .testimonial-card { flex-direction: row; align-items: center; }
}

/* ===============================
   Footer
   =============================== */
footer { background: #0B2B40; color: #EAF2F5; }
footer section { padding: 40px 0; margin-bottom: 0; }
footer .content-wrapper { gap: 20px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-nav a { color: #EAF2F5; background: rgba(255,255,255,0.06); padding: 8px 12px; border-radius: var(--radius-sm); transition: background-color 200ms ease; }
.footer-nav a:hover { background: rgba(255,255,255,0.12); text-decoration: none; }
footer .text-section ul { gap: 8px; }
.footer-cta { display: flex; }
footer .button.primary { background: #FFB48A; color: #0B2B40; border-color: #FFB48A; }
footer .button.primary:hover { background: #FFA774; }

/* ===============================
   Page-level spacing refinements
   =============================== */
main { display: flex; flex-direction: column; gap: 20px; }

/* Ensure adequate spacing between any adjacent blocks */
.content-wrapper > * + * { margin-top: 0; }

/* ===============================
   Responsive Flex Alignments
   =============================== */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; align-items: center; }
}
@media (min-width: 769px) {
  .text-image-section { flex-direction: row; }
}

/* ===============================
   Forms (generic styling if used later)
   =============================== */
input, select, textarea { padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid #DCE5EA; background: #FFFFFF; color: #24323A; width: 100%; box-shadow: var(--shadow-sm) inset; }
label { font-weight: 600; color: var(--brand-primary); margin-bottom: 6px; display: inline-flex; }

/* ===============================
   Cookie Consent Banner & Modal
   =============================== */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 12px; background: #FFFFFF; color: #24323A; border: 1px solid var(--brand-accent); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 16px; z-index: 3000; transform: translateY(20px); opacity: 0; pointer-events: none; transition: transform 250ms ease, opacity 250ms ease; }
.cookie-banner.show, .cookie-banner[data-visible="true"] { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner .button { padding: 10px 16px; }
.cookie-banner .button.accept { background: var(--brand-secondary); color: #fff; }
.cookie-banner .button.accept:hover { background: #196377; }
.cookie-banner .button.reject { background: #FFE8D6; color: var(--brand-primary); border-color: #FFD9C2; }
.cookie-banner .button.settings { background: #FFFFFF; color: var(--brand-secondary); border-color: var(--brand-secondary); }

/* Cookie Preferences Modal */
.cookie-overlay { position: fixed; inset: 0; display: none; justify-content: center; align-items: center; background: rgba(11,43,64,0.35); backdrop-filter: blur(2px); z-index: 3100; }
.cookie-overlay.open, .cookie-overlay[aria-hidden="false"] { display: flex; }
.cookie-modal { display: flex; flex-direction: column; gap: 16px; width: 92%; max-width: 680px; background: #FFFFFF; border: 1px solid var(--brand-accent); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 20px; }
.cookie-modal .cookie-modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .cookie-modal-close { background: var(--warm-2); border: 1px solid #FFD9C2; border-radius: 999px; padding: 6px 10px; color: var(--brand-primary); }
.cookie-modal .cookie-groups { display: flex; flex-direction: column; gap: 12px; }
.cookie-modal .cookie-group { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid #EEF3F6; border-radius: var(--radius-md); background: #FAFCFD; }
.cookie-modal .cookie-group .label { font-weight: 700; color: var(--brand-primary); }
.cookie-modal .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* Toggle switch (pure CSS visual) */
.toggle { position: relative; width: 46px; height: 26px; background: #D9E4EA; border-radius: 99px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.08); transition: background-color 200ms ease; }
.toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; background: #FFFFFF; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform 200ms ease; }
.toggle.is-on { background: #1F7A8C; }
.toggle.is-on::after { transform: translateX(20px); }

/* ===============================
   Accessibility & Contrast Helpers
   =============================== */
.muted { color: var(--muted); }
.badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: #FFE8D6; color: #0B2B40; font-weight: 700; font-size: 12px; border: 1px solid #FFD9C2; }

/* ===============================
   Animations & Micro-interactions
   =============================== */
.fade-in { opacity: 0; transform: translateY(6px); transition: opacity 250ms ease, transform 250ms ease; }
.fade-in.is-visible { opacity: 1; transform: translateY(0); }

/* ===============================
   Specific content tweaks for provided pages
   =============================== */
/* Improve readability of hero and testimonial copy */
.hero .microcopy { color: #4D5E67; }

/* Ensure all testimonials have dark text on light bg */
.testimonial-card, .testimonial-card p, .testimonial-card h3 { color: #1E2A31; }

/* Links inside light cards */
.card a, .testimonial-card a { color: var(--brand-secondary); font-weight: 600; }

/* Footer list with icons */
footer .text-section li { color: #EAF2F5; }
footer .text-section li img { filter: brightness(2); opacity: 0.9; }

/* Header CTA visibility on desktop */
@media (min-width: 900px) {
  .header-cta .button { white-space: nowrap; }
}

/* ===============================
   Additional optional component classes
   =============================== */
/* Feature cards */
.feature-card { display: flex; flex-direction: column; gap: 12px; background: #FFFFFF; border: 1px solid #E9EEF1; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 20px; }

/* Neutral sections using brand accent */
.section-accent { background: var(--brand-accent); border-top: 1px solid #E2E8EC; border-bottom: 1px solid #E2E8EC; }

/* Highlight section warm variant */
.section-warm { background: var(--warm-2); border-top: 1px solid #FFD9C2; border-bottom: 1px solid #FFD9C2; }

/* ===============================
   Flex-only verification helpers (no grid used)
   =============================== */
.row { display: flex; flex-wrap: wrap; gap: 20px; }
.col { display: flex; flex-direction: column; gap: 12px; flex: 1 1 280px; min-width: 240px; }

/* ===============================
   Desktop refinements
   =============================== */
@media (min-width: 1024px) {
  .content-wrapper { gap: 28px; }
  .hero .content-wrapper { padding: 32px 0; }
  .main-nav a { padding: 10px 14px; }
}

/* ===============================
   Print basics (safe minimal)
   =============================== */
@media print {
  header, .mobile-menu, .cookie-banner, .cookie-overlay, .footer-cta { display: none !important; }
  a { text-decoration: underline; }
  body { background: #FFFFFF; }
}