/* =============================================================================
   Woolwich Dental — Global chrome
   Utility bar · sticky header · animated dropdowns · modern mobile drawer ·
   fixed call/book bar · footer.
   Header switches to the mobile treatment at 1160px. The spec said 1080, and
   1080 is where it sat until the nav grew: seven items measure 654px
   unsquashed, and with the logo and the button beside them the row needs
   1237px. Between 1080 and that the nav had nowhere to go and ran straight
   over the Book Appointment button. Tightened below (1160-1400) it comes
   down to 1139px, so 1160 is the first width where the row genuinely fits.
   The number is repeated in five more places, all marked "HEADER SWITCH".
   ========================================================================== */

/* ---------- Utility bar (≥1160px only) --------------------------------- */
/* Same ground as the footer, so the page opens and closes on the same dark. */
.wd-utility {
	background: var(--wd-footer-bg);
	color: var(--wd-on-dark-body);
	font-size: 14px;
	padding: 9px 0;
}
.wd-utility__inner {
	max-width: var(--wd-container);
	margin-inline: auto;
	padding-inline: var(--wd-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.wd-utility a { color: var(--wd-on-dark-body); }
.wd-utility a:hover { color: #fff; }
.wd-utility__group { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.wd-utility__sep { color: var(--wd-on-dark-rule); }

/* address / phone / email, each with its icon */
.wd-utility__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}
/* White, not the accent — the accent is a deep navy and would disappear against
   this bar. These are filled glyphs (see woolwich_icon()), so they hold at 15px. */
.wd-utility__item .wd-icon {
	flex: none;
	color: #fff;
	transition: color var(--wd-transition);
}
.wd-utility a.wd-utility__item:hover .wd-icon { color: #fff; }

/* ---------- Sticky header ---------------------------------------------- */
.wd-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: #fff;
	border-bottom: 1px solid var(--wd-border-header);
	transition: box-shadow 220ms ease;
}
.wd-header.is-stuck { box-shadow: 0 6px 24px rgba(19, 32, 43, .08); }

/* ---------- Home: the chrome floats over the banner ---------------------
   On the home page the banner video starts at the very top of the document and
   the utility bar and header sit on top of it, transparent.

   `fixed`, not `sticky`: a sticky element still reserves its own height in the
   flow, which would push the banner down and defeat the point. Fixed takes it
   out of the flow entirely, so the video starts at y=0 and runs behind the nav.

   As soon as the page moves, chrome.js adds .is-solid and the bar goes back to
   its normal self — white, with its rule and shadow. The utility strip folds up
   at that point so only the 69px nav stays parked on screen. Everything is a
   transition, so the change reads as one movement rather than a jump. */
/* Off the home page the wrapper must not exist as a box at all. `.wd-header` is
   `position: sticky`, and sticky travels inside its containing block — with the
   wrapper in the way that block was only as tall as the header itself, so the
   header had nowhere to stick and scrolled off with the page. `display: contents`
   takes the wrapper out of the box tree and the header sticks against #page
   again, exactly as it did before the wrapper existed. */
.wd-chrome { display: contents; }
body.wd-redesign.home .wd-chrome { display: block; }

body.wd-redesign.home .wd-chrome {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 200;
	transition: transform 260ms ease;
}
body.wd-redesign.home .wd-chrome .wd-utility,
body.wd-redesign.home .wd-chrome .wd-header {
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
	transition: background 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

/* Over the video every label is white. The logo is a dark wordmark with a navy
   roundel, so it is turned to its negative rather than swapped for a second
   file: greyscale flattens the navy, invert lifts it to white and drops the
   tooth to a dark cut-out, which keeps the mark's shape. */
body.wd-redesign.home .wd-chrome:not(.is-solid) .wd-header__brand img {
	filter: grayscale(1) invert(1);
}
/* TOP-LEVEL links only. `.wd-nav a` also reaches the links inside the dropdown,
   and that panel is white — so the submenu came out white on white. The child
   combinator keeps the white to the bar itself and leaves the dropdown reading
   in its own navy. */
body.wd-redesign.home .wd-chrome:not(.is-solid) .wd-nav > ul > li > a { color: rgba(255, 255, 255, .92); }
body.wd-redesign.home .wd-chrome:not(.is-solid) .wd-nav > ul > li > a:hover,
body.wd-redesign.home .wd-chrome:not(.is-solid) .wd-nav > ul > li.current-menu-item > a,
body.wd-redesign.home .wd-chrome:not(.is-solid) .wd-nav > ul > li.current_page_item > a,
body.wd-redesign.home .wd-chrome:not(.is-solid) .wd-nav > ul > li.current-menu-ancestor > a {
	/* the rule below the label carries the mark here; a wash as well was two
	   signals for one thing */
	color: #fff;
	/* The wash has to be turned off, not just left unmentioned. The shared
	   hover rule further down paints `--wd-tint-subtle` (#F7F9FE) behind every
	   nav link, which is right on the white header and wrong here: this block
	   only restated the colour, so hovering an item over the banner put white
	   text on a near-white pill and the word disappeared. */
	background: transparent;
}
/* the Contact Us button inverts with everything else: white fill, navy label */
body.wd-redesign.home .wd-chrome:not(.is-solid) .wd-header .wd-btn--accent {
	background: #fff;
	color: var(--wd-primary);
}
body.wd-redesign.home .wd-chrome:not(.is-solid) .wd-header .wd-btn--accent:hover {
	background: var(--wd-tint);
	color: var(--wd-primary-dark);
}
/* the icon badge inverts with the button — navy circle, white arrow — so it
   still shows against a white fill instead of a white circle disappearing
   into it. */
body.wd-redesign.home .wd-chrome:not(.is-solid) .wd-header .wd-btn--accent,
body.wd-redesign.home .wd-chrome:not(.is-solid) .wd-header .wd-btn--accent:hover {
	--wd-badge-bg:  var(--wd-primary);
	--wd-badge-ink: #fff;
}
body.wd-redesign.home .wd-chrome:not(.is-solid) .wd-burger__box i { background: #fff; }

/* scrolled: back to the normal bar */
body.wd-redesign.home .wd-chrome.is-solid .wd-header {
	background: #fff;
	border-bottom-color: var(--wd-border-header);
	box-shadow: 0 6px 24px rgba(19, 32, 43, .08);
}
/* The utility strip stays. An earlier pass slid it off the top once the page
   moved, to keep the pinned bar down to the height of the nav — but nobody asked
   for that and it read as the strip going missing. Both bars stay put; scrolled,
   they simply take their normal colours back. */
body.wd-redesign.home .wd-chrome.is-solid .wd-utility {
	background: var(--wd-footer-bg);
}

/* The banner starts at the top of the document, so its first line has to clear
   the bar floating on it. Same variable, so the two can never drift apart. */
body.wd-redesign.home .wd-hero--video {
	padding-top: calc(var(--wd-hero-pad, 44px) + var(--wd-chrome-h, 0px));
}

@media (prefers-reduced-motion: reduce) {
	body.wd-redesign.home .wd-chrome .wd-utility,
	body.wd-redesign.home .wd-chrome .wd-header { transition: none; }
}

.wd-header__inner {
	max-width: var(--wd-container);
	margin-inline: auto;
	padding: 14px var(--wd-gutter);
	display: flex;
	align-items: center;
	gap: 18px;
}
/* the nav is pushed to the right so it sits directly beside the Contact Us
   button, rather than floating in the middle of the bar */
.wd-nav { margin-left: auto; }
.wd-header__brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.wd-header__brand img { height: clamp(40px, 4vw, 52px); width: auto; display: block; }

/* ---------- Primary nav ------------------------------------------------- */
.wd-nav { display: flex; align-items: center; min-width: 0; }
.wd-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
}
.wd-nav li { position: relative; }

.wd-nav a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 13px;
	border-radius: 9px;
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1;
	color: var(--wd-body);
	white-space: nowrap;
	transition: color var(--wd-transition), background var(--wd-transition);
}

/* Title case is applied in PHP (woolwich_menu_title_case) because CSS cannot
   turn "ABOUT US" into "About Us". Nothing to do here — just make sure no
   inherited rule forces capitals back on. */
.wd-nav a,
.wd-drawer a { text-transform: none; }

.wd-nav > ul > li > a:hover { color: var(--wd-primary); background: #dbe5ff; }
/* ---- the page you are on ----
   A rule under the label. It is drawn on ::before, because ::after already
   carries the dropdown chevron on the parent items — and it is positioned
   absolutely so marking a link never changes the bar's height or nudges its
   neighbours along.

   `currentColor` means the rule is whatever the link is: brand navy on a white
   header, white where the header floats over the home banner. One rule, both
   places, nothing to keep in step.

   Weight and colour move too, so the mark never rests on colour alone — that
   would leave anyone who cannot separate the two hues with no signal at all
   (WCAG 1.4.1). */
.wd-nav > ul > li > a { position: relative; }

.wd-nav .current-menu-item > a,
.wd-nav .current_page_item > a,
.wd-nav .current-menu-ancestor > a {
	color: var(--wd-primary);
	font-weight: 600;
}

.wd-nav > ul > li.current-menu-item > a::before,
.wd-nav > ul > li.current_page_item > a::before,
.wd-nav > ul > li.current-menu-ancestor > a::before {
	content: "";
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: 1px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

/* Hover is a tint, the current page is a rule — two different signals, so a
   pointer resting on a link never reads as "this is where you are". */

/* chevron on parents */
.wd-nav .menu-item-has-children > a::after {
	content: "";
	width: 8px; height: 8px;
	margin-left: 2px;
	border-right: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
	opacity: .65;
}
.wd-nav .menu-item-has-children:hover > a::after,
.wd-nav .menu-item-has-children:focus-within > a::after {
	transform: translateY(1px) rotate(225deg);
	opacity: 1;
}

/* ---------- Dropdowns --------------------------------------------------- */
.wd-nav .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	min-width: 246px;
	background: #fff;
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-radius-card);
	box-shadow: 0 18px 44px rgba(15, 76, 107, .16);
	padding: 8px;
	display: flex;
	flex-direction: column;
	z-index: 10;
	/* animated in, not display:none, so it can transition */
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -8px);
	transition: opacity 200ms ease, transform 240ms cubic-bezier(.22, 1, .36, 1), visibility 240ms;
}
/* little pointer */
.wd-nav .sub-menu::before {
	content: "";
	position: absolute;
	top: -6px; left: 50%;
	width: 11px; height: 11px;
	margin-left: -5.5px;
	background: #fff;
	border-left: 1px solid var(--wd-border);
	border-top: 1px solid var(--wd-border);
	transform: rotate(45deg);
	border-radius: 2px 0 0 0;
}
/* hover bridge so the pointer gap does not drop the menu */
.wd-nav .menu-item-has-children::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 100%;
	height: 12px;
}
.wd-nav li:hover > .sub-menu,
.wd-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}
.wd-nav .sub-menu li { width: 100%; }
.wd-nav .sub-menu a {
	display: block;
	width: 100%;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 15px;
	color: var(--wd-body);
	white-space: normal;
	/* transform belongs in this list. The hover below nudges the item 2px to the
	   right, and without naming it here only the colour and the wash faded — the
	   nudge jumped, so pointing at an item felt like a click rather than a
	   hover. The ease is the one the panel itself opens on, so the item and the
	   menu it sits in move the same way. */
	transition: color 180ms ease,
	            background 180ms ease,
	            transform 240ms cubic-bezier(.22, 1, .36, 1);
}
.wd-nav .sub-menu a:hover,
.wd-nav .sub-menu a:focus-visible {
	background: var(--wd-tint);
	color: var(--wd-primary);
	transform: translateX(2px);
}

