/* Polish pass on the existing page: the hero fills the first screen, one heading style, one button
   style, poster colours only (red, maroon, charcoal, white; the off-poster gold and blue are gone),
   and calmer hover states. Layout and content are unchanged. Colour tokens come from addons.css. */

/* ---- Hero fills the first screen on every device, content centred ---- */
.banner-area {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh; min-height: 100svh;
}
@media (min-width: 992px) {
  /* on short laptop screens (1366x768, 1280x720) the title art shrinks so the countdown stays on screen;
     400px is the header, date row, countdown and padding stacked under it */
  .banner-area .hero-art img { width: auto; max-height: max(300px, calc(100svh - 400px)); }
}
@media (max-width: 991.98px) {
  /* the phone artwork turns dark maroon two-thirds down, and the charcoal date graphic used here
     must stay above that line, so content keeps its top position instead of centring */
  .banner-area { justify-content: flex-start; }
  /* ...and the buttons and countdown drop into the empty maroon space at the bottom */
  .banner-area > .container { flex: 1; display: flex; flex-direction: column; }
  .banner-area > .container > .row { flex: 1; flex-direction: column; flex-wrap: nowrap; padding-bottom: 2rem; }
  .banner-area .hero-cta { margin-top: auto; width: 100%; }
}
@media (max-width: 900px) {
  .banner-area { height: auto; } /* custom.css fixes it at 100vh, which clips tall phone content */
}
@media (max-width: 576px) {
  /* the hero starts below the 112px logo strip here (addons.css), so subtract it */
  .banner-area { min-height: calc(100vh - 112px); min-height: calc(100svh - 112px); }
}

