/*
 * The classic layout: header-classic, footer-classic and page-classic (VT-02 ticket 01, shared-code-needs.md N1 to N5).
 *
 * Loaded only on a page that uses the classic template (functions.php), so no other page carries a byte of it, unless
 * the install turns on bdental-core's `classic_parts_everywhere`, which puts these parts on every template (N9).
 * The layout of a site moved as it is: a fixed 980px grid on wide screens, centred, with the logo pinned at the
 * window's left; below 1240px, where that header no longer fits, the site's own phone layout, whose sizes are its
 * 320px layout scaled to the screen: --u is 390 / 320 of a pixel per unit from 390px up, so a 390px screen matches
 * it exactly, and 1 / 320 of the screen below 390px, so a 320px or 360px phone shows the same layout smaller, as the
 * site does, and never scrolls sideways.
 *
 * Colours are role tokens only. Type: two families the brand names on :root through its token overrides,
 * --bdental-classic-font-alt (the site's second family) and --bdental-classic-font-text (its text family), with
 * --bdental-classic-weight-text and --bdental-classic-weight-strong; each falls back to the body family.
 */

:root {
	--bdental-classic-u: min(1.21875px, calc(100vw / 320));
	--bdental-classic-alt: var(--bdental-classic-font-alt, var(--wp--preset--font-family--body));
	--bdental-classic-text: var(--bdental-classic-font-text, var(--wp--preset--font-family--body));
	--bdental-classic-text-weight: var(--bdental-classic-weight-text, 400);
	--bdental-classic-strong-weight: var(--bdental-classic-weight-strong, 700);
	--bdental-classic-overlay: color-mix(in srgb, var(--wp--preset--color--page-background) 90%, transparent);
}

/* Anchors and the skip link land clear of the sticky classic header, not the platform header's 96px (structure.css). */
html {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 83 * var(--bdental-classic-u) + 12px);
}

/* The three template parts sit flush: no block gap between header, main and footer. */
.wp-site-blocks > .bdental-classic-header-part,
.wp-site-blocks > .bdental-classic-main,
.wp-site-blocks > .bdental-classic-footer-part {
	margin-block-start: 0;
}

.bdental-classic-main {
	padding: 0;
}

/* Zero the element margins at one class of weight, so every single-class rule below sets its own. */
.bdental-classic-header :where(p),
.bdental-classic-footer :where(p, h2, ul) {
	margin: 0;
}

.bdental-classic-footer :where(ul) {
	padding: 0;
	list-style: none;
}

/* ---------------------------------------------------------------- Header */

.bdental-classic-header-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

.bdental-classic-header {
	position: relative;
	height: calc(83 * var(--bdental-classic-u));
	background-color: var(--wp--preset--color--page-background);
}

.bdental-classic-header > * {
	margin-block: 0;
}

.bdental-classic-header__strip {
	display: none;
}

.bdental-classic-header__bar {
	position: static;
}

.bdental-classic-header__logo {
	position: absolute;
	top: calc(28 * var(--bdental-classic-u));
	left: calc(28 * var(--bdental-classic-u));
	margin: 0;
	line-height: 0;
}

.wp-block-site-logo.bdental-classic-header__logo img {
	width: calc(138 * var(--bdental-classic-u));
	height: calc(34 * var(--bdental-classic-u));
	object-fit: contain;
}

/* The menu button, top right, as the site's phone layout places it. */
nav.bdental-classic-header__nav {
	position: absolute;
	top: calc(20 * var(--bdental-classic-u));
	right: calc(20 * var(--bdental-classic-u));
	margin: 0;
}

.bdental-classic-header__nav .wp-block-navigation__responsive-container-open,
.bdental-classic-header__nav .wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(50 * var(--bdental-classic-u));
	height: calc(50 * var(--bdental-classic-u));
	color: var(--wp--preset--color--body);
}

.bdental-classic-header__nav .wp-block-navigation__responsive-container-open svg,
.bdental-classic-header__nav .wp-block-navigation__responsive-container-close svg {
	width: calc(36.6 * var(--bdental-classic-u));
	height: calc(36.6 * var(--bdental-classic-u));
}

/* While the menu is open the close button takes the menu button's place; the menu button must not show through. */
.has-modal-open .bdental-classic-header__nav .wp-block-navigation__responsive-container-open {
	visibility: hidden;
}

/* The open menu: the page shows faintly through it, the items down the left, the close button where the menu button was. */
nav.bdental-classic-header__nav .wp-block-navigation__responsive-container.is-menu-open.is-menu-open.is-menu-open {
	padding: 0;
	background-color: var(--bdental-classic-overlay);
	color: var(--wp--preset--color--body);
}

