/* App-level overrides — meeting theme comes from /osnny-2026/css/OSNNY_Styles.css */

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1 0 auto;
  padding-top: 90px;
}

/* ---------------------------------------------------------------------------
   Owl Carousel arrows and dots.

   Only Owl's core CSS ships inside healiolivebundle.css, so the theme layer
   (arrows, dots) is defined here. The `owl-theme` class is added by the
   initializer in components/SiteScripts.tsx.
--------------------------------------------------------------------------- */

.owl-theme .owl-nav {
  margin-top: 0;
}

.owl-theme .owl-nav button.owl-prev,
.owl-theme .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(16, 34, 61, 0.18);
  color: #0084b6;
  font-size: 18px;
  line-height: 1;
  opacity: 0.85;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.owl-theme .owl-nav button.owl-prev {
  left: 0;
}

.owl-theme .owl-nav button.owl-next {
  right: 0;
}

.owl-theme .owl-nav button.owl-prev:hover,
.owl-theme .owl-nav button.owl-next:hover {
  opacity: 1;
  background: #f2f9fc;
}

.owl-theme .owl-dots {
  text-align: center;
  margin-top: 1.5rem;
}

.owl-theme .owl-dots .owl-dot {
  border: 0;
  background: transparent;
  padding: 0;
}

.owl-theme .owl-dots .owl-dot span {
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background: rgba(0, 132, 182, 0.3);
  transition: background 0.2s ease, transform 0.2s ease;
}

.owl-theme .owl-dots .owl-dot.active span {
  background: #0084b6;
  transform: scale(1.25);
}

@media (max-width: 767px) {
  .owl-theme .owl-nav button.owl-prev,
  .owl-theme .owl-nav button.owl-next {
    display: none;
  }
}

/* Keep the arrows clear of the quote text, which spans the full row. */
#lgx-owltestimonial .lgx-testi-single {
  padding-left: 55px;
  padding-right: 55px;
}

@media (max-width: 767px) {
  #lgx-owltestimonial .lgx-testi-single {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Photo gallery: keep every slide the same height. */
#lgx-owlgallery .lgx-gallery-single figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

#lgx-owlgallery .lgx-gallery-single figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

#lgx-owlgallery .owl-dots {
  margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------------------------
   Program committee cards (home page).

   The theme's hover states target `figure a.profile-img img` and `.title`,
   neither of which the CMS markup used, so the cards were inert. The markup now
   links each headshot; these rules define the hover treatment, keyed off the
   committee's name colour so OSN New York reads blue and Retina reads orange.
--------------------------------------------------------------------------- */

/* Cards are floated by the theme, which left a partial row (Retina has four
   members) hanging off to the left. Flex ignores the floats but keeps the
   theme's percentage widths, so the responsive breakpoints still apply.
   Scoped to columns holding cards: `.lgx-speakers` also wraps the agenda and
   faculty widgets, and a centred flex column shrinks their frame to nothing. */
.lgx-speakers .row > [class*="col-"]:has(.lgx-single-speaker2) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Clearance so the hover lift and its shadow stay clear of the heading bar. */
.lgx-speakers .row:has(.lgx-single-speaker2) {
  padding-top: 18px;
}

/* Held the fifth slot of the Retina row open; centring makes it unnecessary,
   and leaving it in would throw the row off centre. */
.lgx-single-speaker2:has(.speaker-spacer) {
  display: none;
}

.lgx-single-speaker2 figure {
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(16, 34, 61, 0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Two points smaller than the theme's 22px, line height scaled to match. */
.lgx-single-speaker2 .speaker-info .title-color-1,
.lgx-single-speaker2 .speaker-info .title-color-2 {
  font-size: 19px;
  line-height: 31px;
}

/* The photo and the caption have to resolve to the same box, or the headshot
   sits off centre above the name. The theme sets no width on either, so the
   image fell back to its natural 375px inside a wider card. */
.lgx-single-speaker2 figure {
  margin: 0;
  width: 100%;
}

.lgx-single-speaker2 .profile-img {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
}

.lgx-single-speaker2 figure figcaption,
.lgx-single-speaker2 .speaker-info {
  width: 100%;
  margin: 0;
}

/* The mug shots share a 375x405 aspect (a few are 2x exports), so this crops
   nothing; it just keeps every card the same height. */
.lgx-single-speaker2 .profile-img img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  aspect-ratio: 375 / 405;
  object-fit: cover;
  object-position: center top;
}

/* Accent wash, revealed on hover. */
.lgx-single-speaker2 .profile-img::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.lgx-single-speaker2:has(.title-color-1) .profile-img::after {
  background: linear-gradient(to top, rgba(0, 132, 182, 0.55), rgba(0, 132, 182, 0));
}

.lgx-single-speaker2:has(.title-color-2) .profile-img::after {
  background: linear-gradient(to top, rgba(249, 155, 31, 0.55), rgba(249, 155, 31, 0));
}

.lgx-single-speaker2 .speaker-info {
  border-top: 3px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.lgx-single-speaker2:has(.title-color-1) .speaker-info {
  border-top-color: #0084b6;
}

.lgx-single-speaker2:has(.title-color-2) .speaker-info {
  border-top-color: #f99b1f;
}

.lgx-single-speaker2 .speaker-info h3 {
  transition: color 0.3s ease;
}

.lgx-single-speaker2:hover figure {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(16, 34, 61, 0.2);
}

.lgx-single-speaker2:hover .profile-img img {
  transform: scale(1.06);
}

.lgx-single-speaker2:hover .profile-img::after {
  opacity: 1;
}

/* The theme turns this caption #333 while leaving the name blue or orange, so
   the accent colour is used as the fill and the name flips to white instead. */
.lgx-single-speaker2:has(.title-color-1):hover .speaker-info {
  background: #0084b6;
}

.lgx-single-speaker2:has(.title-color-2):hover .speaker-info {
  background: #f99b1f;
}

.lgx-single-speaker2:hover .speaker-info h3 {
  color: #fff;
}

.lgx-single-speaker2 .profile-img img {
  transition: transform 0.4s ease;
}

/* Fills the fifth slot of the Retina row, which has four members. */
.speaker-spacer {
  border-top: 25px solid #f99b1f;
}

@media (prefers-reduced-motion: reduce) {
  .lgx-single-speaker2 figure,
  .lgx-single-speaker2 .profile-img img {
    transition: none;
  }

  .lgx-single-speaker2:hover figure {
    transform: none;
  }

  .lgx-single-speaker2:hover .profile-img img {
    transform: none;
  }
}

/* Stova agenda / faculty widget frames, before their content is measured. */
iframe[data-containerid] {
  display: block;
  width: 100%;
  min-height: 70vh;
  border: 0;
}