/* ================================================================
   static-pages.css — CPH Food Guide
   Shared styles for About, Terms, Privacy pages
================================================================ */

/* ─── STATIC HERO ────────────────────────────────────────────── */
.static-hero {
  background: linear-gradient(150deg, #3D2B1A 0%, #5C3D22 60%, #2A1E14 100%);
  padding: var(--sp-16) 0 var(--sp-10);
  position: relative;
  overflow: hidden;
}
.static-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  opacity: 0.35;
  pointer-events: none;
}
.static-hero-inner { position: relative; z-index: 1; }

.static-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #F5F0E8;
  margin-bottom: var(--sp-2);
  animation: fadeUp 0.5s var(--ease) 0.1s both;
}
.static-hero-sub {
  font-size: 0.875rem;
  color: rgba(245,240,232,0.45);
  animation: fadeUp 0.5s var(--ease) 0.2s both;
}

/* Terracotta accent for About hero */
.static-hero--about {
  background: linear-gradient(150deg, #3D2B1A 0%, #5C3D22 50%, #3D2410 100%);
}

/* ─── STATIC CONTAINER ───────────────────────────────────────── */
.static-container {
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-20);
}

/* ─── ABOUT LAYOUT ───────────────────────────────────────────── */
.about-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-12);
  align-items: start;
}

/* ── About sidebar ── */
.about-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-6));
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.about-photo-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 5/6;
  background: var(--cream-deep);
  position: relative;
}
.about-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.about-photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  color: var(--ink-faint);
}
.about-photo-placeholder span { font-size: 2.5rem; }
.about-photo-placeholder p    { font-size: 0.8125rem; }

/* When photo loads, hide placeholder */
.about-photo:not([src=""]):not([src="/assets/about-photo.jpg"]) + .about-photo-placeholder,
.about-photo[style="display: none;"] + .about-photo-placeholder {
  /* shown by default — JS onerror hides the img, placeholder shows */
}

.about-quick-facts {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
}
.about-facts-title {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--sp-4);
}
.about-facts-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.about-facts-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: 0.875rem;
  color: var(--ink-mid);
  line-height: 1.5;
}
.fact-icon { flex-shrink: 0; font-size: 1rem; margin-top: 1px; }
.about-facts-list strong { color: var(--ink); }

.about-cta-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ── About body ── */
.about-body { min-width: 0; }

.about-section {
  margin-bottom: var(--sp-10);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid var(--border);
}
.about-section:last-child { border-bottom: none; margin-bottom: 0; }

.about-section h2 {
  font-family: var(--font-serif);
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-5);
}

.about-section p {
  font-size: 1.0625rem;
  color: var(--ink-mid);
  line-height: 1.8;
  margin-bottom: var(--sp-4);
}
.about-section p:last-child { margin-bottom: 0; }

/* Scoring grid */
.scoring-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
}

.scoring-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  transition: box-shadow var(--t-mid), border-color var(--t-mid);
}
.scoring-item:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
}
.scoring-icon {
  font-size: 1.75rem;
  margin-bottom: var(--sp-2);
  display: block;
}
.scoring-item h3 {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}
.scoring-item p {
  font-size: 0.875rem;
  color: var(--ink-muted);
  line-height: 1.6;
  margin: 0;
}

.about-score-note {
  font-size: 0.9375rem !important;
  color: var(--ink-muted) !important;
  background: var(--cream-deep);
  border-left: 3px solid var(--terracotta);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-top: var(--sp-4) !important;
}

/* Rules list */
.about-rules {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.about-rules li {
  padding: var(--sp-3) var(--sp-4);
  background: var(--cream);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  color: var(--ink-mid);
  line-height: 1.6;
  border: 1px solid var(--border);
}
.about-rules strong { color: var(--ink); }

/* Contact section */
.about-section--contact { text-align: left; }

/* ─── LEGAL LAYOUT ───────────────────────────────────────────── */
.legal-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-12);
  align-items: start;
}

/* Table of contents */
.legal-toc {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-6));
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
}
.legal-toc-title {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--sp-3);
}
.legal-toc-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  counter-reset: toc;
  list-style: none;
}
.legal-toc-list li { counter-increment: toc; }
.legal-toc-list a {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  line-height: 1.4;
  display: block;
  padding: 3px 0;
  transition: color var(--t-fast);
  text-decoration: none;
}
.legal-toc-list a:hover { color: var(--terracotta); }

/* Legal body */
.legal-body { min-width: 0; }

.legal-section {
  margin-bottom: var(--sp-10);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid var(--border);
  scroll-margin-top: calc(var(--nav-h) + var(--sp-4));
}
.legal-section:last-child { border-bottom: none; margin-bottom: 0; }

