/* ==========================================================================
   Interactive Social Avatars - Theme overrides
   - Blue / sky-blue palette (overrides the GENEA burgundy)
   - Modern floating oval "blobs" + glassmorphism cards
   - Add to index.html *after* css/iva.min.css
   ========================================================================== */

:root {
  --isa-blue-900: #0b3d91;     /* deep blue */
  --isa-blue-700: #2563eb;     /* primary blue */
  --isa-blue-500: #3b82f6;     /* mid blue */
  --isa-blue-300: #93c5fd;     /* light blue */
  --isa-blue-100: #dbeafe;     /* very light */
  --isa-cyan-300: #67e8f9;
  --isa-violet-300: #c4b5fd;
  --isa-bg-1: #f5faff;            /* Very pale blue surface */
  --isa-bg-2: #e7f1fc;            /* Slightly deeper blue near the bottom */
  --isa-text: #111827;
  --isa-text-muted: #6b7280;
  --isa-card-bg: #ffffff;         /* Solid card surface */
  --isa-card-border: #e5e7eb;
  --isa-card-shadow: 0 4px 16px rgba(17, 24, 39, 0.06);
}

/* ----- Page background ------------------------------------------------- */
/* Calm, document-like surface. Keeps a hint of the brand by tinting the
   gradient very subtly toward blue-grey. */
html, body {
  background: linear-gradient(180deg, var(--isa-bg-1) 0%, var(--isa-bg-2) 100%);
  background-attachment: fixed;
  color: var(--isa-text);
}

/* Floating decorative blobs disabled in calm mode (kept in CSS so they
   can be brought back by removing this rule). */
.isa-blobs { display: none; }

/* Smooth in-page anchor scrolling, with the fixed navbar accounted for.
   `--navbar-h` is set by scrollspy.js on every layout/resize so this is
   always the actual visual navbar height (works for both the desktop
   sidebar and the mobile top bar). */
:root { --navbar-h: 56px; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navbar-h) + 8px);
}

body {
  font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5 {
  color: var(--isa-blue-900);
  font-family: "Saira Extra Condensed", "Muli", sans-serif;
  letter-spacing: 0.5px;
}

/* Fluid h1/h2 sizes so headings scale on narrow viewports instead of
   overflowing/wrapping awkwardly. iva.min.css sets h1=4rem (and 6rem at
   ≥1200px), which is way too big on phones. */
h1 {
  font-size: clamp(2.5rem, 10vw, 4rem) !important;
  line-height: 1.05 !important;
}
@media (min-width: 1200px) {
  h1 { font-size: clamp(4rem, 6vw, 6rem) !important; }
}
h2 {
  font-size: clamp(1.8rem, 6vw, 3.5rem) !important;
  line-height: 1.1 !important;
}
h3 {
  font-size: clamp(1.5rem, 5vw, 2rem) !important;
  line-height: 1.15 !important;
}

p, li {
  color: var(--isa-text);
}

a {
  color: var(--isa-blue-700);
  transition: color 0.2s ease;
}
a:hover {
  color: var(--isa-blue-900);
  text-decoration: none;
}

/* ----- Floating decorative blobs --------------------------------------- */
.isa-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  animation: isa-float 22s ease-in-out infinite;
}

.isa-blob.b1 {
  width: 520px; height: 420px;
  top: -120px; left: -80px;
  background: radial-gradient(circle, var(--isa-blue-300), transparent 70%);
  animation-delay: 0s;
}
.isa-blob.b2 {
  width: 460px; height: 460px;
  top: 30%; right: -120px;
  background: radial-gradient(circle, var(--isa-violet-300), transparent 70%);
  animation-delay: -6s;
  animation-duration: 28s;
}
.isa-blob.b3 {
  width: 600px; height: 380px;
  bottom: -120px; left: 20%;
  background: radial-gradient(circle, var(--isa-cyan-300), transparent 70%);
  animation-delay: -12s;
  animation-duration: 26s;
}
.isa-blob.b4 {
  width: 360px; height: 360px;
  top: 60%; left: -100px;
  background: radial-gradient(circle, var(--isa-blue-100), transparent 70%);
  animation-delay: -3s;
  animation-duration: 30s;
}

