/* ==========================================================================
   NPCLC child theme — custom CSS
   --------------------------------------------------------------------------
   The parent theme (npclc) is stock. Every rule below is a customisation and
   lives here so a parent-theme update can never overwrite it.
   Loaded AFTER the parent stylesheet, so these rules win.
   Relative URLs are resolved from this file (assets/css/) — e.g.
   ../images/appointment-reception.webp = assets/images/appointment-reception.webp
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Appointment band
   The photo is the clinic reception (1484x540). The scrim is left-weighted and
   the copy column is capped at 560px, so the text lands on the darkened
   waiting-sofa side and the reception desk + wall sign stay clear on the right.

   The photo lives on an OVERSIZED ::before layer (top/bottom -22%) instead of
   a plain background. A 3.3:1 band with `background-size:cover` zooms the
   photo until only a thin slice survives, which cut the subject in half. The
   taller layer makes `cover` height-driven, so the photo's full height is
   visible at every width — nothing cropped — and the extra 22% top and bottom
   is the room the parallax moves through.
   The scrim is a separate ::after so the copy stays readable while the
   photo drifts underneath it.
   -------------------------------------------------------------------------- */
.appointment {
	position: relative;
	overflow: hidden;
	background-image: none;
	min-height: clamp(320px, 30vw, 520px);
	padding: 96px 0;
	text-align: left;
	display: flex;
	align-items: center;
	isolation: isolate;
}
.appointment::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -22%;
	bottom: -22%;
	background-image: url(../images/appointment-reception.webp);
	background-size: cover;
	background-position: 68% 30%;
	background-repeat: no-repeat;
	z-index: 0;
	will-change: transform;
	transform: translate3d(0, var(--ctaw-parallax-y, 0px), 0);
}
.appointment::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(100deg, rgba(10, 22, 20, 0.86) 0%, rgba(10, 22, 20, 0.66) 30%, rgba(10, 22, 20, 0.26) 60%, rgba(10, 22, 20, 0.05) 100%);
	z-index: 1;
	pointer-events: none;
}
.appointment > .container { position: relative; z-index: 2; width: 100%; }
.appointment .row { margin-left: 0; margin-right: 0; }
.appointment .row > * { max-width: 560px; }
.appointment p {
	font-size: 20px;
	line-height: 1.55;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* 1b. "Book an Appointment" — a real button.
   The parent has NO rule for .btn / .parallaxbuttondrkgreen, so this class was
   never styled. The look now comes from the single clinic-blue button in 3c, so
   the band CTA matches the rest of the site; only the wrapper reset and the
   full-bleed mobile width live here. */
.appointment .btn.parallaxbuttondrkgreen { display: inline-block; background: none; }

@media (max-width: 768px) {
	.appointment { padding: 64px 0; text-align: center; }
	.appointment::before {
		/* A phone is far narrower than a 2.75:1 photo, so cover always zooms
		   into a vertical slice. Frame the reception desk and the wall sign. */
		background-position: 70% 50%;
	}
	.appointment::after {
		background-image: linear-gradient(rgba(10, 22, 20, 0.66), rgba(10, 22, 20, 0.78));
	}
	.appointment .row > * { max-width: none; }
	.appointment p { font-size: 17px; }
	.appointment .btn.parallaxbuttondrkgreen { display: block; }
	.appointment .parallaxbuttondrkgreen a { width: 100%; }
}

/* --------------------------------------------------------------------------
   2. Footer — logo + a relevant icon on every contact line.
   The markup lives in footer.php (this child theme).
   -------------------------------------------------------------------------- */
.footer .footer-logo {
	display: block;
	max-width: 130px;
	height: auto;
}
.footer .cfoot-line {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 6px 0;
}
.footer .cfoot-line i {
	flex: none;
	width: 16px;
	margin-top: 3px;
	text-align: center;
	color: #FF9B22;
}
.footer .cfoot-line span {
	flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   3. Header, homepage sections and single-post rhythm.
   -------------------------------------------------------------------------- */

/* 3a. The old keyword H1 is out of sight but stays in the document outline. */
.np-sronly {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 3b. Header — the brand mark goes in the empty .logobox the theme already
   renders between the two nav halves, so no template copy is needed. The navy
   is sampled from the mark itself (#000065-ish), not guessed. */
.logobox {
	width: 145px;
	height: 145px;
	margin: 0 auto;
	background: url(../images/logo.png) center / contain no-repeat;
}
.slogan h3 {
	background: #000066;
}
/* The hamburger anchor toggles a #myTopnav element this template no longer has,
   so it renders as an empty box that does nothing. Hide it rather than copy
   header.php into the child just to drop one dead link. */
.navigationblockright .menu-header a.icon {
	display: none;
}

/* 3c. One button language for every call to action.
   Craft notes: a dark 1px border on a dark blue face just muddied the edge, so
   the depth now comes from the gradient itself plus a hairline top highlight
   and one soft, wide, brand-tinted shadow — a real clinic button, not a toy.
   "About our services" carries the warm accent so the two homepage CTAs are
   distinguishable at a glance. */
.btn.parallaxbuttondrk,
.btn.parallaxbuttondrkbl,
.btn.parallaxbuttondrkgreen {
	display: inline-block;
	background: none;
	text-align: center;
}
.btn.parallaxbuttondrk > a,
.btn.parallaxbuttondrkbl > a,
.btn.parallaxbuttondrkgreen > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	padding: 0 30px;
	border: 0;
	border-radius: 6px;
	background: linear-gradient(180deg, #2a5fb4 0%, #1d4a97 58%, #173f86 100%);
	color: #fff;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.2px;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(9, 26, 54, 0.28);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 2px 5px rgba(14, 38, 78, 0.22), 0 14px 26px -16px rgba(14, 38, 78, 0.5);
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}
.btn.parallaxbuttondrk > a i,
.btn.parallaxbuttondrkbl > a i,
.btn.parallaxbuttondrkgreen > a i {
	font-size: 14px;
}
/* Warm accent variant — the "About our services" CTA. */
.btn.parallaxbuttondrkbl > a {
	background: linear-gradient(180deg, #f5903f 0%, #e2701c 58%, #c9600f 100%);
	text-shadow: 0 1px 1px rgba(120, 55, 6, 0.3);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 2px 5px rgba(150, 78, 12, 0.22), 0 14px 26px -16px rgba(150, 78, 12, 0.5);
}
@media (hover: hover) {
	.btn.parallaxbuttondrk > a:hover,
	.btn.parallaxbuttondrkgreen > a:hover {
		background: linear-gradient(180deg, #336cbe 0%, #23519f 58%, #1b468e 100%);
		color: #fff;
		text-decoration: none;
		transform: translateY(-1px);
	}
	.btn.parallaxbuttondrkbl > a:hover {
		background: linear-gradient(180deg, #f79c4c 0%, #e97a20 58%, #cf6712 100%);
		color: #fff;
		text-decoration: none;
		transform: translateY(-1px);
	}
}
.btn.parallaxbuttondrk > a:active,
.btn.parallaxbuttondrkbl > a:active,
.btn.parallaxbuttondrkgreen > a:active {
	transform: translateY(1px);
	box-shadow: inset 0 1px 3px rgba(9, 26, 54, 0.35);
}

/* 3d. Appointment band — copy centred, more air underneath, and a scrim that
   still carries white text now that the words sit in the middle of the photo.
   Desktop only: the <=768px block above already centres with an even scrim. */
@media (min-width: 769px) {
	.appointment {
		padding: 96px 0 128px;
	}
	.appointment .row > * {
		max-width: 780px;
		margin: 0 auto;
	}
	.appointment p,
	.appointment .blockcontent {
		text-align: center;
	}
	/* The theme makes .blockcontent inline-block, so max-width + auto margins
	   cannot centre it — it shrink-wraps. Block level fixes the centring. */
	.appointment .blockcontent {
		display: block;
	}
	.appointment::after {
		background-image: linear-gradient(100deg, rgba(10, 22, 20, 0.82) 0%, rgba(10, 22, 20, 0.66) 45%, rgba(10, 22, 20, 0.34) 100%);
	}
}

/* 3e. The two full-width bands get distinguishable tints instead of one grey. */
.featured--media {
	background: #f9f9f9;
}
.featured--services {
	background: #f3efe8;
	border-top-color: #e7dfd2;
}

/* 3f. Testimonials band — its own tint and breathing room (footer.php). */
.npclc-testimonials {
	background: #f6f4f0;
	padding: 64px 0 14px;
}
/* The Google-review strip below it continues the same band, so the two read as
   one section instead of the second one falling back to page white. */
.npclc-googlereview {
	background: #f6f4f0;
	padding: 0 0 44px;
	text-align: center;
}
.npclc-googlereview img {
	vertical-align: middle;
}
.npclc-testimonials h3 {
	font-family: 'Lato', sans-serif;
	font-size: 23px;
	font-weight: 900;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: inherit;
	margin: 0 0 8px;
}
.npclc-testimonials p {
	font-size: 14px;
	line-height: 1.6;
	color: #6b6b6b;
	margin: 0 0 20px;
}

/* 3g. Single post — the title sat too far from the body copy, and the book
   button had no room of its own. */
#content .post h1.entry-title {
	margin: 0 0 6px;
	line-height: 1.2;
}
#content .post > hr {
	margin: 0 0 16px;
	border: 0;
	border-top: 1px solid #e6e2da;
}
#content .post .entry > *:first-child {
	margin-top: 0;
}
/* Only the breathing room here. An earlier `display: inline-block` on this ID
   outranked the shared button rule (an ID selector always beats two classes),
   which left the band's label jammed to the top of its 48px box. The button's
   display/padding must come from the one rule in 3c. */
a#book {
	margin: 26px 0 6px;
}
/* Some posts use a picture as the booking CTA — then it must sit flush. */
a#book:has(> img) {
	display: inline-block;
	min-height: 0;
	padding: 0;
}
a#book img.bel {
	display: block;
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   4. Welcome headline + the hero/slider photos.
   -------------------------------------------------------------------------- */

/* The welcome headline was maroon (#800000) — the brand navy the logo and the
   motto pill already use. */
.sun h2 span,
.sun h2 .roboto {
	color: #000066;
}

/* A hairline edge and a soft, wide shadow lift the slider photo off the page
   instead of letting it sit flat against the white. */
#metaslider_541 img,
#metaslider_541 .ms-image img,
.mslider-holder img.slider-541 {
	border-radius: 10px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 16px 36px -22px rgba(15, 23, 42, 0.55), 0 2px 6px rgba(15, 23, 42, 0.06);
}