/* =====================================================================
   GAI27 DESIGN SYSTEM — 3/4: COMPONENTS
   Buttons, page-header, cards, nav/footer chrome, hero, testimonials,
   gallery, sliders, coming-soon, terms-doc, reveal system, footer,
   cross-page consistency. (Extracted from theme.css sections 4-16.)
   ===================================================================== */

/* Bootstrap primary buttons currently = orange everywhere.
   Demote: .btn-primary becomes the BLUE structural button... */
.btn-primary{
  --bs-btn-bg:var(--primary); --bs-btn-border-color:var(--primary);
  --bs-btn-hover-bg:var(--primary-dark); --bs-btn-hover-border-color:var(--primary-dark);
  --bs-btn-active-bg:var(--primary-dark); --bs-btn-active-border-color:var(--primary-dark);
}
.btn-outline-primary{
  --bs-btn-color:var(--primary); --bs-btn-border-color:var(--primary);
  --bs-btn-hover-bg:var(--primary); --bs-btn-hover-border-color:var(--primary);
}
/* ...and the single ORANGE call-to-action is opt-in via .btn-cta */
.btn-cta,.btn-brand{
  background:var(--accent)!important; border-color:var(--accent)!important;
  color:#fff!important; border-radius:var(--r-md); font-weight:600;
  box-shadow:var(--shadow-sm);
}
.btn-cta:hover,.btn-brand:hover{
  background:var(--accent-dark)!important; border-color:var(--accent-dark)!important;
  color:#fff!important; transform:translateY(-1px);
}

/* ---------- 4. COMPONENTS ---------- */
.page-header{ background:var(--surface); border-bottom:1px solid var(--border);
  padding:2.5rem 0 1.5rem; text-align:center; }
.page-header .page-title,.page-header .hero-title{ margin:.25rem 0 .5rem; }
.page-header .page-subtitle{ font-family:var(--font-head); font-weight:500; color:var(--muted); margin:0 auto; max-width:60ch; }
.breadcrumb-bar{ font-size:.85rem; color:var(--faint); margin-bottom:.5rem; }
.breadcrumb-bar a{ color:var(--muted); text-decoration:none; }
.breadcrumb-bar a:hover{ color:var(--primary); }

/* Normalise page heroes that shipped with their own image/orb/dot-grid headers
   (venue, sponsors, dates, apply) to the clean, compact standard .page-header. */
.venue-page .page-header,
.sponsors-page .page-header,
.dates-page .page-header,
.apply-page .page-header,
[data-theme="dark"] .venue-page .page-header,
[data-theme="dark"] .sponsors-page .page-header,
[data-theme="dark"] .dates-page .page-header,
[data-theme="dark"] .apply-page .page-header{
  background:var(--surface) !important;
  padding:2.5rem 0 1.5rem !important;     /* identical to standard .page-header */
  overflow:visible;
  min-height:0 !important;
}
.venue-page .page-header::after,  .venue-page .page-header::before,
.sponsors-page .page-header::after, .sponsors-page .page-header::before,
.dates-page .page-header::after,   .dates-page .page-header::before,
.apply-page .page-header::after,   .apply-page .page-header::before{
  content:none !important; background:none !important;
}
.venue-page .header-wave, .orb{ display:none !important; }   /* drop decorative orbs everywhere */
/* normalise oversized hero titles back to the standard scale */
.sponsors-page .hero-title{ font-size:inherit !important; }
/* sponsors page: section titles centered (override the global left-align),
   single underline only (kill the page-specific ::after double underline) */
.sponsors-page .section-title{
  display:block !important; width:fit-content !important;
  margin-left:auto !important; margin-right:auto !important; text-align:center !important;
  border-bottom:3px solid var(--primary) !important; padding-bottom:.4rem !important;
}
.sponsors-page .section-title::after{ content:none !important; }
/* compact section pills directly under the title */
.venue-page .page-header .row.mt-3,
.sponsors-page .page-header .row.mt-3,
.dates-page .page-header .row.mt-3,
.apply-page .page-header .row.mt-3{ margin-top:1rem !important; }
.venue-page .section-nav .nav-link,
.sponsors-page .section-nav .nav-link,
.dates-page .section-nav .nav-link,
.apply-page .section-nav .nav-link{ padding:.3rem .7rem; font-size:.85rem; }

/* keep venue section titles consistent with the rest (orange, left-aligned) */
.venue-page .section-title{ text-align:left !important; margin:1.5rem 0 1rem !important; }

/* OPTIMISE SPACING: tighten the generous vertical rhythm on the venue page */
.venue-page main .py-4{ padding-top:1.25rem !important; padding-bottom:1.25rem !important; }
.venue-page .info-card{ padding:1.25rem 1.5rem; }
.venue-page .content-card{ margin-bottom:1rem; }
.venue-page .image-gallery{ margin-bottom:1.25rem; }
.venue-page .pre-footer-space{ height:32px !important; }