.bdental-classic-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: calc(20 * var(--bdental-classic-u));
	right: calc(20 * var(--bdental-classic-u));
}

.bdental-classic-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content {
	padding: calc(88 * var(--bdental-classic-u)) 0 calc(40 * var(--bdental-classic-u)) calc(72 * var(--bdental-classic-u));
	gap: 0;
}

.bdental-classic-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
}

.bdental-classic-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
	padding: 0 calc(10 * var(--bdental-classic-u));
	font-family: var(--bdental-classic-text);
	font-size: calc(17 * var(--bdental-classic-u));
	font-weight: var(--bdental-classic-text-weight);
	line-height: calc(56 * var(--bdental-classic-u));
	color: var(--wp--preset--color--body);
	text-decoration: none;
}

/* Wix cuts a label too long for the row with an ellipsis rather than wrapping it: rows are 188 units wide. */
.bdental-classic-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: block;
	width: calc(188 * var(--bdental-classic-u));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bdental-classic-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
	width: calc(173 * var(--bdental-classic-u));
}

.bdental-classic-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--heading);
}

.bdental-classic-header__nav .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	padding: 0 0 0 calc(15 * var(--bdental-classic-u));
	gap: 0;
	background: none;
	min-width: 0;
}

/* Every width: the menu's own text, and the page the visitor is on. */
.bdental-classic-header__nav .wp-block-navigation-item__content {
	font-family: var(--bdental-classic-text);
	font-weight: var(--bdental-classic-text-weight);
	color: var(--wp--preset--color--body);
	text-decoration: none;
}

.bdental-classic-header__nav .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"],
.bdental-classic-header__nav a.wp-block-navigation-item__content.wp-block-navigation-item__content[href]:hover {
	color: var(--wp--preset--color--heading);
}

/* A parent item that is not a link opens its list from a button laid over its label: the label shows, the button takes the focus and the click. A parent that is a link keeps core's own toggle beside it. */
.bdental-classic-header__nav .wp-block-navigation-item.has-child {
	position: relative;
}

.bdental-classic-header__nav .has-child:has(> .wp-block-navigation-item__content:not([href])) > .wp-block-navigation-submenu__toggle {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.bdental-classic-header__nav .has-child:has(> .wp-block-navigation-item__content:not([href])) > .wp-block-navigation-submenu__toggle svg {
	display: none;
}

.bdental-classic-header__nav .is-menu-open .wp-block-navigation-submenu__toggle {
	display: none;
}

@media (min-width: 1240px) {
	.bdental-classic-header {
		height: 131px;
	}

	.bdental-classic-header__strip {
		display: block;
		position: absolute;
		top: 0;
		left: calc(50% - 490px);
		right: 0;
		height: 28px;
		border-bottom-left-radius: 40px;
		background-color: var(--wp--preset--color--dark-band);
	}

	.bdental-classic-header__strip-text {
		width: 980px;
		padding-top: 8px;
		font-family: var(--bdental-classic-alt);
		font-size: 12px;
		font-weight: 400;
		line-height: 16.8px;
		letter-spacing: 0.6px;
		text-align: center;
		color: var(--wp--preset--color--dark-body);
	}

	.bdental-classic-header__strip-text a {
		color: inherit;
		text-decoration: underline;
	}

	/* The focus ring on the strip is the dark-surface ring: focus-ring on dark-band is under 3:1. */
	.bdental-classic-header__strip-text a:focus-visible {
		outline-color: var(--wp--preset--color--dark-body);
	}

	.bdental-classic-header__logo {
		top: 48px;
		left: 52px;
	}

	.wp-block-site-logo.bdental-classic-header__logo img {
		width: 260px;
		height: 64px;
	}

	/* The menu starts where the site's grid puts it, and never under the logo. */
	nav.bdental-classic-header__nav {
		top: 74px;
		right: auto;
		left: max(calc(50% - 429px), 291px);
	}

	.bdental-classic-header__nav .wp-block-navigation__responsive-container-open.always-shown {
		display: none;
	}

	.bdental-classic-header__nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
		display: block;
		position: relative;
		width: auto;
		z-index: auto;
		background-color: inherit;
	}

	.bdental-classic-header__nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
		display: none;
	}

	.bdental-classic-header__nav .wp-block-navigation__container {
		gap: 0;
	}

	.bdental-classic-header__nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 0 15px;
		font-size: 14px;
		line-height: 50px;
		white-space: nowrap;
	}

	/* The dropdown: right-aligned under its parent, 7px below the bar's text line, its rows 29px. */
	.bdental-classic-header__nav .has-child .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		top: 100%;
		right: 0;
		left: auto;
		width: 259px;
		min-width: 259px;
		padding: 0;
		border: 0;
		border-top: 7px solid transparent;
		background-clip: padding-box;
		background-color: var(--bdental-classic-overlay);
		color: var(--wp--preset--color--body);
		box-shadow: none;
		gap: 0;
	}

	nav.bdental-classic-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
		background: none;
	}

	nav.bdental-classic-header__nav .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
		padding: 0 12px;
		font-size: 14px;
		line-height: 29px;
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------------- Footer: the phone layout first */

