/* Front-end fixes for the Admix Tech microsite (tech.admix.nl).
 *
 * Scoped to `body.dark` — that class comes from the root node's `siteClass`
 * property (master.cshtml), which only the Admix Tech root sets. admix.nl has
 * an empty siteClass, so nothing here can reach it.
 *
 * Hand-written on purpose: the Hexcore stylesheets are committed build
 * artifacts and CI does not rebuild them, so a vite run would be required to
 * ship a SCSS change. Loaded after blocks.*.build.css in master.cshtml.
 *
 * The underlying bugs are Hexcore-wide and also affect admix.nl; these
 * overrides deliberately do not fix them there.
 *
 * Started as mobile-only (1-3); 4 is a contrast bug at every viewport, kept
 * here because it needs the same escape hatch.
 */

/* ---------------------------------------------------------------------------
 * 1. Hero button row collides when it wraps
 *
 * Views emit `<div class="space-x-4">` around the buttons — no `flex`. The
 * buttons are `display: inline-flex; height: fit-content`, so once the row is
 * too narrow they wrap as inline boxes: no vertical gap (their padding runs
 * into the next line box) and the second button keeps its `margin-left: 1rem`
 * on the new line. Make the row a real flex container instead.
 * ------------------------------------------------------------------------- */
/* Target .space-x-4 at any depth: the hero nests it in a
 * .button-container_wrapper, the CTA block puts it directly under
 * .button-container. Matching only the first structure missed the CTA. */
body.dark .button-container .space-x-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Neutralise the Tailwind space-x-4 margin now that `gap` owns the spacing,
 * otherwise wrapped lines stay indented by 1rem. */
body.dark .button-container .space-x-4 > * + * {
  margin-left: 0;
}

/* On narrow phones two buttons never fit side by side — stack them full width
 * so the row reads as a deliberate button list rather than a ragged wrap. */
@media (max-width: 479px) {
  body.dark .button-container .space-x-4 {
    flex-direction: column;
    align-items: stretch;
  }

  /* .button-secondary sets `width: fit-content`, which is an explicit cross
   * size and therefore beats `align-items: stretch` — without this the two
   * stacked buttons end up different widths. */
  body.dark .button-container .space-x-4 > * {
    width: auto;
  }
}

