/* ========== XGC Brand Color Overrides ========== */
:root {
  --xgc-gold:   #FCB03C;
  --xgc-green:  #106735;
  --grey-100:   #f3f4f6;
}

/* Accessible focus outlines */
a:focus-visible,
button:focus-visible,
.btn-line:focus-visible {
  outline: 2px dashed var(--xgc-gold);
  outline-offset: 2px;
}

/* tighter spacing for select sections */
.section-tight {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Responsive spacing */
@media (max-width: 1024px) {
  .section-tight { padding-top: 50px; padding-bottom: 50px; }
}
@media (max-width: 768px) {
  .section-tight { padding-top: 40px; padding-bottom: 40px; }
}
@media (max-width: 320px) {
  .section-tight { padding-top: 30px; padding-bottom: 30px; }
}

/* Tight spacing for Terms & Conditions sections */
body#terms-conditions section[id^="s"],
body#terms-conditions section#attachments {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* ----------------------------------------------
   Font Awesome overrides: force icons green
   ---------------------------------------------- */
/* Target all Web-Font prefixes and their ::before glyph */
.fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, .fa,
.fas::before, .far::before, .fab::before, .fa-solid::before,
.fa-regular::before, .fa-brands::before, .fa::before {
  color: var(--xgc-green) !important;
}

.fa-canadian-maple-leaf.custom-red {
  color: #E41B17 !important;  /* Canada red */
}
/* ----------------------------------------------
   (Other custom styles…)
   e.g., menu, buttons, hero overlays, etc.
   ---------------------------------------------- */

/* Example: remove old SVG-filter hacks */
.services-svg, .services-svg * {
  filter: none !important;
  fill: none   !important;
}


/* ----------------------------------------------
   2. Remove old SVG filters – let webfonts render natively
   ---------------------------------------------- */
.services-svg,
.services-svg * {
  /* clear out any invert/sepi­a filters */
  filter: none !important;
  fill: none !important;
  color: inherit !important;
}

/* ----------------------------------------------
   3. Header & Menu overrides
   ---------------------------------------------- */
/* only header elements, not the news subheader */
header.header-full,
.header-full.transparent {
  background-color: var(--xgc-green) !important;
  background-image: none     !important;
}

/* Flexbox prefix */
.header-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* Main menu link base color (greyed) */
#mainmenu a,
#mainmenu a.menu-item {
  color: lightgrey           !important;
  opacity: 0.9               !important;
  font-size: 16px;
  font-weight: 600;
  transition: color 0.2s;
}

/* Menu link hover and active state: gold */
#mainmenu a:hover,
#mainmenu a.menu-item:hover,
#mainmenu li.active > a,
#mainmenu a.active {
  color: var(--xgc-gold)     !important;
  opacity: 1                 !important;
}

/* Mobile menu active state */
#mainmenu li.active > a,
#mainmenu li a.active {
  color: var(--xgc-gold)     !important;
}

/* Offcanvas mobile menu links */
@media (max-width: 991.98px) {
  .offcanvas .nav-link {
    color: var(--xgc-gold)     !important;
  }
  .offcanvas .nav-link:hover,
  .offcanvas .nav-link:focus {
    color: var(--xgc-gold)     !important;
    opacity: 1                 !important;
  }

  /* Offcanvas backdrop dark overlay */
  .offcanvas-backdrop.show {
    background-color: #000;
    opacity: 0.8;
  }
}

/* ----------------------------------------------
   4. Buttons
   ---------------------------------------------- */
/* Gold button by default */
.btn-line {
  background-color: var(--xgc-gold) !important;
  color: var(--xgc-green)           !important;
  border: none                      !important;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: none;
  -webkit-transition: background 0.2s, color 0.2s;
  transition: background 0.2s, color 0.2s;
}

/* Hero text sizing */
.hero-title { font-size: 1.8rem; }
@media (min-width: 768px) { .hero-title { font-size: 2.4rem; } }
@media (min-width: 1024px) { .hero-title { font-size: 3rem; } }

/* Responsive hero images */
.hero img { width: 100%; height: auto; }

/* Grid fallback */
@supports not (display: grid) {
  .grid { display: -ms-flexbox; display: flex; flex-wrap: wrap; }
}

/* Hover: grey bg, gold border, green text */
.btn-line:hover,
.btn-line:focus {
  background-color: var(--grey-100) !important;
  color: var(--xgc-green)           !important;
  border: 1px solid var(--xgc-gold) !important;
  box-shadow: none;
}