.legal-section h2 {
  font-family: var(--font-serif);
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-4);
}
.legal-section p {
  font-size: 0.9375rem;
  color: var(--ink-mid);
  line-height: 1.8;
  margin-bottom: var(--sp-4);
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul {
  margin: var(--sp-3) 0 var(--sp-4) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  list-style: disc;
}
.legal-section ul li {
  font-size: 0.9375rem;
  color: var(--ink-mid);
  line-height: 1.65;
}
.legal-section strong { color: var(--ink); }
.legal-section a {
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-section a:hover { color: var(--terracotta-dark); }
.legal-section code {
  font-family: monospace;
  font-size: 0.875em;
  background: var(--cream-deep);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--ink-mid);
}

/* ─── PRIVACY SPECIFICS ──────────────────────────────────────── */
.privacy-summary-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--forest-tint);
  border: 1px solid #b8d4c4;
  border-radius: var(--radius-xl);
  font-size: 0.9375rem;
  color: var(--ink-mid);
  line-height: 1.65;
  margin-bottom: var(--sp-4);
}
.privacy-summary-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }
.privacy-summary-card strong { color: var(--ink); }
.privacy-summary-card em { font-style: italic; font-weight: 500; color: var(--forest); }

.privacy-nolist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  list-style: none !important;
  margin-left: 0 !important;
}
.privacy-nolist li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--cream);
  border-radius: var(--radius-md);
  font-size: 0.9375rem !important;
  color: var(--ink-mid) !important;
}
.privacy-nolist li span { font-size: 1.1rem; flex-shrink: 0; }

/* Data tables */
.data-table-wrap {
  overflow-x: auto;
  margin: var(--sp-4) 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.data-table th {
  background: var(--cream-deep);
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: var(--sp-3) var(--sp-4);
  color: var(--ink-mid);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.55;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--cream); }
.data-table code {
  font-family: monospace;
  font-size: 0.8em;
  background: var(--cream-deep);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .about-layout,
  .legal-layout {
    grid-template-columns: 1fr;
  }
  .about-sidebar,
  .legal-toc {
    position: static;
  }
  .about-photo-wrap { max-width: 240px; }
}

@media (max-width: 640px) {
  .scoring-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .scoring-grid { grid-template-columns: 1fr; }
}

/* ─── DARK MODE OVERRIDES ────────────────────────────────────── */

/* Static hero stays dark in both modes — title already hardcoded #F5F0E8 */

/* About sidebar cards */
[data-theme="dark"] .about-quick-facts {
  background: var(--white);
  border-color: var(--border);
}
[data-theme="dark"] .about-facts-list li {
  color: var(--ink-mid);
}
[data-theme="dark"] .about-facts-list strong {
  color: var(--ink);
}

/* About body sections */
[data-theme="dark"] .about-section {
  border-bottom-color: var(--border);
}
[data-theme="dark"] .about-section h2 {
  color: var(--ink);
}
[data-theme="dark"] .about-section p {
  color: var(--ink-mid);
}

/* Scoring grid cards */
[data-theme="dark"] .scoring-item {
  background: var(--white);
  border-color: var(--border);
}
[data-theme="dark"] .scoring-item h3 {
  color: var(--ink);
}
[data-theme="dark"] .scoring-item p {
  color: var(--ink-muted);
}

/* About score note */
[data-theme="dark"] .about-score-note {
  background: var(--cream-deep);
  color: var(--ink-muted) !important;
}

/* Rules list */
[data-theme="dark"] .about-rules li {
  background: var(--cream-deep);
  border-color: var(--border);
  color: var(--ink-mid);
}
[data-theme="dark"] .about-rules strong { color: var(--ink); }

/* Legal TOC */
[data-theme="dark"] .legal-toc {
  background: var(--white);
  border-color: var(--border);
}
[data-theme="dark"] .legal-toc-list a {
  color: var(--ink-muted);
}

/* Legal sections */
[data-theme="dark"] .legal-section {
  border-bottom-color: var(--border);
}
[data-theme="dark"] .legal-section h2 {
  color: var(--ink);
}
[data-theme="dark"] .legal-section p,
[data-theme="dark"] .legal-section ul li {
  color: var(--ink-mid);
}
[data-theme="dark"] .legal-section strong { color: var(--ink); }
[data-theme="dark"] .legal-section code {
  background: var(--cream-deep);
  color: var(--ink-mid);
}

/* Privacy summary card */
[data-theme="dark"] .privacy-summary-card {
  background: var(--forest-tint);
  border-color: var(--border);
}
[data-theme="dark"] .privacy-summary-card strong { color: var(--ink); }

/* Privacy no-list items */
[data-theme="dark"] .privacy-nolist li {
  background: var(--cream-deep);
  color: var(--ink-mid) !important;
}

/* Data tables */
[data-theme="dark"] .data-table-wrap {
  border-color: var(--border);
}
[data-theme="dark"] .data-table th {
  background: var(--cream-deep);
  color: var(--ink);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .data-table td {
  color: var(--ink-mid);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .data-table tr:hover td {
  background: var(--cream-deep);
}
[data-theme="dark"] .data-table code {
  background: var(--cream);
}