/*
 * KHC Clear: sitewide components. Header and Services dropdown, buttons,
 * eyebrows, the tile marker, stub numerals, the closing block and the footer.
 * Desktop values are the 1440px boards; below that they scale (no mobile mocks
 * exist, so mobile is proposed here for Kate to react to on staging).
 */

/* ---------- Layout ---------- */
.khc-wrap {
	width: 100%;
	max-width: calc(var(--khc-content) + 2 * var(--khc-pad));
	margin-inline: auto;
	padding-inline: var(--khc-pad);
}

/* ---------- Buttons and text links ---------- */
.khc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	padding: 14px 24px;
	border: 0;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

.khc-btn--lg {
	padding: 20px 32px;
}

.khc .khc-btn--black,
.khc .khc-btn--black:hover {
	background: var(--khc-black);
	color: var(--khc-white);
}

.khc .khc-btn--black:hover {
	background: var(--khc-charcoal);
}

.khc .khc-btn--turquoise {
	background: var(--khc-turquoise);
	color: var(--khc-black);
}

.khc .khc-btn--white {
	background: var(--khc-white);
	color: var(--khc-black);
}

.khc-tlink {
	font-size: var(--khc-fs-small);
	font-weight: 700;
	border-bottom: 2px solid currentColor;
	padding-bottom: 3px;
}

/* An empty Insights category (inc/insights.php). */
.khc-insights__empty {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--khc-charcoal);
}

/* ---------- Eyebrows and the tile marker ---------- */
.khc-eyebrow {
	margin: 0;
	font-size: var(--khc-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--khc-track-eyebrow);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--khc-charcoal);
}

/* The hero eyebrow with the tile marker: 600 weight, +0.16em (board 10). */
.khc-eyebrow--tiles {
	display: flex;
	align-items: center;
	gap: 16px;
	font-weight: 600;
	letter-spacing: 0.16em;
}

.khc-tiles {
	display: inline-flex;
	gap: 10px;
	flex-shrink: 0;
}

.khc-tiles > span {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: var(--khc-turquoise);
}

.khc-tiles > span:nth-child(2) {
	background: var(--khc-orange);
}

.khc-tiles > span:nth-child(3) {
	background: var(--khc-yellow);
}

/* ---------- Stub numeral (SPEC 00000): two digits, 800, a 4px stub the width of the first digit ---------- */
.khc-num {
	--num-size: 44px;
	display: inline-flex;
	flex-direction: column;
	gap: calc(var(--num-size) * 0.15);
	flex-shrink: 0;
}

.khc-num__stub {
	display: block;
	width: calc(var(--num-size) * 0.62);
	height: var(--khc-line);
}

.khc-num__digits {
	font-size: var(--num-size);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--khc-black);
}

/* ======================================================================
   Header: turquoise bar, logo, nav, Services dropdown, Book pill
   ====================================================================== */
.khc-header {
	position: relative;
	z-index: 50;
	background: var(--khc-turquoise);
}

.khc-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	height: var(--khc-nav-h);
	max-width: calc(var(--khc-content) + 2 * var(--khc-pad));
	margin-inline: auto;
	padding-inline: var(--khc-pad);
}

.khc-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.khc-header__logo img {
	display: block;
	width: auto;
	height: 60px;
}

.khc-header__toggle {
	display: none;
}

.khc-menu {
	display: flex;
	align-items: center;
	align-self: stretch;
	gap: 32px;
}

.khc-menu__list {
	display: flex;
	align-items: stretch;
	align-self: stretch;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	/* All caps (Kate, Oct. 1): a deviation from the boards' 18px sentence case, echoing
	   today's site and the eyebrow labels. */
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Items fill the bar's height so the pointer can travel from a link into its dropdown. */
.khc-menu__item {
	display: flex;
	align-items: center;
	gap: 2px;
}

.khc .khc-menu__link {
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	color: var(--khc-black);
	white-space: nowrap;
}

.khc .is-current > .khc-menu__link {
	border-bottom-color: var(--khc-black);
}

.khc-menu__expand {
	display: flex;
	align-items: center;
	padding: 6px 2px;
	border: 0;
	background: none;
	color: var(--khc-black);
	cursor: pointer;
}

.khc-menu__expand .khc-icon {
	width: 14px;
	height: 14px;
	stroke-width: 2;
}

.has-panel.is-open .khc-menu__expand .khc-icon {
	transform: rotate(180deg);
}

.khc .khc-header__cta {
	flex-shrink: 0;
	white-space: nowrap;
}

/* The dropdown hangs from the bottom of the bar, inside the content width. */
.khc-panel {
	display: none;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding-inline: var(--khc-pad);
}

.has-panel.is-open > .khc-panel {
	display: block;
}

@media (hover: hover) and (min-width: 1181px) {
	.has-panel:hover > .khc-panel {
		display: block;
	}
}

.khc-panel__inner {
	display: grid;
	grid-template-columns: 300px repeat(3, minmax(0, 1fr));
	gap: 32px;
	max-width: var(--khc-content);
	margin-inline: auto;
	padding: 40px;
	background: var(--khc-white);
	border-radius: 0 0 24px 24px;
	box-shadow: 0 18px 40px rgba(17, 17, 17, 0.1);
}

.khc .khc-panel__feature {
	grid-row: span 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	padding: 28px;
	border-radius: 18px;
	background: var(--khc-black);
	color: var(--khc-white);
}

.khc-panel__feature-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--khc-track-eyebrow);
	text-transform: uppercase;
	color: var(--khc-gray);
}

