/* ==========================================================================
   Gertrudes — expandable announcement bar (2026-08-22)
   --------------------------------------------------------------------------
   One shared component for BOTH headers (common/header.twig renders it in
   header2.twig; the phone header renders the identical markup), replacing
   the former marquee + "Order by Facebook" pill. Collapsed: a single promo
   message at a time, crossfading every ~5.5s (gtr-annbar.js), with a chevron
   inviting expansion. Expanded: a white services panel — Same-Day Delivery /
   Custom Arrangements / Order on Facebook — where the Facebook CTA lives as
   the strongest action instead of competing with every message in the bar.

   Deliberate choices, learned from this theme's traps:
   - NOT a Bootstrap dropdown (clearMenus closes those on inside clicks —
     same reason the drawers are self-contained toggles).
   - Explicit background/color + hover on every <button> here: the generated
     plaza/theme.css styles bare button{} dark with a tan hover, and any
     unstyled button inherits that.
   - Focus rings carry !important: stylesheet.css:7 kills outlines globally
     with *:focus{outline:none !important} (see gtr-nav.css §11 precedent).
   - Sized in px, not rem: the two headers resolve rem differently.
   ========================================================================== */

:root {
	--ga-orange: #c73e12;        /* brand-strong: white on it passes AA */
	--ga-orange-deep: #a53100;
	--ga-soft: #fdeee6;
	--ga-ink: #2f2a26;
	--ga-muted: #6f6862;
	--ga-line: #efe8e2;
	--ga-fb: #1877f2;
}

.gtr-annbar {
	position: relative;
}

/* Screen-reader-only helper local to the component: the rotating teaser is
   aria-hidden, this carries the button's stable accessible name. */
.gtr-annbar__vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   1. Collapsed bar
   -------------------------------------------------------------------------- */
.gtr-annbar__toggle {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 42px;
	padding: 0 16px;
	border: 0;
	background: var(--ga-orange);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	overflow: hidden;
	transition: height 280ms ease, opacity 280ms ease, background 180ms ease;
}

.gtr-annbar__toggle:hover,
.gtr-annbar__toggle:active {
	background: var(--ga-orange-deep);
	color: #fff;
}

/* Crossfade rotator: messages stacked in one grid cell; gtr-annbar.js moves
   .is-active. No horizontal movement — a calm fade, per the approved spec.
   The script sets an explicit width matched to the ACTIVE message (fit()),
   so the chevron hugs the end of the current phrase; the width transition
   makes it glide there as phrases change length. */
.gtr-annbar__rotator {
	display: grid;
	justify-items: start;
	min-width: 0;
	max-width: 100%;
	transition: width 320ms ease;
}

.gtr-annbar__msg {
	grid-area: 1 / 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 320ms ease;
}

.gtr-annbar__msg.is-active {
	opacity: 1;
}

/* Two lengths of the same promise for the one phrase that outgrew the phone
   bar. display (not visibility) so the hidden variant contributes nothing to
   scrollWidth — that measurement is what positions the chevron. */
.gtr-annbar__narrow {
	display: none;
}

.gtr-annbar__chev {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	transition: transform 200ms ease;
}

.gtr-annbar.is-open .gtr-annbar__chev {
	transform: rotate(180deg);
}

/* Smart sticky header: the bar collapses on scroll down exactly as the old
   strip did — both headers' body classes are handled here. */
body.gtr-scroll-down .gtr-annbar__toggle,
body.gt-scroll-down .gtr-annbar__toggle {
	height: 0;
	opacity: 0;
}

/* --------------------------------------------------------------------------
   2. Scrim — dims the page while the panel is open; click closes.
      Painted in DOM order (no z-index): the toggle and panel carry z-index:1
      so they stay bright above it.
   -------------------------------------------------------------------------- */
.gtr-annbar__scrim {
	position: fixed;
	inset: 0;
	background: rgba(35, 27, 25, 0.42);
	cursor: default;
}

.gtr-annbar__scrim[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   3. Expanded panel
   -------------------------------------------------------------------------- */
.gtr-annbar__panel {
	position: absolute;
	z-index: 1;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border-bottom: 1px solid var(--ga-line);
	box-shadow: 0 24px 40px rgba(35, 27, 25, 0.18);
	animation: ga-panel-in 220ms ease;
	/* Short viewports (landscape phones, small phones): the panel scrolls
	   itself so the CLOSE control can never sit out of reach. The offset
	   covers the tallest header stack above the panel (~180px utility +
	   topbar + bar on phones) plus breathing room. */
	max-height: calc(100vh - 210px);
	max-height: calc(100dvh - 210px);
	overflow-y: auto;
}

.gtr-annbar__panel[hidden] {
	display: none;
}

@keyframes ga-panel-in {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.gtr-annbar__panel-inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 24px 28px;
}

.gtr-annbar__x {
	position: absolute;
	top: 14px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--ga-line);
	border-radius: 0;
	background: #fff;
	color: var(--ga-ink);
	cursor: pointer;
	transition: border-color 180ms ease, background 180ms ease;
}

