/*
 * minuar.css — styling added by Minuar.
 *
 * Loaded by inc/minuar-css.php. It is NOT part of the CSS Editor: the four
 * stylesheets in Weergave -> CSS Editor live in the database, and this file sits
 * next to them so that editing CSS in wp-admin never overwrites this, and this
 * never overwrites that.
 *
 * Contents: the contact form (one form, five request types), and the
 * ILLUNOX Producten cards (equal-height title bars).
 *
 * Gravity Forms runs in legacy markup mode on this site, so the choices are a
 * <ul class="gfield_checkbox"> of <li class="gchoice"> and Gravity Forms' own
 * stylesheet is quite specific about them. Selectors below therefore start at
 * .gform_legacy_markup_wrapper — that is what wins on specificity, rather than
 * reaching for !important.
 *
 * Colours come from the theme's own palette, not from the mockup's hex codes:
 * the mockup uses #C8006B while this site's pink is #DE3163, and the site wins.
 */

:root {
    --minuar-pink: var(--wp--preset--color--primair, #DE3163);
    --minuar-dark: var(--wp--preset--color--secundair, #404042);
    --minuar-accent: var(--wp--preset--color--accent, #F7CC01);
    --minuar-line: #e0e0e0;
    --minuar-field-line: #d5d5d5;
    --minuar-field-bg: #fafafa;
    --minuar-muted: #777;
}

/* ── Search & Filter dropdowns ──────────────────────────────
   The filter dropdowns on /projecten/ (and anywhere else Search & Filter is
   used) were capped at 250px tall and 210px wide, so long terms such as
   "Vandaalbestendig armatuur" broke onto a second line and only a handful of
   options were visible at a time.

   The width is set inline by Search & Filter's own JavaScript when it positions
   the popover, which is why it takes !important here: a stylesheet cannot beat an
   inline style otherwise. The panel now grows to fit its longest option, with the
   original width as the floor, and is capped so it can never run off-screen.
   ───────────────────────────────────────────────────────── */

.search-filter-base.search-filter-component-combobox-base__listbox {
    max-height: min(60vh, 440px);
    width: max-content !important;
    min-width: 210px;
    max-width: min(92vw, 400px);
}

.search-filter-component-combobox-base__listbox-option {
    white-space: nowrap;
}

/* ── Projecten cards: square featured image (Chrome) ────────
   The project cards render the featured image in a 1/1 (square) figure. The
   block outputs the image as <img style="width:100%;height:100%;object-fit:cover">
   inside a figure with only `aspect-ratio:1`. That makes the figure height depend
   on the image while the image height depends on the figure — a cyclic size
   dependency. Firefox breaks the tie against the grid track (correct square);
   Chrome resolves it from the image's intrinsic size, so a portrait source
   (e.g. Rusthoff Sassenheim, Station Gouda) blows the square up to 440px and the
   card grows past its row, staggering the pink title bars.

   Taking the image out of the flow with absolute positioning removes it from the
   figure's height calculation, so `aspect-ratio:1` gives a clean square in both
   browsers and object-fit crops the overflow. Scoped to projecten so the product
   cards (own rules above) are untouched.
   ───────────────────────────────────────────────────────── */

li.wp-block-post.projecten .wp-block-post-featured-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
}

li.wp-block-post.projecten .wp-block-post-featured-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── ILLUNOX Producten cards ────────────────────────────────
   The product cards (reusable block "producten", anchor #producten-slider) sit
   in a post-template grid, so the <li> items in a row already share one height.
   The card content did not: a one-line title left its pink bar 36px shorter
   than a two-line neighbour. Stretch the card through the wrapper chain and
   let the title absorb the leftover height, with its text centered.
   ───────────────────────────────────────────────────────── */

#producten-slider .wp-block-post-template > li > .wp-block-group {
    height: 100%;
}

#producten-slider .wp-block-post-template > li .wp-block-group.is-vertical {
    height: 100%;
}

#producten-slider .wp-block-post-template > li .wp-block-group.is-vertical > .wp-block-group {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Column direction on purpose: the theme's group-link overlay is a zero-height
   child of the h3, and a row layout would push the title sideways around it.

   The block writes line-height 1.8 and 1.5rem padding as inline styles; only
   !important beats an inline style. At those values the equalized bars read as
   thick slabs with a floating line of text. A tighter line-height and a small,
   equal top/bottom padding keep the bars slim; justify-center gives every card
   the same gap above and below its title, one line or two. */
#producten-slider .wp-block-post-template h3.wp-block-post-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    line-height: 1.3 !important;
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
}

