/* Sunday Roast Guide — theme tokens and components adapted from Monitor Venezuela (mv-dash).
   Same token names/structure as mv-dash global.css; default theme here is LIGHT,
   dark is applied with the .dark class on <html>. All colours are variables. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter/Inter-Bold.woff2') format('woff2');
}

:root {
  /* Light theme (default) — mv-dash .light values */
  --color-bg: #fafbfc;
  --color-surface: #ffffff;
  --color-surface-hover: #f3f4f6;
  --color-border: #e5e7eb;
  --color-text: #111214;
  --color-text-secondary: #474a50;
  --color-text-muted: #6b7078;
  --color-positive: #15803d;
  --color-negative: #dc2626;
  --color-info: #2563eb;

  --color-accent: #1a1a1a;
  --color-accent-text: #ffffff;
  --color-accent-hover: rgba(26, 26, 26, 0.08);
  --color-accent-border: rgba(26, 26, 26, 0.25);

  /* Warm food brand accent (replaces the MV brand accent) */
  --color-brand: #a34d18;
  --color-brand-soft: rgba(163, 77, 24, 0.08);

  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
}

html.dark {
  /* mv-dash dark values */
  --color-bg: #0b0c0f;
  --color-surface: #13151a;
  --color-surface-hover: #1e2229;
  --color-border: #2a2e36;
  --color-text: #f1f2f4;
  --color-text-secondary: #a3a7b0;
  --color-text-muted: #737882;
  --color-positive: #22c55e;
  --color-negative: #ef4444;
  --color-info: #3b82f6;

  --color-accent: #ffffff;
  --color-accent-text: #0b0c0f;
  --color-accent-hover: rgba(255, 255, 255, 0.15);
  --color-accent-border: rgba(255, 255, 255, 0.3);

  --color-brand: #e08a4c;
  --color-brand-soft: rgba(224, 138, 76, 0.12);
}

* { box-sizing: border-box; }

html {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
@media (min-width: 640px) { html { font-size: 15px; } }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.45;
  transition: background-color 150ms, color 150ms;
}

h1, h2, h3 { font-weight: 600; color: var(--color-text); letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
p { margin: 0; }
a { color: var(--color-info); }
strong, b { color: var(--color-text); }

/* ---------- Layout shells (mv-dash widths) ---------- */
.shell { width: 100%; max-width: 72rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .shell { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .shell { padding-left: 2rem; padding-right: 2rem; } }
.content { max-width: 56rem; margin: 0 auto; }

/* ---------- Header (mv-dash Header.astro pattern) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40; width: 100%;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 80%, transparent);
  backdrop-filter: blur(12px);
}
.header-inner { display: flex; height: 3.5rem; align-items: center; justify-content: space-between; position: relative; }
@media (min-width: 640px) { .header-inner { height: 4rem; } }
.brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--color-text); font-weight: 700; letter-spacing: -0.02em; font-size: 1.05rem; white-space: nowrap; }
.brand .brand-mark { width: 10px; height: 10px; border-radius: 9999px; background: var(--color-brand); flex: none; }
@media (max-width: 767px) {
  .brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 0.95rem; }
}
.header-right { margin-left: auto; }
.main-nav { display: none; align-items: center; gap: 0.25rem; }
@media (min-width: 768px) { .main-nav { display: flex; } }
.main-nav a {
  padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600;
  color: var(--color-text-secondary); text-decoration: none; transition: all 150ms;
}
.main-nav a:hover { color: var(--color-text); background: var(--color-surface); }
.header-right { display: flex; align-items: center; gap: 1rem; }
@media (min-width: 768px) { .header-right { padding-left: 0.5rem; border-left: 1px solid var(--color-border); } }

/* Theme toggle (mv-dash ThemeToggle.astro pattern) */
.theme-toggle {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 9999px; cursor: pointer;
  background: color-mix(in srgb, var(--color-bg) 50%, transparent);
  border: 1px solid var(--color-border); color: var(--color-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: all 300ms;
}
.theme-toggle:hover { background: var(--color-surface); }
.theme-toggle svg { position: absolute; width: 1rem; height: 1rem; transition: all 500ms ease-out; }
.theme-toggle .hidden-icon { transform: scale(0) rotate(90deg); opacity: 0; }

/* ---------- Mobile FAB menu (mv-dash pattern) ---------- */
.fab-wrap { display: none; }
@media (max-width: 767px) {
  .fab-wrap { display: flex; position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50; flex-direction: column; align-items: flex-end; gap: 0.75rem; }
}
.fab-backdrop { position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb, var(--color-bg) 60%, transparent); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 300ms; }
.fab-backdrop.open { opacity: 1; pointer-events: auto; }
.fab-menu { display: flex; flex-direction: column; gap: 0.5rem; position: relative; z-index: 50; transform-origin: bottom right; transform: scale(0.9); opacity: 0; pointer-events: none; transition: all 300ms; }
.fab-menu.open { transform: scale(1); opacity: 1; pointer-events: auto; }
.fab-menu a {
  display: flex; align-items: center; justify-content: flex-end; padding: 0.875rem 1.25rem;
  background: color-mix(in srgb, var(--color-bg) 90%, transparent); backdrop-filter: blur(12px);
  border: 1px solid var(--color-border); box-shadow: 0 10px 15px rgba(0,0,0,0.1);
  border-radius: 0.75rem; font-size: 0.875rem; font-weight: 700; color: var(--color-text); text-decoration: none;
}
.fab {
  position: relative; z-index: 50; width: 3.5rem; height: 3.5rem; border-radius: 9999px; cursor: pointer;
  background: color-mix(in srgb, var(--color-bg) 90%, transparent); backdrop-filter: blur(12px);
  border: 1px solid var(--color-border); color: var(--color-text);
  box-shadow: 0 20px 25px rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center; transition: all 150ms;
}
.fab:active { transform: scale(0.95); }
.fab svg { width: 1.5rem; height: 1.5rem; }

/* ---------- Page pieces ---------- */
.hero { padding: 3rem 0 2rem; text-align: center; position: relative; overflow: hidden; }
@media (min-width: 640px) { .hero { padding: 5rem 0 3rem; } }
.kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-brand); margin-bottom: 1rem; }
.hero h1 { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .hero h1 { font-size: 3.75rem; } }
.hero .lede { font-size: 1rem; color: var(--color-text-muted); max-width: 42rem; margin: 0 auto; line-height: 1.65; }
@media (min-width: 640px) { .hero .lede { font-size: 1.125rem; } }

