/* ---------------------------------------------------------------------------
   Our own styles, kept OUT of style.css.

   style.css is the front-end team's file: the build copies html-build\style.css over
   wwwroot\css\style.css before every build (see SyncFrontEndAssets in tciumbraco.csproj), so anything
   added to either copy is lost the next time they hand over a build. This file is ours and is never
   overwritten. Loaded from Master.cshtml directly after style.css.

   Plain CSS rather than Tailwind classes for anything custom.js creates: those elements appear in no
   template, so a compiled Tailwind build would never see their classes.
   --------------------------------------------------------------------------- */

/* State selector - the select-only combobox custom.js builds over the native <select> */
@scope (#state-select) {
	/* Focus sits on the state name, but the ring goes round the whole pill. Two tones because the hero
	   image can show through behind the selector: ink inside, white outside. */
	:scope:has([role="combobox"]:focus-visible, select:focus-visible) {
		outline: 2px solid var(--color-tci-neutral-warm);
		outline-offset: 2px;
		box-shadow: 0 0 0 2px var(--color-tci-purple-ink);
	}

	[role="combobox"]:focus-visible {
		outline: none;
	}

	:scope:has([aria-expanded="true"]) svg {
		rotate: 180deg;
	}

	[role="listbox"] {
		position: absolute;
		top: calc(100% + 0.25rem);
		inset-inline: 0;
		z-index: 20;
		max-height: min(20rem, 60vh);
		overflow-y: auto;
		padding-block: 0.25rem;
		white-space: normal;
		color: var(--color-tci-neutral-ink);
		background-color: var(--color-tci-neutral-warm);
		border: 1px solid var(--color-tci-neutral-stone);
		box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.25);
		cursor: default;
	}

	[role="option"] {
		position: relative;
		padding: 0.375rem 1rem 0.375rem 2rem;
		cursor: pointer;

		&:hover {
			background-color: var(--color-tci-purple-mist);
		}

		/* the option aria-activedescendant names - real focus never leaves the combobox */
		&.is-active {
			color: var(--color-tci-neutral-warm);
			background-color: var(--color-tci-purple-primary);
		}

		&[aria-selected="true"] {
			font-weight: 700;

			&::before {
				content: "\2713" / "";
				position: absolute;
				left: 0.75rem;
			}
		}
	}
}

/* ---------------------------------------------------------------------------
   Jump nav (skip links) - _SkipLinks.cshtml, first thing in <body>.

   Plain CSS rather than Tailwind's "sr-only focus:not-sr-only": not-sr-only resets position to
   static, so the revealed link would need a second set of positioning utilities to put it back on
   screen, and the whole thing reads worse than six declarations.

   position: FIXED, not absolute as the core build has it. Absolute positions against the initial
   containing block, which scrolls away - fine while the visitor is at the top of the page, which is
   where skip links are normally reached, but it means a link reached by Shift+Tab after scrolling
   reveals itself somewhere off screen. Fixed cannot do that.
   --------------------------------------------------------------------------- */
.jump-nav {
	position: fixed;
	top: -200px;
	left: 0;
	/* above the header, which is z-20 */
	z-index: 100;
	padding: 0.75rem 1.25rem;
	color: var(--color-tci-neutral-warm);
	background-color: var(--color-tci-purple-ink);

	/* :focus, not :focus-visible - this must appear for a mouse user who tabs in from the URL bar,
	   and a link reached by Tab satisfies both anyway */
	&:focus {
		top: 0;
		outline: 2px solid var(--color-tci-neutral-warm);
		outline-offset: -4px;
	}
}

/* "Skip to menu" points at #nav-toggle, which is xl:hidden - so above the same breakpoint this link
   would focus nothing. display:none also takes it out of the tab order, which is the point: a skip
   link that lands nowhere is worse than no skip link. 80rem is Tailwind's xl and the breakpoint the
   mobile-nav matchMedia in index.js uses - keep all three in step. */
@media (width >= 80rem) {
	.jump-nav-mobile {
		display: none;
	}
}

/* The header is fixed at the top, so a target scrolled flush to the viewport top lands UNDER it.
   Same --header-height the front-end build uses for its own in-page anchors (.tab-content).
   #utility-nav and #primary-nav are inside that fixed header and never scroll, so they need none. */
#main,
#site-footer {
	scroll-margin-top: var(--header-height);
}

/* The targets are only focusable so the skip link can move focus to them; they are not controls, so
   the focus ring that lands on a whole page region is noise. Focus is still MOVED - the next Tab
   continues from here - which is the part that matters. */
#main:focus,
#utility-nav:focus,
#primary-nav:focus,
#site-footer:focus {
	outline: none;
}

/* ---------------------------------------------------------------------------
   Consent placeholders - the message shown where a gated third-party embed would be.

   Shown by DEFAULT and hidden once its category is accepted, which is the safe way round: if the
   class never lands, a visitor sees the message and a working link to the form rather than an empty
   column with no explanation.

   The consent-<category> classes are put on <html> inline in Master.cshtml's <head> (so a returning
   visitor never sees a flash of these) and kept in step from cc:onChange in custom.js.
   --------------------------------------------------------------------------- */
.consent-placeholder {
	margin-block: 0.5rem;

	/* The link follows whatever colour the paragraph was given, so a caller placing this on a dark
	   background sets ONE class rather than colouring the anchor separately. Tailwind's preflight
	   leaves <a> with no colour of its own, so without this it inherits the body colour and goes
	   near-invisible on the footer's purple - which is exactly what happened. */
	a {
		color: inherit;
		text-decoration: underline;
	}
}

html.consent-analytics .consent-placeholder[data-consent-category="analytics"],
html.consent-marketing .consent-placeholder[data-consent-category="marketing"],
html.consent-personalization .consent-placeholder[data-consent-category="personalization"] {
	display: none;
}