/* Project overrides. Loaded after style.css, so it wins. */

/*
 * The theme resets every list (`ul, ol { list-style: none; margin: 0; padding: 0 }`)
 * because it builds menus and tag pills out of them. Prose lists need the
 * defaults back — opt in with .listed.
 */
.listed {
  list-style: disc;
  padding-left: 20px;
  margin: 0 0 20px;
}

ol.listed {
  list-style: decimal;
}

.listed li {
  margin-bottom: 8px;
  line-height: 1.75;
}

.listed li:last-child {
  margin-bottom: 0;
}

.listed li::marker {
  color: inherit;
}

/* Nested lists: switch marker shape, keep the indent consistent. */
.listed .listed,
.listed ul,
.listed ol {
  list-style: circle;
  padding-left: 24px;
  margin: 8px 0 0;
}

/*
 * The theme's base .btn-2 is square (border-radius: 0) and only the Home 03
 * header/hero contexts round it to 5px. Normalise so every button matches.
 */
.btn-2 {
  border-radius: 5px;
}

/*
 * The theme tints the Home 03 hero with an orange→red gradient at 0.6 opacity.
 * Replace with a neutral dark scrim so the campus photo keeps its own colours
 * while the white text and countdown stay readable. Raise/lower the alpha to
 * taste; set display: none to drop the overlay entirely.
 */
.meeta-hero-section-3::before {
  background-image: none;
  background-color: rgba(23, 22, 21, 0.45);
  opacity: 1;
}

/*
 * The theme paints a loud colourful-polygon image (bg/topics-bg.jpg) behind
 * the sub-themes band. No replacement artwork exists — keep the band clean
 * white and let the cards carry it.
 */
.meeta-topics-section::before {
  display: none;
}

/*
 * Speakers band: the template expects a photo behind its orange→red gradient
 * overlay (0.8 opacity). Without a photo, use the flat brand blue instead —
 * pure CSS, follows the :root palette on rebrand.
 */
.meeta-speakers-3::before {
  background-image: none;
  background-color: var(--brand-blue);
  opacity: 1;
}

/*
 * Hero countdown circle: theme ships it orange (#ff8a2f fill, #e57c2a tiles).
 * Fill with the brand colour instead; the tiles use translucent black so they
 * always read as a darker shade of the circle, whatever the brand colour is.
 */
.meeta-hero-section-3 .meeta-countdown-wrap::before {
  background: var(--brand-primary);
}

.meeta-hero-section-3 .meeta-countdown-wrap .meeta-countdown-3 .single-countdown {
  background: rgba(0, 0, 0, 0.15);
}

/*
 * Topics slider: sub-theme teasers vary in length, so cards ended up with
 * different heights. Swiper stretches all slides in a row to the tallest one
 * once slides are height:auto; the card then fills its slide and the text
 * area absorbs the leftover space.
 */
.meeta-topics-active .swiper-slide {
  height: auto;
}

.meeta-topics-active .topic-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.meeta-topics-active .topic-item .topic-content {
  flex: 1 1 auto;
}

/*
 * The theme's breadcrumb pill is fixed at 225px × 45px — sized for the demo's
 * short "Home / About" trails. Longer page titles overflow the box and wrap
 * onto unstyled lines. Let the pill grow with its content instead.
 */
.page-banner .breadcrumb {
  max-width: 100%;
  width: fit-content;
  height: auto;
  line-height: 1.6;
  padding: 8px 25px;
}

/*
 * Contact-info tiles used mid-page (venue): the theme's -90px bottom margin
 * exists to overlap the tiles onto the map section that follows them on the
 * contact page. Inline usage has ordinary content below instead — cancel the
 * overlap and add breathing room before the next block.
 */
.contact-info-inline .contact-info-wrap {
  margin-top: 40px;
  margin-bottom: 0;
}

/*
 * The theme centers the icon glyph with line-height, which is tuned to the
 * flaticon font's metrics — Font Awesome glyphs (plane, train) end up sitting
 * high and off-axis. Flex-center the circle so any icon font lands dead centre.
 */
/*
 * Equal-height cards: the bootstrap columns already stretch to the tallest
 * sibling; the card just has to fill its column. The 70px offset mirrors the
 * card's margin-top, which reserves space for the floating icon circle.
 */
.contact-info-inline .contact-info-wrap .single-contact-info {
  height: calc(100% - 70px);
}

.contact-info-inline .contact-info-wrap .single-contact-info .info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.contact-info-inline .contact-info-wrap .single-contact-info .info-icon i {
  line-height: 1;
}

/*
 * Preloader centering: the theme positions .preloader at top/left 50% without
 * a -50% translate, leaving the spinner 25px off centre. Center it with flex
 * on the white overlay instead.
 */
#preloader {
  display: flex;
  align-items: center;
  justify-content: center;
}

#preloader .preloader {
  position: relative;
  top: auto;
  left: auto;
}