/* =============================
   Bright Echo Glanzwerk - style.css
   Vintage Retro Aesthetic with Brand Consistency
   Mobile-first • Flexbox-only • Accessible
   ============================= */

/* -----------------------------
   CSS Reset & Normalize (light)
   ----------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure { 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 { border: none; background: none; font: inherit; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px dashed var(--retro-ink); outline-offset: 2px; }

/* -----------------------------
   Design Tokens (CSS Vars)
   ----------------------------- */
:root {
  /* Brand */
  --brand-primary: #0D3A66; /* Deep Navy */
  --brand-secondary: #26B0C7; /* Aqua */
  --brand-accent: #F4FBFF; /* Ice */

  /* Vintage Retro Complementary */
  --retro-cream: #F7F1E1;   /* Paper */
  --retro-paper: #FAF7EF;   /* Soft paper */
  --retro-ink: #2B2B2B;     /* Ink black */
  --retro-rust: #B85C38;    /* Burnt orange */
  --retro-olive: #6B7D5C;   /* Muted olive */
  --retro-gold: #C9A227;    /* Mustard gold */
  --retro-sky: #DDEFF5;     /* Soft sky */

  /* Neutrals */
  --ink-80: #3A3A3A;
  --ink-60: #5A5A5A;
  --ink-30: #9AA0A6;
  --line: #D7D2C8;
  --white: #FFFFFF;

  /* Effects */
  --shadow-card: 0 2px 0 0 rgba(0,0,0,.15), 0 8px 16px rgba(13,58,102,.08);
  --shadow-press: 0 2px 0 rgba(0,0,0,.25);
  --shadow-lift: 0 6px 14px rgba(0,0,0,.18);

  /* Spacing scale */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;

  /* Radii */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;

  /* Typography */
  --font-display: 'Trebuchet MS', 'Gill Sans', Arial, sans-serif;
  --font-body: Verdana, Geneva, sans-serif;
}

/* -----------------------------
   Base Styles
   ----------------------------- */
body {
  display: flex; /* Flex layout root */
  flex-direction: column;
  min-height: 100%;
  background: var(--retro-paper);
  color: var(--retro-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}
main { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-32); }

/* Container & Wrapper - Flexbox only */
.container {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--space-24);
  box-shadow: var(--shadow-card);
}

/* Section spacing (global) */
section { display: flex; }
section > .container { padding-top: var(--space-24); padding-bottom: var(--space-24); }

/* 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; }
.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; }

/* Typography */
h1, h2, h3 { font-family: var(--font-display); color: var(--brand-primary); }
h1 { font-size: 32px; line-height: 1.2; letter-spacing: 0.5px; }
h2 { font-size: 24px; line-height: 1.25; letter-spacing: 0.4px; position: relative; padding-bottom: 6px; }
h2::after { content: ""; display: block; height: 4px; width: 72px; background: var(--retro-gold); margin-top: 8px; border-radius: 2px; }
h3 { font-size: 18px; line-height: 1.3; letter-spacing: 0.2px; color: var(--ink-80); }
.subheadline { color: var(--ink-60); font-size: 16px; }
p { color: var(--retro-ink); }
strong { color: var(--retro-ink); }
em { color: var(--retro-olive); }

/* Links */
a { color: var(--brand-primary); transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
a:hover { color: var(--retro-rust); }
a:focus-visible { box-shadow: 0 0 0 3px rgba(201,162,39,.35); border-radius: 4px; }

/* Retro Buttons (links in .cta-row and standout nav links) */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); }
.cta-row a, .main-nav a:last-child, .mobile-nav a:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: var(--brand-secondary);
  color: #07314F;
  border: 2px solid #07314F;
  border-radius: 999px;
  box-shadow: var(--shadow-press);
  font-weight: 700;
}
.cta-row a:hover, .main-nav a:last-child:hover, .mobile-nav a:last-child:hover {
  background: var(--retro-gold);
  color: #2B2B2B;
  transform: translateY(-1px);
}
.cta-row a:nth-child(2) {
  background: var(--retro-cream);
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.cta-row a:nth-child(2):hover { background: var(--brand-accent); }

/* Header */
header { background: var(--retro-cream); border-bottom: 4px double var(--line); position: sticky; top: 0; z-index: 40; }
header .container { flex-direction: row; align-items: center; justify-content: space-between; padding-top: var(--space-12); padding-bottom: var(--space-12); }
.logo { display: flex; align-items: center; }
.logo img { height: 40px; width: auto; }

/* Desktop Nav (hidden on mobile) */
.main-nav { display: none; align-items: center; gap: var(--space-16); }
.main-nav a { padding: 8px 10px; border-radius: var(--radius-s); color: var(--brand-primary); }
.main-nav a:hover { background: var(--brand-accent); }

/* Mobile Menu Toggle */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-primary); color: var(--white); box-shadow: var(--shadow-press); }
.mobile-menu-toggle:hover { background: var(--retro-rust); }

