/**
 * Header + navigation — laptops-computer.co.ke
 *
 * Structure follows the parent theme:
 *   ROW 1  header#masthead > .main-header.col-full        (shoptimizer_header)
 *   ROW 2  .col-full-nav > .shoptimizer-primary-navigation (shoptimizer_navigation)
 *
 * Order of this file, per playbook §6.2:
 *   A. universal skin   B. desktop layout (≥993px)   C. mobile (≤992px)
 *
 * The 993px breakpoint matches the parent theme's own breakpoint exactly — do
 * not change it to 992px or a 1px dead zone opens up in the cart rules.
 *
 * PARENT QUIRKS HANDLED HERE
 *  - .shoptimizer-cart .count is styled by the parent AS the basket icon
 *    (body + :after handle). We recolour it; we never add a second icon.
 *  - The parent hides .site-header .site-header-cart above 993px and shows the
 *    one in the nav row instead. The reference puts the cart in row 1, so we
 *    reverse that below.
 */

/* =========================================================================
 * A. UNIVERSAL SKIN
 * ====================================================================== */

.site-header {
	background: var(--lc-surface);
	border-bottom: 1px solid var(--lc-line);
}

.lc-icon {
	flex: none;
	display: block;
}

/* ---- search ------------------------------------------------------------ */

.main-header .site-search .widget {
	margin: 0;
	padding: 0;
}

.main-header .site-search .woocommerce-product-search {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	background: var(--lc-surface);
	border: 1.5px solid var(--lc-line-strong);
	border-radius: var(--lc-radius);
	overflow: hidden;
	transition: border-color .18s, box-shadow .18s;
}

.main-header .site-search .woocommerce-product-search:focus-within {
	border-color: var(--lc-primary);
	box-shadow: 0 0 0 3px var(--lc-primary-light);
}

/* Magnifier sitting inside the left edge of the field. */
.main-header .site-search .woocommerce-product-search::before {
	position: absolute;
	top: 50%;
	left: 16px;
	width: 20px;
	height: 20px;
	transform: translateY(-50%);
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20.5 20.5 16 16'/%3E%3C/svg%3E");
	content: "";
	pointer-events: none;
}

.main-header .site-search .search-field {
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	margin: 0;
	padding: 0 16px 0 46px;
	border: 0;
	background: transparent;
	color: var(--lc-ink);
	font-size: var(--lc-fs-md);
	box-shadow: none;
}

.main-header .site-search .search-field::placeholder {
	color: var(--lc-faint);
	opacity: 1;
}

.main-header .site-search .search-field:focus {
	outline: 0;
	box-shadow: none;
}

/*
 * Submit button: label swapped for a white magnifier.
 *
 * The parent SCREEN-READER-CLIPS this button:
 *   .widget_product_search form button[type=submit]{
 *       clip:rect(1px 1px 1px 1px); position:absolute!important; right:0 }
 * so sizing it alone leaves a 1px invisible button. The clip and the
 * !important position both have to be undone before it can render.
 */
.main-header .site-search .woocommerce-product-search button[type="submit"] {
	position: relative !important;
	right: auto !important;
	clip: auto !important;
	clip-path: none !important;
	flex: none;
	width: 68px;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--lc-primary) no-repeat center / 22px 22px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20.5 20.5 16 16'/%3E%3C/svg%3E");
	color: transparent;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	transition: background-color .18s;
}

.main-header .site-search .woocommerce-product-search button[type="submit"]:hover,
.main-header .site-search .woocommerce-product-search button[type="submit"]:focus {
	background-color: var(--lc-primary-dark);
}

/* ---- phone + account blocks ------------------------------------------- */

.lc-header-phone__link,
.lc-myaccount__link {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--lc-ink);
	text-decoration: none;
	white-space: nowrap;
}

.lc-header-phone__icon,
.lc-myaccount__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: var(--lc-radius-pill);
	background: var(--lc-primary-light);
	color: var(--lc-primary);
}

.lc-header-phone__text,
.lc-myaccount__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.lc-header-phone__label,
.lc-myaccount__label {
	color: var(--lc-muted);
	font-size: var(--lc-fs-xs);
}

.lc-header-phone__number,
.lc-myaccount__action {
	color: var(--lc-ink);
	font-size: var(--lc-fs-md);
	font-weight: 700;
}

.lc-header-phone__link:hover .lc-header-phone__number,
.lc-myaccount__link:hover .lc-myaccount__action {
	color: var(--lc-primary);
}

