/**
 * Herontwerp van de vaste onderdelen: topbalk, menu en de mobiele actiebalk.
 *
 * Volgt het ontwerp "Adria Altea detailpagina herdesign" (Merkpagina Hobby).
 * Dit bestand laadt na style.min.css en mobile.min.css, zodat het de bestaande
 * opmaak kan overschrijven zonder dat de gecompileerde sass aangeraakt hoeft te
 * worden.
 *
 * Breekpunt is 768 px, gelijk aan het thema zelf. Het ontwerp gebruikt 900,
 * maar dan spreken deze stylesheet en mobile.min.css elkaar tegen tussen 769
 * en 900.
 */

:root
{
  --cv-geel: #FFCC00;
  --cv-geel-diep: #f5c000;
  --cv-inkt: #111;
}


/* ================================================================= topbalk */

.subheader
{
  background: var(--cv-inkt);
}

.subheader .container.flex
{
  gap: 16px;
}

.subheader .reviews a
{
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
  text-decoration: none;
}

.subheader .reviews a:hover
{
  color: #fff;
  text-decoration: underline;
}

/* Het logo staat in een wit blokje, anders verdwijnt het in de zwarte balk. */
.subheader .reviews .review-logo
{
  background: #fff;
  border-radius: 4px;
  padding: 3px 6px;
  display: flex;
  align-items: center;
}

.subheader .reviews .review-logo img
{
  height: 16px;
  width: auto;
  display: block;
}

.subheader .subheader-usp
{
  color: var(--cv-geel);
  font-weight: 700;
  font-size: 1.3rem;
  white-space: nowrap;
}


/* =================================================== telefoonknop in de nav */

/* Het thema wisselt naar het hamburgermenu op 1200 px, niet op 768: in
   style.min.css staat `.nav{display:none}` onder `@media (max-width:1200px)`.
   Deze regels moeten daar dus bovenuit blijven. Een kale `.menu .nav` is
   0-2-0 en wint van die 0-1-0, met als gevolg dat het bureaubladmenu tot en
   met telefoonformaat over de pagina heen komt te staan. */
@media screen and (min-width: 1201px)
{
  .menu .nav
  {
    display: flex;
    align-items: center;
    gap: 28px;
  }

  .menu .nav .nav-telefoon
  {
    background: var(--cv-inkt);
    color: #fff;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 6px;
    font: 700 1.3rem/1 Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
  }

  .menu .nav .nav-telefoon:hover
  {
    background: #000;
    color: var(--cv-geel);
  }
}


/* ============================================ beltoets naast het menu-icoon */

.menu .header-bel
{
  display: none;
}


/* ============================================ ruimte onder de vaste balken */

/* De topbalk en het menu staan vast bovenaan en zijn samen 134 px hoog op
   desktop, 114 px op de telefoon. De gele band schuift daar bewust onderdoor,
   maar de tekst erin deed dat ook: op /caravans-verkopen/ begon de H1 op 0 px
   en stond dus volledig achter de balken.

   Het thema kent drie banden. eyecandy houdt 50 px aan, subeyecandy niets en
   eyecandy_home 150 px op desktop maar 50 px op de telefoon. Alleen die eerste
   150 was genoeg. */
section.eyecandy .content,
section.subeyecandy .content,
section.eyecandy_home .container .content
{
  padding-top: 154px;
}

/* subeyecandy heeft een vaste hoogte in vh. De kop past daar niet meer in
   zodra hij op twee regels valt, en botst dan op wat eronder staat. */
section.subeyecandy
{
  height: auto;
  min-height: 12vh;
}

/* De sectie eronder schuift met -40 px over de band heen; dat is de bedoeling,
   het formulier hoort op de rand te liggen. De kop moet daar dan wel boven
   blijven, anders loopt hij door de stappenbalk. */
section.subeyecandy .content
{
  padding-bottom: 56px;
}

/* Vervangt de gele band op pagina's waar die niets te tonen heeft. */
.kopruimte
{
  height: 134px;
}