/* Mobile Menu Overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
  background: var(--retro-paper);
  border-left: 6px solid var(--brand-primary);
  transform: translateX(100%);
  opacity: 0; pointer-events: none;
  transition: transform .35s ease, opacity .25s ease;
}
.mobile-menu[aria-hidden="false"] { transform: translateX(0); opacity: 1; pointer-events: auto; }
.mobile-menu-close { align-self: flex-end; margin: var(--space-16); width: 44px; height: 44px; border-radius: 50%; background: var(--retro-cream); color: var(--brand-primary); box-shadow: var(--shadow-press); }
.mobile-nav { display: flex; flex-direction: column; gap: 0; padding: 0 var(--space-16) var(--space-24); }
.mobile-nav a { display: flex; align-items: center; padding: 14px 10px; border-bottom: 1px dashed var(--line); font-weight: 600; color: var(--brand-primary); }
.mobile-nav a:hover { background: var(--brand-accent); }

/* Hero-like sections (vintage framing) */
[aria-labelledby^="hero-"] > .container > .content-wrapper {
  background: var(--brand-accent);
  border: 3px solid var(--brand-primary);
  box-shadow: 0 4px 0 #0A2E51, 0 12px 24px rgba(0,0,0,.10);
  align-items: flex-start;
}
[aria-labelledby^="hero-"] h1 { font-size: 28px; }

