/*
Theme Name: HLS Electronics
Theme URI: https://hlselectronics.com
Description: Child theme voor HLS Electronics B.V., gebaseerd op GeneratePress.
Author: HLS Electronics B.V.
Author URI: https://hlselectronics.com
Template: generatepress
Version: 1.2.7
Text Domain: hls-electronics
*/

/*
 * Eigen CSS kan hieronder worden toegevoegd.
 */


.home .entry-header {
	display: none;
}

.home .site-content {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
}

.home .content-area,
.home .site-main {
	width: 100%;
	margin: 0;
}

.home .inside-article {
	padding: 0;
}

.home .entry-content {
	margin: 0;
}


/* =========================================================
   ALGEMENE GROEP-PADDING
   ========================================================= */

/*
 * Algemene padding voor normale Gutenberg-groepen.
 * 20px boven/onder en 40px links/rechts.
 */
.site-main .wp-block-group__inner-container {
	padding: 20px 40px;
}

/*
 * De hero, handelsnaamsectie en handelsnaamkaarten hebben
 * hun eigen layout en mogen bovenstaande padding niet erven.
 */
.site-main .hls-hero .wp-block-group__inner-container,
.site-main .trade-section > .wp-block-group__inner-container,
.site-main .trade-section-inner > .wp-block-group__inner-container,
.site-main .trade-card > .wp-block-group__inner-container {
	padding: 0;
}


/* =========================================================
   HERO / BANNER
   ========================================================= */

body.home .wp-block-cover.hls-hero {
	position: relative;
	display: block;
	width: 100%;
	min-height: 0 !important;
	height: auto !important;
	margin: 0;
	padding: 50px 30px !important;
	overflow: hidden;
}

/* Achtergrondafbeelding */
.hls-hero .wp-block-cover__image-background {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Gutenberg-overlay uitschakelen */
.hls-hero .wp-block-cover__background {
	opacity: 0 !important;
}

/* Eigen donkere overlay */
.hls-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(3, 22, 45, 0.88) 0%,
		rgba(3, 22, 45, 0.76) 38%,
		rgba(3, 22, 45, 0.40) 62%,
		rgba(3, 22, 45, 0.08) 100%
	);
}

/* Cover-inhoud */
body.home .hls-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	max-width: none !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Binnenste hero-container */
body.home .hls-hero .hls-hero-inner {
	width: 100%;
	max-width: none !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 55px !important;
	box-sizing: border-box;
}

/* Tekstkolom */
body.home .hls-hero .hls-hero-content {
	width: 100%;
	max-width: 620px !important;
	margin: 0 !important;
	padding: 0 !important;
	color: #fff;
}


/* =========================================================
   HERO-TEKST
   ========================================================= */

body.home .hls-hero .hls-hero-content h1,
body.home .hls-hero .hls-hero-content h2 {
	max-width: 620px;
	margin: 0 0 12px !important;
	color: #fff;
	font-size: clamp(34px, 3.1vw, 46px);
	line-height: 1.07;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-align: left;
}

.hls-accent {
	color: #0874d1;
}

body.home .hls-hero .hls-hero-content p {
	max-width: 610px;
	margin: 0 0 10px !important;
	color: #fff;
	font-size: 18px;
	line-height: 1.45;
}

body.home .hls-hero .hls-hero-content p:last-of-type {
	margin-bottom: 0 !important;
}


/* =========================================================
   HERO-KNOP
   ========================================================= */

body.home .hls-hero .wp-block-buttons {
	margin: 16px 0 0 !important;
}

.hls-hero-content .wp-block-button {
	margin: 0;
}

.hls-hero-content .wp-block-button__link {
	padding: 12px 20px;
	border-radius: 3px;
	background: #0874d1;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
}

.hls-hero-content .wp-block-button__link:hover,
.hls-hero-content .wp-block-button__link:focus {
	background: #065da8;
	color: #fff;
	transform: translateY(-1px);
}


/* =========================================================
   NORMALE HOMEPAGE-SECTIES
   ========================================================= */

.home-section {
	width: 100%;
	padding: 65px 55px;
	box-sizing: border-box;
}

.home-section-inner {
	width: 100%;
	max-width: 1090px;
	margin: 0 auto;
}

