/* ============================================================
   Header styles — extracted from main.css, design unchanged.
   Loaded after main.css (see functions.php: heyri_scripts).
   ============================================================ */

/* ---------- Header ---------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background: #fff;
	border-bottom: 1px solid #d4d4d4;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
	transition: box-shadow .3s ease, border-color .3s ease;
}

body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}

.site-header.scrolled {
	border-bottom-color: #c0c0c0;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
}
.site-header.scrolled .header-topbar { display: none; }

/* Topbar (row 1) */
.header-topbar {
	border-bottom: 1px solid var(--line);
	background: #fff;
}
.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 41px;
}
.topbar-left { display: flex; align-items: center; gap: 18px; }
.topbar-social { display: flex; align-items: center; gap: 8px; }
.social-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: #fff;
	transition: transform .2s ease, opacity .2s ease;
}
.social-circle:hover { color: #fff; transform: translateY(-2px); opacity: .85; }
.social-facebook { background: #1877f2; }
.social-linkedin { background: #0a66c2; }
.social-youtube { background: #e62117; }
.social-x { background: #000; }
.social-whatsapp { background: #25d366; }
.social-instagram { background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 60%, #6228d7 100%); }
.social-tiktok { background: #010101; }
.topbar-welcome { font-size: 13px; color: var(--body); }

.topbar-right { display: flex; align-items: center; gap: 22px; }
.topbar-contact {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var(--ink-soft);
	white-space: nowrap;
}
.topbar-contact svg { color: var(--lime); flex-shrink: 0; }
.topbar-contact:hover { color: var(--lime); }

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 80px;
}

.site-branding { flex-shrink: 0; }
.custom-logo-link img { max-height: 65px; width: auto; }

/* Primary navigation */
.main-navigation { flex: 1; display: flex; justify-content: flex-start; margin-left: 48px; }
.main-navigation > ul { display: flex; gap: 4px; }
.main-navigation li { position: relative; }
.main-navigation a {
	display: block;
	padding: 8px 14px;
	font-family: var(--font-title);
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	text-transform: capitalize;
	letter-spacing: .4px;
	border-radius: var(--radius);
	transition: color .2s, background .2s;
}
.main-navigation a:hover { color: var(--lime); background: var(--lime-light); }
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a { color: var(--lime); }

/* Dropdown */
.main-navigation .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all .2s ease;
	z-index: 90;
}
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.main-navigation .sub-menu a {
	font-size: 14px;
	font-weight: 600;
	padding: 9px 12px;
	text-transform: capitalize;
	color: var(--ink);
	border-radius: var(--radius);
}

/* Card-style dropdown for Products / Solutions (desktop only) */
@media (min-width: 861px) {
	.main-navigation .has-nav-cards > .sub-menu { display: none; }

	.has-nav-cards > .nav-cards-dropdown {
		position: absolute;
		top: 100%;
		left: -120px;
		min-width: 880px;
		max-width: 980px;
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 4px;
		box-shadow: var(--shadow-md);
		padding: 16px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: all .2s ease;
		z-index: 90;
	}
	.has-nav-cards:hover > .nav-cards-dropdown,
	.has-nav-cards:focus-within > .nav-cards-dropdown {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.nav-cards-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 14px;
	}
	.nav-card {
		display: flex;
		flex-direction: column;
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 4px;
		overflow: hidden;
		transition: transform .2s ease, box-shadow .2s ease;
	}
	.nav-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
	.nav-card-img img {
		width: 100%;
		aspect-ratio: 16 / 10;
		object-fit: cover;
		display: block;
	}
	/* .main-navigation a (0,1,1) out-specifies a bare class, so the card links
	   are scoped through it — otherwise font-size and padding never apply. */
	.main-navigation .nav-cards-dropdown .nav-card-title {
		display: block;
		padding: 10px 12px;
		background: var(--lime-light);
		font-family: var(--font-title);
		font-size: 12px;
		font-weight: 700;
		line-height: 1.35;
		text-transform: capitalize;
		letter-spacing: 0;
		color: var(--ink);
		border-radius: 0;
	}
	.main-navigation .nav-cards-dropdown .nav-card:hover .nav-card-title { color: var(--lime); background: var(--lime-light); }
	.nav-card-subs { list-style: none; margin: 0; padding: 8px 12px 12px; }
	.main-navigation .nav-cards-dropdown .nav-card-subs li a {
		display: block;
		padding: 3px 0;
		font-size: 11px;
		font-weight: 400;
		text-transform: capitalize;
		letter-spacing: 0;
		color: var(--ink-soft);
		border-radius: 0;
		background: transparent;
	}
	.main-navigation .nav-cards-dropdown .nav-card-subs li a:hover { color: var(--lime); background: transparent; }
}

/* Header actions */
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.lang-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	background: transparent;
	border: none;
	color: var(--ink-soft);
	cursor: pointer;
	transition: color .2s ease;
}
.lang-trigger:hover { color: var(--lime); }
.lang-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0,0,0,.45);
}
.lang-modal[hidden] { display: none; }
.lang-modal-dialog {
	width: 100%;
	max-width: 720px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: #fff;
	border-radius: var(--radius-lg);
	padding: 28px 32px 32px;
	box-shadow: var(--shadow-xl);
}
.lang-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}
.lang-modal-header h2 { font-size: 18px; color: var(--ink); margin: 0; }
.lang-modal-close {
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	color: var(--body);
	cursor: pointer;
}
.lang-modal-close:hover { color: var(--ink); }
.lang-modal-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px 16px;
}
.lang-option a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	font-size: 14px;
	color: var(--ink);
	text-decoration: none;
	border-radius: var(--radius);
	transition: background .2s ease;
}
.lang-option a:hover { background: var(--cream); }
.lang-option img {
	width: auto;
	height: 18px;
	border-radius: 2px;
	flex-shrink: 0;
}
@media (max-width: 720px) {
	.lang-modal-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
	.lang-modal-grid { grid-template-columns: repeat(2, 1fr); }
	.lang-modal-dialog { padding: 22px 20px; }
}

