/* FTC Header — theme proofing.
   Loaded after ftc-header.css. The component stylesheet is the approved file
   and is never edited; this one defends it against theme resets.

   The problem: a theme reset like Hello Elementor's styles bare element
   selectors with a pseudo-class, e.g. "button:hover" (specificity 0,1,1).
   That outranks our own class selectors such as ".ftc-m-trigger" (0,1,0),
   so the theme repaints our buttons on hover and focus. Scoping the reset
   under .ftc-header raises it to (0,2,1) and wins it back.

   Order matters inside this file: neutralise first, then re-assert the
   component's own intended states at the same or higher specificity. */

/* ---------- 1. Neutralise the theme's button chrome, header only ---------- */
.ftc-header button:hover,
.ftc-header button:focus,
.ftc-header button:active,
.ftc-header [type="button"]:hover,
.ftc-header [type="button"]:focus,
.ftc-header [type="submit"]:hover,
.ftc-header [type="submit"]:focus {
	background: transparent;
	color: inherit;
	border-color: transparent;
	box-shadow: none;
	text-decoration: none;
}

/* ---------- 2. Re-assert the component's own states ---------- */

/* Top-level nav items and their chevrons. */
.ftc-header .ftc-top:hover,
.ftc-header .ftc-top:focus,
.ftc-header .ftc-caret:hover,
.ftc-header .ftc-caret:focus {
	background: var(--ftc-band-2);
	color: var(--ftc-band-fg);
}

.ftc-header .ftc-item.is-open > .ftc-split,
.ftc-header .ftc-item.is-open > .ftc-top-btn {
	background: var(--ftc-band-2);
}

/* Search and hamburger icon buttons. */
.ftc-header .ftc-icon-btn:hover,
.ftc-header .ftc-icon-btn:focus,
.ftc-header .ftc-icon-btn[aria-expanded="true"] {
	background: var(--ftc-band-2);
	border-color: var(--ftc-band-fg);
	color: var(--ftc-band-fg);
}

/* Close button inside the search panel. */
.ftc-header .ftc-search-close:hover,
.ftc-header .ftc-search-close:focus {
	background: var(--ftc-surface-2);
	color: var(--ftc-fg);
}

/* Chips, including the clickable ones in the search empty state. */
.ftc-header .ftc-chip:hover,
.ftc-header .ftc-chip:focus {
	background: var(--ftc-teal-soft);
	color: var(--ftc-teal);
	border-color: var(--ftc-teal);
}

/* Mobile drawer accordion headers: flat, never filled. */
.ftc-header .ftc-m-trigger:hover,
.ftc-header .ftc-m-trigger:focus,
.ftc-header .ftc-m-link:hover,
.ftc-header .ftc-m-link:focus {
	background: transparent;
	color: inherit;
}

.ftc-header .ftc-m-trigger[aria-expanded="true"] {
	color: var(--ftc-teal-on-band);
}

/* ---------- 3. Keep the focus ring visible ---------- */
/* Step 1 clears box-shadow, so restate the component's focus treatment. */
.ftc-header button:focus-visible,
.ftc-header a:focus-visible,
.ftc-header input:focus-visible {
	outline: 3px solid var(--ftc-teal-on-band);
	outline-offset: 2px;
}

.ftc-header .ftc-mega button:focus-visible,
.ftc-header .ftc-mega a:focus-visible,
.ftc-header .ftc-dropdown button:focus-visible,
.ftc-header .ftc-dropdown a:focus-visible,
.ftc-header .ftc-search-results a:focus-visible {
	outline-color: var(--ftc-teal);
}

/* ---------- 4. Layout guards ---------- */
/* Some themes set a max-width or float on images inside headers. */
.ftc-header .ftc-brand img {
	max-width: none;
	float: none;
}

/* Themes that add a bottom margin to lists or paragraphs in content areas. */
.ftc-header ul,
.ftc-header ol,
.ftc-header li,
.ftc-header p {
	margin-block: 0;
}