/**
 * Site header — WoodMart header-builder layout `ipl_header` (tools/build-header.php).
 *
 * Rows, elements and their settings live in the header builder; this file only styles what the
 * builder cannot express. Every rule is scoped under .ipl-site (body class, inc/header.php).
 *
 * WoodMart links some per-element stylesheets inside the header markup, i.e. AFTER this file, so
 * rules that compete with those carry .whb-header as an extra class instead of !important.
 * Logical properties only; motion is limited to transform/opacity and removed under reduced motion.
 */

.ipl-site .whb-header {
	--wd-header-el-font-size: 14px;
	--wd-header-el-font-weight: 600;
}

/* WoodMart fades row backgrounds on scroll; only transform/opacity may animate here. */
.ipl-site .whb-header .whb-row {
	transition: none;
}

/* ─── Top utility bar ─────────────────────────────────────────────── */

.ipl-site .whb-top-bar .wd-header-text {
	font-size: 13px;
}

.ipl-site .ipl-topbar-phone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ipl-white, #FFFFFF);
	text-decoration: none;
}

.ipl-site .ipl-topbar-phone::before {
	content: "";
	flex: none;
	inline-size: 14px;
	block-size: 14px;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.18 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.1 9.9a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The mobile number follows the main one: no second icon, a thin divider instead. */
.ipl-site .ipl-topbar-phone--mobile {
	margin-inline-start: 10px;
	padding-inline-start: 12px;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.28);
}

.ipl-site .ipl-topbar-phone--mobile::before {
	content: none;
}