.header-search-toggle {
	background: none;
	border: none;
	padding: 4px;
	color: var(--lime);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	transition: all .2s ease;
}
.header-search-toggle:hover { color: var(--lime-dark); transform: scale(1.08); }

/* CTA button (row 2) */
.header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 26px;
	background: linear-gradient(135deg, var(--lime) 0%, var(--lime-dark) 100%);
	color: #fff;
	font-family: var(--font-title);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	border-radius: var(--radius);
	box-shadow: 0 4px 14px rgba(60, 170, 45, .35);
	transition: transform .2s ease, box-shadow .2s ease;
	white-space: nowrap;
}
.header-cta:hover {
	color: #fff;
	background: linear-gradient(135deg, var(--lime-dark) 0%, #0E6E30 100%);
	transform: translateY(-2px);
	box-shadow: 0 7px 20px rgba(60, 170, 45, .45);
}

.header-search-panel {
	background: var(--cream);
	border-top: 1px solid var(--line);
	padding: 20px 0;
}
.header-search-panel[hidden] { display: none; }
.header-search-panel:not([hidden]) { display: block; }
.header-search-panel .search-form {
	display: flex;
	gap: 10px;
	max-width: 600px;
	margin: 0 auto;
}
.header-search-panel input {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 15px;
}
.header-search-panel .search-submit {
	padding: 12px 24px;
	background: var(--lime);
	color: #fff;
	border: 0;
	border-radius: var(--radius);
	font-weight: 700;
	cursor: pointer;
}

/* Hamburger */
.menu-toggle {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 10px;
	flex-direction: column;
	gap: 5px;
}
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: all .25s ease; }
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* CTA + tool icons inside mobile drawer — hidden on desktop */
.main-navigation .nav-cta-mobile { display: none; }
.nav-tools-mobile { display: none; }

@media (max-width: 860px) {
	body { padding-top: 81px; }
	.header-topbar { display: none; }
	.menu-toggle { display: flex; }
	.header-actions .header-cta { display: none; }
	.main-navigation .nav-cta-mobile { display: flex; margin: 6px 24px 18px; }
	.main-navigation { position: absolute; top: 100%; left: 0; right: 0; margin-left: 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); display: none; }
	.main-navigation.open { display: block; }
	.main-navigation > ul { flex-direction: column; gap: 0; padding: 12px 24px; }
	.main-navigation .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-left: 3px solid var(--lime); border-radius: 0; margin: 0 0 8px 16px; padding: 0 0 0 10px; display: none; }
	.main-navigation li.open > .sub-menu { display: block; }
	.nav-cards-dropdown { display: none !important; }
	.nav-tools-mobile {
		display: flex;
		gap: 26px;
		align-items: center;
		padding: 12px 24px;
		margin: 4px 24px 0;
		border-top: 1px solid var(--line);
	}
	.header-search-panel { padding-left: 16px; padding-right: 16px; }
	.header-search-panel .search-form { max-width: none; }
	.nav-tools-mobile button {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		background: none;
		border: 0;
		cursor: pointer;
		font-size: 14px;
		font-weight: 600;
		color: var(--ink);
		padding: 4px 0;
	}
	.nav-tools-mobile button:hover { color: var(--lime); }
	.nav-tools-mobile svg { color: var(--lime); }
}

@media (max-width: 560px) {
	.header-cta { height: 36px; padding: 0 12px; font-size: 11px; letter-spacing: .3px; }
	.custom-logo-link img { max-height: 44px; }
}