@keyframes isa-float {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(40px, -30px) scale(1.05); }
  66%  { transform: translate(-30px, 40px) scale(0.97); }
  100% { transform: translate(0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .isa-blob { animation: none; }
}

/* ----- Navbar ----------------------------------------------------------- */
/* Sidebar / top bar uses a lighter, more opaque blue gradient so it sits
   gently against the pale-blue page background. */
.navbar.bg-primary,
.navbar-dark.bg-primary {
  background: linear-gradient(160deg, #60a5fa 0%, #3b82f6 60%, #2563eb 100%) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* On smaller screens the navbar collapses to a single-row top bar that
   overlays the page. Pin the hamburger to the right and let the brand /
   pill truncate before they ever push the toggler to a new line. The
   collapsed dropdown menu is then free to drop *below* the bar normally. */
@media (max-width: 991.98px) {
  .navbar-toggler {
    flex-shrink: 0;
  }
  .navbar-brand {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* The standalone hamburger is hidden, so we have more room: keep the
       brand at its default Bootstrap size (~1.25rem). */
  }
  /* Tighter on phones to prevent ellipsis. */
  @media (max-width: 480px) {
    .navbar-brand { font-size: 1rem; }
  }
  body {
    /* Override iva.min.css's static 54px with our live value. */
    padding-top: calc(var(--navbar-h) + 12px) !important;
  }
}

.navbar .nav-link {
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 600;
  letter-spacing: 0.3px;
  position: relative;
  padding: 6px 14px !important;
  margin: 2px 4px;
  border-radius: 999px;
  transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.navbar .nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08);
}
/* Active section highlight (set by JS scrollspy) */
.navbar .nav-link.active {
  color: #fff !important;
  background: linear-gradient(135deg,
              rgba(255, 255, 255, 0.22),
              rgba(255, 255, 255, 0.08));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35) inset,
    0 4px 18px rgba(103, 232, 249, 0.35);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.navbar-brand {
  color: #fff !important;
  font-weight: 700;
}

/* Desktop sidebar: position the brand text neatly near the top (with
   some breathing room) and vertically center the nav links in the
   remaining space - matching the original GENEA template feel. */
@media (min-width: 992px) {
  #sideNav .navbar-brand {
    display: block !important;
    margin: 2.5rem 0 1.5rem 0 !important;
    padding: 0 1rem !important;
    width: 100%;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
  }
  /* Nav menu vertically centered between brand and the bottom of the
     sidebar (auto top + auto bottom = centered). */
  #sideNav .navbar-collapse {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  #sideNav .navbar-collapse .navbar-nav {
    margin-top: auto;
    margin-bottom: auto;
  }
}

/* Small "current section" indicator shown only on mobile (collapsed navbar).
   It's a button: tapping it opens the same dropdown as the hamburger,
   so users can quick-jump to another section straight from the indicator. */