/* ---- the page you are on, inside the dropdown ----
   The bar above marks "About Us" when you are on one of its children, but the
   child itself was left with nothing but a heavier weight — on a panel of two
   items that reads as no mark at all. It takes the wash and the brand navy, and
   a rule down its left edge so it cannot be mistaken for whatever the pointer
   happens to be over. WordPress supplies the classes; nothing is hard-coded to
   a particular page. */
.wd-nav .sub-menu .current-menu-item > a,
.wd-nav .sub-menu .current_page_item > a,
.wd-nav .sub-menu .current-menu-ancestor > a,
.wd-nav .sub-menu .current-page-ancestor > a {
	position: relative;
	background: var(--wd-tint);
	color: var(--wd-primary);
	font-weight: 600;
}
.wd-nav .sub-menu .current-menu-item > a::before,
.wd-nav .sub-menu .current_page_item > a::before,
.wd-nav .sub-menu .current-menu-ancestor > a::before,
.wd-nav .sub-menu .current-page-ancestor > a::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 2px;
	background: var(--wd-accent);
}
/* the hover nudge would slide that rule off its own edge */
.wd-nav .sub-menu .current-menu-item > a:hover,
.wd-nav .sub-menu .current_page_item > a:hover { transform: none; }

/* Leaving eases too, a little quicker than arriving — an instant snap out is
   the thing that made this feel abrupt in the first place. */
