/* ============================================================
 * D-Link Kenya — custom multi-column footer, LIGHT theme.
 * The theme (Kirki inline CSS) paints .site-footer + .copyright #111;
 * we override to white here. Kirki's rules are inline and specific, so
 * the colour overrides carry !important to win.
 *
 * Column titles take the logo navy; links/icons hover to the logo blue.
 * Brand tokens come from catalogue.css (enqueued site-wide, first).
 * ============================================================ */

:root {
	--dl-foot-bg: #ffffff;
	--dl-foot-copy-bg: #f7f8fa;
	--dl-foot-ink: #04455A;   /* titles — logo navy */
	--dl-foot-text: #5b6270;  /* body + links */
	--dl-foot-line: #e6e8ec;
	--dl-foot-accent: #007A9E; /* hover — logo blue */
}

/* ---- White chrome (beats theme's #111) ---- */
.dlink-footer.site-footer,
footer.copyright {
	background-color: var(--dl-foot-bg) !important;
	color: var(--dl-foot-text) !important;
}
.dlink-footer.site-footer {
	padding: 3.5rem 0 2.75rem;
	border-top: 1px solid var(--dl-foot-line);
}

/* ---- Grid ---- */
/* The link columns are conditional: each one is skipped when it has no links
   to show (Customer Support stays hidden until the policy pages are
   published, Follow Us until a social profile is set), so the track count has
   to follow the content.
   
   It cannot be done with `repeat(auto-fit, ...)` here. An automatic repetition
   may not sit beside a flexible track, and the NAP column is `1.6fr` — that
   combination is invalid, so the browser dropped the whole declaration and the
   footer collapsed into a single column. Instead dlink_footer_columns() counts
   the link columns it actually rendered and writes the number to data-cols,
   and each count gets its own ordinary, valid rule below. */
.dlink-footer-grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.dlink-footer-grid[data-cols="1"] { grid-template-columns: 1.6fr minmax(0, 1fr); }
.dlink-footer-grid[data-cols="2"] { grid-template-columns: 1.6fr repeat(2, minmax(0, 1fr)); }
.dlink-footer-grid[data-cols="3"] { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
.dlink-footer-grid[data-cols="4"] { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); }
.dlink-footer-grid[data-cols="5"] { grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr)); }

/* Narrower viewports drop to a fixed track count. These selectors repeat the
   [data-cols] attribute so they match the specificity of the rules above and
   still win on source order. */
@media (max-width: 1100px) {
	.dlink-footer-grid[data-cols] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
	.dlink-foot-nap { grid-column: span 3; }
}

@media (max-width: 760px) {
	.dlink-footer-grid[data-cols] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
	.dlink-foot-nap { grid-column: span 2; }
}

@media (max-width: 480px) {
	.dlink-footer-grid[data-cols] { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.dlink-foot-nap { grid-column: auto; }
}

/* ---- Column titles ---- */
.dlink-footer .dlink-foot-title {
	color: var(--dl-foot-ink);
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 16px;
	letter-spacing: .01em;
}

.dlink-footer .dlink-foot-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dlink-footer .dlink-foot-col li {
	margin-bottom: 9px;
}

/* ---- Links (override Kirki footer link colour) ---- */
.dlink-footer.site-footer a,
.dlink-footer.site-footer a:not(.button),
footer.copyright a {
	color: var(--dl-foot-text) !important;
	text-decoration: none;
	transition: color .15s ease;
}
.dlink-footer.site-footer a:hover,
.dlink-footer.site-footer a:not(.button):hover,
footer.copyright a:hover {
	color: var(--dl-foot-accent) !important;
}

/* ---- Footer logo (first column) ---- */
.dlink-foot-logo { margin: 0 0 18px; line-height: 0; }
.dlink-foot-logo a { display: inline-block; }
.dlink-footer .dlink-foot-logo img,
.dlink-footer .dlink-foot-logo .custom-logo {
	max-height: 52px;
	width: auto !important;
	height: auto !important;
	max-width: 200px;
}

/* ---- NAP block ---- */
.dlink-footer address { font-style: normal; }

.dlink-foot-nap-row {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	margin-bottom: 13px;
	color: var(--dl-foot-text);
	line-height: 1.45;
	font-size: 14.5px;
}

.dlink-foot-nap-row svg {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin-top: 2px;
	color: var(--dl-foot-accent);
}

/* ---- Social icons (light chips) ---- */
.dlink-foot-social {
	display: flex;
	gap: 12px;
}

.dlink-footer .dlink-foot-social a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f3f4f6 !important;
	color: var(--dl-foot-ink) !important;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}

.dlink-footer .dlink-foot-social a:hover {
	background: var(--dl-foot-accent) !important;
	color: #fff !important;
	transform: translateY(-1px);
}

.dlink-foot-social svg {
	width: 20px;
	height: 20px;
}

/* ---- Copyright bar ---- */
footer.copyright {
	background-color: var(--dl-foot-copy-bg) !important;
	border-top: 1px solid var(--dl-foot-line);
}