.khc-panel__feature-title {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.khc-panel__feature-link {
	font-size: 14px;
	font-weight: 700;
	color: var(--khc-turquoise);
}

.khc .khc-panel__offer {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 8px;
	color: var(--khc-black);
}

.khc-panel__offer .khc-num {
	gap: 4px;
}

.khc-panel__phase {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--khc-charcoal);
}

.khc-panel__name {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.khc-panel__blurb {
	font-size: 15px;
	line-height: 1.55;
	color: var(--khc-charcoal);
}

.khc-panel__links {
	grid-column: 2 / span 3;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	padding-top: 20px;
	border-top: 1px solid var(--khc-hairline);
	font-size: 14px;
	font-weight: 700;
}

.khc .khc-panel__links a {
	padding-bottom: 2px;
	border-bottom: 2px solid var(--khc-black);
}

/* ---------- Header below 1180px: logo, a Menu button, and the nav as a sheet under the bar ---------- */
@media (max-width: 1180px) {
	.khc-header__logo img {
		height: 46px;
	}

	.khc-header__toggle {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 10px 0 10px 12px;
		border: 0;
		background: none;
		font-size: 16px;
		font-weight: 700;
		cursor: pointer;
	}

	/* Three 2px bars. */
	.khc-header__toggle-bars,
	.khc-header__toggle-bars::before,
	.khc-header__toggle-bars::after {
		display: block;
		width: 22px;
		height: 2px;
		background: var(--khc-black);
	}

	.khc-header__toggle-bars {
		position: relative;
	}

	.khc-header__toggle-bars::before,
	.khc-header__toggle-bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.khc-header__toggle-bars::before {
		top: -7px;
	}

	.khc-header__toggle-bars::after {
		top: 7px;
	}

	.khc-header.is-open .khc-header__toggle-bars {
		background: transparent;
	}

	.khc-header.is-open .khc-header__toggle-bars::before {
		top: 0;
		transform: rotate(45deg);
	}

	.khc-header.is-open .khc-header__toggle-bars::after {
		top: 0;
		transform: rotate(-45deg);
	}

	.khc-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		max-height: calc(100dvh - var(--khc-nav-h));
		overflow-y: auto;
		padding: 8px var(--khc-pad) 32px;
		background: var(--khc-turquoise);
		border-top: 1px solid rgba(17, 17, 17, 0.12);
	}

	.khc-header.is-open .khc-menu {
		display: flex;
	}

	.khc-menu__list {
		flex-direction: column;
		gap: 0;
		font-size: 15px;
	}

	.khc-menu__item {
		flex-wrap: wrap;
		justify-content: space-between;
		border-bottom: 1px solid rgba(17, 17, 17, 0.12);
	}

	.khc .khc-menu__link {
		padding: 16px 0;
		border-bottom: 0;
	}

	.khc .is-current > .khc-menu__link {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 6px;
	}

	.khc-menu__expand {
		padding: 16px 0 16px 16px;
	}

	.khc-menu__expand .khc-icon {
		width: 20px;
		height: 20px;
	}

	.khc-panel {
		position: static;
		flex-basis: 100%;
		padding: 0 0 16px;
	}

	.khc-panel__inner {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 20px;
		border-radius: 16px;
		box-shadow: none;
	}

	.khc .khc-panel__feature {
		grid-row: auto;
		padding: 22px;
	}

	.khc-panel__links {
		grid-column: auto;
		flex-direction: column;
		align-items: flex-start;
	}

	.khc .khc-header__cta {
		align-self: flex-start;
	}
}

/* ======================================================================
   Closing block: turquoise panel, CTA, circle portrait (kept as is, Sept. 30)
   ====================================================================== */
.khc-closing {
	padding: 72px var(--khc-pad);
}

.khc-closing__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	align-items: center;
	column-gap: 64px;
	max-width: var(--khc-content);
	margin-inline: auto;
	padding: 64px 72px;
	border-radius: var(--khc-radius-lg);
	background: var(--khc-turquoise);
	color: var(--khc-black);
}

