/**
 * Partnership lockup — LycaHealth Orpington beside the Hearology logo.
 *
 * Rendered by template-parts/components/partnership-lockup.php on six headers:
 *   Front Page · Pediatric Audiology (Kids) · Hearology V2 (Hearing Tests)
 *   Microsuction 2026 (Ear Wax Removal) · Promotional Landing Page (offers)
 *   Hearing Aid Promotion Disclaimer
 *
 * Enqueued GLOBALLY at priority 130 (functions.php) so it always prints after
 * the template stylesheets — several overrides below tie on specificity with
 * css/page-template-ear-wax-removal-2.css and are broken by document order.
 *
 * No new breakpoints are introduced. Every media query below reuses one that
 * already exists in the theme: 1180 / 1120 / 1024 / 768 / 640 / 575 / 420.
 *
 * @package Hearology_Microsite
 */

/* =====================================================================
   1. Shared base
   ===================================================================== */

.partnership-lockup {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	flex: 0 0 auto;
	gap: 4px;
	padding-left: 14px;
	border-left: 1px solid currentColor; /* the divider — an element would need aria-hiding */
	line-height: 1;
}

.partnership-lockup--dark  { color: rgba( 255, 255, 255, 0.6 ); }
.partnership-lockup--light { color: rgba( 0, 7, 31, 0.28 ); }

.partnership-lockup__label {
	font-family: 'Ubuntu', sans-serif;
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 0.09em;
	text-transform: uppercase; /* source text is sentence case so AT reads words, not letters */
	white-space: nowrap;
	color: rgba( 255, 255, 255, 0.78 );
}

