/* =========================================================
   ACAO FESTIVAL — Color override only
   Loaded AFTER main.css. Does not touch main.css, does not
   change any font-family. Only rewrites the theme's color
   variables (--main-h/s/l etc.) to the ACAO red/gold palette.
   Applies identically across all pages of the site.
========================================================= */

:root {
  /* ACAO Red (replaces the original magenta #ff0fd3) */
  --main-h: 353;
  --main-s: 74%;
  --main-l: 45%;

  /* Warm gold accent (replaces the original orange) */
  --main-two-h: 42;
  --main-two-s: 93%;
  --main-two-l: 52%;

  /* Deep coral, 2nd accent (replaces the original coral) */
  --main-three-h: 8;
  --main-three-s: 78%;
  --main-three-l: 52%;
}

.home-two-bg,
.home-one-bg {
  background-color: #0b0709 !important;
}

/* Circular photo frame for this spot specifically — always a perfect
   circle, auto-cropped to fit, no matter what size photo is uploaded. */
.seat-booking-banner {
  aspect-ratio: 1 / 1;
  max-width: 420px;
  margin-inline: auto;
}
.seat-booking-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}
/* Fix: .event-two-tab has a -100px top margin in its original theme
   context (Festival Program section). Reused here for the contact
   form tabs, where that negative margin hides the heading above it.
   Neutralize it in this specific context only. */
.contact-ip-area .event-two-tab {
  margin-top: 0 !important;
}
@media screen and (max-width: 991px) {
  .contact-ip-area .event-two-tab {
    margin-top: 24px !important;
  }
}

/* Add clear visual spacing between the contact form and its banner image */
.contact-ip-banner {
  margin-left: 30px;
}
@media screen and (max-width: 991px) {
  .contact-ip-banner {
    margin-left: 0;
    margin-top: 30px;
  }
}

/* "Our Festivals" cards: force equal height + push the button to the
   bottom of each card, so "See This Edition" always lines up across
   all cards, regardless of how long each festival's text is. */
.acao-our-festivals .blog-card-two {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.acao-our-festivals .blog-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.acao-our-festivals .blog-content .text-only-button {
  margin-top: auto;
}
/* Force these two photo spots to always fill their frame cleanly,
   auto-cropping as needed, no matter what size/shape photo is
   uploaded. Never distorts — just ensures a full, polished look.
   aspect-ratio gives the frame a real height to crop against,
   at any screen size (not just a fixed pixel value). */
.about-bg {
  aspect-ratio: 527 / 697;
}
.about-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Circular photo frames: Speakers section (4 cards) + testimonial photo.
   The theme already auto-crops these (object-fit: cover) — we just add
   a perfect square frame + rounded corners to make them full circles. */
.team-two-area .team-card-two .team-card-thumb-wrapper {
  aspect-ratio: 1 / 1;
}
.team-two-area .team-card-two .team-thumb {
  border-radius: 50% !important;
}
.testimonial-two-clients {
  aspect-ratio: 1 / 1;
  max-width: 420px;
}
.testimonial-two-clients img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Force the contact page banner photo to always fill its frame
   cleanly, auto-cropping as needed, no matter what photo is used. */
.contact-ip-banner {
  aspect-ratio: 620 / 590;
}
.contact-ip-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Our event/festival cards only have ONE image each (not two stacked
   like the theme's default blog cards) — force it to always be
   visible, instead of the theme's default "hidden until hover" state
   meant for a two-image reveal effect we're not using here. */
.blog-card-two .blog-main-thumb img {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translatex(0) scalex(1) !important;
}

/* Partner logos: clean white card behind each one (so every logo
   stays visible, transparent or not), all lined up evenly on one
   row, wrapping neatly on smaller screens. Custom flexbox instead
   of Bootstrap row-cols, for precise, consistent alignment. */
.acao-partner-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.acao-partner-logos .brand-wrapper {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  width: 180px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.acao-partner-logos .brand-wrapper img {
  max-height: 60px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media screen and (max-width: 767px) {
  .acao-partner-logos .brand-wrapper {
    width: 140px;
    height: 80px;
  }
  .acao-partner-logos .brand-wrapper img {
    max-height: 44px;
    max-width: 110px;
  }
}

/* Override global padding .py-120 (réduit depuis main.css) */
.py-120 {
    padding-block-start: 60px !important;
    padding-block-end: 60px !important;
}

@media (min-width: 576px) {
    .py-120 {
        padding-block-start: 70px !important;
        padding-block-end: 70px !important;
    }
}

@media (min-width: 992px) {
    .py-120 {
        padding-block-start: 80px !important;
        padding-block-end: 80px !important;
    }
}

/* Élargit la colonne du titre "Our Partners" pour qu'il tienne sur une ligne, sans débordement */
@media (min-width: 992px) {
    .brand-two-area .col-lg-6 {
        flex: 0 0 100%;
        max-width: 900px;
        width: 100%;
    }
}

/* Logo circulaire dans le menu offcanvas */
.twoffcanvas__logo img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

:root {
    --body-font: "Titillium Web", sans-serif;
}

/* Titre "Ottawa's Multicultural Celebration" sur une seule ligne (section About/Service) */
@media (min-width: 992px) {
    .service-two-area .col-xl-5.col-lg-6 {
        flex: 0 0 100%;
        max-width: 900px;
        width: 100%;
    }
}

/* Popup affiche du prochain festival (page d'accueil) */
.acao-flyer-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.acao-flyer-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}
.acao-flyer-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 1;
}
.acao-flyer-modal-content img {
    max-width: 100%;
    max-height: 90vh;
    display: block;
    border-radius: 12px;
}
.acao-flyer-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}
@media (max-width: 576px) {
    .acao-flyer-modal-close {
        top: -36px;
        font-size: 26px;
    }
}