/* FAIR 3D Heritage brand layer
   Loaded after style.css so the visual identity stays isolated from layout CSS. */

@font-face {
  font-display: swap;
  font-family: "Futura BT Pro";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/FuturaBTPro-Medium.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Futura BT Pro";
  font-style: italic;
  font-weight: 400;
  src: url("fonts/FuturaBTPro-MediumItalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Futura BT Pro";
  font-style: normal;
  font-weight: 500;
  src: url("fonts/FuturaBTPro-Medium.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Futura BT Pro";
  font-style: italic;
  font-weight: 500;
  src: url("fonts/FuturaBTPro-MediumItalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Futura BT Pro";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/FuturaBTPro-Bold.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Futura BT Pro";
  font-style: normal;
  font-weight: 800;
  src: url("fonts/FuturaBTPro-Bold.woff2") format("woff2");
}

:root {
  --brand-yellow: #ffed00;
  --brand-navy: #0b1936;

  --font-futura:
    "Futura BT Pro", "Futura", "Futura PT", "Century Gothic", "Trebuchet MS",
    Arial, sans-serif;
  --font-title: var(--font-futura);
  --font-body: var(--font-futura);
  --font-foot: var(--font-futura);
}

html,
body {
  font-family: var(--font-futura);
  font-weight: 500;
  font-synthesis: none;
}

h1,
h2,
h3,
h4,
.title {
  font-family: var(--font-futura);
  font-weight: 700;
}

p,
dd,
dt,
h4 {
  font-family: var(--font-futura);
}

/* InDesign paragraph style, used as the default body-text rhythm. */
p {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
}

/* InDesign title style. The existing mobile rules keep it responsive. */
.title {
  font-family: var(--font-futura);
  font-size: 56px;
  font-weight: 700;
  color: var(--brand-yellow);
}

.hero .subtitle,
.hero .lead,
.page-hero__title {
  color: var(--brand-yellow);
}

.hero .subtitle,
.hero .lead,
.program-session__subtitle {
  font-weight: 500;
}

/* University and institutional names shown below people. */
.keynote-card__affiliation,
.committee-card__affiliation {
  font-style: italic;
  font-weight: 500;
}

/* Light surfaces: dark-blue typography for readable contrast. */
.section:not(.section--dark),
.program-content,
.authors-content,
.registration-content,
.committee-modal__dialog,
.abstract-modal__dialog {
  color: var(--brand-navy);
}

.section:not(.section--dark) p,
.section:not(.section--dark) dd,
.section:not(.section--dark) dt,
.section:not(.section--dark) h4 {
  color: var(--brand-navy);
}

/* Dark surfaces: yellow typography. */
.section--dark,
#dates,
#venue.section--dark,
#committee.section.section--dark,
.program-card--dark,
.program-session__head,
.authors-card--dark,
body.authors-page .authors-section--dark,
body.authors-page .section--dark.authors-section,
.site-footer {
  color: var(--brand-yellow);
}

.section--dark .h2,
.section--dark .prose,
.section--dark p,
.section--dark li,
.section--dark dd,
.section--dark dt,
.section--dark h4,
#dates .h2,
#dates .keydates,
#dates .keydates dt,
#dates .keydates dd,
#venue.section--dark .h2,
#venue.section--dark .prose,
#venue.section--dark .prose p,
#committee.section.section--dark .h2,
#committee.section.section--dark .committee-card__name,
#committee.section.section--dark .committee-card__affiliation,
.program-card--dark h3,
.program-card--dark h4,
.program-card--dark .program-meta,
.program-card--session .program-session__head h3,
.program-card--session .program-session__head .program-kicker,
.program-card--session .program-session__head .program-session__subtitle,
.authors-card--dark h2,
.authors-card--dark p,
body.authors-page .authors-section--dark .h2,
body.authors-page .authors-section--dark .authors-prose,
body.authors-page .authors-section--dark .authors-prose p,
body.authors-page .authors-section--dark .authors-prose h3,
.footnote,
.section:not(.section--dark) .program-card--dark p,
.section:not(.section--dark) .program-card--dark h4 {
  color: var(--brand-yellow);
}

/* Brand accents and interaction states. */
.topnav__item.is-active .topnav__link,
.topnav__link:hover,
.topnav__link:focus-visible {
  color: var(--brand-yellow);
  border-bottom-color: var(--brand-yellow);
}

#dates .keydates__row,
.cfp-theme {
  border-bottom-color: rgba(255, 237, 0, 0.55);
}

.program-topic-number {
  color: rgba(255, 237, 0, 0.52);
}

.topnav__logo {
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(11, 25, 54, 0.45));
}

@media (max-width: 860px) {
  .title {
    color: var(--brand-yellow) !important;
  }

  .hero .subtitle,
  .hero .lead {
    color: var(--brand-yellow) !important;
  }
}

/* Header / navigation – force yellow branding */
.site-header a,
.site-header .nav-link,
.site-header .menu a,
.site-header nav a,
header nav a,
header nav a:visited {
  color: var(--brand-yellow) !important;
}

.site-header a:hover,
.site-header a:focus,
.site-header a[aria-current="page"],
.site-header .is-active,
.site-header .active,
header nav a:hover,
header nav a:focus,
header nav a[aria-current="page"] {
  color: var(--brand-yellow) !important;
  border-color: var(--brand-yellow) !important;
}

/* If the small dropdown arrows/chevrons stay white */
.site-header svg,
.site-header .chevron,
.site-header .caret {
  fill: var(--brand-yellow) !important;
  stroke: var(--brand-yellow) !important;
}

/* Hero registration button */
.hero__actions .btn {
  color: var(--brand-yellow);
  border-color: var(--brand-yellow);
}

.hero__actions .btn:hover,
.hero__actions .btn:focus {
  color: var(--brand-yellow);
  border-color: var(--brand-yellow);
}

/* Hero scroll arrow */
.hero__chevron img {
  display: none;
}

.hero__chevron::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  border-right: 6px solid var(--brand-yellow);
  border-bottom: 6px solid var(--brand-yellow);
  transform: rotate(45deg);
}
/* =========================================================
   COMMITTEE — FAIR 3D brand colours
   ========================================================= */

/* Yellow photo filter — keep existing opacity and hover animation */
#committee .committee-card__photo::after {
  background: var(--brand-yellow);
}