/* ── Choice tiles ───────────────────────────────────────── */

.gform_legacy_markup_wrapper .ilx-intent-tiles ul.gfield_checkbox {
    display: grid;
    /* auto-fit rather than a hard 5, so adding a sixth choice still lays out.
       The minimum is tuned so the five tiles land on one row at content width. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gform_legacy_markup_wrapper .ilx-intent-tiles .gchoice {
    position: relative;
    margin: 0;
    padding: 0;
}

/* The real checkbox stays in the DOM — keyboard and screen readers need it —
   but the tile itself is the visible control, so the box sits out of the way. */
.gform_legacy_markup_wrapper .ilx-intent-tiles .gchoice input[type="checkbox"] {
    position: absolute;
    top: 14px;
    right: 12px;
    margin: 0;
    accent-color: var(--minuar-pink);
}

.gform_legacy_markup_wrapper .ilx-intent-tiles .gchoice label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 1.1rem 2.2rem 1.1rem 1rem;
    border: 1px solid var(--minuar-line);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.gform_legacy_markup_wrapper .ilx-intent-tiles .gchoice label:hover {
    border-color: #aaa;
    background: var(--minuar-field-bg);
}

/* Selected: the pink outline from the design. The border width stays at 1px and
   an inset shadow does the thickening, so the tile does not shift by a pixel. */
.gform_legacy_markup_wrapper .ilx-intent-tiles .gchoice input[type="checkbox"]:checked + label {
    border-color: var(--minuar-pink);
    box-shadow: inset 0 0 0 1px var(--minuar-pink);
    background: #fff;
}

.gform_legacy_markup_wrapper .ilx-intent-tiles .gchoice input[type="checkbox"]:focus-visible + label {
    outline: 2px solid var(--minuar-pink);
    outline-offset: 2px;
}

.ilx-tile-icon {
    width: 22px;
    height: 22px;
    color: var(--minuar-pink);
    flex-shrink: 0;
}

.ilx-tile-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
}

.ilx-tile-sub {
    font-size: 11px;
    line-height: 1.35;
    color: var(--minuar-muted);
    font-weight: 400;
}

/* ── Field layout ───────────────────────────────────────────
   Gravity Forms already tags each field with the width it was given in the form
   editor (gfield--width-half, --width-third, …), but the legacy markup never
   implements a grid for them, so every field ends up on its own full-width row
   with a stubby input in it. This turns the field list into that grid and lets
   the inputs fill their cell.
   ───────────────────────────────────────────────────────── */

/* Gravity Forms ships `.gform_legacy_markup_wrapper ul.gform_fields { display: block }`.
   The element selector gives it one point more than a plain class, so the wrapper
   class is repeated here to win — cheaper than !important. */
.gform_wrapper.gform_legacy_markup_wrapper ul.gform_fields {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 20px;
    row-gap: 4px;
}

.gform_wrapper.gform_legacy_markup_wrapper ul.gform_fields > li.gfield {
    grid-column: span 12;
    margin: 0;
    padding: 8px 0;
    clear: none;   /* legacy markup floats these; the grid does the work now */
    float: none;
    max-width: none;
}

.gform_wrapper.gform_legacy_markup_wrapper ul.gform_fields > li.gfield--width-half {
    grid-column: span 6;
}

.gform_wrapper.gform_legacy_markup_wrapper ul.gform_fields > li.gfield--width-third {
    grid-column: span 4;
}

.gform_wrapper.gform_legacy_markup_wrapper ul.gform_fields > li.gfield--width-quarter {
    grid-column: span 3;
}

/* Inputs fill the cell they sit in, instead of Gravity Forms' fixed sizes. */
.gform_legacy_markup_wrapper .gform_fields .ginput_container input[type="text"],
.gform_legacy_markup_wrapper .gform_fields .ginput_container input[type="email"],
.gform_legacy_markup_wrapper .gform_fields .ginput_container input[type="tel"],
.gform_legacy_markup_wrapper .gform_fields .ginput_container input[type="number"],
.gform_legacy_markup_wrapper .gform_fields .ginput_container select,
.gform_legacy_markup_wrapper .gform_fields .ginput_container textarea {
    width: 100%;
}

/* The date field keeps its picker icon beside it, so it must not stretch to
   100% or the icon is pushed out of the cell. */
.gform_legacy_markup_wrapper .gform_fields .ginput_container_date input[type="text"] {
    width: calc(100% - 34px);
}

