/* =====================================================
   Fliese & Fuge Manufaktur – Elegant Classic UI (Flexbox only)
   Author: Senior CSS Developer & UI Designer
   Notes: Mobile-first, ONLY Flexbox layouts, brand-driven, classic elegance
   ===================================================== */

/* -----------------------------
   Reset & Normalize (safe baseline)
------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; }
button { appearance: none; border: none; background: none; padding: 0; margin: 0; font: inherit; cursor: pointer; }
a { text-decoration: none; }
:focus { outline: 2px solid #B05E2E; outline-offset: 2px; }

/* -----------------------------
   Design Tokens (with fallbacks)
------------------------------ */
:root {
  --color-primary: #2D3A3F; /* deep slate */
  --color-secondary: #B05E2E; /* warm copper */
  --color-accent: #F3EDE6; /* soft parchment */
  --color-ink: #2A2A2A; /* primary text */
  --color-muted: #6B6B6B; /* muted text */
  --color-surface: #FFFFFF; /* white card */
  --color-border: #E2DED8; /* subtle border */
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 28px rgba(0,0,0,0.08);
  --radius-sm: 6px; 
  --radius-md: 10px;
  --gap-xs: 8px; 
  --gap-sm: 12px; 
  --gap-md: 16px; 
  --gap-lg: 24px; 
  --gap-xl: 32px; 
  --gap-xxl: 60px;
  --font-display: "Trebuchet MS", Georgia, serif; /* brand display with elegant serif fallback */
  --font-body: Verdana, Georgia, serif; /* brand body with elegant serif fallback */
}

/* -----------------------------
   Base Typography & Body
------------------------------ */
body {
  font-family: var(--font-body), Verdana, Geneva, Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-ink);
  background-color: #FAF9F6; /* refined warm neutral */
}

h1, h2, h3, h4 { 
  font-family: var(--font-display), Georgia, serif; 
  color: var(--color-primary);
  margin: 0 0 12px; 
  letter-spacing: 0.2px; 
}

h1 { font-size: 32px; line-height: 1.25; }
h2 { font-size: 24px; line-height: 1.3; margin-bottom: 14px; }
h3 { font-size: 18px; line-height: 1.35; }

p { margin: 0 0 14px; color: var(--color-ink); }
small, .muted { color: var(--color-muted); }

strong { font-weight: 700; }

blockquote { 
  margin: 0; 
  padding-left: 16px; 
  border-left: 3px solid var(--color-secondary); 
  color: var(--color-primary);
}

/* Links */
a { color: var(--color-secondary); text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
a:active { opacity: 0.9; }

/* -----------------------------
   Layout Primitives
------------------------------ */
.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;            /* FLEXBOX ONLY */
  flex-direction: column;   /* mobile-first stack */
  gap: var(--gap-lg);
}

/* Global section rhythm aligns to classic proportions */
section {
  padding: 40px 0;            /* matches mandatory .section spacing */
  margin-bottom: 60px;        /* breathing room */
  background: transparent;
}

