/* Converted from src/components/site/layout/chrome.module.css (CSS Module): local classes are prefixed "layout-chrome__". */
/* Site chrome: header, menu & search overlays, side bar (theme switcher, scroll to top),
   fixed search button, content wrapper and footer. Measurements from the original Ohio theme. */

/* ---------- Skip link ---------- */
.layout-chrome__skipLink {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  z-index: 200;
  padding: 0.5rem 1rem;
  font-weight: var(--weight-semibold);
  color: #fff;
  background: var(--color-black);
  border-radius: var(--radius);
  transform: translate(-50%, -200%);
  transition: transform var(--duration) var(--ease);
}

.layout-chrome__skipLink:focus {
  transform: translate(-50%, 0);
}

/* ---------- Page preloader ---------- */
/* The theme's #page-preloader: the page background with a spinner over everything until the window "load"
   event, then faded out (.hidden: opacity + visibility, all .35s). Only with JS (html[data-js]);
   html[data-loaded] is set on load by the inline script of site/layout.html.twig. Failsafe: gone after 5s. */
.layout-chrome__preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration) var(--ease);
}

html[data-js]:not([data-loaded]) .layout-chrome__preloader {
  opacity: 1;
  visibility: visible;
  animation: layout-chrome__preloader-failsafe 0s linear 5s forwards;
}

/* .spinner: 3.25rem, turns in 2s; .spinner .path: stroke --clb-color-black-light at .75 opacity, dash in 1.5s */
.layout-chrome__spinner {
  position: relative;
  z-index: 2;
  width: 3.25rem;
  height: 3.25rem;
  animation: layout-chrome__spinner 2s linear infinite;
}

.layout-chrome__spinnerPath {
  opacity: 0.75;
  stroke: var(--color-heading);
  stroke-linecap: round;
  animation: layout-chrome__spinner-dash 1.5s ease-in-out infinite;
}

@keyframes layout-chrome__preloader-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes layout-chrome__spinner {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes layout-chrome__spinner-dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

/* ---------- Header ---------- */
.layout-chrome__header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--header-h);
  padding-inline: var(--spacer);
  /* the transparent bar must not swallow clicks on the content below */
  pointer-events: none;
}

.layout-chrome__headerInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.layout-chrome__header a,
.layout-chrome__header button {
  pointer-events: auto;
}

.layout-chrome__brand {
  font-family: var(--font-display);
  font-size: 1.7425rem; /* 27.88px */
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.32px;
  /* inherits the header's color, which eases over .2s when the tone changes (theme: dynamic-typo) */
  color: inherit;
  white-space: nowrap;
}

.layout-chrome__headerRight {
  display: flex;
  align-items: center;
}

/* (two classes: must beat .iconButton regardless of stylesheet order) */
.layout-chrome__headerRight .layout-chrome__headerSearch {
  display: none;
}

.layout-chrome__headerRight .layout-chrome__hamburger {
  margin-left: 1rem;
}

.layout-chrome__hamburgerIcon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 22px;
  height: 16px;
}

.layout-chrome__hamburgerIcon::before,
.layout-chrome__hamburgerIcon::after {
  content: "";
  display: block;
  height: 2px;
  margin: 3px 0;
  background-color: currentColor;
  border-radius: 1px;
}

.layout-chrome__hamburgerIcon::before {
  width: 100%;
}

.layout-chrome__hamburgerIcon::after {
  width: 80%;
}

/* The slide-in menu starts at ≤768px, but the header search icon (and the hidden fixed search
   button) only at ≤767px: at exactly 768px the original keeps the tablet search button. */
@media (max-width: 768px) {
  .layout-chrome__headerRight .layout-chrome__hamburger {
    margin-left: 0.75rem;
  }
}

@media (max-width: 767px) {
  .layout-chrome__headerRight .layout-chrome__headerSearch {
    display: inline-flex;
  }
}

@media (max-width: 360px) {
  .layout-chrome__brand {
    font-size: 1.45rem;
  }
}

