/* =========================================================
   JTA Annual Conference 2026 Dashboard
   Static, responsive, Hostinger-ready
   ========================================================= */
:root {
  --blue-900: #082a9e;
  --blue-800: #0b36bd;
  --blue-700: #1340d8;
  --blue-500: #2d6cdf;
  --teal-500: #3fd4c5;
  --yellow-500: #f4cc1a;
  --orange-400: #ffad2f;
  --green-600: #159447;
  --red-600: #cc1f37;
  --white: #ffffff;
  --ink-900: #14213d;
  --ink-700: #3d4b68;
  --ink-500: #60708f;
  --surface: #f6f9ff;
  --surface-2: #eaf2ff;
  --border: rgba(9, 42, 158, 0.12);
  --shadow: 0 16px 40px rgba(6, 38, 122, 0.12);
  --shadow-hover: 0 24px 50px rgba(6, 38, 122, 0.2);
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --container: 1240px;
  --transition: 0.28s ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink-900);
  background:
    radial-gradient(circle at top right, rgba(63, 212, 197, 0.14), transparent 28%),
    linear-gradient(180deg, #fafdff 0%, #eef4ff 100%);
  line-height: 1.6;
}
img, video, iframe, object, embed { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, .button, .nav-toggle, .card-link, .doc-button {
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
button:focus-visible, a:focus-visible, .nav-toggle:focus-visible, .card-link:focus-visible, .doc-button:focus-visible {
  outline: 3px solid var(--yellow-500);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--yellow-500);
  color: var(--ink-900);
  padding: .8rem 1rem;
  z-index: 9999;
  font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; border-radius: 999px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(8,42,158,.08);
}
.nav-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.brand { display:flex; gap:.75rem; align-items:center; flex: 0 0 auto; }
.brand-badge {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  box-shadow: var(--shadow);
  flex-shrink:0;
  overflow:hidden;
}
.brand-badge img { width:100%; height:100%; object-fit:contain; }
.brand-label { display:none; }
.nav-toggle {
  display:none;
  margin-left:auto;
  border:0;
  background: var(--surface-2);
  color: var(--blue-900);
  padding:.75rem .9rem;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
}
.site-nav {
  margin-left: auto;
  display:flex;
  align-items:center;
  gap:.32rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.site-nav a {
  padding:.65rem .72rem;
  border-radius:999px;
  color:var(--ink-700);
  font-size:.9rem;
  font-weight:700;
  white-space:nowrap;
}
.site-nav a:hover, .site-nav a.active {
  background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
  color:var(--white);
  box-shadow:0 8px 22px rgba(6,38,122,.16);
}

.carousel {
  position:relative;
  overflow:hidden;
  width:100%;
  background:#06194f;
  border-radius: 0 0 30px 30px;
  box-shadow: var(--shadow);
}
.carousel-track { position:relative; aspect-ratio: 2 / 1; max-height: 72vh; min-height: 320px; }
.carousel-slide {
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .7s ease;
  pointer-events:none;
}
.carousel-slide.active { opacity:1; pointer-events:auto; }
.carousel-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.carousel::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 62%, rgba(4,19,72,.48));
  pointer-events:none;
}
.carousel-controls {
  position:absolute;
  inset:auto 0 1rem;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
}
.carousel-arrow {
  border:1px solid rgba(255,255,255,.4);
  background:rgba(5,25,79,.66);
  color:white;
  width:42px; height:42px;
  border-radius:50%;
  font-size:1.25rem;
  cursor:pointer;
  backdrop-filter:blur(8px);
}
.carousel-dots { display:flex; gap:.45rem; }
.carousel-dot {
  width:11px; height:11px;
  padding:0; border-radius:50%;
  border:1px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.35);
  cursor:pointer;
}
.carousel-dot.active { background:var(--yellow-500); border-color:var(--yellow-500); transform:scale(1.15); }

