/* ==========================================================================
   notech_subtheme — Accessibility & inclusiveness layer
   WCAG 2.1 AA target. Loaded after the base notech theme.
   ========================================================================== */

/* --- Font-scale: scales rem-based sizes AND px-based content via zoom ---
   The :root font-size handles rem-anchored type.
   `zoom` on <body> catches the Gavias chrome which uses fixed-px sizes.
   The accessibility toolbar itself is excluded so its hit targets stay 44px.
   --------------------------------------------------------------------- */
:root { font-size: 100%; }
html[data-font-scale="sm"] { font-size: 87.5%; }
html[data-font-scale="lg"] { font-size: 112.5%; }
html[data-font-scale="xl"] { font-size: 125%; }

html[data-font-scale="sm"] body { zoom: 0.9; }
html[data-font-scale="lg"] body { zoom: 1.15; }
html[data-font-scale="xl"] body { zoom: 1.3; }

html[data-font-scale="sm"] .a11y-toolbar { zoom: calc(1 / 0.9); }
html[data-font-scale="lg"] .a11y-toolbar { zoom: calc(1 / 1.15); }
html[data-font-scale="xl"] .a11y-toolbar { zoom: calc(1 / 1.3); }

/* --- Header collision guards when font-scaling --------------------------
   The Gavias header splits 88% / 12% between the menu side and the
   right-side icons (search, quick-side). When the page zooms up, the
   menu items widen but the right column doesn't, so the search icon
   ends up sitting over the last menu item. Reallocate the split at
   each scale step so icons always have breathing room.
   --------------------------------------------------------------------- */
html[data-font-scale="lg"] .header-one__left  { flex: 0 0 82% !important; }
html[data-font-scale="lg"] .header-one__right { flex: 0 0 18% !important; }

html[data-font-scale="xl"] .header-one__left  { flex: 0 0 76% !important; }
html[data-font-scale="xl"] .header-one__right { flex: 0 0 24% !important; }

/* Keep the search icon and quick-side icon from crashing on top of the
   menu when zoomed: drop the negative-ish margin Gavias uses between
   sibling icons in __right at higher scales. */
html[data-font-scale="lg"] .header-one__right > div,
html[data-font-scale="xl"] .header-one__right > div {
  margin-right: 12px !important;
}

/* The mobile breakpoint pins __right to 100px wide — too tight when
   zoomed. Let it grow proportionally. */
@media (max-width: 1024px) {
  html[data-font-scale="lg"] .header-one__right {
    flex: 0 0 130px !important;
    width: 130px !important;
  }
  html[data-font-scale="xl"] .header-one__right {
    flex: 0 0 150px !important;
    width: 150px !important;
  }
}

/* --- Focus visibility ---------------------------------------------------- */
*:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
  box-shadow: 0 0 0 1px #1a1a1a;
}
:focus:not(:focus-visible) { outline: none; }