/* Role badge — yellow text and outline */
#committee.section.section--dark .committee-card__role {
  color: var(--brand-yellow);
  border-color: var(--brand-yellow);
}

/* View Bio button — yellow background */
#committee.section.section--dark .committee-card__bio-btn {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
  color: var(--brand-navy);
}

/* Keep the button yellow also on hover / keyboard focus */
#committee.section.section--dark .committee-card__bio-btn:hover,
#committee.section.section--dark .committee-card__bio-btn:focus-visible {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
  color: var(--brand-navy);
}

/* =========================================================
   DESKTOP DROPDOWN NAVIGATION
   ========================================================= */

@media (min-width: 861px) {
  .topnav__dropdown {
    background: var(--brand-navy);
  }

  .topnav__dropdown-link {
    color: var(--brand-yellow);
  }

  .topnav__dropdown-link:hover,
  .topnav__dropdown-link:focus-visible,
  .topnav__dropdown-item.is-active .topnav__dropdown-link {
    background: rgba(0, 136, 255, 0.32);
    color: var(--brand-yellow);
  }
}

/* =========================================================
   TEXT LINKS — FAIR 3D brand colours
   ========================================================= */

/* Links on light backgrounds */
.fx-link {
  color: var(--brand-navy);
  text-decoration-line: underline;
  text-decoration-color: var(--brand-navy);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Yellow highlight on hover / keyboard focus */
.fx-link:hover,
.fx-link:focus-visible {
  color: var(--brand-navy);
  background: var(--brand-yellow);
  text-decoration-color: var(--brand-navy);
}

/* Links on dark sections */
.section--dark .fx-link {
  color: var(--brand-yellow);
  text-decoration-color: var(--brand-yellow);
}

/* Dark-section hover: keep it simple */
.section--dark .fx-link:hover,
.section--dark .fx-link:focus-visible {
  color: var(--brand-yellow);
  background: none;
}

/* =========================================================
   PAPER SUBMISSION — consistent body typography
   ========================================================= */

#paper-submission .cfp-list {
  font-family: var(--font-futura);
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
}

/* =========================================================
   PROGRAMME — buttons and day navigation
   ========================================================= */

/* Download programme button */
.program-download__btn {
  background: var(--brand-navy);
  color: var(--brand-yellow);
  border-color: var(--brand-yellow);
}

.program-download__btn:hover,
.program-download__btn:focus-visible {
  background: var(--brand-yellow);
  color: var(--brand-navy);
  border-color: var(--brand-yellow);
}

/* Programme day navigation — inactive days */
.program-daynav a:not(.is-active) {
  background: #fff;
  color: var(--brand-navy);
  border-color: var(--brand-navy);
}

/* Hover / focus on another programme day */
.program-daynav a:not(.is-active):hover,
.program-daynav a:not(.is-active):focus-visible {
  background: #fff;
  color: var(--brand-navy);
  border-color: var(--brand-navy);

  box-shadow:
    0 0 0 3px rgba(11, 25, 54, 0.08),
    0 6px 14px rgba(11, 25, 54, 0.12);
}