/* ---- cart -------------------------------------------------------------- */

/*
 * The parent draws the basket using .count (rounded body) plus .count:after
 * (the handle). We only recolour it — adding an SVG here would double up.
 *
 * !important is required, not lazy: the customizer prints these same
 * selectors in an inline <style> block LATER in <head> than this file
 * (playbook §6.1), hard-coding Shoptimizer's orange #dc9814. No amount of
 * selector length wins against a later inline rule of equal specificity.
 */
.shoptimizer-cart a.cart-contents .count,
.shoptimizer-cart a.cart-contents .count:after,
.shoptimizer-cart a.cart-contents:not(:hover) .count {
	border-color: var(--lc-primary) !important;
	color: var(--lc-primary) !important;
}

.shoptimizer-cart a.cart-contents:hover .count {
	background-color: var(--lc-primary) !important;
	color: #fff !important;
}

.shoptimizer-cart a.cart-contents:hover .count:after {
	border-color: var(--lc-primary) !important;
}

.site-header .shoptimizer-cart .cart-contents {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--lc-ink) !important;
	text-decoration: none;
}

/* "My Cart" label to the right of the basket, per the reference. */
.site-header .shoptimizer-cart .cart-contents::after {
	margin-left: 2px;
	color: var(--lc-ink);
	font-size: var(--lc-fs-md);
	font-weight: 600;
	white-space: nowrap;
	content: "My Cart";
}

/* Running total is not in the reference layout. */
.site-header .shoptimizer-cart .cart-contents .amount {
	display: none;
}

/* ---- All Categories pill ---------------------------------------------- */

.lc-allcats {
	position: relative;
	flex: none;
}

.lc-allcats__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 38px;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: var(--lc-radius-pill);
	background: var(--lc-primary);
	color: #fff;
	font-size: var(--lc-fs-md);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color .18s;
}

.lc-allcats__toggle:hover,
.lc-allcats__toggle[aria-expanded="true"] {
	background: var(--lc-primary-dark);
}

.lc-allcats__toggle .lc-icon--chevron {
	transition: transform .18s;
}

.lc-allcats__toggle[aria-expanded="true"] .lc-icon--chevron {
	transform: rotate(180deg);
}

.lc-allcats__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 60;
	min-width: 290px;
	max-height: 70vh;
	padding: 8px;
	border: 1px solid var(--lc-line);
	border-radius: var(--lc-radius);
	background: var(--lc-surface);
	box-shadow: var(--lc-shadow-lg);
	overflow-y: auto;
}

.lc-allcats__panel[hidden] {
	display: none;
}

.lc-allcats__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-allcats__item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--lc-radius-sm);
	color: var(--lc-body);
	font-size: var(--lc-fs-md);
	text-decoration: none;
}

.lc-allcats__item a:hover {
	background: var(--lc-primary-light);
	color: var(--lc-primary);
}

.lc-allcats__count {
	color: var(--lc-faint);
	font-size: var(--lc-fs-xs);
	font-style: normal;
}

/* ---- trust strip (top bar) --------------------------------------------- */

/*
 * Lives above the header, in Shoptimizer's own top bar. See the note in
 * lc_header_rebuild(): the nav row is 1254px and cannot hold these as well as
 * the 7-item menu.
 */
.lc-topstrip {
	background: var(--lc-primary);
	color: #fff;
}

.lc-topstrip .col-full {
	padding-top: 0;
	padding-bottom: 0;
}

.lc-badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 22px;
	min-height: 34px;
	padding: 4px 0;
}

.lc-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, .95);
	font-size: var(--lc-fs-sm);
	font-weight: 600;
	white-space: nowrap;
}

.lc-badge--phone {
	margin-left: auto;
}

/* =========================================================================
 * B. DESKTOP LAYOUT  (≥993px — matches the parent breakpoint)
 * ====================================================================== */

