/* -----------------------------------------------------------------------------
   MFTD 2027 - base styles

   Reset, typography defaults and the public site chrome (header, nav, footer).
   Every value comes from _tokens.css - see the header comment there for why.
   Page-specific styles (home, programme, badges...) get their own stylesheet
   as each is built; this file only covers what every page shares.
   ----------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* --- Scroll reveal --------------------------------------------------------
   [data-reveal] starts hidden/offset and gets .is-visible from main.js's
   IntersectionObserver. Progressive enhancement: no-JS and
   prefers-reduced-motion visitors see the element already in its final
   state (main.js also skips the observer entirely in that case). */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

.icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }

/* --- Comparison table -------------------------------------------------------
   Shared by every "compare the options side by side" page (badges,
   exhibition stand types, sponsoring levels). */

.compare-table-wrap {
  overflow-x: auto;
  background: var(--c-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.compare-table th, .compare-table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  white-space: nowrap;
}
.compare-table th { color: var(--c-primary); font-weight: var(--fw-semibold); }
.compare-table__mark { text-align: center; color: var(--c-accent-text); font-weight: var(--fw-semibold); }

/* --- Public forms + result banner ------------------------------------------
   Shared by every public form-then-confirmation flow (badge registration,
   exhibit stand booking...) and by the verification scan result banner
   (also reused by the exhibit booking "done" state) - moved here from
   badge.css/verification.css for the same reason as .compare-table above:
   a second page needed the exact same component. */

.register { max-width: var(--container-narrow); padding-bottom: var(--section-y); }

.register__sticky-pack {
  position: sticky;
  top: calc(var(--header-h) + var(--s-4));
  z-index: var(--z-sticky);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--c-primary);
  color: #fff;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  margin-bottom: var(--s-6);
  box-shadow: var(--shadow-card);
}
.register__pack-name { font-weight: var(--fw-semibold); }
.register__pack-price { font-family: var(--font-title); font-weight: var(--fw-semibold); }

/* Honeypot: off-screen, not display:none - bots that only check for hidden
   attributes/display:none still fill it in, which is the point. */
.register__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.register__form {
  background: var(--c-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--s-6);
}

.register__form .form-group { margin-bottom: var(--s-5); }
.register__form .form-group label {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-muted);
  margin-bottom: var(--s-2);
}
.register__form input[type="text"],
.register__form input[type="email"],
.register__form select,
.register__form textarea {
  width: 100%;
  padding: var(--s-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}
.register__form textarea { min-height: 6rem; resize: vertical; }
.register__form input:focus-visible,
.register__form select:focus-visible,
.register__form textarea:focus-visible {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: var(--focus-ring);
}
.register__form .form-check { display: flex; align-items: flex-start; gap: var(--s-2); }
.register__form .form-check input { width: auto; margin-top: 3px; }
.register__form .form-error { color: var(--c-danger); font-size: var(--fs-tiny); margin-top: var(--s-2); }
.register__form .form-actions { margin-top: var(--s-6); }

/* --- Result banner (verification scan states, booking "done"...) ----------- */

.verify-result {
  border-radius: var(--radius);
  padding: var(--s-6);
  margin-bottom: var(--s-6);
  text-align: center;
}
.verify-result p { margin: 0 0 var(--s-2); }
.verify-result__title { margin-bottom: var(--s-3); }

.verify-result__details {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: var(--s-1) var(--s-4);
  text-align: left;
  margin: var(--s-4) 0;
}
.verify-result__details dt { color: inherit; opacity: .75; font-size: var(--fs-small); }
.verify-result__details dd { margin: 0; font-weight: var(--fw-semibold); }

.verify-result__meta { font-size: var(--fs-small); opacity: .85; }

.verify-result--valid {
  background: var(--c-success-bg);
  color: var(--c-success);
}
.verify-result--already-used,
.verify-result--unpaid {
  background: var(--c-warning-bg);
  color: var(--c-warning);
}
.verify-result--expired {
  background: var(--c-surface-2);
  color: var(--c-muted);
}
.verify-result--not-open {
  background: var(--c-info-bg);
  color: var(--c-info);
}
.verify-result--invalid,
.verify-result--rate-limited {
  background: var(--c-danger-bg);
  color: var(--c-danger);
}
.verify-result--valid .verify-result__title,
.verify-result--already-used .verify-result__title,
.verify-result--expired .verify-result__title,
.verify-result--not-open .verify-result__title,
.verify-result--unpaid .verify-result__title,
.verify-result--invalid .verify-result__title { color: inherit; }

/* --- Strategic pillars -------------------------------------------------
   Shared by every page that walks through the 4 pillars (home, edition). */

.pillars {
  padding-block: var(--section-y);
}

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
}

@media (max-width: 900px) {
  .pillars__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pillars__grid { grid-template-columns: 1fr; }
}

.pillar-card {
  padding: var(--s-6);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.pillar-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.pillar-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-accent-text);
  margin-bottom: var(--s-4);
}
.pillar-card__icon .icon { width: 1.75rem; height: 1.75rem; }

.pillar-card__num {
  display: block;
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-accent-soft);
  -webkit-text-stroke: 1px var(--c-accent-text);
  margin-bottom: var(--s-3);
}

.pillar-card h3 {
  font-size: var(--fs-h4);
  color: var(--c-primary);
}

.pillar-card p {
  color: var(--c-muted);
  font-size: var(--fs-small);
  margin-bottom: 0;
}