/* ================================================================ contrast */

/* Het thema kleurt met `a{color:#fc0}` elke link geel. Op de zwarte vlakken
   levert dat 15,6:1 en dat is prima, maar op wit of lichtgrijs 1,35:1: dan is
   de link letterlijk niet te lezen. Denk aan het e-mailadres op /contact/.
   Binnen main wordt zo'n link zwart met onderstreping; de onderstreping houdt
   hem herkenbaar. Links met een eigen klasse (knoppen, menu, kaarten) blijven
   ongemoeid, die hebben hun eigen kleur al. */
main a:not([class]):not([class=""])
{
  color: var(--cv-inkt);
  text-decoration: underline;
}

main a:not([class]):not([class=""]):hover
{
  text-decoration: none;
}

/* Geel op lichtgrijs geeft 1,35:1. Op /werkplaats/ staat de kop "Waarom
   kiezen voor Snoeken Caravans" daardoor vrijwel onzichtbaar op de pagina. */
section.centertekst .container h2
{
  color: var(--cv-inkt);
}

/* Het thema zet de contrastkleur van Gravity Forms alleen voor formulier 1.
   Op het contactformulier bleef de knop "Versturen" daardoor wit op geel:
   1,51:1. Zwart op geel is 11,8:1. */
.gform-theme
{
  --gf-color-primary: #FFCC00;
  --gf-color-primary-contrast: #111;
}

#gform_wrapper_1 .gform_button.button,
#gform_wrapper_2 .gform_button.button,
#gform_wrapper_3 .gform_button.button
{
  color: var(--cv-inkt);
}


/* ============================================================== focusring */

/* Geen enkel veld van Gravity Forms liet bij focus iets zien: geen outline,
   geen schaduw, geen randverandering. Wie het formulier met het toetsenbord
   invult, weet in een flow van vijf stappen niet waar hij staat. */
