/* FillKite Header widget (matches Fillkite Website .site-header). */
.fkc-site-header:has(.fkc-header--sticky) { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 999; }

.fkc-header {
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--fkc-border);
	font-family: var(--fkc-font);
}
.fkc-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
	min-height: 72px;
}
.fkc-nav { display: flex; flex: 1; align-items: center; gap: 24px; }
.fkc-nav__list { display: flex; gap: 4px; margin: 0 auto; padding: 0; list-style: none; }
.fkc-nav__link {
	display: block;
	padding: 8px 14px;
	border-radius: var(--fkc-radius-sm);
	color: var(--fkc-muted);
	font-weight: 500;
	text-decoration: none;
	transition: color .2s, background-color .2s;
}
.fkc-nav__link:hover { color: var(--fkc-text); background: var(--fkc-bg-soft); }
.fkc-nav__link[aria-current="page"] { color: var(--fkc-text); background: var(--fkc-primary-soft); }

/* Scoped so the Elementor kit's button style (it targets every <button>) never wins. */
.fkc-header .fkc-nav-toggle,
.fkc-header .fkc-nav-toggle:hover,
.fkc-header .fkc-nav-toggle:focus {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	border: 1px solid var(--fkc-border);
	border-radius: var(--fkc-radius-sm);
	background: var(--fkc-bg);
	color: var(--fkc-text);
	cursor: pointer;
}
.fkc-nav-toggle svg { width: 22px; height: 22px; }
.fkc-nav-toggle__close,
.fkc-nav-toggle[aria-expanded="true"] .fkc-nav-toggle__open { display: none; }
.fkc-nav-toggle[aria-expanded="true"] .fkc-nav-toggle__close { display: block; }

/* Mobile menu, one rule set per breakpoint choice. Without JS the menu simply stays open. */
@media (max-width: 767px) {
	.fkc-header[data-fkc-breakpoint="768"] .fkc-nav-toggle { display: inline-flex; }
	.fkc-header[data-fkc-breakpoint="768"] .fkc-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 12px; padding-bottom: 16px; }
	.fkc-header[data-fkc-breakpoint="768"] .fkc-nav:not(.is-open) { display: none; }
	.fkc-header[data-fkc-breakpoint="768"] .fkc-nav__list { flex-direction: column; margin: 0; }
	.fkc-header[data-fkc-breakpoint="768"] .fkc-nav__link { padding: 12px 14px; }
}
@media (max-width: 899px) {
	.fkc-header[data-fkc-breakpoint="900"] .fkc-nav-toggle { display: inline-flex; }
	.fkc-header[data-fkc-breakpoint="900"] .fkc-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 12px; padding-bottom: 16px; }
	.fkc-header[data-fkc-breakpoint="900"] .fkc-nav:not(.is-open) { display: none; }
	.fkc-header[data-fkc-breakpoint="900"] .fkc-nav__list { flex-direction: column; margin: 0; }
	.fkc-header[data-fkc-breakpoint="900"] .fkc-nav__link { padding: 12px 14px; }
}
@media (max-width: 1024px) {
	.fkc-header[data-fkc-breakpoint="1025"] .fkc-nav-toggle { display: inline-flex; }
	.fkc-header[data-fkc-breakpoint="1025"] .fkc-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 12px; padding-bottom: 16px; }
	.fkc-header[data-fkc-breakpoint="1025"] .fkc-nav:not(.is-open) { display: none; }
	.fkc-header[data-fkc-breakpoint="1025"] .fkc-nav__list { flex-direction: column; margin: 0; }
	.fkc-header[data-fkc-breakpoint="1025"] .fkc-nav__link { padding: 12px 14px; }
}
/* Without JavaScript the menu stays open and the button hidden. html.fkc-js is set by an inline line in the head,
   so with JavaScript the phone menu starts closed and the page never jumps when the script arrives. */
html:not(.fkc-js) .fkc-header .fkc-nav-toggle { display: none !important; }
html:not(.fkc-js) .fkc-header .fkc-nav { display: flex !important; }

@media (prefers-reduced-motion: reduce) { .fkc-nav__link { transition: none; } }
