/* =============================================================================
   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:  #05055e;
	--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; }
/* Flat 48px — client's value, 13 Aug 2026. Was clamp(40px, 4vw, 52px), which
   grew the mark on a wide screen; one height reads the same everywhere. The
   narrow-screen rule further down still steps it to 40px. */
.wd-header__brand img { height: 48px; 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;
	/* Client's colour, 11 Aug 2026. Set here rather than on --wd-body, which
	   also paints every paragraph on the site. The home page's transparent
	   header keeps its own white treatment — that rule is more specific and
	   sits above this one. */
	color: #2d3266;
	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;
	/* The dropdown items match the nav above them — same menu, one level down. */
	color: #2d3266;
	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-primary);
}
/* 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; }
	/* The mark keeps its full height through this range — client's value,
	   13 Aug 2026. The nav is tightened above instead, which is where the room
	   actually comes from. */
	.wd-header__brand img { height: 48px; }
	.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-primary);
	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; }

/* Client's values, 11 Aug 2026 — tighter rows, so more of the menu is on screen
   without scrolling. No media query needed: the drawer is the mobile menu and
   nothing else, hidden outright above 1160px (see the rule near the end of this
   file), so these only ever apply there. */
.wd-drawer a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 14px;
	border-radius: 11px;
	font-size: 17px;
	font-weight: 500;
	/* Same colour as the desktop nav — it is the same menu, just stacked. */
	color: #2d3266;
	min-height: 46px;
}
/* Hover only where there is a pointer that can hover. On a touch screen the
   tapped element keeps :hover until something else is tapped, so opening the
   About Us dropdown left that row washed blue — indistinguishable from the
   current-page item, which is the only row that should carry the wash.
   Client's report, 11 Aug 2026. Keyboard focus keeps it either way. */
@media (hover: hover) and (pointer: fine) {
	.wd-drawer a:hover { background: #dbe5ff; color: var(--wd-primary); }
}
.wd-drawer a:focus-visible { background: #dbe5ff; color: var(--wd-primary); }

/* Air between the rows. Each row is a rounded pill that fills when it is the
   current page, hovered or tapped — and the rows sat edge to edge, so a filled
   one ran straight into the row above and below it and the two read as a single
   joined block. Client's report, 11 Aug, on the Office page, where the current
   item sits directly under its open parent. Four pixels is enough to separate
   the pills without loosening the list. */
.wd-drawer__nav li + li { margin-top: 4px; }
.wd-drawer .menu-item-has-children.is-open > .sub-menu { margin-top: 4px; }

/* `.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-primary);
	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);
}
/* Both drawer buttons at the same height as a menu row above them — client's
   ask, 11 Aug 2026. They were the two tallest things in the panel and
   mismatched with each other: the outline one inherited .wd-btn--outline's
   54px, while the accent one measured 48px off its 38px badge. 46px is the
   min-height the nav rows use, so the whole drawer now steps evenly. */
.wd-drawer .wd-btn--outline {
	color: var(--wd-accent);
	background: #fff;
	border-radius: 999px;
	padding: 0 30px;
	height: 46px;
}
/* 4 + 38 + 4 — the badge keeps its size, the padding around it comes in. */
.wd-drawer .wd-btn--accent { padding-block: 4px; }
.wd-drawer .wd-btn--outline:hover,
.wd-drawer .wd-btn--outline:focus-visible { background: var(--wd-accent); color: #fff; }
/* The parent marks itself too. On /guelph-dentist-in-guelph/ the drawer showed
   Office filled but About Us plain, so the section the reader was in did not
   read as open — WordPress puts current-menu-ancestor / current-menu-parent on
   that <li>, and only current-menu-item was being styled. Client's ask,
   13 Aug 2026. */
.wd-drawer .current-menu-item > a,
.wd-drawer .current-menu-ancestor > a,
.wd-drawer .current-menu-parent > a,
.wd-drawer .current_page_ancestor > 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;
	transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
	/* Client's values, 13 Aug 2026: the .55 opacity and the -3px nudge come off,
	   the closed-state rotate stays so the mark reads as a chevron pointing
	   down, and position lets the open state offset it against the label. */
	position: relative;
	transform: rotate(45deg);
	/* Pulled up so the rotated square sits on the label's optical centre.
	   Client's value, 13 Aug 2026. */
	top: -4px;
}
.wd-drawer .menu-item-has-children.is-open > a::after { transform: rotate(225deg); opacity: 1; top: 2px; }

.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; }
/* The sub-menu items take the nav colour too — they are the same menu one
   level down, and left on --wd-body-2 they were a visibly different navy from
   the parents above them. Client's ask, 11 Aug 2026. */
.wd-drawer .sub-menu a { font-size: 15.5px; color: #2d3266; 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;
	/* The last column carries the phone number, the email address and the
	   Facebook card, which is the widest thing in the row — at 1.1fr the card's
	   panel had to wrap "Woolwich Dental Group" onto three lines and crowd the
	   Follow button. Widened to 1.5fr with a 260px floor, taken from the two
	   link columns, whose items are short enough to give it up. Client's ask,
	   11 Aug 2026. */
	grid-template-columns: minmax(min(100%, 260px), 1.5fr) repeat(2, minmax(min(100%, 130px), .9fr)) minmax(min(100%, 260px), 1.5fr);
	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;
	margin-top: 20px;
	padding: 5px 5px 5px 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);
	/* Sized to match every other accent button on the site — client's ask,
	   11 Aug 2026: this one read as a different component. The colours stay its
	   own (white pill, navy label — a navy pill vanishes into the footer's navy
	   gradient, see the note above); only the metrics are brought into line:
	   15.5px/500 type, 16px of lead-in padding, and the 38px badge below, which
	   is what makes the height 5 + 38 + 5 = 48, the same as the header's. */
	font-weight: 600;
	font-size: 15.8px;
	padding-left: 16px;
	gap: 10px;
}
/* The label as its own box, the same as the buttons in the mobile bar. Written
   into the markup rather than left as a bare text node so the newlines around
   it in footer.php cannot show up as stray spacing. */