.wd-nav .sub-menu a { transition-duration: 150ms, 150ms, 200ms; }
.wd-nav .sub-menu a:hover,
.wd-nav .sub-menu a:focus-visible { transition-duration: 180ms, 180ms, 240ms; }

@media (prefers-reduced-motion: reduce) {
	.wd-nav .sub-menu,
	.wd-nav .sub-menu a { transition: none; }
	.wd-nav .sub-menu a:hover { transform: none; }
}

.wd-header__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.wd-header__phone {
	font-family: var(--wd-font-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--wd-primary);
	white-space: nowrap;
}
.wd-header .wd-btn { height: 48px; padding: 0 22px; font-size: 15.5px; }
/* the accent button's own icon-badge padding needs to survive the header's
   shorter, uniform padding above — same specificity fight as the drawer's
   button, same fix. */
/* The header button is shorter than the content ones, but it keeps the same
   badge — that badge is what the client pointed at as the correct one. Only the
   padding is restated, and its right side stays tied to --wd-badge-inset so the
   glyph cannot come out of register with the disc again. */
.wd-header .wd-btn--accent { padding: 5px var(--wd-badge-inset) 5px 22px; }

/* HEADER SWITCH — the band between the switch and a comfortable desktop.
   Measured, not guessed: at 14.5px/10px/2px the row needs 1237px, at
   14px/8px/0 it needs 1180, and with the logo and the button brought in too,
   1139. Pushing further buys single pixels for type nobody can read — which
   is why the switch moved instead of shrinking this any harder. */