.ipl-site .ipl-topbar-phone__label {
	color: var(--ipl-gray-line, #E3E6EA);
	font-weight: 400;
}

.ipl-site .ipl-topbar-phone__number {
	font-weight: 600;
}

.ipl-site .ipl-topbar-phone:hover .ipl-topbar-phone__number {
	text-decoration: underline;
}

.ipl-site .whb-header .whb-top-bar .wd-nav-secondary {
	--nav-gap: 24px;
	--nav-color: var(--ipl-gray-line, #E3E6EA);
	--nav-color-hover: var(--ipl-white, #FFFFFF);
	--nav-color-active: var(--ipl-white, #FFFFFF);
}

.ipl-site .whb-header .whb-top-bar .wd-nav-secondary > li > a {
	/* WoodMart's .wd-nav > li > a sets min-height: 42px, taller than this 38px bar. */
	min-height: var(--wd-top-bar-h, 38px);
	font-size: 13px;
	font-weight: 400;
}

/* WoodMart hard-codes text-transform: uppercase on .wd-nav > li > a (not via a variable). */
.ipl-site .whb-header .wd-nav > li > a,
.ipl-site .mobile-nav .wd-nav > li > a {
	text-transform: none;
}

/* ─── Main bar ────────────────────────────────────────────────────── */

/* Logo link. With a square brand mark, header-elements/logo.php adds the wordmark beside it. */
.ipl-site .whb-header .wd-main-logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.ipl-site .whb-header .ipl-wordmark {
	color: var(--ipl-navy, #0E1B2A);
	font-family: var(--ipl-font);
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

.ipl-site .whb-header .whb-sticked .ipl-wordmark {
	font-size: 20px;
}

@media (max-width: 1024.98px) {
	.ipl-site .whb-header .ipl-wordmark {
		font-size: 19px;
	}
}

.ipl-site .ipl-official-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-block: 4px;
	padding-inline: 8px 10px;
	border: 1px solid var(--ipl-gray-line, #E3E6EA);
	border-radius: 999px;
	background-color: var(--ipl-gray-bg, #F5F7FA);
	color: var(--ipl-navy, #0E1B2A);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

/* "Verified" mark in the status green (≥3:1 as a non-text graphic on the badge). */
.ipl-site .ipl-official-badge::before {
	content: "";
	flex: none;
	inline-size: 14px;
	block-size: 14px;
	background-color: var(--ipl-green, #15803D);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l3 2.2 3.7-.2 1.1 3.5 3 2.2-1.2 3.5 1.2 3.5-3 2.2-1.1 3.5-3.7-.2L12 23l-3-2.2-3.7.2-1.1-3.5-3-2.2L2.4 12 1.2 8.5l3-2.2L5.3 2.8 9 3z'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Main navigation */
.ipl-site .whb-header .wd-header-main-nav .wd-nav-main {
	--nav-gap: 24px;
	--nav-color: var(--ipl-navy, #0E1B2A);
	--nav-color-hover: var(--ipl-blue, #1668D9);
	--nav-color-active: var(--ipl-blue, #1668D9);
	flex-wrap: nowrap;
}

.ipl-site .whb-header .wd-header-main-nav .wd-nav-main > li > a {
	white-space: nowrap;
}

/*
 * WoodMart's underline style animates `width`; redraw it as a scaled bar so only
 * transform animates. Growing from the centre needs no physical origin in RTL.
 */
.ipl-site .whb-header .wd-nav[class*="wd-style-underline"] .nav-link-text::after {
	inset-inline: 0;
	width: auto;
	background-color: var(--ipl-blue, #1668D9);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s ease-out;
}

.ipl-site .whb-header .wd-nav[class*="wd-style-underline"] > li:is(:hover, .current-menu-item, .current-menu-ancestor, .wd-active, .active) > a .nav-link-text::after {
	width: auto;
	transform: scaleX(1);
}

/* Product search */
.ipl-site .whb-header .whb-iplsearch {
	--wd-form-brd-color: var(--ipl-gray-line, #E3E6EA);
	--wd-form-brd-color-focus: var(--ipl-blue, #1668D9);
	--wd-form-bg: var(--ipl-gray-bg, #F5F7FA);
}

/* Call to action: the one filled blue control in the header. */
.ipl-site .whb-header .ipl-header-cta {
	min-height: 42px;
	padding-inline: 18px;
	white-space: nowrap;
	border-radius: var(--ipl-radius-sm, 6px);
	background-color: var(--ipl-blue, #1668D9);
	color: var(--ipl-white, #FFFFFF);
	font-weight: 700;
	transition: none;
}

.ipl-site .whb-header .ipl-header-cta:hover {
	background-color: var(--ipl-blue-hover, #1150AF);
	color: var(--ipl-white, #FFFFFF);
}

/* Between the tablet header and 1200px the bar is too narrow for everything: drop the badge
   (the logo still carries the brand) and give the navigation the space the search gives up. */
@media (min-width: 1025px) and (max-width: 1199.98px) {
	.ipl-site .whb-header .whb-iplbadge {
		display: none;
	}

	.ipl-site .whb-header .whb-iplsearch {
		--wd-search-form-width: 220px;
	}

	.ipl-site .whb-header .wd-header-main-nav .wd-nav-main {
		--nav-gap: 16px;
	}
}

@media (min-width: 1200px) and (max-width: 1439.98px) {
	.ipl-site .whb-header .whb-iplsearch {
		--wd-search-form-width: 280px;
	}
}

/*
 * The mega dropdown hangs from the «محصولات» item's start edge. WoodMart's offset script only
 * repositions it on a real hover, so cap its width to what fits between that item and the
 * container's end edge at each desktop band — it stays inside the viewport either way.
 */
@media (min-width: 1025px) and (max-width: 1439.98px) {
	.ipl-site .whb-header .menu-mega-dropdown > .wd-dropdown {
		max-inline-size: 760px;
	}
}

@media (min-width: 1025px) and (max-width: 1199.98px) {
	.ipl-site .whb-header .menu-mega-dropdown > .wd-dropdown {
		max-inline-size: 660px;
	}
}

/* ─── Products mega menu (HTML block «مگامنوی محصولات») ───────────── */

/*
 * The five families of the IPLink product list plus an aside, in a 3×2 grid on desktop and one
 * column in the mobile drawer (same HTML block; content from tools/build-product-menu.php).
 * WoodMart's entry content adds block margins to every paragraph, list and group — reset here.
 */
.ipl-site .ipl-megamenu :is(p, ul, .wp-block-group, .wp-block-buttons, .wp-block-button) {
	margin-block: 0;
}

.ipl-site .whb-header .ipl-megamenu {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px 28px;
	padding: 8px;
}

.ipl-site .ipl-megamenu .ipl-megamenu__title {
	color: var(--ipl-navy, #0E1B2A);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

.ipl-site .ipl-megamenu .ipl-megamenu__title a {
	color: var(--ipl-navy, #0E1B2A);
	text-decoration: none;
}

.ipl-site .ipl-megamenu .ipl-megamenu__title a:hover {
	color: var(--ipl-blue, #1668D9);
}

.ipl-site .ipl-megamenu .ipl-megamenu__note {
	margin-block: 2px 6px;
	color: var(--ipl-gray-text, #4B5563);
	font-size: 12px;
	line-height: 1.6;
}

.ipl-site .ipl-megamenu .ipl-megamenu__links {
	padding: 0;
	list-style: none;
}

.ipl-site .ipl-megamenu .ipl-megamenu__links > li {
	margin: 0;
}

.ipl-site .ipl-megamenu .ipl-megamenu__links a {
	display: block;
	padding-block: 5px;
	color: var(--ipl-gray-text, #4B5563);
	font-size: 14px;
	line-height: 1.6;
	text-decoration: none;
}

.ipl-site .ipl-megamenu .ipl-megamenu__links a:hover {
	color: var(--ipl-blue, #1668D9);
	text-decoration: underline;
}

/* Aside: other categories and the catalogue actions, set apart as a tinted panel. */
.ipl-site .ipl-megamenu .ipl-megamenu__aside {
	padding: 14px 16px;
	border-radius: var(--ipl-radius-sm, 6px);
	background-color: var(--ipl-gray-bg, #F5F7FA);
}

.ipl-site .ipl-megamenu .ipl-megamenu__aside .ipl-megamenu__links {
	margin-block: 4px 12px;
}

.ipl-site .ipl-megamenu .ipl-megamenu__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

.ipl-site .ipl-megamenu .ipl-megamenu__actions .wp-block-button__link {
	display: block;
	inline-size: 100%;
	padding-block: 8px;
	padding-inline: 12px;
	border: 1px solid var(--ipl-blue, #1668D9);
	border-radius: var(--ipl-radius-sm, 6px);
	background-color: transparent;
	color: var(--ipl-blue, #1668D9);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

.ipl-site .ipl-megamenu .ipl-megamenu__all .wp-block-button__link {
	background-color: var(--ipl-blue, #1668D9);
	color: var(--ipl-white, #FFFFFF);
}

.ipl-site .ipl-megamenu .ipl-megamenu__all .wp-block-button__link:hover {
	border-color: var(--ipl-blue-hover, #1150AF);
	background-color: var(--ipl-blue-hover, #1150AF);
	color: var(--ipl-white, #FFFFFF);
}

.ipl-site .ipl-megamenu .ipl-megamenu__datasheets .wp-block-button__link:hover {
	color: var(--ipl-blue-hover, #1150AF);
}

/* Narrow desktop (dropdown capped at 660px): drop the notes and tighten the aside so labels stay on one line. */
@media (min-width: 1025px) and (max-width: 1199.98px) {
	.ipl-site .whb-header .ipl-megamenu {
		gap: 20px;
	}

	.ipl-site .whb-header .ipl-megamenu .ipl-megamenu__note {
		display: none;
	}

	.ipl-site .whb-header .ipl-megamenu .ipl-megamenu__title {
		margin-block-end: 4px;
	}

	.ipl-site .whb-header .ipl-megamenu .ipl-megamenu__aside {
		padding: 12px;
	}

	.ipl-site .whb-header .ipl-megamenu .ipl-megamenu__actions .wp-block-button__link {
		padding-inline: 6px;
		font-size: 13px;
	}
}

/* Mobile drawer: one column, families separated by rules; notes dropped to keep the list short. */
.ipl-site .mobile-nav .ipl-megamenu {
	display: grid;
	gap: 0;
	padding-block: 4px 12px;
	padding-inline: 20px;
}

.ipl-site .mobile-nav .ipl-megamenu__family {
	padding-block: 10px;
	border-block-end: 1px solid var(--ipl-gray-line, #E3E6EA);
}

.ipl-site .mobile-nav .ipl-megamenu .ipl-megamenu__note {
	display: none;
}

/* 40px tap targets. Block, not flex: in a flex link the text before a <bdo> becomes its own item and loses its space. */
.ipl-site .mobile-nav .ipl-megamenu .ipl-megamenu__links a {
	padding-block: 9px;
	line-height: 22px;
}

.ipl-site .mobile-nav .ipl-megamenu .ipl-megamenu__aside {
	margin-block-start: 12px;
}

/* ─── Mobile drawer ───────────────────────────────────────────────── */

/* Utility links («نوار بالا» menu widget) as a visually distinct block at the bottom. */
.ipl-site .mobile-nav .widgetarea-mobile {
	margin-block-start: 16px;
	padding: 16px;
	background-color: var(--ipl-navy, #0E1B2A);
	color: var(--ipl-white, #FFFFFF);
}

.ipl-site .mobile-nav .widgetarea-mobile .widget-title {
	margin-block-end: 8px;
	color: var(--ipl-gray-line, #E3E6EA);
	font-size: 13px;
	font-weight: 700;
}

.ipl-site .mobile-nav .widgetarea-mobile .menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ipl-site .mobile-nav .widgetarea-mobile .menu a {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--ipl-white, #FFFFFF);
	font-weight: 600;
	text-decoration: none;
}

.ipl-site .mobile-nav .widgetarea-mobile .menu li + li a {
	border-block-start: 1px solid var(--ipl-navy-soft, #1B3A5C);
}

/* Focus ring on the navy block must be light to stay visible. */
.ipl-site .mobile-nav .widgetarea-mobile {
	--wd-otl-color: var(--ipl-white, #FFFFFF);
}

/* ─── Mobile sticky toolbar ───────────────────────────────────────── */

/* "Find a dealer" (custom button 1) gets a map pin instead of WoodMart's generic link glyph. */
.ipl-site .wd-toolbar-link-1 .wd-tools-icon::before {
	content: "";
	display: block;
	inline-size: 20px;
	block-size: 20px;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ipl-site .wd-toolbar-link-1 {
	color: var(--ipl-blue, #1668D9);
}

/* ─── Keyboard access and focus ───────────────────────────────────── */

/*
 * WoodMart opens hover dropdowns (the products mega menu included) on :hover only, and a
 * hidden panel's links cannot receive focus — keyboard users could never reach them. Open the
 * panel while focus is anywhere inside its menu item, mirroring WoodMart's own open state.
 */
.ipl-site .whb-header .wd-event-hover:focus-within > .wd-dropdown {
	visibility: visible;
	opacity: 1;
	transform: none;
	pointer-events: unset;
}

/* WoodMart resets the ring to black inside dark colour schemes; keep the brand blue there. */
.ipl-site .whb-header :is(.whb-color-dark, .color-scheme-dark) {
	--wd-otl-color-scheme: var(--ipl-blue, #1668D9);
}

/* The search field only changed its border colour on focus — too faint to count as visible focus. */
.ipl-site .whb-header .whb-iplsearch input.s:focus-visible {
	outline: 2px solid var(--ipl-blue, #1668D9);
	outline-offset: 2px;
}

/* ─── Reduced motion ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.ipl-site .whb-header *,
	.ipl-site .whb-header *::before,
	.ipl-site .whb-header *::after,
	.ipl-site .mobile-nav,
	.ipl-site .wd-toolbar * {
		transition: none;
		animation: none;
	}
}