/* ---------- Overlays (shared) ---------- */
.layout-chrome__overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  --color-focus: var(--color-brand); /* dark background in both schemes */
  color: #fff;
  background-color: var(--color-overlay);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50vh);
  /* Closing: gone in one frame, like the theme's popups (no transition without .visible). */
  transition: none;
}

.layout-chrome__overlay[data-open] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s ease-in-out;
}

/* The theme closes the search popup from a 200ms setTimeout. */
.layout-chrome__search:not([data-open]) {
  transition:
    opacity 0s linear 0.2s,
    visibility 0s linear 0.2s,
    transform 0s linear 0.2s;
}

.layout-chrome__closeBar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: var(--header-h);
  padding-inline: var(--spacer);
  pointer-events: none;
}

.layout-chrome__closeBar > * {
  pointer-events: auto;
}

.layout-chrome__closeBarStart {
  justify-content: flex-start;
}

.layout-chrome__closeBar .layout-chrome__closeButton {
  color: #fff;
}

/* ---------- Menu overlay (desktop: full screen, centered, numbered) ---------- */
.layout-chrome__menuBackdrop {
  display: none;
}

.layout-chrome__menuPanel {
  height: 100%;
  padding: var(--spacer);
}

.layout-chrome__menuNav {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  /* room of the (empty) details row under the menu on the original: keeps it optically centered */
  padding-bottom: 4rem;
  overflow-y: auto;
  scrollbar-width: none;
}