/* "Coming soon" placeholder (e.g. speakers not yet confirmed) */
.coming-soon-card{
  position:relative; overflow:hidden;
  background:
    radial-gradient(420px 160px at 50% 0%, var(--accent-tint), transparent 70%),
    var(--surface);
  border:1px dashed var(--accent);
  border-radius:var(--r-lg); padding:2.75rem 1.75rem; max-width:580px;
  margin:1rem auto 2rem; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.coming-soon-card:hover{
  transform:translateY(-3px); box-shadow:var(--shadow-md);
  border-color:var(--accent-dark);
}
/* the standalone hero icon in a soft orange disc, gentle pulse
   (scoped with :not(.btn i) so button icons keep their normal size) */
.coming-soon-card > i:first-child{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:var(--r-pill);
  background:var(--accent-tint); color:var(--accent);
  font-size:1.9rem; margin-bottom:.25rem;
  animation:csPulse 2.4s ease-in-out infinite;
}
.coming-soon-card:hover > i:first-child{ color:var(--accent-dark); }
/* button icons stay small/inline */
.coming-soon-card .btn i{ font-size:1em; width:auto; height:auto; background:none; animation:none; }
@keyframes csPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
@media (prefers-reduced-motion:reduce){ .coming-soon-card > i:first-child{ animation:none; } }
.coming-soon-card h3{ color:var(--ink); }
/* button hover stays on-brand */
.coming-soon-card .btn-outline-primary:hover{
  background:var(--accent); border-color:var(--accent); color:#fff;
}

.card-clean{ background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); transition:.18s; }
.card-clean:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }

.callout{ background:var(--primary-tint); border:1px solid var(--border);
  border-left:4px solid var(--primary); border-radius:var(--r-sm);
  padding:1rem 1.25rem; }
.callout.warning{ background:#fff8ed; border-left-color:var(--warning); }

.section{ padding:3.5rem 0; } .section.alt{ background:var(--surface-2); }

/* Sticky "On this page" ToC */
.toc-label{ font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--faint); font-weight:600; margin-bottom:.5rem; }
.toc ul{ list-style:none; padding:0; margin:0; border-left:2px solid var(--border); }
.toc a{ display:block; padding:.4rem .9rem; color:var(--muted); text-decoration:none;
  font-size:.92rem; border-left:2px solid transparent; margin-left:-2px; }
.toc a:hover{ color:var(--primary); }
.toc a.active{ color:var(--primary); border-left-color:var(--primary); font-weight:600; }
.content-section{ scroll-margin-top:90px; padding-bottom:2.5rem; }

/* ---------- 5. NAVBAR / FOOTER chrome ---------- */
.navbar .nav-link{ color:var(--slate); font-weight:500; }
.navbar .nav-link:hover,.navbar .nav-link.active{ color:var(--primary); }
.navbar .nav-link i.text-primary{ color:var(--primary)!important; }
/* keep the "Apply Now" navbar button orange = the one true CTA */
.navbar .btn-primary{
  --bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent);
  --bs-btn-hover-bg:var(--accent-dark); --bs-btn-hover-border-color:var(--accent-dark);
}

/* ---------- 6. CALM MODE: hide landing-page theatrics ---------- */
.hero-particles,.particle{ display:none!important; }

