/*
 * Theme "Squared" — CSS-only skin (Fase A multi-template, aug 2026).
 *
 * Uitgesproken en geometrisch: overal rechte hoeken (border-radius: 0),
 * stevige randen, vlakke kleurvlakken en harde offset-schaduwen. De
 * merkkleuren (--main-color / --secondary-color) zetten de toon in blokken.
 *
 * Regels: alles geprefixt met body.theme-squared (laadt ná style.css en wint
 * dan altijd); kleuren via de site-CSS-variabelen; geen img-sizing (zie de
 * `.container img !important`-valkuil); RTL-neutraal (symmetrische spacing).
 * Geen externe fonts: systeem-stack met zware gewichten.
 */

/* ---------- Typografie ---------- */
body.theme-squared {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	color: #333;
	background-color: #f4f4f2;
}
body.theme-squared p { line-height: 1.65; }
body.theme-squared h2,
body.theme-squared h3,
body.theme-squared h4 {
	font-weight: 800;
	color: #14181c;
	letter-spacing: -0.015em;
}
body.theme-squared h2 { line-height: 1.25; }
body.theme-squared a { color: var(--main-color); }

/* ---------- Header / navigatie ---------- */
body.theme-squared #main-nav {
	background-color: #fff;
	border-bottom: 3px solid var(--main-color);
	box-shadow: none;
}
/* Logo: het klassieke kader blijft, maar strak — rechte hoeken, stevige rand,
   geen zwevende schaduw (style.css zet radius 5px + dubbele box-shadow). */
body.theme-squared .header-logo {
	border: 2px solid var(--main-color);
	border-radius: 0;
	box-shadow: none;
	padding: 8px 12px;
}
body.theme-squared .header-logo a {
	font-family: inherit;
	font-weight: 800;
	letter-spacing: -0.01em;
	word-spacing: normal;
	color: var(--main-color);
}
body.theme-squared ul#main-menu > li > a {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	border-radius: 0;
}
body.theme-squared .sm-mint a:hover,
body.theme-squared .sm-mint a:focus,
body.theme-squared .sm-mint a:active,
body.theme-squared .sm-mint a.highlighted {
	border-radius: 0;
}
body.theme-squared #top_bar {
	background-color: #eceae6;
	font-size: 13px;
}
body.theme-squared.container #top_bar {
	border-top: solid 5px var(--main-color);
}

/* ---------- Paginakop: vlak kleurblok met stevige onderbalk ----------
   Geen verloop (squared = vlakke vlakken); h1 en breadcrumbs blijven wit
   (zoals de basis in style.css al aanneemt). */
body.theme-squared .header_h1 {
	background-color: var(--secondary-color);
	background-image: none;
	border-top: 0;
	border-bottom: 8px solid var(--main-color);
	padding: 26px 0;
}
body.theme-squared .header_h1 h1 {
	color: #fff;
	font-weight: 800;
	letter-spacing: -0.01em;
}
body.theme-squared #breadcrumbs,
body.theme-squared #breadcrumbs a {
	color: #fff;
}
body.theme-squared #breadcrumbs {
	font-size: 12px;
	letter-spacing: 0.02em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ---------- Kaarten / listings: harde outline + offset-schaduw ---------- */
body.theme-squared .card,
body.theme-squared .post-block,
body.theme-squared .summary_div {
	background-color: #fff;
	border: 2px solid #14181c;
	border-radius: 0;
	box-shadow: 6px 6px 0 rgba(20, 24, 28, 0.12);
}
body.theme-squared .card-footer {
	background-color: #f4f4f2;
	border-top: 2px solid #14181c;
}
body.theme-squared section.figure.product-box {
	background: #fff;
	border: 2px solid #14181c;
	border-radius: 0;
	border-bottom: 2px solid #14181c !important;
	box-shadow: 6px 6px 0 rgba(20, 24, 28, 0.12);
	padding: 1.25rem !important;
	margin-bottom: 1.5rem;
	transition: box-shadow 0.12s ease, transform 0.12s ease;
}
body.theme-squared section.figure.product-box:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 rgba(20, 24, 28, 0.16);
}
/* Kaart-overflow op mobiel: dezelfde fix als theme modern — de product-box is
   óók een Bootstrap .row (negatieve marges) en zou als zichtbare kaart anders
   de schermranden raken. */
@media (max-width: 767.98px) {
	body.theme-squared section.figure.product-box {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
	}
}
body.theme-squared .image,
body.theme-squared .product.image {
	border-radius: 0;
}
body.theme-squared .site_title {
	font-weight: 800;
}
body.theme-squared .site_meta {
	font-size: 13px;
	color: #6b7178;
}

/* Ranking-badge (#1, #2, ...): vierkant blok in de hoofdkleur. */
body.theme-squared .badge.wd-badge {
	background-color: var(--main-color) !important;
	color: #fff;
	border-radius: 0;
	padding: 0.4em 0.7em;
	font-weight: 800;
}

/* ---------- Knoppen: blokken met harde schaduw ---------- */
body.theme-squared .btn {
	border-radius: 0;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
body.theme-squared .btn-success,
body.theme-squared .btn-primary {
	border: 0;
	box-shadow: 3px 3px 0 rgba(20, 24, 28, 0.25);
	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
}
body.theme-squared .btn-success:hover,
body.theme-squared .btn-primary:hover {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 rgba(20, 24, 28, 0.3);
}
/* Contrast-fix (zelfde les als theme modern): gevulde knoppen zijn vaak
   <a>-links en zouden anders de link-kleur (= vaak hun eigen achtergrond)
   erven. Outline-knoppen bewust met rust gelaten. */
body.theme-squared .btn-primary,
body.theme-squared .btn-secondary,
body.theme-squared .btn-success,
body.theme-squared .btn-danger,
body.theme-squared .btn-info,
body.theme-squared .btn-dark {
	color: #fff;
}

/* ---------- Formulieren ---------- */
body.theme-squared .form-control {
	border-radius: 0;
	border: 2px solid #c9c9c4;
}
body.theme-squared .form-control:focus {
	border-color: var(--main-color);
	box-shadow: none;
}
body.theme-squared .input-group-append .btn { border-radius: 0; }

/* ---------- Paginering ---------- */
body.theme-squared .pagination > li > a,
body.theme-squared .pagination > li > span,
body.theme-squared .pagination .page-link {
	border-radius: 0;
	margin: 0 2px;
	border: 2px solid #c9c9c4;
	font-weight: 700;
}

/* ---------- Footer: donker blok met kleurbalk ---------- */
body.theme-squared footer {
	background-color: #14181c;
	border-top: 6px solid var(--main-color);
	margin-top: 56px;
}
body.theme-squared .footer_ul_amrc li a,
body.theme-squared footer p {
	color: #aab0b6;
}

/* ---------- Diversen ---------- */
body.theme-squared .pricetag { border-radius: 0; }
body.theme-squared .suggestions { border: 2px solid #14181c; }
body.theme-squared #myBtn { border-radius: 0; }