/**
 * Nexus Games, correcties op het thema.
 *
 * Bigtech plakt op twee plekken een witte PNG van 39 pixels hoog die een
 * gescheurde papierrand moet voorstellen. Dat werkt op de lichte
 * demopagina's van het thema, maar hier is alles donker en snijdt die
 * strook dwars door de pagina.
 *
 * Er is geen instelling voor in het thema, het zit vast in de CSS. En
 * omkleuren helpt niet: welke kleur je ook kiest, hij botst met de
 * gekleurde banner erachter.
 *
 * Dit bestand laadt op elke pagina van de site. Wil je het niet, zet dan
 * het filter nxg_theme_fixes op false.
 */

.breadcrumb-bg::before,
.breadcrumb-area::before,
.breadcrumb-area::after,
.footer-area-three .footer-top-wrap::before,
.footer-top-wrap::before {
	display: none;
}

/* De kop van het thema laat een lichte rand achter op een donkere
   pagina. */
.menu-area {
	border-bottom-color: rgba( 164, 180, 195, .12 );
}

/* De vervangen kruimel op een detailpagina. */
.nxg-kruimel__pijl {
	display: inline-block;
	margin: 0 .5rem;
	opacity: .55;
}

/* ------------------------------------- de ruimte onder een pagina */

/* Het thema zet 130 pixels onder de inhoud met de hulpklasse pb-130, en
   de voettekst begint daarna met nog eens 120 pixels. Die 120 waren er
   om plaats te maken voor de gescheurde rand die we hierboven weghalen,
   dus die ruimte staat nu leeg.
   
   Samen met de ruimte die onze eigen blokken al meebrengen wordt dat een
   gat van een halve schermhoogte. */
.tg-page-area.pb-130,
.page-area.pb-120 {
	padding-bottom: 40px;
}

.tg-page-area.pt-130,
.page-area.pt-120 {
	padding-top: 40px;
}

.footer-area-three .footer-top-wrap {
	padding-top: 56px;
}

/* Op een telefoon mag het nog krapper: daar telt elke schermhoogte. */
@media (max-width: 767px) {
	.tg-page-area.pb-130,
	.page-area.pb-120 {
		padding-bottom: 24px;
	}

	.tg-page-area.pt-130,
	.page-area.pt-120 {
		padding-top: 24px;
	}

	.footer-area-three .footer-top-wrap {
		padding-top: 40px;
	}
}

/* ------------------------------------------ de banner boven een pagina */

/* Het thema zet 235 pixels boven en 150 onder de titel. Dat was bedoeld
   voor een grote foto met tekst erop; hier staat er alleen een titel en
   een kruimel in, en dan is het vooral leegte.
   
   De 235 bovenaan waren nodig omdat de menubalk over de banner heen valt.
   Die ruimte moet dus blijven, alleen minder ruim: genoeg om het menu
   vrij te laten en de titel gecentreerd te houden. */
.breadcrumb-bg {
	padding: 150px 0 60px;
}

.breadcrumb-content .title {
	margin-bottom: 14px;
	font-size: 46px;
}

@media (max-width: 991px) {
	.breadcrumb-bg {
		padding: 120px 0 44px;
	}

	.breadcrumb-content .title {
		font-size: 34px;
	}
}

@media (max-width: 575px) {
	.breadcrumb-bg {
		padding: 105px 0 36px;
	}

	.breadcrumb-content .title {
		font-size: 28px;
	}
}

/* De kruimel eronder wat rustiger. */
.breadcrumb-content .breadcrumb {
	margin-bottom: 0;
	font-size: 13px;
	letter-spacing: .08em;
	opacity: .8;
}

/* Op de startpagina hoort er geen banner: die heeft zijn eigen kop met
   de openingsstatus, de titel en de knoppen. */
.home .breadcrumb-area,
.nxg-donkere-pagina.home .breadcrumb-area {
	display: none;
}

/* ------------------------------- de kopbalk op een smaller scherm */

/* Het thema laat zijn menu over twee regels vallen zodra er te weinig
   plaats is, terwijl het logo links op zijn volle hoogte blijft staan.
   De tweede regel schuift dan onder het logo door.

   Onder de 1300 pixels maken we het logo kleiner en de afstand tussen de
   menu-items korter, zodat alles op één regel past tot het echte
   telefoonmenu overneemt. */
@media (max-width: 1300px) {
	.menu-area .logo img,
	.menu-area .logo-img img,
	.tgmenu__logo img {
		max-height: 76px;
		width: auto;
	}

	.tgmenu__navbar-wrap > ul > li,
	.navbar-wrap > ul > li {
		margin-right: 18px;
	}

	.tgmenu__navbar-wrap > ul > li > a,
	.navbar-wrap > ul > li > a {
		font-size: 14px;
		letter-spacing: 0;
	}
}

@media (max-width: 1100px) {
	.menu-area .logo img,
	.menu-area .logo-img img,
	.tgmenu__logo img {
		max-height: 62px;
	}

	.tgmenu__navbar-wrap > ul > li,
	.navbar-wrap > ul > li {
		margin-right: 12px;
	}

	.tgmenu__navbar-wrap > ul > li > a,
	.navbar-wrap > ul > li > a {
		font-size: 13px;
	}
}

