/**
 * Corevia — site chrome (header, navigation, footer, widgets).
 *
 * Enqueued only when the theme actually renders its own header or footer. As
 * soon as a builder theme-builder template takes either location over, this
 * file stops being requested — see Corevia_Assets::modules().
 *
 * The navigation is authored mobile-first. The desktop presentation lives in
 * the generated breakpoint block (inc/design-system.php) because the switch
 * point is a Customizer setting and CSS cannot read a custom property inside a
 * media-query condition.
 *
 * @package Corevia
 * @since   1.0.0
 */

/* ==========================================================================
   1. Header
   ========================================================================== */

.corevia-header {
	border-block-end: var(--theme-border-width) solid var(--theme-border);
	background-color: var(--theme-background);
}

.corevia-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--theme-space-sm);
	padding-block: var(--theme-space-sm);
}

.corevia-header--centered .corevia-header__inner {
	justify-content: center;
	text-align: center;
}

.corevia-header--centered .corevia-header__branding {
	flex-basis: 100%;
}

/* ---------------------------------------------------------------- Branding */

.corevia-branding {
	display: flex;
	align-items: center;
	gap: var(--theme-space-sm);
	min-inline-size: 0;
}

.corevia-header--centered .corevia-branding {
	justify-content: center;
}

.corevia-branding__logo img {
	inline-size: auto;
	max-block-size: var(--corevia-logo-height, 3rem);
}

.corevia-branding__text {
	min-inline-size: 0;
}

.corevia-branding__title {
	margin: 0;
	font-size: var(--theme-text-xl);
	line-height: 1.2;
}

.corevia-branding__title a {
	color: var(--theme-heading);
	text-decoration: none;
}

.corevia-branding__title a:hover {
	color: var(--theme-primary);
}

.corevia-branding__tagline {
	margin: 0;
	color: var(--theme-muted);
	font-size: var(--theme-text-sm);
}

.corevia-header__actions {
	display: flex;
	align-items: center;
	gap: var(--theme-space-sm);
}

/* ==========================================================================
   2. Navigation
   ========================================================================== */

.corevia-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.55em 0.9em;
	border: var(--theme-border-width) solid var(--theme-border);
	border-radius: var(--theme-radius-sm);
	background-color: transparent;
	color: var(--theme-heading);
	font-size: var(--theme-text-sm);
	font-weight: 600;
	cursor: pointer;
}

.corevia-nav-toggle:hover {
	border-color: var(--theme-primary);
	background-color: transparent;
	color: var(--theme-primary);
}

.corevia-nav-toggle__icon {
	display: block;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.corevia-nav-toggle[aria-expanded="true"] .corevia-nav-toggle__icon--open,
.corevia-nav-toggle[aria-expanded="false"] .corevia-nav-toggle__icon--close {
	display: none;
}

/*
 * Mobile panel. It takes a full flex row under the branding so the header never
 * reflows its first line when the menu opens — one of the cheapest ways to keep
 * CLS at zero on a narrow viewport.
 */
.corevia-nav {
	position: relative;
	flex-basis: 100%;
}

.corevia-nav__panel[hidden] {
	display: none;
}

.corevia-nav__list,
.corevia-nav .sub-menu,
.corevia-nav .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.corevia-nav__list {
	display: flex;
	flex-direction: column;
	padding-block: var(--theme-space-xs);
}

.corevia-nav li {
	position: relative;
	margin: 0;
}

.corevia-nav a {
	display: block;
	padding: 0.6em 0.25em;
	color: var(--theme-heading);
	font-size: var(--theme-text-sm);
	font-weight: 500;
	text-decoration: none;
}

.corevia-nav a:hover,
.corevia-nav a:focus-visible {
	color: var(--theme-primary);
}

.corevia-nav .current-menu-item > a,
.corevia-nav .current-menu-ancestor > a,
.corevia-nav [aria-current="page"] {
	color: var(--theme-primary);
	font-weight: 600;
}

.corevia-nav .sub-menu a,
.corevia-nav .children a {
	padding-inline: var(--theme-space-sm);
	font-weight: 400;
}

.corevia-nav .sub-menu .sub-menu a,
.corevia-nav .children .children a {
	padding-inline-start: calc(var(--theme-space-sm) * 2);
}

/* ------------------------------------------------------- Submenu disclosure */

.corevia-nav__item-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.25em;
}

