/*
 * intergen.org accessibility fixes. Loaded from Gantry Base Outline > Page Settings > Assets.
 * Findings refer to intergen.org/wcag-audit FINDINGS.md.
 */
/* F-002 (2.4.1): skip link added by custom/js/a11y.js. Off-screen until focused.
   Qualified with html body so the theme's link colours (purple on navy) don't win. */
html body a.ig-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100000;
  padding: 0.75rem 1.25rem;
  background: #090a1e;
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  transform: translateY(-120%);
}
html body a.ig-skip-link:focus {
  transform: none;
  outline: 3px solid #fff;
  outline-offset: -6px;
}

/* F-011 (1.4.3): active breadcrumb was #6c757d on #f7f7f7 (4.38:1); #5c636a gives 5.69:1. */
.mod-breadcrumbs__item.active,
.mod-breadcrumbs__item.active span {
  color: #5c636a;
}

/* F-020 (1.4.3): links on the dark Flipping Cards back face were #9a4398 on #090a1e (3.38:1).
   #bb63b9 is the same hue and saturation, lighter: 5.21:1. */
html body .g-flippingcards-back a,
html body .g-flippingcards-back a:visited {
  color: #bb63b9;
}

/* F-019 (2.4.7): focus indicators for the keyboard flip control added by a11y.js and for the
   back face it moves focus to. The theme's outline rule only covers links. */
.g-flippingcards-button[role="button"] {
  cursor: pointer;
}
.g-flippingcards-button[role="button"]:focus-visible,
.g-flippingcards-back:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* F-012 (1.4.3): theme colours below 4.5:1. Each keeps its hue and moves just far enough to pass.
   Info list descriptions are white at opacity 0.7, which reads as pink on the #9a4398 purple
   sections (3.70:1). Full opacity gives white on purple, 5.78:1. */
html body .g-infolist-item-desc {
  opacity: 1 !important;
}
/* RSForm field text: #9091a2 (3.11:1) -> #6e7084 (4.87:1). */
html body .rsform-input-box,
html body .formContainer .form-control {
  color: #6e7084;
}
/* Content array dates: theme grey at opacity 0.5 (2.06:1). Full opacity restores the theme's own
   #686974, 5.6:1 on white. */
html body .g-array-item-date {
  opacity: 1 !important;
}
/* Inline code: #ff4151 (3.23:1 on #f8f8f8) -> #c8102e. Also fixes the Joomlapedia steps that are
   wrapped in <code>. */
html body code {
  color: #c8102e;
}
/* Green subtitles and article h4 text: #268a6b (4.26:1) -> #238063 (4.84:1). */
html body .g-blockcontent-subcontent-subtitle,
html body .com-content-article__body h4,
html body .com-content-article__body h4 :is(span, em, strong) {
  color: #238063;
}
/* Testimonial meta line: #868686 (3.64:1) -> #727272 (4.81:1). */
html body .tm-meta.jl-text-meta {
  color: #727272;
}
/* Error alert text: #b94a48 on #f6e7e7 (4.23:1) -> #ab4341 (4.85:1). */
html body .alert.alert-error,
html body .alert.alert-error :is(p, div, h4) {
  color: #ab4341;
}
/* Article table headers: #686974 on #e6e6e6 (4.36:1) -> #61626c (4.85:1). */
html body .com-content-article__body th {
  color: #61626c;
}
/* Category list sort links on #d9d9d9: #9a4398 (4.10:1) -> #8a3c88 (4.83:1). */
html body .com-content-category__table th a {
  color: #8a3c88;
}

/* F-016 (1.4.1): links inside headings in article text were told apart by colour alone. Blog
   listing intros are included (h3-h6 only, so the listing's own h2 title links are untouched). */
html body .com-content-article__body :is(h1, h2, h3, h4, h5, h6) a,
html body .com-content-category-blog__item .item-content :is(h3, h4, h5, h6) a {
  text-decoration: underline;
}

/* F-004 (1.3.1, 2.4.6): the homepage hero (custom "genlicious" particle) is now an <h1> via its
   new Heading Level option. The theme styles this hero through h2 selectors, so the same rules are
   repeated for h1. Verified identical computed styles at 390-1920px. */
html body .g-headerlicious .g-headerlicious-header-wrapper.g-headerlicious-header-dock h1.g-headerlicious-header {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: clamp(1.3rem, 9vw, 10rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 15rem;
  letter-spacing: -3px;
  text-align: center;
  text-transform: none;
  text-shadow: 0 1px 0 #c9cfce, 0 2px 0 #bcc2c2, 0 3px 0 #afb6b6,
    0 4px 0 #a4adac, 0 5px 0 #9fa8a7, 0 6px 0 #99a3a2, 0 7px 0 #97a1a0,
    0 8px 0 #949e9d, 0 0 5px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.2),
    0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.2),
    0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.3);
}
html body .g-headerlicious .g-headerlicious-header-wrapper.animate h1 span {
  transform: translate3d(0, 0, 0);
}
html body .g-headerlicious .g-headerlicious-header-wrapper.g-headerlicious-header-dock.animate h1 span.expandMe span,
html body .g-headerlicious .g-headerlicious-header-wrapper.g-headerlicious-header-dock.animate h1 span.loveLetters {
  line-height: 15rem;
  transition: all 0.25s;
}
html body .g-headerlicious .g-headerlicious-header-wrapper.g-headerlicious-header-dock.animate h1 span.expandMe span:hover,
html body .g-headerlicious .g-headerlicious-header-wrapper.g-headerlicious-header-dock.animate h1 span.loveLetters:hover {
  transform: translate3d(0, 0, 0);
  cursor: default;
  font-size: clamp(2rem, 13vw, 12rem) !important;
}
@media (max-width: 47.99rem) {
  html body .g-headerlicious .g-headerlicious-header-wrapper.g-headerlicious-header-dock h1.g-headerlicious-header span.expandMe {
    line-height: normal;
  }
}

/* F-021 (2.5.8): side-menu sub-links were 19px tall with no spacing. A 24px line box meets the
   target size; the theme's line-height was already 23.7px, so the menu barely moves. */
html body .acronymMenu .mod-menu__sub > li > a {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}

/* F-022 (1.4.3): homepage hero tagline was white at 30% alpha on #090a1e (2.6:1; 32px text needs
   3:1). 45% gives 4.49:1. */
html body .g-headerlicious .g-headerlicious-tagline {
  color: rgba(255, 255, 255, 0.45);
}

/* F-009 (2.5.8): Owl dots were 20x20. Grow the hit area to 24x24 without changing the
   visible dot (the inner span keeps its size and is centred). */
.owl-dots .owl-dot {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
