/*
  ╔══════════════════════════════════════════════════════════════════╗
  ║  Debtwatch Hellas — Lorenz 2 Design System                      ║
  ║  /assets/css/lorenz2.css                                        ║
  ║  Κεντρικό stylesheet — φορτώνεται σε κάθε σελίδα               ║
  ║  <link rel="stylesheet" href="/assets/css/lorenz2.css">         ║
  ╚══════════════════════════════════════════════════════════════════╝

  ΠΕΡΙΕΧΟΜΕΝΑ:
  1.  Reset & Root Variables
  2.  Base Typography
  3.  Navigation
  4.  BS Strip (Heraclitus Bar)
  5.  Breadcrumb
  6.  Page Header
  7.  Stat Boxes
  8.  Tags
  9.  Page Body Layout
  10. Article Text
  11. Sidebar
  12. Dark Box Fix (universal)
  13. Component Library
  14. Footer
  15. Utilities
  16. Responsive
*/

/* ═══════════════════════════════════════════
   1. RESET & ROOT VARIABLES
═══════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Blues */
  --blue-nav:  #162d52;
  --blue-hero: #1b3560;
  --blue-deep: #1e3f6f;
  --blue-mid:  #2a527f;
  --blue-soft: #3a6b9e;
  --blue-tint: #eef5fb;

  /* Creams */
  --cream:   #f7f3ec;
  --cream-2: #ede8de;
  --cream-3: #e2dbd0;
  --cream-4: #ccc4b4;

  /* Ink */
  --ink:   #1a1612;
  --ink-2: #3a342c;
  --ink-3: #6b6055;

  /* Accent */
  --gold:   #9a7c3a;
  --gold-l: #b8963f;
  --red:    #8b1a1a;
  --red-l:  #a32020;
  --green:  #245924;

  /* Typography */
  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Source Sans 3', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', monospace;

  /* Layout */
  --max:   1280px;
  --nav-h: 60px;
  --bs-h:  44px;
}

html { scroll-behavior: smooth }

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════
   2. BASE TYPOGRAPHY
═══════════════════════════════════════════ */

h1,h2,h3,h4,h5,h6 { font-family: var(--serif); line-height: 1.2 }
a { color: var(--blue-soft); }

/* ═══════════════════════════════════════════
   3. NAVIGATION
═══════════════════════════════════════════ */

nav {
  position: sticky;
  top: 0;
  z-index: 300;
  height: var(--nav-h);
  background: var(--blue-nav);
  border-bottom: 2px solid var(--gold);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  height: 100%;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-brand-name {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1;
}
.nav-brand-sub {
  font-family: var(--mono);
  font-size: .55rem;
  color: var(--gold-l);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nav-back {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #c8d8eb;
  text-decoration: none;
  transition: color .2s;
}
.nav-back:hover { color: var(--gold-l) }

/* ═══════════════════════════════════════════
   4. BS STRIP — Heraclitus Bar
═══════════════════════════════════════════ */

.bs-strip {
  position: sticky;
  top: var(--nav-h);
  z-index: 200;
  height: var(--bs-h);
  background: var(--blue-hero);
  border-bottom: 1px solid rgba(154,124,58,.35);
  display: flex;
  align-items: center;
}
.bs-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}
.bs-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: .78rem;
  color: rgba(247,243,236,.5);
  white-space: nowrap;
}
.bs-center {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  justify-content: center;
}
.bs-pill {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-l);
  border: 1px solid rgba(154,124,58,.4);
  padding: 3px 10px;
  white-space: nowrap;
}
.bs-sep {
  color: rgba(154,124,58,.4);
  font-family: var(--mono);
}
.bs-tagline {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  color: rgba(247,243,236,.65);
}
.bs-link {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid rgba(154,124,58,.3);
  padding: 3px 9px;
  transition: border-color .2s, color .2s;
}
.bs-link:hover { border-color: var(--gold-l); color: var(--gold-l) }

/* ═══════════════════════════════════════════
   5. BREADCRUMB
═══════════════════════════════════════════ */

.breadcrumb {
  background: var(--cream-2);
  border-bottom: 1px solid var(--cream-4);
  padding: .65rem 2rem;
}
.bc {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.bc a {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue-soft);
  text-decoration: none;
}
.bc a:hover { color: var(--gold) }
.bc-sep {
  font-family: var(--mono);
  font-size: .6rem;
  color: var(--cream-4);
}
.bc-cur {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ═══════════════════════════════════════════
   6. PAGE HEADER
═══════════════════════════════════════════ */

.page-header {
  background: var(--blue-hero);
  padding: 3.5rem 2rem 3rem;
  position: relative;
  overflow: hidden;
}
.page-header-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: start;
}
.page-eyebrow {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-l);
  margin-bottom: .6rem;
  display: block;
}
.page-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--cream);
  line-height: 1.1;
  margin-bottom: .5rem;
}
.page-subtitle {
  font-size: .92rem;
  color: #93aec8;
  line-height: 1.75;
  max-width: 560px;
  margin-bottom: 1rem;
}
.page-rule {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin: .75rem 0;
}
/* Links inside dark header */
.page-header a,
.page-subtitle a,
.bs-strip a:not(.bs-link) {
  color: var(--gold-l);
  text-decoration: none;
  border-bottom: 1px solid rgba(154,124,58,.4);
  transition: color .15s, border-color .15s;
}
.page-header a:hover,
.page-subtitle a:hover { color: #fff; border-bottom-color: #fff }

/* ═══════════════════════════════════════════
   7. STAT BOXES
═══════════════════════════════════════════ */

.header-stats {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: flex-end;
}
.stat-box {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(154,124,58,.25);
  border-top: 2px solid var(--gold);
  padding: .65rem 1.1rem;
  text-align: center;
  min-width: 90px;
}
.stat-num {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1;
}
.stat-lbl {
  font-family: var(--mono);
  font-size: .52rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-l);
  margin-top: .2rem;
  opacity: .9;
}