/* --- Visually hidden helpers (matches Drupal base-theme skip link) -------- */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  /* Pin a known-AA color so automated tools (WAVE) don't report a false
     positive contrast error on text that no human ever sees. */
  color: #000 !important;
  background-color: transparent !important;
}
.visually-hidden.focusable:focus,
.visually-hidden.focusable:active,
.sr-only.focusable:focus,
.sr-only.focusable:active {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- High-contrast theme -------------------------------------------------
   Uses the universal selector with `!important` to override Gavias's
   inline `customize_css` admin colors. Excludes the a11y toolbar and a
   handful of decorative elements that must keep their look.
   ----------------------------------------------------------------------- */
html[data-theme="high-contrast"],
html[data-theme="high-contrast"] body {
  background: #000 !important;
  color: #fff !important;
}

html[data-theme="high-contrast"] *:not(.a11y-toolbar):not(.a11y-toolbar *):not(svg):not(svg *):not(i.fa):not(i.fas):not(i.fab):not(i.far):not(i.fal):not(i.fad):not([class*="icon"]):not([class*="gv-icon"]):not(.icon-container):not(.socials a i):not(.social-copyright a i) {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html[data-theme="high-contrast"] a,
html[data-theme="high-contrast"] a *,
html[data-theme="high-contrast"] a:visited,
html[data-theme="high-contrast"] a:visited * {
  color: #ffff00 !important;
  text-decoration: underline !important;
}
html[data-theme="high-contrast"] a:hover,
html[data-theme="high-contrast"] a:hover *,
html[data-theme="high-contrast"] a:focus,
html[data-theme="high-contrast"] a:focus * {
  color: #00ffff !important;
  background-color: #000 !important;
}

html[data-theme="high-contrast"] h1,
html[data-theme="high-contrast"] h2,
html[data-theme="high-contrast"] h3,
html[data-theme="high-contrast"] h4,
html[data-theme="high-contrast"] h5,
html[data-theme="high-contrast"] h6 {
  color: #fff !important;
}

html[data-theme="high-contrast"] input,
html[data-theme="high-contrast"] select,
html[data-theme="high-contrast"] textarea,
html[data-theme="high-contrast"] button {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
html[data-theme="high-contrast"] button:hover,
html[data-theme="high-contrast"] button:focus,
html[data-theme="high-contrast"] .btn:hover,
html[data-theme="high-contrast"] .btn:focus {
  background: #fff !important;
  color: #000 !important;
}

html[data-theme="high-contrast"] #header,
html[data-theme="high-contrast"] header,
html[data-theme="high-contrast"] .header-default,
html[data-theme="high-contrast"] .header-one,
html[data-theme="high-contrast"] .header-one__main,
html[data-theme="high-contrast"] .header-one__content,
html[data-theme="high-contrast"] .header-one__main-inner,
html[data-theme="high-contrast"] .topbar,
html[data-theme="high-contrast"] .topbar__one,
html[data-theme="high-contrast"] .topbar__content,
html[data-theme="high-contrast"] .gva-navigation,
html[data-theme="high-contrast"] .gva_menu,
html[data-theme="high-contrast"] .menu,
html[data-theme="high-contrast"] .sub-menu,
html[data-theme="high-contrast"] .menu-item,
html[data-theme="high-contrast"] .gv-sticky-menu,
html[data-theme="high-contrast"] .breadcrumbs,
html[data-theme="high-contrast"] .breadcrumb-links,
html[data-theme="high-contrast"] .breadcrumb {
  background: #000 !important;
  background-image: none !important;
  border-color: #fff !important;
}

html[data-theme="high-contrast"] .header-one__main {
  border-top: 1px solid #fff !important;
  border-bottom: 1px solid #fff !important;
}

/* --- Icons in high-contrast mode ----------------------------------------
   The universal flattening rule hides icons (FontAwesome glyphs, SVGs,
   social bubbles) against the black page. Re-color them bright yellow
   with outlined bubbles so they read clearly.
   ---------------------------------------------------------------------- */

/* FontAwesome and other icon-font glyphs: bright yellow, no background. */
html[data-theme="high-contrast"] i.fa,
html[data-theme="high-contrast"] i.fas,
html[data-theme="high-contrast"] i.fab,
html[data-theme="high-contrast"] i.far,
html[data-theme="high-contrast"] i.fal,
html[data-theme="high-contrast"] i.fad,
html[data-theme="high-contrast"] [class*="gv-icon"],
html[data-theme="high-contrast"] [class^="icon-"],
html[data-theme="high-contrast"] [class*=" icon-"] {
  color: #ffff00 !important;
  background: transparent !important;
  -webkit-text-fill-color: #ffff00 !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* SVG icons: stroke + fill to yellow. */
html[data-theme="high-contrast"] svg,
html[data-theme="high-contrast"] svg * {
  fill: #ffff00 !important;
  stroke: #ffff00 !important;
  color: #ffff00 !important;
  background: transparent !important;
}

/* Social-icon bubbles. Gavias paints platform color on the <i> element
   (not the <a>), via rules like `.socials a i.fa-facebook { background:
   #3b5998 }`. Force the bubble to a black circle with a 2px yellow ring
   and a yellow glyph at the same specificity. */
html[data-theme="high-contrast"] .socials a i,
html[data-theme="high-contrast"] .social-copyright a i,
html[data-theme="high-contrast"] .gva-social a i,
html[data-theme="high-contrast"] [class*="social"] a i {
  background: #000 !important;
  background-color: #000 !important;
  background-image: none !important;
  border: 2px solid #ffff00 !important;
  border-radius: 50% !important;
  color: #ffff00 !important;
  -webkit-text-fill-color: #ffff00 !important;
  box-sizing: border-box !important;
}
html[data-theme="high-contrast"] .socials a:hover i,
html[data-theme="high-contrast"] .socials a:focus i,
html[data-theme="high-contrast"] .social-copyright a:hover i,
html[data-theme="high-contrast"] .social-copyright a:focus i,
html[data-theme="high-contrast"] [class*="social"] a:hover i,
html[data-theme="high-contrast"] [class*="social"] a:focus i {
  background: #ffff00 !important;
  background-color: #ffff00 !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  opacity: 1 !important;
}

/* Search icon, quick-side icon, dropdown carets, mobile hamburger. */
html[data-theme="high-contrast"] .search-one__icon,
html[data-theme="high-contrast"] .quick-side-icon .icon,
html[data-theme="high-contrast"] .quick-side-icon .qicon,
html[data-theme="high-contrast"] .icaret {
  background: #000 !important;
  color: #ffff00 !important;
  border-color: #ffff00 !important;
}
html[data-theme="high-contrast"] .search-one__icon:hover,
html[data-theme="high-contrast"] .quick-side-icon .icon:hover,
html[data-theme="high-contrast"] .quick-side-icon .qicon:hover {
  background: #ffff00 !important;
  color: #000 !important;
}

/* Mobile hamburger bars: visible yellow stripes. */
html[data-theme="high-contrast"] #menu-bar span {
  background: #ffff00 !important;
}

/* --- Gavias "icon-container" circles (homepage feature blocks) ----------
   Markup: <span class="icon-container ... color-theme"><span class="icon
   gv-icon-419"></span></span>. Make the circle border yellow with a
   solid black fill, and the glyph inside bright yellow. */
html[data-theme="high-contrast"] .icon-container {
  background: #000 !important;
  background-color: #000 !important;
  border: 2px solid #ffff00 !important;
  color: #ffff00 !important;
  -webkit-text-fill-color: #ffff00 !important;
}
html[data-theme="high-contrast"] .icon-container .icon,
html[data-theme="high-contrast"] .icon-container [class*="gv-icon"],
html[data-theme="high-contrast"] .icon-container [class^="icon-"],
html[data-theme="high-contrast"] .icon-container [class*=" icon-"] {
  color: #ffff00 !important;
  -webkit-text-fill-color: #ffff00 !important;
  background: transparent !important;
  background-color: transparent !important;
  opacity: 1 !important;
}

/* Small section-label decorative dots ("Get involved", "Discover more",
   "Resources" small green dots above the section headings). They use
   pseudo-elements that the universal rule can't override; just brighten
   the wrapper's text color. */
html[data-theme="high-contrast"] .section-title,
html[data-theme="high-contrast"] .section-title *,
html[data-theme="high-contrast"] .gva-section-title,
html[data-theme="high-contrast"] .gva-section-title * {
  color: #ffff00 !important;
  -webkit-text-fill-color: #ffff00 !important;
}
html[data-theme="high-contrast"] .section-title::before,
html[data-theme="high-contrast"] .section-title::after,
html[data-theme="high-contrast"] .gva-section-title::before,
html[data-theme="high-contrast"] .gva-section-title::after {
  background: #ffff00 !important;
  background-color: #ffff00 !important;
  color: #ffff00 !important;
}

/* Section headings (Opportunities, Resources, …) should also be white
   with a yellow underline on hover for clarity. */
html[data-theme="high-contrast"] h1,
html[data-theme="high-contrast"] h2,
html[data-theme="high-contrast"] h3,
html[data-theme="high-contrast"] h4,
html[data-theme="high-contrast"] h5,
html[data-theme="high-contrast"] h6,
html[data-theme="high-contrast"] .title,
html[data-theme="high-contrast"] .title * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-theme="high-contrast"] img,
html[data-theme="high-contrast"] video {
  filter: contrast(1.1) !important;
  background: transparent !important;
}

html[data-theme="high-contrast"] .video-play,
html[data-theme="high-contrast"] [class*="play-btn"] {
  background: #000 !important;
  border: 2px solid #ffff00 !important;
}

html[data-theme="high-contrast"] .a11y-toolbar {
  background: #000 !important;
  border: 2px solid #fff !important;
}
html[data-theme="high-contrast"] .a11y-toolbar button {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
html[data-theme="high-contrast"] .a11y-toolbar button:hover,
html[data-theme="high-contrast"] .a11y-toolbar button:focus,
html[data-theme="high-contrast"] .a11y-toolbar button[aria-pressed="true"] {
  background: #ffff00 !important;
  color: #000 !important;
  border-color: #ffff00 !important;
}

/* --- Accessibility toolbar -----------------------------------------------
   Bottom-right floating placement — out of the topbar's lane so it never
   collides with the language switcher or social icons. Conventional for
   a11y toolbars on EU / gov.uk style sites.
   ----------------------------------------------------------------------- */
.a11y-toolbar {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1050;
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  background: #1a1a1a;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.a11y-toolbar button {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: #2a2a2a;
  border: 1px solid #4a4a4a;
  border-radius: 4px;
  cursor: pointer;
}
.a11y-toolbar button:hover,
.a11y-toolbar button:focus-visible {
  background: #ffbf47;
  color: #1a1a1a;
  border-color: #ffbf47;
}
.a11y-toolbar button[aria-pressed="true"] {
  background: #ffbf47;
  color: #1a1a1a;
  border-color: #ffbf47;
}

/* Close (×) button — slightly different look so it's not confused with controls. */
.a11y-toolbar__close {
  min-width: 32px !important;
  width: 32px;
  padding: 4px !important;
  font-size: 22px !important;
  margin-left: 4px;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #ffbf47 !important;
}
.a11y-toolbar__close:hover,
.a11y-toolbar__close:focus-visible {
  background: #ffbf47 !important;
  color: #1a1a1a !important;
}

/* Hidden state */
.a11y-toolbar[hidden] { display: none !important; }

/* Opener pill — small floating button that replaces the toolbar when closed. */
.a11y-toolbar__opener {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1050;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  background: #ffbf47;
  border: 2px solid #1a1a1a;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.a11y-toolbar__opener:hover,
.a11y-toolbar__opener:focus-visible {
  background: #1a1a1a;
  color: #ffbf47;
  border-color: #ffbf47;
}
.a11y-toolbar__opener[hidden] { display: none !important; }

@media (max-width: 768px) {
  .a11y-toolbar {
    bottom: 8px;
    right: 8px;
    left: 8px;
    justify-content: center;
  }
  .a11y-toolbar__opener {
    bottom: 8px;
    right: 8px;
  }
}

/* High-contrast theme override for the opener */
html[data-theme="high-contrast"] .a11y-toolbar__opener {
  background: #000 !important;
  color: #ffff00 !important;
  border-color: #ffff00 !important;
}

/* --- Alt-format aside on content pages ----------------------------------- */
.alt-formats {
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid #ccc;
  border-left: 4px solid #ffbf47;
  background: #fafafa;
}
.alt-formats h2 {
  margin-top: 0;
  font-size: 1.25rem;
}
.alt-formats ul {
  margin: 0;
  padding-left: 1.25rem;
}
.alt-formats audio {
  display: block;
  width: 100%;
  margin: 0.5rem 0;
}

/* --- Form a11y polish ---------------------------------------------------- */
.form-required::after {
  content: " *";
  color: #c00;
}
[aria-invalid="true"] {
  border-color: #c00 !important;
  box-shadow: 0 0 0 1px #c00 inset;
}
.form-item .description,
.form-item .help-block {
  display: block;
  margin-top: 4px;
  font-size: 0.875rem;
  color: #555;
}
.form-item .form-item--error-message,
.form-item .invalid-feedback {
  display: block;
  margin-top: 4px;
  font-size: 0.875rem;
  color: #c00;
  font-weight: 600;
}

/* ==========================================================================
   WCAG 2.1 AA contrast & font-size baselines
   Overrides Gavias defaults that fail WAVE checks on the default theme.
   Only the high-contrast mode block above overrides these further.
   ========================================================================== */

/* Override Gavias's pale --body-color (#797F89 = 3.94:1 on white, fails AA).
   #595F69 against white = 4.71:1 (AA pass for normal text). */
:root,
html:not([data-theme="high-contrast"]) {
  --body-color: #595F69;
}

/* `.text-gray-light` was #E6E6E6 (1.3:1 on white — severe contrast failure).
   Promote to a usable mid-gray (4.6:1). */
html:not([data-theme="high-contrast"]) .text-gray-light,
html:not([data-theme="high-contrast"]) .text-gray-light > a {
  color: #595F69 !important;
}

/* `.text-gray` paragraphs (the body of the homepage feature blocks) need
   to be readable against the white card backgrounds. */
html:not([data-theme="high-contrast"]) .text-gray,
html:not([data-theme="high-contrast"]) .text-gray * {
  color: #3a3f48 !important;
}

/* Generic body text on the white card background. Excludes elements that
   inherit a light foreground from a known dark/colored container (hero
   banners, dark cards, footer, copyright bar, member-card overlays).
   Adding more selectors to the not-list when new dark containers appear
   is cheaper than untangling specificity later. */
html:not([data-theme="high-contrast"]) body,
html:not([data-theme="high-contrast"]) p:not(.university-text *):not(.team-member *):not(.member-info *):not(.gva-team *):not(.gsc-team *):not([class*="hero"] *):not([class*="banner"] *):not([class*="dark-bg"] *):not([class*="bg-dark"] *):not([class*="bg-purple"] *):not(.header-title *):not(.footer *):not(.copyright *):not(.mobat2-page *):not(.box-text-white *):not(.contact-block *):not(.style-white *):not(.box-hover *):not(.team-content *),
html:not([data-theme="high-contrast"]) li:not(.university-text *):not(.team-member *):not(.member-info *):not(.gva-team *):not(.gsc-team *):not([class*="hero"] *):not([class*="banner"] *):not([class*="dark-bg"] *):not([class*="bg-dark"] *):not([class*="bg-purple"] *):not(.header-title *):not(.footer *):not(.copyright *):not(.mobat2-page *):not(.box-text-white *):not(.contact-block *):not(.style-white *):not(.box-hover *):not(.team-content *),
html:not([data-theme="high-contrast"]) .desc:not(.team-member *):not(.member-info *):not(.gva-team *):not(.gsc-team *),
html:not([data-theme="high-contrast"]) .description:not(.team-member *):not(.member-info *):not(.gva-team *):not(.gsc-team *) {
  color: #3a3f48;
}

/* Belt-and-braces: any element whose direct parent (or near-ancestor) has
   a dark or purple background should keep a light foreground. The earlier
   contrast rule painted body text dark-gray which made these unreadable
   against the existing dark containers. */

/* University partner pages: `.university-text` is a deep-purple banner
   block that wraps the title and a short body paragraph. */
html:not([data-theme="high-contrast"]) .university-text,
html:not([data-theme="high-contrast"]) .university-text *,
html:not([data-theme="high-contrast"]) .university-text p,
html:not([data-theme="high-contrast"]) .university-text h1,
html:not([data-theme="high-contrast"]) .university-text h2,
html:not([data-theme="high-contrast"]) .university-text h3,
html:not([data-theme="high-contrast"]) .university-text a {
  color: #ffffff !important;
}

/* Team member cards (student council, etc.) — `.gsc-team .info` is the
   purple panel under each photo. Name + role + university all need to
   be light. */
html:not([data-theme="high-contrast"]) .gsc-team .info,
html:not([data-theme="high-contrast"]) .gsc-team .info *,
html:not([data-theme="high-contrast"]) .gsc-team .team-name,
html:not([data-theme="high-contrast"]) .gsc-team .team-position,
html:not([data-theme="high-contrast"]) .gsc-team .team-university,
html:not([data-theme="high-contrast"]) .gva-team .info,
html:not([data-theme="high-contrast"]) .gva-team .info *,
html:not([data-theme="high-contrast"]) .box-hover,
html:not([data-theme="high-contrast"]) .box-hover *,
html:not([data-theme="high-contrast"]) .team-content,
html:not([data-theme="high-contrast"]) .team-content * {
  color: #ffffff !important;
}

/* Generic Gavias dark-bg helpers. */
html:not([data-theme="high-contrast"]) [class*="bg-dark"] p,
html:not([data-theme="high-contrast"]) [class*="bg-dark"] li,
html:not([data-theme="high-contrast"]) [class*="bg-dark"] span,
html:not([data-theme="high-contrast"]) [class*="bg-purple"] p,
html:not([data-theme="high-contrast"]) [class*="bg-purple"] li,
html:not([data-theme="high-contrast"]) [class*="bg-purple"] span {
  color: #ffffff !important;
}

/* Topbar (the purple strip above the main header). Editor places a small
   "contact@theneurotech.eu" item there as a <li>; my body-text rule was
   painting it dark gray on the purple. Force the whole topbar contents
   to a light foreground. */
html:not([data-theme="high-contrast"]) .topbar,
html:not([data-theme="high-contrast"]) .topbar *,
html:not([data-theme="high-contrast"]) .topbar__one,
html:not([data-theme="high-contrast"]) .topbar__one *,
html:not([data-theme="high-contrast"]) .topbar__two,
html:not([data-theme="high-contrast"]) .topbar__two *,
html:not([data-theme="high-contrast"]) .topbar-info,
html:not([data-theme="high-contrast"]) .topbar-info *,
html:not([data-theme="high-contrast"]) .topbar-info__item,
html:not([data-theme="high-contrast"]) .topbar-info__item *,
html:not([data-theme="high-contrast"]) .region__topbar,
html:not([data-theme="high-contrast"]) .region__topbar *,
html:not([data-theme="high-contrast"]) .region__topbar-right,
html:not([data-theme="high-contrast"]) .region__topbar-right * {
  color: #ffffff !important;
}
/* Topbar links: white with underline-on-hover (don't auto-underline since
   the topbar is small and underlines clutter the row). */
html:not([data-theme="high-contrast"]) .topbar a,
html:not([data-theme="high-contrast"]) .topbar-info a {
  color: #ffffff !important;
  text-decoration: none;
}
html:not([data-theme="high-contrast"]) .topbar a:hover,
html:not([data-theme="high-contrast"]) .topbar a:focus,
html:not([data-theme="high-contrast"]) .topbar-info a:hover,
html:not([data-theme="high-contrast"]) .topbar-info a:focus {
  color: #ffffff !important;
  text-decoration: underline;
}

/* EXCEPTION to the white-topbar rules above: the "Log in" item is a button,
   not plain topbar text — an inline theme rule gives it its own light
   background (`.user-login-menu .gva_menu > li > a { background:#ddd }`).
   The blanket `.region__topbar-right *` white above was repainting its
   label white, leaving white-on-#ddd at **1.36:1** — effectively invisible.
   (The inline rule's own `color:#000` was correct; it just lost the cascade
   to an `!important`.)

   Fixed by giving the button a solid indigo fill with white text, which
   both restores contrast (14.5:1) and makes it read as the button it is.
   Scoped to this one menu so the rest of the topbar keeps its white text. */
html:not([data-theme="high-contrast"]) .user-login-menu .gva_menu > li > a,
html:not([data-theme="high-contrast"]) .region__topbar-right .user-login-menu .gva_menu > li > a {
  background: #260387 !important;   /* white on indigo — 14.5:1, AAA */
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  border-radius: 4px !important;
  padding: 2px 12px !important;
  text-decoration: none !important;
  font-weight: 600;
}
html:not([data-theme="high-contrast"]) .user-login-menu .gva_menu > li > a:hover,
html:not([data-theme="high-contrast"]) .user-login-menu .gva_menu > li > a:focus {
  background: #ffffff !important;
  color: #260387 !important;        /* indigo on white — 14.5:1, AAA */
  border-color: #ffffff !important;
  text-decoration: none !important;
}
html:not([data-theme="high-contrast"]) .user-login-menu .gva_menu > li > a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Same class of bug on the Google-Translate language selector. It renders as
   a real <select class="gt_selector"> with a white background, so the blanket
   white-topbar rule painted its text white too — white-on-white, **1:1**, i.e.
   the control and every language option were invisible.

   <option> elements are painted by the OS, not the page, so the fix has to
   set the colour on the <select> AND on the options explicitly. */
html:not([data-theme="high-contrast"]) .region__topbar-right select,
html:not([data-theme="high-contrast"]) .topbar select,
html:not([data-theme="high-contrast"]) select.gt_selector {
  color: #1b1930 !important;        /* near-black on white — 15.9:1, AAA */
  background-color: #ffffff !important;
  border: 1px solid #cfd0e8 !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  font-size: 12px;
  cursor: pointer;
}
html:not([data-theme="high-contrast"]) .region__topbar-right select option,
html:not([data-theme="high-contrast"]) .topbar select option,
html:not([data-theme="high-contrast"]) select.gt_selector option {
  color: #1b1930 !important;
  background-color: #ffffff !important;
}
html:not([data-theme="high-contrast"]) select.gt_selector:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Gavias page-builder custom-content blocks marked by the editor with a
   `box-text-white` modifier — these sit on dark/colored backgrounds. The
   class is the editor's contract that everything inside should be white.
   The 8-dimensions page and several others use this. */
html:not([data-theme="high-contrast"]) .box-text-white,
html:not([data-theme="high-contrast"]) .box-text-white *,
html:not([data-theme="high-contrast"]) .style-white,
html:not([data-theme="high-contrast"]) .style-white * {
  color: #ffffff !important;
}

/* The Contact Us page custom block is on a purple gradient background;
   the editor wraps it with .contact-block and expects light foreground. */
html:not([data-theme="high-contrast"]) .contact-block,
html:not([data-theme="high-contrast"]) .contact-block *,
html:not([data-theme="high-contrast"]) .el-custom-content.contact-block,
html:not([data-theme="high-contrast"]) .el-custom-content.contact-block * {
  color: #ffffff !important;
}

/* Inverse: where editors mark a block `box-text-black`, ensure text stays
   readable on a light card even if a parent contrast rule fires. */
html:not([data-theme="high-contrast"]) .box-text-black,
html:not([data-theme="high-contrast"]) .box-text-black p,
html:not([data-theme="high-contrast"]) .box-text-black li,
html:not([data-theme="high-contrast"]) .box-text-black h1,
html:not([data-theme="high-contrast"]) .box-text-black h2,
html:not([data-theme="high-contrast"]) .box-text-black h3 {
  color: #1a1a1a !important;
}

/* Page-builder hero / banner blocks (Gavias gsc_heading on a colored bg
   often gets a "color-white" or "style-white" modifier — but editors
   sometimes forget it). Force white text on these wrappers as a safety
   net when they sit inside a dark container. */
html:not([data-theme="high-contrast"]) .header-title-purple,
html:not([data-theme="high-contrast"]) .header-title-purple *,
html:not([data-theme="high-contrast"]) .header-banner,
html:not([data-theme="high-contrast"]) .header-banner * {
  color: #ffffff !important;
}

/* Default link color: #161c26 is fine on white (16.5:1), keep it. But links
   appearing on dark/colored backgrounds (footer, hero, dark cards) need the
   theme to recolor them. */
html:not([data-theme="high-contrast"]) .footer a,
html:not([data-theme="high-contrast"]) .footer p,
html:not([data-theme="high-contrast"]) .copyright a,
html:not([data-theme="high-contrast"]) .copyright p {
  color: #fff;
}

/* Underline links inside body text only — keeps link affordance without
   triggering WAVE's "underlined text on a non-link" alert when editor
   wrappers add the same style. Excludes utility/icon-only links and the
   menu chrome where Gavias provides its own indicator. */
html:not([data-theme="high-contrast"]) .field--type-text-with-summary a,
html:not([data-theme="high-contrast"]) .field--type-text-long a,
html:not([data-theme="high-contrast"]) .node__content p a,
html:not([data-theme="high-contrast"]) .node__content li a,
html:not([data-theme="high-contrast"]) .block-content p a,
html:not([data-theme="high-contrast"]) .block-content li a,
html:not([data-theme="high-contrast"]) article p a,
html:not([data-theme="high-contrast"]) article li a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Editor-pasted <span style="text-decoration:underline"> wrappers around
   links cause WAVE "Underlined text" alerts — the span is not a link
   itself, only its child <a> is. Strip the span underline (the <a>
   inside keeps it via the body-text rule above). */
html:not([data-theme="high-contrast"]) p span[style*="text-decoration"],
html:not([data-theme="high-contrast"]) li span[style*="text-decoration"],
html:not([data-theme="high-contrast"]) .field--type-text-with-summary span[style*="text-decoration"],
html:not([data-theme="high-contrast"]) .field--type-text-long span[style*="text-decoration"],
html:not([data-theme="high-contrast"]) .node__content span[style*="text-decoration"],
html:not([data-theme="high-contrast"]) .block-content span[style*="text-decoration"] {
  text-decoration: none !important;
}

/* ==========================================================================
   WCAG 1.4.4 — minimum readable font size (≥ 14px)
   Catches Gavias copyright/footer/small-text rules that drop to 10–12px.
   ========================================================================== */

html:not([data-theme="high-contrast"]) body,
html:not([data-theme="high-contrast"]) p,
html:not([data-theme="high-contrast"]) li,
html:not([data-theme="high-contrast"]) td,
html:not([data-theme="high-contrast"]) th,
html:not([data-theme="high-contrast"]) input,
html:not([data-theme="high-contrast"]) textarea,
html:not([data-theme="high-contrast"]) select,
html:not([data-theme="high-contrast"]) button,
html:not([data-theme="high-contrast"]) .desc,
html:not([data-theme="high-contrast"]) .description,
html:not([data-theme="high-contrast"]) .small,
html:not([data-theme="high-contrast"]) small,
html:not([data-theme="high-contrast"]) .copyright,
html:not([data-theme="high-contrast"]) .footer,
html:not([data-theme="high-contrast"]) .footer * {
  font-size: max(14px, 1em);
}

/* The .copyright bar and footer mini-text typically drop to 12px or 13px.
   Explicit floor for those known offenders.

   NOTE ON SCOPE: this 14px floor is a house readability standard, not a WCAG
   requirement — WCAG has no absolute minimum font size (1.4.4 is about text
   scaling to 200%, which these rules do not affect since the floor is a
   lower bound, not a fixed size). It is therefore safe to exempt short,
   non-prose UI labels; see the pill exemption immediately below, which is
   ordered after this block and matched at equal-or-higher specificity. */
html:not([data-theme="high-contrast"]) .copyright,
html:not([data-theme="high-contrast"]) .copyright *,
html:not([data-theme="high-contrast"]) .footer-bottom,
html:not([data-theme="high-contrast"]) .footer-bottom *,
html:not([data-theme="high-contrast"]) .breadcrumb,
html:not([data-theme="high-contrast"]) .breadcrumb *,
html:not([data-theme="high-contrast"]) .event-start-date-front,
html:not([data-theme="high-contrast"]) .event-start-date-front *,
html:not([data-theme="high-contrast"]) .event-date,
html:not([data-theme="high-contrast"]) .event-date *,
html:not([data-theme="high-contrast"]) .post-meta,
html:not([data-theme="high-contrast"]) .post-meta * {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* ==========================================================================
   Pill / tag labels — deliberate exemption from the 14px floor
   ==========================================================================
   Category tags and date badges are short, high-contrast, non-prose labels
   (typically one or two words) that sit beside the content they describe.
   Holding them at body-text size makes them compete with headlines and
   forces multi-word tags to wrap.

   Floor for these is 12px, which stays comfortably legible, keeps well
   clear of the ~9px range where legibility genuinely suffers, and is the
   same size the design system uses for other secondary UI labels.

   Rules for anything exempted here:
     - contrast must be AA or better (these run 12:1+),
     - the label must not be the only carrier of its information,
     - never apply to body copy, headings, links in prose, or form labels.

   The Gavias pill markup is named explicitly rather than via an opt-in
   class, because it comes from view row templates we don't control — a
   JS-added class would flash at 14px before it applied. `.post-categories`
   nests (wrapper > one span per term), so only the innermost spans match;
   the wrapper keeps inheriting normally. These selectors are more specific
   than the floor above AND come later, so they win on both counts.
   `.is-pill` is honoured too, for future markup we do control.

   High-contrast mode is untouched — the html:not(...) prefix means every
   one of these keeps the 14px floor when high-contrast is enabled. */
html:not([data-theme="high-contrast"]) .post-meta .post-categories .post-categories,
html:not([data-theme="high-contrast"]) .post-meta .post-categories .post-categories a,
html:not([data-theme="high-contrast"]) .post-content .event-start-date-front,
html:not([data-theme="high-contrast"]) .post-block .event-start-date-front,
html:not([data-theme="high-contrast"]) .is-pill,
html:not([data-theme="high-contrast"]) .is-pill * {
  font-size: 12px !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   Per-element contrast fixes from WAVE rescan (theneurotech.eu, 2026-06-12)
   Flagged 34 instances across 4 element classes. Force AA-pass colors.
   ========================================================================== */

/* Article date stamps in news cards. */
html:not([data-theme="high-contrast"]) .post-created,
html:not([data-theme="high-contrast"]) .post-created *,
html:not([data-theme="high-contrast"]) .post-meta .post-created {
  color: #3a3f48 !important;       /* 10.5:1 on white — AAA */
  background-color: transparent;
}

/* Small "line" / separator text near news cards. */
html:not([data-theme="high-contrast"]) .line,
html:not([data-theme="high-contrast"]) span.line {
  color: #3a3f48 !important;
  background-color: transparent;
}

/* Milestone counter numbers and their + / % symbols. Often sit on a colored
   accent background; force a strong dark-on-white. The theme places them
   inside .milestone-one__number-inner which keeps its own background. */
html:not([data-theme="high-contrast"]) .milestone-one__number,
html:not([data-theme="high-contrast"]) .milestone-one__symbol,
html:not([data-theme="high-contrast"]) .milestone-one__number-inner .symbol {
  color: #260387 !important;       /* brand purple, 13.6:1 on white */
}

/* When the milestone block uses a dark background, the inner number must
   stay white. Detect via the common Gavias variant classes. */
html:not([data-theme="high-contrast"]) .milestone-one.style-white .milestone-one__number,
html:not([data-theme="high-contrast"]) .milestone-one.style-white .milestone-one__symbol,
html:not([data-theme="high-contrast"]) [class*="bg-dark"] .milestone-one__number,
html:not([data-theme="high-contrast"]) [class*="bg-purple"] .milestone-one__number,
html:not([data-theme="high-contrast"]) [class*="bg-dark"] .milestone-one__symbol,
html:not([data-theme="high-contrast"]) [class*="bg-purple"] .milestone-one__symbol {
  color: #ffffff !important;
}

/* ==========================================================================
   Feature-one cards that hold an ICON instead of a photo
   ==========================================================================
   .feature-one__* is a photo-tile pattern: it stretches the image to the full
   card (`.feature-one__img img {width:100% !important}`), lays a black scrim
   over it, and absolutely-positions a white title along the bottom, with the
   description hidden until hover.

   That works for a photograph. On /emn-page the same component is fed 48x48
   line-art SVGs, so the icon inflates to the full card width, the scrim has
   no photo to darken (leaving flat grey), and the white title lands on light
   grey at roughly 1.9:1 — below the 4.5:1 minimum — overlapping the artwork.

   Every rule below is scoped with :has(img[src$=".svg"]) so it only reaches
   icon cards. Photo tiles are untouched: nodes 120 and 121 (Radboud,
   Universidad Miguel Hernández) use this same component with real .jpg
   images and must keep the original overlay treatment. */
html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]) {
  background: #ffffff;
  border: 1px solid #ece9f6;
  border-radius: 14px;
  padding: 44px 32px;
  height: 100%;
  text-align: center;
  box-shadow: 0 2px 4px rgba(27, 25, 48, 0.04), 0 12px 28px rgba(27, 25, 48, 0.06);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  /* Centre the content block: equal-height stretch would otherwise dump all
     the slack at the bottom (78px on the two short cards), which read as the
     card being unfinished rather than as deliberate breathing room. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Repurpose the photo scrim as a hover overlay. At rest it is transparent
   (the card is white); on hover it fades to near-black and the text flips
   to white. The theme's original used it to darken a photograph, so it was
   always painted and opacity-only; here it must start fully transparent or
   it greys out the white card. */
html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"])::before {
  display: block;
  background: #1b1930;
  opacity: 0;
  border-radius: 14px;
  z-index: 1;
  transition: opacity 0.3s ease;
}

html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]):hover::before {
  opacity: 1;
}

/* Lift the content above the overlay so it stays readable. */
html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]) .feature-one__img,
html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]) .feature-one__title,
html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]) .feature-one__content {
  position: relative;
  z-index: 2;
}

