/* =============================
   Fuge & Fläche — Scandinavian Clean UI
   Single global stylesheet (mobile-first, flex-only)
   ============================= */

/* 1) CSS RESET & NORMALIZE */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif; color: #1F2937; background-color: #FFFFFF; line-height: 1.6; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding-left: 1.1rem; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid #8A5A3B; outline-offset: 2px; }

/* 2) THEME TOKENS (with fallbacks) */
:root {
  --ink: #1F2937;              /* primary dark */
  --clay: #8A5A3B;             /* warm secondary */
  --sand: #F5F2EB;             /* soft accent background */
  --muted: #6B7280;            /* secondary text */
  --line: #E5E7EB;             /* light divider */
  --bg: #FFFFFF;               /* base background */
  --shadow: 0 2px 10px rgba(31,41,55,0.08);
  --radius-s: 8px; --radius-m: 12px; --radius-l: 16px;
  --transition: 200ms ease;
}

/* 3) TYPOGRAPHY (simple, legible, Scandinavian) */
.display, h1, .hero h1 { font-family: Oswald, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; letter-spacing: 0.2px; }
h1 { font-size: 36px; line-height: 1.2; }
h2 { font-size: 28px; line-height: 1.3; }
h3 { font-size: 20px; line-height: 1.35; }
p, li, a, address { font-size: 16px; }
small { font-size: 14px; color: var(--muted); }

/* Typography spacing */
section h1, section h2 { margin-bottom: 12px; }
section h3 { margin-top: 8px; margin-bottom: 8px; }
section p + p { margin-top: 8px; }

/* 4) GLOBAL LAYOUT (flex-only) */
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; gap: 20px; }
.content-wrapper { display: flex; flex-direction: column; gap: 16px; }

/* Default spacing for semantic sections */
section { margin-bottom: 60px; padding: 0; }