@media (min-width: 1160px) and (max-width: 1400px) {
	.wd-nav ul { gap: 0; }
	.wd-nav a { font-size: 14px; padding: 9px 8px; }
	.wd-header__inner { gap: 14px; }
	.wd-header__brand img { height: 40px; }
	.wd-header .wd-btn--accent { padding-left: 16px; }
}
/* HEADER SWITCH — the phone number is the first thing to go when it is tight. */
@media (min-width: 1160px) and (max-width: 1320px) {
	.wd-header__phone { display: none; }
}

/* ---------- Hamburger --------------------------------------------------- */
/* Borderless disc rather than an outlined box: nothing at rest but the three
   rules, a soft navy wash on hover, and a solid navy disc with white rules once
   the drawer is open — so the control itself reports the state. */
.wd-burger {
	display: none;
	position: relative;
	width: 46px; height: 46px;
	align-items: center; justify-content: center;
	background: transparent;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	z-index: 320;
	-webkit-tap-highlight-color: transparent;
	transition: background 200ms ease, transform 200ms ease;
}
.wd-burger:hover { background: rgba(41, 41, 92, .08); }
.wd-burger:active { transform: scale(.94); }
.wd-burger[aria-expanded="true"] { background: var(--wd-accent); }

.wd-burger__box { position: relative; width: 22px; height: 14px; display: block; }
.wd-burger__box i {
	position: absolute; left: 0;
	display: block; width: 100%; height: 2.2px;
	border-radius: 2px;
	background: var(--wd-accent);
	transform-origin: center;
	transition: transform 380ms cubic-bezier(.22, 1, .36, 1),
	            opacity 160ms ease,
	            width 380ms cubic-bezier(.22, 1, .36, 1),
	            background 200ms ease;
}
/* the short middle rule is what keeps it from reading as a plain three-bar icon */
.wd-burger__box i:nth-child(1) { top: 0; }
.wd-burger__box i:nth-child(2) { top: 5.9px; width: 64%; }
.wd-burger__box i:nth-child(3) { top: 11.8px; }
.wd-burger:hover .wd-burger__box i:nth-child(2) { width: 100%; }

.wd-burger[aria-expanded="true"] .wd-burger__box i { background: #fff; }
.wd-burger[aria-expanded="true"] .wd-burger__box i:nth-child(1) { transform: translateY(5.9px) rotate(45deg); }
.wd-burger[aria-expanded="true"] .wd-burger__box i:nth-child(2) { opacity: 0; width: 0; }
.wd-burger[aria-expanded="true"] .wd-burger__box i:nth-child(3) { transform: translateY(-5.9px) rotate(-45deg); }

/* ---------- Mobile drawer ---------------------------------------------- */
.wd-scrim {
	position: fixed;
	inset: 0;
	z-index: 290;
	background: rgba(10, 52, 80, .46);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms ease, visibility 300ms;
}
.wd-scrim.is-open { opacity: 1; visibility: visible; }

.wd-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 300;
	width: min(400px, 88vw);
	height: 100dvh;
	background: #fff;
	box-shadow: -18px 0 60px rgba(19, 32, 43, .22);
	transform: translateX(101%);
	transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
}
.wd-drawer.is-open { transform: translateX(0); visibility: visible; }

.wd-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--wd-border);
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 2;
}
.wd-drawer__head img { height: 40px; width: auto; }
.wd-drawer__close {
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border: 1.5px solid var(--wd-border-strong);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	color: var(--wd-body);
	transition: border-color var(--wd-transition), color var(--wd-transition);
}
.wd-drawer__close:hover { border-color: var(--wd-primary); color: var(--wd-primary); }

.wd-drawer__nav { padding: 10px 14px 4px; }
.wd-drawer ul { list-style: none; margin: 0; padding: 0; }
.wd-drawer > .wd-drawer__nav > ul > li {
	/* staggered reveal, driven by --i set in JS */
	opacity: 0;
	transform: translateX(14px);
	transition: opacity 320ms ease, transform 380ms cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(var(--i, 0) * 42ms + 90ms);
}
.wd-drawer.is-open > .wd-drawer__nav > ul > li { opacity: 1; transform: none; }