/* ---------- 7. HERO polish ---------- */
/* AI-themed background image (data-center / compute) with a readable overlay */
.hero-section{
  position:relative;
  padding:2.25rem 0 2.5rem !important;          /* tighter top gap under the navbar */
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.82) 55%, rgba(255,255,255,.88)),
    url('../images/hero-bg.jpg') center/cover no-repeat !important;
}
[data-theme="dark"] .hero-section{
  background:
    linear-gradient(180deg, rgba(11,16,32,.86), rgba(11,16,32,.78) 55%, rgba(11,16,32,.88)),
    url('../images/hero-bg.jpg') center/cover no-repeat !important;
}
.hero-section::before{ display:none; }            /* drop the old white wash */
/* trim the big vertical gap: shrink the 85vh row + remove top padding */
.hero-section .min-vh-85{ min-height:0 !important; }
.hero-section .hero-content.pt-5{ padding-top:.5rem !important; }
/* equal-height cards: make the column a flex container and the card fill it */
.hero-section .row .col-md-4{ display:flex; }
.hero-info-card{
  position:relative; overflow:hidden;
  width:100%; height:100%;                            /* same size across the row */
  display:flex; flex-direction:column; justify-content:center;
  background:var(--surface); border:1px solid var(--border);
  border-left:4px solid var(--primary);              /* left accent line */
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  padding:1.1rem 1.1rem 1.1rem 1.25rem;
  text-align:left;                                   /* left-aligned content */
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.hero-info-card:hover{
  box-shadow:var(--shadow-md); transform:translateY(-3px);
  border-left-color:var(--accent-dark);
}
.hero-info-card i{ color:var(--primary)!important; font-size:1.6rem; margin-bottom:.35rem; display:block; }
.hero-info-card h5{ font-size:1rem; font-weight:700; margin-bottom:.2rem; color:var(--ink); }
.hero-info-card p{ font-size:.85rem; margin-bottom:0; }
.grad-text{
  background:linear-gradient(120deg,var(--primary),var(--accent-dark));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
/* edition badge */
.hero-badge{
  display:inline-flex; align-items:center; gap:.25rem;
  background:var(--accent-tint); color:var(--accent-dark);
  border:1px solid var(--accent); border-radius:var(--r-pill);
  padding:.35rem 1rem; font-weight:600; font-size:.9rem; letter-spacing:.01em;
}
[data-theme="dark"] .hero-badge{ color:var(--accent); }
/* tighter subtitle (was display-5, too large) */
.hero-subtitle{ font-family:var(--font-head); font-size:clamp(1.05rem,.9rem+1vw,1.4rem); color:var(--muted); font-weight:600; letter-spacing:-.005em; }
/* deadline line */
.hero-deadline{ color:var(--muted); font-size:.95rem; }
/* quick stats row */
.hero-stat{ display:flex; flex-direction:column; align-items:center; line-height:1.1; }
.hero-stat-num{ font-family:var(--font-head); font-weight:700; font-size:1.8rem; color:var(--primary); }
.hero-stat-lbl{ font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }

/* ---------- 8. TESTIMONIALS ---------- */
.testimonial-card{ background:var(--surface); }
.testimonial-quote{ color:var(--ink); font-size:1.02rem; }
.testimonial-avatar{
  width:48px; height:48px; border-radius:var(--r-pill); object-fit:cover;
  flex:0 0 48px; display:inline-flex; align-items:center; justify-content:center;
}
.testimonial-initials{
  background:var(--primary-tint); color:var(--primary); font-weight:700;
  font-family:var(--font-head); letter-spacing:.02em;
}
.testimonial-orglogo{ height:26px; width:auto; max-width:90px; object-fit:contain; opacity:.85; }
.testimonials-carousel .carousel-item{ padding:.25rem; }

/* ---------- 9. GALLERY ---------- */
.gallery-chip{
  border:1.5px solid var(--border); background:var(--surface); color:var(--muted);
  border-radius:var(--r-pill); padding:.4rem 1rem; font-size:.9rem; font-weight:500;
  transition:.15s; cursor:pointer;
}
.gallery-chip:hover{ border-color:var(--primary); color:var(--primary); }
.gallery-chip.active{ background:var(--primary); border-color:var(--primary); color:#fff; }

.gallery-link{ border-radius:var(--r-md); cursor:zoom-in; box-shadow:var(--shadow-sm); }
.gallery-link img{ transition:transform .3s ease; display:block; }
.gallery-link:hover img{ transform:scale(1.05); }
.gallery-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.4rem; text-align:center;
  color:#fff; background:linear-gradient(0deg,rgba(15,23,42,.65),rgba(15,23,42,.05));
  opacity:0; transition:opacity .25s ease; padding:.5rem;
}
.gallery-overlay i{ font-size:1.4rem; }
.gallery-overlay-cap{ font-size:.85rem; font-weight:500; }
.gallery-link:hover .gallery-overlay{ opacity:1; }

/* Homepage gallery teaser tiles */
.gallery-teaser-tile{ border-radius:var(--r-md); box-shadow:var(--shadow-sm); }
.gallery-teaser-tile img{ transition:transform .3s ease; }
.gallery-teaser-tile:hover img{ transform:scale(1.05); }
.gallery-teaser-cap{
  position:absolute; left:0; right:0; bottom:0; padding:.4rem .6rem;
  font-size:.8rem; color:#fff; background:linear-gradient(0deg,rgba(15,23,42,.75),transparent);
}

/* ---------- 10. LECTURERS SLIDER ---------- */
.lecturers-slider{ padding:0 2.5rem; }
.lecturers-slider .swiper{ padding-bottom:2.5rem; }
/* equal-height slides + cards */
.lecturers-slider .swiper-slide{ height:auto; }
.lecturers-slider .speaker-card{ overflow:hidden; height:100%; }
.lecturers-slider .card-body{ min-height:140px; }
.lecturers-slider .speaker-name{
  font-size:.9rem; font-weight:600; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.4em;
}
.lecturers-slider .speaker-affiliation{
  line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.2em;
}
.lecturers-slider .speaker-logo{ height:40px; display:flex; align-items:center; justify-content:center; }
.lecturers-slider .company-logo,
.speaker-card.card-clean .company-logo{ height:36px; width:auto; max-width:120px; object-fit:contain; opacity:.9; filter:none; }
.speaker-card.card-clean .speaker-logo{ height:40px; display:flex; align-items:center; justify-content:center; margin-top:auto; }
.lecturers-slider .speaker-badge{
  position:absolute; top:.5rem; left:.5rem; background:var(--primary); color:#fff;
  font-size:.65rem; font-weight:600; border-radius:var(--r-pill); padding:.2rem .55rem;
}
/* nav arrows */
.lecturers-nav{
  position:absolute; top:42%; transform:translateY(-50%); z-index:3;
  width:40px; height:40px; border-radius:var(--r-pill);
  border:1px solid var(--border); background:var(--surface); color:var(--primary);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md);
  cursor:pointer; transition:.15s;
}
.lecturers-nav:hover{ background:var(--primary); color:#fff; border-color:var(--primary); }
.lecturers-prev{ left:0; } .lecturers-next{ right:0; }
/* pagination dots */
.lecturers-slider .swiper-pagination-bullet{ background:var(--muted); opacity:.5; }
.lecturers-slider .swiper-pagination-bullet-active{ background:var(--primary); opacity:1; }
@media (max-width:575.98px){ .lecturers-slider{ padding:0 1.5rem; } }

/* ---------- 11b. ORGANIZER / PERSON CARD LOGOS ---------- */
.person-logo{ height:40px; display:flex; align-items:center; justify-content:center; }
.person-company-logo{ height:36px; width:auto; max-width:130px; object-fit:contain; opacity:.9; }

/* Organizers use the default personCard() column classes (6 per line on xl). */

/* ---------- 11c. PAST EDITIONS PAGE ---------- */
.edition-year{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:64px; height:64px; border-radius:var(--r-md);
  background:var(--primary-tint); color:var(--primary);
  font-family:var(--font-head); font-weight:700; font-size:1.3rem; flex:0 0 auto;
}
/* Previous-edition cards: 5 per line on large screens, with cover image */
@media (min-width:992px){
  .edition-grid .edition-col{ flex:0 0 auto; width:20%; max-width:20%; }
}
.edition-card{
  color:inherit; overflow:hidden;
  border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.edition-card:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-lg);
  border-color:var(--accent);
}
/* image thumb: fixed height, cover-fit, gradient scrim at the bottom */
.edition-thumb{ height:170px; overflow:hidden; background:var(--surface-3); }
.edition-thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(15,23,42,.45));
  pointer-events:none;
}
.edition-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.edition-card:hover .edition-thumb img{ transform:scale(1.07); }
/* year overlaid on the image, bottom-left */
.edition-thumb .edition-year-tag{
  position:absolute; left:.75rem; bottom:.6rem; z-index:2;
  color:#fff; font-family:var(--font-head); font-weight:700; font-size:1.5rem; line-height:1;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.edition-card .edition-badge{
  position:absolute; top:.6rem; right:.6rem; z-index:2;
  background:var(--accent); color:#fff; font-size:.7rem; font-weight:700;
  border-radius:var(--r-pill); padding:.25rem .65rem; letter-spacing:.03em;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.edition-card .card-body{ background:var(--surface); }
.edition-card .edition-link{
  color:var(--primary); font-size:.82rem; font-weight:600; margin-top:.6rem;
  display:inline-flex; align-items:center; gap:.25rem;
}
.edition-card:hover .edition-link{ color:var(--accent-dark); gap:.45rem; transition:gap .2s; }

.pastedu-slider{ padding:0 2.5rem; }
.pastedu-slider .swiper{ padding-bottom:2.5rem; }
.pastedu-tile{ border-radius:var(--r-md); box-shadow:var(--shadow-sm); cursor:zoom-in; }
.pastedu-tile img{ transition:transform .3s ease; display:block; }
.pastedu-tile:hover img{ transform:scale(1.05); }
.pastedu-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.4rem; opacity:0; transition:opacity .25s ease;
  background:linear-gradient(0deg,rgba(15,23,42,.45),rgba(15,23,42,.05));
}
.pastedu-tile:hover .pastedu-overlay{ opacity:1; }
.pastedu-slider .swiper-pagination-bullet{ background:var(--muted); opacity:.5; }
.pastedu-slider .swiper-pagination-bullet-active{ background:var(--primary); opacity:1; }
.pastedu-prev{ left:0; } .pastedu-next{ right:0; }
@media (max-width:575.98px){ .pastedu-slider{ padding:0 1.5rem; } }

