/* ===========================
   Figueres European Congress — Official Theme (v3 FINAL)
   =========================== */

/* ---- Variables globals ---- */
:root {
  --fec-primary: #1e3a8a;          /* dark blue */
  --fec-primary-600: #2a3e9a;
  --fec-accent: #3b82f6;
  --fec-bg: #f4f6fb;
  --fec-surface: #ffffff;
  --fec-text: #0f172a;
  --fec-text-muted: #64748b;
  --fec-border: #e5e7eb;

  --container: 1200px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .10);

  --fs-12: clamp(12px, .8vw, 13px);
  --fs-14: clamp(13px, .9vw, 14px);
  --fs-16: clamp(15px, 1.0vw, 16px);
  --fs-18: clamp(16px, 1.2vw, 18px);
  --fs-20: clamp(18px, 1.4vw, 20px);
  --fs-24: clamp(20px, 1.8vw, 24px);
  --fs-28: clamp(22px, 2.0vw, 28px);
}

/* ---- Base ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #f4f6fb;
  background: var(--fec-bg);
  color: #0f172a;
  color: var(--fec-text);

  font-weight: 400;
  font-size: 16px;
  font-size: var(--fs-16);
  line-height: 1.55;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: #1e3a8a;
  color: var(--fec-primary);
  text-decoration: none;
}
a:hover {
  color: #3b82f6;
  color: var(--fec-accent);
  text-decoration: underline;
}

img { max-width: 100%; display: block; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.page {
  padding: 28px 0;
}

.page-title {
  margin: 8px 0 18px;
  font-size: 28px;
  font-size: var(--fs-28);
  font-weight: 700;
  color: #1e3a8a;
  color: var(--fec-primary);
}

/* ---- Navbar ---- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, #1e3a8a, #2a3e9a);
  background: linear-gradient(180deg, var(--fec-primary), var(--fec-primary-600));
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
}
.brand {
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 20px;
  font-size: var(--fs-20);
}
.brand:hover {
  color: #dbeafe;
}
.nav-links {
  display: flex;
  gap: 18px;
  align-items: center;
}
.nav-links a {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  font-size: var(--fs-14);
  padding: 10px 6px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover {
  color: #dbeafe;
}
.nav-links a.active {
  border-bottom-color: #dbeafe;
}
.burger {
  display: none;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 14px;
  font-size: var(--fs-14);
}
.burger:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Responsive Navbar (mobile) */
@media (max-width: 860px) {
  .nav-links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    background: #1e3a8a;
    background: var(--fec-primary);
    padding: 12px 20px 16px;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
  }
  .nav-links.open {
    display: grid;
    grid-template-columns: 1fr;
  }
  .burger {
    display: inline-block;
  }
}

/* ---- Cards & Layout ---- */
.grid.cards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.card {
  background: #fff;
  background: var(--fec-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
  box-shadow: var(--shadow-md);
  padding: 20px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}
.card-title {
  margin: 0 0 10px;
  font-size: 20px;
  font-size: var(--fs-20);
  font-weight: 700;
  color: #1e3a8a;
  color: var(--fec-primary);
}
.card-subtitle {
  margin: .4rem 0 .6rem;
  color: #334155;
  font-weight: 600;
}
.card-muted {
  color: #64748b;
  color: var(--fec-text-muted);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  box-shadow: var(--shadow-sm);
}
.card-error {
  color: #991b1b;
  background: #fee2e2;
  border: 1px solid #fecaca;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  background: #1e3a8a;
  background: var(--fec-primary);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
  font-size: var(--fs-14);
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(30, 58, 138, .25);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover {
  background: #3b82f6;
  background: var(--fec-accent);
  text-decoration: none;
  transform: translateY(-1px);
}
.link-card {
  display: block;
  text-decoration: none;
}
.link-card:hover {
  transform: translateY(-1px);
  transition: .15s;
}
.link-back {
  color: #1e3a8a;
  color: var(--fec-primary);
  font-weight: 700;
}

/* ---- Lists ---- */
.list {
  padding-left: 1.2rem;
  margin: .1rem 0;
}
.list.compact li {
  margin: 2px 0;
}

/* ---- Utilities ---- */
.grid-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.mt { margin-top: 18px; }
.mt-0-5 { margin-top: .5rem; }

/* ---- WYSIWYG ---- */
.wysiwyg p {
  line-height: 1.7;
  margin: .5rem 0;
}
.wysiwyg h1, .wysiwyg h2, .wysiwyg h3 {
  color: #1e3a8a;
  color: var(--fec-primary);
  margin: .6rem 0;
}
.wysiwyg a {
  color: #1e3a8a;
  color: var(--fec-primary);
  font-weight: 600;
}
.wysiwyg ul {
  padding-left: 1.2rem;
}

/* ---- Form iframe ---- */
.form-frame {
  border: 0;
  border-radius: 14px;
  width: 100%;
  min-height: 75vh;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  box-shadow: var(--shadow-sm);
}

/* ---- Inputs ---- */
input, select, textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  font-size: var(--fs-14);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--fec-border);
  border-radius: 12px;
  background: #fff;
}
label {
  font-weight: 600;
  color: #0f172a;
  color: var(--fec-text);
}
button { font: inherit; }

/* ---- Footer ---- */
.footer {
  margin: 34px 0 24px;
  color: #64748b;
  color: var(--fec-text-muted);
  font-size: 12px;
  font-size: var(--fs-12);
  text-align: center;
}

/* ---- Anti-overlay ---- */
header, .navbar { position: sticky; z-index: 5; }
main, .page { position: relative; z-index: 1; }