/* GSD Announcements — the rotating banner at the top of the fixed header.
 *
 * Two html classes, set by the inline <head> script before first paint:
 *   .gsd-announce-on      banner shows; every offset below applies
 *   .gsd-announce-closed  closed this session (cookie) — nothing applies
 * Neither (no JavaScript) behaves like .gsd-announce-closed.
 *
 * --gsd-announce-h is the banner's real height, written onto <html> by the
 * inline script right after the banner markup and kept current by
 * announcements.js. The values on html.gsd-announce-on below are only the
 * first-paint estimate for a browser that has not run that script yet.
 */

.gsd-announce {
	display: none;
}

html.gsd-announce-on {
	--gsd-announce-h: 40px;
	/* Anchor jumps and scrollIntoView() land below the taller header. Adds to
	   each target's own scroll-margin-top (region finder, service tabs), which
	   was sized for the header alone. Webflow's smooth scroll measures the
	   header element itself, so it needs nothing. */
	scroll-padding-top: var(--gsd-announce-h);
}

/* --- The banner ---------------------------------------------------------- */

html.gsd-announce-on .gsd-announce {
	display: block;
}

/* It is the first child of .navbar, a flex COLUMN whose items are centred
   (navigation.css) or pushed to the end (webflow.css <=991px) — so it has to
   claim the full width itself. */
.gsd-announce {
	position: relative;
	box-sizing: border-box;
	flex: none;
	align-self: stretch;
	width: 100%;
	padding: 6px 56px;
	overflow: hidden;
	/* The navy inner-page header's ground and gold hairlines
	   (style.css `.standard-inner-head.ip-header--navy`); the wave pattern is
	   the SVG below. White text on #031444 is ~17:1. */
	background-color: #031444;
	border-top: 1px solid rgba(201, 168, 76, 0.45);
	border-bottom: 1px solid rgba(201, 168, 76, 0.45);
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

/* Same box and crop as the page header's .ip-banner__pattern (xMidYMid slice
   fills the strip); its .3 opacity was an inline style there. */
.gsd-announce__pattern {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	pointer-events: none;
}

/* Every announcement shares ONE grid cell, so the banner is as tall as the
   longest and does not change height as they rotate. */
.gsd-announce__slides {
	position: relative; /* above the pattern */
	display: grid;
}

.gsd-announce .gsd-announce__slide {
	grid-area: 1 / 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 14px;
	margin: 0;
	/* Each announcement is a <p>, and webflow.css sets `p { font-size: 1rem }`
	   on the element itself, which beats inheriting .gsd-announce's size at
	   every breakpoint. (0,2,0) here wins over that (0,0,1). */
	font-size: inherit;
	text-align: center;
	opacity: 0;
	/* visibility, not just opacity: a hidden announcement's link must leave the
	   tab order and the accessibility tree. It flips after the fade-out. */
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.gsd-announce .gsd-announce__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease;
}

/* (0,2,1): style.css's `.entry a` and the header's link rules lose to it.
   Gold with a navy label, like the header's Book Online Today (~7.4:1). The
   gold is a button-sized accent now, not the whole strip. */
.gsd-announce a.gsd-announce__btn {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid var(--color-6, #d29f13);
	background: var(--color-6, #d29f13);
	color: var(--color-2, #001543);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* White, not a darker gold: white text on the gold would be ~2.4:1. */
.gsd-announce a.gsd-announce__btn:hover,
.gsd-announce a.gsd-announce__btn:focus-visible {
	border-color: #fff;
	background: #fff;
	color: var(--color-2, #001543);
}

.gsd-announce a.gsd-announce__btn:focus-visible,
.gsd-announce .gsd-announce__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.gsd-announce .gsd-announce__close {
	position: absolute;
	top: 50%;
	right: 12px;
	display: grid;
	place-items: center;
	width: 32px; /* SC 2.5.8 wants 24 */
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transform: translateY(-50%);
	z-index: 1; /* above the pattern */
}

.gsd-announce .gsd-announce__close:hover {
	background: rgba(255, 255, 255, 0.15);
}

.gsd-announce__close svg {
	display: block;
	width: 14px;
	height: 14px;
}

@media (max-width: 767px) {
	html.gsd-announce-on {
		--gsd-announce-h: 56px;
	}

	.gsd-announce {
		padding: 6px 44px;
		font-size: 14px;
	}

	.gsd-announce .gsd-announce__slide {
		gap: 4px 10px;
	}

	.gsd-announce .gsd-announce__close {
		right: 6px;
	}
}

/* <=479px: much smaller (owner, 2026-10-05). The boxed button is what wrapped
   onto a line of its own, so here it becomes an inline gold text link that
   simply follows the sentence (~7.5:1 on the navy) — one or two short lines
   instead of three. Inline links in running text are exempt from SC 2.5.8's
   24px target; the X keeps 24px. */
@media (max-width: 479px) {
	html.gsd-announce-on {
		--gsd-announce-h: 30px;
	}

	.gsd-announce {
		padding: 4px 30px;
		font-size: 10px;
		line-height: 1.3;
	}

	.gsd-announce .gsd-announce__slide {
		display: block;
	}

	.gsd-announce a.gsd-announce__btn,
	.gsd-announce a.gsd-announce__btn:hover,
	.gsd-announce a.gsd-announce__btn:focus-visible {
		display: inline;
		margin-left: 6px;
		padding: 0;
		border: 0;
		background: none;
		font-size: 9px;
		letter-spacing: 0.05em;
		line-height: inherit;
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.gsd-announce a.gsd-announce__btn {
		color: var(--color-6, #d29f13);
	}

	.gsd-announce a.gsd-announce__btn:hover,
	.gsd-announce a.gsd-announce__btn:focus-visible {
		color: #fff;
	}

	.gsd-announce .gsd-announce__close {
		right: 3px;
		width: 24px;
		height: 24px;
	}

	.gsd-announce__close svg {
		width: 10px;
		height: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gsd-announce .gsd-announce__slide,
	.gsd-announce .gsd-announce__slide.is-active {
		transition: none;
	}
}

/* --- Make room for it ----------------------------------------------------
   The header is fixed, so the banner makes IT taller but does not move the
   page. Everything the theme sized to "clear the header" gets the banner's
   height added here — and only while the banner is open, so closing it puts
   every value back to the theme's own. */

/* The page. Every hero and inner-page header clears the fixed header with its
   own margin-top (151px, 130px, var(--gsd-header-h) ...); they all sit inside
   <main id="content"> (header.php), so one padding moves them all and none of
   those numbers changes. */
html.gsd-announce-on #content {
	padding-top: var(--gsd-announce-h);
}

/* The sticky sidebar (style.css: `aside { top: 170px }`). The location contact
   bar is a fixed <aside> that resets `top`, hence the :not(). */
html.gsd-announce-on aside:not(.gsd-locbar) {
	top: calc(170px + var(--gsd-announce-h));
}

/* The sticky tab rail of glacial/service-tabs (blocks-frontend.css, 130px;
   static <=991px, where top does nothing). */
html.gsd-announce-on .gl-svc-tabs__menu {
	top: calc(130px + var(--gsd-announce-h));
}

/* <=767px the hamburger is absolutely centred on the one header row
   (style.css: top: 50% of .navbar). With the banner on top, 50% of the header
   is no longer the middle of that row. */
@media (max-width: 767px) {
	html.gsd-announce-on .navbar > #openNavMenu {
		top: calc(var(--gsd-announce-h) + var(--gsd-header-h, 70px) / 2);
	}
}