/* ICS header controls (accessibility button, language globe menu), accessibility panel, text size, reduce motion.
   Scope: header 243 (#brx-header, #brxe-v9qqfj WPML switcher, #brxe-0u3y67 desktop CTA). Tokens only.
   Literal values only where no token exists: icon and knob sizes (1.625rem, 1.25rem), 1px dividers from --border-ui,
   16px viewport edge (2rem total). */

:root {
  --header-control-h: 3rem;
  --header-control-h-m: 2.75rem;
}

/* 1. Text size. Base 100% is the browser default (no px), so system font settings still apply. */
html[data-ics-text='1'] { font-size: 112.5%; }
html[data-ics-text='2'] { font-size: 125%; }
html[data-ics-text='3'] { font-size: 150%; }

/* 2. Reduce motion: explicit switch, or OS preference unless switched off ('off'). */
html[data-ics-motion='reduce'] *,
html[data-ics-motion='reduce'] *::before,
html[data-ics-motion='reduce'] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-ics-motion='off']) *,
  html:not([data-ics-motion='off']) *::before,
  html:not([data-ics-motion='off']) *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* 3. Shared square control (accessibility trigger and language trigger). One height token; min-* so text can scale. */
html body #brx-header .ics-hc--a11y {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
html body #brx-header .ics-hc__btn,
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: var(--header-control-h);
  min-height: var(--header-control-h);
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--neutral-850);
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
}
html body #brx-header .ics-hc__btn:hover,
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:hover {
  background: var(--neutral-100) !important;
}
html body #brx-header .ics-hc__btn:active,
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:active {
  background: var(--neutral-100) !important;
  filter: brightness(.92);
}
/* Open (menu or panel shown): filled dark with a light icon, clearly different from hover. Listed last so it wins. */
html body #brx-header .ics-hc__btn[aria-expanded='true'],
html body #ics-a11y-toggle[aria-expanded='true'],
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle[aria-expanded='true'] {
  background: var(--neutral-850) !important;
  color: var(--neutral-50);
}
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle[aria-expanded='true']::before {
  background-color: var(--neutral-50);
}
html body #brx-header .ics-hc__btn svg {
  width: 1.625rem;
  height: 1.625rem;
  flex: none;
}

/* 4. Language trigger: globe. WPML VI/EN text is visually hidden; the accessible name comes from aria-label set by JS. */
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle .wpml-ls-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle::before {
  content: '';
  display: block;
  width: 1.625rem;
  height: 1.625rem;
  background-color: var(--neutral-850);
  -webkit-mask: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%271.8%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%2712%27%20cy=%2712%27%20r=%279%27/%3E%3Cpath%20d=%27M3%2012h18M12%203c2.5%202.6%203.8%205.6%203.8%209s-1.3%206.4-3.8%209c-2.5-2.6-3.8-5.6-3.8-9S9.5%205.6%2012%203z%27/%3E%3C/svg%3E) center / contain no-repeat;
          mask: url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%271.8%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%2712%27%20cy=%2712%27%20r=%279%27/%3E%3Cpath%20d=%27M3%2012h18M12%203c2.5%202.6%203.8%205.6%203.8%209s-1.3%206.4-3.8%209c-2.5-2.6-3.8-5.6-3.8-9S9.5%205.6%2012%203z%27/%3E%3C/svg%3E) center / contain no-repeat;
}
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle::after {
  display: none;
}
html:root body #brxe-v9qqfj#brxe-v9qqfj {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
}
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown {
  display: flex;
  align-items: center;
  width: auto;
  min-width: 0;
  max-width: none;
}
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown > ul,
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown > ul > li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-item {
  position: relative;
}

/* 5. Language menu card: same white card, radius and pink offset shadow as the accessibility panel. Moved to <body>
   by assets/js/ics-a11y.js and placed with fixed coordinates (under the globe, inside 16px margins). Hidden by [hidden]. */
html body .ics-lang-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1004;
  box-sizing: border-box;
  display: block;
  width: max-content;
  min-width: 12.5rem;
  max-width: calc(100vw - 2rem);
  margin: 0;
  padding: var(--sp-2xs) var(--sp-m);
  list-style: none;
  background: var(--yellow-0);
  color: var(--neutral-850);
  border: 0;
  border-radius: var(--radius-m);
  box-shadow: var(--sp-2xs) var(--sp-2xs) 0 var(--ics-pink-brand);
  transition: none;
  animation: none;
}
html body .ics-lang-menu[hidden] {
  display: none !important;
}
html body .ics-lang-menu .ics-lang-item {
  margin: 0;
  padding: 0;
  list-style: none;
}
html body .ics-lang-menu .ics-lang-item + .ics-lang-item {
  border-top: 1px solid var(--border-separator);
}
html body .ics-lang-menu .ics-lang-row {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-xs);
  width: 100%;
  min-height: 3rem;
  font-family: 'EB Garamond', serif;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--neutral-850);
  text-decoration: none;
}
html body .ics-lang-menu .ics-lang-row:hover {
  color: var(--ics-pink-brand);
}
html body .ics-lang-menu .ics-lang-flag {
  display: block;
  width: 1.75rem;
  height: 1.25rem;
  margin: 0;
  flex: none;
  object-fit: contain;
}
html body .ics-lang-menu .ics-lang-name {
  display: inline;
  flex: 1 1 auto;
}
html body .ics-lang-menu .ics-lang-check {
  display: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  flex: none;
}
html body .ics-lang-menu .ics-lang-row[aria-current='true'] .ics-lang-check {
  display: block;
}
/* The legacy WPML sub-menu stays hidden inside the header if the list was not moved (no language data). */
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown .wpml-ls-sub-menu:not(.ics-lang-menu) {
  display: none;
}