.khc-closing__text {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.khc .khc-closing__eyebrow {
	color: var(--khc-black);
}

.khc .khc-closing__heading {
	font-size: clamp(2.5rem, 3.2vw + 1rem, 4rem);
	line-height: 1;
	letter-spacing: -0.04em;
}

.khc .khc-closing__body {
	max-width: 600px;
	margin: 0;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.55;
}

.khc-closing__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 28px;
	margin-top: 4px;
}

.khc-closing__portrait {
	width: 300px;
	height: 300px;
	padding: 8px;
	border-radius: 50%;
	background: var(--khc-white);
}

.khc-closing__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.khc-closing {
		padding-block: 48px;
	}

	.khc-closing__panel {
		grid-template-columns: 1fr;
		row-gap: 32px;
		padding: 40px 28px;
		border-radius: 24px;
	}

	.khc-closing__portrait {
		order: -1;
		width: 168px;
		height: 168px;
		padding: 6px;
	}
}

/* ======================================================================
   Footer: black ground, wordmark and brand line, four columns
   ====================================================================== */
.khc-footer {
	padding: 64px var(--khc-pad) 40px;
	background: var(--khc-black);
	color: var(--khc-gray);
	font-size: 14px;
	line-height: 1.5;
}

.khc-footer__grid,
.khc-footer__legal {
	max-width: var(--khc-content);
	margin-inline: auto;
}

.khc-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 0.8fr 0.9fr 1.1fr 1.4fr;
	gap: 36px;
}

.khc-footer__brand {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 22px;
}

.khc-footer__brand img {
	display: block;
	width: 240px;
	height: auto;
}

.khc .khc-footer__line {
	margin: 0;
	font-size: 24px;
	font-weight: 300;
	line-height: 1.3;
	color: var(--khc-white);
}

.khc-footer__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.khc .khc-footer__label {
	margin: 0 0 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--khc-white);
}

.khc-footer__links,
.khc-footer__connect {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.khc-footer__connect {
	gap: 12px;
}

.khc .khc-footer a {
	color: var(--khc-gray);
}

.khc .khc-footer a:hover {
	color: var(--khc-white);
}

.khc-footer__connect a {
	display: flex;
	align-items: center;
	gap: 12px;
}

.khc-footer__connect .khc-icon {
	flex-shrink: 0;
	color: var(--khc-yellow);
}

.khc-footer__newsletter {
	gap: 14px;
}

.khc .khc-footer__blurb,
.khc .khc-footer__fine {
	margin: 0;
}

.khc .khc-footer__fine {
	font-size: 12px;
	color: var(--khc-muted);
}

.khc-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	margin-top: 48px;
	padding-top: 20px;
	border-top: 1px solid var(--khc-charcoal);
	font-size: 12px;
	color: var(--khc-muted);
}

.khc .khc-footer__legal a {
	color: var(--khc-muted);
}

@media (max-width: 1100px) {
	.khc-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.khc-footer__brand,
	.khc-footer__newsletter {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.khc-footer {
		padding-top: 48px;
	}

	.khc-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 24px;
	}

	.khc-footer__connect-col {
		grid-column: 1 / -1;
	}
}

/* ---------- Inline email field: the footer's underline-and-Subscribe design ---------- */
.khc-field--inline {
	display: flex;
	border-bottom: 1px solid var(--khc-white);
}

.khc-field--inline input {
	flex-grow: 1;
	min-width: 0;
	padding: 12px 0;
	border: 0;
	background: transparent;
	color: var(--khc-white);
	font: inherit;
	font-size: 15px;
}

.khc-field--inline input::placeholder {
	color: var(--khc-muted);
}

.khc-field--inline button {
	padding: 12px 0 12px 16px;
	border: 0;
	background: transparent;
	color: var(--khc-yellow);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
}

.khc-field--placeholder button[disabled],
.khc-field--placeholder input[disabled] {
	cursor: not-allowed;
}

/* HubSpot's form, with its own CSS off (css: ''), drawn as the same inline field. */
:is(.khc-hsform--footer, .khc-hsform--assessment) form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	border-bottom: 1px solid var(--khc-white);
}

:is(.khc-hsform--footer, .khc-hsform--assessment) .hs_email {
	flex: 1 1 0;
	min-width: 0;
}

:is(.khc-hsform--footer, .khc-hsform--assessment) label:not(.hs-error-msg) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

:is(.khc-hsform--footer, .khc-hsform--assessment) .hs-input {
	width: 100%;
	padding: 12px 0;
	border: 0;
	background: transparent;
	color: var(--khc-white);
	font: inherit;
	font-size: 15px;
}

:is(.khc-hsform--footer, .khc-hsform--assessment) .hs-button {
	padding: 12px 0 12px 16px;
	border: 0;
	background: transparent;
	color: var(--khc-yellow);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
}

.khc-hsform .hs-error-msgs {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: var(--khc-coral);
}

.khc-hsform fieldset {
	max-width: none !important;
	margin: 0;
	padding: 0;
	border: 0;
}