/* Laag: framework. De rangorde staat in skeleton/templates/page.php:
 *   @layer framework, site, theme, type, item;
 * Alles wat het framework meestuurt zit in de onderste laag, zodat site-CSS en CMS-opmaak
 * ervan winnen zonder specificiteits-trucs. Binnen deze laag telt specificiteit gewoon, dus
 * de onderlinge verhouding tussen framework-bestanden verandert er niet door.
 *
 * Een bestand dat deze wikkel MIST staat buiten elke laag en wint daarmee van ALLES —
 * ook van het CMS. `tests/Framework/CodeStyle/ModuleCssIsLayeredTest.php` bewaakt dat. */
@layer framework {
/* Styling voor composite form-fields gerendered door PHP-classes
   (PersonalNameField, AddressField, ZipcodeField, etc.).

   Werkt onafhankelijk van form-builder.css — laad deze stylesheet op
   pagina's waar composite-velden gebruikt worden. */

.composite {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

/* Een rij binnen een composite — inputs naast elkaar, wrap'pen op smal scherm. */
.composite-row {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    width: 100%;
}

.composite-input {
    flex: 1 1 6rem;
    min-width: 0;
    padding: .5rem .65rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-fg);
    font: inherit;
    box-sizing: border-box;
}
.composite-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Smaller width voor 'middle' / huisnummer / postcode / cvc. */
.composite-input--narrow {
    flex: 0 1 7rem;
}

/* Compact — bij content-fit (afstand-dropdown). */
.composite-input--compact {
    flex: 0 0 auto;
    width: auto;
}

.composite-salutation {
    flex: 0 0 auto;
    min-width: 6rem;
}

/* Custom-select-display binnen een composite mag NIET z'n default
   min-width: 12rem afdwingen — die laat 'm uitsteken naast de andere
   inputs. Door 'm dezelfde flex-basis als composite-input te geven,
   gedraagt 'ie zich identiek aan een normale input qua breedte. */
.composite .select-display,
.composite-row .select-display {
    flex: 1 1 6rem;
    min-width: 0;
    box-sizing: border-box;
    padding: .5rem .65rem;          /* match composite-input padding */
}
.composite .select-display.composite-input--narrow,
.composite-row .select-display.composite-input--narrow {
    flex: 0 1 7rem;
}
.composite .select-display.composite-input--compact,
.composite-row .select-display.composite-input--compact {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
}

/* Mobile: alles onder elkaar */
@media (max-width: 540px) {
    .composite {
        flex-direction: column;
    }
    .composite-input,
    .composite-input--narrow,
    .composite-salutation {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* Postcode-aanvulling loopt: een rustige aanwijzing dat er iets gebeurt. Geen spinner die de
   layout verspringt — de velden blijven gewoon bruikbaar terwijl het antwoord onderweg is. */
.composite--address.is-looking-up .composite-input {
  background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .04), transparent);
  background-size: 200% 100%;
  animation: composite-lookup 1s linear infinite;
}

@keyframes composite-lookup {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .composite--address.is-looking-up .composite-input { animation: none; }
}
}