.wd-drawer a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 14px;
	border-radius: 11px;
	font-size: 17px;
	font-weight: 500;
	color: var(--wd-body);
	min-height: 48px;
}
.wd-drawer a:hover,
.wd-drawer a:focus-visible { background: #dbe5ff; color: var(--wd-primary); }

/* `.wd-drawer a` above is (0,1,1) and was beating `.wd-btn--accent`'s (0,1,0)
   colour, radius and padding, so the drawer's filled button rendered dark
   text on a filled ground at the generic 11px/14px link shape instead of its
   own pill. The two buttons in the drawer foot keep their own component
   shape and colours. */
.wd-drawer .wd-btn--accent,
.wd-drawer .wd-btn--accent:hover,
.wd-drawer .wd-btn--accent:focus-visible {
	color: #fff;
	background: var(--wd-accent);
	border-radius: 999px;
	padding: 5px var(--wd-badge-inset) 5px 26px;
}
.wd-drawer .wd-btn--accent:hover {
	background: var(--wd-accent-hover);
	--wd-badge-ink: var(--wd-accent-hover);
}
.wd-drawer .wd-btn--outline {
	color: var(--wd-accent);
	background: #fff;
	border-radius: 999px;
	padding: 0 30px;
}
.wd-drawer .wd-btn--outline:hover,
.wd-drawer .wd-btn--outline:focus-visible { background: var(--wd-accent); color: #fff; }
.wd-drawer .current-menu-item > a { color: var(--wd-primary); font-weight: 600; background: #dbe5ff; }

/* sub-menu accordion */
.wd-drawer .menu-item-has-children > a::after {
	content: "";
	width: 9px; height: 9px;
	flex: none;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: .55;
	transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
}
.wd-drawer .menu-item-has-children.is-open > a::after { transform: rotate(225deg); opacity: 1; }

.wd-drawer .sub-menu {
	overflow: hidden;
	max-height: 0;
	padding-left: 12px;
	transition: max-height 340ms cubic-bezier(.22, 1, .36, 1),
	            opacity 240ms ease;
	opacity: .4;
}
.wd-drawer .menu-item-has-children.is-open > .sub-menu { max-height: 640px; opacity: 1; }
.wd-drawer .sub-menu li { min-width: 0; }
.wd-drawer .sub-menu a { font-size: 15.5px; color: var(--wd-body-2); padding-block: 11px; }

.wd-drawer__foot {
	margin-top: auto;
	padding: 18px 22px calc(18px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--wd-border);
	display: grid;
	gap: 10px;
}
.wd-drawer__foot .wd-btn { width: 100%; }
.wd-drawer__meta { font-size: 14.5px; color: var(--wd-muted); text-align: center; margin: 2px 0 0; }

/* ---------- Fixed mobile call/book bar ---------------------------------- */
.wd-mobilebar {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 280;
	background: #fff;
	border-top: 1px solid var(--wd-border);
	padding: 10px var(--wd-gutter) calc(10px + env(safe-area-inset-bottom));
	gap: 10px;
	box-shadow: 0 -4px 20px rgba(19, 32, 43, .10);
}
.wd-mobilebar .wd-btn { flex: 1; height: 50px; font-size: 16px; padding: 0 14px; }
/* Two fifths to Call, three fifths to the booking CTA. Both bases are 0, so the
   4:6 is a share of the whole bar and not of whatever is left over after the
   words — which is what makes it read as a deliberate split rather than as two
   buttons that happen to have landed where they did. */
.wd-mobilebar .wd-btn--outline { flex: 4 1 0; gap: 8px; }
.wd-mobilebar .wd-btn--accent  { flex: 6 1 0; white-space: nowrap; }
.wd-mobilebar .wd-btn--outline .wd-icon { width: 17px; height: 17px; }
/* The uniform padding above clobbers the accent button's own, and the badge is
   positioned off padding-right — at `0 14px` the disc sat 14px in while the
   glyph stayed at --wd-badge-inset, so the arrow printed beside its circle
   instead of on it. Same fight the header and the drawer already had. */
.wd-mobilebar .wd-btn--accent { padding: 5px var(--wd-badge-inset) 5px 14px; }

/* ---------- Footer ------------------------------------------------------ */
/* The parent theme styles #colophon by ID — the stock Unite purple, plus
   `padding: 10px 0` and `margin-top: 20px`. An ID beats a class, so all three
   are re-declared here rather than fought with !important. */
/* 2026-08-06 — client's third footer reference (hident theme): flat dark
   ground (no diagonal gradient this time), four columns — brand, two plain
   link lists with no headings, then a stacked contact block — and chevron
   markers on every link instead of a bullet. */
#colophon.wd-footer {
	background: var(--wd-footer-bg);
	padding-block: clamp(40px, 3.6vw, 56px) 0;
	margin-top: 0;
	position: relative;
}

/* thin brand-gradient accent along the top edge — the one piece of colour
   this band had none of before, and the cheapest way to stop it reading as a
   flat grey slab under a coloured site */
#colophon.wd-footer::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--wd-primary), var(--wd-tint), var(--wd-primary));
}

.wd-footer {
	background: var(--wd-footer-bg);
	color: #B9C9D6;
	font-size: 15.5px;
	line-height: 1.7;
	padding-block: clamp(40px, 3.6vw, 56px) 0;
}
/* Back on its photo (2026-08-06 — the flat #EDF1FC swap was only ever meant
   for .front-section-3; reverted here), so light-on-dark again. */
.wd-footer a { color: #ffffff; transition: color var(--wd-transition); }
.wd-footer a:hover,
.wd-footer a:focus-visible { color: #fff; }

/* left-aligned layout: brand block, two plain link columns, then contact. */
.wd-footer__top {
	max-width: var(--wd-container);
	margin-inline: auto;
	padding-inline: var(--wd-gutter);
	display: grid;
	grid-template-columns: minmax(min(100%, 260px), 1.5fr) repeat(2, minmax(min(100%, 140px), 1fr)) minmax(min(100%, 200px), 1.1fr);
	gap: clamp(28px, 3vw, 48px);
	align-items: start;
	text-align: left;
}

.wd-footer__brand-mark {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: #fff;
	text-decoration: none;
}
/* Icon stays its own printed colour (client's ask, 2026-08-06); only the
   practice/doctor name baked into the same file turns white. Both are one
   flat PNG (no separate icon/text files exist), so this is two copies of it
   stacked: the real <img> underneath at natural colour, and a second copy on
   ::after — inverted white, then clip-path cuts off everything left of the
   icon/text gap so only the white copy of the TEXT half shows, sitting
   exactly on top of the original's navy text. The gap was measured directly
   from the PNG's alpha channel (column-scanned): content resumes at x=158 of
   718 total, i.e. clip-path: inset(0 0 0 21%). */
.wd-footer__brand-mark img { height: 52px; width: auto; display: block; }
.wd-footer__brand-mark::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../../../../uploads/2016/12/woolwich-dental-group-logo.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: auto 52px;
	filter: brightness(0) invert(1);
	clip-path: inset(0 0 0 21%);
	pointer-events: none;
}
.wd-footer__brand-name {
	margin: 14px 0 0;
	font-family: var(--wd-font-display);
	font-size: 15px;
	font-weight: 700;
	color: #fff;
}
.wd-footer__brand-desc {
	margin: 16px 0 0;
	max-width: 40ch;
	font-size: 15px;
	line-height: 1.65;
	color: #ffffff;
}

/* pill CTA button under the description — same destination/label as the
   header button (Customizer-controlled), just a second entry point to it.
   Solid navy fill now (was a pale tint that read as washed-out/disabled
   against the dark ground; against the new light ground a filled navy pill
   is the same treatment every other accent button on the site already
   uses). */
.wd-footer__brand-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	padding: 10px 10px 10px 22px;
	border-radius: 999px;
	/* White at rest — client's ask, 2026-08-12. The pill used to be --wd-accent
	   navy, which read as a button while the footer was a flat, much darker
	   ground. Now that the band is the navy-to-blue gradient, a navy pill sits
	   within a shade or two of what is behind it and stops looking pressable.
	   White is the one fill with real distance from every point of that ramp.
	   Navy label on it measures 13.4:1. */
	background: #fff;
	font-family: var(--wd-font-display);
	font-weight: 400;
	font-size: 15px;
}
/* The label needs the same specificity climb the hover rule below documents, and
   for the same reason: `.wd-footer a` is (0,1,1) and beats the class on its own,
   so `color` set in the rule above was overruled straight back to #fff — a white
   label on the new white pill, measured at 1:1. It is set here instead, where
   the selector outranks it. */
.wd-footer a.wd-footer__brand-cta { color: var(--wd-accent); }
/* Hover had nowhere left to go once white became the resting state — it WAS the
   hover. It moves to the palette's tint instead: still clearly a light pill
   against the gradient, just enough off-white to register as a response. Going
   the other way, back to navy, would be the sink this rule exists to avoid.

   `.wd-footer a:hover` a few rules up carries the same two classes plus an
   element, so it outranks a plain `.wd-footer__brand-cta:hover` and would
   repaint the label #fff — white text on a white pill, i.e. nothing at all.
   Naming the element and the ancestor here settles it. */
.wd-footer a.wd-footer__brand-cta:hover,
.wd-footer a.wd-footer__brand-cta:focus-visible {
	background: var(--wd-tint);
	color: var(--wd-accent);
}
.wd-footer__brand-cta-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	/* Inverted with the pill: navy disc on white, rather than white on navy. */
	background: var(--wd-accent);
	flex: none;
}
.wd-footer__brand-cta-arrow::before {
	content: "";
	display: block;
	width: 13px;
	height: 13px;
	background: #fff;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-image: var(--wd-icon-arrow);
	        mask-image: var(--wd-icon-arrow);
}