/* Rein the icon in from full-card width back to an icon. The parent theme
   sets width:100% !important, so this needs !important to win. */
/* Seat the icon in a tinted disc. At 58px on a 333px-wide card the bare
   glyph read as small and unanchored; the disc gives it a footprint that
   holds the top of the card. */
html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]) .feature-one__img {
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: #f4f1fd;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: background-color 0.25s ease;
}

html:not([data-theme="high-contrast"]) .feature-one__single .feature-one__img img[src$=".svg"] {
  width: 48px !important;
  height: 48px;
  margin: 0;
  display: block;
}

/* The bottom-anchored white title becomes a normal dark heading in flow. */
html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]) .feature-one__title {
  position: static;
  padding: 0;
  width: auto;
  color: #1b1930;                  /* 17.1:1 measured on white */
  font-size: 21px;
  line-height: 29px;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

/* Reveal the description permanently. The hover reveal is a photo-tile
   affordance: it is unreachable on touch devices, and here it was hiding
   the only explanatory copy on the card. */
html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]) .feature-one__content {
  position: static;
  opacity: 1;
  margin-bottom: 0;
  padding: 0;
  float: none;
  width: auto;
}

/* The duplicate title inside .feature-one__content would now render twice. */
html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]) .feature-one__content-title {
  display: none;
}