/* ---------------------------------------------------------------------------
 * 1b. Hero clips its own content
 *
 * .hero-fullwidth_shadow is a fixed `height: clamp(420px, 69vh, 760px)` with
 * `overflow: hidden`, while all the hero text lives inside it. Stacking the
 * buttons above made that content taller than the box, so the last button was
 * cut in half. Let the box grow on mobile and keep the clamp as a floor; the
 * background image is `position: absolute; inset: 0` so it still covers.
 * ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  body.dark .hero-fullwidth .hero-fullwidth_shadow {
    height: auto;
    min-height: clamp(420px, 69vh, 760px);
  }
}

/* ---------------------------------------------------------------------------
 * 2. Hero title overflows the viewport
 *
 * _typography.scss drops the home hero title to a fixed 40px below 1023px. A
 * long unbroken token ("EvolveCMS.Editor", 16 chars) is still wider than a
 * 375px viewport at that size. Scale with the viewport instead of stepping,
 * with break-word as a safety net for anything longer.
 * ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  body.dark .hex-page-home .hero-fullwidth .hero-fullwidth_title {
    font-size: clamp(28px, 8.5vw, 40px);
    overflow-wrap: break-word;
  }
}

/* ---------------------------------------------------------------------------
 * 2b. Closing CTA title overflows the viewport
 *
 * Same class of bug as the hero title, different element: _typography.scss
 * steps `.cta-noimage_title span` to a fixed 56px below 1024px, and
 * "EvolveCMS.Editor" at 56px is wider than a 375px viewport on its own.
 * 9vw keeps that token inside the container down to ~320px.
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  body.dark .cta-container .cta-noimage_title span {
    font-size: clamp(28px, 9vw, 56px);
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
  }
}

/* ---------------------------------------------------------------------------
 * 3. Card list CTA hangs left under a centred heading
 *
 * cards.scss turns .cardlist-header into `flex-direction: column;
 * align-items: self-start` below 1024px. A centred intro
 * (.hex-intro-centerAligned centres itself with auto margins) then sits centred
 * while the CTA button stays pinned left — visible under "Laatste nieuws".
 * Match the CTA to the intro's alignment.
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  body.dark
    .cardlist-container
    .cardlist-header:has(.hex-intro-centerAligned)
    .cardlist-cta {
    align-self: center;
  }
}

/* ---------------------------------------------------------------------------
 * 4. FAQ accordion is near-invisible on the dark palette
 *
 * Not a mobile bug — same escape hatch, same reason (committed build CSS).
 *
 * .hex-color-palettedark colours every descendant p/span/dt/dd for a section
 * sitting on --primarydark (#000). But .accordion-card paints its own
 * `background: #fff` inside that section, and the palette rules keep applying
 * straight through it. Nothing re-colours the contents for the light surface:
 *
 *   question (span.accordion-heading_title) -> hsl(--bodydark)  #e5e5e5 on #fff
 *   answer   (p in .accordion-content_inner) -> same, 1.13:1
 *   links    (a)                             -> inherited near-black (see 5:
 *                                               that palette rule is invalid CSS
 *                                               and is dropped, so `a` falls
 *                                               back rather than going yellow)
 *
 * The open state already looks right only by accident: accordions.custom.scss
 * sets `.accordion.active .accordion-heading_title { color: #ef3054 }` at
 * specificity 0,3,0, which beats the palette's 0,2,0.
 *
 * That red must survive, so the title rule is scoped with `:not(.active)`.
 * Without it this selector (0,4,1) outranks the red (0,3,0) and turns the open
 * question black — an override written to fix contrast silently eating the one
 * state that already had it. The chevron needs no such guard: hexcore colours
 * the active chevron on the `svg` itself, and a direct rule always beats the
 * colour this one inherits down from the parent span.
 *
 * #000d22 is the card's own border colour and the light palette's body colour
 * (18.9:1 on white). Links take the same red as the active title (4.6:1) so the
 * card reads as one light surface instead of three unrelated colours.
 *
 * Root cause is Hexcore-wide: any component with a hardcoded light background
 * inside a dark section breaks identically (.testimonial-unboxed .quote-details,
 * .date-selection, .date-range-picker are the same shape). Commit e780bf6 fixed
 * four earlier instances in _palettes.scss; the accordion card is the fifth and
 * belongs there too, once a rebuild is worth doing.
 * ------------------------------------------------------------------------- */
body.dark .accordion-container .accordion:not(.active) .accordion-heading_title,
body.dark .accordion-container .accordion .accordion-heading_chevron {
  color: #000d22;
}

body.dark .accordion-container .accordion .accordion-content_inner p,
body.dark .accordion-container .accordion .accordion-content_inner li,
body.dark .accordion-container .accordion .accordion-content_inner strong {
  color: #000d22;
}

body.dark .accordion-container .accordion .accordion-content_inner a {
  color: #ef3054;
  text-decoration: underline;
}

body.dark .accordion-container .accordion .accordion-content_inner a:hover {
  color: #c81f3d;
}

/* ---------------------------------------------------------------------------
 * 5. News card tags are invisible on the dark palette
 *
 * Two separate mistakes met here, and the first attempt at this fix got the
 * surface backwards -- worth writing down so the next person does not repeat it.
 *
 * The news card is NOT a light surface. `.card-boxed { background-color: #fff }`
 * exists, but it is scoped: `.hex-color-palettedefault .card-container
 * .card-boxed` and `.slider-container .card-container .card-boxed`. On a
 * palettedark section neither applies, so the card is transparent on #000.
 * Reading that rule with the ancestor selector cut off is what produced the
 * first version of this block, which set the label to #000d22 -- black on black.
 *
 * Why it was invisible to begin with is the second bug, and it is upstream:
 *
 *   --linkdark: 49, 99%, 57%;                          legacy comma syntax
 *   .hex-color-palettedark a { color: hsl(var(--linkdark) / .75) }
 *
 * That expands to `hsl(49, 99%, 57% / .75)`, which mixes comma notation with the
 * modern slash alpha. It is invalid, so the declaration is dropped and every
 * link in a dark section falls back to its inherited colour -- near-black on
 * near-black. The pill outline still shows because it comes from the card's own
 * border colour, hence "I see the border but not the label". The same typo sits
 * on every `hsl(var(--x) / a)` in the palette; fixing it there needs a rebuild.
 *
 * So: explicit light values, and no slash-alpha of our own. Label in the
 * palette's body colour, outline in translucent white so the pill stays quiet,
 * the palette's yellow on hover to match every other link on the site.
 * ------------------------------------------------------------------------- */