/* `#contact` is the footer's own id: a menu's "Contact" link lands on the form at its top (html's scroll-padding-top keeps it clear of the header). */
.bdental-classic-footer {
	padding: calc(10 * var(--bdental-classic-u)) 0 calc(40 * var(--bdental-classic-u));
	background-color: var(--wp--preset--color--highlight-band);
	color: var(--wp--preset--color--body);
}

.bdental-classic-footer__inner {
	display: flex;
	flex-direction: column;
	max-width: calc(320 * var(--bdental-classic-u));
	margin: 0 auto;
}

.bdental-classic-footer__form {
	margin: 0 calc(10 * var(--bdental-classic-u)) calc(30 * var(--bdental-classic-u));
}

/* VT-02 ticket 07 (N17): a clinic form's card sits 10 units inside the form's place, as the moved site's widget drew
   its box inside its frame, and keeps the frame's height. */
.bdental-classic-footer__form.bdental-classic-form--card {
	min-height: calc(957 * var(--bdental-classic-u));
	margin-inline: calc(20 * var(--bdental-classic-u));
}

.bdental-classic-footer__heading,
.bdental-classic-footer__columns,
.bdental-classic-footer__documents,
.bdental-classic-footer__copyright {
	padding: 0 calc(20 * var(--bdental-classic-u));
}

.bdental-classic-footer__heading {
	max-width: calc(260 * var(--bdental-classic-u));
	font-family: var(--bdental-classic-alt);
	font-size: calc(26 * var(--bdental-classic-u));
	font-weight: 400;
	line-height: normal;
	color: var(--wp--preset--color--heading);
}

.bdental-classic-footer__columns {
	margin-top: calc(30.5 * var(--bdental-classic-u));
}

.bdental-classic-contact {
	font-family: var(--bdental-classic-alt);
	color: var(--wp--preset--color--body-secondary);
}

.bdental-classic-contact a {
	color: inherit;
	text-decoration: none;
}

.bdental-classic-contact__line {
	white-space: nowrap;
}

.bdental-classic-contact__key {
	color: var(--wp--preset--color--heading);
}

.bdental-classic-contact__intro {
	font-size: calc(15 * var(--bdental-classic-u));
	line-height: calc(22.5 * var(--bdental-classic-u));
}

.bdental-classic-contact__line--phone {
	font-size: calc(25 * var(--bdental-classic-u));
	line-height: calc(30 * var(--bdental-classic-u));
}

.bdental-classic-contact__line--email {
	font-size: calc(22 * var(--bdental-classic-u));
	line-height: calc(30 * var(--bdental-classic-u));
}

.bdental-classic-contact--primary .bdental-classic-contact__line--email {
	margin-top: calc(3.3 * var(--bdental-classic-u));
}

.bdental-classic-contact--secondary {
	margin-top: calc(22.6 * var(--bdental-classic-u));
}

.bdental-classic-contact--secondary .bdental-classic-contact__line--email {
	margin-top: calc(1.6 * var(--bdental-classic-u));
}

.bdental-classic-contact--secondary .bdental-classic-contact__intro {
	line-height: calc(19.5 * var(--bdental-classic-u));
}

.bdental-classic-contact--secondary .bdental-classic-contact__line {
	line-height: calc(28.6 * var(--bdental-classic-u));
}

.bdental-classic-social {
	display: flex;
	gap: calc(15 * var(--bdental-classic-u));
	margin-top: calc(31.3 * var(--bdental-classic-u));
}

/* Hit areas grow past the drawn shape to the 44px floor without moving anything (P-004 FR-079, R3). */
.bdental-classic-social__link,
.bdental-classic-footer__register {
	position: relative;
}

.bdental-classic-social__link::after,
.bdental-classic-footer__register::after {
	content: "";
	position: absolute;
	inset: min(0px, (100% - 44px) / 2);
}

