/* =====================================================================
   ECI Conference Madrid 2027 — Component styles
   Requires tokens.css. WCAG 2.1 AA. Mobile-first.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--eci-font-body);
  font-size: var(--eci-fs-base);
  line-height: var(--eci-lh-body);
  color: var(--eci-navy);
  background: var(--eci-cream);
}

h1, h2, h3, h4 {
  font-family: var(--eci-font-head);
  font-weight: 500;
  line-height: var(--eci-lh-tight);
  color: var(--eci-blue);
  margin: 0 0 var(--eci-sp-1);
}
h1 { font-size: var(--eci-fs-h1); }
h2 { font-size: var(--eci-fs-h2); }
h3 { font-size: var(--eci-fs-h3); }
h4 { font-size: var(--eci-fs-h4); }
p  { margin: 0 0 var(--eci-sp-2); }

a { color: var(--eci-blue); text-decoration: underline; }
a:hover { text-decoration: none; }

/* ---- Focus visibility (WCAG 2.4.7) ---- */
:focus-visible {
  outline: 3px solid var(--eci-coral-text);
  outline-offset: 2px;
  border-radius: var(--eci-radius);
}

/* ---- Skip link ---- */
.eci-skip {
  position: absolute; left: var(--eci-sp-1); top: -3rem;
  background: var(--eci-blue); color: var(--eci-white);
  padding: var(--eci-sp-1) var(--eci-sp-2); border-radius: var(--eci-radius);
  z-index: 100; transition: top .15s;
}
.eci-skip:focus { top: var(--eci-sp-1); }

/* ---- Screen-reader-only ---- */
.eci-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Layout ---- */
.eci-main { max-width: var(--eci-maxw); margin: var(--eci-sp-4) auto; padding: 0 var(--eci-sp-3) var(--eci-sp-5); }
.eci-container { max-width: var(--eci-maxw); margin: 0 auto; }

/* ---- Site header ---- */
.eci-header {
  background: var(--eci-blue);
  color: var(--eci-white);
  padding: var(--eci-sp-2) var(--eci-sp-3);
}
.eci-header__inner { max-width: var(--eci-maxw); margin: 0 auto; display: flex; align-items: center; gap: var(--eci-sp-2); flex-wrap: wrap; }
.eci-header__logo { height: 2.6rem; width: auto; background: var(--eci-white); border-radius: 6px; padding: 0.25rem 0.4rem; }
.eci-header h1 { color: var(--eci-white); font-size: 1.0625rem; font-weight: 600; margin: 0; }
.eci-header .eci-sub { font-size: var(--eci-fs-xs); opacity: .85; }
.eci-header__session { display: flex; align-items: center; gap: var(--eci-sp-1); font-size: var(--eci-fs-sm); }
/* Brand lockup (product): AA badge + wordmark on the left */
.eci-brand { display: flex; align-items: center; gap: 0.5rem; margin-right: auto; }
.eci-brand__badge { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: transparent; color: var(--eci-white); border: 2px solid var(--eci-white); display: inline-flex; align-items: center; justify-content: center; font-family: var(--eci-font-head); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; flex: 0 0 auto; }
.eci-brand__name { font-family: var(--eci-font-head); font-weight: 600; color: var(--eci-white); font-size: 1.0625rem; white-space: nowrap; text-decoration: none; }
.eci-brand__name:hover { opacity: .85; }
.eci-brand__name sup { font-size: .6em; }
.eci-header__org { display: flex; align-items: center; gap: var(--eci-sp-2); }

/* ---- Cards ---- */
.eci-card {
  background: var(--eci-white);
  border: 1px solid var(--eci-line);
  border-radius: var(--eci-radius-lg);
  padding: var(--eci-sp-3);
  margin-bottom: var(--eci-sp-2);
}
.eci-lead { color: var(--eci-muted); margin-bottom: var(--eci-sp-2); }