.gform_wrapper :is(input, select, textarea, button):focus-visible,
.caravan-shortcode-form :is(select, button):focus-visible,
.actiebalk a:focus-visible,
.menu .header-bel:focus-visible,
.merk-knop:focus-visible
{
  outline: 3px solid var(--cv-inkt);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Op zwarte vlakken is inkt op inkt onzichtbaar. */
.merk-cta a:focus-visible,
.merk-contact a:focus-visible,
.subheader a:focus-visible,
.footer a:focus-visible
{
  outline: 3px solid var(--cv-geel);
  outline-offset: 2px;
}

/* Een toetsenbordgebruiker moet het menu kunnen overslaan. Het thema heeft de
   opmaak voor een skip-link wel, maar de link zelf ontbrak. */
.skip-link
{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
}

.skip-link:focus
{
  left: 8px;
  top: 8px;
  padding: 12px 18px;
  background: var(--cv-inkt);
  color: var(--cv-geel);
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
}


/* ====================================================== aanvraagformulier */

/* Onder 16px zoomt iOS automatisch in zodra een veld focus krijgt, en komt
   daar niet uit terug. De velden stonden op 14px, dus elke tik liet de pagina
   verspringen. Dit is de hele oplossing. */
.gform_wrapper :is(input, select, textarea)
{
  font-size: 16px;
}

/* Het kentekenveld was het enige optionele veld en tegelijk het felste en
   grootste element op het scherm: geel, zwarte rand, 24px. De verplichte
   velden ernaast waren wit op 14px. De blik ging naar het veld dat er niet
   toe doet. */
.gform_wrapper #input_1_38
{
  background: #fff;
  border: 1px solid #e0e0e0;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gform_wrapper #input_1_38:focus
{
  background: var(--cv-geel);
  border-color: var(--cv-inkt);
}

/* De primaire actie was 96x38 met tekst van 14px, kleiner dan het optionele
   veld erboven. */
.gform_wrapper :is(.gform_next_button, .gform_button, .gform_previous_button)
{
  min-height: 48px;
  padding-inline: 24px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
}

.gform_wrapper .gform_next_button,
.gform_wrapper .gform_button
{
  flex: 1;
}


/* ------------------------------------------------------- de stappenbalk */

/* De labels waren wit: 1,12:1 op het grijze vlak, 1,51:1 waar de balk over
   het geel valt. Onleesbaar in beide gevallen. */
.gform_wrapper .gf_page_steps .gf_step_label
{
  color: var(--cv-inkt);
  font-weight: 700;
}

/* Alle vijf de bolletjes waren identiek: er was geen verschil tussen de stap
   waar je staat, de stappen die je gehad hebt en wat er nog komt. */
.gform_wrapper .gf_page_steps .gf_step_number
{
  color: var(--cv-inkt);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

.gform_wrapper .gf_page_steps .gf_step_active .gf_step_number
{
  background: var(--cv-inkt);
  border-color: var(--cv-inkt);
  color: var(--cv-geel);
}

.gform_wrapper .gf_page_steps .gf_step_completed .gf_step_number
{
  background: var(--cv-inkt);
  border-color: var(--cv-inkt);
  color: transparent;
  position: relative;
}

.gform_wrapper .gf_page_steps .gf_step_completed .gf_step_number::before
{
  content: '\2713';
  position: absolute;
  inset: 0;
  color: var(--cv-geel);
  font-size: 13px;
  line-height: 24px;
  text-align: center;
}

.gform_wrapper .gf_page_steps .gf_step_active .gf_step_label
{
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ------------------------------------------------------ de foutmelding */

/* Zwart op #c02b0a is 3,59:1 en zakt daarmee door AA bij 15px. Wit op
   hetzelfde rood is 5,9:1. */
.gform_wrapper .gform_validation_errors
{
  background: #b3261e;
  border: 0;
  border-left: 6px solid #7a1912;
  border-radius: 8px;
}

.gform_wrapper .gform_validation_errors :is(h2, p, a, span)
{
  color: #fff;
}

.gform_wrapper .gfield_error .gfield_label,
.gform_wrapper .gfield_validation_message
{
  color: #b3261e;
  font-weight: 700;
}

.gform_wrapper .gfield_error :is(input, select, textarea)
{
  border: 2px solid #b3261e;
}


/* =========================================================== mobiele balk */

.actiebalk
{
  display: none;
}


/* ============================================= hamburgermenu: tot en met 1200 */

/* Vanaf hier verdwijnt .nav, en daarmee het telefoonnummer in de balk. De
   beltoets neemt die taak over, dus die hoort in hetzelfde bereik te staan. */
@media screen and (max-width: 1200px)
{
  .menu .header-bel
  {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 10px;
    border-radius: 8px;
    background: var(--cv-inkt);
    color: var(--cv-geel);
    font-size: 18px;
    text-decoration: none;
  }

  .menu .header-bel:hover
  {
    color: #fff;
  }

  /* Het menu-icoon wordt een echte knop van 44x44, zodat het net als de
     beltoets de tikdoelnorm haalt. De drie streepjes blijven; alleen het
     omhulsel verandert. */
  .menu .mobile-menu-toggle
  {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 2px solid var(--cv-inkt);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .menu .mobile-menu-toggle > span
  {
    width: 22px;
    height: 3px;
    margin-bottom: 4px;
    border-radius: 2px;
  }

  .menu .mobile-menu-toggle > span:nth-of-type(3)
  {
    margin-bottom: 0;
  }

  .menu .mobile-menu-toggle > input
  {
    width: 44px;
    height: 44px;
    top: 0;
    left: 0;
  }
}


/* ====================================================== telefoon: tot 768 */

@media screen and (max-width: 768px)
{
  /* Het thema verbergt het label "Bekijk onze reviews" op mobiel, dus in de
     zwarte balk blijft alleen een logo van 30 px over. Ruimte genoeg voor de
     belofte: gemeten 197 px op een scherm van 390, 320 px is de ondergrens. */
  .subheader .subheader-usp
  {
    font-size: 1.15rem;
  }

  .subheader .reviews a
  {
    font-size: 1.2rem;
  }

  /* Het thema geeft het logo een vaste 250 px. Samen met de beltoets en het
     menu-icoon van elk 44 px is dat precies de containerbreedte: het logo
     raakte de belknop zonder een pixel ertussen. */
  header.menu .container.flex .logo
  {
    width: min(190px, 46vw);
  }

  /* ------------------------------------------------------- tikdoelen */

  /* Gemeten op elke pagina: de reviewslink 30x22, de logolink 20 px hoog en
     tien footerlinks van 20 px. De norm is 44x44. */
  .subheader .reviews a
  {
    min-height: 40px;
    padding-inline: 4px;
  }

  header.menu .container.flex .logo a,
  .footer .footer-logo a
  {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .footer p a
  {
    display: inline-block;
    padding-block: 11px;
    line-height: 1.2;
  }

  /* ------------------------------------------- formulier op de telefoon */

  /* Vijf namen naast elkaar passen niet op 390 px. Het thema loste dat op
     door alles te verbergen, inclusief de nummers, met vijf lege witte
     pillen als resultaat. Nu blijven de nummers staan en verschijnt de naam
     van de stap waar je daadwerkelijk bent eronder. */
  .gform_wrapper .gf_page_steps
  {
    position: relative;
    padding-bottom: 26px;
  }

  .gform_wrapper .gf_page_steps .gf_step_number
  {
    font-size: 1.3rem;
  }

  .gform_wrapper .gf_page_steps .gf_step_label
  {
    display: none;
  }

  .gform_wrapper .gf_page_steps .gf_step_active .gf_step_label
  {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    white-space: nowrap;
    font-size: 1.3rem;
  }

  .gform_wrapper .gform_page_footer
  {
    flex-wrap: wrap;
  }

  .gform_wrapper :is(.gform_next_button, .gform_button)
  {
    width: 100%;
  }

  /* De gele knop in de actiebalk verwees op deze pagina naar deze pagina.
     Het formulier draait op ajax, dus aantikken herlaadt alles en gooit de
     hele invoer weg, tot en met de geuploade fotos. De beltoets in de kop
     staat vast in beeld, dus er gaat niets verloren door de balk hier weg
     te laten. */
  .page-template-page_caravansverkopen .actiebalk
  {
    display: none;
  }

  .page-template-page_caravansverkopen .footer
  {
    padding-bottom: 0;
  }

  section.eyecandy .content,
  section.subeyecandy .content,
  section.eyecandy_home .container .content
  {
    padding-top: 130px;
  }

  section.subeyecandy
  {
    min-height: 28vh;
  }

  .kopruimte
  {
    height: 114px;
  }

  /* ----------------------------------------------------- vaste actiebalk */

  .actiebalk
  {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4000;
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .12);
  }

  .actiebalk-knop
  {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font: 800 1.6rem/1 'Nunito Sans', system-ui, sans-serif;
    text-decoration: none;
  }

  .actiebalk-knop--bod
  {
    flex: 1;
    background: var(--cv-geel);
    color: var(--cv-inkt);
  }

  .actiebalk-knop--bod:hover
  {
    background: var(--cv-geel-diep);
    color: var(--cv-inkt);
  }

  .actiebalk-knop--bel
  {
    padding: 0 18px;
    background: var(--cv-inkt);
    color: #fff;
  }

  .actiebalk-knop--bel:hover
  {
    color: var(--cv-geel);
  }

  /* Ruimte onder de footer, zodat de balk de laatste regels niet afdekt. */
  .footer
  {
    padding-bottom: 88px;
  }

  /* Het mobiele menu ligt over de actiebalk heen wanneer het open staat. */
  #menuToggle input:checked ~ .mobile-menu
  {
    z-index: 4500;
  }
}