/* ============================================================
   ServiaOS — Estilos del contenido renderizado en el borde.
   Solo aplican al markup .srv-seo que emite la Edge Function.
   Con JavaScript activo ese markup se borra (cada render de
   sections.js empieza con innerHTML = ""), así que estas reglas
   dejan de tener sujeto y no pueden afectar al diseño real.
   Usan los tokens existentes; no redefinen ninguno.
   ============================================================ */

/* #site-header es position:fixed (site.css), así que sin JS el contenido se
   metía por debajo y los títulos quedaban cortados. Este desplazamiento solo
   existe mientras el markup del servidor está en la página: al hidratar, el
   cliente lo borra, `:has(.srv-seo)` deja de coincidir y la regla se apaga. */
body:has(.srv-seo) main { padding-top: 96px; }
body:has(.srv-seo) .srv-seo h2 { scroll-margin-top: 110px; }

.srv-seo {
  max-width: var(--content-max, 1120px);
  margin: 0 auto;
  padding: var(--space-6, 32px) var(--space-5, 24px);
  font-family: var(--font-sans);
  color: var(--fg, #404329);
}

.srv-seo h1 {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 var(--space-3, 12px);
}

.srv-seo h2 {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 var(--space-5, 24px);
}

.srv-seo h3 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle, #8A8B77);
  margin: var(--space-6, 32px) 0 var(--space-3, 12px);
}

.srv-seo p { margin: 0 0 var(--space-3, 12px); line-height: 1.65; }
.srv-seo blockquote {
  margin: var(--space-5, 24px) 0;
  padding-left: var(--space-4, 16px);
  border-left: 2px solid var(--line, #D9D8CC);
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
}
.srv-seo a { color: inherit; }

.srv-seo-tagline {
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-size: clamp(16px, 2.5vw, 22px);
  color: var(--fg-muted, #595B44);
}

.srv-seo ul { list-style: none; margin: 0; padding: 0; }

.srv-seo-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--space-4, 16px);
  padding: var(--space-3, 12px) 0;
  border-bottom: 1px solid var(--line, #D9D8CC);
}
.srv-seo-item-name { font-weight: 500; }
.srv-seo-item-price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.srv-seo-item-desc,
.srv-seo-item-allergens {
  grid-column: 1 / -1;
  font-size: 14px;
  color: var(--fg-muted, #595B44);
  line-height: 1.5;
}
.srv-seo-item-allergens { font-size: 12px; color: var(--fg-subtle, #8A8B77); }
.srv-seo-item time {
  grid-column: 1 / -1;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle, #8A8B77);
}

.srv-seo-price { font-size: 20px; font-weight: 500; }
.srv-seo-days {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle, #8A8B77);
}

.srv-seo-hours { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-5, 24px); margin: 0; }
.srv-seo-hours dt { color: var(--fg-muted, #595B44); }
.srv-seo-hours dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Header / footer / navegación */
.srv-seo-header,
.srv-seo-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4, 16px) var(--space-5, 24px);
  border-bottom: 1px solid var(--line, #D9D8CC);
}
.srv-seo-footer { border-bottom: 0; border-top: 1px solid var(--line, #D9D8CC); }
.srv-seo-brand {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 20px;
  margin: 0;
  margin-right: auto;
}
.srv-seo-nav ul,
.srv-seo-langs ul { display: flex; flex-wrap: wrap; gap: var(--space-4, 16px); }
.srv-seo-nav a,
.srv-seo-langs a,
.srv-seo-langs span {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.srv-seo-nav a:hover { text-decoration: underline; }
.srv-seo-langs [aria-current="true"] { font-weight: 600; text-decoration: underline; }