/* Bikurey Hasade site: tokens, reset, layout model and widget styles.
   Per-element design values live in /css/el/<doc-id>.css (generated by scripts/styles.mjs).
   Breakpoints: mobile <= 767px, tablet 768-1024px, desktop >= 1025px. */

/* ---------- Tokens ---------- */
:root {
  --color-primary: #d54930;
  --color-secondary: #222222;
  --color-text: #707070;
  --color-accent: #14a348;
  --color-ba90683: #b8d232;
  --color-3c3fa38: #ebe7e1;
  --color-9fe5d07: #f4efe9;
  --font-primary-family: 'Rubik';
  --font-primary-weight: bold;
  --font-secondary-family: 'Rubik';
  --font-secondary-weight: 400;
  --font-text-family: 'Rubik';
  --font-text-weight: 400;
  --font-accent-family: 'Rubik';
  --font-accent-weight: 500;
  --widget-spacing: 20px;
}

/* ---------- Reset ---------- */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  margin-block: 0.5rem 1rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
p { margin-block: 0; }
p:not(:last-child) { margin-block-end: 0.9rem; }
a { background-color: transparent; color: #c36; text-decoration: none; }
a:hover, a:active { color: #336; }
b, strong { font-weight: bolder; }
img { border-style: none; height: auto; max-width: 100%; }
figure { margin: 0; }
ul, ol { margin-block: 0; }
button, input, select, textarea { font-family: inherit; font-size: 1rem; line-height: 1.5; margin: 0; }
html, body { overflow-x: hidden; }
.screen-only {
  position: absolute; top: -10000em; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* Emoji images (inline, sized to the surrounding text, as WordPress renders them) */
.doc img.emoji {
  display: inline;
  width: 1em;
  height: 1em;
  max-width: none;
  margin: 0 0.07em;
  padding: 0;
  border: none;
  box-shadow: none;
  background: none;
  vertical-align: -0.1em;
}

/* ---------- Layout model: document > section > container > column > widget-wrap > widget ---------- */
.doc *, .doc *::before, .doc *::after { box-sizing: border-box; }
.doc img { border: none; border-radius: 0; box-shadow: none; height: auto; max-width: 100%; }
.doc a { text-decoration: inherit; }

.section { position: relative; }
.section > .container { display: flex; margin-inline: auto; position: relative; }
.section.section-boxed > .container { max-width: 1140px; }
.section.section-items-top > .container { align-items: flex-start; }
.section.section-items-middle > .container { align-items: center; }
.section.section-items-bottom > .container { align-items: flex-end; }
.section.section-items-stretch > .container { align-items: stretch; }
.section.section-height-min-height > .container::after { content: ''; min-height: inherit; }
.background-overlay { position: absolute; inset: 0; }
/* Background scroll effect (driven by /js/site.js) */
.motion-effects-container { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.motion-effects-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(var(--translateY, 0px));
  will-change: transform;
}

.column { display: flex; position: relative; min-height: 1px; }
.column-gap-default > .column > .element-populated { padding: 10px; }
.column-gap-no > .column > .element-populated { padding: 0; }
.widget-wrap { display: flex; flex-wrap: wrap; align-content: flex-start; position: relative; width: 100%; }
.widget-wrap > .element { width: 100%; }

.widget { position: relative; }
.widget:not(:last-child) { margin-block-end: var(--widget-spacing); }
.widget:not(:last-child).absolute,
.widget:not(:last-child).widget__width-auto,
.widget:not(:last-child).widget__width-initial { margin-block-end: 0; }
.widget-wrap .element.widget__width-auto,
.widget-wrap .element.widget__width-initial { max-width: 100%; }
.element.absolute { position: absolute; z-index: 1; }

@media (min-width: 768px) {
  .col-10 { width: 10%; } .col-12 { width: 12.5%; } .col-14 { width: 14.285%; } .col-16 { width: 16.666%; }
  .col-20 { width: 20%; } .col-25 { width: 25%; } .col-30 { width: 30%; } .col-33 { width: 33.333%; }
  .col-40 { width: 40%; } .col-50 { width: 50%; } .col-60 { width: 60%; } .col-66 { width: 66.666%; }
  .col-70 { width: 70%; } .col-75 { width: 75%; } .col-80 { width: 80%; } .col-83 { width: 83.333%; }
  .col-90 { width: 90%; } .col-100 { width: 100%; }
}
@media (max-width: 1024px) {
  .section > .container { flex-wrap: wrap; }
  .widget-wrap .element.widget-tablet__width-auto,
  .widget-wrap .element.widget-tablet__width-initial { max-width: 100%; }
}
@media (max-width: 767px) {
  .column { width: 100%; }
  .widget-wrap .element.widget-mobile__width-auto,
  .widget-wrap .element.widget-mobile__width-initial { max-width: 100%; }
  .reverse-mobile > .container > :nth-child(1) { order: 10; }
  .reverse-mobile > .container > :nth-child(2) { order: 9; }
  .reverse-mobile > .container > :nth-child(3) { order: 8; }
  .reverse-mobile > .container > :nth-child(4) { order: 7; }
  .reverse-mobile > .container > :nth-child(5) { order: 6; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .reverse-tablet > .container > :nth-child(1) { order: 10; }
  .reverse-tablet > .container > :nth-child(2) { order: 9; }
  .reverse-tablet > .container > :nth-child(3) { order: 8; }
}

/* Visibility per breakpoint */
@media (min-width: 1025px) { .doc .hidden-desktop { display: none; } }
@media (min-width: 768px) and (max-width: 1024px) { .doc .hidden-tablet { display: none; } }
@media (max-width: 767px) { .doc .hidden-mobile, .doc .hidden-phone { display: none; } }

/* ---------- Alignment helpers ---------- */
.align-center { text-align: center; }
.align-left { text-align: left; }
.align-right { text-align: right; }
.align-justify .button { width: 100%; }
@media (max-width: 1024px) {
  .tablet-align-center { text-align: center; }
  .tablet-align-left { text-align: left; }
  .tablet-align-right { text-align: right; }
  .tablet-align-justify .button { width: 100%; }
}
@media (max-width: 767px) {
  .mobile-align-center { text-align: center; }
  .mobile-align-left { text-align: left; }
  .mobile-align-right { text-align: right; }
  .mobile-align-justify .button { width: 100%; }
}

/* ---------- Widgets ---------- */
.heading-title { margin: 0; padding: 0; line-height: 1; }
.heading-title a { color: inherit; font-size: inherit; line-height: inherit; }

.button {
  display: inline-block;
  line-height: 1;
  text-align: center;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 3px;
  background-color: #69727d;
  color: #fff;
  fill: #fff;
  transition: all 0.3s;
  cursor: pointer;
}
.button:hover, .button:focus, .button:visited { color: #fff; }
.button-content-wrapper { display: flex; flex-direction: row; justify-content: center; gap: 5px; }
.button-text { display: inline-block; }
.button span { text-decoration: inherit; }

.widget-image { text-align: center; }
.widget-image a { display: inline-block; }
.widget-image img { display: inline-block; vertical-align: middle; }
.widget-image .wp-caption { margin: 0; }
.widget-image-caption { display: block; margin-block: 0; font-size: 1rem; line-height: 1.4; }
.widget-image .widget-container, .widget-theme-site-logo .widget-container { line-height: 0; }
.widget-image .widget-image-caption { line-height: 1.4; }

.widget-divider { --divider-border-style: none; --divider-border-width: 1px; --divider-color: #0c0d0e; }
.widget-divider .divider { display: flex; padding-block: 15px; }
.widget-divider .divider-separator {
  display: flex;
  margin: 0;
  direction: ltr;
  border-block-start: var(--divider-border-width) var(--divider-border-style) var(--divider-color);
}

/* Image box: picture beside (desktop) or above (mobile) the text */
.image-box-wrapper .image-box-img { display: inline-block; }
.image-box-wrapper .image-box-img img { display: block; width: 100%; }
/* Scoped to the content block so it beats the generic `p:not(:last-child)` spacing rule.
   (Titles keep the heading reset's top margin, as on the live site.) */
.image-box-content .image-box-description { margin: 0; }
.position-top .image-box-wrapper { display: block; text-align: center; flex-direction: unset; }
/* "left"/"right" are physical sides: in RTL the row runs right-to-left, so the order flips.
   Picture and text both shrink to share the row (the picture's width setting is its flex basis). */
@media (min-width: 768px) {
  .position-left .image-box-wrapper,
  .position-right .image-box-wrapper { display: flex; }
  .position-left .image-box-wrapper { flex-direction: row; }
  .position-right .image-box-wrapper { flex-direction: row-reverse; }
  [dir='rtl'] .position-left .image-box-wrapper { flex-direction: row-reverse; }
  [dir='rtl'] .position-right .image-box-wrapper { flex-direction: row; }
  .position-left .image-box-content, .position-right .image-box-content { width: 100%; }
  .vertical-align-top .image-box-wrapper { align-items: flex-start; }
  .vertical-align-middle .image-box-wrapper { align-items: center; }
  .vertical-align-bottom .image-box-wrapper { align-items: flex-end; }
}
@media (max-width: 767px) {
  .image-box-wrapper { text-align: center; }
  .image-box-img { margin-inline: auto !important; }
}

/* Icon box */
.icon-box-wrapper { display: flex; flex-direction: column; align-items: center; text-align: center; }
.position-left .icon-box-wrapper { flex-direction: row; }
.position-right .icon-box-wrapper { flex-direction: row-reverse; }
[dir='rtl'] .position-left .icon-box-wrapper { flex-direction: row-reverse; }
[dir='rtl'] .position-right .icon-box-wrapper { flex-direction: row; }
.icon-box-content .icon-box-title { margin: 0; }
.icon-box-content .icon-box-description { margin: 0; }
.icon-box-icon { display: inline-flex; flex: 0 0 auto; line-height: 1; }
.widget-icon-box .icon { display: inline-block; line-height: 1; transition: all 0.3s; font-size: 50px; color: #69727d; }
.widget-icon-box .icon i { width: 1em; height: 1em; position: relative; display: block; }
.widget-icon-box .icon i::before { position: absolute; left: 50%; transform: translateX(-50%); }
.view-framed .icon { padding: 0.5em; border: 3px solid; }
.view-stacked .icon { padding: 0.5em; background-color: #69727d; color: #fff; }
.shape-circle .icon { border-radius: 50%; }

/* Icon list */
.icon-list-items { list-style: none; margin: 0; padding: 0; }
.icon-list-item { display: flex; align-items: center; margin: 0; padding: 0; position: relative; font-size: inherit; }
.icon-list-item > a { display: flex; align-items: center; width: 100%; font-size: inherit; }
.icon-list-icon {
  display: flex;
  position: relative;
  top: var(--icon-vertical-offset, initial);
  align-self: var(--icon-vertical-align, center);
}
.icon-list-icon i {
  width: 1.25em;
  font-size: var(--e-icon-list-icon-size, 14px);
  text-align: var(--e-icon-list-icon-align, center);
  transition: color 0.3s;
}
.icon-list-text { align-self: center; padding-inline-start: 5px; }

/* Gallery: grid or justified rows, laid out by /js/site.js */
.gallery__container { display: flex; flex-wrap: wrap; gap: var(--gallery-gap, 12px); }
.gallery-item {
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 6px #00000029;
}
.gallery-item__image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  border: var(--image-border-width, 0) solid var(--image-border-color, transparent);
  transition: transform var(--image-transition-duration, 0.8s);
}
/* Like the carousel, the live gallery switches layouts at its own thresholds: desktop from 1024px,
   tablet from 767px (one pixel off the rest of the site's breakpoints). */
.gallery__container { --gallery-columns: var(--gc, 4); --gallery-gap: var(--gg, 10px); }
@media (max-width: 1023px) { .gallery__container { --gallery-columns: var(--gc-t, 2); --gallery-gap: var(--gg-t, 10px); } }
@media (max-width: 766px) { .gallery__container { --gallery-columns: var(--gc-m, 1); --gallery-gap: var(--gg-m, 10px); } }
.gallery--grid .gallery-item { width: calc((100% - (var(--gallery-columns) - 1) * var(--gallery-gap)) / var(--gallery-columns)); }
/* Grid tiles: the live tiles measure exactly 2px taller than the aspect ratio of their width. */
.gallery--grid .gallery-item { container-type: inline-size; }
.gallery--grid .gallery-item__image { height: calc(100cqw * var(--gallery-ratio, 0.6667) + 2px); }
.gallery--justified .gallery-item { flex: 0 0 auto; }

/* Media carousel (own implementation, /js/site.js) */
.carousel { position: relative; overflow: hidden; width: 100%; touch-action: pan-y; }
/* The live carousel switches layouts at its own thresholds: desktop from 1024px, tablet from 767px. */
.carousel { --carousel-per-view: var(--cp, 3); --carousel-gap: var(--cg, 10px); }
@media (max-width: 1023px) { .carousel { --carousel-per-view: var(--cp-t, 2); --carousel-gap: var(--cg-t, 10px); } }
@media (max-width: 766px) { .carousel { --carousel-per-view: var(--cp-m, 1); --carousel-gap: var(--cg-m, 10px); } }
.carousel__track { display: flex; gap: var(--carousel-gap); height: 100%; will-change: transform; }
.carousel__slide { flex: 0 0 calc((100% - (var(--carousel-per-view) - 1) * var(--carousel-gap)) / var(--carousel-per-view)); height: 100%; }
.carousel-image {
  height: 100%;
  background-size: cover;
  background-position: center center;
}

/* Form */
.form-fields-wrapper { display: flex; flex-wrap: wrap; }
.field-group { display: flex; flex-wrap: wrap; align-items: center; }
.field-group.column { min-height: 0; }
.field-group .field, .field-textual {
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 15px;
  line-height: 1.4;
  color: #1f2124;
  background-color: #fff;
  border: 1px solid #69727d;
  border-radius: 3px;
  flex-grow: 1;
}
.field-group .field:focus { outline: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.field-type-submit { display: flex; }
.form .button { border: none; padding-block: 0; min-height: 40px; width: 100%; }
.form .button-content-wrapper { display: flex; justify-content: center; }
@media (min-width: 768px) {
  .field-group.col-25 { width: 25%; } .field-group.col-33 { width: 33.333%; }
  .field-group.col-50 { width: 50%; } .field-group.col-100 { width: 100%; }
}
@media (max-width: 767px) {
  .field-group { width: 100%; }
}
/* Honeypot: invisible to people, filled in by bots (such submissions are dropped). */
.form-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-message { width: 100%; margin-block-start: 10px; font-size: 1em; }
.form-message:empty { margin: 0; } /* takes no space until there is a message */
.form-message.is-success { color: #5cb85c; }
.form-message.is-error { color: #d9534f; }

/* Map embed */
.custom-embed { line-height: 0; }
.widget-google_maps iframe { height: 300px; width: 100%; border: 0; }

/* ---------- Navigation ---------- */
.nav-menu { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; position: relative; line-height: 1; }
.nav-menu li { display: block; position: relative; list-style: none; margin: 0; padding: 0; line-height: 20px; }
.nav-menu a { display: flex; align-items: center; line-height: 20px; padding: 10px 20px; transition: 0.4s; }
.nav-menu--main .nav-menu > li { display: flex; }
.nav-menu--main .nav-menu a { padding: 13px 20px; }
.nav-menu__align-center .nav-menu { justify-content: center; margin-inline: auto; }
/* Dropdowns open on hover or keyboard focus, with a short fade. The design leaves a 20px gap between an
   item and its dropdown, so an invisible bridge covers the gap, and on leaving the menu a dropdown stays
   for 0.3s, then fades out, closing at 0.5s (the live site's menu closes after 0.5s). Moving to a
   neighbouring item closes the other dropdown at once, so two never overlap.
   Like the live site, a dropdown is as wide as its longest option (at least 10em). */
.nav-menu--main .sub-menu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 10em;
  width: max-content;
  max-width: 1000px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s 0.3s, visibility 0s 0.5s;
}
.nav-menu--main .sub-menu::before { content: ''; position: absolute; inset-inline: 0; bottom: 100%; height: 24px; }
.nav-menu--main .menu-item-has-children:hover > .sub-menu,
.nav-menu--main .menu-item-has-children:focus-within > .sub-menu,
.nav-menu--main .menu-item-has-children.is-open > .sub-menu {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s, visibility 0s;
}
.nav-menu--main .nav-menu:hover > li:not(:hover) > .sub-menu { visibility: hidden; opacity: 0; transition: none; }
/* Separators between options come from the design (a 1px bottom border); zero the other sides so every
   option box is the same size. */
.nav-menu li { border-width: 0; }
.nav-menu--main .sub-menu a { padding: 13px 20px; white-space: nowrap; }
.nav-menu--dropdown a { justify-content: space-between; }
.nav-menu__text-align-aside .nav-menu--dropdown a { justify-content: flex-start; }
.nav-menu--dropdown .nav-menu, .nav-menu--dropdown.nav-menu__container .nav-menu { flex-direction: column; }
.sub-arrow { display: flex; align-items: center; padding-inline-start: 10px; line-height: 1; }

/* Footer menus are always shown as a vertical list */
.widget-nav-menu:not(.nav-menu--toggle) .nav-menu--dropdown.nav-menu__container { display: block; }

/* Burger toggle and its dropdown */
.menu-toggle {
  display: none;
  width: max-content;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0 solid;
  border-radius: 3px;
  padding: 0.25em;
  font-size: var(--nav-menu-icon-size, 22px);
  color: #33373d;
  background-color: rgba(0, 0, 0, 0.05);
}
.menu-toggle svg { width: 1em; height: 1em; fill: currentColor; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded='true'] .icon-open { display: none; }
.menu-toggle[aria-expanded='true'] .icon-close { display: block; }
.nav-menu--toggle .nav-menu--dropdown.nav-menu__container {
  visibility: hidden;
  overflow: hidden;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s, visibility 0.3s;
}
.nav-menu--toggle .menu-toggle[aria-expanded='true'] + .nav-menu--dropdown.nav-menu__container {
  visibility: visible;
  max-height: 100vh;
  overflow-y: auto;
  transform: scaleY(1);
}
.nav-menu--stretch .nav-menu__container.nav-menu--dropdown { position: absolute; z-index: 9997; }
.nav-menu--dropdown .sub-menu { position: static; display: none; padding: 0; margin: 0; list-style: none; }
.nav-menu--dropdown .menu-item-has-children.is-open > .sub-menu { display: block; }
@media (min-width: 1025px) {
  .nav-menu--dropdown-tablet .menu-toggle,
  .nav-menu--dropdown-tablet .nav-menu--dropdown.nav-menu__container { display: none; }
}
@media (max-width: 1024px) {
  .nav-menu--dropdown-tablet .nav-menu--main { display: none; }
  .nav-menu--dropdown-tablet .menu-toggle { display: flex; }
}

/* ---------- Sticky header ---------- */
/* /js/site.js pins the header and leaves a hidden copy of it in the flow, so the gap it leaves
   is sized by the same CSS as the header itself (never by a JS measurement). */
.is-sticky { position: fixed !important; top: 0; inset-inline: 0; width: 100%; }
.sticky-spacer { visibility: hidden; }

/* ---------- Entrance animations ---------- */
.anim-pending { visibility: hidden; }
.animated { animation-duration: 1.25s; animation-fill-mode: both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
.fadeIn { animation-name: fadeIn; }
.fadeInUp { animation-name: fadeInUp; }
.fadeInLeft { animation-name: fadeInLeft; }
.fadeInRight { animation-name: fadeInRight; }
@media (prefers-reduced-motion: reduce) {
  .anim-pending { visibility: visible; }
  .animated { animation: none; }
}

/* ---------- Not-found page (src/pages/404.astro) ---------- */
.not-found-section { padding: 120px 20px; }
.not-found { text-align: center; color: var(--color-text); font-family: var(--font-text-family), sans-serif; }
.not-found .heading-title { color: var(--color-primary); font-size: 42px; margin-block-end: 24px; }
.not-found p:not(:last-child) { margin-block-end: 20px; }
.not-found a:not(.button) { color: var(--color-accent); text-decoration: underline; }

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -100px;
  z-index: 100000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #fff;
  color: #222;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  font-size: 16px;
}
.skip-link:focus { top: 16px; outline: 2px solid #1b9143; }

/* Toolbar rules are prefixed with .kit so the design's general button style (uneven 14px/20px padding)
   can't override them: that padding pushed the icon off-centre. */
.kit .a11y-toggle {
  position: fixed;
  bottom: 24px;
  inset-inline-start: 24px;
  z-index: 99999;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 10px;
  border: 0;
  background-color: var(--color-accent);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.kit .a11y-toggle svg { width: 30px; height: 30px; fill: currentColor; display: block; }
.a11y-panel {
  position: fixed;
  bottom: 92px;
  inset-inline-start: 24px;
  z-index: 99999;
  width: 280px;
  padding: 16px;
  background: #fff;
  color: #222;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  font-family: var(--font-text-family), sans-serif;
  font-size: 16px;
}
.a11y-panel[hidden] { display: none; }
.kit .a11y-panel h2 { margin: 0 0 12px; font-size: 22px; line-height: 1.2; color: var(--color-primary); }
.kit .a11y-panel button {
  display: block;
  width: 100%;
  margin-block-end: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background-color: var(--color-accent);
  color: #fff;
  text-align: start;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}
/* An option that is on: dark background, white text, check mark (readable, unlike a light highlight). */
.kit .a11y-panel button[aria-pressed='true'] { background-color: var(--color-secondary); }
.kit .a11y-panel button[aria-pressed='true']::after { content: ' ✓'; }
/* Filters go on the root element: on <body> they would turn the pinned header and this toolbar into
   scrolling elements (a filtered element becomes the containing block of its fixed descendants). */
html.a11y-big-text body { zoom: 1.2; }
html.a11y-contrast { filter: contrast(1.6); }
html.a11y-grayscale { filter: grayscale(1); }
html.a11y-contrast.a11y-grayscale { filter: contrast(1.6) grayscale(1); }
html.a11y-links a { text-decoration: underline !important; }
html.a11y-readable body, html.a11y-readable .doc * { font-family: Arial, Helvetica, sans-serif !important; }
html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after {
  animation: none !important;
  transition: none !important;
}
html.a11y-no-motion .anim-pending { visibility: visible; }