html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]) .feature-one__content-desc,
html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]) .feature-one__content-desc p {
  color: #3a3f48;                  /* 10.3:1 on white */
  font-size: 16px;
  line-height: 26px;
}

/* Hover: lift the card instead of swapping title for description. */
html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]):hover {
  border-color: #d9d2f4;
  box-shadow: 0 4px 8px rgba(38, 3, 135, 0.06), 0 18px 40px rgba(38, 3, 135, 0.14);
  transform: translateY(-4px);
}

/* Disc goes light-on-dark so the purple glyph keeps its contrast against
   the overlay. */
html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]):hover .feature-one__img {
  background: #ffffff;
}

/* Text flips to white over the dark overlay. The theme's own hover rules
   slide the title up and fade the description in; both are neutralised
   here because the description is already visible at rest. */
html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]):hover .feature-one__title {
  opacity: 1;
  bottom: auto;
  color: #ffffff;                  /* 15.8:1 on #1b1930 */
}

html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]):hover .feature-one__content-desc,
html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]):hover .feature-one__content-desc p {
  color: #e8e6f2;                  /* 12.9:1 on #1b1930 */
}

html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]):hover .feature-one__content {
  opacity: 1;
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]),
  html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]):hover {
    transition: none;
    transform: none;
  }
}