/* ═══════════════════════════════════════════
   8. TAGS
═══════════════════════════════════════════ */

.page-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1rem;
}
/* Tags in dark header */
.page-header .tag,
.page-tags .tag {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .06em;
  color: rgba(247,243,236,.72);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(154,124,58,.3);
  padding: 3px 9px;
  cursor: default;
  transition: color .15s, border-color .15s;
}
.page-header .tag:hover,
.page-tags .tag:hover { color: var(--gold-l); border-color: var(--gold) }
/* Tags in light context */
.tag {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .06em;
  color: var(--blue-soft);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(58,107,158,.25);
  padding: 3px 9px;
  cursor: default;
  transition: color .15s, border-color .15s;
}
.tag:hover { color: var(--gold); border-color: var(--gold) }

/* ═══════════════════════════════════════════
   9. PAGE BODY LAYOUT
═══════════════════════════════════════════ */

.page-body {
  max-width: var(--max);
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 3.5rem;
  align-items: start;
}
.content-divider {
  border: none;
  border-top: 1px solid var(--cream-4);
  margin: 2.5rem 0;
}

/* ═══════════════════════════════════════════
   10. ARTICLE TEXT
═══════════════════════════════════════════ */

.article-text p {
  font-size: .95rem;
  color: var(--ink-2);
  line-height: 1.8;
  margin-bottom: 1.1rem;
}
.article-text p:first-child::first-letter {
  font-family: var(--serif);
  font-size: 3.4rem;
  font-weight: 700;
  float: left;
  line-height: .82;
  margin: .06em .1em 0 0;
  color: var(--blue-deep);
}
.article-text h2 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--blue-deep);
  margin: 2.5rem 0 .75rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--cream-3);
}
.article-text h2::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--gold);
  margin-bottom: .5rem;
}
.article-text h3 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  font-style: italic;
  color: var(--blue-deep);
  margin: 1.75rem 0 .5rem;
}
/* Links in article body */
.article-text a {
  color: var(--blue-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(58,107,158,.3);
  transition: color .15s, border-color .15s;
}
.article-text a:hover { color: var(--blue-deep); border-bottom-color: var(--blue-deep) }

/* ═══════════════════════════════════════════
   11. SIDEBAR
═══════════════════════════════════════════ */

.sidebar {
  position: sticky;
  top: calc(var(--nav-h) + var(--bs-h) + 60px);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.sb-card {
  background: #fff;
  border: 1px solid var(--cream-4);
  border-top: 2px solid var(--blue-soft);
  padding: 1.1rem;
}
.sb-card.gold  { border-top-color: var(--gold) }
.sb-card.dark  { background: var(--blue-hero); border-top-color: var(--gold) }
.sb-card.red   { border-top-color: var(--red-l) }
.sb-label {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .65rem;
  display: block;
}
.sb-label.red { color: var(--red-l) }
.sb-body {
  font-size: .82rem;
  color: var(--ink-3);
  line-height: 1.65;
}
.sb-body.light { color: #93aec8 }
.sb-nav { list-style: none; display: flex; flex-direction: column; gap: 0 }
.sb-nav li a {
  font-size: .82rem;
  color: var(--blue-soft);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--cream-3);
  transition: color .15s;
}
.sb-nav li:last-child a { border-bottom: none }
.sb-nav li a:hover { color: var(--blue-deep) }
.sb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cream-4);
  flex-shrink: 0;
}
.sb-tags { display: flex; flex-wrap: wrap; gap: .4rem }
.sb-tag {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .04em;
  color: var(--blue-soft);
  border: 1px solid rgba(58,107,158,.25);
  padding: 3px 8px;
  text-decoration: none;
  cursor: default;
  transition: border-color .15s, color .15s;
}
.sb-tag:hover { border-color: var(--gold); color: var(--gold) }

/* ═══════════════════════════════════════════
   12. DARK BOX FIX — Universal
   Κείμενο σε οποιοδήποτε σκούρο πλαίσιο
═══════════════════════════════════════════ */