/* Mandatory spacing and alignment utility 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; }

/* 5) HEADER & NAVIGATION */
header { position: relative; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
header .container { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.logo img { height: 32px; width: auto; }

.main-nav { display: none; align-items: center; gap: 16px; }
.main-nav a { color: var(--ink); padding: 8px 10px; border-radius: var(--radius-s); transition: color var(--transition), background var(--transition); }
.main-nav a:hover { background: var(--sand); }
.main-nav .nav-cta { background: var(--ink); color: #FFFFFF; padding: 10px 14px; border-radius: var(--radius-m); box-shadow: var(--shadow); }
.main-nav .nav-cta:hover { background: #111827; }

.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--sand); color: var(--ink); transition: background var(--transition), transform var(--transition); }
.mobile-menu-toggle:hover { background: #EFECE4; transform: translateY(-1px); }

/* Mobile Menu Overlay */
.mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(31,41,55,0.1); display: flex; justify-content: flex-end; transform: translateX(100%); transition: transform 260ms ease; z-index: 100; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu > nav, .mobile-nav { background: var(--bg); width: 86%; max-width: 360px; height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-left: 1px solid var(--line); box-shadow: -6px 0 20px rgba(31,41,55,0.07); }
.mobile-menu-close { align-self: flex-end; width: 40px; height: 40px; border-radius: 10px; background: var(--sand); margin-bottom: 8px; }
.mobile-nav a { padding: 14px 10px; border-radius: 10px; color: var(--ink); }
.mobile-nav a:hover { background: var(--sand); }

/* 6) HERO */
.hero { background: var(--sand); padding: 48px 0; border-bottom: 1px solid var(--line); }
.hero .container { gap: 10px; }
.hero h1 { font-size: 34px; }
.hero p { color: var(--muted); max-width: 60ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.actions a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: #FFFFFF; color: var(--ink); transition: transform var(--transition), box-shadow var(--transition), background var(--transition); }
.actions a:first-child { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.actions a:first-child:hover { background: #111827; box-shadow: var(--shadow); transform: translateY(-1px); }
.actions a:hover { background: #FAFAF7; transform: translateY(-1px); box-shadow: var(--shadow); }

.trust-badges { display: flex; flex-direction: column; gap: 8px; padding-left: 18px; color: var(--ink); }
.trust-badges li { position: relative; }

/* 7) SECTION CONTENT STYLES */
.text-section { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; transition: box-shadow var(--transition), transform var(--transition); }
.text-section:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.content-wrapper > ul,
.content-wrapper > ol { display: flex; flex-direction: column; gap: 8px; padding-left: 16px; }

/* List markers, subtle Scandinavian tone */
ul li::marker, ol li::marker { color: var(--clay); }

/* Contact lines with icons inline */
p > img[alt] { display: inline-block; width: 18px; height: auto; margin-right: 8px; vertical-align: text-bottom; }

/* 8) TESTIMONIALS */
.testimonial-card { background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; box-shadow: none; color: var(--ink); }
.testimonial-card p { margin: 0; }
.testimonial-card p + p { margin-top: 8px; color: var(--muted); }

/* 9) FOOTER */
footer { background: #FFFFFF; border-top: 1px solid var(--line); padding: 28px 0; }
footer .content-wrapper { display: flex; flex-direction: column; gap: 18px; }
.footer-top { display: flex; flex-direction: column; gap: 10px; }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 16px; }
footer nav a { color: var(--muted); padding: 6px 8px; border-radius: 8px; }
footer nav a:hover { background: var(--sand); color: var(--ink); }
address { font-style: normal; color: var(--muted); }
address a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* 10) BUTTONS (utility in case used elsewhere) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: #FFFFFF; color: var(--ink); transition: transform var(--transition), box-shadow var(--transition), background var(--transition); }
.btn:hover { background: #FAFAF7; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.btn-primary:hover { background: #111827; }
.btn-secondary { background: var(--clay); color: #FFFFFF; border-color: var(--clay); }
.btn-secondary:hover { background: #774C33; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }

/* 11) COOKIE CONSENT BANNER & MODAL */
.cookie-banner { position: fixed; left: 12px; right: 12px; bottom: 12px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); z-index: 200; transform: translateY(16px); opacity: 0; pointer-events: none; transition: transform 260ms ease, opacity 260ms ease; }
.cookie-banner.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner .cookie-actions .accept-all { composes: btn btn-primary; }
.cookie-banner .cookie-actions .reject-all { composes: btn btn-ghost; }
.cookie-banner .cookie-actions .open-settings { composes: btn; }
/* Fallback if composes not supported: */
.cookie-banner .cookie-actions .accept-all { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--ink); background: var(--ink); color: #fff; }
.cookie-banner .cookie-actions .reject-all { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: transparent; }
.cookie-banner .cookie-actions .open-settings { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: #FFFFFF; }
.cookie-banner p { color: var(--muted); }

.cookie-modal { position: fixed; inset: 0; background: rgba(31,41,55,0.32); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 220ms ease; z-index: 210; }
.cookie-modal.open { opacity: 1; pointer-events: auto; }
.cookie-modal-content { background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; padding: 18px; width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow); }
.cookie-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cookie-categories { display: flex; flex-direction: column; gap: 10px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: #FFFFFF; }
.cookie-toggle { width: 44px; height: 26px; border-radius: 999px; background: #E5E7EB; position: relative; transition: background var(--transition); display: flex; align-items: center; padding: 2px; }
.cookie-toggle::after { content: ""; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transform: translateX(0); transition: transform var(--transition); }
.cookie-toggle.on { background: var(--clay); }
.cookie-toggle.on::after { transform: translateX(18px); }
.cookie-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* 12) ACCESSIBLE LINKS */
a:hover { opacity: 0.95; }
a:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; border-radius: 6px; }

/* 13) UTILITY SURFACES (cards, subtle borders) */
.surface { background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
.surfaceElevated { box-shadow: var(--shadow); }
.divider { height: 1px; background: var(--line); width: 100%; }

/* 14) RESPONSIVE RULES */
@media (min-width: 768px) {
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
  h3 { font-size: 22px; }

  .hero { padding: 64px 0; }
  .hero h1 { font-size: 42px; }
  .text-image-section { flex-direction: row; }

  /* Show desktop nav, hide burger */
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }

  /* Footer layout */
  footer .content-wrapper { flex-direction: row; flex-wrap: wrap; gap: 24px; }
  .footer-top { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; }
  footer nav, address { flex: 1 1 280px; }

  /* Multi-column feel using flex wrap where many text-sections exist */
  .content-wrapper { flex-direction: row; flex-wrap: wrap; }
  .content-wrapper > h2 { flex: 1 1 100%; }
  .content-wrapper > .text-section { flex: 1 1 calc(50% - 12px); }
  .content-wrapper > ul,
  .content-wrapper > ol,
  .content-wrapper > p,
  .content-wrapper > address { flex: 1 1 100%; }
}

@media (min-width: 1024px) {
  .container { padding: 0 24px; }
  .hero { padding: 80px 0; }
  .hero h1 { font-size: 48px; }
  .actions { gap: 14px; }
  .content-wrapper > .text-section { flex: 1 1 calc(33.333% - 14px); }
}

/* 15) PAGE-SPECIFIC LIGHT TOUCHES */
/* Prices page lists */
main section ul li { padding-left: 2px; }

/* Contact call link emphasis */
.content-wrapper a[href^="tel:"] { font-weight: 600; }

/* 16) PREVENT OVERLAP & Z-INDEX SAFETY */
.hero, header, footer, section, .mobile-menu, .cookie-banner, .cookie-modal { z-index: auto; }

/* 17) FLEXBOX SAFEGUARDS */
/* Ensure alignments per brief */
.text-image-section { align-items: center; }
.card-content { display: flex; flex-direction: column; justify-content: center; }

/* 18) SHADOWS & RADIUS CONSISTENCY */
.text-section, .testimonial-card, .cookie-modal-content { border-radius: var(--radius-m); }

/* 19) PRINT SAFE (minimal) */
@media print {
  .mobile-menu, .mobile-menu-toggle, .cookie-banner, .cookie-modal { display: none !important; }
  a { text-decoration: underline; }
}

/* 20) SAFETY: avoid absolute for content cards; only decorative/overlays use fixed above. No CSS Grid used. */