.corevia-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: var(--theme-radius-sm);
	background: none;
	color: currentColor;
	cursor: pointer;
	flex: none;
}

.corevia-submenu-toggle:hover {
	background-color: var(--theme-surface);
	color: var(--theme-primary);
}

.corevia-submenu-toggle svg {
	inline-size: 0.75rem;
	block-size: 0.75rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--theme-transition);
}

.corevia-submenu-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* ==========================================================================
   3. Header search
   ========================================================================== */

.corevia-header__search {
	display: flex;
	gap: 0.35rem;
	max-inline-size: 16rem;
}

.corevia-search-form {
	display: flex;
	gap: 0.35rem;
	inline-size: 100%;
}

.corevia-search-form__field {
	flex: 1 1 auto;
	min-inline-size: 0;
}

/* ==========================================================================
   4. Footer
   ========================================================================== */

.corevia-footer {
	border-block-start: var(--theme-border-width) solid var(--theme-border);
	background-color: var(--theme-surface);
	color: var(--theme-text);
}

.corevia-footer__widgets {
	display: grid;
	gap: var(--theme-space-lg);
	padding-block: var(--theme-space-xl);
}

@media (min-width: 48em) {
	.corevia-footer__widgets--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.corevia-footer__widgets--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.corevia-footer__widgets--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
	.corevia-footer__widgets--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.corevia-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--theme-space-sm);
	padding-block: var(--theme-space-md);
	border-block-start: var(--theme-border-width) solid var(--theme-border);
	color: var(--theme-muted);
	font-size: var(--theme-text-sm);
}

.corevia-footer__bar p {
	margin: 0;
}

.corevia-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--theme-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.corevia-footer__menu li {
	margin: 0;
}

.corevia-footer__menu a {
	color: var(--theme-muted);
	text-decoration: none;
}

.corevia-footer__menu a:hover {
	color: var(--theme-primary);
	text-decoration: underline;
}

/* ==========================================================================
   5. Widgets
   ========================================================================== */

.corevia-sidebar {
	min-inline-size: 0;
}

.corevia-widget + .corevia-widget {
	margin-block-start: var(--theme-space-lg);
}

/*
 * Widget headings.
 *
 * `.corevia-widget__title` is what `register_sidebar()`'s `before_title` puts
 * on a classic widget. Block widgets — the default since WordPress 5.8, and so
 * what most sites now use — do not go through `before_title` at all: they
 * render their own heading block with no theme class on it. Left alone that
 * heading takes the full h2 step, which is around 40px inside a 300px sidebar.
 *
 * Both are given the same size here. The element selector is scoped to the
 * widget and wrapped in `:where()` so a heading a site owner has deliberately
 * sized, in a block or in a builder, still wins.
 */
.corevia-widget__title,
.corevia-widget :where(h1, h2, h3, h4, h5, h6) {
	margin-block-end: var(--theme-space-sm);
	font-size: var(--theme-text-lg);
	line-height: var(--theme-leading-tight);
}

.corevia-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.corevia-widget li {
	padding-block: 0.4em;
	border-block-end: var(--theme-border-width) solid var(--theme-border);
}

.corevia-widget li:last-child {
	border-block-end: 0;
}

.corevia-widget a {
	color: var(--theme-text);
	text-decoration: none;
}

.corevia-widget a:hover {
	color: var(--theme-primary);
	text-decoration: underline;
}

.corevia-widget .sub-menu,
.corevia-widget .children {
	padding-inline-start: var(--theme-space-sm);
}