/* Currently displayed day */
.program-daynav a.is-active {
  background: var(--brand-navy);
  color: var(--brand-yellow);
  border-color: var(--brand-yellow);
}

/* =========================================================
   PROGRAMME — workshop headers
   ========================================================= */

/* Same visual treatment as session headers */
.section:not(.section--dark) .program-workshop-summary {
  background: var(--brand-navy);
  color: var(--brand-yellow);
}

/* Do not change the background on hover / keyboard focus */
.section:not(.section--dark) .program-workshop-summary:hover,
.section:not(.section--dark) .program-workshop-summary:focus-visible {
  background: var(--brand-navy);
  color: var(--brand-yellow);
}

/* All workshop header typography */
.section:not(.section--dark) .program-workshop-summary .program-kicker,
.section:not(.section--dark) .program-workshop-summary h4,
.section:not(.section--dark) .program-workshop-summary .program-talk__authors,
.section:not(.section--dark)
  .program-workshop-summary
  .program-talk__authors
  a {
  color: var(--brand-yellow);
}

/* Workshop expand / collapse chevron */
.section:not(.section--dark)
  .program-workshop-summary
  .program-workshop-chevron {
  border-color: var(--brand-yellow);
}

/* Compact organiser information in workshop header */
.program-workshop-organisers-summary {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.25;
}

/* Full organiser list inside expanded workshop */
.program-workshop-organisers {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(11, 25, 54, 0.14);
}

.program-workshop-organisers__label {
  margin: 0 0 10px;
  font-family: var(--font-futura);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-navy);
}

.program-workshop-organisers__list {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 36px;
}

.program-workshop-organisers__list li {
  margin-bottom: 7px;
  break-inside: avoid;
  font-size: 15px;
  line-height: 1.3;
  color: var(--brand-navy);
}

@media (max-width: 700px) {
  .program-workshop-organisers__list {
    columns: 1;
  }
}
/* =========================================================
   PROGRAMME — thematic labels / poster tags
   ========================================================= */

.program-session-details .program-pill,
.program-talk .program-pill {
  background: rgba(11, 25, 54, 0.1);
  color: var(--brand-navy);
  border: 1px solid rgba(11, 25, 54, 0.18);
  box-shadow: none;
}
/* =========================================================
   FOR AUTHORS — buttons on dark sections
   ========================================================= */

body.authors-page .authors-section--dark .authors-btn--light {
  background: transparent;
  color: var(--brand-yellow);
  border-color: var(--brand-yellow);
}

/* Keep the same brand colours on hover / focus */
body.authors-page .authors-section--dark .authors-btn--light:hover,
body.authors-page .authors-section--dark .authors-btn--light:focus-visible {
  background: transparent;
  color: var(--brand-yellow);
  border-color: var(--brand-yellow);
  opacity: 1;
}

/* =========================================================
   FUNDING & COSTS — consistent body typography
   ========================================================= */

#funding .funding-list {
  font-family: var(--font-futura);
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
}
/* =========================================================
   HOME HERO — LIVESTREAM LAYOUT
   ========================================================= */

.hero__layout {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(40px, 4vw, 70px);
  align-items: center;
}

/* LEFT SIDE */

.hero__copy {
  min-width: 0;
}

.hero__copy .title {
  white-space: nowrap;
}

/* RIGHT SIDE */

.hero__stream {
  width: 100%;
  min-width: 0;
  justify-self: end;
}

.hero__stream-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.hero__stream-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* TABLET / MOBILE */
@media (max-width: 1150px) {
  .hero {
    height: auto;
    min-height: 100svh;
  }

  .hero__content {
    position: relative;
    padding-top: 120px;
    padding-bottom: 80px;
  }

  .hero__layout {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .hero__copy .title {
    white-space: nowrap;
  }

  .hero__stream {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
}

@media (max-width: 600px) {
  .hero__content {
    padding-top: 100px;
    padding-bottom: 60px;
  }

  .hero__layout {
    row-gap: 28px;
  }

  .hero__copy .title {
    white-space: normal;
  }
}

/* Allow the new hero grid to use the full 1200px container */
.hero__content .container--wide > .hero__layout {
  max-width: none;
  width: 100%;
}
.program-format-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;

  margin-right: 0.45rem;
  padding: 0.12rem 0.45rem;

  border: 1px solid currentColor;
  border-radius: 999px;

  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  white-space: nowrap;
  vertical-align: 0.08em;
}

.program-format-badge--video {
  color: var(--blue-primary);
  background: transparent;
}