/* ----------------------------------------------
   5. Slider & Hero overlays
   ---------------------------------------------- */
.swiper-slide .swiper-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}
.sw-caption {
  position: relative;
  z-index: 2;
}

/* VIBE Section */
.vibe-hero {
  background: url("/images/slider/xgc-vibe-bg.webp") center/cover no-repeat !important;
  position: relative;
  color: #fff;
  min-height: 60vh;
  width: 100%;
  overflow-x: hidden;
}
.vibe-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}
.vibe-hero .container,
.vibe-hero .text-block {
  position: relative;
  z-index: 2;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.vibe-hero .row,
.vibe-hero [class^="col-"] {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.vibe-hero .subtitle,
.vibe-hero h2 {
  color: var(--xgc-gold);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.vibe-hero p {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 100%;
  box-sizing: border-box;
}

/* --- Mobile Responsive Enhancements --- */
@media (max-width: 767.98px) {
  .vibe-hero {
    min-height: 40vh;
    padding: 2rem 0 !important;
  }
  .vibe-hero .container {
    padding: 0 8px !important;
    max-width: 100vw;
  }
  .vibe-hero .row,
  .vibe-hero [class^="col-"] {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100vw !important;
  }
  .vibe-hero .subtitle,
  .vibe-hero h2 {
    font-size: 1.2rem;
    line-height: 1.3;
    word-break: break-word;
  }
  .vibe-hero h2 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }
  .vibe-hero p {
    font-size: 1.06rem;
    margin-bottom: 1.2rem;
    padding: 0 2px !important;
  }
}


/* section#subheader.hero-news */
section#subheader.hero-news {
  position: relative;
  background-color: transparent !important;
  background-image: url("../images/background/hero-news.webp") !important;
  background-size: cover;
  background-position: center;
  min-height: 60vh;
}
section#subheader.hero-news::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.hero-news .container {
  position: relative;
  z-index: 2;
}
.hero-news .subtitle,
.hero-news h2 {
  margin-bottom: 0.5rem;
}

/* ----------------------------------------------
   6. Utility & Team styles
   ---------------------------------------------- */
.hover-zoom {
  transition: transform 0.3s ease;
}
.hover-zoom:hover {
  transform: scale(1.04);
}
.team-photo {
  width: 180px;
  height: 180px;
  object-fit: cover;
  display: inline-block;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
.team-photo:hover {
  filter: none;
}

/* ----------------------------------------------
   7. Timeline responsive layout
   ---------------------------------------------- */
.site-timeline-content .de-timeline-article {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 0 0 2rem;
}
.site-timeline-content .de-timeline-article.odd {
  flex-direction: row;
}
.site-timeline-content .de-timeline-article.even {
  flex-direction: row-reverse;
}
.site-timeline-content .de-timeline-article .year__ {
  flex: 0 0 60px;
  text-align: center;
  float: none;
}
.site-timeline-content .de-timeline-article .content-right {
  flex: 1;
}

/* Remove legacy floats/widths from style.css */
.site-timeline-content .de-timeline-article .content-left-container,
.site-timeline-content .de-timeline-article .content-right-container,
.site-timeline-content .de-timeline-article .site-center-line {
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.site-timeline-content .de-timeline-article .site-center-line {
  display: none !important;
  position: static !important;
}

@media (max-width: 768px) {
  .vibe-hero {
    min-height: 70vh;
    padding: 60px 15px;
  }
  #subheader.hero-news {
    padding: 150px 0 80px;
    min-height: 40vh;
    background-position: center;
  }
  .site-timeline-content .de-timeline-article,
  .site-timeline-content .de-timeline-article.even,
  .site-timeline-content .de-timeline-article.odd {
    flex-direction: column;
  }
  .site-timeline-content .de-timeline-article .year__ {
    flex: none;
    width: auto;
    text-align: left;
    margin-bottom: 0.5rem;
  }
  .site-timeline-content .de-timeline-article .content-left-container,
  .site-timeline-content .de-timeline-article .content-right-container {
    margin-bottom: 1rem;
  }
}

@media (max-width: 576px) {
  .vibe-hero {
    padding: 4rem 1rem;
    text-align: left;
  }
}
/* ----------------------------------------------
   8. Address with flag icon
   ---------------------------------------------- */
.address-list {
    list-style: none;   /* remove default bullets */
    padding: 0;
    margin: 0;
}

.address-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    margin: 0.5em 0;
}

.address-list img { width: 1.2em; height: auto; }



/* End of custom.css */