/* ============================================================
   theme-editorial-lu.css — Editorial Print Paradigm
   Anti-Claude-Code design system for fachleitdemgemeng.lu
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

/* ─── Tokens ─── */
:root {
  /* Paper palette — ivory + warm dark ink */
  --paper:      #FBF8F3;
  --paper-mute: #F2EDE3;
  --rule:       #D4C9BA;
  --ink:        #1A1410;
  --ink-mute:   #5A5045;
  --ink-soft:   #8C8174;

  /* Single accent — deep red, formal LU/EU */
  --accent:      #8B1E2E;
  --accent-soft: #C16A77;

  /* Type scale — serif display + clean sans body */
  --serif: 'Cormorant Garamond', 'Bodoni 72', Georgia, 'Times New Roman', serif;
  --sans:  'Source Sans 3', -apple-system, 'Helvetica Neue', sans-serif;

  /* Spacing — based on 1.4ch (line measure) */
  --col-narrow: 36rem;   /* prose column 580px */
  --col-prose:  42rem;
  --col-wide:   72rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 9rem;
}

/* ─── Reset overrides : neutralize Claude Code defaults ─── */
*, *::before, *::after { box-sizing: border-box; }

/* Wipe Tailwind rounded utilities — editorial = sharp corners */
.rounded, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl { border-radius: 0 !important; }
.rounded-full { border-radius: 50% !important; } /* keep avatars circular */

/* Wipe shadows — editorial has no drop shadows */
.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: none !important; }

/* Wipe gradients — editorial uses flat color */
[class*="bg-gradient-"] { background: var(--paper) !important; }

/* Re-color over Tailwind utility colors */
.text-blue-600, .text-blue-700, .text-blue-800,
.text-cyan-400, .text-cyan-500,
.text-green-600, .text-green-700, .text-teal-400, .text-teal-500,
.text-orange-400, .text-orange-500,
.text-yellow-400, .text-yellow-500 { color: var(--accent) !important; }

.bg-blue-50, .bg-blue-100, .bg-cyan-50,
.bg-green-50, .bg-teal-50,
.bg-orange-50, .bg-yellow-50 { background: var(--paper-mute) !important; }

.bg-blue-600, .bg-blue-700, .bg-blue-800,
.bg-green-600, .bg-teal-600,
.bg-orange-500, .bg-orange-600 { background: var(--accent) !important; }

.border-blue-200, .border-blue-300,
.border-green-200, .border-teal-200,
.border-orange-200, .border-yellow-200,
.border-gray-100, .border-gray-200, .border-gray-300 { border-color: var(--rule) !important; }

/* Override font stack across body */
html, body { font-family: var(--sans); color: var(--ink); background: var(--paper); }
.font-bold, .font-extrabold, .font-black { font-weight: 600 !important; } /* sans 600 not 800 */

/* Headings → serif */
h1, h2, h3, h4, h5, h6,
.text-2xl, .text-3xl, .text-4xl, .text-5xl, .text-6xl, .text-7xl,
.text-xl.font-bold, .text-xl.font-extrabold {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
}

/* ─── Body fundamentals ─── */
body {
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

/* ─── Editorial layout primitives ─── */
.ed-page { background: var(--paper); min-height: 100vh; }
.ed-container { max-width: var(--col-wide); margin: 0 auto; padding: 0 1.5rem; }
.ed-prose     { max-width: var(--col-prose); margin: 0 auto; padding: 0 1.5rem; }
.ed-narrow    { max-width: var(--col-narrow); margin: 0 auto; padding: 0 1.5rem; }

/* ─── Top masthead (newspaper-style nav) ─── */
.ed-masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.75rem 0;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(6px);
  background: rgba(251, 248, 243, 0.96);
}
.ed-masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.ed-logo {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
}
.ed-logo .ed-logo-tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-top: -2px;
}
.ed-nav { display: flex; gap: 2rem; align-items: center; }

