/* ============================================================
 * D-Link Kenya — coded homepage (front-page.php)
 *
 * Structure: a chip strip linking every D-Link subcategory, then one
 * product carousel per subcategory that has enough stock to fill a row.
 *
 * Brand tokens come from catalogue.css, which is enqueued site-wide and
 * first. The --mt-* aliases below exist only so this file reads on its own.
 * ============================================================ */

.dlink-home {
	overflow-x: hidden;
	--mt-deep: #04455A;
	--mt-brand: #007A9E;
	--mt-brand-d: #00617E;
}

/* Suppress the theme's empty archive header + top padding on the homepage. */
body.home .archive-header,
body.page-template .archive-header { display: none; }
body.home #content.site-content,
body.home .shoptimizer-archive > .col-full { padding-top: 0 !important; }

/* Safety net for the sidebar layout the front page is still assigned in
   wp-admin. dlink_home_body_class() removes the body classes that drive it,
   which is the real fix; this catches the case where a Shoptimizer version
   names them differently and would otherwise leave the homepage in a narrow
   column with an empty gap beside it. */
body.home #primary.dlink-home {
	width: 100%;
	max-width: none;
	float: none;
	margin-left: 0;
	margin-right: 0;
}
body.home .widget-area,
body.home #secondary { display: none; }

/* Sections sit inside the theme container (no full-bleed breakout — the
 * parent #primary has overflow-x:hidden which would clip a 100vw breakout
 * and cut content off on both sides). */
.dlink-hsec {
	position: relative;
	width: 100%;
}

.dlink-hwrap {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Section heading ---------- */
.dlink-sec-head { margin: 0 0 20px; }
.dlink-sec-head h2 {
	font-size: clamp(20px, 1.3rem + 1vw, 28px);
	font-weight: 800;
	color: var(--mt-deep);
	margin: 0 0 4px;
	letter-spacing: -.01em;
}
.dlink-sec-head p { color: #6b7280; margin: 0; font-size: 14.5px; }
.dlink-sec-head--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}
.dlink-sec-link {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: 14px;
	color: var(--mt-brand);
	text-decoration: none;
	white-space: nowrap;
}
.dlink-sec-link:hover { color: var(--mt-deep); }

/* Carousel section headings are smaller than the page's opening heading —
   there is a run of them, and at full h2 weight the page reads as several
   competing pages rather than one range broken into shelves. */
.dlink-cat-sec .dlink-sec-head h2 { font-size: clamp(17px, 1rem + .5vw, 21px); }

/* ============================================================
 * 1. SUBCATEGORY CHIP STRIP
 * Every D-Link subcategory, including the thin ones that have too
 * few products to carry a carousel of their own — without this they
 * would have no route in from the homepage at all.
 * ============================================================ */
.dlink-cats-sec { padding: 34px 0 6px; }

.dlink-cat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dlink-cat-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	background: #fff;
	color: #111827;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.dlink-cat-chip:hover,
.dlink-cat-chip:focus-visible {
	border-color: var(--mt-brand);
	color: var(--mt-brand);
	background: #e6f4fa;
}

.dlink-cat-chip__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: #f1f5f7;
	color: #6b7280;
	font-size: 11.5px;
	font-weight: 700;
}

.dlink-cat-chip:hover .dlink-cat-chip__count {
	background: #fff;
	color: var(--mt-brand);
}

/* ============================================================
 * 2. PRODUCT CAROUSELS (one per subcategory)
 * ============================================================ */
.dlink-carousel-sec { padding: 34px 0 8px; }

.dlink-carousel {
	position: relative;
	--gap: 16px;
	--n: 5; /* items across at desktop width */
}

.dlink-carousel__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.dlink-carousel__viewport::-webkit-scrollbar { display: none; }

/* Turn the WooCommerce product grid into a horizontal track */
.dlink-carousel__viewport ul.products {
	display: flex !important;
	flex-wrap: nowrap !important;
	grid-template-columns: none !important;
	gap: var(--gap);
	margin: 0 !important;
	padding: 4px 0;
}

/* Basis is one --n-th of the row, but the cards may grow.
   These subcategories are uneven — Switches has 12 products, Data Faceplates
   has 4. At a fixed 1/5 width the short ones would leave most of the row
   empty and read as a broken carousel, so with fewer items than fit they
   expand to fill instead. Once the items overflow there is no free space to
   distribute and the basis stands, so the long ones still scroll at 1/5. */
.dlink-carousel__viewport ul.products li.product {
	flex: 1 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
	margin: 0 !important;
	width: auto !important;
	scroll-snap-align: start;
}

/* Arrows */
.dlink-car-arrow {
	position: absolute;
	top: 42%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border: 1px solid #e2e8f0;
	border-radius: 50%;
	background: #fff;
	color: var(--mt-brand);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 3px 10px rgba(15, 23, 42, .12);
	z-index: 3;
	transition: opacity .15s, background .15s;
}
.dlink-car-arrow svg { width: 20px; height: 20px; }
.dlink-car-arrow:hover { background: var(--mt-brand); color: #fff; }
.dlink-car-prev { left: -8px; }
.dlink-car-next { right: -8px; }
.dlink-car-arrow[hidden] { display: none; }

/* ---------- Closing call to action ---------- */
.dlink-home-cta {
	padding: 34px 0 48px;
	text-align: center;
}
.dlink-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	padding: 13px 26px;
	border-radius: 3px;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background .15s, color .15s, border-color .15s;
}
.dlink-btn--primary { background: var(--mt-brand); color: #fff; }
.dlink-btn--primary:hover { background: var(--mt-brand-d); color: #fff; }

/* ============================================================
 * RESPONSIVE
 * ============================================================ */
@media (max-width: 1100px) {
	.dlink-carousel { --n: 4; }
}

@media (max-width: 900px) {
	.dlink-carousel { --n: 3; }
}

@media (max-width: 600px) {
	.dlink-hwrap { padding: 0 15px; }
	.dlink-carousel-sec { padding: 26px 0 4px; }
	.dlink-cats-sec { padding: 24px 0 4px; }
	.dlink-carousel { --n: 2; --gap: 12px; }
	/* Arrows hidden on touch; drag/swipe instead */
	.dlink-car-arrow { display: none !important; }
	.dlink-sec-head--row { align-items: center; }
	.dlink-cat-chip { padding: 9px 13px; font-size: 13.5px; }
}