.layout-chrome__menuList {
  width: 40vw;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.layout-chrome__menuItem {
  position: relative;
  padding: 0.25rem 0;
  overflow: hidden;
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
  /* resting state of the theme's `.hamburger-nav .menu > *` (also shown during the delay) */
  opacity: 0;
  transform: translateY(2rem);
}

/* slide_up_elements: from 3.25rem, .35s, default `ease` timing, nth-child × .05s, fill forwards. */
.layout-chrome__overlay[data-open] .layout-chrome__menuItem {
  animation: layout-chrome__menu-item-in var(--duration) ease calc(var(--i, 0) * 0.05s + 0.05s) forwards;
}

@keyframes layout-chrome__menu-item-in {
  from {
    opacity: 0;
    transform: translateY(3.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .layout-chrome__overlay[data-open] .layout-chrome__menuItem {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.layout-chrome__menuLink {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 5vh;
  font-weight: 600;
  color: #fff;
}

.layout-chrome__menuLabel,
.layout-chrome__menuClone {
  display: block;
  padding: 0 10px;
  line-height: 1.2;
  transition: all var(--duration) var(--ease);
}

.layout-chrome__menuClone {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(100%);
}

.layout-chrome__menuNumber {
  position: absolute;
  top: 0;
  left: -1rem;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  opacity: 0.5;
  transition: opacity var(--duration) var(--ease);
}

.layout-chrome__menuLink:hover .layout-chrome__menuLabel,
.layout-chrome__menuLink:focus-visible .layout-chrome__menuLabel {
  opacity: 0;
  transform: translateY(-110%);
}

.layout-chrome__menuLink:hover .layout-chrome__menuClone,
.layout-chrome__menuLink:focus-visible .layout-chrome__menuClone {
  opacity: 0.5;
  transform: translateY(0);
}

.layout-chrome__menuLink:hover .layout-chrome__menuNumber,
.layout-chrome__menuLink:focus-visible .layout-chrome__menuNumber {
  opacity: 0;
}

.layout-chrome__menuLink:focus-visible {
  outline-offset: 0;
}

.layout-chrome__menuCopyright {
  display: none;
}

/* ---------- Menu overlay (mobile: slide-in panel) ---------- */
@media (max-width: 768px) {
  /* .slide-in-overlay: fades over .35s both ways; the theme closes it from a 200ms setTimeout. */
  .layout-chrome__menu {
    background-color: transparent;
    transform: none;
    transition:
      opacity var(--duration) var(--ease) 0.2s,
      visibility 0s linear calc(var(--duration) + 0.2s);
  }

  .layout-chrome__menu[data-open] {
    transition: opacity var(--duration) var(--ease);
  }

  .layout-chrome__menuBackdrop {
    position: absolute;
    inset: 0;
    display: block;
    background-color: rgb(17 16 19 / 0.9);
  }

  .layout-chrome__menuPanel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--circle);
    height: auto;
    padding: var(--header-h) 1rem 1rem;
    overflow: hidden auto; /* no sideways scroll range from the close button's click ripple */
    background-color: var(--color-mobile-menu);
    box-shadow:
      0 20px 32px -8px rgb(17 16 19 / 0.15),
      0 0 1px rgb(17 16 19 / 0.05);
    /* .holder: fades in while sliding 3rem (not the panel width), .35s ease */
    opacity: 0;
    transform: translateX(3rem);
    transition:
      opacity var(--duration) ease 0.2s,
      transform var(--duration) ease 0.2s;
  }

  .layout-chrome__menu[data-open] .layout-chrome__menuPanel {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--duration) ease,
      transform var(--duration) ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .layout-chrome__menuPanel {
      transform: none;
    }
  }

  .layout-chrome__menu .layout-chrome__closeBar {
    left: var(--circle);
    padding-inline: 1rem;
  }

  .layout-chrome__menu .layout-chrome__closeBar .layout-chrome__closeButton {
    background-color: transparent;
  }

  .layout-chrome__menuNav {
    display: block;
    height: auto;
    padding-bottom: 0;
    overflow: visible;
  }

  .layout-chrome__menuList {
    width: auto;
    margin: 0 -4px;
    text-align: left;
  }

  .layout-chrome__menuItem {
    padding: 0;
    overflow: visible;
    text-transform: none;
    white-space: normal;
    opacity: 1;
    transform: none;
  }

  .layout-chrome__overlay[data-open] .layout-chrome__menuItem {
    animation: none;
  }

  .layout-chrome__menuLink {
    display: flex;
    justify-content: flex-start;
    min-height: 40px;
    padding: 0.45rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.984rem; /* 15.74px */
    font-weight: 500;
    border-radius: var(--radius);
    transition: background-color var(--duration) var(--ease);
  }

  .layout-chrome__menuLink:hover,
  .layout-chrome__menuLink:focus-visible {
    background-color: rgb(255 255 255 / 0.08);
  }

  .layout-chrome__menuLabel {
    padding: 0;
    line-height: 1.3;
  }

  .layout-chrome__menuLink:hover .layout-chrome__menuLabel,
  .layout-chrome__menuLink:focus-visible .layout-chrome__menuLabel {
    opacity: 1;
    transform: none;
  }

  .layout-chrome__menuClone,
  .layout-chrome__menuNumber {
    display: none;
  }

  .layout-chrome__menuCopyright {
    display: block;
    padding: 0 0.25rem;
    font-size: 0.935rem; /* 14.96px */
    line-height: 1.6;
    color: #fff;
  }

  .layout-chrome__menuCopyright p {
    margin: 1em 0;
  }
}

/* ---------- Search overlay ---------- */
.layout-chrome__searchHolder {
  max-width: calc(553px + 2rem);
  margin: 0 auto;
  padding: var(--header-h) 1rem 0;
}

@media (max-width: 768px) {
  .layout-chrome__search .layout-chrome__closeBar {
    padding-inline: 1rem;
  }
}

/* ---------- Fixed search button (bottom-left) ---------- */
.layout-chrome__searchFab {
  position: fixed;
  left: var(--spacer);
  bottom: var(--spacer);
  z-index: 50;
}

@media (max-width: 767px) {
  .layout-chrome__searchFab {
    display: none;
  }
}

/* ---------- Side bar: theme switcher + scroll to top ---------- */
.layout-chrome__sideBar {
  position: fixed;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gutter);
}

@media (min-width: 1181px) {
  .layout-chrome__sideBar {
    top: 50%;
    left: var(--spacer);
    min-height: var(--circle);
    transform-origin: left top;
    transform: rotate(-90deg) translate(-50%, 0);
  }
}

/* The original hides the color switcher ≤1180px (and "Scroll to top" <1200px). */
@media (max-width: 1180px) {
  .layout-chrome__sideBar {
    display: none;
  }
}

.layout-chrome__switcher {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  height: 1.8rem;
  font-size: 0.87125rem; /* 13.94px */
  font-weight: 500;
  line-height: 1;
  background-color: var(--color-fill-strong);
  border-radius: 0.9rem;
  box-shadow: inset 0 0 0 2px rgb(136 135 137 / 0.1);
}

.layout-chrome__switchItem {
  display: flex;
  align-items: center;
  gap: 3.2px;
  padding: 0 10.4px;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: inherit;
  cursor: pointer;
  /* color follows the side bar's tone change (.2s, theme: dynamic-typo) */
  transition:
    background-color var(--duration) var(--ease),
    color var(--duration-fast) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.layout-chrome__switchItem svg {
  display: none;
  flex: none;
  margin-right: -3.2px;
}

/* Active option: white pill (light scheme) / grey pill (dark scheme). Driven by the
   attribute set before paint, so it is right on the very first frame. */
html:not([data-theme="dark"]) .layout-chrome__switchItem[data-value="light"],
html[data-theme="dark"] .layout-chrome__switchItem[data-value="dark"] {
  color: #161518;
  background-color: #fff;
  box-shadow: -3px 0 6px 0 rgb(17 16 19 / 0.05);
}

html[data-theme="dark"] .layout-chrome__switchItem[data-value="dark"] {
  color: #fff;
  background-color: #4d4c4e;
}

html:not([data-theme="dark"]) .layout-chrome__switchItem[data-value="light"] svg,
html[data-theme="dark"] .layout-chrome__switchItem[data-value="dark"] svg {
  display: block;
}

/* Once hydrated: a single pill (the theme's .color-switcher-toddler, carrying the label and icon
   of the active scheme) slides over the active option: transform and text color .35s, width and
   background at once.
   Before that (and without JS) the active option itself is drawn as the pill (rules above). */
.layout-chrome__switchPill {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  width: var(--pill-w, auto);
  height: 100%;
  padding: 0 10.4px;
  color: #161518;
  white-space: nowrap;
  background-color: #fff;
  border-radius: inherit;
  box-shadow: -3px 0 6px 0 rgb(17 16 19 / 0.05);
  transform: translateX(var(--pill-x, 0px));
  pointer-events: none;
}

.layout-chrome__switcher[data-ready] .layout-chrome__switchPill {
  display: flex;
  transition:
    transform var(--duration) var(--ease),
    color var(--duration) var(--ease);
}

html[data-theme="dark"] .layout-chrome__switchPill {
  color: #fff;
  background-color: #4d4c4e;
}

.layout-chrome__pillState {
  display: flex;
  align-items: center;
  gap: 3.2px;
}

.layout-chrome__pillState svg {
  flex: none;
  margin-right: -3.2px;
}

html[data-theme="dark"] .layout-chrome__pillState[data-value="light"],
html:not([data-theme="dark"]) .layout-chrome__pillState[data-value="dark"] {
  display: none;
}

html .layout-chrome__switcher[data-ready] .layout-chrome__switchItem[data-value] {
  background-color: transparent;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .layout-chrome__switcher[data-ready] .layout-chrome__switchPill {
    transition: none;
  }
}

/* keeps the focus ring above the pill */
.layout-chrome__switchItem:focus-visible {
  position: relative;
  z-index: 1;
}

/* The theme turns transitions off for one frame while the scheme changes
   (`.switching *:not(.color-switcher-toddler)`): page colors flip at once, only the pill eases. */
html[data-switching] .site-root *:not(.layout-chrome__switchPill) {
  transition: none !important;
}

.layout-chrome__scrollTop {
  display: inline-flex;
  align-items: center;
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--text-ui);
  font-weight: 600;
  line-height: 1.6;
  color: inherit;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration) var(--ease),
    visibility 0s linear var(--duration);
}