/* --- CTA banner - shared by every page that ends on a "book my badge" push. */

.cta-banner {
  background: var(--c-primary);
  color: #fff;
}

.cta-banner__inner {
  padding-block: var(--s-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.cta-banner__inner h2 {
  color: #fff;
  margin: 0;
  max-width: 40ch;
}

.cta-banner .btn--primary {
  background: #fff;
  color: var(--c-primary);
  flex-shrink: 0;
}
.cta-banner .btn--primary:hover {
  background: var(--c-surface);
}

/* Shared "nothing here yet" state (programme, speakers...) - deliberately
   plain content, never fabricated placeholder data, but still a proper
   styled component rather than a lone line of grey text. */
.empty-state {
  max-width: 28rem;
  margin: 0 auto;
  padding: var(--s-9) var(--s-5);
  text-align: center;
  color: var(--c-muted);
}
.empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-accent-text);
  margin-bottom: var(--s-5);
}
.empty-state__icon .icon { width: 1.75rem; height: 1.75rem; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-bg);
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  margin: 0 0 var(--s-4);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--s-4); }

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

a {
  color: var(--c-accent-text);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.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;
}

/* Visible only when it receives focus (keyboard skip link). */
.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -3rem;
  z-index: var(--z-toast);
  background: var(--c-primary);
  color: #fff;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-sm);
  transition: top var(--t-base) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  text-decoration: none;
}
.btn:hover { text-decoration: none; }

.btn--sm { padding: var(--s-2) var(--s-5); font-size: var(--fs-small); }
.btn--md { padding: var(--s-3) var(--s-6); font-size: var(--fs-body); }

.btn--primary {
  background: var(--c-primary);
  color: #fff;
}
.btn--primary:hover {
  background: var(--c-primary-dark);
  box-shadow: var(--shadow-hover);
}

.btn--ghost {
  background: transparent;
  color: var(--c-primary);
  border-color: var(--c-border-strong);
}
.btn--ghost:hover {
  background: var(--c-surface);
  border-color: var(--c-primary);
}

.section-title {
  text-align: center;
  color: var(--c-primary);
  margin-bottom: var(--s-7);
}

/* --- Header ----------------------------------------------------------------
   Desktop: logo, inline nav, lang switch and CTA on one row.
   Mobile: nav collapses behind the hamburger toggle (progressive enhancement -
   assets/js/main.js only toggles a class; the links work with JS disabled). */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-bg);
  box-shadow: var(--shadow-header);
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--header-h);
}

.site-header__brand img { height: 2.75rem; width: auto; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  background: var(--c-ink);
  border-radius: 1px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex: 1;
  justify-content: flex-end;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
.site-nav__list a {
  color: var(--c-ink);
}
.site-nav__list a.is-active { color: var(--c-primary); }

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.lang-switch { display: flex; gap: var(--s-2); font-size: var(--fs-small); }
.lang-switch__item { color: var(--c-muted); font-weight: var(--fw-medium); }
.lang-switch__item.is-active { color: var(--c-primary); font-weight: var(--fw-semibold); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--c-bg);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: var(--s-6) var(--gutter);
    gap: var(--s-6);
    transform: translateX(100%);
    transition: transform var(--t-base) var(--ease);
    overflow-y: auto;
  }
  .site-nav.is-open { transform: translateX(0); }

  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
    font-size: var(--fs-h4);
  }

  .site-nav__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
  }
}

/* --- Footer ----------------------------------------------------------------- */

.site-footer {
  background: var(--c-primary-dark);
  color: var(--c-accent-soft);
  margin-top: var(--section-y);
}

.site-footer a { color: #fff; }

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-7);
  padding-block: var(--s-9);
}

@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

.site-footer__baseline { margin-top: var(--s-4); font-size: var(--fs-small); }

.site-footer__title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: #fff;
  margin-bottom: var(--s-4);
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--fs-small);
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: var(--s-4);
  font-size: var(--fs-tiny);
}

/* --- Hero -------------------------------------------------------------------
   Shared by every page that opens on a full-width intro (home, edition,
   programme...). Page-specific hero content/imagery is added on top as each
   page is built. */

.home-hero {
  position: relative;
  padding-block: var(--section-y);
  text-align: center;
  max-width: var(--container-narrow);
}

/* A soft radial wash behind the hero content - full-bleed, ignoring the
   container's max-width, so the page does not open on flat white. */
.home-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  z-index: -1;
  background:
    radial-gradient(60% 55% at 50% 0%, var(--c-surface) 0%, transparent 70%),
    radial-gradient(40% 40% at 85% 15%, var(--c-accent-soft) 0%, transparent 70%);
  opacity: .6;
}

.home-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-accent-text);
  margin-bottom: var(--s-4);
}

.home-hero h1 {
  font-size: var(--fs-display);
  letter-spacing: var(--ls-display);
  color: var(--c-primary);
}

.home-hero__lead {
  font-size: var(--fs-lead);
  color: var(--c-muted);
}

/* Smaller hero for interior pages (programme, speakers...) - just a title,
   no countdown/CTA. */
.page-hero {
  padding-block: var(--s-8);
  text-align: center;
}
.page-hero h1 { color: var(--c-primary); }
.page-hero__lead {
  max-width: var(--container-narrow);
  margin-inline: auto;
  color: var(--c-muted);
  font-size: var(--fs-lead);
}

.home-hero__signature {
  font-style: italic;
  margin-bottom: var(--s-6);
}

.home-hero__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}