.bdental-classic-social__link {
	display: block;
	line-height: 0;
}

.bdental-classic-social__icon {
	width: calc(35 * var(--bdental-classic-u));
	height: calc(35 * var(--bdental-classic-u));
}

.bdental-classic-social__disc {
	fill: var(--wp--preset--color--icon);
}

.bdental-classic-social__mark {
	color: var(--wp--preset--color--page-background);
}

.bdental-classic-hours {
	margin-top: calc(48.5 * var(--bdental-classic-u));
	font-family: var(--bdental-classic-alt);
	color: var(--wp--preset--color--body);
}

.bdental-classic-hours__heading,
.bdental-classic-hours__note {
	font-size: calc(14 * var(--bdental-classic-u));
	line-height: calc(18.2 * var(--bdental-classic-u));
	letter-spacing: calc(0.7 * var(--bdental-classic-u));
}

.bdental-classic-hours__heading {
	font-weight: 700;
}

.bdental-classic-hours__row {
	font-size: calc(16 * var(--bdental-classic-u));
	line-height: calc(20.8 * var(--bdental-classic-u));
	letter-spacing: calc(0.8 * var(--bdental-classic-u));
}

.bdental-classic-footer__register-wrap {
	margin-top: calc(13 * var(--bdental-classic-u));
	text-align: center;
}

.bdental-classic-footer__register {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(200 * var(--bdental-classic-u));
	height: calc(42 * var(--bdental-classic-u));
	font-family: var(--bdental-classic-text);
	font-size: calc(16 * var(--bdental-classic-u));
	font-weight: var(--bdental-classic-text-weight);
	line-height: calc(22.4 * var(--bdental-classic-u));
	color: var(--wp--preset--color--button-primary-fg);
	background-color: var(--wp--preset--color--button-primary-bg);
	text-decoration: none;
}

.bdental-classic-footer__register:hover {
	background-color: var(--wp--preset--color--button-primary-hover);
	color: var(--wp--preset--color--button-primary-fg);
}

.bdental-classic-visit {
	margin-top: calc(9 * var(--bdental-classic-u));
	font-family: var(--bdental-classic-alt);
}

.bdental-classic-visit__heading {
	font-size: calc(17 * var(--bdental-classic-u));
	line-height: calc(22.1 * var(--bdental-classic-u));
	letter-spacing: calc(0.85 * var(--bdental-classic-u));
	color: var(--wp--preset--color--body);
}

.bdental-classic-visit__address,
.bdental-classic-visit__note {
	font-size: calc(17 * var(--bdental-classic-u));
	line-height: calc(20 * var(--bdental-classic-u));
	color: var(--wp--preset--color--body-secondary);
}

.bdental-classic-visit__address {
	max-width: calc(260 * var(--bdental-classic-u));
}

.bdental-classic-visit__note {
	margin-top: calc(4 * var(--bdental-classic-u));
}

/* The map, click to load (VT-02 ticket 02, N6): bdental-core's embed, its box placed here. */
.bdental-classic-visit__map {
	width: calc(280 * var(--bdental-classic-u));
	height: calc(277 * var(--bdental-classic-u));
	margin-top: calc(34 * var(--bdental-classic-u));
}

.bdental-classic-footer__base {
	display: contents;
}

.bdental-classic-footer__copyright {
	order: 1;
	margin-top: calc(10 * var(--bdental-classic-u));
}

.bdental-classic-footer__copyright,
.bdental-classic-footer__documents {
	font-family: var(--bdental-classic-text);
	font-size: calc(14 * var(--bdental-classic-u));
	line-height: calc(22.4 * var(--bdental-classic-u));
	letter-spacing: calc(0.56 * var(--bdental-classic-u));
	color: var(--wp--preset--color--body);
}

.bdental-classic-footer__copyright {
	font-weight: var(--bdental-classic-text-weight);
}

.bdental-classic-footer__documents {
	margin-top: calc(10 * var(--bdental-classic-u));
	font-weight: var(--bdental-classic-strong-weight);
	line-height: calc(21 * var(--bdental-classic-u));
}

.bdental-classic-footer__documents a {
	color: inherit;
	text-decoration: none;
}

.bdental-classic-footer__documents a:hover {
	text-decoration: underline;
}

.bdental-classic-footer__legal {
	margin: calc(16 * var(--bdental-classic-u)) calc(10 * var(--bdental-classic-u)) 0;
	padding-top: calc(6 * var(--bdental-classic-u));
	border-top: 2px dotted color-mix(in srgb, var(--wp--preset--color--body-secondary) 56%, transparent);
	font-family: var(--bdental-classic-text);
	font-size: calc(15 * var(--bdental-classic-u));
	font-weight: var(--bdental-classic-text-weight);
	line-height: calc(21 * var(--bdental-classic-u));
}