.layout-chrome__scrollTop[data-visible] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration) var(--ease);
}

/* Light scheme: the theme's dynamic-typo rule replaces the fade by `transition: color .2s` (the
   color is inherited here), so "Scroll to top" appears and disappears at once. */
html:not([data-theme="dark"]) .layout-chrome__scrollTop {
  transition: none;
}

.layout-chrome__scrollTrack {
  position: relative;
  display: block;
  width: 60px;
  height: 2px;
  margin-right: 1rem;
  overflow: hidden;
  background-color: rgb(136 135 137 / 0.35);
}

/* .scroll-track: anchored right (next to the label, i.e. the top end once rotated), width =
   (viewport height + scroll) / document height. */
.layout-chrome__scrollThumb {
  position: absolute;
  inset: 0 0 0 auto;
  width: 100%;
  background-color: currentColor;
  transform-origin: right center;
  transform: scaleX(var(--progress, 0));
}

@media (max-width: 1199px) {
  .layout-chrome__scrollTop {
    display: none;
  }
}

/* ---------- Content & footer ---------- */
.layout-chrome__content {
  /* Stacked above the reveal footer like the theme's .site-content (position: relative;
     z-index: 1). The header, side bar, search button and overlays stay above it. */
  position: relative;
  z-index: 1;
  /* Own block formatting context: the bottom margin of the page's last element stays inside
     the content (instead of collapsing with the reveal-footer margin below). */
  display: flow-root;
  background-color: var(--color-bg);
}