.featured { border: 1px solid var(--color-border); border-radius: 1rem; width: 100%; height: auto; display: block; }

section.block { padding: 2rem 0; }
section.block h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.25rem; }
@media (min-width: 640px) { section.block h2 { font-size: 1.875rem; } }

/* Quick verdict */
.verdict { border: 1px solid var(--color-border); border-left: 4px solid var(--color-brand); background: var(--color-surface); border-radius: 0.75rem; padding: 1.25rem 1.5rem; }
.verdict p { color: var(--color-text-secondary); line-height: 1.6; }
.verdict p + p { margin-top: 0.75rem; }

/* House table (mv-dash comparison-guide pattern) */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 0.75rem; }
table.compare { width: 100%; text-align: left; border-collapse: collapse; font-size: 0.875rem; min-width: 760px; }
@media (min-width: 640px) { table.compare { font-size: 1rem; } }
table.compare thead tr { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
table.compare th { padding: 1rem; font-weight: 700; color: var(--color-text); white-space: nowrap; }
table.compare tbody tr { background: color-mix(in srgb, var(--color-surface) 50%, transparent); border-bottom: 1px solid var(--color-border); vertical-align: top; }
table.compare tbody tr:last-child { border-bottom: 0; }
table.compare td { padding: 1rem; color: var(--color-text-secondary); }
table.compare td.pub { color: var(--color-text); font-weight: 600; white-space: nowrap; }
table.compare td .sub { display: block; font-weight: 400; font-size: 0.85em; color: var(--color-text-muted); margin-top: 0.2rem; }

/* Cards / fichas */
.ficha { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.375rem; padding: 1rem 1.125rem; transition: all 200ms; }
@media (min-width: 640px) { .ficha { padding: 1rem; } }
.ficha:hover { background: var(--color-surface-hover); }
.ficha h3 { font-size: 1.1rem; margin-bottom: 0.15rem; }
.ficha .meta { font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 0.6rem; }
.ficha p { color: var(--color-text-secondary); line-height: 1.6; font-size: 0.95rem; }
.ficha-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .ficha-grid { grid-template-columns: 1fr 1fr; } }

/* Article prose (mv-dash guide body pattern, simplified) */
.prose h2 { font-size: 1.5rem; font-weight: 700; margin: 2.5rem 0 1rem; }
@media (min-width: 640px) { .prose h2 { font-size: 1.875rem; } }
.prose h3 { font-size: 1.15rem; font-weight: 600; margin: 1.75rem 0 0.5rem; }
.prose p { color: var(--color-text-secondary); line-height: 1.65; margin-bottom: 1rem; }
.prose ul { color: var(--color-text-secondary); line-height: 1.65; margin: 0 0 1rem; padding-left: 1.25rem; }
.prose li { margin-bottom: 0.4rem; }

.bestfor { display: grid; gap: 1rem; }
@media (min-width: 768px) { .bestfor { grid-template-columns: 1fr 1fr; } }

.sources { font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.6; }
.sources li { margin-bottom: 0.3rem; overflow-wrap: anywhere; }

.city-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 768px) { .city-list { grid-template-columns: 1fr 1fr; } }
.city-list a, .city-list .soon {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.375rem;
  padding: 1rem 1.125rem; text-decoration: none; color: var(--color-text); font-weight: 600;
}
.city-list a:hover { background: var(--color-surface-hover); }
.city-list .soon { color: var(--color-text-muted); font-weight: 500; }
.badge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.55rem; border-radius: 9999px; }
.badge-live { background: var(--color-brand); color: #fff; }
.badge-soon { border: 1px solid var(--color-border); color: var(--color-text-muted); }

.site-footer { border-top: 1px solid var(--color-border); margin-top: 3rem; padding: 2.5rem 0 6rem; }
@media (min-width: 768px) { .site-footer { padding-bottom: 2.5rem; } }
.site-footer p { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.6; }
.site-footer .foot-brand { font-weight: 700; color: var(--color-text); font-size: 0.95rem; margin-bottom: 0.5rem; }

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