/*
Theme Name: Stag Lane Dental Centre
Theme URI: https://staglanedental.co.uk
Author: Digimax Dental
Author URI: https://digimax.dental
Description: Custom theme for Stag Lane Dental Centre, Edgware. Content is managed through ACF (Options, Developer and per-page field groups).
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: stag-lane-dental-centre
*/

/*
 * The design lives in css/stylesheet.css (and the vendor files beside it).
 * This file only holds the WordPress-specific bits the static template never needed.
 */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #fff;
	clip: auto !important;
	clip-path: none;
	color: #222941;
	display: block;
	font-size: 14px;
	height: auto;
	left: 5px;
	padding: 15px 23px 14px;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* WordPress prints width/height attributes on images (prevents layout shift). The template's
   CSS only sets widths, so keep the proportions – class-based height rules still win. */
img { height: auto; }

/* <main> wrapper (not in the static template) – behave like the floated full-width sections around it */
.site-main { width: 100%; float: left; }

.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; margin: 6px 0 0; }

/* The admin bar pushes the fixed sticky menu down when logged in */
.admin-bar .float-panel.fixed { top: 32px !important; }
@media screen and (max-width: 782px) {
	.admin-bar .float-panel.fixed { top: 46px !important; }
}

/* -------------------------------------------------------------------------------------------
 * Accessibility (WCAG 2.2 AA)
 * ---------------------------------------------------------------------------------------- */

/* The template's reset removes every outline – restore a visible focus ring for keyboard
   users only (:focus-visible), so mouse/touch users see the design unchanged. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.select-selected:focus-visible,
.select-items div:focus-visible {
	outline: 3px solid #cbb16a !important;
	outline-offset: 3px;
	box-shadow: 0 0 0 5px #222941;
}

/* Skip link target (focused programmatically – no ring around the whole page) */
#main:focus,
#main:focus-visible { outline: none !important; box-shadow: none; }

/* Menuzord opens dropdowns on mouse hover only – open them for keyboard focus too. */
.menuzord:not(.menuzord-responsive) .menuzord-menu > li:focus-within > ul.dropdown,
.menuzord:not(.menuzord-responsive) .menuzord-menu > li:focus-within > .megamenu,
.menuzord:not(.menuzord-responsive) .menuzord-menu ul.dropdown li:focus-within > ul.dropdown {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Respect "reduce motion": stop the reveal / zoom / flash animations. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
	.wow { visibility: visible !important; }
}

/* -------------------------------------------------------------------------------------------
 * Blog pager (.paiger-wrapp) – WordPress marks the current page itself; the template
 * hard-coded the first number as current.
 * ---------------------------------------------------------------------------------------- */
