/* ==========================================================================
   THE HEADER OVER THE HOME FILM

   On the home page the header belongs ON the hero, not above it: no white
   band, no gap, the film running from the very top of the window and the
   navigation sitting on it. Everywhere else the header is exactly as it was.

   HOW IT IS SCOPED
   template-parts/header.php adds .sud-hd--over on the front page only, so
   nothing here can reach an inner page. Each rule names that class.

   OUT OF THE FLOW, NOT JUST TRANSPARENT
   A sticky header still occupies its own height at the top of the document,
   which is what pushed the film down and left the white band. Fixed takes it
   out of the flow entirely, so the hero starts at y=0 and the header floats
   over it. It stays put while the page scrolls, which is what sticky was
   doing anyway.

   READABLE AT REST, SOLID ONCE SCROLLED
   Over the film the links are white. The film is dark enough under the
   navigation that no scrim is needed for the logo or the links, but a soft
   top-down wash is laid behind them anyway so the text holds up whatever
   frame the film happens to be on — it is a gradient to transparent, not a
   panel, so it reads as part of the picture.

   Past the hero the header would be white text on white sections, so at the
   first scroll — header.js adds .is-stuck beyond 4px — it returns to the
   ordinary solid header. That transition is the only moment anything changes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The shell
   -------------------------------------------------------------------------- */

.sud-hd--over {
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
	transition:
		background .38s var(--sud-ease),
		border-color .38s var(--sud-ease),
		box-shadow .38s var(--sud-ease);
}

/*
 * The wash. Strongest at the very top and gone by the header's bottom edge, so
 * there is no visible seam where it ends.
 */
.sud-hd--over::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		rgba(6, 26, 19, .42) 0%,
		rgba(6, 26, 19, .22) 55%,
		rgba(6, 26, 19, 0) 100%
	);
	opacity: 1;
	transition: opacity .38s var(--sud-ease);
	pointer-events: none;
}

/* Once the film is behind us, the ordinary header returns. */
.sud-hd--over.is-stuck {
	background: var(--sud-surface);
	border-bottom-color: var(--sud-line);
}

.sud-hd--over.is-stuck::before { opacity: 0; }

/* --------------------------------------------------------------------------
   2. The mark — coloured device, reversed wordmark, while over the film
   -------------------------------------------------------------------------- */

/*
 * header.css sets `.sud-hd__logo img { display: block }`, which is (0,1,1);
 * a single class here would tie on nothing and lose. Naming the anchor as
 * well makes these (0,2,0), one class above it.
 */
.sud-hd__logo .sud-hd__logo-img--light { display: none; }

.sud-hd--over:not(.is-stuck) .sud-hd__logo .sud-hd__logo-img--dark  { display: none; }
.sud-hd--over:not(.is-stuck) .sud-hd__logo .sud-hd__logo-img--light { display: block; }

/* --------------------------------------------------------------------------
   3. The navigation, in white, while over the film
   -------------------------------------------------------------------------- */

.sud-hd--over:not(.is-stuck) .sud-hd__link,
.sud-hd--over:not(.is-stuck) .sud-hd__wordmark {
	color: #fff;
}

.sud-hd--over:not(.is-stuck) .sud-hd__item.is-current > .sud-hd__link,
.sud-hd--over:not(.is-stuck) .sud-hd__item.is-open > .sud-hd__link,
.sud-hd--over:not(.is-stuck) .sud-hd__link:hover {
	color: #fff;
}

/* The underline is the brand green on white; on the film it is white. */
.sud-hd--over:not(.is-stuck) .sud-hd__link::after {
	background: #fff;
}

.sud-hd--over:not(.is-stuck) .sud-hd__caret {
	opacity: .8;
}

/* A text shadow rather than a heavier scrim: it costs nothing and keeps the
   labels legible over a bright frame without dimming the picture. */
.sud-hd--over:not(.is-stuck) .sud-hd__nav,
.sud-hd--over:not(.is-stuck) .sud-hd__logo {
	text-shadow: 0 1px 2px rgba(6, 26, 19, .35);
}

/* The burger, on phones, in white over the film. */
.sud-hd--over:not(.is-stuck) .sud-hd__burger span {
	background: #fff;
}

/*
 * The mega panel is a solid sheet in its own right and must stay readable, so
 * it keeps its own ground and ink even while the bar above it is transparent.
 */
.sud-hd--over .sud-mega {
	text-shadow: none;
}