/* ---- Buttons (Style Guide §3) ---- */
.eci-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--eci-font-head); font-weight: 500; font-size: var(--eci-fs-base);
  min-height: var(--eci-tap); min-width: var(--eci-tap);
  padding: 0.75rem 1.5rem; border-radius: var(--eci-radius);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
}
.eci-btn--primary { background: var(--eci-blue); color: var(--eci-white); }
.eci-btn--primary:hover { background: var(--eci-blue-dk); }
.eci-btn--secondary { background: transparent; color: var(--eci-coral-text); border-color: var(--eci-coral-text); }
.eci-btn--secondary:hover { background: #fdeee9; }
.eci-btn--block { width: 100%; }
.eci-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- Forms ---- */
.eci-label { display: block; font-family: var(--eci-font-head); font-weight: 500; font-size: var(--eci-fs-sm); margin: var(--eci-sp-2) 0 0.35rem; }
.eci-req { color: var(--eci-coral-text); }
.eci-input, .eci-select, .eci-textarea {
  width: 100%; font-family: var(--eci-font-body); font-size: var(--eci-fs-base);
  color: var(--eci-navy); background: var(--eci-white);
  border: 1px solid var(--eci-line); border-radius: 6px;
  padding: 0.6rem 0.7rem; min-height: var(--eci-tap);
}
.eci-textarea { min-height: 8rem; line-height: var(--eci-lh-body); resize: vertical; }
.eci-input:focus, .eci-select:focus, .eci-textarea:focus {
  outline: 3px solid var(--eci-coral); outline-offset: 1px; border-color: var(--eci-blue);
}
.eci-hint { font-size: var(--eci-fs-xs); color: var(--eci-muted); margin-top: 0.25rem; }
.eci-field-error { color: var(--eci-bad); font-size: var(--eci-fs-xs); font-weight: 600; margin-top: 0.25rem; }
.eci-input[aria-invalid="true"] { border-color: var(--eci-bad); }

/* ---- Notices ---- */
.eci-notice { padding: 0.75rem 1rem; border-radius: 6px; font-size: var(--eci-fs-sm); margin: var(--eci-sp-1) 0; border: 1px solid; }
.eci-notice--ok   { background: #e9f7f1; color: #0f5e44; border-color: #bfe6d6; }
.eci-notice--warn { background: #fbf1e0; color: #7a4708; border-color: #f0d8ad; }
.eci-notice--info { background: var(--eci-soft); color: var(--eci-blue); border-color: #cfd6ee; }

/* ---- Badges & pills ---- */
.eci-badge { display: inline-block; font-family: var(--eci-font-head); font-weight: 600; font-size: var(--eci-fs-label); padding: 0.15rem 0.6rem; border-radius: 999px; }
.eci-badge--pending { background: #fbf1e0; color: #7a4708; }
.eci-badge--done    { background: #e9f7f1; color: #0f5e44; }
.eci-pill { display: inline-block; font-family: var(--eci-font-head); font-weight: 600; font-size: var(--eci-fs-label); padding: 0.15rem 0.6rem; border-radius: 999px; color: var(--eci-white); }

/* ---- Category cards (5 tracks) ---- */
.eci-tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--eci-sp-2); }
.eci-track { border-radius: var(--eci-radius-lg); padding: var(--eci-sp-2); color: var(--eci-white); }
.eci-track h4 { color: var(--eci-white); }
.eci-track .eci-track__code { font-family: var(--eci-font-head); font-weight: 600; opacity: .9; }
.eci-track--t1 { background: var(--eci-t1); }
.eci-track--t2 { background: var(--eci-t2); }
.eci-track--t3 { background: var(--eci-t3); }
.eci-track--t4 { background: var(--eci-t4); }
.eci-track--t5 { background: var(--eci-t5); }

/* ---- Tables ---- */
.eci-table { width: 100%; border-collapse: collapse; font-size: var(--eci-fs-sm); }
.eci-table th, .eci-table td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--eci-line); vertical-align: top; }
.eci-table th { font-family: var(--eci-font-head); font-size: var(--eci-fs-label); text-transform: uppercase; letter-spacing: .03em; color: var(--eci-muted); font-weight: 600; }

/* ---- Footer ---- */
.eci-footer { text-align: center; font-size: var(--eci-fs-xs); color: var(--eci-muted); padding: var(--eci-sp-3); line-height: var(--eci-lh-body); }

/* ---- Icons ---- */
.eci-icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; vertical-align: middle; }