/* ==========================================================================
   Colitco — header and footer widgets
   Used by Elementor-built headers and footers.
   ========================================================================== */

/* Menu ---------------------------------------------------------------------- */

.colitco-menu__heading {
	margin-bottom: 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.colitco-menu__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.colitco-menu--vertical .colitco-menu__list {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

.colitco-menu--align-start .colitco-menu__list { justify-content: flex-start; }
.colitco-menu--align-center .colitco-menu__list { justify-content: center; }
.colitco-menu--align-end .colitco-menu__list { justify-content: flex-end; }

.colitco-menu__list > li {
	position: relative;
}

.colitco-menu__list a,
.colitco-menu__broken {
	display: inline-flex;
	align-items: center;
	font-size: 0.8125rem;
	font-weight: 600;
	transition: color 0.15s ease, border-color 0.15s ease;
}

/* Header navigation */

.colitco-menu--primary .colitco-menu__list > li > a,
.colitco-menu--primary .colitco-menu__list > li > .colitco-menu__broken {
	padding-block: 1.75rem;
	border-bottom: 2px solid transparent;
	color: var(--foreground);
}

.colitco-menu--primary .colitco-menu__list > li > a:hover {
	color: var(--accent);
}

.colitco-menu--primary .current-menu-item > a,
.colitco-menu--primary .current-menu-ancestor > a {
	border-bottom-color: var(--accent);
	color: var(--accent);
}

/* Footer column */

.colitco-menu--footer .colitco-menu__list {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

.colitco-menu--footer .colitco-menu__list a {
	font-size: 0.75rem;
	font-weight: 400;
	color: color-mix(in oklab, currentColor 70%, transparent);
}

.colitco-menu--footer .colitco-menu__list a:hover {
	color: currentColor;
}

/* Small inline links, for a legal row */

.colitco-menu--inline .colitco-menu__list {
	gap: 0.5rem 1.25rem;
}

.colitco-menu--inline .colitco-menu__list a {
	font-size: 0.6875rem;
	font-weight: 400;
}

/*
 * An item whose destination could not be resolved renders as plain
 * text, so a broken menu is visible rather than quietly linking to the
 * site root.
 */
.colitco-menu__broken {
	color: var(--negative);
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Dropdowns ----------------------------------------------------------------- */

.colitco-menu__sub {
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 60;
	display: none;
	min-width: 12rem;
	margin: 0;
	padding: 0.375rem;
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) - 2px);
	background: var(--popover);
	box-shadow: 0 8px 24px color-mix(in oklab, var(--primary) 10%, transparent);
	list-style: none;
}

.colitco-menu__list > li:hover > .colitco-menu__sub,
.colitco-menu__list > li:focus-within > .colitco-menu__sub {
	display: block;
}

.colitco-menu__sub a {
	display: block;
	padding: 0.5rem 0.625rem;
	border-radius: calc(var(--radius) - 4px);
	font-size: 0.8125rem;
	color: var(--foreground);
}

.colitco-menu__sub a:hover {
	background: var(--secondary);
	color: var(--accent);
}

/* Vertical menus open their children inline rather than floating. */
.colitco-menu--vertical .colitco-menu__sub {
	position: static;
	display: block;
	min-width: 0;
	margin-left: 0.75rem;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* Site links ---------------------------------------------------------------- */

.site-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.site-links--start { justify-content: flex-start; }
.site-links--center { justify-content: center; }
.site-links--end { justify-content: flex-end; }

.site-links__copyright {
	font-size: 0.6875rem;
	opacity: 0.75;
}

.site-links .social { margin-top: 0; }

/* Ticker inside a builder header -------------------------------------------- */

.ticker--widget {
	border-bottom: 0;
	background: transparent;
}

.ticker--widget .ticker__inner {
	height: auto;
	min-height: 2.25rem;
}

/* The template wrappers must not impose their own width. */
.colitco-header-template,
.colitco-footer-template {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Fixes found on a rendered header
   -------------------------------------------------------------------------- */

/*
 * justify-content:flex-end on a scrolling flex row clips the overflow
 * at the START and makes it unreachable, which cut the first ticker
 * quote in half. Pushing with auto margin right-aligns without
 * breaking the scroll.
 */
.ticker__quotes {
	justify-content: flex-start;
}

@media (min-width: 768px) {
	.ticker__quotes {
		justify-content: flex-start;
	}

	.ticker__quotes > :first-child {
		margin-left: auto;
	}
}

/* The first quote never needs a leading rule. */
.ticker__quote:first-child::before {
	display: none;
}

/*
 * Header height. The demo header is a fixed 80px row; here the nav's
 * own padding sets it, so the padding is trimmed and a minimum height
 * holds the row steady when the menu is empty.
 */
.colitco-header-template .brand {
	display: inline-flex;
	align-items: center;
}

/* Builder columns should not add their own gutter inside the chrome. */
.colitco-header-template .elementor-column-gap-no .elementor-column > .elementor-element-populated,
.colitco-footer-template .elementor-column-gap-no .elementor-column > .elementor-element-populated {
	padding: 0;
}

/* Footer templates inherit the dark panel colours. */
.colitco-footer-template {
	background: var(--primary);
	color: var(--primary-foreground);
}

.colitco-footer-template .brand__name,
.colitco-footer-template .brand__tagline,
.colitco-footer-template a {
	color: var(--primary-foreground);
}

.colitco-footer-template .brand__mark {
	background: var(--primary-foreground);
	color: var(--primary);
}

.colitco-footer-template .brand__mark::after {
	background: var(--primary);
}

/* --------------------------------------------------------------------------
   Chrome must not inherit the page builder's page rhythm
   --------------------------------------------------------------------------
   Elementor spaces a page out: a gap under every section, padding
   inside every column, a margin under every widget. In a header that
   stacks into a band of empty space. These rules strip it inside the
   header and footer wrappers only, so pages are untouched, and they
   hold whatever a stored layout says.
   -------------------------------------------------------------------------- */

.colitco-header-template .elementor-section,
.colitco-footer-template .elementor-section {
	margin-block: 0;
}

.colitco-header-template .elementor-widget,
.colitco-footer-template .elementor-widget {
	margin-bottom: 0;
}

.colitco-header-template .elementor-element-populated,
.colitco-footer-template .elementor-element-populated {
	padding: 0;
}

.colitco-header-template .elementor-section > .elementor-container,
.colitco-footer-template .elementor-section > .elementor-container {
	width: min(calc(100% - 2rem), var(--shell-max));
	margin-inline: auto;
}

/* The ticker row is its own band, tight to the content. */
.colitco-header-template .elementor-section:first-child {
	padding-block: 0;
	border-bottom: 1px solid var(--border);
	background: var(--background);
}

.colitco-header-template .elementor-section:first-child .elementor-container {
	min-height: 2.25rem;
}

/* The brand row sits on the card colour, at the demo's 80px height. */
.colitco-header-template .elementor-section:nth-child(2) {
	padding-block: 0;
	border-bottom: 1px solid var(--border);
	background: var(--card);
}

.colitco-header-template .elementor-section:nth-child(2) .elementor-container {
	min-height: 5rem;
	align-items: center;
}

/* Columns in the chrome align on the centre line, not the top. */
.colitco-header-template .elementor-column,
.colitco-footer-template .elementor-column {
	display: flex;
	align-items: center;
}

.colitco-footer-template .elementor-column {
	align-items: flex-start;
}

.colitco-header-template .elementor-widget-wrap,
.colitco-footer-template .elementor-widget-wrap {
	width: 100%;
	align-content: center;
}

/* Brand and links no longer need their own minimum height. */
.colitco-header-template .site-links,
.colitco-header-template .brand {
	min-height: 0;
}

.colitco-header-template .colitco-menu--primary .colitco-menu__list > li > a,
.colitco-header-template .colitco-menu--primary .colitco-menu__list > li > .colitco-menu__broken {
	padding-block: 1.75rem;
}

/* --------------------------------------------------------------------------
   Override the builder's per-element spacing in the chrome
   --------------------------------------------------------------------------
   Elementor writes CSS keyed to each element's own class, for example
   .elementor-element-a1b2c3 { margin: 0 0 40px }. That beats any
   selector written here, so a template saved before the spacing was
   corrected keeps its gaps no matter what this file says.

   !important is used deliberately and only inside the header and
   footer wrappers. A header must not inherit page rhythm, and this way
   the chrome is correct whether or not the stored layout has been
   rebuilt. Pages are untouched.
   -------------------------------------------------------------------------- */

.colitco-header-template .elementor-section,
.colitco-footer-template .elementor-section,
.colitco-header-template .elementor-element,
.colitco-footer-template .elementor-element {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.colitco-header-template .elementor-section,
.colitco-footer-template .elementor-section {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.colitco-header-template .elementor-element-populated,
.colitco-footer-template .elementor-element-populated {
	padding: 0 !important;
}

/* Restore the two bands' own height and colour after that reset. */
.colitco-header-template > .elementor > .elementor-section:first-child > .elementor-container,
.colitco-header-template .elementor-section:first-child > .elementor-container {
	min-height: 2.25rem;
	align-items: center;
}

.colitco-header-template .elementor-section:nth-child(2) > .elementor-container {
	min-height: 5rem;
	align-items: center;
}

.colitco-footer-template .elementor-section {
	padding-block: 1.5rem !important;
}

.colitco-footer-template .elementor-section:first-child {
	padding-top: 2.5rem !important;
}