/* =========================
   Riddle Myth Bauhandwerk
   vintage_retro style.css
   Mobile-first, flex-only layouts
   ========================= */

/* ---------- CSS Reset & Normalize ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
img, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding-left: 1.25rem; }
p { margin: 0; }

/* ---------- Theme Variables (with fallbacks) ---------- */
:root {
  --ink: #1F2937;           /* primary */
  --burnt: #C26A3A;         /* secondary */
  --cream: #F5EFE6;         /* accent (paper) */
  --paper: #F4E9D8;         /* warm paper alt */
  --coffee: #4E3B31;        /* deep brown accent */
  --olive: #7C6A49;         /* vintage olive */
  --spruce: #2C6E6F;        /* muted teal */
  --ink-80: rgba(31,41,55,0.8);
  --shadow: rgba(31,41,55,0.12);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-60: 60px; --space-80: 80px;
  --speed: 180ms; --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base Typography ---------- */
body {
  font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
  color: var(--ink);
  background-color: #F5EFE6; /* fallback */
  background-color: var(--cream);
  line-height: 1.6;
}

h1, h2, h3 { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: 0.5px; margin: 0 0 var(--space-16); color: var(--coffee); }
h1 { font-size: 40px; line-height: 1.1; }
h2 { font-size: 28px; line-height: 1.2; }
h3 { font-size: 20px; line-height: 1.3; }

@media (min-width: 768px) {
  h1 { font-size: 56px; }
  h2 { font-size: 32px; }
  h3 { font-size: 22px; }
}

p, li { font-size: 16px; }
small { font-size: 14px; }

.subheadline { color: var(--olive); font-size: 18px; margin-top: var(--space-8); }

/* Vintage details: subtle borders and caps for headings */
h1, h2 { text-transform: none; }

/* ---------- Layout helpers (Flex-only) ---------- */
.container { width: 100%; display: flex; justify-content: center; padding: 0 var(--space-16); }
.container > .content-wrapper { width: 100%; max-width: 1120px; display: flex; flex-direction: column; gap: var(--space-20); }

/* Mandatory spacing classes (available globally) */
.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; }

/* Also apply spacing to all semantic sections */
main > section { margin-bottom: var(--space-60); padding: var(--space-40) var(--space-20); }

/* ---------- Header ---------- */
header { position: relative; border-bottom: 3px solid var(--coffee); background-color: #F4E9D8; background-color: var(--paper); }
header .container > .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-16) 0; }

.logo { display: flex; align-items: center; }
.logo img { height: 40px; width: auto; }

.main-nav { display: none; align-items: center; gap: var(--space-20); }
.main-nav a { color: var(--ink); padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid transparent; transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease); }
.main-nav a:hover, .main-nav a:focus { background-color: var(--cream); border-color: var(--burnt); color: var(--coffee); }

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