/* 2026-08-06 — headings restored (client's ask); the chevron-per-link stays
   from the hident reference either way. */
.wd-footer__col-head {
	margin: 0 0 16px;
	font-family: var(--wd-font-display);
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}
.wd-footer__col {
	/* the marker and its gap, as numbers anything else in the column can read —
	   "View More Services" lines its text up with the list's by adding the two
	   together rather than repeating them */
	--wd-footer-marker: 14px;
	--wd-footer-gap:     9px;
}
.wd-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 13px;
}
.wd-footer__list a {
	display: inline-flex;
	align-items: center;
	gap: var(--wd-footer-gap);
	font-size: 15px;
}
.wd-footer__list a::before {
	content: "";
	flex: none;
	width: var(--wd-footer-marker);
	height: var(--wd-footer-marker);
	background: currentColor;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	mask-image: var(--wd-icon-arrow);
	opacity: .7;
}

/* "View More Services" had no rule of its own at all, so it inherited the
   footer's plain link styling and sat hard against the last menu item, one
   marker-width to the left of every label above it. It gets the column's own
   measurements: the same text indent as the list, air above it, and an
   underline, because unlike the items above it is an action rather than one
   more destination in the list. */
.wd-footer__more {
	display: inline-block;
	margin-top: 10px;
	padding-left: calc(var(--wd-footer-marker) + var(--wd-footer-gap));
	font-size: 14px;
	font-weight: 400;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .45);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}