/* ---------- 11d. BOLD ORANGE: scroll progress bar + footer separator ---------- */
/* Top scroll progress bar — fixed at the very top, bold orange */
#scrollProgress.scroll-progress{
  position:fixed; top:0; left:0; bottom:auto; z-index:2000;
  width:0; height:4px;
  background:linear-gradient(90deg, var(--accent), var(--accent-dark)) !important;
}
.scroll-progress .bar{
  background:linear-gradient(90deg, var(--accent), var(--accent-dark)) !important;
}
/* Footer separator <hr> — neutral subtle line (not orange) */
.footer-modern hr{
  border:0 !important; height:1px !important; opacity:1 !important;
  background:var(--border) !important;     /* neutral subtle separator (no orange) */
  border-radius:0;
}

/* ---------- 11. STANDALONE ORANGE ACCENT LINE (before footer) ---------- */
/* header.css makes .cta-ribbon position:absolute (for the old CTA banner).
   Used on its own it must be a normal full-width 6px orange bar. */
.cta-ribbon{
  position:static!important; inset:auto!important; width:100%; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-dark), var(--accent));
  background-size:200% 100%; animation:ribbon 8s linear infinite;
}

/* ============================================================================
   12. RESPONSIVE / MOBILE REFINEMENTS
   ========================================================================== */

/* Fluid hero title so it never overflows on small screens */
.display-2,.hero-title{ font-size:clamp(1.8rem, 1.2rem + 4vw, 3.25rem); }

/* ---- Tablet and below (≤ 991px) ---- */
@media (max-width:991.98px){
  .section{ padding:2.5rem 0; }
  .page-header{ padding:2rem 0 1.25rem !important; }
  .hero-section{ padding:1.75rem 0 2rem !important; }
  /* section pills scroll horizontally instead of wrapping into a tall block */
  .section-nav .nav.nav-pills{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    -webkit-overflow-scrolling:touch; padding-bottom:.35rem; }
  .section-nav .nav-link{ white-space:nowrap; }
}

/* ---- Phones (≤ 767px) ---- */
@media (max-width:767.98px){
  .section{ padding:2rem 0; }
  .hero-subtitle{ font-size:1.05rem; }
  /* hero info cards: comfortable spacing, full width stacking */
  .hero-section .row.g-4{ --bs-gutter-y:.75rem; }
  /* hero stats: tighter gap so 3 fit on one row */
  .hero-stats{ gap:1.25rem !important; }
  .hero-stat-num{ font-size:1.4rem; }
  .hero-stat-lbl{ font-size:.7rem; }
  /* hero CTA buttons go full-width & stack cleanly */
  .hero-cta .btn{ flex:1 1 auto; }
  /* testimonials: one per slide already via carousel; tighten card */
  .testimonial-card{ padding:1.25rem !important; }
  /* lecturers + past-edition sliders: a touch less side padding */
  .lecturers-slider,.pastedu-slider{ padding:0 1.25rem; }
  /* coming-soon card fits the viewport */
  .coming-soon-card{ padding:2rem 1.1rem; }
  /* edition cards a bit taller image on phones */
  .edition-thumb{ height:160px; }
  /* dial back big section titles on phones */
  .section-title{ font-size:1.4rem; }
}