/* Equal-height cards across the row.

   The builder nests each card as
     .row-wrapper > .gsc-column > .column-inner > .column-content-inner
       > .el-feature-block > .feature-one__single
   and none of those are flex containers, so `height:100%` on the card has
   no stretched parent to measure against and each card just wraps its own
   text. Descriptions differ in length (card 3 wraps to three lines), which
   is what left the cards ragged.

   Make the row a stretch context and have every wrapper down to the card
   pass the full column height through. Scoped to rows that actually hold
   icon cards so other builder rows keep their own layout. */
html:not([data-theme="high-contrast"]) .row-wrapper:has(.feature-one__img img[src$=".svg"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

html:not([data-theme="high-contrast"]) .row-wrapper:has(.feature-one__img img[src$=".svg"]) > .gsc-column:has(.feature-one__img img[src$=".svg"]) {
  display: flex;
  margin-bottom: 30px;        /* gutter between rows when cards wrap */
}

html:not([data-theme="high-contrast"]) .gsc-column:has(.feature-one__img img[src$=".svg"]) > .column-inner,
html:not([data-theme="high-contrast"]) .gsc-column:has(.feature-one__img img[src$=".svg"]) .column-content-inner,
html:not([data-theme="high-contrast"]) .gsc-column .el-feature-block:has(.feature-one__img img[src$=".svg"]),
html:not([data-theme="high-contrast"]) .gsc-column .el-feature-block:has(.feature-one__img img[src$=".svg"]) > .feature-one__single {
  height: 100%;
  width: 100%;
}


/* Side padding on the band that holds the icon cards.

   The builder's .bb-inner carries 30px top/bottom but nothing on the sides,
   and .row-wrapper adds Bootstrap's negative gutter (margin: 0 -15px), so
   the outer cards sat flush against the coloured background with a measured
   0px gap on both edges. 45px here nets ~30px of visible margin once the
   -15px pull is absorbed, matching the band's vertical rhythm. */
html:not([data-theme="high-contrast"]) .gbb-row:has(.feature-one__img img[src$=".svg"]) > .bb-inner {
  padding-left: 45px;
  padding-right: 45px;
}

@media (max-width: 991.98px) {
  html:not([data-theme="high-contrast"]) .gbb-row:has(.feature-one__img img[src$=".svg"]) > .bb-inner {
    padding-left: 35px;
    padding-right: 35px;
  }
}

@media (max-width: 767.98px) {
  html:not([data-theme="high-contrast"]) .feature-one__single:has(.feature-one__img img[src$=".svg"]) {
    padding: 28px 20px 24px;
    margin-bottom: 20px;
  }

  html:not([data-theme="high-contrast"]) .gbb-row:has(.feature-one__img img[src$=".svg"]) > .bb-inner {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* ==========================================================================
   Equal-width CTA buttons — opt in with the class `cta-equal-btn`
   ==========================================================================
   Add `cta-equal-btn` to the Call-to-Action widget's "Extra class name"
   field in the page builder. The field puts the class on the widget
   wrapper (.gsc-call-to-action), not on the <a>, so the button is matched
   as a descendant; the second selector also catches the class landing
   directly on the link, in case a different element type is used.

   .btn-theme is the theme's global button class and sizes to its text, so
   a row of CTAs comes out ragged (measured 154 / 241 / 279px on /emn-page).
   min-width is deliberately NOT set on .btn-theme itself — that would
   stretch every button site-wide, including narrow ones like "Read more"
   in news cards.

   min-width alone does not equalise them: .btn-theme is inline-block, so it
   shrink-wraps its text, and the longest label ("Download student handbook")
   needs 310px of content box at the theme's 45px side padding — wider than
   the 315px .button-action column it sits in. Making the button a block with
   an explicit width removes shrink-to-fit, and trimming the side padding to
   24px lets the longest label fit without wrapping. */
html:not([data-theme="high-contrast"]) .cta-equal-btn .btn-theme,
html:not([data-theme="high-contrast"]) .btn-theme.cta-equal-btn {
  display: block;
  width: 100%;
  max-width: 300px;
  padding-left: 24px;
  padding-right: 24px;
  text-align: center;
  box-sizing: border-box;
}

/* Below ~576px the cap is dropped so the buttons span their stacked column
   rather than leaving a ragged 300px block on a 375px screen.

   The stacked columns sit flush against each other, so full-width buttons
   butt together into one continuous purple slab that reads as a single
   block with three labels. The margin restores the gap that the horizontal
   layout gets for free from the column gutters. */
@media (max-width: 575.98px) {
  html:not([data-theme="high-contrast"]) .cta-equal-btn .btn-theme,
  html:not([data-theme="high-contrast"]) .btn-theme.cta-equal-btn {
    max-width: none;
    width: 100%;
  }

  html:not([data-theme="high-contrast"]) .cta-equal-btn {
    margin-bottom: 14px;
  }

  html:not([data-theme="high-contrast"]) .gsc-column:last-child .cta-equal-btn {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   Admin local-task tabs vs the main-menu dropdowns
   ==========================================================================
   `.block-local-tasks-block` (the View / Edit / Delete / Revisions / Clone
   bar shown to logged-in editors) carries `position:relative; z-index:99`
   from template.css, while the header is only `z-index:9`. The main menu's
   dropdown sets `z-index:999`, but that only competes INSIDE its own
   stacking context — every ancestor up to the header is `z-index:auto`, so
   the whole menu is judged at the header's 9 and loses to the tabs' 99.

   Result: opening About / Get involved / News & Events on any admin-visible
   page drew the submenu BEHIND the tabs bar, hiding its first items.

   Fix: lift the header above the tabs rather than pushing the tabs down —
   the tabs' own 99 still protects it from the rest of the page, and the
   header stays below Drupal's admin toolbar (z-index 500+) and the
   contextual-links pencils, so nothing else is disturbed.
   Anonymous visitors never see the tabs block at all; this only affects
   editors. */
#header,
.header-two,
.gva-header {
  z-index: 120;
}
/* the dropdown itself, so it clears the tabs inside the new context */
#header .gva_menu .sub-menu,
.header-two .gva_menu .sub-menu {
  z-index: 999;
}

/* ==========================================================================
   Front-page local-task tabs
   ==========================================================================
   The general `.drupal-tabs` rule pulls the bar up with `top:-28px`, which
   works on interior pages because the content starts below the header. On the
   front page `.frontpage #page-main-content` adds `padding-top:120px`, so the
   -28px lands the tabs at y≈174 — inside the header band (82–250). With the
   header now at z-index 120 (see the menu-dropdown fix above) the logo paints
   straight over them and the bar becomes invisible.

   There used to be a `.frontpage .drupal-tabs { top:465px }` override in the
   theme's Customize CSS, hard-coded to clear the OLD homepage hero. That value
   was wrong for the new hero and has been removed, so this rule replaces it
   with one that does not depend on the hero's height: sit the bar at the top
   of the content area instead of pulling it up into the header.

   Editors only — the tabs block is never rendered for anonymous visitors. */
/* The general `.drupal-tabs` rule pulls the bar up with `top:-28px`, which on
   the front page lands it inside the header band (the header is absolute and
   overlays the hero). Two earlier attempts fought that with z-index and both
   caused new problems: raising the tabs above the header (130 > 120) put the
   strip in front of the main-menu DROPDOWNS, and either way the bar sat over
   the logo.

   Stop competing. Push the bar clear of the header instead, so it needs no
   z-index at all: the header is 168px tall, so a top offset just past that
   drops the strip into the gap `padding-top:120px` already leaves above the
   hero. The block keeps the theme's own z-index:99, which is below the
   header's 120 — so dropdowns open over the strip, as they should.

   Editors only; the tabs block is never rendered for anonymous visitors. */
.frontpage .drupal-tabs {
  position: relative;
  /* Sits in the gap between the header (ends 250) and the hero headline
     (starts 309). At top:92px the strip ran 294-335 and cut 26px into the
     headline; 48px puts it at 250-291, clear of the logo above (ends 246)
     and the headline below. */
  top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  align-items: center;
  width: auto;
  margin: 0 0 6px;
  padding: 6px 14px;
  background: #fff;
  border: none;
  border-radius: 0 0 6px 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  list-style: none;
}
.frontpage .drupal-tabs li { float: none; margin: 0; }
.frontpage .drupal-tabs a { white-space: nowrap; }

/* ==========================================================================
   Klaro consent notice vs the accessibility toolbar
   ==========================================================================
   The a11y toolbar is fixed bottom-right at z-index 1050. Klaro's notice sits
   at 1000, so the toolbar covered its Accept / Decline buttons — the consent
   choice has to be reachable, and a toolbar must never block it.

   Lift the notice and the settings modal above the toolbar, and shift the
   toolbar up while the notice is on screen so the two do not sit on top of
   each other. `.klaro` is removed from the DOM once a choice is stored, so
   the toolbar returns to its normal position afterwards. */
.klaro .cookie-notice:not(.cookie-modal-notice),
.klaro .cookie-modal {
  z-index: 1100 !important;
}
body:has(.klaro .cookie-notice:not(.cookie-modal-notice)) .a11y-toolbar {
  bottom: 220px;
}
@media (max-width: 767px) {
  body:has(.klaro .cookie-notice:not(.cookie-modal-notice)) .a11y-toolbar {
    bottom: 300px;
  }
}

/* Klaro's "cookie settings" button (lock icon) defaults to bottom-right,
   where the a11y toolbar (z-index 1050) covers it completely. Move it to the
   free bottom-left corner so visitors can always reopen their choices. */
.klaro_toggle_dialog {
  right: auto !important;
  left: 20px !important;
  bottom: 20px !important;
  width: 44px !important;
  height: 44px !important;
  z-index: 1040 !important;
}
/* Up to 768px the a11y toolbar spans the full width of the bottom edge
   (about 66px tall including its gap), so sit the button just above it. */
@media (max-width: 768px) {
  .klaro_toggle_dialog {
    left: 12px !important;
    bottom: 78px !important;
  }
}

/* Klaro settings panel contrast. Its default service titles are mint on
   near-white (1.57:1); "(always required)" and "Powered by Klaro!" are
   #777 (4.29:1). Brand indigo and a darker grey bring them above 4.5:1. */
.klaro .cookie-modal .cm-list-title {
  color: #260387 !important;
}
.klaro .cookie-modal .cm-required,
.klaro .cookie-modal .cm-powered-by a {
  color: #595959 !important;
}