/* HeaderV2 - bar radius is a corner SUBSET: bottom two rounded, top two square by design.
   Expressed through the framework's per-corner multipliers on bdr-rds - never a length. */

.hdr.v2 {

	--andersen-lg-mx-wd: 245; /* { min: 50, max: 500, step: 10, friendly: 'Logo Max Width Desktop', group: 'Calculations' } */
	--andersen-lg-mx-wd-mbl: 10; /* { min: 10, max: 300, step: 1, friendly: 'Logo Max Width Mobile', group: 'Calculations' } */
	--andersen-lg-mx-wd-clc: calc((var(--andersen-lg-mx-wd-mbl) * 1px) + (var(--andersen-lg-mx-wd) - var(--andersen-lg-mx-wd-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */
	
	--hdr-lg-pd-s: 64; /* { min: 50, max: 500, step: 10, friendly: 'Logo Max Width Desktop', group: 'Calculations' } */
	--hdr-lg-pd-s-mbl: 1; /* { min: 10, max: 300, step: 1, friendly: 'Logo Max Width Mobile', group: 'Calculations' } */
	--hdr-lg-pd-s-clc: calc((var(--hdr-lg-pd-s-mbl) * 1px) + (var(--hdr-lg-pd-s) - var(--hdr-lg-pd-s-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */


	--bdr-tl-rds: 0; /* { min: 0, max: 1, step: 0.25, friendly: 'Header V2 Bar Radius - Top Left Corner', group: 'Calculations' } */
	--bdr-tr-rds: 0; /* { min: 0, max: 1, step: 0.25, friendly: 'Header V2 Bar Radius - Top Right Corner', group: 'Calculations' } */

}

/* In-flow bar is fully square: the rounded corners only make sense when .overlap
   (on html or body) floats the header over the mainstage. Zeroing the base radius
   tokens kills every bdr-rds/bdr-rds-crd computation inside the bar. */
html:not(.overlap) body:not(.overlap) .hdr.v2 {
	--bdr-rds: 0;
	--bdr-rds-crd: 0;
}

/* ESCAPE HATCH: secondary-link underline only (comp: textDecoration UNDERLINE on link text) — do not remove. */

.hdr.v2 .sec-nv-lnk span {
	text-decoration-line: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
}

/* Castle Windows navigator (Figma 17413:16752): the logo sits in a full-height
   accent block flush with the bar's edges, always showing the DARK logo variant
   (out-specifying the palette-scoped variant rules); the Andersen lockup rides
   beside it and the nav column keeps its own vertical breathing room. */

.hdr.v2 {

	> .flx-at-1280 {
		padding-block: 0;
		padding-inline-start: 0;
		padding-inline-end: var(--grd-sp-dyn);

		/* mobile: the bar is just the logo block — let it run edge to edge */
		@media screen and (width < 1280px) {
			padding-inline-end: 0;
		}
	}

	/* Figma Logo frame 17413:16753: 378×124 holding the 250×109 logo — 64px
	   inline / 8px block padding. The 64px is the desktop comp's value; mobile
	   keeps the accent block but with tight padding so the bar's menu / logo /
	   phone row has room. */
	.lg-bx {
		align-self: stretch;
		background-color: var(--accent);
		padding: 0.5rem 1rem;

		/* the block is the accent surface, but the palette context is the dark
		   header — its yellow link color vanishes here, so controls inside take
		   the on-accent text token instead (dark, like the logo) */
		--link-color: var(--btn-pry-txt);
		--link-hover: var(--btn-pry-txt);
	}

	.ann-bnr:not(:has(.five-8ths > :first-child)) {
		display: none;
	}

	@media screen and (width >= 1280px) {
		.lg-bx {
			padding-block: 0.5rem;
			padding-inline: var(--hdr-lg-pd-s-clc);
		}
	}

	.tp-lg .dk-lg {
		display: block;
	}

	.tp-lg .lt-lg {
		display: none;
	}

	/* The lockup links to the Andersen certification page, so .hdr-cert sits on the
	   anchor (the flex item) and the image just fills it. */
	.hdr-cert {
		align-self: center;
		max-width: var(--andersen-lg-mx-wd-clc);
		margin-inline: 2rem auto;
		flex: none;

		img {
			display: block;
			width: 100%;
			height: auto;
		}
	}

	> .flx-at-1280 > .f_clm {
		padding-block: 1.25rem;

		/* mobile: every row inside the nav column is sw-1280, so the column is
		   an empty black band — hide it until the nav actually renders */
		@media screen and (width < 1280px) {
			display: none;
		}
	}
	
	@media screen and (min-width: 1280px) {
		
		.tp-lg {
			margin-right: 0;
		}
	}
	
	/* LocationChip takes most of its row here, leaving PhoneSecondaryNav the remainder.
	The chip has no corporate (when={false}) face, so it renders truly empty outside
	a branch — :has() keeps the 76% basis from reserving that space when there's
	nothing in it to lay out. */
	.loc-chp {
		--loc-chp-icn-s: 1.1rem;
		--loc-chp-pd-v: 0.4;
		--loc-chp-pd-h: 0.9;
		
		padding: calc(var(--loc-chp-pd-v) * 1em) 0;
		@media screen and (width < 1500px) {
			display: none;
		}

	}

}