/* ---------------------------------------------------------------------------
   Knoppen naar het aanvraagformulier op schatting.dehuiskoper.be

   Apart bestand, zodat style.css (gegenereerd uit LESS) ongemoeid blijft en
   een nieuwe build deze regels niet overschrijft.

   De stijl volgt de site: zelfde maatvoering, Gilroy-Black, hoofdletters,
   vierkante hoeken. Alleen de kleuren zijn omgedraaid, zodat de knop naar het
   formulier zwaarder weegt dan de gele belknop ernaast.

   Alles hangt aan de href. Wie in de Kirby-panel een knop toevoegt die naar
   het formulier wijst, krijgt deze stijl dus vanzelf.
   --------------------------------------------------------------------------- */

.layoutpage .column-grid .block-type-button .block_btn[href*="schatting.dehuiskoper.be"],
a.more[href*="schatting.dehuiskoper.be"] {
  background: #000;
  color: #ffff33;
}

.layoutpage .column-grid .block-type-button .block_btn[href*="schatting.dehuiskoper.be"]:hover,
.layoutpage .column-grid .block-type-button .block_btn[href*="schatting.dehuiskoper.be"]:focus-visible,
a.more[href*="schatting.dehuiskoper.be"]:hover,
a.more[href*="schatting.dehuiskoper.be"]:focus-visible {
  background: #ffff33;
  color: #000;
}

/* Staat er een belknop onder, dan mogen ze niet tegen elkaar plakken. */
.layoutpage .column-grid .block-type-button:has(a[href*="schatting.dehuiskoper.be"]) + .block-type-button {
  margin-top: 12px;
}

/* De link middenin de tekst van stap 1. */
.innerscreen .txt a[href*="schatting.dehuiskoper.be"] {
  color: #000;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 3px solid #ffff33;
  padding-bottom: 1px;
  -webkit-transition: background 0.3s ease, border-color 0.3s ease;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.innerscreen .txt a[href*="schatting.dehuiskoper.be"]:hover,
.innerscreen .txt a[href*="schatting.dehuiskoper.be"]:focus-visible {
  background: #ffff33;
  border-color: #000;
}

/* Toetsenbordgebruikers moeten zien waar ze staan. */
.layoutpage .column-grid .block-type-button .block_btn[href*="schatting.dehuiskoper.be"]:focus-visible,
a.more[href*="schatting.dehuiskoper.be"]:focus-visible,
.innerscreen .txt a[href*="schatting.dehuiskoper.be"]:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Hetzelfde in de navigatie, de hamburger en de footer.

   Elke plek heeft een andere ondergrond, dus de knop keert telkens om. Alleen
   merkkleuren, nooit een derde kleur:

     hoofdnavigatie  wit      -> zwart met gele letters
     hamburger       geel     -> zwart met gele letters
     footer          zwart    -> geel met zwarte letters

   De boilerplate zet in de hoofdnavigatie zelf geel op wit; dat is onleesbaar
   (contrast ongeveer 1:1). Deze regels corrigeren dat voor deze ene knop
   zonder style.css aan te raken.
   --------------------------------------------------------------------------- */

header .header .flexrow .right nav > ul > li > a.buttonstyle[href*="schatting.dehuiskoper.be"],
header .header .flexrow .right .topnav ul li a.buttonstyle[href*="schatting.dehuiskoper.be"],
.mobile_holder .left .mobile_nav a.buttonstyle[href*="schatting.dehuiskoper.be"] {
  background: #000;
  color: #ffff33;
}

header .header .flexrow .right nav > ul > li > a.buttonstyle[href*="schatting.dehuiskoper.be"]:hover,
header .header .flexrow .right nav > ul > li > a.buttonstyle[href*="schatting.dehuiskoper.be"]:focus-visible,
header .header .flexrow .right .topnav ul li a.buttonstyle[href*="schatting.dehuiskoper.be"]:hover,
header .header .flexrow .right .topnav ul li a.buttonstyle[href*="schatting.dehuiskoper.be"]:focus-visible,
.mobile_holder .left .mobile_nav a.buttonstyle[href*="schatting.dehuiskoper.be"]:hover,
.mobile_holder .left .mobile_nav a.buttonstyle[href*="schatting.dehuiskoper.be"]:focus-visible {
  background: #ffff33;
  color: #000;
}

footer .flex .right .col1 a.buttonstyle[href*="schatting.dehuiskoper.be"] {
  background: #ffff33;
  color: #000;
}

footer .flex .right .col1 a.buttonstyle[href*="schatting.dehuiskoper.be"]:hover,
footer .flex .right .col1 a.buttonstyle[href*="schatting.dehuiskoper.be"]:focus-visible {
  background: #fff;
  color: #000;
}