.paiger-wrapp .paiger-col1 .paiger-row1 li:first-child a { color: #2f2f2f; }
.paiger-wrapp .paiger-col1 .paiger-row1 li .page-numbers { font-size: 13px; font-weight: 600; letter-spacing: 0.26px; color: #2f2f2f; display: inline-block; }
.paiger-wrapp .paiger-col1 .paiger-row1 li a.page-numbers:hover,
.paiger-wrapp .paiger-col1 .paiger-row1 li .page-numbers.current { color: #b99155; }
.paiger-wrapp .paiger-col1 .paiger-row1 { width: auto; margin: 0 16px; }

/* Smile gallery: lists that replaced the template's divs keep the design's look */
.galler-wrapp .galler-row2,
.galler-wrapp .galler-row2 li { list-style: none; margin: 0; padding: 0; }
.galler-wrapp .galler-row2 li.galler-col3 { margin: 0 0 40px; }
.galler-wrapp .galler-row2 li.galler-col3:last-child { margin: 0; }
.gallein-wrapp figure.gallein-row1 { margin: 0; }

/* -------------------------------------------------------------------------------------------
 * Image slots – proportions are enforced server-side (hard crops, inc/setup.php). This is
 * the safety net for anything that can't be cropped (SVG, failed resize): same ratio, covered.
 * ---------------------------------------------------------------------------------------- */
.about-row4 img, .blogin-row1 img, .team-row2 img, .treatments-row8 img, .instagram-row1 img,
.bloger-bar1 img, .bloger-bar3 img, .bloger2-row1 img, .common-row1 img { aspect-ratio: 1 / 1; object-fit: cover; }
.dental-row5 img, .treatments-row3 img, .treatments-row6 img { aspect-ratio: 656 / 348; object-fit: cover; }
.practice-col2 .grayscale-row1 img { aspect-ratio: 1532 / 800; object-fit: cover; }
.galler-row3 img, .gallein-bar1 img { aspect-ratio: 2 / 1; object-fit: cover; }
.gallery-row2 img { aspect-ratio: 576 / 298; object-fit: cover; }
.blogin2-row1 img { aspect-ratio: 654 / 368; object-fit: cover; }
.gallein-row3 img { aspect-ratio: 586 / 374; object-fit: cover; }

/* Blog images: real photos are square – round them like the design (the template's sample
   images had the circle baked in). The crops (sldc-square / sldc-avatar) keep them 1:1. */
.common-wrapp .common-col1 .common-row1 img,
.bloger-wrapp .bloger-bar1 img,
.bloger-wrapp .bloger-bar3 img,
.bloger2-wrapp .bloger2-row1 img,
.blogin-wrapp .blogin-row1 img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Page sections (template-sections.php): the template's sample photos had their circles and
   rounded corners baked into the PNGs – real photos are rectangles, so shape them here. */
.approach-wrapp .approach-row1 img,
.journey2-row2 img, .journey3-row2 img,
.thepractice-wrapp .thepractice-row2 img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }
.thepractice-wrapp .thepractice-row1 img { border-radius: 20px; aspect-ratio: 2400 / 1140; object-fit: cover; }
.thepractice1-col1 .grayscale-row1 img { aspect-ratio: 778 / 436; }

/* Handwritten signature in content areas (Personal message section): the footer's drawn
   signature (css/stylesheet.css "Footer signature", js/main.js) in navy, with a navy pen tip.
   The design's .approach-row3 span rule (sized for the old image) is undone for its spans. */
.approach-signature > div { font-family: 'talesiansignature-regular-font'; font-size: 23px; font-weight: 400; line-height: 1.6; color: #222941; margin: 0; }
.approach-wrapp .approach-col1 .approach-signature .signature-write,
.common2-wrapp .approach-row3.approach-signature .signature-write { display: inline-block; position: relative; vertical-align: top; width: auto; float: none; }
.approach-wrapp .approach-col1 .approach-signature .signature-ink,
.common2-wrapp .approach-row3.approach-signature .signature-ink { width: auto; float: none; }
.approach-wrapp .approach-col1 .approach-signature .signature-svg,
.common2-wrapp .approach-row3.approach-signature .signature-svg { width: 10.913em; float: none; display: block; }
.common2-wrapp .approach-row3.approach-signature { margin: 10px 0 0; }
.approach-signature .sig-nib-core { fill: #222941; }
.approach-signature .sig-nib-glow { fill: rgba(34, 41, 65, 0.2); }

/* Team / Treatment templates ---------------------------------------------------------------
   Lists typed in the editors (fees, FAQ answers, text blocks) get the design's gold ticks, like
   its hand-coded .abouts-bar1 lists. */
.approach2-wrapp .approach-row2 ul,
.faq-wrapp .accordion .content ul,
.invis-faq-wrapp .accordion .content ul,
.common2-wrapp .common2-col1 ul,
.common-wrapp .common-row2 ul:not(.header-row2),
.treatin1-wrapp ul:not(.abouts-bar1),
.implants1-wrapp .implants1-col3 ul { width: 100%; float: left; margin: 0 0 25px; }
.approach2-wrapp .approach-row2 ul li,
.faq-wrapp .accordion .content ul li,
.invis-faq-wrapp .accordion .content ul li,
.common2-wrapp .common2-col1 ul li,
.common-wrapp .common-row2 ul:not(.header-row2) li,
.treatin1-wrapp ul:not(.abouts-bar1) li,
.implants1-wrapp .implants1-col3 ul li { width: 100%; font-size: 15px; line-height: 2; font-weight: 400; display: block; padding-left: 30px; position: relative; text-align: left; }
.approach2-wrapp .approach-row2 ul li::after,
.faq-wrapp .accordion .content ul li::after,
.invis-faq-wrapp .accordion .content ul li::after,
.common2-wrapp .common2-col1 ul li::after,
.common-wrapp .common-row2 ul:not(.header-row2) li::after,
.treatin1-wrapp ul:not(.abouts-bar1) li::after,
.implants1-wrapp .implants1-col3 ul li::after { content: ""; width: 17px; padding: 0 0 17px; position: absolute; top: 5px; left: 0; background: url(images/17-ckeck.svg) no-repeat center / cover; }
.approach2-wrapp .approach-row2 ul li strong, .faq-wrapp .accordion .content ul li strong { font-weight: 600; }
.common2-wrapp .common2-after { margin-top: 0; }

/* Listings: cards are <li>s; "Load more" is a <button>. */
.teamer-wrapp .teamer-col1[hidden], .teamer-wrapp .teamer-col3[hidden] { display: none; }
.teamer-wrapp .sldc-load-more { font-family: inherit; cursor: pointer; }

/* Comparison table: tab buttons on phones (were links). */
.invis-compare-wrapp .tabbed-content .tabs .commontab { font-family: inherit; }
.invis-compare-wrapp .tabbed-content .item[hidden] { display: none; }

/* Image slots of the template sections (crops are exact; this keeps the ratio if an SVG or a
   failed resize slips through). */
.fix-wrapp .fix-thumb img { width: 100%; aspect-ratio: 876 / 561; object-fit: cover; }
.referrals2-row1 img, .implants1-row1 img, .teamer-row1 img, .implants2-row2 img { aspect-ratio: 1 / 1; object-fit: cover; }
.needlarge img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Blog posts without a featured image: no image block, the text takes the image's place.
   (The design positions the text absolutely against the image's height.) */
.bloger-wrapp .bloger-col1 .bloger-row1.no-image .bloger-bar2,
.bloger-wrapp .bloger-col2.no-image .bloger-bar4,
.blogin-wrapp .common-col1.no-image .common-row2 { width: 100%; position: relative; top: auto; transform: none; float: none; }
.bloger2-wrapp .bloger2-col1.no-image .bloger2-col2 .bloger2-row2 { width: 100%; float: none; }

/* Finance calculator: the provider's embed fills the navy panel. */
.calculator-wrapp .sldc-calculator { width: 100%; float: left; margin: 20px 0 0; }
.calculator-wrapp .sldc-calculator iframe { width: 100%; max-width: 100%; border: 0; border-radius: 10px; background: #fff; }

/* Referrals: "Find out more" opens the text (role="button", aria-expanded) and the text ends with a
   link to the clinician's profile. Editor-only reminder while the referral form is missing. */
.referrals2-wrapp .sldc-profile-link { color: #b99155; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.sldc-editor-note { margin: 40px 0; padding: 16px 20px; border: 1px dashed #b99155; border-radius: 10px; color: #222941; text-align: center; }

/* Testimonials video wall: rows of three video cards (the design's slider cards, 22px apart);
   "Load more" adds rows. Two per row on small tablets, one on phones. */
.testi-wrapp .sldc-video-grid { list-style: none; margin: 0 0 65px; padding: 0 11px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.testi-wrapp .sldc-video-grid > li { min-width: 0; }
.testi-wrapp .sldc-video-grid > li[hidden] { display: none; }
.testi-wrapp .sldc-video-grid .review-card { min-width: 0; }
@media screen and (max-width: 767px) { .testi-wrapp .sldc-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 40px; } }
@media screen and (max-width: 480px) { .testi-wrapp .sldc-video-grid { grid-template-columns: minmax(0, 1fr); } }
/* Reviews grid / vacancy lists are real lists now. */
.testi2-wrapp .testi2-col1 { list-style: none; margin: 0; } /* Side padding stays the design's 100px */
.testi2-wrapp .testi2-col1 > li[hidden] { display: none; }

/* Page not found (404.php) */
.sldc-404 .full-box { margin: 10px 0 0; }
.sldc-404 .full-box .journey-btn1 { float: none; margin: 6px 4px 0; }

/* "Discover our treatments" cards (include/treatments-slider.php): the image, the name and the
   text each link to the treatment (the name is the keyboard stop). Hovering anywhere on the card
   plays the image and arrow hover effects. The links keep the design's colours. */
.treatments-wrapp .treatments-col9 .sldc-card-link,
.treatments-wrapp .treatments-col9 .sldc-card-text { color: inherit; text-decoration: none; }
.treatments-wrapp .treatments-col9 a.grayscale-row1,
.treatments-wrapp .treatments-col9 .sldc-card-text { display: block; }
@media (hover: hover) {
	.treatments-wrapp .treatments-col9:hover .grayscale-row1::after { opacity: 0.4; }
	.treatments-wrapp .treatments-col9:hover .grayscale-row1 img { transform: scale(1.15); }
	.treatments-wrapp .treatments-col9:hover .circle-effects1 img { opacity: 0; }
	.treatments-wrapp .treatments-col9:hover .circle-effects1 .circle-row1 { opacity: 1; visibility: visible; bottom: 0; }
	.treatments-wrapp .treatments-col9:hover .circle-effects1 .circle-row1 img { opacity: 1; }
}

/* Standard pages (page.php – legal pages and any page without a template): the editor's
   content in a readable column, in the design's type. */
.sldc-page { text-align: left; padding: 60px 0 160px; }
.sldc-page .sldc-page-content { max-width: 960px; margin: 0 auto; color: #2f2f2f; font-size: 15px; line-height: 1.7; }
.sldc-page .sldc-page-content > *:first-child { margin-top: 0; }
.sldc-page .sldc-page-content h2, .sldc-page .sldc-page-content h3, .sldc-page .sldc-page-content h4, .sldc-page .sldc-page-content h5 { text-align: left; }
.sldc-page .sldc-page-content h2 { font-size: 38px; font-weight: 400; line-height: 1.18; color: #222941; text-transform: none; letter-spacing: normal; margin: 0 0 28px; }
.sldc-page .sldc-page-content h2 strong { font-weight: 600; }
.sldc-page .sldc-page-content h3 { font-size: 24px; font-weight: 600; line-height: 1.3; color: #222941; margin: 40px 0 14px; }
.sldc-page .sldc-page-content h4 { font-size: 19px; font-weight: 600; line-height: 1.35; color: #222941; margin: 40px 0 12px; }
.sldc-page .sldc-page-content p { float: none; font-size: 15px; line-height: 1.7; color: #2f2f2f; margin: 0 0 16px; }
.sldc-page .sldc-page-content strong { font-weight: 600; color: #222941; }
.sldc-page .sldc-page-content a { color: #b99155; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.sldc-page .sldc-page-content a:hover { color: #222941; }
.sldc-page .sldc-page-content ul,
.sldc-page .sldc-page-content ol { margin: 0 0 20px; padding: 0 0 0 24px; }
.sldc-page .sldc-page-content ul li { list-style: disc; margin: 0 0 8px; padding-left: 4px; }
.sldc-page .sldc-page-content ol li { list-style: decimal; margin: 0 0 8px; padding-left: 4px; }
.sldc-page .sldc-page-content li::marker { color: #b99155; }
.sldc-page .sldc-page-content table { width: 100%; margin: 10px 0 28px; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.sldc-page .sldc-page-content th,
.sldc-page .sldc-page-content td { padding: 12px 14px; border: 1px solid rgba(47, 47, 47, 0.2); vertical-align: top; text-align: left; min-width: 160px; }
.sldc-page .sldc-page-content th { background: #222941; color: #ffffff; font-weight: 600; }
.sldc-page .sldc-page-content th strong { color: #ffffff; }
.sldc-page .sldc-page-content [id^="point-"] { scroll-margin-top: 110px; } /* Contents links land below the sticky menu */
@media screen and (max-width: 767px) {
	.sldc-page { padding: 30px 0 90px; }
	.sldc-page .sldc-page-content h2 { font-size: 30px; }
	.sldc-page .sldc-page-content h3 { font-size: 21px; }
	.sldc-page .sldc-page-content h4 { font-size: 18px; margin-top: 30px; }
}

/* -------------------------------------------------------------------------------------------
 * Maps – interactive Google map (drag, zoom, fullscreen) under the practice pin
 * ---------------------------------------------------------------------------------------- */

/* The design froze the map (pointer-events:none on the iframe); visitors can now use it */
.map-embed iframe { pointer-events: auto; }

/* The Google / Apple Maps buttons sit in a full-width strip over the map – only the buttons
   take clicks, so the map can still be dragged either side of them */
.map-embed ~ .address-btn-row1,
.address-row1 .address-btn-row1,
.location-row2 .address-btn-row1,
.opening-col2 .address-btn-row1 { pointer-events: none; }
.address-btn-row1 .address-btn1 { pointer-events: auto; }

/* The SD pin is drawn over the map, so it cannot move with it: once the visitor starts using
   the map (theme.js), it fades out and Google's own marker – exactly underneath it – stays on
   the practice. */
.map-embed .map-pin { transition: opacity 0.3s ease, visibility 0s linear 0s; }
.map-embed.is-map-active:not(.is-js-map) .map-pin { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }

/* Map with an API key (theme.js): a real Google map in the theme's dark style – no colour
   filters, no tint, no cropping – and the pin attached to the practice as a map overlay
   (theme.js sets its left/top; the margins put the tip of the pin on the practice). */
.map-embed.is-js-map::after { display: none; }
.map-embed .sldc-gmap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.map-embed.is-js-map .map-pin { top: 50%; }
.map-embed.is-js-map:not(.is-map-ready) .map-pin { visibility: hidden; }
.sldc-gmap .map-pin { margin: -84px 0 0 -32px; position: absolute; }

/* Practice logo in the pin: the gold SD symbol (SVG, sharp at any size), centred in the pin's
   round head – the head is a 62px circle centred 32px from the top of the 64 × 84 pin. */
.map-pin .map-pin__marker img,
.location-wrapp .location-col1 .map-pin__marker img { width: 40px; height: 40px; padding: 0; top: 12px; left: 12px; border-radius: 0; background: none; object-fit: contain; }

/* -------------------------------------------------------------------------------------------
 * Page speed – everything above the fold looks right before any JavaScript runs
 * (LiteSpeed "Delay JS" holds the scripts until the visitor interacts; PageSpeed never does).
 * ---------------------------------------------------------------------------------------- */

/* Homepage hero video: a plain iframe (include/home/banner.php) covering the design's
   .jarallax-video box at any size; the design's dark overlay (.jarallax-video:after, z-index -9)
   sits over it, the slides above both. Navy until the first frame arrives. */
.sldc-hero-video { z-index: 0; background: #222941; }
.sldc-hero-video__frame { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -10; overflow: hidden; container-type: size; }
.sldc-hero-video__frame iframe { width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); border: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
	.sldc-hero-video__frame { display: none; }
}

/* Welcome slides: Owl Carousel hides the carousel until it is built – show the first slide. */
.welcome-slides:not(.owl-loaded) { display: block; }
.welcome-slides:not(.owl-loaded) > .single-welcome-slide + .single-welcome-slide { display: none; }

/* Inner banner: flexslider hides every slide until it runs – show the one the inline script
   picked (include/flexslider.php). */
.flexslider .slides > li.is-start { display: block; }

/* Highlights ticker under the banner: one row (as Slick lays it out) until Slick is built. */
.about-col1 .slider:not(.slick-initialized) { display: flex; flex-wrap: nowrap; overflow: hidden; }
.about-col1 .slider:not(.slick-initialized) > div { flex: none; margin: 0 32px 0 0; }
.about-col1 .slider:not(.slick-initialized) .about-row1 { width: auto; float: none; white-space: nowrap; }
@media (max-width: 767px) {
	.about-col1 .slider:not(.slick-initialized) { justify-content: center; }
	.about-col1 .slider:not(.slick-initialized) > div { margin: 0; }
	.about-col1 .slider:not(.slick-initialized) > div + div { display: none; }
}

/* Highlights ticker (include/about-slider.php – under the inner banner, homepage "Why choose",
   Scrolling highlights section): the items slide continuously, so one is always cut by the
   edge – fade the edges instead of slicing the text. The left edge fades only once Slick is
   moving (before that the row starts flush left). Phones show whole, centred items. */
@media (min-width: 768px) {
	.about-col1 .slider.autoplay {
		--ticker-fade: clamp(40px, 7%, 110px);
		-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--ticker-fade)), transparent 100%);
		mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--ticker-fade)), transparent 100%);
	}
	.about-col1 .slider.autoplay.slick-initialized {
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ticker-fade), #000 calc(100% - var(--ticker-fade)), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 var(--ticker-fade), #000 calc(100% - var(--ticker-fade)), transparent 100%);
	}
}