/* ─── Language switcher (editorial style — text codes, no flag emojis) ─── */
.ed-lang {
  display: flex;
  align-items: center;
  gap: 0;
  padding-right: 1.25rem;
  margin-right: 0.5rem;
  border-right: 1px solid var(--rule);
}
.ed-lang-link {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  text-decoration: none !important;
  padding: 0.3rem 0.55rem;
  position: relative;
  transition: color 0.18s ease;
}
.ed-lang-link:hover { color: var(--accent); }
.ed-lang-link.active { color: var(--ink); }
.ed-lang-link.active::after {
  content: "";
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  bottom: 0.05rem;
  height: 2px;
  background: var(--accent);
}
.ed-lang-link + .ed-lang-link::before {
  content: "·";
  margin-left: -0.32rem;
  margin-right: 0.05rem;
  color: var(--rule);
  font-weight: 400;
}
@media (max-width: 768px) {
  .ed-lang { padding-right: 0.6rem; margin-right: 0.3rem; }
  .ed-lang-link { padding: 0.2rem 0.35rem; font-size: 0.68rem; letter-spacing: 0.14em; }
}
.ed-nav a {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-mute);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.18s ease;
}
.ed-nav a:hover { color: var(--accent); }
.ed-nav-cta {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--ink);
  padding: 0.5rem 1.1rem;
  color: var(--ink) !important;
  text-decoration: none !important;
  background: transparent;
  transition: all 0.2s ease;
}
.ed-nav-cta:hover { background: var(--ink); color: var(--paper) !important; }

/* ─── Editorial hero (typo-driven, no gradient) ─── */
.ed-hero {
  padding: 6rem 0 5rem;
  border-bottom: 1px solid var(--rule);
}
.ed-hero-kicker {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.ed-hero-title {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 1.5rem;
  max-width: 18ch;
}
.ed-hero-title em { font-style: italic; color: var(--accent); }
.ed-hero-deck {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--ink-mute);
  max-width: 36rem;
  margin: 0 0 2rem;
}
.ed-hero-byline {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  max-width: 36rem;
}
.ed-hero-byline strong { color: var(--ink); font-weight: 600; }

/* ─── Section header (newspaper-style) ─── */
.ed-section-head {
  border-top: 3px double var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 1rem 0 0.6rem;
  margin: 4rem 0 2.5rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.ed-section-title {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ed-section-meta {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ─── Article rows (NOT cards) ─── */
.ed-articles { display: flex; flex-direction: column; }
.ed-article-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: all 0.25s ease;
}
.ed-article-row:hover { background: var(--paper-mute); padding-left: 1rem; padding-right: 1rem; }
.ed-article-row:hover .ed-article-title { color: var(--accent); }
.ed-article-row:last-child { border-bottom: 1px solid var(--rule); }
.ed-article-cover {
  aspect-ratio: 4 / 3;
  background: var(--paper-mute);
  overflow: hidden;
}
.ed-article-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.ed-article-row:hover .ed-article-cover img { transform: scale(1.04); }
.ed-article-body { padding: 0.5rem 0; }
.ed-article-tag {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.ed-article-title {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.6rem;
  transition: color 0.2s ease;
}
.ed-article-deck {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink-mute);
  margin: 0 0 0.8rem;
}
.ed-article-byline {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.ed-article-byline span { color: var(--ink-mute); margin: 0 0.5rem; }

/* ─── Service grid (alt to card-grid) ─── */
.ed-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.ed-service {
  padding: 2.25rem 1.75rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background 0.25s ease;
  position: relative;
}
.ed-service:hover { background: var(--paper-mute); }
.ed-service-num {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}
.ed-service-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.ed-service-deck {
  font-family: var(--sans);
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--ink-mute);
  margin: 0;
}
.ed-service-arrow {
  position: absolute;
  top: 2.25rem;
  right: 1.75rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--ink-soft);
  transition: transform 0.2s ease, color 0.2s ease;
}
.ed-service:hover .ed-service-arrow { transform: translateX(4px); color: var(--accent); }

/* ─── Stats / facts strip ─── */
.ed-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 3rem 0;
}
.ed-fact { padding: 2rem 1.5rem; border-right: 1px solid var(--rule); text-align: left; }
.ed-fact:last-child { border-right: none; }
.ed-fact-num {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}
.ed-fact-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ─── Pull quote (editorial signature element) ─── */
.ed-pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.3;
  color: var(--ink);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 2.5rem 0;
  margin: 3rem auto;
  max-width: var(--col-prose);
  text-align: left;
  text-wrap: balance;
}
.ed-pullquote::before { content: "« "; color: var(--accent); }
.ed-pullquote::after { content: " »"; color: var(--accent); }
.ed-pullquote-cite {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 1.25rem;
  display: block;
}