.partnership-lockup--light .partnership-lockup__label { color: #5d6271; }

.partnership-lockup__logo {
	display: block;
	width: 140px;
	height: auto;
	max-width: 100%;
}

/* =====================================================================
   2. Backing plate
   The artwork has no light pixels (luminance 65-134 of 255), so it needs
   a white plate on dark surfaces. Painted here rather than in PHP because
   these headers change surface colour on scroll and at breakpoints.
   ===================================================================== */

/* Auto: plate dark-toned lockups. Forced (theme option): plate everything. */
.partnership-lockup--dark .partnership-lockup__logo,
.partnership-lockup.is-plated .partnership-lockup__logo {
	box-sizing: content-box;
	padding: 6px 10px;
	background: #fff;
	border-radius: 8px;
}

/* Un-plate wherever the surface has turned light, unless forced on. */
.navbar.sticky .partnership-lockup--dark:not(.is-plated) .partnership-lockup__logo,
.header-menu-block.sticky .partnership-lockup--dark:not(.is-plated) .partnership-lockup__logo {
	padding: 0;
	background: none;
	border-radius: 0;
}

/* =====================================================================
   3. Below 576px — divider and label off, shrunken logo only
   575 not 576, to match css/v2/style.css:1930 and avoid the 575.5px gap.
   ===================================================================== */

@media all and ( max-width: 575px ) {

	.partnership-lockup {
		border-left: 0;
		padding-left: 0;
		gap: 0;
		}
		.partnership-lockup__label {
			display: none;
			}
		.partnership-lockup__logo {
			width: 90px;
			}
		.partnership-lockup--dark .partnership-lockup__logo,
		.partnership-lockup.is-plated .partnership-lockup__logo {
			padding: 4px 6px;
			border-radius: 6px;
			}

}

/* =====================================================================
   4. Front Page
   .site-branding becomes a flex row. .site-title keeps its declared
   350x118 as a flex:0 0 auto item, so the text-indent:200% /
   overflow:hidden background-image logo is untouched.
   ===================================================================== */

.front-page-template .site-branding {
	display: flex;
	align-items: center; /* artwork is 350x90.7 inside a 118px box — centre on the artwork */
	gap: 24px;
}

.front-page-template .site-branding .site-title {
	flex: 0 0 auto;
	min-width: 0; /* neutralise flex min-width:auto vs the nowrap site-name run */
	margin: 0;    /* pre-empts style.css:1024 `margin: 0 auto` */
}

@media screen and ( max-width: 1024px ) {

	/* style.css:1024 centres .site-title with `margin: 0 auto`. On a flex item
	   auto margins eat free space and would shove the lockup hard right, so
	   centre the group on the container instead. (0,3,0) beats (0,1,0). */
	.front-page-template .site-branding {
		justify-content: center;
		}
		.front-page-template .site-branding .site-title {
			margin: 0;
			}

}

@media all and ( max-width: 575px ) {

	.front-page-template .site-branding {
		gap: 16px;
		}

}

@media all and ( max-width: 420px ) {

	/* 350 + 106 overflows the 380px usable width, so shrink the Hearology
	   logo too, preserving its 2.966 box ratio. 220 + 16 + 84 = 320. */
	.front-page-template .site-branding .site-title,
	.front-page-template .site-branding .site-title a {
		width: 220px;
		height: 74px;
		}
		.front-page-template .partnership-lockup__logo {
			width: 84px;
			}

}

/* =====================================================================
   5. Pediatric Audiology (Kids)
   The legacy Ear Wax Removal 2 and Pricing pages share this markup and the
   .ear-wax-removal-2-template body class, and Hearing Test New shares the
   stylesheet — none of them may be touched. So every rule here hangs off one
   of two hooks that only the Kids page has: the .site-branding--has-lockup
   marker class, or WP core's own .page-template-pediatric-audiology body
   class where the target sits outside .site-branding.
   ===================================================================== */

/* inline-flex, NOT flex: .site-branding shares an inline line with
   .main-navigation (inline-block) and a floated .header-call-us. */
.ear-wax-removal-2-template header .site-branding--has-lockup {
	display: inline-flex;
	align-items: center;
	vertical-align: top;
	gap: 16px;
	padding-right: 0; /* reclaims 45px; the logo already renders 229px inside its 250px box */
}

.ear-wax-removal-2-template header .site-branding--has-lockup .site-title {
	flex: 0 0 auto;
}

.ear-wax-removal-2-template .partnership-lockup--ewr2 .partnership-lockup__logo {
	width: 140px;
}

/* Reclaim nav width for the lockup. ~40px across 5 items, barely perceptible. */
.page-template-pediatric-audiology header .main-navigation li {
	padding: 10px 11px;
}

/* Degrade visibly rather than silently rewrapping if the real menu strings
   are wider than estimated. */
@media screen and ( min-width: 1121px ) {

	.page-template-pediatric-audiology header .header-call-us p {
		white-space: nowrap;
		}

}

/* The only variable width band: .max-width caps content at 1140px, so 1440
   and 1180 are identical. Slack here is ~70px before the lockup. */
@media screen and ( max-width: 1180px ) and ( min-width: 1121px ) {

	.ear-wax-removal-2-template .partnership-lockup--ewr2 .partnership-lockup__logo {
		width: 110px;
		}
		.ear-wax-removal-2-template .partnership-lockup--ewr2 .partnership-lockup__label {
			font-size: 8px;
			letter-spacing: 0.07em;
			}

}

/* Bar is white when sticky and at <=1120, so the lockup must invert. */
.ear-wax-removal-2-template header .header-menu-block.sticky .partnership-lockup {
	color: rgba( 0, 7, 31, 0.28 );
}

.ear-wax-removal-2-template header .header-menu-block.sticky .partnership-lockup__label {
	color: #5d6271;
}

@media screen and ( max-width: 1120px ) {

	.ear-wax-removal-2-template header .partnership-lockup {
		color: rgba( 0, 7, 31, 0.28 );
		}
		.ear-wax-removal-2-template header .partnership-lockup__label {
			color: #5d6271;
			}
		.ear-wax-removal-2-template .partnership-lockup--dark:not(.is-plated) .partnership-lockup__logo {
			padding: 0;
			background: none;
			border-radius: 0;
			}
		/* replaces `padding: 10px 20px 10px 0` from the ewr2 stylesheet */
		.ear-wax-removal-2-template header .site-branding--has-lockup {
			padding: 10px 0;
			}

}

/* =====================================================================
   6. Bootstrap navbars — shared group wrapper
   Used by V2, Microsuction 2026, PLP and HAPD. A wrapper rather than
   margin-right:auto, because .navbar > .container is space-between and
   .navbar-collapse is display:none below lg — the lockup would otherwise
   fly to the far right on tablets.
   ===================================================================== */

.navbar-lockup-group {
	display: flex;
	align-items: center;
	gap: 20px;
}

.navbar-lockup-group .navbar-brand {
	margin-right: 0;
}

/* All four navbars go white on .sticky, so the lockup inverts.
   Microsuction 2026 is light in both states and opts out below. */
.navbar.sticky .partnership-lockup       { color: rgba( 0, 7, 31, 0.28 ); }
.navbar.sticky .partnership-lockup__label { color: #5d6271; }

/* =====================================================================
   7. Hearology V2 (Hearing Tests)
   ===================================================================== */

@media all and ( max-width: 768px ) {

	/* Brand box is 150x100 with object-fit:contain, so the real logo is
	   150x38.9 floating in the box. align-items:center puts the lockup on
	   that visual centre line; max-height stops it growing the navbar. */
	.navbar-lockup-group {
		gap: 14px;
		}
		.partnership-lockup--v2 {
			max-height: 100px;
			}
		.partnership-lockup--v2 .partnership-lockup__logo {
			width: 120px;
			}

}

@media all and ( max-width: 575px ) {

	/* Brand box drops to 80x40 here. */
	.navbar-lockup-group {
		gap: 10px;
		}
		.partnership-lockup--v2 .partnership-lockup__logo {
			width: 72px;
			}

}

/* =====================================================================
   8. Microsuction 2026 (Ear Wax Removal)
   Light hero in BOTH states — both <img> tags use the black logo — so the
   generic .navbar.sticky inversion must be neutralised.
   ===================================================================== */

.microsuction-landing-page-2026-template .navbar.sticky .partnership-lockup {
	color: rgba( 0, 7, 31, 0.28 );
}

.microsuction-landing-page-2026-template .navbar.sticky .partnership-lockup__label {
	color: #5d6271;
}

/* HARD CONSTRAINT: --nav-offset (56/64/80/100px) is a hand-maintained
   constant, not derived from the navbar. If the lockup makes this navbar
   taller than the brand's own 60px max-height, hero text slides under it.
   Unplated: 9 label + 4 gap + 41.1 logo = 54.1px. */
.microsuction-landing-page-2026-template .partnership-lockup {
	max-height: 60px;
}

.microsuction-landing-page-2026-template .partnership-lockup__logo {
	width: clamp( 100px, 20vw, 140px ); /* mirrors the brand's own clamp idiom at ~0.7x */
	max-height: 44px;
}

/* If the theme option forces the plate on, the plate's own padding would push
   the lockup past the ceiling. Tightest case is 576-768px, where --nav-offset
   is only 64px and the navbar keeps Bootstrap's 8px padding-top:
     unplated  9 + 4 + 41.1        = 54.1 + 8 = 62.1  (fits 64)
     plated    9 + 4 + 41.1 + 6    = 60.1 + 8 = 68.1  (OVERFLOWS)
     capped    9 + 4 + 36   + 6    = 55.0 + 8 = 63.0  (fits 64)
   So trim the padding AND cap the logo height when plated. */
.microsuction-landing-page-2026-template .partnership-lockup.is-plated .partnership-lockup__logo {
	padding: 3px 6px;
	border-radius: 6px;
	max-height: 36px;
}

/* =====================================================================
   9. Promotional Landing Page (offers) + Hearing Aid Promotion Disclaimer
   Dark hero at rest, white on sticky — the generic inversion in §6 is
   correct for both, so only sizing is needed here.
   ===================================================================== */

.plp-template .partnership-lockup__logo,
.hapd-template .partnership-lockup__logo {
	width: clamp( 100px, 20vw, 140px );
	max-height: 44px;
}

@media all and ( max-width: 575px ) {

	.plp-template .partnership-lockup__logo,
	.hapd-template .partnership-lockup__logo {
		width: 100px;
		}

}