/* Text blocks */
.text-section { display: flex; flex-direction: column; gap: var(--space-12); color: var(--retro-ink); }
.text-section a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* Trust badges */
.trust-badges { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.trust-badges span { display: inline-flex; align-items: center; gap: 8px; background: var(--retro-cream); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; color: var(--ink-80); }
.trust-badges img { width: 16px; height: 16px; }

/* Lists */
ul { display: flex; flex-direction: column; gap: 8px; }
ol { display: flex; flex-direction: column; gap: 8px; padding-left: 1.2rem; }
li { color: var(--retro-ink); }

/* Testimonials - high contrast on light background */
.testimonial-card {
  background: var(--white);
  border: 2px solid var(--brand-primary);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}
.testimonial-card p { margin: 0; }
.testimonial-card strong { color: var(--retro-rust); }

/* Map preview card */
.map-preview {
  display: flex; align-items: center; justify-content: center;
  min-height: 160px;
  background: var(--retro-sky);
  color: var(--brand-primary);
  border: 2px dashed var(--brand-primary);
  border-radius: var(--radius-m);
  padding: var(--space-16);
}

/* Footer */
footer { background: var(--retro-cream); border-top: 4px double var(--line); margin-top: var(--space-32); }
footer .container { padding-top: var(--space-24); padding-bottom: var(--space-24); }
footer .content-wrapper { background: transparent; border: none; box-shadow: none; padding: 0; }
footer .content-wrapper { display: flex; flex-direction: column; gap: var(--space-20); }
.brand-block { display: flex; flex-direction: column; gap: var(--space-12); }
.footer-nav, .legal-nav { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.footer-nav a, .legal-nav a { color: var(--brand-primary); padding: 6px 8px; border-radius: var(--radius-s); }
.footer-nav a:hover, .legal-nav a:hover { background: var(--brand-accent); }
.contact-min { display: flex; flex-direction: column; gap: 6px; }

/* Address/icon rows */
address { font-style: normal; color: var(--ink-80); }
address p, .brand-block p, .contact-min p { display: flex; align-items: center; gap: 8px; }

/* Generic cards for any content */
.card { background: var(--white); border: 2px solid var(--line); border-radius: var(--radius-m); padding: var(--space-20); box-shadow: var(--shadow-card); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* Tables (if any) - minimal, flex-based wrappers */
.table-like { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.table-row { display: flex; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.table-row:last-child { border-bottom: none; }
.table-cell { flex: 1 1 160px; padding: 4px 6px; }

/* Inline icons sizing */
img[alt^="Telefon"], img[alt^="E-Mail"], img[alt^="Uhr"], img[alt^="Karte"], img[alt^="Schutz"], img[alt^="Rad"], img[alt^="Wasser"], img[alt^="Sitz"], img[alt^="Bürste"], img[alt^="Bewertung"], img[alt^="Umwelt"], img[alt^="Sicher"] {
  width: 18px; height: 18px; object-fit: contain; }

/* Accessibility: ensure readable text in testimonial and review sections */
[aria-labelledby^="testimonials"] .content-wrapper, [aria-labelledby^="testimonials-"] .content-wrapper { background: transparent; border: none; box-shadow: none; padding: 0; }
[aria-labelledby^="testimonials"] .testimonial-card, [aria-labelledby^="testimonials-"] .testimonial-card { background: var(--white); color: var(--retro-ink); }

/* Price highlights and badges */
.text-section strong { background: rgba(201,162,39,.12); border: 1px solid var(--retro-gold); border-radius: 4px; padding: 0 6px; }

/* Navigation breadcrumbs (if added) */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--ink-60); }

/* ---------------------------------
   Mobile Navigation Visibility Rules
   --------------------------------- */
@media (min-width: 992px) {
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }
  .mobile-menu { display: none; }
}

/* ---------------------------------
   Responsive Typographic Scale
   --------------------------------- */
@media (min-width: 600px) {
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
}
@media (min-width: 992px) {
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
  h3 { font-size: 22px; }
}

/* ---------------------------------
   Responsive Layout Enhancements
   --------------------------------- */
@media (min-width: 768px) {
  /* Text-image sections become rows */
  .text-image-section { flex-direction: row; align-items: center; }
}

/* Ensure no overlap and generous spacing */
.content-wrapper > * + * { margin-top: 0; }
section + section { margin-top: var(--space-8); }

/* ---------------------------------
   Vintage Details (subtle lines, corners)
   --------------------------------- */
.content-wrapper { position: relative; }
.content-wrapper::before {
  content: ""; position: absolute; top: 12px; left: 12px;
  width: 16px; height: 16px; border-top: 3px solid var(--retro-gold); border-left: 3px solid var(--retro-gold);
  border-top-left-radius: 4px; opacity: .55; pointer-events: none;
}
.content-wrapper::after {
  content: ""; position: absolute; bottom: 12px; right: 12px;
  width: 16px; height: 16px; border-bottom: 3px solid var(--retro-rust); border-right: 3px solid var(--retro-rust);
  border-bottom-right-radius: 4px; opacity: .55; pointer-events: none;
}

/* ---------------------------------
   Mobile-first cards / grids helpers
   --------------------------------- */
.card-container .card, .content-grid > * {
  flex: 1 1 260px; min-width: 240px;
}

/* -----------------------------
   Cookie Consent Banner & Modal
   ----------------------------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: flex; flex-direction: column; gap: var(--space-12);
  background: var(--retro-cream);
  border-top: 6px double var(--brand-primary);
  color: var(--retro-ink);
  padding: 16px;
  box-shadow: 0 -8px 20px rgba(0,0,0,.15);
  transform: translateY(0); /* default visible */
}
.cookie-banner .cookie-content { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-buttons .btn-accept, .cookie-buttons .btn-reject, .cookie-buttons .btn-settings {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 999px; font-weight: 700;
  border: 2px solid #07314F; box-shadow: var(--shadow-press);
}
.cookie-buttons .btn-accept { background: var(--brand-secondary); color: #07314F; }
.cookie-buttons .btn-accept:hover { background: var(--retro-gold); color: #2B2B2B; }
.cookie-buttons .btn-reject { background: var(--retro-cream); color: var(--brand-primary); }
.cookie-buttons .btn-reject:hover { background: var(--brand-accent); }
.cookie-buttons .btn-settings { background: var(--white); color: var(--brand-primary); border-color: var(--brand-primary); }
.cookie-buttons .btn-settings:hover { background: var(--brand-accent); }

/* Optional hidden state */
.cookie-banner.is-hidden { transform: translateY(110%); }

/* Cookie Modal */
.cookie-backdrop { position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.cookie-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.96); z-index: 120; width: min(680px, 92vw);
  background: var(--white); border: 3px solid var(--brand-primary); border-radius: var(--radius-l); box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-20); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease;
}
.cookie-modal.open, .cookie-backdrop.open { opacity: 1; pointer-events: auto; }
.cookie-modal.open { transform: translate(-50%,-50%) scale(1); }
.cookie-modal .modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .modal-body { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-modal .modal-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: 10px; border: 1px dashed var(--line); border-radius: var(--radius-s); }
.cookie-modal .modal-footer { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* -----------------------------
   Media Queries for Footer Layout
   ----------------------------- */
@media (min-width: 768px) {
  footer .content-wrapper { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .brand-block { max-width: 360px; }
}

/* -----------------------------
   Page-specific gentle tweaks
   ----------------------------- */
[aria-labelledby="features-title"] .content-wrapper ul li::marker { color: var(--retro-rust); }
[aria-labelledby="steps-title"] ol li strong, [aria-labelledby="steps-booking"] ol li strong { color: var(--brand-primary); }
[aria-labelledby="pricing-teaser-title"] .text-section > div { display: flex; align-items: center; gap: 8px; }

/* Locations and maps */
[aria-labelledby="locations-teaser-title"] .text-section img, [aria-labelledby="antwerpen"] img, [aria-labelledby="map"] img { margin-right: 6px; }

/* Footer small variants */
footer .legal-nav { opacity: .95; }

/* ---------------------------------
   Ensured Flexbox for common wrappers
   --------------------------------- */
header, footer { display: flex; flex-direction: column; }
nav { display: flex; }

/* ---------------------------------
   Prevent overlaps / spacing guard
   --------------------------------- */
.content-wrapper > :not(:last-child) { margin-bottom: 0; }
section .content-wrapper { margin-top: 0; }

/* ---------------------------------
   Print Styles (simple)
   --------------------------------- */
@media print {
  header, .mobile-menu-toggle, .mobile-menu, .cookie-banner, .cookie-backdrop, .cookie-modal { display: none !important; }
  a { text-decoration: underline; }
  .content-wrapper { border: 1px solid #999; box-shadow: none; }
}