/* 6. Desktop CTA and header row: the same 48px height as the two controls. */
@media (min-width: 992px) {
  html:root body #brx-header #brxe-0u3y67.brxe-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    min-height: var(--header-control-h);
    height: auto;
  }
  html:root body #brx-header #brxe-v9qqfj {
    height: var(--header-control-h);
  }
}

/* 7. Mobile (<= 991px): language, accessibility and burger share 44px. Order: logo, language, accessibility, burger. */
@media (max-width: 991px) {
  html body #brx-header #ics-a11y-toggle {
    order: -1;
  }
  html body #brx-header .ics-hc__btn,
  html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
    min-width: var(--header-control-h-m);
    min-height: var(--header-control-h-m);
  }
  html body #brxe-noa29x .bricks-mobile-menu-toggle {
    min-width: var(--header-control-h-m);
    min-height: var(--header-control-h-m);
  }
}

/* 8. Accessibility panel: white card, pink offset shadow, separate from the main menu. The hidden attribute always wins.
   Position is set by assets/js/ics-a11y.js: mobile = the header bar's left/right, desktop = under the button. */
.ics-a11y-panel[hidden],
.ics-a11y-row[hidden],
.ics-read-ctrls[hidden] {
  display: none !important;
}
.ics-a11y-panel {
  position: fixed;
  z-index: 1003;
  left: var(--sp-l);
  right: var(--sp-l);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--sp-2xs) var(--sp-m);
  background: var(--yellow-0);
  color: var(--neutral-850);
  border-radius: var(--radius-m);
  box-shadow: var(--sp-2xs) var(--sp-2xs) 0 var(--ics-pink-brand);
  transition: none;
  animation: none;
}
@media (min-width: 992px) {
  .ics-a11y-panel {
    left: auto;
    right: var(--sp-l);
    width: 21.25rem;
  }
}
.ics-a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-s);
  min-height: 3.5rem;
}
.ics-a11y-row + .ics-a11y-row,
.ics-read-status + .ics-a11y-row {
  border-top: 1px solid var(--border-separator);
}
.ics-a11y-label {
  font-family: 'EB Garamond', serif;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
}
.ics-a11y-ctrls {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.ics-a11y-tb {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 3rem;
  padding: 0 var(--sp-xs);
  border: 1px solid var(--border-ui);
  border-radius: var(--radius-m);
  background: var(--yellow-0);
  color: var(--neutral-850);
  font-family: var(--ff-mono);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.ics-a11y-tb:disabled {
  opacity: .35;
  cursor: default;
}
.ics-a11y-tb[aria-pressed='true'] {
  background: var(--neutral-850);
  color: var(--yellow-0);
}
.ics-a11y-tb--icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.ics-a11y-switch {
  position: relative;
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex: none;
}
.ics-a11y-switch::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.75rem;
  height: 1.625rem;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border: 1px solid var(--border-ui);
  border-radius: 1rem;
  background: var(--yellow-0);
}
.ics-a11y-switch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: .1875rem;
  width: 1.25rem;
  height: 1.25rem;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--neutral-850);
}
.ics-a11y-switch[aria-checked='true']::before {
  background: var(--neutral-850);
  border-color: var(--neutral-850);
}
.ics-a11y-switch[aria-checked='true']::after {
  left: calc(100% - 1.4375rem);
  background: var(--yellow-500);
}

/* 9. Visually hidden (live region): .ics-sr is an alias of .ics-sr-only in ics-utilities.css (H97). */

/* 10. Focus ring for all new controls: 2px pink. */
html body #brx-header .ics-hc__btn:focus-visible,
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:focus-visible,
html body .ics-lang-menu .ics-lang-row:focus-visible,
.ics-a11y-panel button:focus-visible {
  outline: 2px solid var(--ics-pink-brand);
  outline-offset: 2px;
}

/* 11. Old header read-aloud trigger (uploads/ics-a11y/a11y-read.js) is duplicated by the panel button. It stays in the DOM and
   its click handler still runs (element.click()); it is removed from view and from the tab order. */
html body button.ics-a11y-tts {
  display: none !important;
}

/* P59 (2026-11-05): language + accessibility header buttons are square and use the CTA visual height token
   --ics-hdr-cta-h (ics-header-nav.css P53), so all three header controls are equal at every text-scale and width.
   Icon = 50% of the box. Touch area: invisible vertical padding to 44px (same expression as the CTA) + matching negative margin,
   so no layout space is used; background-clip paints only the visual box. !important so text-scale 2-3 pins (ics-textscale.css) do not win. */
