/* ---------------------------------------------------------------------------
   Aanvullingen op global.css. Bewust een apart bestand: global.css is geminificeerd
   en 30 KB lang, en de drie dingen die hieronder rechtgezet worden zijn daarin niet
   terug te vinden zonder de hele boel te herformatteren. Wat hier staat wint omdat
   het na global.css geladen wordt.

   1. De achtergrond. global.css wijst naar
      http://www.hng-group.com/community/wp-content/uploads/2015/09/...AVS-36.jpg
      Dat is http:// op een https-pagina, dus de browser blokkeert het als onveilige
      inhoud en de achtergrond komt nooit in beeld. Hij staat nu lokaal, als WebP:
      666 KB PNG teruggebracht naar 120 KB, wat onder de sluier hieronder niet te
      zien is.

   2. De knopranden. global.css haalt border-image van http://jacobfalk.dk/, een
      privedomein dat niets met dit project te maken heeft. Diezelfde twee bestanden
      staan gewoon in images/, dus die worden hier lokaal aangewezen.

   3. Een donkere sluier over het beeld, zodat tekst en bedragen leesbaar blijven.
      De drie waarden lopen op omdat de onderkant van de key art een felrode strook
      bevat waar tekst anders in wegvalt.
   --------------------------------------------------------------------------- */

html {
    background: #242424 url(../images/Backgrounds/hng-key-art.webp) no-repeat center top;
    background-size: cover;
}

/* Vast aan het scherm en niet aan de inhoud: .wrap doet het scrollen (overflow:auto),
   dus een sluier die meescrollt zou onderaan een lange pagina ophouden. */
body::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(26, 26, 26, 0.53) 0%,
        rgba(26, 26, 26, 0.51) 45%,
        rgba(26, 26, 26, 0.91) 100%);
}

/* Boven de sluier uit. Zonder dit verdwijnt de hele pagina eronder. */
.wrap {
    position: relative;
    z-index: 1;
}

/* De knoppen. global.css tekent er vier losse hoekhaken omheen met een border-image van
   45x45, gesneden op 21 en teruggeperst in een rand van 7 pixels. Daar komt bij dat
   button.btn de achtergrond op none zet, zodat die haken om niets heen staan: vier
   zwevende hoekjes rond losse tekst.

   Vandaar een effen vlak. De doorgaan-knop krijgt goud, omdat op een pagina waar iemand
   op het punt staat te betalen precies een handeling de hoofdhandeling is en de rest niet.

   De twee gifs blijven in images/ staan; ze worden alleen niet meer gebruikt. */
.btn:before,
.btn:after {
    display: none;
}

.btn,
button.btn,
input[type="button"].btn,
input[type="reset"].btn,
input[type="submit"].btn {
    background: transparent;
    border: 1px solid #5a544a;
    border-radius: 2px;
    color: #ece6d4;
    text-transform: uppercase;
    padding: 11px 30px 9px;
    transition: background .15s, border-color .15s, color .15s;
}

.btn:hover,
button.btn:hover,
input[type="button"].btn:hover,
input[type="reset"].btn:hover,
input[type="submit"].btn:hover {
    background: rgba(248, 177, 51, 0.08);
    border-color: #f8b133;
    color: #f8b133;
}

/* De hoofdhandeling staat vanaf het begin in goud in plaats van pas bij hover, zodat op
   een pagina waar iemand op het punt staat te betalen zichtbaar is welke knop verder gaat
   en welke terug. De namen zijn de action-waarden van de knoppen in het bestelformulier. */
.btn.primary,
button.btn[value="pbic"],
button.btn[value="epi"],
button.btn[value="ccc"],
button.btn[value="summary"],
button.btn[value="buy"] {
    border-color: #f8b133;
    color: #f8b133;
}

.btn.primary:hover,
button.btn[value="pbic"]:hover,
button.btn[value="epi"]:hover,
button.btn[value="ccc"]:hover,
button.btn[value="summary"]:hover,
button.btn[value="buy"]:hover {
    background: rgba(248, 177, 51, 0.14);
    border-color: #ffc157;
    color: #ffc157;
}

/* ---------------------------------------------------------------------------
   Lange juridische documenten: privacyverklaring, voorwaarden, gebruiksvoorwaarden.

   De master zet de inhoud in <div class="row center">, en global.css geeft .row
   display:flex met flex-wrap:wrap. Elke <p> wordt daardoor een flex-item: de
   alinea's komen naast elkaar op een regel te staan in plaats van eronder, en
   omdat flex-items geen tussenruimte krijgen plakt de tekst aan elkaar. Op de
   privacypagina las dat als "Last revised: 21 August 202618+ This Service is
   only for persons aged 18 or older" en stond "Game and service information"
   rechts naast de opsomming.

   Die opmaak is gemaakt voor korte formulieren met een paar vakjes naast elkaar,
   niet voor een doorlopend document van vijfentachtig alinea's. Dit omhulsel is
   zelf het enige flex-item; binnen een gewone blokcontainer vallen de alinea's
   weer normaal onder elkaar. Geen wijziging aan global.css, zodat de pagina's
   die de rasterindeling wel nodig hebben onaangeroerd blijven.
   --------------------------------------------------------------------------- */
.legalDoc {
    width: 100%;
    text-align: left;
}

.legalDoc ul {
    padding-left: 22px;
}