/* ---------------------------------------------------------------- Footer: the 980px grid */

@media (min-width: 1240px) {
	html {
		scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 131px + 12px);
	}

	.bdental-classic-footer {
		padding: 15px 0 10px;
	}

	.bdental-classic-footer__inner {
		display: block;
		width: 980px;
		max-width: none;
	}

	.bdental-classic-footer__form {
		width: 934px;
		margin: 0 0 33px 32px;
	}

	.bdental-classic-footer__form.bdental-classic-form--card {
		width: 914px;
		min-height: 869px;
		margin-left: 42px;
	}

	.bdental-classic-footer__heading,
	.bdental-classic-footer__columns {
		padding: 0 0 0 42px;
	}

	.bdental-classic-footer__heading {
		max-width: none;
		font-size: 26px;
	}

	.bdental-classic-footer__columns {
		display: grid;
		grid-template-columns: 300px 462px;
		column-gap: 142px;
		align-items: start;
		margin-top: 22px;
	}

	.bdental-classic-contact__intro {
		font-size: 16px;
		line-height: 24px;
	}

	.bdental-classic-contact__line--phone {
		font-size: 30px;
		line-height: 32px;
	}

	.bdental-classic-contact__line--email {
		font-size: 24px;
		line-height: 32px;
	}

	.bdental-classic-contact--primary .bdental-classic-contact__line--email {
		margin-top: 6px;
	}

	.bdental-classic-contact--secondary {
		margin-top: 22px;
	}

	.bdental-classic-contact--secondary .bdental-classic-contact__line--email {
		margin-top: 5px;
	}

	.bdental-classic-contact--secondary .bdental-classic-contact__intro {
		line-height: 20.8px;
	}

	.bdental-classic-contact--secondary .bdental-classic-contact__line {
		line-height: 31.2px;
	}

	.bdental-classic-social {
		gap: 10px;
		margin-top: 19px;
	}

	.bdental-classic-social__icon {
		width: 39px;
		height: 39px;
	}

	.bdental-classic-hours {
		margin-top: 36px;
	}

	.bdental-classic-hours__heading,
	.bdental-classic-hours__note {
		font-size: 14px;
		line-height: 18.2px;
		letter-spacing: 0.7px;
	}

	.bdental-classic-hours__row {
		font-size: 17px;
		line-height: 22.1px;
		letter-spacing: 0.85px;
	}

	.bdental-classic-footer__register-wrap {
		margin-top: 27px;
		text-align: left;
	}

	.bdental-classic-footer__register {
		width: 244px;
		height: 31px;
		font-size: 17px;
		line-height: 23.8px;
	}

	.bdental-classic-visit {
		margin-top: 0;
	}

	.bdental-classic-visit__heading {
		font-size: 18px;
		line-height: 23.4px;
		letter-spacing: 0.9px;
	}

	.bdental-classic-visit__address,
	.bdental-classic-visit__note {
		max-width: none;
		font-size: 18px;
		line-height: 24px;
	}

	.bdental-classic-visit__address,
	.bdental-classic-visit__note {
		margin-top: 5px;
	}

	.bdental-classic-visit__note {
		line-height: 21px;
	}

	.bdental-classic-visit__map {
		width: 462px;
		height: 332px;
		margin-top: 34.6px;
	}

	.bdental-classic-footer__base {
		display: flex;
		align-items: baseline;
		margin: 24px 0 0 32px;
		width: 914px;
	}

	.bdental-classic-footer__copyright,
	.bdental-classic-footer__documents {
		padding: 0;
		font-size: 14px;
		letter-spacing: 0.56px;
	}

	.bdental-classic-footer__copyright {
		order: 0;
		margin: 0;
		line-height: 22.4px;
		flex: 0 0 529px;
	}

	.bdental-classic-footer__documents {
		display: flex;
		gap: 62px;
		margin: 0;
		line-height: 22.4px;
		white-space: nowrap;
	}

	.bdental-classic-footer__legal {
		width: 923px;
		margin: 33px 0 0 32px;
		padding-top: 12px;
		border-top: 2px dotted color-mix(in srgb, var(--wp--preset--color--body-secondary) 56%, transparent);
		font-size: 15px;
		line-height: 21px;
	}

	.bdental-classic-footer__legal p {
		max-width: 880px;
	}
}