.gtr-annbar__x:hover,
.gtr-annbar__x:active {
	background: var(--ga-soft);
	border-color: var(--ga-orange);
	color: var(--ga-ink);
}

.gtr-annbar__x svg {
	width: 18px;
	height: 18px;
}

.gtr-annbar__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px;
	padding-right: 64px; /* clears the X */
}

/* Flex column with the CTA pinned to the bottom: grid stretches the three
   cards to equal height, so badges, titles and CTAs align across the row
   however differently the descriptions wrap. */
.gtr-annbar__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.gtr-annbar__card .gtr-annbar__link,
.gtr-annbar__card .gtr-annbar__cta {
	margin-top: auto;
}

.gtr-annbar__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--ga-soft);
	color: var(--ga-orange);
}

.gtr-annbar__badge svg {
	width: 22px;
	height: 22px;
}

.gtr-annbar__card h3 {
	margin: 0 0 8px;
	color: var(--ga-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gtr-annbar__card p {
	margin: 0 0 14px;
	color: var(--ga-muted);
	font-size: 13.5px;
	line-height: 1.6;
}

/* Text CTAs (delivery, flowers): underlined brand-strong links with arrow. */
.gtr-annbar__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ga-orange);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gtr-annbar__link:hover,
.gtr-annbar__link:focus {
	color: var(--ga-orange-deep);
	text-decoration: underline;
}

.gtr-annbar__link svg {
	width: 14px;
	height: 14px;
}

/* The strongest CTA: filled pill for the store's primary ordering channel. */
.gtr-annbar__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--ga-orange);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 180ms ease, box-shadow 180ms ease;
}

.gtr-annbar__cta:hover,
.gtr-annbar__cta:focus {
	background: var(--ga-orange-deep);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(35, 27, 25, 0.22);
}

.gtr-annbar__cta svg {
	width: 15px;
	height: 15px;
}

/* Mobile-only full-width close row (the X hides there). */
.gtr-annbar__closerow {
	display: none;
	width: 100%;
	margin-top: 20px;
	padding: 12px 0;
	border: 0;
	border-top: 1px solid var(--ga-line);
	background: #fff;
	color: var(--ga-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.gtr-annbar__closerow:hover,
.gtr-annbar__closerow:active {
	background: var(--ga-soft);
	color: var(--ga-ink);
}

/* While the panel is open the Messenger bubble yields: its maxed z-index
   cannot be out-stacked, so it hides entirely and returns on close — the
   same documented pattern as the drawers. visibility (not display) so the
   widget's iframe never reloads. */
body.gtr-annbar-open .messenger-float,
body.gtr-annbar-open #fb-root .fb_dialog,
body.gtr-annbar-open #fb-root iframe {
	visibility: hidden !important;
}

/* --------------------------------------------------------------------------
   4. Phones: bar tightens; cards become full-width rows; CLOSE row appears
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.gtr-annbar__toggle {
		height: 40px;
		font-size: 11px;
	}

	.gtr-annbar__wide { display: none; }

	.gtr-annbar__narrow { display: inline; }

	/* Full-screen takeover: the panel fills everything below the bar
	   (--ga-top is its measured viewport offset, set by gtr-annbar.js on
	   open/resize) and the page behind stops scrolling — the drawers'
	   pattern. The panel itself scrolls when the content is taller. */
	body.gtr-annbar-open {
		overflow: hidden;
	}

	.gtr-annbar__panel {
		height: calc(100vh - var(--ga-top, 180px));
		height: calc(100dvh - var(--ga-top, 180px));
		max-height: none;
	}

	/* Flex column so the CLOSE row rides the bottom edge when content is
	   short, and sticks over the scrolling content when it is tall. */
	.gtr-annbar__panel-inner {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		padding: 22px 18px 0;
	}

	.gtr-annbar__x {
		display: none;
	}

	.gtr-annbar__cards {
		flex: 1 1 auto;
		grid-template-columns: 1fr;
		gap: 0;
		padding-right: 0;
	}

	.gtr-annbar__card {
		padding: 16px 0;
	}

	.gtr-annbar__card + .gtr-annbar__card {
		border-top: 1px solid var(--ga-line);
	}

	.gtr-annbar__badge {
		width: 38px;
		height: 38px;
		margin-bottom: 8px;
	}

	.gtr-annbar__card p {
		margin-bottom: 10px;
	}

	.gtr-annbar__closerow {
		display: block;
		position: sticky;
		bottom: 0;
		margin-top: auto;
		padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
		background: #fff;
	}
}

/* --------------------------------------------------------------------------
   5. Focus + reduced motion
   -------------------------------------------------------------------------- */
/* !important answers stylesheet.css:7's global *:focus{outline:none !important}. */
.gtr-annbar__toggle:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: -3px;
}

.gtr-annbar__panel button:focus-visible,
.gtr-annbar__panel a:focus-visible {
	outline: 2px solid var(--ga-orange) !important;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.gtr-annbar__toggle,
	.gtr-annbar__msg,
	.gtr-annbar__chev,
	.gtr-annbar__x,
	.gtr-annbar__cta {
		transition: none;
	}

	.gtr-annbar__panel {
		animation: none;
	}
}