@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:wght@400;500;600;700&display=swap');
 
:root {
  --techno-red: #A0211C; 
  --link-red: #EC3E3E; 
  --charcoal: #1C1C1C; 
  --black: #000000; 
  --light-gray: #EEF0F4; 
  --white: #FFFFFF; 
  --cream: #F5F5EE;
}

body {
  font-family:  "Wix Madefor Text", sans-serif;
  background-color: var(--light-gray)
}


a:hover {
  color: var(--link-red);
}
 
.navigator {
  background: var(--black);
  font-family:  "Wix Madefor Text", sans-serif;
  color: var(--white);
}
 
.main-content {
  background: var(--light-gray);
}

 
.main-content a {
  color: var(--link-red);
}
.child-pages a {
  color: var(--black);
}
.child-pages a:hover {
  color: var(--link-red);
}
 
.page-pagination {
  font-family:  "Wix Madefor Text", sans-serif;
}
.page-pagination a:hover {
  color: var(--link-red);
}
.page-pagination a {
  color: var(--black);
}
 
.toc-sticky {
  font-family:  "Wix Madefor Text", sans-serif;
}
 
.toc-sticky a {
  color: var(--black);
}
 
.toc-sticky a:hover {
  color: var(--link-red);
}

 
.toc-list a {
  color: var(--black);
}

.toc-list a:hover {
  color: var(--link-red);
}



.tree-item-header {
  background: var(--black);
  font-family:  "Wix Madefor Text", sans-serif;
  color: var(--white);
}

/* Make each row a nice full-width click strip */
.tree .tree-item-header {
  padding: 6px 10px;
  border-radius: 8px;
}

/* Highlight the whole row when its link is the current page */
.tree .tree-item-header:has(> a[aria-current="page"]) {
  background-color: var(--charcoal);    
}

.button.tree-action {
  background: var(--black);
  color: var(--white);
}


.tree-item {
  font-family:  "Wix Madefor Text", sans-serif;
  color: var(--white);
}

 
.sr-only {
  font-family:  "Wix Madefor Text", sans-serif;
  color: var(--white);
}
 
.breadcrumbs {
  font-family:  "Wix Madefor Text", sans-serif;
}
.breadcrumbs a {
  color: var(--black);
}
 
.breadcrumbs a:hover {
  color: var(--link-red);
}

.expand {
  background: var(--white);
  font-family:  "Wix Madefor Text", sans-serif;
  font-weight: bold;
}

.expand-body {
  background: var(--white);
  font-family:  "Wix Madefor Text", sans-serif;
  font-weight: normal;
}

/* Front page: "Filter by Product Type" section */
 
/* Section heading: smaller. Adjust 1.375rem to taste. */
.spaces > h2 {
  font-size: 1.375rem !important;
}
 
/* Filter tabs (radio inputs named space_filter): a bit larger.
   Adjust font-size and padding to taste. */
input[name="space_filter"] {
  cursor: pointer;
  font-size: 1.05rem !important;
  padding: 10px 20px !important;
}
 
/* Hover on an inactive tab: light pill appears. */
input[name="space_filter"]:not(:checked):hover {
  background-color: var(--K15t-color-neutral-50, #EFF0F4) !important;
}
 
/* Active tab: brand red with white text.
   To keep the original navy instead, change #A0211C to #0d284f. */
input[name="space_filter"]:checked {
  background-color: var(--techno-red, #A0211C) !important;
}
input[name="space_filter"]:checked,
input[name="space_filter"]:checked::after {
  color: #FFFFFF !important;
}

/* Front page product cards (tiles under the filter tabs) */
 
/* Resting state: subtle definition so each card reads as a distinct object. */
.tiles .tile {
  position: relative; /* enables the whole-card click target below */
  border: 1px solid var(--K15t-color-neutral-75, #E2E5EB) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
 
/* Hover: lift, deepen the shadow, and bring in the brand-red accent. */
.tiles .tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10) !important;
  border-color: var(--techno-red, #A0211C) !important;
}
 
/* Hover: shift the title to brand red to reinforce that it is a link. */
.tiles .tile:hover .tile-title a {
  color: var(--techno-red, #A0211C) !important;
}
 
/* Make the whole card clickable, not just the title text. */
.tiles .tile-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
 
/* Respect reduced-motion preferences: keep the accent, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .tiles .tile { transition: box-shadow 0.15s ease, border-color 0.15s ease; }
  .tiles .tile:hover { transform: none; }
}


/* Search bar "Search all" dropdown button: brand-red highlight instead of blue.
   Scoped to the search bar dropdown. Covers hover, focus, and open states,
   and overrides text/chevron color, border, outline, and focus ring. */
.dropdown--searchbar .dropdown__button:hover,
.dropdown--searchbar .dropdown__button:focus,
.dropdown--searchbar .dropdown__button:focus-visible,
.dropdown--searchbar .dropdown__button[aria-expanded="true"],
.dropdown--searchbar .dropdown__button[data-headlessui-state~="open"] {
  color: var(--techno-red, #A0211C) !important;        /* label + chevron (currentColor) */
  border-color: var(--techno-red, #A0211C) !important;
  outline-color: var(--techno-red, #A0211C) !important;
  box-shadow: 0 0 0 3px rgba(160, 33, 28, 0.25) !important;
}
 
/* Ensure the label text follows, in case the theme colors it directly. */
.dropdown--searchbar .dropdown__button:hover .dropdown__button-label,
.dropdown--searchbar .dropdown__button:focus .dropdown__button-label,
.dropdown--searchbar .dropdown__button[aria-expanded="true"] .dropdown__button-label,
.dropdown--searchbar .dropdown__button[data-headlessui-state~="open"] .dropdown__button-label {
  color: var(--techno-red, #A0211C) !important;
}