/* --------------------------------------------------------------------------
   4. THE HOME HERO — the full window, starting at the top

   The banner no longer has a header above it to allow for, so it takes the
   whole window. --sud-hero-bar is the admin bar's height, set in
   home-video-banner.css and 0 for a signed-out visitor, so the film still
   ends exactly at the fold for an editor.

   The film keeps the `cover` it already used: its subject is centred, so the
   trim comes off the sides and nothing of the mark is lost. No stretch, no
   letterbox, no wash.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {

	.sud-hd--over ~ .elementor .e-con.sud-banner.sud-vbanner,
	body.home .elementor .e-con.sud-banner.sud-vbanner {
		aspect-ratio: auto;
		block-size: calc(100vh - var(--sud-hero-bar, 0px));
		block-size: calc(100svh - var(--sud-hero-bar, 0px));
		min-block-size: 0;
		max-block-size: none;
	}
}

/* --------------------------------------------------------------------------
   5. THE MENU, A LITTLE SMOOTHER

   The underline, the colour fade, the caret and the panel were all already
   animated; these only refine them. Nothing is restyled and no link changes.
   -------------------------------------------------------------------------- */

.sud-hd__link {
	transition:
		color .28s var(--sud-ease),
		transform .28s var(--sud-ease);
}

@media (hover: hover) {
	/* A single pixel. Enough to feel alive, too little to read as movement. */
	.sud-hd__item:not(.is-open) > .sud-hd__link:hover {
		transform: translateY(-1px);
	}

	/* The caret leans before the panel opens, then completes the turn. */
	.sud-hd__item:not(.is-open) > .sud-hd__link:hover .sud-hd__caret {
		transform: rotate(-8deg);
		opacity: .9;
	}
}

/* The panel's own easing, slightly longer on the way in than on the way out. */
.sud-hd__item.is-open .sud-mega {
	transition:
		opacity .34s var(--sud-ease),
		transform .42s var(--sud-ease),
		visibility .42s;
}

@media (prefers-reduced-motion: reduce) {
	.sud-hd__link,
	.sud-hd__caret,
	.sud-hd--over,
	.sud-hd--over::before {
		transition: none;
	}

	.sud-hd__item > .sud-hd__link:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   6. THE HERO ON A PHONE — LEAVE IT TO THE PHONE'S OWN SECTION

   The home page carries TWO hero sections, and the editor decides which one a
   visitor sees:

     ccf0431  .sud-banner.sud-vbanner   hide_mobile                -> desktop + tablet
     2adc7de  (holds video widget f2c86b9)  hide_desktop + hide_tablet -> phones

   Section 4 above gives the desktop banner the whole window. That rule carried
   no media query, so it reached the phone too, and the block that used to sit
   here then re-laid the desktop banner out for a phone: 62svh tall, with the
   film absolute across it and `cover`.

   It also said `display: flex`, and that is the part that did the damage.
   Elementor hides a container on phones with `.elementor-hidden-mobile {
   display: none }` — a single class — so any `display` on a heavier selector
   overrides it, and that one was (0,4,1). The desktop banner came back from
   the dead on phones, on top of the phone's own section, so a phone showed
   BOTH heroes stacked:

     y   0-523   ccf0431, forced to 62svh, film cropped to 42% of the frame
     y 523-764   2adc7de, the phone's real hero, 16:9 and whole

   Measured at 390x844. The first is the "broken mobile" in the brief; the
   second is what was there before it and is correct.

   So the phone is handed back to its own section. Section 4 is now behind
   min-width 768 and everything else that used to be here is gone, which leaves
   the editor's own visibility setting to decide — as it already does on
   desktop and tablet, where 2adc7de is display:none and nothing has to force
   it.

   The one rule kept is a guard. home-video-banner.css also sets a `display` on
   this banner inside its own phone block (`display: block`, (0,4,0)), written
   when the banner was still the phone's hero, and it would override the hidden
   class in exactly the same way. Rather than reach into that file and change a
   rule that is correct on its own terms, the hidden class is restored here,
   above both.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	/*
	 * Whatever else is declared, a banner the editor hid on phones stays
	 * hidden. (0,5,1) and (0,5,0), so it outranks every `display` written for
	 * this container in this file and in home-video-banner.css.
	 */
	body.home .elementor .e-con.sud-banner.sud-vbanner.elementor-hidden-mobile,
	.elementor .e-con.sud-banner.sud-vbanner.elementor-hidden-mobile {
		display: none;
	}
}
/* --------------------------------------------------------------------------
   7. THE MEGA MENU, AS A FLOATING PANEL — HOME, DESKTOP

   Against a white header a full-bleed sheet reads as part of the bar. Over a
   film it reads as a white slab dropped across the picture: 1425px wide and
   230px tall, with ~49px of padding top and bottom, for five links.

   So on this page it becomes what it should be — a panel belonging to the
   item that opened it. It is anchored to that item rather than to the header,
   centred beneath it, sized to its own content, and given the corner, border
   and shadow of something floating above the page. The film stays visible
   around it.

   The content is untouched: same eyebrow, same blurb, same links, same order,
   same hrefs. Only the frame around them changes, and the link list goes to a
   single column because the panel is no longer wide enough for two.

   min-width 1151px is where header.css puts the desktop navigation; below it
   the drawer takes over and none of this applies, so the phone and tablet
   menus behave exactly as they did.
   -------------------------------------------------------------------------- */