/* Alternate subtle background for visual rhythm without noise */
main section:nth-of-type(odd) { background: #F9F6F2; }

/* Content wrapper used across sites */
.content-wrapper { 
  display: flex;              /* FLEXBOX ONLY */
  flex-direction: column;     /* mobile column */
  flex-wrap: wrap;            /* allow wrapping */
  align-items: flex-start; 
  gap: 20px;                  /* CRITICAL gap >= 20px */
}

/* Ensure inner blocks get card-like breathing with classic elegance */
.content-wrapper > div { 
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

/* Lists in content wrapper */
.content-wrapper > ul, .content-wrapper > ol, .content-wrapper > dl { 
  display: flex;              /* FLEXBOX ONLY */
  flex-direction: column; 
  gap: 10px; 
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}

/* Definition lists styling */
dt { font-weight: 700; color: var(--color-primary); }
dd { margin: 0 0 10px 0; }

/* List items alignment with icons */
ul li, ol li { 
  list-style: none; 
  display: flex;              /* FLEXBOX ONLY */
  align-items: center; 
  gap: 10px; 
  color: #b05e2f;
}

ul li img, ol li img { width: 22px; height: 22px; }

/* Buttons / CTA */
.cta {
  display: inline-flex;       /* FLEXBOX ONLY */
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--color-secondary);
  color: #FFF;
  border: 1px solid #9A4F27;
  border-radius: 999px;       /* refined pill */
  box-shadow: var(--shadow-sm);
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.cta:hover { text-decoration: none; background: #9A4F27; box-shadow: var(--shadow-md); }
.cta:active { transform: translateY(1px); }

/* Header */
header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: relative; z-index: 30; }
header > .container { 
  flex-direction: row;        /* header row on mobile */
  align-items: center; 
  justify-content: space-between; 
  gap: var(--gap-md);
  padding-top: 14px; padding-bottom: 14px;
}
header img { height: 36px; width: auto; }

/* Top navigation (desktop) */
header nav { display: none; }
header nav a { 
  color: var(--color-primary); 
  padding: 8px 10px; 
  border-radius: 999px; 
  transition: color 180ms ease, background-color 180ms ease;
}
header nav a:hover { background: var(--color-accent); text-decoration: none; }
header nav a.cta { color: #FFF; }

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: inline-flex;       /* FLEXBOX ONLY */
  align-items: center; 
  justify-content: center; 
  width: 40px; height: 40px; 
  border-radius: 50%; 
  background: var(--color-accent); 
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transition: transform 180ms ease, background 180ms ease;
}
.mobile-menu-toggle:hover { transform: scale(1.03); background: #EADFD6; }

/* Mobile Menu Overlay */
.mobile-menu {
  position: fixed; 
  top: 0; right: 0; bottom: 0; left: 0; 
  display: flex;              /* FLEXBOX ONLY */
  flex-direction: column; 
  justify-content: flex-start; 
  align-items: stretch; 
  padding: 20px; 
  background: rgba(45,58,63,0.96); /* deep primary overlay */
  transform: translateX(100%); 
  transition: transform 260ms ease; 
  z-index: 100; 
}
.mobile-menu.open { transform: translateX(0); }

.mobile-menu-close { 
  align-self: flex-end; 
  width: 42px; height: 42px; 
  border-radius: 50%; 
  background: #FFF; 
  color: var(--color-primary); 
  display: inline-flex;        /* FLEXBOX ONLY */
  align-items: center; 
  justify-content: center; 
  box-shadow: var(--shadow-sm);
}

.mobile-nav { 
  display: flex;               /* FLEXBOX ONLY */
  flex-direction: column; 
  gap: 14px; 
  margin-top: 20px; 
}
.mobile-nav a { 
  color: #FFF; 
  padding: 12px 14px; 
  border-radius: 8px; 
  background: rgba(255,255,255,0.06); 
}
.mobile-nav a:hover { background: rgba(255,255,255,0.12); text-decoration: none; }
.mobile-nav a:last-child { background: var(--color-secondary); color: #FFF; }

/* Hero refinement (first section) */
main > section:first-of-type { background: var(--color-accent); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
main > section:first-of-type .content-wrapper > div, 
main > section:first-of-type .content-wrapper > ul, 
main > section:first-of-type .content-wrapper > ol { background: #FFF; }

/* Testimonial Cards – readable dark on light */
.testimonial-card { 
  display: flex;               /* FLEXBOX ONLY */
  flex-direction: column; 
  align-items: flex-start; 
  gap: 10px; 
  background: #FFFFFF; 
  color: var(--color-primary); 
  border: 1px solid var(--color-border); 
  border-radius: var(--radius-md); 
  padding: 20px; 
  box-shadow: var(--shadow-sm);
}
.testimonial-card .author { color: var(--color-muted); font-style: italic; }

/* Footer */
footer { background: var(--color-primary); color: #EDEBE7; border-top: 1px solid rgba(255,255,255,0.06); }
footer a { color: #EDEBE7; }
footer > .container { 
  padding-top: 28px; padding-bottom: 28px; 
  gap: 20px; 
}
footer > .container { flex-direction: column; }
footer nav { display: flex; flex-wrap: wrap; gap: 10px; }
footer img { height: 36px; width: auto; filter: brightness(1.1); }
footer ul { display: flex; flex-direction: column; gap: 6px; }
.social-links { display: flex; gap: 12px; }
.social-links a { display: inline-flex; padding: 6px; border-radius: 6px; background: rgba(255,255,255,0.06); }
.social-links a:hover { background: rgba(255,255,255,0.12); }
.social-links img { width: 20px; height: 20px; }

/* --------------------------------------
   Mandatory Spacing & Alignment Patterns
--------------------------------------- */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.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; }

/* Ensure all content elements have breathing room to avoid overlaps */
.content-wrapper > * { margin: 0; }

/* --------------------------------------
   Micro-interactions & subtle transitions
--------------------------------------- */
.content-wrapper > div, .content-wrapper > ul, .content-wrapper > ol, .card, .testimonial-card { 
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease; 
}
.content-wrapper > div:hover, .card:hover, .testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* --------------------------------------
   Readability & Lists
--------------------------------------- */
main ul, main ol { margin: 0; }
main li { padding: 4px 0; }

/* Contact blocks with icons */
.content-wrapper ul li a { color: var(--color-primary); }

/* --------------------------------------
   Cookie Consent Banner & Modal
--------------------------------------- */
.cookie-banner { 
  position: fixed; 
  left: 20px; right: 20px; bottom: 20px; 
  display: flex;                 /* FLEXBOX ONLY */
  flex-direction: column; 
  align-items: flex-start; 
  gap: 12px; 
  padding: 16px 18px; 
  background: #FFFFFF; 
  color: var(--color-ink); 
  border: 1px solid var(--color-border); 
  border-radius: var(--radius-md); 
  box-shadow: var(--shadow-md); 
  transform: translateY(140%); 
  opacity: 0; 
  transition: transform 260ms ease, opacity 260ms ease; 
  z-index: 120; 
}
.cookie-banner.show { transform: translateY(0); opacity: 1; }
.cookie-banner p { margin: 0; }
.cookie-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { 
  display: inline-flex; align-items: center; justify-content: center; 
  padding: 10px 14px; border-radius: 999px; border: 1px solid var(--color-border); 
  color: var(--color-primary); background: #FFF; transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.btn:hover { background: var(--color-accent); }
.btn-primary { background: var(--color-secondary); color: #FFF; border-color: #9A4F27; }
.btn-primary:hover { background: #9A4F27; }
.btn-ghost { background: transparent; }

/* Cookie Modal */
.cookie-modal { 
  position: fixed; inset: 0; 
  display: flex;               /* FLEXBOX ONLY */
  align-items: center; justify-content: center; 
  background: rgba(0,0,0,0.5); 
  transform: translateY(100%); 
  opacity: 0; 
  transition: transform 260ms ease, opacity 260ms ease; 
  z-index: 130; 
}
.cookie-modal.open { transform: translateY(0); opacity: 1; }
.cookie-dialog { 
  display: flex;               /* FLEXBOX ONLY */
  flex-direction: column; gap: 16px; 
  width: 100%; max-width: 560px; 
  background: #FFF; color: var(--color-ink); 
  border: 1px solid var(--color-border); border-radius: var(--radius-md); 
  box-shadow: var(--shadow-md); padding: 20px; 
}
.cookie-options { display: flex; flex-direction: column; gap: 10px; }
.cookie-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.cookie-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* --------------------------------------
   Responsive Enhancements
--------------------------------------- */
@media (min-width: 600px) {
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
}

@media (min-width: 768px) {
  /* Text-image sections align center vertically */
  .text-image-section { flex-direction: row; }

  .content-wrapper { flex-direction: row; justify-content: space-between; }

  /* Make generic children share available width elegantly */
  .content-wrapper > div { flex: 1 1 calc(50% - 10px); }
  .content-wrapper > ul, .content-wrapper > ol, .content-wrapper > dl { flex: 1 1 100%; }

  /* Larger typographic rhythm */
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }

  /* Header nav shows on tablet+ */
  header nav { display: flex; gap: 8px; align-items: center; }
  .mobile-menu-toggle { display: none; }
}

@media (min-width: 1024px) {
  /* Three-up layout when needed */
  .content-wrapper > div { flex: 1 1 calc(33.333% - 14px); }
  .content-wrapper > ul, .content-wrapper > ol, .content-wrapper > dl { flex: 1 1 calc(66.666% - 10px); }

  footer > .container { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
}

/* --------------------------------------
   Utilities & Helpers
--------------------------------------- */
.hr { height: 1px; background: var(--color-border); width: 100%; }
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--color-accent); color: var(--color-primary); }

/* --------------------------------------
   Accessibility & States
--------------------------------------- */
[hidden] { display: none !important; }
::selection { background: #EBD7C9; color: #1F1F1F; }

/* --------------------------------------
   Page-specific gentle refinements
--------------------------------------- */
/* Index: performance highlights list tighter */
body.index .content-wrapper ul li { padding: 6px 0; }

/* Footer link hover */
footer a:hover { text-decoration: underline; }

/* --------------------------------------
   Prevent overlaps & ensure spacing
--------------------------------------- */
section + section { margin-top: 0; }
.content-wrapper > * + * { margin-top: 0; }

/* Ensure readable testimonials/reviews per requirement */
section .testimonial-card, .content-wrapper .testimonial-card { background: #FFFFFF; color: #1F2326; }

/* --------------------------------------
   Navigation focus styles
--------------------------------------- */
header nav a:focus, .mobile-nav a:focus { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--color-secondary); outline: none; }

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