.mobile-menu-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 22px; color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; background-color: #F5EFE6; background-color: var(--cream); transition: transform var(--speed) var(--ease), background-color var(--speed) var(--ease); }
.mobile-menu-toggle:hover { transform: scale(1.04); background-color: #FFF; }

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

/* ---------- Mobile Menu Overlay ---------- */
.mobile-menu { position: fixed; inset: 0; display: flex; flex-direction: column; background-color: var(--ink); color: #fff; transform: translateX(100%); transition: transform 240ms var(--ease); z-index: 9999; padding: var(--space-20); }
.mobile-menu.open, .mobile-menu.active, .mobile-menu.is-open, .mobile-menu.show { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; width: 44px; height: 44px; border: 2px solid #fff; color: #fff; border-radius: 50%; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.mobile-nav { display: flex; flex-direction: column; gap: var(--space-12); margin-top: var(--space-20); }
.mobile-nav a { display: flex; padding: 14px 10px; border-bottom: 1px solid rgba(255,255,255,.15); font-size: 18px; }
.mobile-nav a:hover { color: var(--burnt); }
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { background-color: #F4E9D8; background-color: var(--paper); border-top: 6px double var(--coffee); border-bottom: 6px double var(--coffee); }
.hero .container > .content-wrapper { gap: var(--space-16); align-items: flex-start; }
.hero h1 { color: var(--coffee); text-shadow: 0 1px 0 rgba(255,255,255,0.4); }
.hero .subheadline { color: var(--spruce); }

.value-points { display: flex; flex-direction: column; gap: 8px; padding-left: 0; list-style: none; }
.value-points li { display: flex; align-items: center; gap: 10px; position: relative; padding-left: 26px; }
.value-points li::before { content: "◆"; position: absolute; left: 0; color: var(--burnt); font-size: 14px; top: 2px; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.contact-snippet { display: flex; align-items: center; gap: 10px; color: var(--olive); font-size: 15px; }
.contact-snippet img { width: 18px; height: 18px; filter: contrast(0.9); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: var(--radius-sm); border: 2px solid var(--ink); font-weight: 700; letter-spacing: 0.3px; transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease), transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease); box-shadow: 2px 2px 0 0 var(--ink); }
.btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 0 var(--ink); }

.btn-primary { background-color: var(--burnt); color: #fff; border-color: var(--coffee); }
.btn-primary:hover, .btn-primary:focus { background-color: #A4552F; }

.btn-secondary { background-color: #fff; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover, .btn-secondary:focus { background-color: var(--cream); }

.micro-cta, .micro-ctas, .cta-group, .header-ctas, .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* ---------- Text Sections & Grids ---------- */
.text-section { display: flex; flex-direction: column; gap: var(--space-20); }

.feature-grid, .service-grid, .case-grid, .testimonial-list, .faq { display: flex; flex-wrap: wrap; gap: var(--space-20); }

.feature-item { flex: 1 1 260px; padding: var(--space-20); background: #fff; border: 2px solid var(--coffee); border-radius: var(--radius-md); box-shadow: 0 6px 0 0 var(--shadow); transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease); }
.feature-item:hover { transform: translateY(-2px); box-shadow: 0 10px 0 0 var(--shadow); }

.service-card { flex: 1 1 260px; padding: var(--space-20); background: #fff; border: 2px solid var(--ink); border-radius: var(--radius-md); position: relative; box-shadow: 0 6px 0 0 var(--shadow); }
.service-card h3 { color: var(--coffee); }

.case-grid .case { flex: 1 1 300px; display: flex; flex-direction: column; gap: var(--space-12); background: #fff; border: 2px solid var(--coffee); border-radius: var(--radius-md); padding: var(--space-20); box-shadow: 0 6px 0 0 var(--shadow); }
.case .client-note { color: var(--olive); }

.faq-item { flex: 1 1 300px; background: #fff; border: 2px dashed var(--olive); border-radius: var(--radius-md); padding: var(--space-20); }

.process-steps { display: flex; flex-direction: column; gap: 10px; padding-left: 1.25rem; }
.process-steps li { margin-left: 2px; }

.badges { display: flex; flex-wrap: wrap; gap: 10px; color: var(--coffee); }
.badges span { display: inline-flex; align-items: center; padding: 6px 10px; background: #fff; border: 2px solid var(--coffee); border-radius: 999px; font-weight: 700; font-size: 14px; }

.text-block { flex: 1 1 280px; display: flex; flex-direction: column; gap: 10px; background: #fff; padding: var(--space-20); border: 1px solid var(--olive); border-radius: var(--radius-sm); }

/* ---------- Testimonials (light background, dark text for contrast) ---------- */
.testimonial-list { align-items: stretch; }
.testimonial-card { flex: 1 1 320px; background: #FFFFFF; color: #1F2937; border: 2px solid var(--ink); border-radius: var(--radius-lg); box-shadow: 0 8px 0 0 var(--shadow); }
.testimonial-card p { margin: 0; }
.rating-summary { flex: 1 1 320px; display: flex; align-items: center; background: var(--cream); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius-lg); padding: var(--space-20); font-weight: 700; }

/* ---------- Footer ---------- */
footer { background-color: var(--ink); color: #F8F5F0; border-top: 6px double var(--coffee); }
footer .container > .content-wrapper { flex-direction: column; gap: var(--space-24); padding: var(--space-32) 0; }
.footer-brand, .footer-links, .footer-legal, .footer-contact { display: flex; flex-direction: column; gap: 10px; }
footer h3 { color: #F5D8B8; font-size: 18px; margin-bottom: 6px; }
footer nav { display: flex; flex-direction: column; gap: 8px; }
footer a { color: #F8F5F0; text-decoration: underline; text-underline-offset: 3px; }
footer a:hover { color: var(--burnt); }

@media (min-width: 900px) {
  footer .container > .content-wrapper { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}

/* ---------- Page-specific nuances ---------- */
/* Pricing/FAQ blocks already covered by .faq and .faq-item */

/* ---------- Utilities ---------- */
.hide { display: none !important; }
.muted { color: var(--olive); }
.center { display: flex; align-items: center; justify-content: center; }

/* ---------- Responsive adjustments ---------- */
@media (min-width: 768px) {
  .text-image-section { flex-direction: row; }
}
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}

/* ---------- Links and subtle interactions ---------- */
a { color: var(--burnt); transition: color var(--speed) var(--ease); }
a:hover, a:focus { color: #A4552F; }

/* ---------- Cards generic ---------- */
.card { background: #fff; border: 2px solid var(--coffee); border-radius: var(--radius-md); padding: var(--space-20); box-shadow: 0 6px 0 0 var(--shadow); }

/* ---------- Accessibility: focus styles ---------- */
:focus-visible { outline: 3px solid var(--burnt); outline-offset: 2px; }

/* ---------- Cookie Consent Banner ---------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); padding: var(--space-16) var(--space-20); background-color: #FFF; color: var(--ink); border-top: 4px solid var(--coffee); box-shadow: 0 -6px 0 0 var(--shadow); z-index: 9998; transform: translateY(110%); transition: transform 220ms var(--ease); }
.cookie-banner.show, .cookie-banner.open, .cookie-banner.active { transform: translateY(0); }
.cookie-banner .text { flex: 1 1 240px; display: flex; flex-direction: column; gap: 6px; }
.cookie-buttons { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.cookie-buttons .btn { min-width: 160px; }
.cookie-buttons .btn-accept { background: var(--burnt); color: #fff; border-color: var(--coffee); }
.cookie-buttons .btn-reject { background: #fff; color: var(--ink); }
.cookie-buttons .btn-settings { background: var(--cream); }

/* Cookie Preferences Modal */
.cookie-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); z-index: 10000; opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease); }
.cookie-modal.open, .cookie-modal.active, .cookie-modal.show { opacity: 1; pointer-events: auto; }
.cookie-modal .cookie-modal-content { width: min(720px, 92%); background: #fff; color: var(--ink); border: 3px solid var(--coffee); border-radius: var(--radius-lg); padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-16); box-shadow: 0 10px 0 0 var(--shadow); }
.cookie-option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: 10px 0; border-bottom: 1px dashed var(--olive); }
.cookie-option .toggle { display: flex; align-items: center; gap: 8px; }

/* ---------- Tables or lists within legal pages ---------- */
main section .content-wrapper > h2 + p { margin-top: -6px; }
main section .content-wrapper p + h2 { margin-top: var(--space-24); }

/* ---------- Desktop enhancements ---------- */
@media (min-width: 992px) {
  .hero .container > .content-wrapper { flex-direction: column; }
  .feature-grid, .service-grid, .case-grid, .testimonial-list, .faq { justify-content: space-between; }
  header .container > .content-wrapper { gap: var(--space-20); }
}

/* ---------- Print basics ---------- */
@media print {
  .mobile-menu, .mobile-menu-toggle, .cookie-banner, .cookie-modal { display: none !important; }
  a { text-decoration: underline; }
}

/* ---------- Additional components from HTML ---------- */
.header-ctas .btn { white-space: nowrap; }
.micro-ctas .btn, .cta-group .btn, .hero-ctas .btn { min-height: 42px; }

/* Ratings, highlights */
.highlight { background: #fff; border: 2px solid var(--burnt); padding: 6px 10px; border-radius: var(--radius-sm); }

/* Ensure minimum spacing between all cards/elements within flex lists */
.feature-grid > *, .service-grid > *, .case-grid > *, .testimonial-list > *, .faq > * { margin-bottom: 0; }

/* ---------- Generic forms (if added later) ---------- */
input[type="text"], input[type="email"], textarea { width: 100%; padding: 10px 12px; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
input[type="text"]:focus, input[type="email"]:focus, textarea:focus { border-color: var(--burnt); outline: none; }

/* ---------- Section color accents for variety (retro vibe) ---------- */
/* Apply alternates to break monotony while staying retro */
main > section:nth-of-type(odd) { background-color: var(--cream); }
main > section:nth-of-type(even) { background-color: #FFF; border-top: 1px solid rgba(31,41,55,.08); border-bottom: 1px solid rgba(31,41,55,.08); }

/* ---------- Ensure no element overlap ---------- */
/* Adequate spacing already enforced via gaps and paddings */