.thesis-box, .principle-box, .holding-box,
.state-aid-box, .teaser-box, .manifesto,
.consequence, .dw-link, .poll-box,
.featured-case, .outlier-box {
  /* τα p μέσα σε σκούρα πλαίσια παίρνουν cream */
}
.thesis-box p,    .thesis-box li,
.principle-box p, .principle-box li,
.holding-box p,   .holding-box li,
.state-aid-box p, .state-aid-box li,
.teaser-box p,    .teaser-box li,
.manifesto p,     .manifesto li,
.consequence p,   .consequence li,
.dw-link p,
.poll-box p,
.featured-case p,
.outlier-box p,   .outlier-box li {
  color: rgba(247,243,236,.82) !important;
}
/* Labels/titles in dark boxes stay gold */
.thesis-box .thesis-label,
.principle-box .principle-label,
.holding-box .holding-label,
.state-aid-box .state-aid-label,
.teaser-box .teaser-label,
.consequence .consequence-label { color: var(--gold-l) }

/* ═══════════════════════════════════════════
   13. COMPONENT LIBRARY
═══════════════════════════════════════════ */

/* Pull Quote */
.pull-q {
  margin: 2rem 0;
  padding: 1.1rem 1.5rem;
  border-top: 2px solid var(--cream-4);
  border-bottom: 2px solid var(--cream-4);
  background: var(--cream-2);
}
.pull-q p {
  font-family: var(--serif) !important;
  font-size: 1.1rem !important;
  font-style: italic;
  color: var(--blue-deep) !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
}

/* Legal Excerpt */
.legal-excerpt {
  background: #fff;
  border: 1px solid var(--cream-4);
  border-left: 3px solid var(--blue-soft);
  padding: 1.1rem 1.4rem;
  margin: 1.25rem 0;
}
.legal-excerpt-label {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-soft);
  display: block;
  margin-bottom: .65rem;
}
.legal-excerpt blockquote {
  font-family: var(--serif);
  font-size: .9rem;
  font-style: italic;
  color: var(--ink);
  line-height: 1.75;
}
.legal-excerpt .src,
.legal-excerpt .excerpt-src {
  font-family: var(--mono);
  font-size: .65rem;
  color: var(--ink-3);
  display: block;
  margin-top: .5rem;
  font-style: normal;
}

/* Callout / Info Box (light) */
.callout {
  background: var(--cream-2);
  border: 1px solid var(--cream-4);
  border-left: 4px solid var(--gold);
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
}
.callout-label {
  font-family: var(--mono);
  font-size: .57rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .4rem;
  display: block;
}
.callout p { font-size: .88rem; color: var(--ink-2); line-height: 1.7 }

/* Status Badge */
.status-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border: 1px solid;
  margin-bottom: 1rem;
}
.status-badge.ongoing { color: var(--green); border-color: var(--green); background: rgba(36,89,36,.07) }
.status-badge.closed  { color: var(--red);   border-color: var(--red);   background: rgba(139,26,26,.06) }

/* Utility: ok / no / warn */
.ok   { color: var(--green); font-weight: 600 }
.no   { color: var(--red);   font-weight: 600 }
.warn { color: var(--gold);  font-weight: 600 }

/* ═══════════════════════════════════════════
   14. FOOTER
═══════════════════════════════════════════ */

footer {
  background: var(--blue-nav);
  border-top: 1px solid rgba(154,124,58,.2);
  padding: 1.75rem 2rem;
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-brand {
  font-family: var(--serif);
  font-size: .95rem;
  font-weight: 700;
  color: var(--cream);
}
.footer-bs {
  font-family: var(--serif);
  font-style: italic;
  font-size: .78rem;
  color: rgba(184,150,63,.5);
}
.footer-copy { font-size: .75rem; color: #4a6880 }

/* ═══════════════════════════════════════════
   15. UTILITIES
═══════════════════════════════════════════ */

.hidden  { display: none !important }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0) }

/* ═══════════════════════════════════════════
   16. RESPONSIVE
═══════════════════════════════════════════ */

/* Tablet — 1100px */
@media(max-width: 1100px) {
  .page-body {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .sidebar { position: static }
}

/* Small tablet — 760px */
@media(max-width: 760px) {
  .page-header-inner {
    grid-template-columns: 1fr;
  }
  .header-stats {
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .stat-box { min-width: 70px; padding: .5rem .75rem }
  .bs-quote { display: none }
  .bs-center { justify-content: flex-start }
  .footer-inner { flex-direction: column; gap: .5rem; text-align: center }
}

/* Mobile — 480px */
@media(max-width: 480px) {
  .page-header { padding: 2rem 1.25rem 1.75rem }
  .page-body   { padding: 1.5rem 1.25rem 3rem }
  .nav-inner   { padding: 0 1.25rem }
  .bs-inner    { padding: 0 1.25rem }
  .breadcrumb  { padding: .65rem 1.25rem }
  .header-stats { display: none }
  .bs-pill:not(:first-child) { display: none }
  .page-title  { font-size: 1.6rem }
}