.navbar .current-section {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  margin: 0 8px 0 auto;          /* push to the right, before the toggler */
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
  max-width: 45vw;
  cursor: pointer;
  transition: background 0.2s ease;
}
.navbar .current-section:hover,
.navbar .current-section:focus {
  background: rgba(255, 255, 255, 0.28);
  outline: none;
}
/* Hamburger icon after the text - taps the same dropdown. */
.navbar .current-section::after {
  content: "☰";
  font-size: 1em;
  line-height: 1;
  opacity: 0.95;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
/* Subtle rotate when the menu is open. */
.navbar .current-section[aria-expanded="true"]::after {
  transform: rotate(90deg);
}
@media (max-width: 991.98px) {
  .navbar .current-section.has-section {
    display: inline-flex;
  }
  /* The pill duplicates what the hamburger does - hide the hamburger
     whenever the pill is on screen so the brand has more room. */
  .navbar .current-section.has-section ~ .navbar-toggler {
    display: none;
  }
}

/* ----- Sections as glass cards ----------------------------------------- */
.iva-section {
  position: relative;
  background: var(--isa-card-bg) !important;
  border: 1px solid var(--isa-card-border);
  border-radius: 24px;
  box-shadow: var(--isa-card-shadow);
  margin: 24px clamp(12px, 3vw, 40px);
  overflow: hidden;
}

/* Override the GENEA template defaults that force every section to be
   viewport-tall and vertically center its content. We want the heading
   pinned to the top of each card, and the card to grow with its content. */
section.iva-section {
  min-height: 0 !important;
  align-items: flex-start !important;
  padding-top: 1.5rem !important;
  padding-bottom: 2rem !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}
@media (min-width: 992px) {
  section.iva-section {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

/* Keep the home/header section a bit taller for visual impact. */
section.iva-section#home {
  min-height: 70vh;
  align-items: center !important;
}

/* Hide the dividing <hr>s now that sections are floating cards */
.container-fluid > hr.m-0 {
  display: none;
}

/* Section heading underline accent */
.iva-section h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}
.iva-section h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 64px; height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--isa-blue-700), var(--isa-cyan-300));
}

/* ----- Subheadings ----------------------------------------------------- */
.subheading {
  color: var(--isa-text-muted);
  font-style: italic;
  font-size: clamp(0.95rem, 3vw, 1.5rem) !important;
}

/* ----- Body text: justified paragraphs --------------------------------- */
.iva-section p,
#invited-speakers .col-md-10 {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Don't justify single-line paragraphs (e.g. dates, captions) on mobile -
   it can produce ugly oversized gaps. */
@media (max-width: 575.98px) {
  .iva-section p,
  #invited-speakers .col-md-10 { text-align: left; }
}

/* ----- Schedule rows --------------------------------------------------- */
.schedule-row {
  padding: 10px 4px !important;
  border-bottom: 1px solid rgba(37, 99, 235, 0.08) !important;
  transition: background 0.2s ease;
  border-radius: 10px;
}
.schedule-row:hover {
  background: rgba(147, 197, 253, 0.18);
}

/* ----- Speaker / organiser portrait placeholders ---------------------- */
.placeholder-note {
  display: inline-block;
  padding: 22px 16px;
  width: 100%;
  text-align: center;
  background: var(--isa-bg-1);
  border-radius: 14px;
  border: 1px dashed var(--isa-card-border);
  color: var(--isa-text-muted);
  font-style: italic;
  font-size: 0.85em;
  margin: 0;
}

/* ----- Invited speaker portraits -------------------------------------- */
/* Override Bootstrap column widths only inside the speakers section so the
   photo gets a fixed 200px column instead of shrinking to ~16% of the row. */
@media (min-width: 768px) {
  #invited-speakers .row > .col-md-2 {
    flex: 0 0 200px;
    max-width: 200px;
  }
  #invited-speakers .row > .col-md-10 {
    flex: 1 1 0;
    max-width: calc(100% - 200px);
  }
}
/* Cap the photo so it never blows up on mobile (col-12). */
#invited-speakers .row > [class*="col-"] img.img-fluid {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
  margin-bottom: 12px;
}
@media (max-width: 767.98px) {
  #invited-speakers .row > [class*="col-"] img.img-fluid {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Real photos (when added) get matching rounded styling */
.iva-section img {
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08);
}

/* ----- Announcement box reskin ---------------------------------------- */
.announcement-box {
  background: #eff6ff !important;        /* very pale blue */
  border: 1px solid #dbeafe !important;
  backdrop-filter: none !important;
  border-radius: 14px !important;
  color: var(--isa-text) !important;
}
.announcement-box .badge {
  background: var(--isa-blue-700) !important;
  border-radius: 999px;
  padding: 4px 12px;
}

