/* ═══════════════════════════════════════════════
   SHARED.CSS — Fagor Arrasate Market Intelligence
   Header, footer, nav, and base typography
   ═══════════════════════════════════════════════ */

:root {
  --fa-red: #D42B1E;
  --fa-red-light: #fef2f2;
  --s-bg: #FFFFFF;
  --s-surface: #F7F7F8;
  --s-border: #DCDCDC;
  --s-border-light: #EFEFEF;
  --s-text: #111111;
  --s-text-2: #444444;
  --s-text-3: #777777;
  --s-text-4: #AAAAAA;
  --s-font: 'DM Sans', system-ui, -apple-system, sans-serif;
  --s-mono: 'DM Mono', 'SF Mono', monospace;
}

/* BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--s-font); background: var(--s-bg); color: var(--s-text);
  min-height: 100vh; font-size: 16px; -webkit-font-smoothing: antialiased;
}

/* HEADER */
.site-header {
  border-bottom: 1px solid var(--s-border); padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; position: sticky; top: 0;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); z-index: 100;
}
.site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.site-logo-mark {
  width: 26px; height: 26px; background: var(--fa-red);
  clip-path: polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);
}
.site-logo-text {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--s-text);
}
.site-logo-text span { color: var(--fa-red); }
.site-nav { display: flex; gap: 4px; }
.site-nav a {
  color: var(--s-text-3); text-decoration: none; font-size: 13px; font-weight: 500;
  letter-spacing: 0.05em; padding: 7px 14px; border: 1px solid transparent;
  transition: all 0.2s;
}
.site-nav a:hover { color: var(--s-text); border-color: var(--s-border); }
.site-nav a.active { color: var(--fa-red); border-color: var(--fa-red); }

/* FOOTER */
.site-footer {
  border-top: 1px solid var(--s-border); padding: 20px 32px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--s-text-4); font-family: var(--s-mono);
}

/* MOBILE */
@media (max-width: 700px) {
  .site-header { padding: 0 16px; height: 52px; }
  .site-logo-text { font-size: 10px; }
  .site-nav a { font-size: 11px; padding: 6px 8px; }
  .site-footer {
    flex-direction: column; gap: 6px; text-align: center;
    padding: 16px;
  }
}