/* ------------------------------- het logo achter de menu-items */

/* Het logo is rond met een gloed eromheen, en dat vlak is breder dan de
   afbeelding lijkt. Het schuift daardoor over de eerste menu-items heen,
   en omdat het later in de code staat, ligt het erbovenop.

   Twee dingen lossen dat op: het logo krijgt zijn eigen ruimte en mag daar
   niet buiten, en het menu komt erboven te liggen. */
.menu-area .logo,
.menu-area .logo-img,
.tgmenu__logo,
.tgmenu__wrap .logo {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	max-width: 190px;
}

.menu-area .logo img,
.menu-area .logo-img img,
.tgmenu__logo img,
.tgmenu__wrap .logo img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* De navigatie ligt erboven, zodat een gloed er nooit overheen valt en
   elke link aanklikbaar blijft. */
.tgmenu__navbar-wrap,
.navbar-wrap,
.menu-area .navbar-wrap,
.tgmenu__main-menu {
	position: relative;
	z-index: 3;
}

/* De rij zelf laten uitlijnen in plaats van laten overlopen. */
.menu-area .tgmenu__wrap,
.menu-area .row,
.tgmenu__wrap {
	align-items: center;
}

/* De open-status naast het menu mag als eerste inschikken: die is
   informatie, geen navigatie. */
@media (max-width: 1200px) {
	.nxg-kopstatus__pil {
		padding: .2rem .6rem;
		font-size: .72rem;
	}
}

@media (max-width: 980px) {
	.nxg-kopstatus {
		display: none;
	}
}

/* ======================= geen dubbel kader op de nieuwsbriefpagina */

/* Waar dat tweede kader vandaan komt, hangt af van hoe de pagina in de
   editor opgebouwd is: een groep of kolom met een eigen achtergrond
   tekent er ook een. Dit zet elk kader rond onze inhoud uit, ongeacht wie
   het tekende. */
/* Let op: enkel de inschrijfpagina. Het blok in het account heet bijna
   hetzelfde en heeft zijn opmaak wel nodig. */
.nxg-inschrijf,
.nxg-inschrijf .nxg-ui__wrap {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* De blokken van de editor rond de shortcode. */
.nxg-inschrijf-pagina .wp-block-group,
.nxg-inschrijf-pagina .wp-block-column,
.nxg-inschrijf-pagina .entry-content > div,
.nxg-inschrijf-pagina .post-content > div {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* =============================== de kopbalk bij het scrollen */

/* Het wegvagen begint nu al na een halve vingerbeweging, en dan mag het
   ook rustig gebeuren. Een trage overgang op een vroeg moment voelt
   zachter dan een snelle op een laat moment: je tekst is meteen vrij, en
   de balk verdwijnt ondertussen zonder dat het opvalt. */
.menu-area,
.sticky-menu,
.tgmenu__wrap,
.header-fixed-height,
.menu-area .logo,
.menu-area .logo img,
.tgmenu__logo,
.tgmenu__logo img,
.transparent-header {
	transition-duration: .55s;
	transition-timing-function: ease-in-out;
}

/* Het invliegen van de vastgeplakte balk is een animatie, geen overgang;
   die heeft zijn eigen duur nodig. */
.sticky-menu,
.menu-area.sticky-menu,
.tgmenu__wrap.sticky-menu {
	animation-duration: .5s;
}

/* Wie liever geen beweging heeft, krijgt ze niet. */
@media (prefers-reduced-motion: reduce) {
	.menu-area,
	.sticky-menu,
	.tgmenu__wrap,
	.menu-area .logo,
	.menu-area .logo img,
	.tgmenu__logo img {
		transition: none;
		animation: none;
	}
}

/* De doorzichtige kopbalk ligt over de eerste schermvulling heen. Zodra je
   begint te scrollen, hoort ze weg te zijn: het thema wacht daar een paar
   honderd pixels mee, en tot dan lees je door je eigen menu heen. */
.transparent-header:not( .sticky-menu ),
.menu-area:not( .sticky-menu ) .tgmenu__wrap,
#header:not( .sticky-menu ) .transparent-header {
	transition: opacity .55s ease-in-out;
}

.nxg-gescrold .transparent-header:not( .sticky-menu ),
.nxg-gescrold .menu-area:not( .sticky-menu ) .tgmenu__wrap,
.nxg-gescrold #header:not( .sticky-menu ) .transparent-header {
	opacity: 0;
	pointer-events: none;
}

/* De vastgeplakte balk die daarna verschijnt, blijft gewoon staan. */
.nxg-gescrold .sticky-menu,
.nxg-gescrold .sticky-menu .tgmenu__wrap {
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.nxg-gescrold .transparent-header:not( .sticky-menu ),
	.nxg-gescrold .menu-area:not( .sticky-menu ) .tgmenu__wrap {
		transition: none;
	}
}