/* ---- Buttons: red for the main action, white for the second ---- */
.banner-area .btn { border-radius: 999px; padding-inline: 1.6rem; font-weight: 700; box-shadow: none; transform: none; }
.banner-area .btn-danger { background: var(--ribbon-ink); border-color: var(--ribbon-ink); }
.banner-area .btn-danger:hover, .banner-area .btn-danger:focus-visible { background: var(--maroon); border-color: var(--maroon); }
.banner-area .btn-outline-light { background: #fff; border: 2px solid #fff; color: var(--maroon); }
.banner-area .btn-outline-light::before { content: none; }
.banner-area .btn-outline-light:hover, .banner-area .btn-outline-light:focus-visible {
  background: #eadedf; border-color: #eadedf; color: var(--maroon); transform: none; box-shadow: none;
}

.er-btn-gold { background: var(--ribbon-ink); color: #fff; }
.er-btn-gold:hover, .er-btn-gold:focus-visible { background: var(--maroon); color: #fff; }

/* ---- One heading style, with a short red rule under it ---- */
#about h2, .nw-welcome h2, .who-attend h2, .conf-topics h2, .pl-title,
.program-wrap .section-title, .event-register-title {
  font: 800 clamp(1.6rem, 2.6vw, 2.35rem)/1.1 var(--display);
  text-transform: uppercase; letter-spacing: 0.005em; text-shadow: none;
}
#about h2::after, .nw-welcome h2::after, .who-attend h2::after, .conf-topics h2::after, .pl-title::after,
.program-wrap .section-title::after, .event-register-title::after {
  content: ""; display: block; width: 48px; height: 3px; margin: 14px auto 0; border-radius: 2px; background: var(--ribbon-ink);
}
#about h2::after, .nw-welcome h2::after, .event-register-title::after { margin-left: 0; }
#about h2 { margin-bottom: 1.5rem; }
.who-attend h2, .conf-topics h2 { margin-bottom: 1.5rem; }
.pl-title { margin: 0 0 2.5rem; text-align: center; color: var(--maroon); }
.program-wrap .section-title { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.35rem); margin-bottom: 2.5rem; }
.program-wrap .section-subtitle { color: rgb(255 255 255 / 0.7) !important; font: 600 0.8125rem/1.2 var(--text); letter-spacing: 0.18em; opacity: 1; }
.program-wrap::before { content: none; }

/* ---- Who should attend: white cards instead of grey ---- */
.who-attend .attend-card { background: #fff; color: var(--ink); border-radius: 10px; padding: 12px 16px; gap: 12px; box-shadow: none; }
.who-attend .attend-dot { width: 10px; height: 10px; min-width: 10px; background: var(--ribbon-ink); }

/* ---- Topic cards: same radius family as the rest of the page ---- */
.card-topics { border-radius: 16px; border-color: #e3d6d8; box-shadow: 0 2px 8px rgb(0 0 0 / 0.06); }

/* ---- Speaker and committee tabs: brand colours, no pulsing glow ---- */
.nav-pills-spkr .nav-link { background: #fff; border: 1px solid #dccfd1; color: var(--maroon); box-shadow: none; }
.nav-pills-spkr .nav-link i { color: var(--maroon); }
.nav-pills-spkr .nav-link:hover { background: #f6eeef; border-color: var(--maroon); color: var(--maroon); }
.nav-pills-spkr .nav-link.active { background: var(--maroon); border-color: var(--maroon); color: #fff; box-shadow: none; animation: none; }
.nav-pills-spkr .nav-link.active i { color: #fff; }

/* ---- Speaker cards: neutral edge, gentle photo hover ---- */
.doctor-card { border: 1px solid #e4dfe0; box-shadow: 0 2px 10px rgb(0 0 0 / 0.05); }
.doctor-photo:hover img { transform: scale(1.04); filter: none; }

/* stats are not clickable, so they should not jump on hover */
.stats-card:hover { transform: none; }

/* ---- Agenda: white tab for the selected day instead of yellow ---- */
.program-wrap .agenda-tabs .nav-link { background: transparent; border: 1px solid rgb(255 255 255 / 0.35); color: #fff; box-shadow: none; }
.program-wrap .agenda-tabs .nav-link:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.6); transform: none; box-shadow: none; }
.program-wrap .agenda-tabs .nav-link.active { background: #fff; border-color: #fff; color: var(--maroon); box-shadow: none; }
.program-wrap .agenda-tabs .nav-link.active span { color: var(--muted); }
.agenda-head > div { color: rgb(255 255 255 / 0.85); }
/* one solid poster-red session banner on every screen (phones had gold, which the organiser turned down) */
.agenda-session { background: var(--ribbon-ink); }
.agenda-session .agenda-topic { color: #fff; }
.agenda-break { background: rgb(255 255 255 / 0.06); }
.agenda-speaker { color: #ecd5d9; }

/* ---- Registration and venue: light section between the dark agenda and footer ---- */
.event-register { background: #eadedf; color: var(--ink); }
.event-register-title { color: var(--maroon); }
.event-register-lead { color: var(--muted); }
.event-register .er-btn-ghost { border-color: rgb(133 26 26 / 0.4); color: var(--maroon); }
.event-register .er-btn-ghost:hover, .event-register .er-btn-ghost:focus-visible { background: #fff; border-color: var(--maroon); color: var(--maroon); }
.venue-card { background: #fff; border: 1px solid #e3d6d8; }
.venue-label { color: var(--ribbon-ink); }
.venue-name { color: var(--maroon); }
.venue-city { color: var(--muted); }
.venue-facts dd { color: var(--ink); }
.venue-card .er-btn-light { background: var(--maroon); color: #fff; }
.venue-card .er-btn-light:hover, .venue-card .er-btn-light:focus-visible { background: var(--ribbon-ink); color: #fff; }

/* ---- Scrollbar in poster maroon (custom.css still had a blue-to-gold gradient); light thumb on the maroon bio panel ---- */
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:hover { background: var(--maroon); }
.onoffcanvas::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.5); }

/* ---- Phones: short cards two-up, readable small labels, 44px tap targets ---- */
@media (max-width: 575.98px) {
  .who-attend .attend-grid { --bs-gutter-x: 10px; }
  .who-attend .attend-card { min-height: 58px; padding: 10px; gap: 8px; font-size: 15px; }
  .conf-topics .row { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }
  .card-topics { font-size: 15px; }
  .card-topics .card-body { padding: 14px 10px; }
  .card-topics img { width: 56px; margin-bottom: 10px; }
  .countdown-unit { font-size: 11px; letter-spacing: 0.5px; }
  .agenda-tabs .nav-link span { font-size: 12px; }
  .nw-footer-contact a { min-height: 44px; }
  /* justified text needs about 38+ characters a line or it opens wide gaps between words: the intro
     column was 292px at 18px with letter-spacing (~30), so it gets thinner card padding and 16px type
     (hyphenation for it is in addons.css) */
  #about .card { padding: 4px; }
  .intro-text { font-size: 16px; line-height: 1.7; letter-spacing: 0; }
  .nw-welcome-text p:not(.nw-pull):not(.nw-signoff) { font-size: 17px; }
}