.home-section--light {
	background: #f4f7fa;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
	body.home .wp-block-cover.hls-hero {
		padding: 20px 0 !important;
	}

	body.home .hls-hero .hls-hero-inner {
		padding: 0 35px !important;
	}

	body.home .hls-hero .hls-hero-content {
		max-width: 560px !important;
	}

	body.home .hls-hero .hls-hero-content h1,
	body.home .hls-hero .hls-hero-content h2 {
		max-width: 560px;
		font-size: 40px;
	}

	body.home .hls-hero .hls-hero-content p {
		max-width: 540px;
		font-size: 17px;
	}

	.home-section {
		padding-left: 35px;
		padding-right: 35px;
	}
}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 768px) {
	body.home .wp-block-cover.hls-hero {
		padding: 24px 0 !important;
	}

	.hls-hero .wp-block-cover__image-background {
		object-position: 36% center;
	}

	.hls-hero::before {
		background: rgba(3, 22, 45, 0.78);
	}

	body.home .hls-hero .hls-hero-inner {
		padding: 0 24px !important;
	}

	body.home .hls-hero .hls-hero-content {
		max-width: 100% !important;
	}

	body.home .hls-hero .hls-hero-content h1,
	body.home .hls-hero .hls-hero-content h2 {
		max-width: 100%;
		font-size: 33px;
		line-height: 1.1;
	}

	body.home .hls-hero .hls-hero-content p {
		max-width: 100%;
		font-size: 17px;
		line-height: 1.45;
	}

	.home-section {
		padding: 50px 24px;
	}
}


/* =========================================================
   KLEINE MOBIELE SCHERMEN
   ========================================================= */

@media (max-width: 480px) {
	body.home .wp-block-cover.hls-hero {
		padding: 20px 0 !important;
	}

	body.home .hls-hero .hls-hero-inner {
		padding: 0 20px !important;
	}

	body.home .hls-hero .hls-hero-content h1,
	body.home .hls-hero .hls-hero-content h2 {
		font-size: 29px;
	}

	body.home .hls-hero .hls-hero-content p {
		font-size: 15px;
	}

	.hls-hero-content .wp-block-button__link {
		padding: 11px 17px;
		font-size: 15px;
	}
}


/* =========================================================
   HOOFDNAVIGATIE
   ========================================================= */

/* Menu-opmaak */
.main-navigation .main-nav ul li > a {
	position: relative;
	padding-left: 18px;
	padding-right: 18px;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Tekstkleur altijd hetzelfde houden */
.main-navigation .main-nav ul li > a,
.main-navigation .main-nav ul li > a:hover,
.main-navigation .main-nav ul li > a:focus,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-item > a:hover,
.main-navigation .main-nav ul li.current-menu-item > a:focus,
.main-navigation .main-nav ul li.current_page_item > a,
.main-navigation .main-nav ul li.current_page_item > a:hover,
.main-navigation .main-nav ul li.current_page_item > a:focus {
	color: #172033 !important;
	background-color: transparent !important;
}

/* Onderlijn standaard verborgen */
.main-navigation .main-nav ul li > a::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 8px;
	height: 3px;
	background-color: transparent;
	transform: scaleX(0);
	transform-origin: center;
	transition:
		transform 0.2s ease,
		background-color 0.2s ease;
	pointer-events: none;
}

/* Hover en toetsenbordfocus: lichtblauwe lijn */
.main-navigation .main-nav ul li > a:hover::after,
.main-navigation .main-nav ul li > a:focus-visible::after,
.main-navigation .main-nav ul li.sfHover > a::after {
	background-color: #4aa3e8;
	transform: scaleX(1);
}

/* Huidige pagina: vaste logoblauwe lijn */
.main-navigation .main-nav ul li.current-menu-item > a::after,
.main-navigation .main-nav ul li.current_page_item > a::after,
.main-navigation .main-nav ul li.current-menu-ancestor > a::after,
.main-navigation .main-nav ul li.current_page_ancestor > a::after {
	background-color: #0874d1;
	transform: scaleX(1);
}

/* Huidige pagina blijft ook bij hover logoblauw */
.main-navigation .main-nav ul li.current-menu-item > a:hover::after,
.main-navigation .main-nav ul li.current_page_item > a:hover::after,
.main-navigation .main-nav ul li.current-menu-ancestor > a:hover::after,
.main-navigation .main-nav ul li.current_page_ancestor > a:hover::after {
	background-color: #0874d1;
}


/* =========================================================
   HANDELSNAAMBLOKKEN
   ========================================================= */