.wd-footer__more:hover,
.wd-footer__more:focus-visible {
	color: #fff;
	text-decoration-color: #fff;
}

/* contact column — label, then the value large, stacked, per the reference. */
/* The column's heading. It carries .wd-footer__col-head as well, which is where
   its size, weight and colour come from — the small grey "Contact us:" this rule
   used to set is gone, along with the "Email:" label under the phone number
   (client's ask, 2026-08-12). Only the gap under it is set here, matching the
   other columns' 16px. */
.wd-footer__contact-label { margin: 0 0 16px; }
.wd-footer__contact-big {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wd-font-display);
	font-size: clamp(19px, 1.8vw, 23px);
	font-weight: 700;
	color: #fff;
	word-break: break-word;
}
.wd-footer__contact-big + .wd-footer__contact-big { margin-top: 14px; }
/* An icon apiece, now that neither line has a word above it saying which it is.
   Keyed off the href rather than a class: "starts with tel:" and "starts with
   mailto:" is the same fact the link already states, and it cannot fall out of
   step with the markup the way a hand-added class can.

   currentColor, so the icons follow the link's own hover to --wd-tint. flex:none
   keeps them square when a long address squeezes the row. */
.wd-footer__contact-big::before {
	content: "";
	flex: none;
	width: 19px;
	height: 19px;
	background: currentColor;
	-webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
	-webkit-mask-position: center;    mask-position: center;
	-webkit-mask-size: contain;       mask-size: contain;
}
.wd-footer__contact-big[href^="tel:"]::before {
	-webkit-mask-image: var(--wd-icon-phone);
	        mask-image: var(--wd-icon-phone);
}
.wd-footer__contact-big[href^="mailto:"]::before {
	-webkit-mask-image: var(--wd-icon-mail);
	        mask-image: var(--wd-icon-mail);
}

/* The email set at the phone's size does not fit the column it is in: the
   address is 25 characters and needs 335px at 23px, where the column is 252px.
   It broke mid-word — "rogers.c" on one line and "om" on the next.

   Sized against the column rather than the window. The footer's container stops
   growing at 1680px, so a vw-based size keeps climbing on a wide screen while
   the column it has to fit stays exactly where it was — which is how a font
   size tuned at one width breaks at another. A container query unit tracks the
   column itself, so this holds at every width the footer is ever laid out at.

   6.6% of the column is the address's own measurement rather than a guess: it
   needs 14.56px of width for every 1px of type, and 100 / 14.56 = 6.87, taken
   down to 6.6 so it does not sit flush against the edge. The narrowest the
   column gets is 200px, in the four-across footer at about 1024px, where this
   lands on 13.2px and still holds one line.

   The plain px line first, for anything without container queries. The 20px
   ceiling also keeps the email a step below the phone number, which is the one
   that should be read first.

   6.6 came down to 6.0 when the mail icon went in front of the address: the icon
   and its gap take 29px off the column, so the text has 100cqw - 29px to fit in
   rather than the whole of it. At the 252px column that is 223px, and 223 /
   14.56 = 15.3px, which is 6.07% of 252. The floor came down with it for the
   200px column the four-across footer produces at ~1024px.

   Keyed off the href now, not off the "Email:" label that used to sit above it —
   that label is gone, and this rule silently stopped matching when it went,
   which put the address back at the phone's 23px and broke it mid-word again. */