.container { max-width:var(--container); margin:0 auto; padding:1.25rem 1rem 3.5rem; }
.section { margin-top:2.4rem; }
.info-banner, .content-card, .page-hero, .pdf-card, .empty-state, .youtube-card {
  background:rgba(255,255,255,.95);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.info-banner, .content-card, .pdf-card, .empty-state, .youtube-card { padding:1.4rem; }
.page-hero { padding:1.6rem; overflow:hidden; }
.page-hero-copy { padding:.4rem; }
.kicker {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .8rem;
  border-radius:999px;
  background:rgba(8,42,158,.08);
  border:1px solid rgba(8,42,158,.08);
  color:var(--blue-900);
  margin-bottom:.8rem;
  font-weight:700;
}
.page-hero h1 { margin:0; font-size:clamp(2.2rem, 5vw, 4rem); line-height:1.05; }
.page-hero p { margin:.75rem 0 0; color:var(--ink-700); max-width:860px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.section-heading h2 { margin:0; font-size:clamp(1.65rem, 3vw, 2.3rem); }
.section-heading p { margin:.25rem 0 0; color:var(--ink-700); max-width:760px; }

.dashboard-title { text-align:center; padding:1rem .25rem 0; }
.dashboard-title h1 { margin:0; color:var(--blue-900); font-size:clamp(1.75rem, 4vw, 3.1rem); line-height:1.12; }
.dashboard-title p { margin:.75rem auto 0; max-width:860px; color:var(--ink-700); }
.dashboard-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1.1rem; }
.dashboard-card {
  grid-column:span 3;
  min-height:235px;
  display:flex;
  flex-direction:column;
  background:rgba(255,255,255,.95);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.25rem;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.dashboard-card::before {
  content:'';
  position:absolute;
  inset:auto -20% -32% auto;
  width:180px; height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(63,212,197,.2), transparent 62%);
  pointer-events:none;
}
.card-icon {
  width:55px; height:55px;
  display:grid; place-items:center;
  border-radius:18px;
  background:linear-gradient(135deg,var(--blue-900),var(--teal-500));
  color:white; font-size:1.55rem;
  box-shadow:var(--shadow);
}
.dashboard-card h3 { margin:1rem 0 .45rem; font-size:1.24rem; }
.dashboard-card p { margin:0; color:var(--ink-700); }
.card-link { margin-top:auto; padding-top:1.05rem; align-self:flex-start; font-weight:800; color:var(--blue-900); }
.card-link:hover { transform:translateY(-2px); }

.document-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.document-card {
  display:flex; flex-direction:column;
  min-height:205px;
  background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(238,245,255,.9));
  border:1px solid var(--border);
  border-radius:20px;
  padding:1.2rem;
  box-shadow:0 10px 28px rgba(6,38,122,.08);
}
.document-card .doc-icon { font-size:1.8rem; }
.document-card h3 { margin:.55rem 0 .35rem; font-size:1.1rem; }
.document-card p { margin:0; color:var(--ink-700); font-size:.94rem; }
.doc-actions { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:auto; padding-top:1rem; }
.doc-button, .button {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.45rem; min-height:42px;
  padding:.68rem .95rem; border-radius:999px;
  border:1px solid transparent; cursor:pointer; font-weight:800;
  font:inherit; font-weight:800;
}
.doc-button { background:var(--blue-900); color:white; }
.doc-button.secondary, .button-surface { background:white; color:var(--blue-900); border-color:rgba(8,42,158,.16); }
.button-primary { background:linear-gradient(135deg,var(--yellow-500),var(--orange-400)); color:var(--ink-900); box-shadow:var(--shadow); }
.button-whatsapp { background:#25d366; color:#0b3820; box-shadow:var(--shadow); }
.button-youtube { background:#ff0033; color:white; box-shadow:var(--shadow); }
.doc-button:hover, .button:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover); }

.centered-stack { display:grid; place-items:center; gap:1rem; text-align:center; }
.qr-image { width:min(100%,360px); border-radius:24px; background:white; padding:.8rem; box-shadow:var(--shadow); }
.note { color:var(--ink-700); max-width:720px; margin:0; }
.youtube-frame { position:relative; width:100%; aspect-ratio:16/9; border-radius:20px; overflow:hidden; background:#000; box-shadow:var(--shadow); }
.youtube-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.empty-state { text-align:center; padding:3rem 1.5rem; }
.empty-state-icon { font-size:3rem; }
.empty-state h2 { margin:.5rem 0; }
.empty-state p { color:var(--ink-700); max-width:700px; margin:.4rem auto 0; }

.pdf-modal[hidden] { display:none; }
.pdf-modal { position:fixed; inset:0; z-index:4000; display:grid; place-items:center; padding:1rem; background:rgba(7,20,58,.78); backdrop-filter:blur(7px); }
.pdf-dialog { width:min(1180px,100%); height:min(90vh,920px); background:white; border-radius:22px; overflow:hidden; box-shadow:0 25px 70px rgba(0,0,0,.35); display:flex; flex-direction:column; }
.pdf-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1rem; background:linear-gradient(135deg,var(--blue-900),var(--blue-700)); color:white; }
.pdf-dialog-head h2 { font-size:1rem; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modal-close { border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.14); color:white; border-radius:999px; width:40px; height:40px; cursor:pointer; font-size:1.2rem; flex:0 0 auto; }
.pdf-dialog iframe { width:100%; height:100%; border:0; background:#e8eefc; }

.footer { max-width:var(--container); margin:0 auto; padding:0 1rem 2rem; }
.footer-card { background:linear-gradient(135deg,var(--blue-900),var(--blue-700)); color:white; padding:1.4rem; border-radius:24px; box-shadow:var(--shadow); }
.footer-card p { margin:0; color:rgba(255,255,255,.9); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width:1100px) {
  .dashboard-card { grid-column:span 4; }
  .document-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-nav a { font-size:.84rem; padding:.58rem .62rem; }
}
@media (max-width:840px) {
  .nav-wrap { flex-wrap:wrap; }
  .nav-toggle { display:inline-flex; }
  .site-nav { display:none; width:100%; padding-top:.4rem; flex-direction:column; align-items:stretch; }
  .site-nav.open { display:flex; }
  .site-nav a { border-radius:14px; font-size:.95rem; }
  .dashboard-card { grid-column:span 6; }
  .carousel-track { min-height:260px; }
}
@media (max-width:620px) {
  .brand-badge { width:43px; height:43px; }
  .container { padding-top:1rem; }
  .carousel { border-radius:0 0 22px 22px; }
  .carousel-track { min-height:0; aspect-ratio:2/1; }
  .carousel-arrow { width:38px; height:38px; }
  .dashboard-card { grid-column:span 12; min-height:auto; }
  .document-grid { grid-template-columns:1fr; }
  .page-hero, .info-banner, .content-card, .pdf-card, .empty-state, .youtube-card { padding:1rem; }
  .pdf-modal { padding:.35rem; }
  .pdf-dialog { height:96vh; border-radius:14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}