/* ---- Small phones (≤ 480px) ---- */
@media (max-width:480px){
  .hero-badge{ font-size:.8rem; padding:.3rem .8rem; }
  /* stack the two hero CTAs full-width */
  .hero-cta{ flex-direction:column; }
  .hero-cta .btn{ width:100%; }
  /* stats wrap to a centered 2/1 layout if needed */
  .hero-stats{ gap:1rem !important; }
  /* lecturers slider nav arrows smaller & flush */
  .lecturers-nav{ width:34px; height:34px; }
  /* tables never overflow the screen */
  .table-responsive{ font-size:.85rem; }
}

/* Make all images fluid by default (prevents horizontal scroll) */
img{ max-width:100%; height:auto; }
/* guard against any element forcing horizontal scroll */
html,body{ overflow-x:hidden; }

/* ============================================================================
   13. REVEAL-ON-SCROLL (IntersectionObserver) — bulletproof, can't get stuck
   ========================================================================== */
/* Default: everything visible. If JS never runs, content still shows. */
[data-aos]{ opacity:1; transform:none; }

/* Once JS marks the document ready, hide un-revealed items so they can fade in. */
html.reveal-ready [data-aos]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s ease, transform .55s ease;
  will-change:opacity, transform;
}
html.reveal-ready [data-aos="fade-right"]{ transform:translateX(-22px); }
html.reveal-ready [data-aos="fade-left"]{ transform:translateX(22px); }
html.reveal-ready [data-aos="zoom-in"]{ transform:scale(.94); }

/* Revealed state (wins via later source order) */
html.reveal-ready [data-aos].reveal-show{ opacity:1 !important; transform:none !important; }