.layout-chrome__main:focus {
  outline: none;
}

.layout-chrome__footer {
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-footer-bg);
}

/* "Sticky" footer revealed under the content (≥1181px, when it fits in the viewport). */
html[data-footer-reveal] .layout-chrome__content {
  margin-bottom: var(--footer-h, 0);
}

html[data-footer-reveal] .layout-chrome__footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* under the content (z-index 1), above the page canvas: its links get the pointer once uncovered */
  z-index: 0;
}

/* Original grid: 4 columns ≥769px, 2 at exactly 768px, 1 ≤767px; 2.5rem between stacked columns. */
.layout-chrome__footerWidgets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  row-gap: 2.5rem;
  margin-inline: calc(var(--container-gutter) * -1);
  padding-block: var(--section-space);
}

.layout-chrome__footerCol {
  min-width: 0;
  padding-inline: var(--container-gutter);
}

/* h3 of the logo widget (4px top margin; its bottom margin never shows). */
.layout-chrome__footerLogo {
  display: block;
  width: fit-content;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: 500;
  line-height: var(--h3-leading);
  letter-spacing: -0.035em;
  color: var(--color-heading);
}

.layout-chrome__widget {
  margin: 0 0 3.5vh; /* --clb-widget-gutter */
  font-size: var(--text-ui);
  line-height: 1.6;
}

.layout-chrome__widget:last-child {
  margin-bottom: 0;
}

.layout-chrome__widgetTitle {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--color-heading);
}

.layout-chrome__widgetLinks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.layout-chrome__widgetLinks li {
  margin: 0;
}

.layout-chrome__footerBottom {
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* Copyright left, links right, on one row: when they don't fit, both shrink and wrap
   (no wrapping of the row itself). Stacked and centered ≤768px. */
.layout-chrome__footerBottomInner {
  display: flex;
  justify-content: space-between;
  padding: var(--spacer) 0;
  border-top: 1px solid var(--color-border);
}

.layout-chrome__legal {
  margin: 0;
}

.layout-chrome__legal:last-child {
  text-align: right;
}

@media (max-width: 768px) {
  .layout-chrome__footerWidgets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout-chrome__footerBottomInner {
    flex-direction: column;
    align-items: center;
  }

  .layout-chrome__legal,
  .layout-chrome__legal:last-child {
    text-align: center;
  }

  .layout-chrome__legal:not(:last-child) {
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 767px) {
  .layout-chrome__footerWidgets {
    grid-template-columns: minmax(0, 1fr);
  }
}