/* Everything stacks on phones. These selectors must be at least as specific as
   the desktop ones above, or the spans keep winning and nothing stacks. */
@media (max-width: 768px) {
    .gform_wrapper.gform_legacy_markup_wrapper ul.gform_fields > li.gfield,
    .gform_wrapper.gform_legacy_markup_wrapper ul.gform_fields > li.gfield--width-half,
    .gform_wrapper.gform_legacy_markup_wrapper ul.gform_fields > li.gfield--width-third,
    .gform_wrapper.gform_legacy_markup_wrapper ul.gform_fields > li.gfield--width-quarter {
        grid-column: span 12;
    }
}

/* ── Fields ─────────────────────────────────────────────── */

.gform_legacy_markup_wrapper .gfield_label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

.gform_legacy_markup_wrapper input[type="text"],
.gform_legacy_markup_wrapper input[type="email"],
.gform_legacy_markup_wrapper input[type="tel"],
.gform_legacy_markup_wrapper input[type="number"],
.gform_legacy_markup_wrapper input[type="date"],
.gform_legacy_markup_wrapper select,
.gform_legacy_markup_wrapper textarea {
    padding: 9px 11px;
    border: 1px solid var(--minuar-field-line);
    border-radius: 7px;
    background: var(--minuar-field-bg);
    color: #1a1a1a;
    font-size: 14px;
    font-family: inherit;
}

.gform_legacy_markup_wrapper input[type="text"]:focus,
.gform_legacy_markup_wrapper input[type="email"]:focus,
.gform_legacy_markup_wrapper input[type="tel"]:focus,
.gform_legacy_markup_wrapper input[type="number"]:focus,
.gform_legacy_markup_wrapper input[type="date"]:focus,
.gform_legacy_markup_wrapper select:focus,
.gform_legacy_markup_wrapper textarea:focus {
    border-color: var(--minuar-pink);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--minuar-pink) 12%, transparent);
    background: #fff;
    outline: none;
}

.gform_legacy_markup_wrapper textarea {
    resize: vertical;
    min-height: 80px;
}

/* ── Sections ───────────────────────────────────────────── */

.gform_legacy_markup_wrapper .gsection {
    border-bottom: 1px solid var(--minuar-line);
    margin: 26px 0 14px;
    padding-bottom: 8px;
}

.gform_legacy_markup_wrapper .gsection_title {
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
}

.gform_legacy_markup_wrapper .gsection_description {
    font-size: 13px;
    color: var(--minuar-muted);
    padding: 4px 0 0;
}

/* ── Submit ─────────────────────────────────────────────── */

/* GF styles the submit with `.gform_legacy_markup_wrapper .gform_footer input.button`,
   which outranks a plain class. Match its shape to win. */
.gform_wrapper.gform_legacy_markup_wrapper .gform_footer input.gform_button {
    background: var(--minuar-pink);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 26px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity .15s;
}

.gform_wrapper.gform_legacy_markup_wrapper .gform_footer input.gform_button:hover {
    opacity: .88;
}

/* ── Mobile ─────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* The form sits nested deep enough that the theme's own page gutter does not
       reach it, so on phones it runs edge to edge. Give it its own. */
    .gform_wrapper.gform_legacy_markup_wrapper {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .gform_legacy_markup_wrapper .ilx-intent-tiles ul.gfield_checkbox {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .gform_legacy_markup_wrapper .ilx-intent-tiles .gchoice label {
        padding: .9rem 1.9rem .9rem .85rem;
        gap: 5px;
    }

    .gform_legacy_markup_wrapper .ilx-intent-tiles .gchoice input[type="checkbox"] {
        top: 11px;
        right: 9px;
    }

    /* A full-width button is easier to hit than a small one floating left. */
    /* GF styles the submit with `.gform_legacy_markup_wrapper .gform_footer input.button`,
   which outranks a plain class. Match its shape to win. */
.gform_wrapper.gform_legacy_markup_wrapper .gform_footer input.gform_button {
        width: 100%;
        padding: 14px 20px;
    }

    .gform_legacy_markup_wrapper .gsection {
        margin: 20px 0 10px;
    }
}

/* Very narrow phones: two tiles side by side leaves the titles wrapping onto
   three lines, so give each tile the full width instead. */
@media (max-width: 420px) {
    .gform_legacy_markup_wrapper .ilx-intent-tiles ul.gfield_checkbox {
        grid-template-columns: 1fr;
    }
}