@media (prefers-reduced-motion:reduce){
  html.reveal-ready [data-aos]{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ---------- 14. TERMS PAGE — single flowing document ---------- */
.terms-doc{ max-width:100%; margin:0 auto; padding:2rem 2.25rem; }
.terms-doc .section-title{
  margin:1.75rem 0 .6rem !important;
}
.terms-doc .section-title:first-child{ margin-top:0 !important; }
.terms-doc .terms-block{ margin-bottom:.5rem; }
.terms-doc .terms-block p{ margin-bottom:.6rem; }
.terms-doc .terms-block p:last-child{ margin-bottom:0; }
.terms-doc .terms-block ul{ padding-left:1.25rem; margin-bottom:.25rem; }
.terms-doc .terms-block li{ margin-bottom:.4rem; }
.terms-doc .terms-block .alert{ margin-top:.6rem; }
@media (max-width:767.98px){
  .terms-doc{ padding:1.25rem; }
}

/* Wide variant of the coming-soon card (fills the width to optimise space) */
.coming-soon-card.coming-soon-lg{
  max-width:100%; padding:1.75rem 2.5rem;
}
.coming-soon-card.coming-soon-lg > i:first-child{
  width:64px; height:64px; font-size:1.9rem;
}
@media (max-width:767.98px){
  .coming-soon-card.coming-soon-lg{ padding:1.75rem 1.25rem; }
}

/* ============================================================================
   15. FOOTER — light, branded with orange accents
   ========================================================================== */
.footer-modern{
  background:var(--surface-2) !important;
  border-top:1px solid var(--border);
  position:relative;
}
/* slim orange accent strip sitting on top of the footer */
.footer-modern::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent-dark), var(--accent));
}
/* column headings: orange, with a short underline accent */
.footer-modern .text-brand{
  color:var(--accent) !important;
  position:relative; padding-bottom:.4rem; display:inline-block;
}
.footer-modern .text-brand::after{
  content:""; position:absolute; left:0; bottom:0; width:28px; height:2px;
  background:var(--accent); border-radius:var(--r-pill);
}
/* links: muted -> orange on hover, no underline jump */
.footer-modern .footer-link{ color:var(--muted); transition:color .15s, padding-left .15s; }
.footer-modern .footer-link:hover{ color:var(--accent); text-decoration:none; padding-left:3px; }
.footer-modern .footer-link i{ color:var(--accent); }
/* social icons: orange-tinted, fill orange on hover */
.footer-modern .social-ico{
  background:var(--accent-tint); border:1px solid var(--border); transition:.18s;
}
.footer-modern .social-ico,
.footer-modern .social-ico i{ color:var(--accent) !important; }
.footer-modern .social-ico:hover{
  background:var(--accent) !important; border-color:var(--accent);
  transform:translateY(-2px);
}
.footer-modern .social-ico:hover,
.footer-modern .social-ico:hover i{ color:#fff !important; }
/* contact email link picks up the brand too */
.footer-modern #mailLink{ color:var(--accent); font-weight:500; }
/* bottom divider: subtle */
.footer-modern hr{ border:0 !important; height:1px !important; opacity:1 !important;
  background:var(--border) !important; }
/* bottom bar terms link */
.footer-modern .d-flex .footer-link:hover{ color:var(--accent); }

/* ============================================================================
   16. CROSS-PAGE CONSISTENCY — one definition for shared elements
   Overrides legacy per-page rules in mainPage.css so every page matches.
   ========================================================================== */

/* --- Section titles: identical everywhere (orange, 3px underline, left) --- */
.venue-page .section-title,
.sponsors-page .section-title,
.apply-page .section-title,
.dates-page .section-title,
.terms-page .section-title,
.program-page .section-title{
  color:var(--primary) !important;
  font-family:var(--font-head) !important;
  font-weight:600 !important;
  font-size:clamp(1.4rem, 1.1rem + 1vw, 2rem) !important;
  letter-spacing:-.01em !important;
  border-bottom:3px solid var(--primary) !important;
  padding-bottom:.4rem !important;
  margin:0 0 1.25rem !important;
  display:block; width:fit-content;
}
/* kill any page-specific ::after double-underline */
.venue-page .section-title::after,
.sponsors-page .section-title::after,
.apply-page .section-title::after,
.dates-page .section-title::after,
.terms-page .section-title::after{ content:none !important; }

/* centered titles where the page intends it (these use text-center markup) */
.sponsors-page .section-title{ margin-left:auto !important; margin-right:auto !important; text-align:center !important; }

/* --- Hero / page titles: identical scale everywhere --- */
.venue-page .hero-title,
.sponsors-page .hero-title,
.apply-page .hero-title,
.dates-page .hero-title,
.terms-page .hero-title,
.program-page .hero-title{
  color:var(--primary) !important;
  font-family:var(--font-head) !important;
  font-weight:700 !important;
  font-size:clamp(1.8rem, 1.2rem + 4vw, 3rem) !important;
  line-height:1.1 !important;
}

/* --- Buttons: brand-consistent across pages (orange) --- */
.venue-page .btn-primary,  .sponsors-page .btn-primary,
.apply-page .btn-primary,  .dates-page .btn-primary,
.terms-page .btn-primary{
  --bs-btn-bg:var(--primary); --bs-btn-border-color:var(--primary);
  --bs-btn-hover-bg:var(--primary-dark); --bs-btn-hover-border-color:var(--primary-dark);
}
.venue-page .btn-outline-primary,  .sponsors-page .btn-outline-primary,
.apply-page .btn-outline-primary,  .dates-page .btn-outline-primary,
.terms-page .btn-outline-primary{
  --bs-btn-color:var(--primary); --bs-btn-border-color:var(--primary);
  --bs-btn-hover-bg:var(--primary); --bs-btn-hover-border-color:var(--primary); --bs-btn-hover-color:#fff;
}

/* ---- Footer brand lockup (fancy gradient wordmark) ---- */
.footer-brand{ text-decoration:none; }
.footer-wordmark{ display:flex; flex-direction:column; line-height:1; }
.footer-wordmark .fw-grad{
  font-family:var(--font-head); font-weight:700; font-size:1.6rem; letter-spacing:-.01em;
  background:linear-gradient(120deg, var(--accent), var(--accent-dark));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.footer-wordmark .fw-sub{
  font-family:var(--font-head); font-weight:600; font-size:.92rem;
  color:var(--slate); letter-spacing:.16em; text-transform:uppercase; margin-top:.15rem;
}
.footer-wordmark .fw-tag{
  font-size:.72rem; color:var(--faint); letter-spacing:.04em; margin-top:.3rem;
}
[data-theme="dark"] .footer-wordmark .fw-sub{ color:var(--slate); }

/* ---- Venue page (redesigned) ---- */
.venue-hero{ border:1px solid var(--border); border-radius:var(--r-lg); }
.venue-hero-img{ min-height:280px; }
.venue-hero-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.venue-hero-body{ display:flex; flex-direction:column; justify-content:center; }
.venue-host-logo{ height:46px; width:auto; object-fit:contain; align-self:flex-start; }

.fact-card{ display:flex; flex-direction:column; align-items:center; gap:.15rem; }
.fact-card i{ font-size:1.5rem; color:var(--primary); margin-bottom:.25rem; }
.fact-card .fact-t{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
.fact-card .fact-v{ font-weight:600; color:var(--ink); font-size:.92rem; }

.venue-photo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.venue-photo-grid a{ border-radius:var(--r-md); overflow:hidden; display:block; box-shadow:var(--shadow-sm); }
.venue-photo-grid img{ width:100%; height:200px; object-fit:cover; display:block; transition:transform .3s ease; }
.venue-photo-grid a:hover img{ transform:scale(1.05); }

.transport-card .transport-icon{ width:48px; height:48px; border-radius:var(--r-pill);
  background:var(--accent-tint); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }

@media (max-width:575.98px){
  .venue-photo-grid{ grid-template-columns:1fr; }
  .venue-hero-img{ min-height:200px; }
}

/* ---- Buttons: icon + text always inline & vertically centered (site-wide) ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; line-height:1.2; }
.btn i{ line-height:1; display:inline-flex; align-items:center; }
/* the me-1/me-2 spacing utilities become redundant with gap, but harmless;
   keep buttons that wrap (block) working too */
.btn.d-grid, .btn.w-100{ display:flex; }

/* ============================================================================
   17. DARK MODE SAFETY LAYER
   Remap hardcoded light-mode colours (from legacy pages.css) to theme tokens
   so no text/icon is unreadable in dark mode. Loaded last = wins.
   ========================================================================== */
[data-theme="dark"]{
  /* Bootstrap utility classes that don't adapt */
  --bs-body-color: var(--ink);
}
[data-theme="dark"] .text-dark{ color:var(--ink) !important; }
[data-theme="dark"] .text-black{ color:var(--ink) !important; }
[data-theme="dark"] .text-muted{ color:var(--muted) !important; }
[data-theme="dark"] .bg-white{ background-color:var(--surface) !important; }
[data-theme="dark"] .bg-light{ background-color:var(--surface-2) !important; }

/* Cards / panels with hardcoded white backgrounds → dark surface */
[data-theme="dark"] .card,
[data-theme="dark"] .card-clean,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .stats-card,
[data-theme="dark"] .glance-card,
[data-theme="dark"] .policy-card,
[data-theme="dark"] .attendance-card,
[data-theme="dark"] .transport-card,
[data-theme="dark"] .info-card,
[data-theme="dark"] .content-card,
[data-theme="dark"] .step,
[data-theme="dark"] .fact-card,
[data-theme="dark"] .terms-doc,
[data-theme="dark"] .accordion-item{
  background-color:var(--surface) !important;
  border-color:var(--border) !important;
  color:var(--ink);
}

/* Accordion (FAQ) buttons/bodies */
[data-theme="dark"] .accordion-button{ background-color:var(--surface); color:var(--ink); }
[data-theme="dark"] .accordion-button:not(.collapsed){ background-color:var(--surface-2); color:var(--primary); }
[data-theme="dark"] .accordion-body{ color:var(--muted); background-color:var(--surface); }
[data-theme="dark"] .accordion-button::after{ filter:invert(1) grayscale(1) brightness(1.6); }

/* Generic dark text values that were hardcoded → readable */
[data-theme="dark"] .hero-subtitle,
[data-theme="dark"] .step .muted,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-body p,
[data-theme="dark"] .card-title,
[data-theme="dark"] .terms-block,
[data-theme="dark"] .terms-block p,
[data-theme="dark"] .terms-block li{ color:var(--muted) !important; }
[data-theme="dark"] .card-body h1,[data-theme="dark"] .card-body h2,
[data-theme="dark"] .card-body h3,[data-theme="dark"] .card-body h4,
[data-theme="dark"] .card-body h5,[data-theme="dark"] .card-body h6,
[data-theme="dark"] .card-title{ color:var(--ink) !important; }

/* Bootstrap tables (program schedule) */
[data-theme="dark"] .table{ --bs-table-bg:transparent; color:var(--ink); }
[data-theme="dark"] .table td,[data-theme="dark"] .table th{ border-color:var(--border); }

/* Icons that were dark → brand orange for visibility
   (NOT glance-icon: it's a white icon on an orange disc — keep it white) */
[data-theme="dark"] .fact-card i,
[data-theme="dark"] .transport-icon i,
[data-theme="dark"] .step .icon i,
[data-theme="dark"] .summary-icon{ color:var(--primary); }
[data-theme="dark"] .glance-icon i{ color:#fff !important; }

/* Soft/tinted utility boxes */
[data-theme="dark"] .bg-soft{ background:var(--surface-2) !important; color:var(--muted) !important; border-color:var(--border) !important; }
[data-theme="dark"] .callout{ background:var(--surface-2); }
[data-theme="dark"] .callout.warning{ background:#2a1c10; }

/* Chips / badges with light bg */
[data-theme="dark"] .chip{ background:var(--surface-2); color:var(--muted); border-color:var(--border); }

/* ============================================================================
   18. DARK MODE — force all body text light (catch-all for legacy hardcoded colours)
   ========================================================================== */
[data-theme="dark"] body,
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] dd,
[data-theme="dark"] dt,
[data-theme="dark"] label,
[data-theme="dark"] small,
[data-theme="dark"] strong,
[data-theme="dark"] em,
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-title,
[data-theme="dark"] .muted,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-black,
[data-theme="dark"] .lead{
  color:#e8edf5 !important;
}
/* muted/secondary text: a soft light-grey (still readable, not pure white) */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .muted,
[data-theme="dark"] small.text-muted{
  color:#b7c0cf !important;
}
/* keep links, brand titles and orange accents their own colour (not whitened) */
[data-theme="dark"] a:not(.btn){ color:var(--primary) !important; }
[data-theme="dark"] .section-title,
[data-theme="dark"] .hero-title,
[data-theme="dark"] .page-title,
[data-theme="dark"] .text-primary,
[data-theme="dark"] .text-accent,
[data-theme="dark"] .text-brand{ color:var(--primary) !important; }
/* white text on the orange CTA buttons stays white */
[data-theme="dark"] .btn-cta,[data-theme="dark"] .btn-brand,
[data-theme="dark"] .btn-primary{ color:#fff !important; }
/* buttons that are white-on-dark keep their intended colour */
[data-theme="dark"] .btn-outline-primary{ color:var(--primary) !important; }
[data-theme="dark"] .btn-outline-primary:hover{ color:#fff !important; }

/* ---- Apply page: fee cards ---- */
.apply-fee-card{ position:relative; text-align:center; }
.apply-fee-card.featured{ border-color:var(--accent); box-shadow:var(--shadow-md); }
.apply-fee-icon{ width:56px; height:56px; margin:0 auto .75rem; border-radius:var(--r-pill);
  background:var(--accent-tint); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.apply-fee-label{ display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
.apply-fee-price{ font-family:var(--font-head); font-weight:700; font-size:2rem; color:var(--primary); margin:.15rem 0 .5rem; }
.apply-fee-tag{ position:absolute; top:.75rem; right:.75rem; background:var(--accent); color:#fff;
  font-size:.68rem; font-weight:700; border-radius:var(--r-pill); padding:.2rem .6rem; letter-spacing:.02em; }

/* ============================================================================
   19. DARK MODE — navbar + mobile offcanvas menu text = white/readable
   ========================================================================== */
[data-theme="dark"] .navbar{ background:var(--surface) !important; border-color:var(--border) !important; }
[data-theme="dark"] .navbar .nav-link{ color:#e8edf5 !important; }
[data-theme="dark"] .navbar .nav-link:hover,
[data-theme="dark"] .navbar .nav-link.active{ color:var(--primary) !important; }
[data-theme="dark"] .navbar .nav-link i{ color:var(--primary) !important; }

/* Mobile offcanvas menu */
[data-theme="dark"] .offcanvas{ background:var(--surface) !important; color:#e8edf5 !important; border-color:var(--border) !important; }
[data-theme="dark"] .offcanvas .offcanvas-title,
[data-theme="dark"] .offcanvas .nav-link,
[data-theme="dark"] .offcanvas span,
[data-theme="dark"] .offcanvas small{ color:#e8edf5 !important; }
[data-theme="dark"] .offcanvas .nav-link i{ color:var(--primary) !important; }
[data-theme="dark"] .offcanvas .nav-link:hover,
[data-theme="dark"] .offcanvas .nav-link.active{ color:var(--primary) !important; }
[data-theme="dark"] .offcanvas .btn-close{ filter:invert(1) grayscale(1) brightness(1.6); }
/* dropdown menu (Past Editions) in dark mode */
[data-theme="dark"] .dropdown-menu{ background:var(--surface); border-color:var(--border); }
[data-theme="dark"] .dropdown-item{ color:#e8edf5; }
[data-theme="dark"] .dropdown-item:hover,[data-theme="dark"] .dropdown-item:focus{ background:var(--surface-2); color:var(--primary); }
[data-theme="dark"] .dropdown-header{ color:var(--faint); }

/* ============================================================================
   20. BUTTONS — one consistent size & inline icon+text on every page
   ========================================================================== */
/* uniform, compact-comfortable size for ALL buttons (overrides btn-lg/btn-sm drift) */
.btn{
  display:inline-flex !important; align-items:center; justify-content:center; gap:.45rem;
  padding:.5rem 1.1rem !important;
  font-size:.95rem !important;
  line-height:1.2 !important;
  border-radius:var(--r-md);
  font-weight:600;
}
/* flatten size variants so EVERY button is identical & compact */
.btn-lg,.btn-sm{ padding:.5rem 1.1rem !important; font-size:.95rem !important; }
/* icon sits on the same line as text, vertically centered */
.btn i{ line-height:1; display:inline-flex; align-items:center; font-size:1em; }
/* neutralise the me-1/me-2 margin on button icons since we use flex gap */
.btn i.me-1,.btn i.me-2{ margin-right:0 !important; }

/* ---- Sponsors: professional attendance icons (replaced emoji) ---- */
.attendance-icon .attendance-bi{
  font-size:2.4rem; color:var(--primary); line-height:1;
}

/* ---- Coming-soon card: standard buttons ---- */
.cs-actions{ text-align:center; }
.cs-actions .btn{ margin:.25rem; }

/* ---- Dark mode: sponsors/attendance icons + card backgrounds ---- */
[data-theme="dark"] .attendance-icon .attendance-bi,
[data-theme="dark"] .contact-icon,
[data-theme="dark"] .summary-icon{ color:var(--primary) !important; }
[data-theme="dark"] .attendance-card,
[data-theme="dark"] .glance-card,
[data-theme="dark"] .pkg-card,
[data-theme="dark"] .package-card{ background:var(--surface) !important; border-color:var(--border) !important; color:#e8edf5; }
[data-theme="dark"] .attendance-badge,
[data-theme="dark"] .glance-icon{ background:var(--surface-2) !important; }

/* ---- Dark mode: speaker / person cards name + background visibility ---- */
[data-theme="dark"] .person-card,
[data-theme="dark"] .speaker-card{
  background:var(--surface) !important; border-color:var(--border) !important;
}
[data-theme="dark"] .person-card .card-body h6,
[data-theme="dark"] .speaker-card .speaker-name,
[data-theme="dark"] .person-card h6,
[data-theme="dark"] .card-body h6{ color:#f1f5f9 !important; }
[data-theme="dark"] .person-card .card-body p,
[data-theme="dark"] .speaker-card .speaker-affiliation,
[data-theme="dark"] .card-body p{ color:#b7c0cf !important; }
[data-theme="dark"] .person-img-wrapper{ background:var(--surface-2) !important; }

/* ---- Dark mode: mobile hamburger (navbar-toggler) icon → white ---- */
[data-theme="dark"] .navbar-toggler{ border-color:var(--border); }
[data-theme="dark"] .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
[data-theme="dark"] .navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(255,107,53,.35); }

/* ---- Feedback / survey stat cards (homepage testimonials) ---- */
.feedback-stat{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; }
.feedback-stat-num{ font-family:var(--font-head); font-weight:700; font-size:2rem; color:var(--primary); line-height:1; }
.feedback-stat-den{ font-size:1rem; color:var(--muted); font-weight:600; }
.feedback-stat-lbl{ font-size:.82rem; color:var(--muted); }
[data-theme="dark"] .feedback-stat-lbl{ color:#b7c0cf; }

/* ---- Lightbox prev/next chevrons ---- */
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:var(--r-pill);
  border:0; background:rgba(0,0,0,.45); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  cursor:pointer; transition:background .15s, transform .15s;
}
.lightbox-nav:hover{ background:var(--accent); }
.lightbox-prev{ left:.5rem; }
.lightbox-next{ right:.5rem; }
@media (max-width:575.98px){ .lightbox-nav{ width:38px; height:38px; font-size:1.1rem; } }