/* ----- Lists & links inside sections ---------------------------------- */
.iva-section ul li,
.iva-section ol li {
  margin-bottom: 6px;
}

/* ----- Code & inline tags --------------------------------------------- */
code {
  background: rgba(37, 99, 235, 0.08);
  color: var(--isa-blue-900);
  padding: 2px 6px;
  border-radius: 6px;
}

/* Subtle highlight for the section currently in view */
.iva-section.is-current {
  border-color: var(--isa-blue-300);
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.10) inset,
    0 6px 24px rgba(37, 99, 235, 0.08);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

/* ----- Responsive tweaks --------------------------------------------- */
@media (max-width: 768px) {
  .iva-section {
    margin: 16px 8px;
    border-radius: 20px;
  }
}

/* ============================================================
   Optional patterns borrowed from the GENEA Challenge UI.
   Use the classes below in index.html as needed.
   ============================================================ */

/* --- 5-column grid for organiser cards ------------------------------- */
@media (min-width: 768px) {
  .col-five {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* --- Organiser cards ------------------------------------------------- */
.organiser-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 16px 10px 14px;
  height: 100%;
  overflow: hidden;
  transition: all 0.2s ease;
}
.organiser-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
.organiser-card img,
.organiser-card .placeholder-avatar {
  width: 7rem;
  height: 7rem;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50% !important;
  background: #f9fafb;
  box-shadow: none;
}
@media (min-width: 576px) {
  .organiser-card img,
  .organiser-card .placeholder-avatar {
    width: 10rem;
    height: 10rem;
  }
}
/* When the 5-column grid kicks in, cap avatar size so it never
   overflows its narrow card on medium viewports (768px–~1100px). */
@media (min-width: 768px) {
  .organiser-card img,
  .organiser-card .placeholder-avatar {
    width: 100%;
    height: auto;
    max-width: 10rem;
  }
}
.organiser-card .placeholder-avatar {
  border: 2px dashed #d1d5db;
}
.organiser-card a {
  color: var(--isa-text);
  font-size: 0.9rem;
}
.organiser-card:hover a {
  color: var(--isa-blue-700);
}
.organiser-card small {
  color: var(--isa-text-muted);
  line-height: 1.35;
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
}

/* --- CTA button: pill, white-on-blue, hover inverts -------- */
.cta-button {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--isa-blue-700);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.cta-button:hover,
.cta-button:focus {
  background: #fff;
  color: var(--isa-blue-900) !important;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
  text-decoration: none;
  outline: none;
}
.cta-button.outline {
  background: transparent;
  color: var(--isa-blue-700) !important;
  box-shadow: 0 0 0 2px var(--isa-blue-700) inset;
}
.cta-button.outline:hover {
  background: var(--isa-blue-700);
  color: #fff !important;
}

/* --- Deadline badge: small red pill --------------------- */
.badge-deadline {
  display: inline-block;
  padding: 3px 10px;
  background: #dc2626;
  color: #fff !important;
  font-size: 0.78em;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 6px;
}

/* ----- Hero banner with overlay --------------------------------------- */
.hero-banner {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(17, 24, 39, 0.15);
  isolation: isolate;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.hero-banner-img {
  display: block;
  width: 100%;
  height: auto;
}
.hero-banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(12px, 2.5vw, 24px);
  pointer-events: none;
}
.hero-banner-overlay > * { pointer-events: auto; }
.hero-pill {
  display: inline-block;
  width: fit-content;
  background: rgba(37, 99, 235, 0.92);
  color: #fff !important;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: clamp(0.72rem, 1.2vw, 0.95rem);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ----- CTA button row: flex with wrap + gap for clean mobile wrapping. */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 12px;
}