/* =========================================================================
   iPhone.nl theme — article.css
   Styling voor de artikeldetailpagina (single.php) en de gedeelde
   dealssidebar (template-parts/sidebar-deals.php) op artikel- en
   nieuwsarchiefpagina's. Geladen via inc/article-page.php.

   Waarden komen uit de originele stylesheet van www.iphone.nl:
   .blog-text koppen 24px/300/#333, .blog-social dotted border,
   .rrssb-buttons 36px hoog, .label-transparent/.label-xl, en het
   sidebarblok "Vergelijk toestellen en abonnementen".
   ========================================================================= */

/* ---- Extra Font Awesome-glyphs die main.css nog niet kent ---- */
.fa-undo::before { content: '\f0e2'; }

/* ---- Artikelbanner ------------------------------------------------------
   .banner/.blog-title/ul.blog-date staan al in main.css; hier alleen de
   aanvullingen: nette marge onder de banner en een nette terugval wanneer
   er geen uitgelichte afbeelding is. */
/* Live zet geen margin-bottom op .banner; de ruimte komt van .blog-summary. */
.banner { margin-bottom: 0; }
.banner-empty { background-color: #e9e9e9; height: 240px; }

/* ---- Samenvatting en artikeltekst --------------------------------------- */
.blog-summary p:last-child { margin-bottom: 0; }

/* Live: .blog-text h1,.blog-text h2,.blog-text h3,.blog-text h4
   { font-size:24px; font-weight:300; color:#333; padding-top:20px } — meer niet.
   line-height (1.1) en marge (20px boven / 10px onder) komen uit de basiscascade;
   met line-height:1.5 + margin:10px werd een kop 56 px i.p.v. 46,4 px hoog. */
.blog-text h1,
.blog-text h2,
.blog-text h3,
.blog-text h4 {
	font-size: 24px;
	font-weight: 300;
	color: #333;
	padding-top: 20px;
}
/* Live: .blog-text img { max-width:100%; padding:10px 0; height:auto !important } */
.blog-text img {
	max-width: 100%;
	height: auto;
	padding-top: 10px;
	padding-bottom: 10px;
}
.blog-text ul,
.blog-text ol { padding-left: 20px; }
.blog-text blockquote {
	margin: 15px 0;
	padding: 5px 15px;
	border-left: 3px solid var(--inl-accent);
	color: #555;
}
.blog-text iframe,
.blog-text video { max-width: 100%; }
.blog-text table { max-width: 100%; }
.blog-text figure { margin: 0; }
.blog-text .wp-caption-text,
.blog-text figcaption { font-size: 12px; color: #999; }

/* ---- Rubrieklabels onder het artikel ------------------------------------ */
.blog-cat { margin-top: 15px; }
/* Live: .label-transparent { border:1px solid #e0e0e0; color:#444; transition:.5s } */
.label-transparent { border: 1px solid #e0e0e0; color: #444; background-color: transparent; }
.label-transparent:hover { background-color: #888; color: #fff; }
/* Live: .label-xl { font-size:12px; padding:5px 8px; text-transform:uppercase; margin-bottom:10px } */
.label-xl { font-size: 12px; padding: 5px 8px; text-transform: uppercase; margin-bottom: 10px; }
.label-xl i { margin-right: 5px; }
/* Live: .label-apps { color/border: rgb(237,137,59) } */
.label-apps { color: #ed893b; border-color: #ed893b; }
.label-apps:hover, a:hover .label-apps { color: #fff; background-color: #ed893b; border-color: #ed893b; }
/* Op live staat .label-nieuws/.label-apps ná .label-transparent in de cascade;
   die kleuren winnen dus van het grijze basislabel. */
.label-transparent.label-nieuws { color: var(--inl-accent); border-color: var(--inl-accent); }
a:hover .label-transparent.label-nieuws { color: #fff; background-color: var(--inl-accent); border-color: var(--inl-accent); }
.label-transparent.label-apps { color: #ed893b; border-color: #ed893b; }
a:hover .label-transparent.label-apps { color: #fff; background-color: #ed893b; border-color: #ed893b; }

/* ---- Terugknop ---------------------------------------------------------- */
.detailpageBackButton { text-align: center; margin: 20px 0 5px; font-size: 13px; }
.detailpageBackButton .fa { margin-right: 5px; }

/* ---- Deelknoppen (rrssb-opmaak, zonder externe scripts) ------------------ */
.blog-social {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px dotted #e0e0e0;
}
.rrssb-buttons {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	font-size: 13px;
	margin: 0;
	padding: 0;
	width: 100%;
	list-style: none;
}
.rrssb-buttons li {
	box-sizing: border-box;
	height: 36px;
	line-height: 13px;
	list-style: none;
	margin: 0;
	padding: 0 2px;
	flex: 1 1 0;
}
.rrssb-buttons li.blog-share { flex: 0 0 auto; padding-right: 15px; }
.rrssb-buttons li.blog-share span {
	font-weight: 600;
	padding-top: 14px;
	display: inline-block;
	color: var(--inl-text);
	text-transform: none;
}
.rrssb-buttons li a {
	background-color: #ccc;
	border-radius: 2px;
	box-sizing: border-box;
	display: block;
	font-weight: 700;
	height: 100%;
	padding: 11px 7px 12px 27px;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease-in-out;
}
.rrssb-buttons li a:hover { text-decoration: none; }
.rrssb-buttons li a .rrssb-icon {
	display: block;
	left: 10px;
	padding-top: 9px;
	position: absolute;
	top: 0;
	width: 10%;
}
.rrssb-buttons li a .rrssb-icon svg { height: 17px; width: 17px; }
.rrssb-buttons li a .rrssb-icon svg path { fill: #fff; }
.rrssb-buttons li a .rrssb-text { color: #fff; }
.rrssb-buttons li.rrssb-facebook a { background-color: #306199; }
.rrssb-buttons li.rrssb-facebook a:hover { background-color: #244872; }
.rrssb-buttons li.rrssb-twitter a { background-color: #26c4f1; }
.rrssb-buttons li.rrssb-twitter a:hover { background-color: #0eaad6; }
.rrssb-buttons li.rrssb-whatsapp a { background-color: #43d854; }
.rrssb-buttons li.rrssb-whatsapp a:hover { background-color: #28c039; }
@media (max-width: 767px) {
	.rrssb-buttons li a { padding: 11px 4px 12px 24px; font-size: 12px; }
}

/* ---- Gerelateerde artikelen --------------------------------------------- */
.relatedArticles { margin-top: 30px; }
.relatedArticles h2 { font-size: 24px; font-weight: 300; color: var(--inl-text); padding-top: 20px; margin: 10px 0; }
.relatedArticles > div { padding: 3px 0; }
.relatedArticles .fa-chevron-right { font-size: 10px; margin-right: 6px; color: var(--inl-accent); }

/* ---- Onderste scheiding ------------------------------------------------- */
.divider-dotted { margin: 20px 0; height: 1px; border: 0; border-top: 1px dotted #ddd; }

/* =========================================================================
   Zijbalk: dezelfde opbouw als de homepage-sidebar (home.css wordt daar
   geladen; op artikel-/archiefpagina's zorgt dit blok voor identieke opmaak).
   ========================================================================= */

/* ---- 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: var(--inl-nav-link);
	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; }
#siderBlokNav .nav-item-full { width: 100%; text-align: center; }
.clear-both { clear: both; }

/* ---- CTA-knoppen ---- */
.sidebar-deals .btn-block { margin: 5px 0; text-align: center; white-space: normal; }
.sidebar-deals hr {
	margin: 15px 0;
	border: 0;
	border-top: 1px solid #ddd;
}

/* ---- "Vergelijk toestellen en abonnementen" ---- */
.vergelijkerBlokSider .row { display: flex; flex-wrap: wrap; }
.vergelijkerBlokSiderItem {
	width: 50%;
	padding: 0 15px 15px;
	font-size: 13px;
}
.vergelijkerBlokSiderItem::after { content: ' '; display: table; clear: both; }
/* Live: .vergelijkerBlokSiderItem .fa-mobile { float:left; font-size:80px } — hier
   compacter zodat het blok in de smalle zijbalk past. */
.vergelijkerBlokSiderItem .fa-mobile {
	float: left;
	font-size: 46px;
	color: #333;
	line-height: 1;
}
.vergelijkerBlokSiderHead {
	font-weight: 600;
	font-size: 15px;
	margin-left: 40px;
	color: #333;
}
.vergelijkerBlokSiderContent { margin-left: 40px; }
.vergelijkerBlokSiderContent .fa-ul { margin-left: 1.4em; margin-bottom: 0; }
.vergelijkerBlokSiderContent a { font-weight: 500; color: var(--inl-accent); }
.vergelijkerBlokSiderContent .fa-chevron-right { font-size: 10px; padding-top: 3px; }

@media (max-width: 767px) {
	.vergelijkerBlokSiderItem { padding-bottom: 10px; }
	.vergelijkerBlokSiderItem .fa-mobile { font-size: 40px; }
}
/* Op artikelpagina's staat het horizontale vergelijkerblok al bovenaan
   (zoals live); dan is de zijbalkvariant op smalle schermen overbodig. */
@media (max-width: 991px) {
	.single-post .vergelijkerBlokSider { display: none; }
}

/* ---- Mobiel vergelijkerblok bovenaan de artikelpagina -------------------
   Zelfde opmaak als op de homepage (home.css wordt daar geladen; article.css
   en home.css komen nooit samen op één pagina voor). */
/* Live plaatst dit blok op het artikel BINNEN .container>.row>.col-md-8; door de
   clearfix van .row klapt de 20px kopmarge daar niet in main.margin-top. Met
   flow-root krijgt de wrapper hetzelfde effect (kop op y=190 i.p.v. 170). */
#homeVergelijkerWrap { padding: 0 15px; }
/* .visible-xs{display:block!important} verslaat display:flow-root, dus dezelfde
   barrière als Bootstrap's .row: een table-pseudo-element vóór de kop. */
#homeVergelijkerWrap::before { content: ' '; display: table; }
#vergelijkerBlokH2 { padding-top: 10px; }
#schuifMeer { margin-top: 0; padding-top: 0; }

/* Live-waarden (identiek aan home.css):
   #vergelijkerBlok{height:90px;width:99%;margin:2px auto 10px;white-space:nowrap;
     overflow-x:auto;overflow-y:hidden;text-align:left}
   .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{14px}
   .vergelijkerBlokContent{margin-left:40px} */
#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: var(--inl-accent); }
.vergelijkerBlokContent .fa-chevron-right { font-size: 10px; padding-top: 3px; }