/* ==========================================================================
   Food Safety & Quality Summit — hero section
   --------------------------------------------------------------------------
   Replaces the original royalSlider banner. The three slide images
   (wb-s1.png / wb-s2.jpg / wb-s3.jpg) were never captured and are absent from
   the Wayback archive, so the hero is rebuilt from the event's own content and
   brand colours. No image files; the only script involved is hero-offset.js,
   which measures the fixed header (see --fsq-header-h below) and is optional.
   All rules are scoped to .fsq-hero / .fsq-btn so nothing here can collide
   with the Zephyr theme stylesheets.
   ========================================================================== */

.fsq-hero {
	--fsq-deep:   #062c15;
	--fsq-mid:    #0d5a2b;
	--fsq-brand:  #0b9444;
	--fsq-accent: #b7e778;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* --fsq-header-h is published by assets/js/hero-offset.js and is 0 unless the
	   header is position:fixed. The fallback covers the no-JS case at the widths
	   where the theme fixes the header. */
	--fsq-header-h: 0px;
	padding: calc(clamp(3.5rem, 8vw, 7rem) + var(--fsq-header-h)) 1.25rem clamp(3.25rem, 7vw, 6rem);
	background:
		radial-gradient(90rem 40rem at 78% -10%, rgba(11, 148, 68, .55), transparent 60%),
		radial-gradient(60rem 40rem at 5% 110%, rgba(183, 231, 120, .18), transparent 60%),
		linear-gradient(135deg, var(--fsq-deep) 0%, #0a4522 45%, var(--fsq-mid) 100%);
	color: #fff;
	text-align: center;
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --- decorative backdrop ------------------------------------------------
   Fills the whole section behind the content. To use a real banner photo
   instead, drop the file into assets/images/ and add here:
       .fsq-hero__art { background: url(../images/your-banner.jpg) center/cover; }
       .fsq-hero__art-svg { display: none; }
   ---------------------------------------------------------------------- */

.fsq-hero__art {
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
}

.fsq-hero__art-svg {
	width: 100%;
	height: 100%;
	display: block;
}

.fsq-hero__inner {
	position: relative;
	max-width: 62rem;
	margin: 0 auto;
}

/* --- eyebrow ------------------------------------------------------------ */

.fsq-hero__eyebrow {
	margin: 0 0 1.15rem;
	font-size: clamp(.7rem, 1.4vw, .8rem);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}

/* --- title ---------------------------------------------------------------
   The event's own logo lockup is the title: it already carries the name, the
   leaf mark and the dates. It is dark artwork on transparency, so it sits on a
   light plate to stay legible against the deep-green ground. */

.fsq-hero__title {
	margin: 0;
	font-size: 0;          /* the h1 contains only an image */
	line-height: 0;
}

.fsq-hero__logo {
	display: block;
	width: clamp(15rem, 42vw, 30rem);
	height: auto;
	margin: 0 auto;
	padding: clamp(1.1rem, 2.6vw, 2rem) clamp(1.4rem, 3.4vw, 2.75rem);
	border-radius: 1.25rem;
	background: rgba(255, 255, 255, .95);
	box-shadow:
		0 1.5rem 3rem rgba(0, 0, 0, .3),
		0 0 0 1px rgba(255, 255, 255, .35);
}

/* --- theme line --------------------------------------------------------- */

.fsq-hero__theme {
	position: relative;
	max-width: 44rem;
	margin: 1.4rem auto 0;
	padding-top: 1.4rem;
	font-size: clamp(1rem, 2.1vw, 1.3rem);
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, .92);
}

.fsq-hero__theme::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 4.5rem;
	height: 3px;
	border-radius: 3px;
	background: var(--fsq-accent);
	transform: translateX(-50%);
}

/* --- date / format chips ------------------------------------------------ */

.fsq-hero__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .7rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.fsq-hero__meta li {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	padding: .55rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 2rem;
	background: rgba(255, 255, 255, .1);
	font-size: clamp(.82rem, 1.6vw, .95rem);
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.fsq-hero__meta svg {
	flex: none;
	width: 1.05em;
	height: 1.05em;
	fill: var(--fsq-accent);
}

/* --- calls to action ---------------------------------------------------- */

.fsq-hero__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .85rem;
	margin-top: 2.4rem;
}

.fsq-btn {
	display: inline-block;
	min-width: 11.5rem;
	padding: .95rem 1.9rem;
	border: 2px solid rgba(255, 255, 255, .55);
	border-radius: 2.5rem;
	background: transparent;
	color: #fff;
	font-size: clamp(.85rem, 1.6vw, .95rem);
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.fsq-btn:hover,
.fsq-btn:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
}

.fsq-btn--primary {
	border-color: var(--fsq-accent);
	background: var(--fsq-accent);
	color: #06301a;
	box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .25);
}

.fsq-btn--primary:hover,
.fsq-btn--primary:focus-visible {
	border-color: #fff;
	background: #fff;
	color: #06301a;
}

.fsq-hero a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 600px) {
	.fsq-hero__meta li { white-space: normal; }

	.fsq-hero__cta { flex-direction: column; align-items: stretch; }

	.fsq-btn { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.fsq-btn { transition: none; }
	.fsq-btn:hover,
	.fsq-btn:focus-visible { transform: none; }
}

/* No-JS fallback: the theme fixes the header from ~1000px up, so reserve room
   for it. Overridden by the measured value as soon as hero-offset.js runs. */
@media (min-width: 1000px) {
	.fsq-hero { --fsq-header-h: 180px; }
}

@media (min-width: 1300px) {
	.fsq-hero { --fsq-header-h: 140px; }
}

/* ==========================================================================
   Section backgrounds
   --------------------------------------------------------------------------
   Three full-width section grounds used to be bitmaps that could not carry the
   width they were stretched to: a 300x168 navy JPEG behind "Key Participants",
   a 600x230 cyan/yellow leaf behind the magazine covers, and a 1920x1080 stock
   wallpaper behind the dignitaries' letters that carried a visible
   "DesktopBackground.org" watermark in its lower-right corner. All three are
   now gradients in the event's own palette: sharp at any width, consistent with
   the hero, no watermark, and ~150 KB less to download.

   The theme sets background-size/position on .l-section-img, so these only need
   to supply the image itself.
   ========================================================================== */

.fsq-bg {
	--fsq-deep:   #062c15;
	--fsq-mid:    #0d5a2b;
	--fsq-brand:  #0b9444;
	--fsq-accent: #b7e778;
}

/* Dark ground — white headings sit on this, and colourful artwork (magazine
   covers) reads well against it. */
.fsq-bg--deep {
	background-image:
		radial-gradient(70rem 34rem at 82% -20%, rgba(11, 148, 68, .5), transparent 62%),
		radial-gradient(52rem 32rem at 6% 118%, rgba(183, 231, 120, .16), transparent 62%),
		linear-gradient(135deg, var(--fsq-deep) 0%, #0a4522 48%, var(--fsq-mid) 100%);
}

/* Light ground — cream documents (the dignitaries' letters) need a mid-tone
   that lets their edges show without a border. */
.fsq-bg--light {
	background-image:
		radial-gradient(60rem 30rem at 88% 8%, rgba(255, 255, 255, .5), transparent 58%),
		radial-gradient(50rem 30rem at 4% 96%, rgba(11, 148, 68, .18), transparent 60%),
		linear-gradient(150deg, #eaf6dd 0%, #cfe9b4 52%, #aed98a 100%);
}