/* ─── Buttons (editorial style — text-driven) ─── */
.ed-button {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  padding: 0.85rem 1.75rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper) !important;
  display: inline-block;
  transition: all 0.2s ease;
  cursor: pointer;
}
.ed-button:hover { background: var(--accent); border-color: var(--accent); }
.ed-button-ghost {
  background: transparent;
  color: var(--ink) !important;
}
.ed-button-ghost:hover { background: var(--ink); color: var(--paper) !important; }
.ed-link-arrow {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}
.ed-link-arrow::after { content: " →"; transition: margin 0.2s ease; }
.ed-link-arrow:hover::after { margin-left: 4px; }

/* ─── Form (editorial) ─── */
.ed-form {
  background: var(--paper-mute);
  border: 1px solid var(--rule);
  padding: 3rem 2rem;
}
.ed-form-title {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.ed-form-deck {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-mute);
  margin: 0 0 2rem;
}
.ed-input, .ed-select, .ed-textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.75rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  margin-bottom: 1.5rem;
  border-radius: 0 !important;
  transition: border-color 0.2s ease;
}
.ed-input:focus, .ed-select:focus, .ed-textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.ed-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

/* ─── Footer (editorial colophon) ─── */
.ed-footer {
  border-top: 3px double var(--ink);
  padding: 4rem 0 3rem;
  margin-top: 6rem;
  background: var(--paper-mute);
}
.ed-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
@media (max-width: 768px) {
  .ed-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .ed-article-row { grid-template-columns: 1fr; gap: 1.25rem; }
}
.ed-footer-title {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.ed-footer-list { list-style: none; padding: 0; margin: 0; }
.ed-footer-list li { margin-bottom: 0.5rem; }
.ed-footer-list a {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-mute);
  text-decoration: none;
}
.ed-footer-list a:hover { color: var(--accent); text-decoration: underline; }
.ed-footer-colophon {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  font-family: var(--serif);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.6;
}
.ed-footer-colophon a { color: var(--ink-mute); }

/* ─── Drop cap (article first paragraph) ─── */
.ed-dropcap > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 4.5rem;
  font-weight: 500;
  float: left;
  line-height: 0.9;
  margin: 0.4rem 0.5rem -0.2rem 0;
  color: var(--accent);
}

/* ─── Mobile menu toggle ─── */
.ed-menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--ink);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  .ed-nav-links { display: none; }
  .ed-menu-toggle { display: inline-block; }
  .ed-hero-title { font-size: 2.5rem; }
  .ed-services { grid-template-columns: 1fr; }
  .ed-facts { grid-template-columns: 1fr 1fr; }
  .ed-fact { border-right: none; border-bottom: 1px solid var(--rule); }
  .ed-fact:nth-child(2n) { border-right: none; }
}

/* ─── Print-quality typographic refinements ─── */
.ed-prose p { margin: 0 0 1.25rem; }
.ed-prose h2 { font-size: 1.75rem; margin: 3rem 0 1rem; letter-spacing: -0.01em; }
.ed-prose h3 { font-size: 1.25rem; margin: 2rem 0 0.6rem; font-weight: 600; }
.ed-prose blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink-mute);
  border-left: 2px solid var(--accent);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 2rem 0;
}
.ed-prose hr {
  border: none;
  text-align: center;
  margin: 2.5rem 0;
}
.ed-prose hr::before {
  content: "❦";
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--ink-soft);
}

/* ─── Trust strip (sober editorial) ─── */
.ed-trust {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-mute);
  letter-spacing: 0.05em;
}
.ed-trust span { display: flex; align-items: center; gap: 0.5rem; }
.ed-trust-bullet {
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
}