/*
 * veatal.com additions to Dietitian Lite.
 *
 * Loaded after style.css and theme-responsive.css, so plain specificity is
 * enough here — no !important anywhere in this file.
 *
 * The two values the Customizer controls arrive as custom properties printed
 * by veatal/header.php:
 *
 *   --veatal-header-backdrop-color
 *   --veatal-header-fade-height
 *   --veatal-header-top-bg
 *   --veatal-header-top-color
 */

/* ==========================================================================
   Header rows
   ========================================================================== */

/*
 * The header is three rows. Top and middle share .veatal-header__stage, which
 * is the only positioning context the slider gets: images, arrows and the fade
 * all resolve against it, so nothing absolute can reach the menu bar below.
 *
 * The bottom row is a plain block child of #header, which is already width:100%
 * of the body — that is the whole trick to a full-width bar. No 100vw, so no
 * horizontal overflow when a classic scrollbar is present. The links stay
 * inside .container at the theme's 1160px.
 */
.veatal-header__stage {
	position: relative;
}

.veatal-header__top,
.veatal-header__middle {
	position: relative;
	z-index: 1;
}

.veatal-header__bottom {
	position: relative;
	width: 100%;
	border-top: 1px solid var(--color-base-300);
}

.veatal-header__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
	align-items: center;
}

/* ---- Top meta row ---- */

.veatal-header__top {
	background-color: var(--veatal-header-top-bg, transparent);
	color: var(--veatal-header-top-color, inherit);
}

.veatal-header__top-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	align-items: center;
	padding: 6px 0;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 20px;
}

.veatal-header__top-text {
	margin: 0;
	color: inherit;
}

.veatal-header--top-left .veatal-header__top-inner {
	justify-content: flex-start;
}

.veatal-header--top-center .veatal-header__top-inner {
	justify-content: center;
}

.veatal-header--top-right .veatal-header__top-inner {
	justify-content: flex-end;
}

.veatal-header--top-between .veatal-header__top-inner {
	justify-content: space-between;
}

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

/*
 * .head-left carries margin-right: auto from style.css, so every alignment
 * below has to set both margins rather than only the one it needs.
 */
.veatal-header--brand-left .veatal-header__brand {
	margin-right: auto;
	margin-left: 0;
	text-align: left;
}

.veatal-header--brand-center .veatal-header__brand {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.veatal-header--brand-right .veatal-header__brand {
	margin-right: 0;
	margin-left: auto;
	text-align: right;
}

.veatal-header--brand-left .site-logo img {
	margin-right: auto;
	margin-left: 0;
}

.veatal-header--brand-right .site-logo img {
	margin-right: 0;
	margin-left: auto;
}

/* ---- Menu row, desktop ---- */

@media screen and (min-width: 1000px) {
	/* The toggle is a flex item on mobile only; leaving it in place here would
	   claim a gap in every justify-content mode. */
	.veatal-header__bar > .toggle {
		display: none;
	}

	.veatal-header--menu-left .veatal-header__bar {
		justify-content: flex-start;
	}

	.veatal-header--menu-center .veatal-header__bar {
		justify-content: center;
	}

	.veatal-header--menu-right .veatal-header__bar {
		justify-content: flex-end;
	}

	.veatal-header--menu-between .veatal-header__bar {
		justify-content: space-between;
	}
}

/* ---- Extra items and top links ---- */

.veatal-header__extras,
.veatal-header__top-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.veatal-header__extras li,
.veatal-header__top-links li {
	margin: 0;
	padding: 0;
}

.veatal-header__extras a,
.veatal-header__top-links a {
	display: inline-block;
	font-family: var(--font-heading);
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.veatal-header__extras a {
	padding: 6px 0;
	font-size: 16px;
}

.veatal-header__item--button > a {
	padding: 8px 18px;
	background-color: var(--color-primary);
	color: var(--color-primary-content);
	border-radius: var(--radius-field);
}

.veatal-header__item--button > a:hover,
.veatal-header__item--button > a:focus-visible {
	background-color: var(--color-primary-strong);
	color: var(--color-primary-content);
}

/* ==========================================================================
   Menu backdrop
   ========================================================================== */

/*
 * The backdrop exists because the header image will not always contrast with
 * the menu. It fills the menu row completely rather than sitting under the
 * header as a drop shadow. Now that the row is a full-width band, the colour
 * runs edge to edge while the links stay in the container.
 */
body.veatal-header-backdrop .veatal-header__bottom {
	background-color: var(--veatal-header-backdrop-color, var(--color-base-content));
	border-top-color: transparent;
}

/*
 * Second, independent switch: the same colour continues above the menu row and
 * fades out, so the edge between the image and the backdrop is not a hard line.
 *
 * The height is in pixels, not a percentage. An absolutely positioned element
 * resolves a percentage height against its containing block, which here is the
 * menu row itself — a percentage of the thing the fade sits above is not a
 * number anyone can reason about.
 */
body.veatal-header-fade .veatal-header__bottom::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	z-index: 2;
	height: var(--veatal-header-fade-height, 60px);
	background-image: linear-gradient(
		to top,
		var(--veatal-header-backdrop-color, var(--color-base-content)),
		transparent
	);
	pointer-events: none;
}

/* ==========================================================================
   Header slider
   ========================================================================== */

/*
 * The slider fills .veatal-header__stage, not #header: the stage stops above
 * the menu bar, so an arrow or a slide edge can never overlap the navigation.
 */
.veatal-header-slider {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.veatal-header-slider__track {
	position: absolute;
	inset: 0;
}

.veatal-header-slider__slide {
	position: absolute;
	inset: 0;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.veatal-header-slider__slide.is-active {
	opacity: 1;
}

/* Header content stays above the images through the row rules further up. */

/*
 * The control strip is the last child of the middle row, after .container. It
 * is centred with text-align rather than made a flex container: the dots list
 * brings its own inline layout, and keeping the strip out of flex means an
 * arrow that is switched off leaves no gap behind.
 */
.veatal-header__controls {
	position: relative;
	z-index: 1;
	padding: 0 16px 12px;
	text-align: center;
	line-height: 0;
}

.veatal-header-slider__arrow,
.veatal-header-slider__dot {
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--color-primary-content);
	cursor: pointer;
}

.veatal-header-slider__arrow {
	display: inline-block;
	width: 36px;
	height: 36px;
	margin: 0 4px;
	font-size: 24px;
	line-height: 34px;
	vertical-align: middle;
	background-color: color-mix(in srgb, var(--veatal-header-backdrop-color, var(--color-base-content)) 45%, transparent);
	border-radius: var(--radius-box);
	transition: background-color 0.2s ease;
}

.veatal-header-slider__arrow:hover,
.veatal-header-slider__arrow:focus-visible {
	background-color: var(--color-primary);
}

/*
 * The dots are inline-flex so the strip can centre them next to the arrows on
 * one baseline. They no longer claim a full row of the branding flex box, so
 * the branding alignment setting cannot drag them around.
 */
.veatal-header-slider__dots {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin: 0 8px;
	vertical-align: middle;
}

.veatal-header-slider__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--color-primary-content) 55%, transparent);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.veatal-header-slider__dot.is-active {
	background-color: var(--color-primary);
	transform: scale(1.25);
}

