/* ==========================================================================
   Technosylva Help Center - Custom CSS
   --------------------------------------------------------------------------
   Sections:
     1. Fonts & brand tokens
     2. Base (body, global link hover, shared font)
     3. Left navigation (dark tree, header, actions)
     4. Content area (links: black at rest, red on hover)
     5. Expand / collapse macro
     6. Front page - product cards (tiles)
     7. Front page - "Filter by Product Type" heading & tabs
     8. Search bar - "Search all" dropdown button
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Fonts & brand tokens
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:wght@400;500;600;700&display=swap');

:root {
  --techno-red: #A0211C;   /* primary brand red (fills, accents) */
  --link-red:   #EC3E3E;   /* brighter red for link hover */
  --charcoal:   #1C1C1C;   /* current-page row highlight */
  --black:      #000000;
  --light-gray: #EEF0F4;   /* page background */
  --white:      #FFFFFF;
  --cream:      #F5F5EE;
}


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

/* Default link hover across the site. */
a:hover {
  color: var(--link-red);
}

/* Brand font for theme components that do not inherit it from body. */
.navigator,
.page-pagination,
.toc-sticky,
.tree-item,
.tree-item-header,
.breadcrumbs,
.sr-only,
.expand,
.expand-body {
  font-family: "Wix Madefor Text", sans-serif;
}


/* --------------------------------------------------------------------------
   3. Left navigation (dark tree)
   -------------------------------------------------------------------------- */
.navigator,
.tree-item-header,
.button.tree-action {
  background: var(--black);
  color: var(--white);
}

.tree-item {
  color: var(--white);
}

/* Full-width click strip for each tree row. */
.tree .tree-item-header {
  padding: 6px 10px;
  border-radius: 8px;
}

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


/* --------------------------------------------------------------------------
   4. Content area
   -------------------------------------------------------------------------- */
.main-content {
  background: var(--light-gray);
}

.main-content a {
  color: var(--link-red);
}

/* Black links that turn red on hover: child pages, pagination, TOC, breadcrumbs.
   The rest-state rule outranks the global a:hover, so the matching :hover rule
   below is required to make these turn red. */
.child-pages a,
.page-pagination a,
.toc-sticky a,
.toc-list a,
.breadcrumbs a {
  color: var(--black);
}

.child-pages a:hover,
.page-pagination a:hover,
.toc-sticky a:hover,
.toc-list a:hover,
.breadcrumbs a:hover {
  color: var(--link-red);
}


/* --------------------------------------------------------------------------
   5. Expand / collapse macro
   -------------------------------------------------------------------------- */
.expand {
  background: var(--white);
  font-weight: bold;
}

.expand-body {
  background: var(--white);
  font-weight: normal;
}


/* --------------------------------------------------------------------------
   6. 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, 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; }
}


/* --------------------------------------------------------------------------
   7. Front page - "Filter by Product Type" heading & tabs
   Scoped to #space-filter so these outrank the theme's default styling.
   -------------------------------------------------------------------------- */

/* Section heading: smaller. Adjust 1.375rem to taste. */
.spaces > h2 {
  font-size: 1.375rem !important;
}

/* Base: every tab looks like a button (white, bordered, rounded). */
#space-filter input[name="space_filter"] {
  cursor: pointer;
  font-size: 1.05rem !important;
  padding: 10px 20px !important;
  margin: 0 0.35rem 0.5rem 0 !important;   /* gap between buttons */
  background-color: #FFFFFF !important;
  border: 1px solid var(--K15t-color-neutral-75, #E2E5EB) !important;
  border-radius: 8px !important;
}

/* Hover on an inactive tab: red tint, red border, red text. */
#space-filter input[name="space_filter"]:not(:checked):hover {
  background-color: rgba(160, 33, 28, 0.10) !important;
  border-color: var(--techno-red, #A0211C) !important;
  color: var(--techno-red, #A0211C) !important;
}

/* Active tab: solid brand red with white text.
   To keep the original navy instead, change both #A0211C values to #0d284f. */
#space-filter input[name="space_filter"]:checked {
  background-color: var(--techno-red, #A0211C) !important;
  border-color: var(--techno-red, #A0211C) !important;
}
#space-filter input[name="space_filter"]:checked,
#space-filter input[name="space_filter"]:checked::after {
  color: #FFFFFF !important;
}


/* --------------------------------------------------------------------------
   8. Search bar - "Search all" dropdown button
   Brand-red fill with white text on hover, focus, and open states.
   -------------------------------------------------------------------------- */
.dropdown--searchbar .dropdown__button:hover,
.dropdown--searchbar .dropdown__button:focus,
.dropdown--searchbar .dropdown__button:focus-visible,
.dropdown--searchbar .dropdown__button:active,
.dropdown--searchbar .dropdown__button[aria-expanded="true"],
.dropdown--searchbar .dropdown__button[data-headlessui-state~="open"] {
  background-color: var(--techno-red, #A0211C) !important;
  border-color: var(--techno-red, #A0211C) !important;
  color: #FFFFFF !important;        /* label + chevron follow via currentColor */
  box-shadow: none !important;
}

/* Ensure the label text is white on the red background. */
.dropdown--searchbar .dropdown__button:hover .dropdown__button-label,
.dropdown--searchbar .dropdown__button:focus .dropdown__button-label,
.dropdown--searchbar .dropdown__button:active .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: #FFFFFF !important;
}