.wd-footer__brand-cta .wd-footer__brand-cta-label {
	line-height: 1;
	/* Nudged up two pixels against the badge — client's value, 11 Aug 2026. */
	position: relative;
	top: 0px;
}
/* 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;
	/* 38px, the same badge the header and the service pages carry. With the
	   5px of padding above and below it, that is what sets the button to 48px. */
	width: 38px;
	height: 38px;
	border-radius: 50%;
	/* Inverted with the pill: navy disc on white, rather than white on navy.
	   The deeper navy the buttons took on 11 Aug — client's value. */
	background: #05055e;
	flex: none;
}
.wd-footer__brand-cta-arrow::before {
	content: "";
	display: block;
	/* Kept to the share of the disc it had at 30px (13/30). */
	width: 16px;
	height: 16px;
	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 the container width, 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;
	/* White — client's ask, 11 Aug 2026. --wd-footer-copy was a muted tone set
	   for the old flat footer; against the navy-to-blue gradient the line was
	   close enough to the ground behind it to read as disabled. */
	color: #fff;
}

/* Below 1040px the four columns stop fitting: the two link columns squeeze to
   about 130px and the contact column loses the width its Facebook card needs.
   The brand block takes the full width and the remaining three wrap into the
   two-column grid on their own. Client's ask, 11 Aug 2026 — raised from the
   900px this break used to sit at, because the squeeze starts well before it. */
@media (max-width: 1040px) {
	/* The brand block on a row of its own, the rest two-up under it. Client's
	   value, 11 Aug 2026. */
	.wd-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wd-footer__brand { grid-column: 1 / -1; }

	/* The brand block spans the row here, so its copy is let out to the full
	   width with it. The 40ch cap that keeps the paragraph readable in a narrow
	   column just leaves a long empty gap once the column is the whole footer.
	   Client's ask, 11 Aug 2026. */
	.wd-footer__brand-name,
	.wd-footer__brand-desc { max-width: 100%; }
}
/* Below 991px the contact column takes the full width of its own row — the
   phone number, the email address and the Facebook card need more than a third
   of the footer once the row is that narrow. The two link columns beside it are
   left as they are. Client's ask, 11 Aug 2026. */
@media (max-width: 991px) {
	.wd-footer__col--contact { grid-column: 1 / -1; }
	/* It spans the row but does not stretch across it — the Facebook card holds
	   its shape at 410px rather than becoming a very wide, shallow banner.
	   Client's value, 11 Aug 2026. */
	.wd-footer__col.wd-footer__col--contact { max-width: 410px; }
}

@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); }
	/* Client's value, 13 Aug 2026. Written here rather than in the narrow-screen
	   block further up, which sets 40px — this comes later, so on a phone the
	   mark keeps a bit more of its height. */
	.wd-header__brand img { height: 46px; }
}

/* 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; }
}