@media (min-width: 1151px) {

	/* The panel measures from its own item, not from the header. */
	.sud-hd--over .sud-hd__item { position: relative; }

	.sud-hd--over .sud-mega {
		inset-inline: auto;
		inset-inline-start: 50%;
		inset-block-start: calc(100% - 4px);

		inline-size: max-content;
		min-inline-size: 19rem;
		max-inline-size: min(25rem, calc(100vw - 3rem));

		background: rgba(255, 255, 255, .94);
		-webkit-backdrop-filter: saturate(1.6) blur(18px);
		backdrop-filter: saturate(1.6) blur(18px);

		border: 1px solid rgba(11, 31, 23, .08);
		border-radius: 18px;
		box-shadow:
			0 1px 2px rgba(11, 31, 23, .04),
			0 18px 48px -12px rgba(11, 31, 23, .22);
		overflow: hidden;

		/* Composed with the centring, so the slide does not undo it. */
		transform: translateX(-50%) translateY(-8px);
	}

	.sud-hd--over .sud-hd__item.is-open .sud-mega {
		transform: translateX(-50%) translateY(0);
	}

	/* One column, and the padding of a panel rather than of a section. */
	.sud-hd--over .sud-mega__inner {
		display: block;
		inline-size: auto;
		max-inline-size: none;
		margin-inline: 0;
		padding: 1rem 1.15rem 1.15rem;
	}

	/* The blurb keeps its words and gives up its column. */
	.sud-hd--over .sud-mega__lead {
		padding: 0 0 .75rem;
		margin-block-end: .65rem;
		border-block-end: 1px solid rgba(11, 31, 23, .09);
	}

	.sud-hd--over .sud-mega__blurb {
		margin-block-end: 0;
		font-size: .8125rem;
		line-height: 1.5;
	}

	.sud-hd--over .sud-mega__links {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1px;
		inline-size: auto;
	}

	.sud-hd--over .sud-mega__links a {
		border-radius: 10px;
		padding-block: .5rem;
		white-space: nowrap;
	}

	/* The "all of it" link sits on the panel's own edge. */
	.sud-hd--over .sud-mega__all {
		margin-block-start: .6rem;
		padding-block-start: .6rem;
		border-block-start: 1px solid rgba(11, 31, 23, .09);
	}

	/*
	 * A FULLER PANEL GOES TO TWO COLUMNS.
	 *
	 * One column suits three to five links. Therapeutic Areas has eight, and in
	 * a single column the panel ran 490px — 61% of an 900px window, which is
	 * the "covers too much of the hero" the brief warns against. Two columns
	 * halve the rows and cost only width, which there is room for.
	 *
	 * Keyed on the sixth link existing, so a menu that grows or shrinks picks
	 * the right shape on its own. Where :has() is unsupported the panel simply
	 * stays one column — longer, but correct.
	 */
	.sud-hd--over .sud-mega:has(.sud-mega__links li:nth-child(6)) {
		max-inline-size: min(36rem, calc(100vw - 3rem));
	}

	.sud-hd--over .sud-mega:has(.sud-mega__links li:nth-child(6)) .sud-mega__links {
		grid-template-columns: 1fr 1fr;
		column-gap: .5rem;
	}

	/* With two narrower columns a long name may need a second line. */
	.sud-hd--over .sud-mega:has(.sud-mega__links li:nth-child(6)) .sud-mega__links a {
		white-space: normal;
	}
}