body.dark .card-tags a {
  color: hsl(var(--bodydark));
  border-color: rgba(255, 255, 255, .28);
}

body.dark .card-tags a:hover {
  color: hsl(var(--linkdark));
  border-color: rgba(254, 214, 37, .6);
}

/* ---------------------------------------------------------------------------
 * 6. News category dropdown is an unstyled grey box
 *
 * `.filter-options .filter-dropdown select` only gets `max-width` and `padding`.
 * The rule that colours the control -- `.filter-options label, ... select {
 * color: hsl(var(--headlinedefault)) }` -- is written for palettedefault,
 * palette1 and palette2 only, so on the dark palette the select falls back to
 * the browser's own chrome: grey box, grey arrow, square corners.
 *
 * Styled here against the dark palette's own variables rather than new colours:
 *   surface  --secondarydark  #121212   (the palette's raised surface)
 *   text     --headlinedark   #ffffff
 *   accent   --linkdark       #fed625   (same yellow as the buttons)
 *
 * `appearance: none` drops the native arrow, so the chevron is drawn as an
 * inline SVG background -- same shape as the accordion's, but with the colour
 * baked in because a data URI cannot read currentColor.
 * ------------------------------------------------------------------------- */
body.dark .filter-options .filter-dropdown label {
  color: hsl(var(--bodydark));
  letter-spacing: .01em;
}

body.dark .filter-options .filter-dropdown select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  background-color: hsl(var(--secondarydark));
  color: hsl(var(--headlinedark));
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  padding: .75rem 3rem .75rem 1rem;
  font-size: var(--hex-font-sm);
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23fed625'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.15rem;
}

body.dark .filter-options .filter-dropdown select:hover {
  border-color: rgba(255, 255, 255, .35);
}

body.dark .filter-options .filter-dropdown select:focus-visible {
  outline: none;
  border-color: hsl(var(--linkdark));
  box-shadow: 0 0 0 3px rgba(254, 214, 37, .25);
}

/* The option list is painted by the OS, not the page. Only a background/color
 * pair carries across, so set that much and let the rest be native. */
body.dark .filter-options .filter-dropdown select option {
  background-color: hsl(var(--secondarydark));
  color: hsl(var(--headlinedark));
}

/* The "clear filter" chip sitting next to the dropdown -- same near-white on
 * currentColor border problem as the tag pills in 5, on the dark surface here. */
body.dark .filter-options .filter-selected button {
  background-color: transparent;
  color: hsl(var(--headlinedark));
  border-color: rgba(255, 255, 255, .25);
  border-radius: 9999px;
  padding: .375rem .875rem;
  gap: .5rem;
  transition: border-color .2s ease, color .2s ease;
}

body.dark .filter-options .filter-selected button:hover {
  color: hsl(var(--linkdark));
  border-color: hsl(var(--linkdark));
}

/* ---------------------------------------------------------------------------
 * 7. Hero buttons crowd the paragraph above them
 *
 * `.button-container { margin-top: 1rem }` is the same 16px that
 * `.hero-fullwidth_text` uses to sit under the h1. Everything in the hero is
 * therefore on one rhythm, and the button row reads as the last line of the
 * paragraph instead of a separate call to action -- most visible on the
 * homepage, where the paragraph runs the full 52ch.
 *
 * Doubled to 32px, 40px from tablet up where the hero has more room. Scoped to
 * the hero so button rows inside content blocks keep their own spacing.
 * ------------------------------------------------------------------------- */
body.dark .hero-container .button-container {
  margin-top: 2rem;
}

@media (min-width: 768px) {
  body.dark .hero-container .button-container {
    margin-top: 2.5rem;
  }
}