@media (min-width: 993px) {

	/* ---- ROW 1 ---- */

	/*
	 * Height comes from the tallest child (the 52px search field) plus this
	 * padding — nothing else. The parent sets 30px/30px via a more specific
	 * selector, and min-height:92px was stacking ON TOP of that padding
	 * (content-box), giving a 152px row for 54px of content. #masthead adds
	 * the id needed to win without !important.
	 */
	#masthead .main-header {
		display: flex;
		align-items: center;
		gap: 28px;
		min-height: 0;
		padding-top: var(--lc-header-pad);
		padding-bottom: var(--lc-header-pad);
	}

	.main-header .site-branding {
		flex: none;
		margin: 0;
	}

	.main-header .site-search {
		flex: 1 1 auto;
		max-width: 780px;
		margin: 0;
	}

	.main-header .lc-header-phone,
	.main-header .lc-myaccount {
		flex: none;
	}

	/*
	 * Parent hides the row-1 cart above 993px and shows the nav-row one.
	 * The reference puts the cart in row 1, so reverse it.
	 */
	.site-header .site-header-cart {
		display: flex;
		align-items: center;
		width: auto;
		margin-left: 0;
		line-height: normal;
	}

	.col-full-nav .site-header-cart {
		display: none;
	}

	/* ---- ROW 2 ---- */

	/*
	 * !important: the customizer prints `.col-full-nav{background-color:#222}`
	 * inline, later in <head> than this file (playbook §6.1). Without this the
	 * nav row renders near-black and the dark menu text becomes unreadable.
	 */
	.col-full-nav {
		background: var(--lc-surface) !important;
		border-bottom: 1px solid var(--lc-line);
	}

	.shoptimizer-primary-navigation {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		gap: 20px;
		min-height: var(--lc-navrow-h);
	}

	/*
	 * The parent absolutely positions the menu across the full row:
	 *   .primary-navigation{position:absolute;top:0;left:0;width:100%;
	 *                       text-align:center}
	 * That takes it out of flow, so the flex row above cannot place it — the
	 * items then wrap onto a second line and sit underneath the pill and the
	 * badges. Put it back in flow before laying anything out.
	 */
	.col-full-nav .primary-navigation {
		position: static;
		width: auto;
		text-align: left;
	}

	.col-full-nav #site-navigation.main-navigation {
		width: auto;
	}

	/* Parent makes items inline-block, which wraps. Single non-wrapping row. */
	.col-full-nav .menu-primary-menu-container > ul.menu {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		gap: 2px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.col-full-nav .menu-primary-menu-container > ul.menu::-webkit-scrollbar {
		display: none;
	}

	.col-full-nav .menu-primary-menu-container > ul.menu > li {
		flex: none;
	}

	/* Vertical rule between the pill and the menu, as in the reference. */
	.shoptimizer-primary-navigation .lc-allcats::after {
		position: absolute;
		top: 50%;
		right: -10px;
		width: 1px;
		height: 26px;
		transform: translateY(-50%);
		background: var(--lc-line-strong);
		content: "";
	}

	.col-full-nav #site-navigation.main-navigation {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Colour needs !important for the same inline-CSS reason as the row bg. */
	.col-full-nav .primary-navigation > .menu-primary-menu-container > ul.menu > li > a,
	.col-full-nav .primary-navigation > .menu-primary-menu-container > ul.menu > li > a span {
		padding: 0;
		color: var(--lc-ink) !important;
		font-size: var(--lc-fs-md);
		font-weight: 600;
		white-space: nowrap;
	}

	.col-full-nav .primary-navigation > .menu-primary-menu-container > ul.menu > li > a {
		padding: 0 14px;
		line-height: var(--lc-navrow-h);
	}

	.col-full-nav .primary-navigation > .menu-primary-menu-container > ul.menu > li > a:hover,
	.col-full-nav .primary-navigation > .menu-primary-menu-container > ul.menu > li > a:hover span,
	.col-full-nav .primary-navigation > .menu-primary-menu-container > ul.menu > li.current-menu-item > a,
	.col-full-nav .primary-navigation > .menu-primary-menu-container > ul.menu > li.current-menu-item > a span {
		color: var(--lc-primary) !important;
	}
}

/* =========================================================================
 * C. MOBILE  (≤992px)
 *
 * The parent's mobile header works well; we only hide the desktop-only
 * additions so nothing overflows, and keep the cart where the parent puts it.
 * ====================================================================== */

@media (max-width: 992px) {

	.lc-header-phone,
	.lc-myaccount,
	.lc-allcats {
		display: none;
	}

	/* Strip stays, but centred and without the pushed-right phone. */
	.lc-badges {
		justify-content: center;
		gap: 4px 16px;
		font-size: var(--lc-fs-xs);
	}

	.lc-badge--phone {
		margin-left: 0;
	}

	.main-header .site-search .search-field {
		height: 46px;
	}

	.main-header .site-search button[type="submit"] {
		width: 56px;
		height: 46px;
	}

	/* Label would crowd the mobile bar. */
	.site-header .shoptimizer-cart .cart-contents::after {
		content: none;
	}
}