.wd-footer__col--contact { container-type: inline-size; }
.wd-footer__contact-big[href^="mailto:"] {
	font-size: 13px;
	font-size: clamp(11px, 5.7cqw, 20px);
}
.wd-footer__contact-big:hover,
.wd-footer__contact-big:focus-visible { color: var(--wd-tint); }

/* ---- bottom bar: copyright left, the one real legal page right, per the
   client's reference (split, not centred) ---- */
.wd-footer__bottom {
	border-top: 1px solid var(--wd-footer-rule);
	margin-top: clamp(32px, 3.4vw, 48px);
}
.wd-footer__bottom-inner {
	max-width: var(--wd-container);
	margin-inline: auto;
	padding: 20px var(--wd-gutter) 24px;
	display: flex;
	flex-wrap: wrap;
	/* Centred, at the client's ask. space-between was right when this row also
	   carried a legal link on the other side; that link came off on 2026-08-06
	   and space-between with a single child just parks it on the left. */
	justify-content: center;
	text-align: center;
	align-items: center;
	gap: 10px 24px;
	text-align: left;
}
.wd-footer__legal {
	font-size: 13.5px;
	color: var(--wd-footer-copy);
}
.wd-footer__legal:hover,
.wd-footer__legal:focus-visible { color: #fff; }
.wd-footer__copy {
	margin: 0;
	font-size: 13.5px;
	color: var(--wd-footer-copy);
}

@media (max-width: 900px) {
	.wd-footer__top { grid-template-columns: 1fr 1fr; }
	.wd-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	/* Left-aligned on mobile too, client's ask 11 Aug 2026 — the footer was
	   always meant to be left-aligned, not centred (see the "left-aligned
	   layout" note higher in this file); this query had been centring it
	   below 560px. */
	.wd-footer__top { grid-template-columns: 1fr; }
}

/* ---------- Breakpoints -------------------------------------------------- */
/* HEADER SWITCH */
@media (max-width: 1159.98px) {
	.wd-utility { display: none; }
	.wd-nav,
	.wd-header__phone { display: none; }
	.wd-burger { display: inline-flex; }
	/* .wd-nav carries the margin-left:auto that pushes everything right, but it
	   is hidden here — without this the burger sits against the logo. */
	.wd-header__actions { margin-left: auto; }
	.wd-header__inner { padding-block: 11px; }
}

/* FIXED CALL/BOOK BAR
   A phone-sized device is where a bar pinned to the bottom of the screen earns
   the room it takes: the thumb is already there and the header CTA has scrolled
   away. On a tablet it is a band across the page for no gain, so it starts
   below 768 rather than at the header switch.

   The header's own Book Appointment button comes back with it. It used to be
   hidden all the way up from 1160 because the bar was carrying the CTA — leave
   that rule where it was and the whole 768-1160 range would have no Book
   button anywhere except inside the drawer. At 768 the header needs about
   525px for logo, button and burger, so it fits with room to spare. */
@media (max-width: 767.98px) {
	.wd-mobilebar { display: flex; }
	body.wd-redesign { padding-bottom: 72px; }      /* room for the fixed bar */
	.wd-header .wd-btn--book { display: none; }     /* lives in the bottom bar */
}

/* On a narrow phone the split tightens to 3:7. "Book Appointment" is sixteen
   characters and a badge and cannot shrink; "Call" is four and a glyph, so the
   room comes from there. The label steps down with the viewport as well, which
   is what keeps the CTA inside its pill on a 320px screen — nowrap means an
   overflow here would print outside the button rather than wrap. */
@media (max-width: 479.98px) {
	.wd-mobilebar .wd-btn--outline { flex: 3 1 0; }
	.wd-mobilebar .wd-btn--accent  { flex: 7 1 0; }
	.wd-mobilebar .wd-btn { font-size: clamp(14px, 3.9vw, 16px); }
}

/* HEADER SWITCH */
@media (min-width: 1160px) {
	.wd-drawer,
	.wd-scrim { display: none !important; }
}

/* stop background scroll while the drawer is open */
body.wd-nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.wd-drawer,
	.wd-scrim,
	.wd-drawer > .wd-drawer__nav > ul > li,
	.wd-nav .sub-menu { transition-duration: .01ms !important; }
}