.trade-section {
	width: 100%;
	padding: 65px 40px;
	background: #f4f7fa;
	color: #172033;
	box-sizing: border-box;
}

.trade-section-inner {
	width: 100%;
	max-width: 1120px !important;
	margin: 0 auto;
}

.trade-section h2 {
	margin: 0 0 10px;
	color: #172033;
	font-size: 36px;
	line-height: 1.2;
}

.trade-intro {
	max-width: 680px;
	margin: 0 0 35px;
	color: #586474;
	font-size: 18px;
	line-height: 1.55;
}

.trade-section .trade-grid,
.trade-section .wp-block-columns.trade-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 24px;
	align-items: stretch;
	width: 100%;
	max-width: none !important;
	margin: 0;
	padding: 0;
}

.trade-section .trade-grid > .wp-block-column {
	display: contents !important;
}

.trade-section .trade-grid .trade-card {
	min-width: 0;
}

.trade-grid > .wp-block-column > .trade-card,
.trade-grid > .trade-card {
	width: 100%;
	max-width: none !important;
	margin: 0 !important;
}

.trade-card {
	--trade-accent: #0874d1;
	--trade-accent-dark: #06284f;
	--trade-brand-bg: linear-gradient(135deg, #0874d1, #06284f);

	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 100%;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e4e9ef;
	border-radius: 6px;
	box-shadow: 0 10px 28px rgba(8, 30, 55, 0.08);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.trade-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(8, 30, 55, 0.13);
}

.trade-card > .wp-block-group__inner-container {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.trade-card-logo {
	display: flex;
	align-items: center;
	min-height: 108px;
	margin: 0 !important;
	padding: 26px 28px;
	background: var(--trade-brand-bg);
	box-sizing: border-box;
}

.trade-card-logo img {
	display: block;
	width: auto;
	max-width: 210px;
	max-height: 58px;
	object-fit: contain;
	object-position: left center;
}

.trade-card-logo .wp-block-image {
	margin: 0;
}

.trade-card-logo p {
	margin: 0 !important;
	padding: 0 !important;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

.trade-card-logo strong {
	font-weight: 700;
}

.trade-card h3,
.trade-card h4,
.trade-card p {
	padding-right: 28px;
	padding-left: 28px;
}

.trade-card h3 {
	margin: 28px 0 8px;
	color: #172033;
	font-size: 23px;
	line-height: 1.25;
}

.trade-card h4 {
	margin: 0 0 16px;
	color: var(--trade-accent);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.trade-card p {
	margin: 0 0 24px;
	color: #475466;
	font-size: 16px;
	line-height: 1.6;
}

.trade-card .wp-block-buttons {
	margin-top: auto;
	padding: 0 28px 28px;
}

.trade-card .wp-block-button {
	width: 100%;
	margin: 0;
}

.trade-card .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: 13px 18px;
	border-radius: 3px;
	background: var(--trade-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color 0.2s ease;
}

.trade-card .wp-block-button__link:hover,
.trade-card .wp-block-button__link:focus {
	background: var(--trade-accent-dark);
	color: #fff;
	text-decoration: none;
}

.trade-card--oem {
	--trade-accent: #0874d1;
	--trade-accent-dark: #06284f;
	--trade-brand-bg: linear-gradient(135deg, #0874d1, #06284f);
}

.trade-card--pcnautic {
	--trade-accent: #ed7700;
	--trade-accent-dark: #c75f00;
	--trade-brand-bg: linear-gradient(135deg, #111318 0%, #24272d 68%, #ed7700 68%, #ed7700 100%);
}

.trade-card--radardok {
	--trade-accent: #12386b;
	--trade-accent-dark: #1c4a86;
	--trade-brand-bg: linear-gradient(135deg, #12386b, #1c4a86);
}


/* Tablet */
@media (max-width: 680px) {
	.trade-section {
		padding: 50px 30px;
	}

	.trade-section .trade-grid,
	.trade-section .wp-block-columns.trade-grid {
		grid-template-columns: 1fr;
	}

	.trade-card:last-child {
		grid-column: 1 / -1;
	}
}


/* Mobiel */
@media (max-width: 650px) {
	.trade-section {
		padding: 42px 20px;
	}

	.trade-section h2 {
		font-size: 30px;
	}

	.trade-intro {
		margin-bottom: 26px;
		font-size: 16px;
	}

	.trade-section .trade-grid,
	.trade-section .wp-block-columns.trade-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.trade-card:last-child {
		grid-column: auto;
	}

	.trade-card-logo {
		min-height: 96px;
		padding: 24px;
	}

	.trade-card h3,
	.trade-card h4,
	.trade-card p {
		padding-right: 24px;
		padding-left: 24px;
	}

	.trade-card h3 {
		margin-top: 24px;
		font-size: 21px;
	}

	.trade-card .wp-block-buttons {
		padding-right: 24px;
		padding-bottom: 24px;
		padding-left: 24px;
	}
}


/* =========================================================
   HANDELSNAAMBLOKKEN - DEFINITIEVE LAYOUT OVERRIDE
   ========================================================= */

body.home .site-main .trade-section .wp-block-columns.trade-grid,
body.home .site-main .trade-section .trade-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 24px !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.home .site-main .trade-section .wp-block-columns.trade-grid > .wp-block-column {
	display: contents !important;
}

body.home .site-main .trade-section .wp-block-column > .trade-card,
body.home .site-main .trade-section .trade-grid > .trade-card {
	width: 100% !important;
	height: 100%;
	max-width: none !important;
	margin: 0 !important;
}

@media (max-width: 760px) {
	body.home .site-main .trade-section .wp-block-columns.trade-grid,
	body.home .site-main .trade-section .trade-grid {
		grid-template-columns: 1fr !important;
	}
}


/* Pcnautic merkcorrecties */
.trade-card--pcnautic {
	--trade-accent: #e87817;
	--trade-accent-dark: #c96512;
	--trade-brand-bg: #2d5165;
}

.trade-card--pcnautic .trade-card-logo {
	justify-content: center;
	background: #2d5165 !important;
}

.trade-card--pcnautic .trade-card-logo img {
	margin-right: auto;
	margin-left: auto;
}

.trade-card--pcnautic h4 {
	color: #e87817 !important;
}

.trade-card--pcnautic .wp-block-button__link {
	background: #e87817 !important;
	color: #fff !important;
}

.trade-card--pcnautic .wp-block-button__link:hover,
.trade-card--pcnautic .wp-block-button__link:focus {
	background: #c96512 !important;
	color: #fff !important;
}


/* Handelsnaamlogo assets */
.trade-card--radardok .trade-card-logo {
	justify-content: center;
}

.trade-card--radardok .trade-card-logo img {
	margin-right: auto;
	margin-left: auto;
}


/* RadarDok merkcorrecties */
.trade-card--radardok {
	--trade-brand-bg: linear-gradient(180deg, #1c4a86 0%, #12386b 100%);
}

.trade-card--radardok .trade-card-logo {
	background: linear-gradient(180deg, #1c4a86 0%, #12386b 100%) !important;
}


/* RadarDok knopcorrecties */
.trade-card--radardok .wp-block-button__link {
	background: #1c4a86 !important;
	color: #fff !important;
}

.trade-card--radardok .wp-block-button__link:hover,
.trade-card--radardok .wp-block-button__link:focus {
	background: #12386b !important;
	color: #fff !important;
}


/* Hero knop kleurcorrectie */
body.home .site-main .hls-hero .wp-block-button__link,
body.home .site-main .hls-hero .wp-block-button__link:visited {
	background: #0874d1 !important;
	color: #fff !important;
}

body.home .site-main .hls-hero .wp-block-button__link:hover,
body.home .site-main .hls-hero .wp-block-button__link:focus {
	background: #065da8 !important;
	color: #fff !important;
}


/* Handelsnaam subtitel spacing */
.trade-card--radardok h4,
.trade-card--pcnautic h4,
.trade-card--oem h4 {
	margin-top: 18px;
}


/* OEM Electronics merkcorrecties */
.trade-card--oem {
	--trade-accent: #8fbf3f;
	--trade-accent-dark: #2f343a;
	--trade-brand-bg: #2a2e35;
	border-color: #d9dee3;
}

.trade-card--oem .trade-card-logo {
	justify-content: center;
	background: #2a2e35 !important;
}

.trade-card--oem .trade-card-logo img {
	margin-right: auto;
	margin-left: auto;
}

.trade-card--oem h4 {
	color: #8fbf3f !important;
}

.trade-card--oem .wp-block-button__link {
	background: #8fbf3f !important;
	color: #2f343a !important;
}

.trade-card--oem .wp-block-button__link:hover,
.trade-card--oem .wp-block-button__link:focus {
	background: #7fa936 !important;
	color: #2f343a !important;
}