/* GDEX — huisstijl
 *
 * Brengt het platform in lijn met sclrotterdam.com en globaldealersupply.com.
 * De tokens zijn overgenomen uit site/assets/css/gds.css van de GDS-site, zodat
 * de drie sites letterlijk dezelfde waarden delen.
 *
 * Deze laag komt ná style.css en overschrijft alleen het uiterlijk: kleur,
 * typografie, randen en ruimte. Aan de opbouw van Foundation wordt niets
 * veranderd, zodat er niets kan breken in de indeling.
 */

:root {
  --navy:        #0A2F5C;
  --navy-deep:   #05263F;
  --navy-mid:    #0E3868;
  --navy-line:   #1B4675;
  --navy-btn:    #3C6494;
  --cyan:        #00A1E4;
  --cyan-soft:   #4EC3F5;
  --blue:        #0077A8;
  --blue-dark:   #005C84;
  --ink:         #26313D;
  --ink-2:       #4C5A68;
  --muted:       #6B7C8C;
  --pale:        #F1F5F8;
  --line:        #DDE6EE;
  --line-soft:   #EDF2F6;
  --on-navy:     #B9CFE2;
  --scl-red:     #D2232A;
  --ok:          #1B8E5A;
  --warn:        #B4690E;

  --sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Archivo', var(--sans);

  --radius:      8px;
  --radius-sm:   6px;
  --card-shadow: 0 1px 2px rgba(10, 47, 92, .06), 0 2px 8px rgba(10, 47, 92, .04);
  --ring:        0 0 0 3px rgba(0, 161, 228, .25);
}

/* ------------------------------------------------------------- typografie */

body,
button, input, select, textarea,
.button, .menu a, .dropdown-pane {
  font-family: var(--sans);
}

body {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.element-block-title,
.page-title {
  font-family: var(--display);
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -.01em;
}

h1 { font-size: 30px; line-height: 1.2; }
h2 { font-size: 23px; line-height: 1.25; }
h3 { font-size: 19px; line-height: 1.3; }

a       { color: var(--blue); }
a:hover { color: var(--blue-dark); }

.text-muted, .muted, small.optional { color: var(--muted); }

/* ------------------------------------------------------------------- kop */

.top-bar,
header .top-bar,
.header,
.main-header {
  background: var(--navy);
  color: #FFFFFF;
  border-bottom: 1px solid var(--navy-line);
}

.top-bar a,
.header a,
.main-header a {
  color: #FFFFFF;
}

.top-bar a:hover,
.header a:hover {
  color: var(--cyan-soft);
}

.top-bar .menu > li > a.is-active,
.menu .is-active > a {
  background: var(--navy-mid);
  color: #FFFFFF;
}

/* ---------------------------------------------------------------- knoppen */

.button {
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius-sm);
  color: #FFFFFF;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.button:hover,
.button:focus {
  background: var(--navy-mid);
  border-color: var(--navy-mid);
  color: #FFFFFF;
}

.button.secondary {
  background: #FFFFFF;
  border-color: var(--line);
  color: var(--navy);
}

.button.secondary:hover {
  background: var(--pale);
  border-color: var(--navy-btn);
  color: var(--navy);
}

.button.success  { background: var(--ok);       border-color: var(--ok); }
.button.alert    { background: var(--scl-red);  border-color: var(--scl-red); }
.button.warning  { background: var(--warn);     border-color: var(--warn); }

/* De opvallende actie: aanmelden, bieden, kopen. */
.button.solid-fill,
.button.primary-cta {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #04263C;
}

.button.solid-fill:hover,
.button.primary-cta:hover {
  background: var(--cyan-soft);
  border-color: var(--cyan-soft);
  color: #04263C;
}

.button:focus-visible { outline: none; box-shadow: var(--ring); }

/* --------------------------------------------------------------- formulier */

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"], input[type="url"],
input[type="date"], select, textarea,
.input-group-field {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--cyan);
  box-shadow: var(--ring);
  outline: none;
}

label { color: var(--ink-2); font-weight: 500; }

::placeholder { color: var(--muted); opacity: 1; }

/* --------------------------------------------------------------- blokken */