:root {
  --ics-hc-visual: var(--ics-hdr-cta-h, min(calc(var(--header-control-h) * 0.75), 3rem));
  --ics-hc-icon: calc(var(--ics-hc-visual) * 0.5);
  --ics-hc-hit-y: max(0px, calc((2.75rem - var(--ics-hc-visual)) / 2));
  --ics-hc-hit-x: 6px;
  --ics-hc-border-w: 1px;
  --ics-hc-opacity: 0.2;
}
html:root body #brx-header #ics-a11y-toggle,
html:root body #brx-header .ics-hc__btn,
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle,
html:root body .wpml-floating-language-switcher .wpml-ls-item-toggle {
  box-sizing: border-box !important;
  width: var(--ics-hc-visual) !important;
  height: var(--ics-hc-visual) !important;
  min-width: var(--ics-hc-visual) !important;
  min-height: var(--ics-hc-visual) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: var(--ics-hc-border-w) solid var(--neutral-850) !important;
  opacity: var(--ics-hc-opacity, 0.2) !important;
}
html:root body #brx-header #ics-a11y-toggle svg,
html:root body #brx-header .ics-hc__btn svg {
  width: var(--ics-hc-icon) !important;
  height: var(--ics-hc-icon) !important;
}
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle::before,
html:root body .wpml-floating-language-switcher .wpml-ls-item-toggle::before {
  width: var(--ics-hc-icon) !important;
  height: var(--ics-hc-icon) !important;
}

/* P59 + H87 hit area: transparent ::after on each trigger, absolutely positioned, no layout space, no visual change. 36px visual squares get a 44x44 target: inset is measured from the padding box (1px border inside), so -5px = 44px on both axes; neighbour hit areas stay 4px apart. */
html:root body #brx-header #ics-a11y-toggle::after,
html:root body #brx-header .ics-hc__btn::after,
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle::after,
html:root body .wpml-floating-language-switcher .wpml-ls-item-toggle::after {
  content: '';
  display: block !important;
  position: absolute;
  inset: -5px;
  width: auto;
  height: auto;
  border: 0;
  opacity: 1;
  background: transparent;
  box-shadow: none;
}

/* P81 (2026-11-05): owner asked for one opacity on the whole control (border + icon), not a separate border colour.
   Default: opacity --ics-hc-opacity (0.2). Hover, keyboard focus (focus ring fully visible), :active and open: opacity 1. */
html:root body #brx-header #ics-a11y-toggle:hover,
html:root body #brx-header #ics-a11y-toggle:focus-visible,
html:root body #brx-header #ics-a11y-toggle:active,
html:root body #brx-header #ics-a11y-toggle[aria-expanded='true'],
html:root body #brx-header .ics-hc__btn:hover,
html:root body #brx-header .ics-hc__btn:focus-visible,
html:root body #brx-header .ics-hc__btn:active,
html:root body #brx-header .ics-hc__btn[aria-expanded='true'],
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:hover,
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:focus-visible,
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:active,
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle[aria-expanded='true'],
html:root body .wpml-floating-language-switcher .wpml-ls-item-toggle:hover,
html:root body .wpml-floating-language-switcher .wpml-ls-item-toggle:focus-visible,
html:root body .wpml-floating-language-switcher .wpml-ls-item-toggle:active,
html:root body .wpml-floating-language-switcher .wpml-ls-item-toggle[aria-expanded='true'] {
  opacity: 1 !important;
}

/* H81 header utility buttons state (2026-11-05): language + accessibility squares.
   Hover tint only with a fine pointer; touch and tap never keep a hover/active tint.
   Black fill only while the menu or panel is open (aria-expanded=true), cleared by ics-a11y.js on close.
   Focus shows the outline ring only, never a background. */
html body #brx-header #ics-a11y-toggle,
html body #brx-header .ics-hc__btn,
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
  -webkit-tap-highlight-color: transparent;
}
@media not all and (hover: hover) and (pointer: fine) {
  html body #brx-header #ics-a11y-toggle:hover,
  html body #brx-header .ics-hc__btn:hover,
  html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:hover,
  html body #brx-header #ics-a11y-toggle:active,
  html body #brx-header .ics-hc__btn:active,
  html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:active {
    background: transparent !important;
    filter: none !important;
  }
}
@media (hover: hover) and (pointer: fine) {
  html body #brx-header #ics-a11y-toggle:hover,
  html body #brx-header .ics-hc__btn:hover,
  html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:hover {
    background: var(--neutral-100) !important;
  }
}
html body #brx-header #ics-a11y-toggle[aria-expanded='true'],
html body #brx-header .ics-hc__btn[aria-expanded='true'],
html:root body #brxe-v9qqfj#brxe-v9qqfj .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle[aria-expanded='true'] {
  background: var(--neutral-850) !important;
  color: var(--neutral-50);
}