.veatal-header-slider__arrow:focus-visible,
.veatal-header-slider__dot:focus-visible {
	outline: 2px solid var(--color-primary-content);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.veatal-header-slider__slide {
		transition: none;
	}
}

/* ==========================================================================
   Menu bar below 1000px
   ========================================================================== */

/*
 * js/custom.js turns the menu into a toggled dropdown below 1000px. The bar is
 * already full width, so the panel only has to stop being constrained: the
 * container goes to 100% and every child fills it. Widening the panel with
 * 100vw instead would overflow by the scrollbar width on any device that still
 * has one.
 *
 * .container is width: 95% in theme-responsive.css, so this needs the extra
 * specificity of the child selector — it does not need !important.
 */
@media screen and (max-width: 999px) {
	.veatal-header__bottom > .container {
		width: 100%;
		margin: 0;
	}

	.veatal-header__bar {
		display: block;
	}

	.veatal-header__bar > .toggle {
		display: block;
		margin: 0;
	}

	.veatal-header__bar > .toggle a {
		display: block;
		width: 100%;
		margin-top: 0;
	}

	.veatal-header__bottom .sitenav,
	.veatal-header__bottom .sitenav ul {
		width: 100%;
	}

	.veatal-header__extras {
		justify-content: center;
		padding: 12px 16px;
	}

	/* The panel is edge to edge, so the links need the padding the container
	   used to provide. */
	.veatal-header__bottom .sitenav ul li a {
		padding-right: 16px;
		padding-left: 16px;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

/*
 * The footer band is already dark, so the menu gets no surface of its own —
 * a second dark block would only read as a seam. It sits directly above the
 * copyright line inside the same wrapper.
 */
.copyright-wrapper .veatal-footer__nav {
	margin-bottom: 6px;
}

.veatal-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.veatal-footer__menu li {
	margin: 0;
	padding: 0;
}

/*
 * Quiet, but not dimmed: the band is near-black, so mixing the link colour
 * towards transparent would sink it into the background. Restraint comes from
 * the size and the missing underline, not from lower contrast.
 */
.veatal-footer__menu a {
	display: inline-block;
	padding: 2px 0;
	color: var(--color-primary-content);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 400;
	line-height: 18px;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: color 0.2s ease;
}

/* Secondary rather than primary: the brand green is too dark on this band. */
.veatal-footer__menu a:hover,
.veatal-footer__menu a:focus-visible,
.veatal-footer__menu .current-menu-item > a {
	color: var(--color-secondary);
}

.veatal-footer__menu a:focus-visible {
	outline: 2px solid var(--color-secondary);
	outline-offset: 2px;
}