/* ==========================================================================
   Site-wide Notification Bar
   Thin strip above the main header — same placement as the former
   Accessibility Preferences bar. Not sticky; scrolls away with the page so
   the sticky header still docks at top: 0.
   Managed under Site Settings → Notification Bar.

   Layout: 3-column grid (gutter | content | close) with equal outer columns,
   so the message is centred on the page — not on the space left of the
   close button. Collapses to a left-aligned flex row on small screens.
   ========================================================================== */

/* Hidden for this session (class set by the inline script before the bar) */
html.ac-notice-dismissed .ac-notice-bar {
	display: none;
}

.ac-notice-bar {
	/* Per-variant colours. Defaults = navy bar, white text. */
	--notice-bg:         var(--ac-color-primary);
	--notice-fg:         var(--ac-color-white);
	--notice-accent:     var(--ac-color-primary);     /* icon colour on the white close button */
	--notice-hover-bg:   var(--ac-color-secondary);   /* close hover fill — mirrors the hero slider arrows */
	--notice-hover-fg:   var(--ac-color-white);
	--notice-link-hover-fg: var(--notice-accent);     /* link hover text: bar colour on a white fill */

	background-color: var(--notice-bg);
	color:            var(--notice-fg);
	font-family:      var(--ac-font-family-ui);
	font-size:        var(--ac-font-size-sm);
	line-height:      var(--ac-line-height-tight);
}

.ac-notice-bar--secondary {
	--notice-bg:       var(--ac-color-secondary);
	--notice-accent:   var(--ac-color-secondary);
	--notice-hover-bg: var(--ac-color-primary);
}

.ac-notice-bar--yellow {
	--notice-bg:            var(--ac-color-yellow);
	--notice-fg:            var(--ac-color-text);
	--notice-accent:        var(--ac-color-text);
	--notice-hover-bg:      var(--ac-color-text);
	--notice-hover-fg:      var(--ac-color-yellow);
	--notice-link-hover-fg: var(--ac-color-yellow);  /* dark fill needs yellow text, not dark-on-dark */
}

/* ---- Layout ---- */
.ac-notice-bar__inner {
	display:     flex;
	align-items: center;
	justify-content: center;
	min-height:  52px;
	padding-block: var(--ac-space-2);
}

/* With a close button: equal outer columns keep the text truly centred */
.ac-notice-bar__inner--dismissible {
	display:               grid;
	grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr);
	column-gap:            var(--ac-space-4);
}

.ac-notice-bar__inner--dismissible .ac-notice-bar__text {
	grid-column: 2;
}

.ac-notice-bar__inner--dismissible .ac-notice-bar__close {
	grid-column:  3;
	justify-self: end;
}

/* ---- Message ---- */
.ac-notice-bar__text {
	display:         flex;
	flex-wrap:       wrap;
	align-items:     center;
	justify-content: center;
	gap:             var(--ac-space-2) var(--ac-space-3);
	margin:          0;
	font-weight:     var(--ac-font-weight-medium);
	text-align:      center;
}

.ac-notice-bar__icon {
	flex-shrink: 0;
	font-size:   1.05em;
	opacity:     0.9;
}

/* ---- Link — outlined pill, fills on hover ---- */
.ac-notice-bar__link {
	display:         inline-flex;
	align-items:     center;
	gap:             var(--ac-space-2);
	min-height:      32px;
	padding:         0.25rem var(--ac-space-4);
	border:          2px solid var(--notice-fg);
	border-radius:   var(--ac-radius-pill);
	color:           var(--notice-fg);
	font-weight:     var(--ac-font-weight-semibold);
	text-decoration: none;
	white-space:     nowrap;
	transition:
		background-color var(--ac-duration-short) var(--ac-ease-standard),
		border-color     var(--ac-duration-short) var(--ac-ease-standard),
		color            var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-notice-bar__link:hover,
.ac-notice-bar__link:focus-visible {
	background-color: var(--notice-fg);
	border-color:     var(--notice-fg);
	color:            var(--notice-link-hover-fg);
}

/* ---- Close — solid filled circle, same recipe as the hero slider arrows:
        white disc, coloured icon, soft shadow; inverts on hover/focus ---- */
.ac-notice-bar__close {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           44px;            /* WCAG 2.5.5 target size */
	height:          44px;
	padding:         0;
	background-color: var(--ac-color-white);
	border:          2px solid var(--ac-color-white);
	border-radius:   var(--ac-radius-pill);
	color:           var(--notice-accent);
	line-height:     0;
	cursor:          pointer;
	box-shadow:      0 2px 8px rgba(0, 0, 0, 0.25);
	-webkit-appearance: none;
	appearance:      none;
	transition:
		background-color var(--ac-duration-short) var(--ac-ease-standard),
		border-color     var(--ac-duration-short) var(--ac-ease-standard),
		color            var(--ac-duration-short) var(--ac-ease-standard),
		box-shadow       var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-notice-bar__close-icon {
	display: block;
	width:   16px;
	height:  16px;
}

.ac-notice-bar__close:hover {
	background-color: var(--notice-hover-bg);
	border-color:     var(--notice-hover-bg);
	color:            var(--notice-hover-fg);
	box-shadow:       0 4px 16px rgba(0, 0, 0, 0.30);
}

/* ---- Focus rings — double halo so they read on every bar colour ---- */
.ac-notice-bar__close:focus-visible {
	outline:          none;
	background-color: var(--notice-hover-bg);
	border-color:     var(--notice-hover-bg);
	color:            var(--notice-hover-fg);
	box-shadow:
		0 0 0 3px var(--notice-bg),
		0 0 0 6px var(--notice-fg);
}

.ac-notice-bar__link:focus-visible {
	outline:        3px solid var(--notice-fg);
	outline-offset: 3px;
}

/* Focus target after dismiss — no ring on the header container itself */
#site-header:focus {
	outline: none;
}

/* ---- Small screens: left-aligned row, close pinned right ---- */
@media (max-width: 640px) {
	.ac-notice-bar__inner,
	.ac-notice-bar__inner--dismissible {
		display:         flex;
		justify-content: space-between;
		gap:             var(--ac-space-3);
	}

	.ac-notice-bar__text {
		flex:            1 1 auto;
		justify-content: flex-start;
		text-align:      left;
	}

	.ac-notice-bar__close {
		flex-shrink: 0;
		width:       40px;
		height:      40px;
	}
}