/*
 * Homepage-styling (alleen geladen op de voorpagina via inc/home-page.php).
 * Tokens: accent #5d9cec, tekst #333, borders #ddd.
 */

/* --- Mobiel-only helper (tegenhanger van .hidden-xs in main.css) ------- */
.visible-xs { display: none !important; }
@media (max-width: 767px) {
	.visible-xs { display: block !important; }
}

/* --- Vergelijkerblok (mobiel, horizontaal scrollend) ------------------- */
#homeVergelijkerWrap { padding: 0 15px; }
#vergelijkerBlokH2 { padding-top: 10px; }
#schuifMeer { margin-top: 0; padding-top: 0; }

/* Live-waarden (gemeten met CSS.getMatchedStylesForNode op www.iphone.nl):
   #vergelijkerBlok{position:relative;height:90px;width:99%;margin:2px auto 10px;
     text-align:left;white-space:nowrap;overflow-x:auto;overflow-y:hidden}
   .vergelijkerBlokItem{display:inline-block;margin-right:20px;height:6em;padding:3px;
     white-space:normal;font-size:14px}  @max-767{font-size:12px}
   .vergelijkerBlokItem .fa-mobile{float:left;font-size:80px}
   .vergelijkerBlokHead{font-weight:600;font-size:17px;margin-left:50px} @max-767{font-size:14px}
   .vergelijkerBlokContent{margin-left:40px}
   Dus GEEN kaartjes met kader, maar een rij van 163px brede items met een groot
   telefoonicoon links en de tekst ernaast (gemeten live: blok h=90, item h=72). */
#vergelijkerBlok {
	position: relative;
	height: 90px;
	width: 99%;
	margin: 2px auto 10px;
	text-align: left;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	vertical-align: middle;
}

.vergelijkerBlokItem {
	display: inline-block;
	vertical-align: top;
	margin-right: 20px;
	height: 6em;
	padding: 3px;
	font-size: 14px;
	white-space: normal;
}
@media (max-width: 767px) {
	.vergelijkerBlokItem { font-size: 12px; }
	.vergelijkerBlokHead { font-size: 14px; }
}

.vergelijkerBlokItem .fa-mobile {
	float: left;
	font-size: 80px;
	color: #333;
}

.vergelijkerBlokHead {
	margin-left: 50px;
	font-size: 17px;
	font-weight: 600;
	color: #333;
}

.vergelijkerBlokContent { margin-left: 40px; text-align: left; }
.vergelijkerBlokContent .fa-ul { margin-left: 1.6em; margin-bottom: 0; }
.vergelijkerBlokContent li { white-space: nowrap; }
.vergelijkerBlokContent a { font-weight: 500; color: #5d9cec; }
.vergelijkerBlokContent .fa-chevron-right { font-size: 10px; padding-top: 3px; }

/* De oude noodgreep (#nieuwsFilterRow als flexrij met 3x33,3%) is vervallen:
   main.css bevat inmiddels het col-xs/col-sm-grid en live verdeelt deze balk
   als col-sm-4 | col-sm-5 | col-sm-3 (gemeten x/w: 143/253, 396/317, 712/190). */

/* --- Nieuwslijst: afsluitende uitlegtekst ------------------------------ */
.divider-dotted {
	margin: 15px 0;
	border-bottom: 1px dotted #ddd;
}
.newsListExplain {
	color: #777;
	font-size: 13px;
}

/* --- Sidebar: tabs "Beste iPhone deals" -------------------------------- */
#siderBlokNav {
	display: flex;
	width: 100%;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}
#siderBlokNav .nav-item { width: 50%; }
#siderBlokNav .nav-item a {
	display: block;
	padding: 8px 0;
	color: #444;
	text-decoration: none;
}
#siderBlokNav .nav-item a:hover { background: none; }
#losseToestellen { text-align: right; }
#siderBlokNav .nav-item.active,
#siderBlokNav .nav-item:hover { border-bottom: 2px solid #f49600; }
.clear-both { clear: both; }

/* --- CTA-knoppen -------------------------------------------------------
 * Basisstyling zodat de knoppen er sowieso goed uitzien; de definitieve
 * .btn-primary-klasse komt in de gedeelde stylesheet (agent E). */
.btn-primary {
	background: #5d9cec;
	border-color: #5d9cec;
	color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
	background: #4a8be0;
	border-color: #4a8be0;
	color: #fff;
}
.btn-block {
	display: block;
	width: 100%;
	margin: 5px 0;
	text-align: center;
}

/* --- "Over deze website"-blok ------------------------------------------ */
.home-sidebar hr {
	margin: 15px 0;
	border: 0;
	border-top: 1px solid #ddd;
}
.home-over-content h1 { font-size: 22px; margin: 10px 0; color: #333; }
.home-over-content h2 { font-size: 18px; margin: 15px 0 8px; color: #333; }
.home-over-content h3 { font-size: 16px; margin: 12px 0 6px; color: #333; }
.home-over-content p,
.home-over-content li { font-size: 13px; color: #333; }
.home-over-content a { color: #5d9cec; }