/*
 Theme Name: DRYVE Theme
 Theme URI: https://dryve.nl
 Description: Minimal DRYVE theme met vaste branding en koppeling naar DRYVE Base plugin.
 Author: DRYVE
 Version: 1.0.0
 Text Domain: dryve-theme
*/

/* ============================================================
   Universal Base Styles (The Foundation)
   ============================================================ */

/* 1. Global Reset: Ensure padding/border doesn't increase width */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0 auto;
}

html {
	scroll-behavior: smooth;
}

/* Scroll Offset for Anchor Links (Sticky Header Fix) */
section[id],
div[id] {
	scroll-margin-top: 110px;
}

/* 2. Defensive Media: Prevent overflow */
img,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/* 3. Container Safety: Prevent text touching screen edges on mobile */
/* We apply this to .container or .header-inner/footer-grid explicitly */
.container,
.header-inner,
.footer-grid,
.footer-bottom {
	padding-left: 16px;
	padding-right: 16px;
}

/* On desktop (large screens), we might want to reset this padding if the design allows, 
   but keeping it ensures content never touches the absolute edge of the browser window 
   even on 1400px screens if the window is exactly 1400px. */

/* 4. Base Typography smoothing */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Global Typography + Branding
   ============================================================ */

body {
	font-family: var(--dryve-font-body);
	color: var(--dryve-text);
	font-weight: var(--dryve-font-weight-normal);
	line-height: var(--dryve-line-height);
	background-color: var(--dryve-neutral);
	font-size: var(--dryve-font-size-base);
}

h1 {
	font-family: var(--dryve-h1-font);
	font-size: var(--dryve-h1-size);
	font-weight: var(--dryve-h1-weight);
	color: var(--dryve-h1-color);
}

h2 {
	font-family: var(--dryve-h2-font);
	font-size: var(--dryve-h2-size);
	font-weight: var(--dryve-h2-weight);
	color: var(--dryve-h2-color);
}

h3 {
	font-family: var(--dryve-h3-font);
	font-size: var(--dryve-h3-size);
	font-weight: var(--dryve-h3-weight);
	color: var(--dryve-h3-color);
}

h4 {
	font-family: var(--dryve-h4-font);
	font-size: var(--dryve-h4-size);
	font-weight: var(--dryve-h4-weight);
	color: var(--dryve-h4-color);
}

h5 {
	font-family: var(--dryve-h5-font);
	font-size: var(--dryve-h5-size);
	font-weight: var(--dryve-h5-weight);
	color: var(--dryve-h5-color);
}

h6 {
	font-family: var(--dryve-h6-font);
	font-size: var(--dryve-h6-size);
	font-weight: var(--dryve-h6-weight);
	color: var(--dryve-h6-color);
}

strong,
b {
	font-weight: var(--dryve-font-weight-bold);
}

a {
	color: var(--dryve-link);
	text-decoration: none;
	transition: all 0.2s ease;
}

a:hover {
	color: var(--dryve-hover);
	opacity: 0.9;
}

button,
.button,
.dryve-button,
input[type="submit"] {
	background: var(--dryve-button);
	color: var(--dryve-button-text);
	border: none;
	padding: var(--dryve-button-padding, 12px 24px);
	border-radius: var(--dryve-button-radius, 6px);
	font-weight: var(--dryve-font-weight-bold);
	transition: all 0.25s ease;
}

button:hover,
.button:hover,
.dryve-button:hover,
input[type="submit"]:hover {
	background: var(--dryve-hover);
	color: var(--dryve-button-hover-text);
}

.dryve-accent {
	font-family: var(--dryve-font-accent);
	color: var(--dryve-secondary);
}

.dryve-logo {
	--dryve-site-width: 1400px;
}

/* ============================================================
   Header Layout
   ============================================================ */
.site-header {
	background: var(--dryve-header-bg);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	position: sticky;
	top: 0;
	z-index: 1000;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	padding-bottom: 16px;
	gap: 20px;
	max-width: var(--dryve-site-width, 1400px);
	width: 100%;
	margin: 0 auto;
}