.element-block {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

.element-block-head {
  background: var(--pale);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}

.element-block-title {
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
}

.callout {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line-soft);
}

/* ---------------------------------------------------------------- tabellen */

table thead {
  background: var(--pale);
  color: var(--navy);
}

table thead th {
  font-family: var(--display);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}

table tbody tr { border-bottom: 1px solid var(--line-soft); }
table tbody tr:hover { background: var(--line-soft); }
table tbody td { color: var(--ink); }

/* De prijs mag opvallen. */
td .value, .price, .vehicle-price {
  font-family: var(--display);
  font-weight: 700;
  color: var(--navy);
}

/* ------------------------------------------------------- lagen en menu's */

.reveal {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(5, 38, 63, .18);
}

.dropdown-pane {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

.close-button { color: var(--muted); }
.close-button:hover { color: var(--navy); }

.pagination .current {
  background: var(--navy);
  border-radius: var(--radius-sm);
}

.pagination a:hover { background: var(--pale); border-radius: var(--radius-sm); }

/* ------------------------------------------------------------------ status */

.sold, .label.sold        { background: var(--scl-red); color: #FFFFFF; }
.label.new, .badge.new    { background: var(--cyan);    color: #04263C; }
.underlined               { border-bottom: 1px solid var(--line); }

/* ------------------------------------------------------------------- voet */

footer, .footer {
  background: var(--navy-deep);
  color: var(--on-navy);
  border-top: 3px solid var(--cyan);
}

footer a, .footer a, .footer-links a {
  color: var(--on-navy);
}

footer a:hover, .footer a:hover, .footer-links a:hover {
  color: #FFFFFF;
}

.footer-logo img { opacity: .95; }

/* --------------------------------------------------------------- toegankelijk */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ------------------------------------------- benoemde knopvarianten van GDEX
 *
 * De opmaak kent eigen varianten met een kleur in de naam. Die hernoemen zou
 * betekenen dat je elke template langsgaat; we hertalen ze liever naar de
 * huisstijl. button-orange was de opvallende actieknop (#f79147) en wordt het
 * cyaan van de huisstijl.
 */

.button.button-orange,
a.button-orange,
button.button-orange {
  background-color: var(--cyan);
  border-color: var(--cyan);
  color: #04263C;
  font-weight: 600;
}

.button.button-orange:hover,
.button.button-orange:focus,
a.button-orange:hover,
button.button-orange:hover {
  background-color: var(--cyan-soft);
  border-color: var(--cyan-soft);
  color: #04263C;
}

.button.button-white,
a.button-white {
  background-color: #FFFFFF;
  border-color: var(--line);
  color: var(--navy);
}

.button.button-white:hover,
a.button-white:hover {
  background-color: var(--pale);
  border-color: var(--navy-btn);
  color: var(--navy);
}

.button.button-transparent,
a.button-transparent {
  background-color: transparent;
  border-color: rgba(255, 255, 255, .45);
  color: #FFFFFF;
}

.button.button-transparent:hover,
a.button-transparent:hover {
  background-color: rgba(255, 255, 255, .12);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.button.danger,
.button.button-danger {
  background-color: var(--scl-red);
  border-color: var(--scl-red);
  color: #FFFFFF;
}

.button-text {
  color: var(--blue);
  font-weight: 500;
}

.button-text:hover { color: var(--blue-dark); }

/* Volle breedte en blokknoppen houden hun vorm, alleen de kleur volgt nu mee. */
.button.button-wide,
.button.button-block { border-radius: var(--radius-sm); }

/* ================================================================ indeling
 *
 * Tot hier ging het alleen over kleur en letter. Dit deel gaat over ruimte.
 *
 * De opmaak stamt uit een tijd van 1024 pixels breed: de inhoud loopt van rand
 * tot rand, secties plakken aan elkaar en de koptekst is klein voor een modern
 * scherm. Hieronder krijgt alles een rustige maat, ademruimte tussen de
 * secties en een duidelijke hiërarchie.
 *
 * Er wordt niets aan de opbouw van Foundation veranderd: de rijen en kolommen
 * blijven precies zoals ze zijn, ze krijgen alleen andere maatvoering.
 */

/* ------------------------------------------------------------------ maat */

.top-bar-container,
.main-inner,
.info-container,
.container {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

@media screen and (max-width: 640px) {
  .top-bar-container,
  .main-inner,
  .info-container,
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --------------------------------------------------------------- kopbalk */

.top-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 2px 12px rgba(5, 38, 63, .10);
}

.top-bar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
}

.top-bar-left, .top-bar-right { display: flex; align-items: center; gap: 8px; }

/* De actieknop in de balk wordt door een specifiekere regel overruled;
   hier halen we hem terug naar de huisstijl. */
.top-bar .button.button-orange,
.top-bar-right .button.button-orange,
.top-bar .menu .button.button-orange {
  background-color: var(--cyan);
  border-color: var(--cyan);
  color: #04263C;
  padding: 9px 18px;
  line-height: 1.2;
}

.top-bar .button.button-orange:hover,
.top-bar-right .button.button-orange:hover {
  background-color: var(--cyan-soft);
  border-color: var(--cyan-soft);
  color: #04263C;
}

/* ------------------------------------------------------------------- hero */

.row.global-description {
  align-items: center;
  padding-top: 72px;
  padding-bottom: 72px;
}

.global-description h1 {
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.1;
  margin: 0 0 20px;
  max-width: 15ch;
}

.global-description p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46ch;
  margin-bottom: 28px;
}

.global-description .button {
  padding: 13px 26px;
  font-size: 15px;
}

@media screen and (max-width: 640px) {
  .row.global-description { padding-top: 40px; padding-bottom: 40px; }
  .global-description h1 { max-width: none; }
}

/* --------------------------------------------------------- de vier stappen */

.row.how-gdex-works-slider {
  padding-bottom: 72px;
}

/* De kolom ís de kaart. Met background-clip op de inhoud blijft de
   kolomafstand van Foundation intact en ontstaat er vanzelf ruimte tussen. */
.how-gdex-works-slider > .columns {
  background: #FFFFFF;
  background-clip: content-box;
  border: 0;
  padding-top: 32px;
  padding-bottom: 32px;
}

.how-gdex-works-slider > .columns > * { max-width: 26ch; margin-left: auto; margin-right: auto; }

.how-gdex-works-slider h3,
.how-gdex-works-slider h4,
.how-gdex-works-slider strong {
  font-family: var(--display);
  font-size: 16px;
  color: var(--navy);
  margin-top: 18px;
  margin-bottom: 6px;
}

.how-gdex-works-slider p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

/* Kop boven een sectie. */
.main-inner > .text-center h2,
.info-container h2 {
  font-size: clamp(22px, 2.2vw, 30px);
  margin-bottom: 8px;
}

/* ------------------------------------------------------- secties en banen */

.info-container,
.info-box {
  padding-top: 64px;
  padding-bottom: 64px;
}

.info-box + .info-box { border-top: 1px solid var(--line-soft); }

.info-banner {
  background: var(--pale);
  border-radius: var(--radius);
  padding: 40px;
}

@media screen and (max-width: 640px) {
  .info-container, .info-box { padding-top: 36px; padding-bottom: 36px; }
  .info-banner { padding: 24px; }
}

/* ---------------------------------------------------------------- lezen */

.info-box p,
.global-description + .info-container p {
  max-width: 72ch;
  color: var(--ink-2);
}

/* --------------------------------------------------- smalle pagina's vullen */

/* Op inloggen en registreren staat weinig inhoud; zonder dit kruipt de voet
   omhoog en blijft er een lege strook onder de pagina staan. */
.off-canvas-content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.off-canvas-content > footer,
.off-canvas-content > .footer,
.off-canvas-content > #copyright-bar { margin-top: auto; }

/* Korte pagina's hebben geen voet, alleen de balk met het auteursrecht; die
   moet dan zelf omlaag. Staat er wel een voet boven, dan hoort de ruimte
   daarboven en niet ertussen. */
.off-canvas-content > footer ~ #copyright-bar,
.off-canvas-content > .footer ~ #copyright-bar { margin-top: 0; }

/* ------------------------------------------------------------------- voet */

footer, .footer { padding-top: 40px; padding-bottom: 32px; }

.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------------------------------------------------------- formulieren */

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
  height: auto;
  padding: 10px 12px;
  font-size: 15px;
}

/* Een formulier hoort niet over de volle breedte van een groot scherm te lopen. */
.login-form, .form-narrow, form.narrow { max-width: 420px; }

/* ------------------------------------------------ nagekomen correcties */

/* De actieknop in de kopbalk krijgt zijn kleur niet van de link maar van het
   omhullende element met klasse "orange". */
.top-bar .orange,
.top-bar-right .orange,
.menu .orange,
li.orange {
  background-color: var(--cyan);
  border-radius: var(--radius-sm);
}

.top-bar .orange > a,
.menu .orange > a,
li.orange > a {
  color: #04263C;
  font-weight: 600;
}

.top-bar .orange:hover,
.menu .orange:hover,
li.orange:hover {
  background-color: var(--cyan-soft);
}

/* Vijftien tekens bleek te krap: de kop brak over vier regels. */
.global-description h1 { max-width: 19ch; }

@media screen and (min-width: 1024px) {
  .global-description h1 { max-width: 22ch; }
}

/* --------------------------------------------- nagekomen correcties, deel 2 */

/* De flex-kolom hierboven zet de voet netjes onderaan, maar maakte en passant
   van elk kind een flex-item. Een blok met "margin: 0 auto" krimpt dan naar
   zijn inhoud in plaats van de volle breedte te pakken: de startpagina werd
   daardoor 997 pixels breed in plaats van 1240. */
.off-canvas-content > * { width: 100%; }

/* ------------------------------------------------------------------- hero */

/* De opmaak zet de tekstkolom op grote schermen absoluut (links: 0) om hem
   naast de afbeelding te krijgen. Daardoor telt zijn hoogte niet mee en liep
   de tekst over de kop "How GDEX Works" heen zodra hij iets langer werd.
   De rij is hier float-gebaseerd; we maken er een flexrij van, zodat beide
   kolommen gewoon meetellen en de volgorde met "order" omgedraaid wordt in
   plaats van met push/pull. */
@media screen and (min-width: 64em) {
  .row.global-description {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .home-container .global-description .columns,
  .home-container .global-description .columns:last-child {
    position: static;
    left: auto;
    right: auto;
    float: none;
  }

  /* De tekst staat als tweede in de bron en hoort links te staan. */
  .home-container .global-description .columns:last-child  { order: 1; width: 50%; }
  .home-container .global-description .columns:first-child { order: 2; width: 46%; }
}

.global-description img { max-width: 100%; height: auto; display: block; }

/* Op de smalle kolom bleef de kop over vijf regels breken. Iets kleiner en de
   verhouding met de tekst eronder klopt weer. */
.global-description h1 {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.12;
  max-width: none;
}

/* ---------------------------------------------------- kop boven de stappen */

.how-gdex-works {
  margin-top: 8px;
  margin-bottom: 28px;
}

/* --------------------------------------------- nagekomen correcties, deel 3 */

/* De afbeelding naast de "About"-tekst hangt bovenin een vlak dat even hoog is
   als de tekst ernaast; daaronder bleef een lege strook van ruim 400 pixels
   staan. Hem centreren scheelt dat gat. */
.info-banner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-banner img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------ videoblok */

/* De promotievideo stond zonder enige ruimte tussen twee secties geklemd. */
.home-container + .text-center {
  padding: 56px 32px;
  background: var(--pale);
}

.home-container + .text-center video {
  max-width: 880px;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(5, 38, 63, .14);
  background: var(--navy-deep);
}

@media screen and (max-width: 640px) {
  .home-container + .text-center { padding: 32px 16px; }
}

/* --------------------------------------------- nagekomen correcties, deel 4 */

/* Een bedrag in won heeft vier cijfers meer dan hetzelfde bedrag in euro.
   In het prijsvak van een zoekresultaat (195 px) liep "KRW 16.750.000" bij
   27 px net over de rand. Op 22 px past ook een bedrag van negen cijfers. */
.card-pricing .pricing-details span {
  font-size: 22px;
  white-space: nowrap;
}