/* Mobile Toggle - Hidden on desktop */
.mobile-menu-toggle {
	display: none !important;
	/* Force hide on desktop */
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px;
	z-index: 1001;
}

.mobile-menu-toggle span {
	display: block;
	width: 25px;
	height: 3px;
	background-color: var(--dryve-text);
	margin: 5px 0;
	transition: 0.3s;
}

.mobile-menu-close {
	display: none;
	/* Hide on desktop */
}

.header-logo img {
	/* Inline style controls width & height now. Object-fit prevents distortion. */
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Desktop Menu */
.header-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 32px;
}

.header-nav a {
	color: var(--dryve-menu-link);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
}

.header-nav a:hover {
	color: var(--dryve-hover);
}

/* Submenu items (if present) */
.header-nav .sub-menu a {
	color: var(--dryve-submenu-link);
}

.header-nav .sub-menu a:hover {
	color: var(--dryve-hover);
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.header-nav {
		position: fixed;
		top: 0;
		right: -100%;
		width: 80%;
		max-width: 300px;
		height: 100vh;
		background: #fff;
		box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
		padding: 80px 20px 20px;
		transition: right 0.3s ease;
		z-index: 999;
	}

	.mobile-menu-close {
		display: block;
		position: absolute;
		top: 20px;
		right: 20px;
		background: none;
		border: none;
		font-size: 32px;
		font-weight: 300;
		cursor: pointer;
		color: var(--dryve-text);
		line-height: 1;
	}

	.header-nav.active {
		right: 0;
	}

	.header-nav ul {
		flex-direction: column;
		gap: 20px;
	}

	.header-cta .button-small {
		display: none;
	}

	.mobile-menu-toggle {
		display: block !important;
	}

	.mobile-menu-toggle.active span:nth-child(1) {
		transform: rotate(45deg) translate(5px, 5px);
	}

	.mobile-menu-toggle.active span:nth-child(2) {
		opacity: 0;
	}

	.mobile-menu-toggle.active span:nth-child(3) {
		transform: rotate(-45deg) translate(7px, -6px);
	}
}

/* ============================================================
   Footer Layout
   ============================================================ */
.site-footer {
	background: var(--dryve-footer-bg);
	padding: 60px 0 30px;
	margin-top: 60px;
	font-size: 14px;
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	margin: 0 auto;
	max-width: var(--dryve-site-width, 1400px);
	width: 100%;
}

.footer-grid.grid-cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.footer-logo {
	/* Increased/Removed max-height constraint */
	width: auto;
	height: auto;
	margin-bottom: 16px;
}

.footer-heading {
	font-size: 18px;
	margin-bottom: 20px;
	color: var(--dryve-h4-color);
}

.footer-nav ul,
.hours-list,
.contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-nav li,
.hours-list li,
.contact-list li {
	margin-bottom: 10px;
	line-height: 1.5;
}

.hours-list .day {
	font-weight: 400;
	display: inline-block;
	width: 90px;
}

.footer-bottom {
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	color: var(--dryve-text-color);
	max-width: var(--dryve-site-width, 1400px);
	width: 100%;
	margin: 0 auto;
}

.footer-credits a {
	color: inherit;
}

.footer-nav a,
.footer-contact a {
	color: var(--dryve-menu-link);
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-nav a:hover,
.footer-contact a:hover {
	color: var(--dryve-hover);
}

@media (max-width: 900px) {

	.footer-grid,
	.footer-grid.grid-cols-3 {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {

	.footer-grid,
	.footer-grid.grid-cols-3 {
		grid-template-columns: 1fr;
	}

	.footer-bottom {
		flex-direction: column;
		text-align: center;
		gap: 10px;
	}
}

/* ============================================================
   Conversion Elements
   ============================================================ */
.dryve-nudge {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 9999;
	transition: transform 0.3s ease;
	animation: dryve-pulse 2s infinite;
}

.dryve-nudge:hover {
	transform: scale(1.1);
}

.dryve-nudge svg {
	width: 30px;
	height: 30px;
}

/* Pulse Animation */
@keyframes dryve-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
	}

	70% {
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}