/*
 * Base styles for every clinic site, whatever the look. Mobile first.
 *
 * Uses only the design tokens printed by inc/tokens.php:
 *   colours  --bg --surface --ink --muted --brand --on-brand --accent --on-accent
 *            --accent-2 --sun --primary --on-primary
 *   fonts    --fh (heading) --fb (body) --fs (handwritten) --hw (heading weight) --hls (heading spacing)
 * and the look variables set in look-c.css / look-f.css:
 *            --btn-r --card-r --btn-shadow --hdr-bg --u-bg --u-ink --band-bg --band-ink
 *
 * Never hard-code a brand colour here.
 */

/* ---------- Worked-out colours and defaults ---------- */

:root {
	--line: color-mix(in srgb, var(--ink) 14%, transparent);
	--tint: color-mix(in srgb, var(--ink) 6%, var(--surface));

	/* Look defaults (look-c.css / look-f.css override these). */
	--btn-r: 12px;
	--card-r: 16px;
	--btn-shadow: none;
	--hdr-bg: var(--surface);
	--u-bg: var(--deep, var(--ink));
	--u-ink: #fff;
	--band-bg: var(--brand);
	--band-ink: var(--on-brand);

	/* Round phone and menu buttons, and the logo colour (looks override these). */
	--m-r: 12px;
	--m-bg: var(--tint);
	--m-ink: var(--brand);
	--logo-ink: var(--brand);
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	/* Nothing may widen the page sideways: on iPhone Safari that makes the layout wider than the screen and strands fixed bars. clip (not hidden) keeps the sticky header working. */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--fb);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
	font-family: var(--fh);
	font-weight: var(--hw);
	letter-spacing: var(--hls);
	line-height: 1.15;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

p { margin: 0 0 1em; }

a { color: var(--brand-text, var(--brand)); }

/* ---------- Layout ---------- */

.container {
	width: min(100% - 2 * var(--cx, 1rem), var(--cw, 72rem));
	margin-inline: auto;
}

.site-main { min-height: 60vh; }

.entry { padding-block: 2.5rem; }

.entry__content > * { max-width: 70ch; }

/* ---------- The one button style: .button (+ .button--secondary) ---------- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 50px;
	padding: 0 22px;
	border: 2px solid transparent;
	border-radius: var(--btn-r);
	box-shadow: var(--btn-shadow);
	background: var(--primary);
	color: var(--on-primary);
	font-family: var(--fb);
	font-size: 1rem;
	font-weight: var(--wb, 700);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.button--secondary {
	background: transparent;
	border-color: currentColor;
	color: var(--ink);
}

/* Emergency call: outlined in the alert colour. */
.button--alert {
	background: transparent;
	border-color: var(--accent-2);
	color: var(--accent-2);
}

/* Hover: a lighter or darker button colour worked out from the palette (--primary-hover), so it reads on light AND dark palettes. */
.button:not(.button--secondary):not(.button--alert):hover,
.button:not(.button--secondary):not(.button--alert):focus-visible { background: var(--primary-hover, var(--primary)); }
.button--secondary:hover,
.button--secondary:focus-visible { background: color-mix(in srgb, currentcolor 9%, transparent); }
.button--alert:hover,
.button--alert:focus-visible { background: color-mix(in srgb, var(--accent-2) 12%, transparent); }

/* Button shape and shadow options (override the look). "body." makes these win over look-*.css. */
body.btn-shape-pill   { --btn-r: 999px; }
body.btn-shape-round  { --btn-r: 12px; }
body.btn-shape-square { --btn-r: 3px; }

body.btn-shadow-none { --btn-shadow: none; }
body.btn-shadow-soft { --btn-shadow: 0 10px 22px -10px color-mix(in srgb, var(--ink) 60%, transparent); }
body.btn-shadow-hard .button {
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
	transition: transform 0.08s, box-shadow 0.08s;
}
body.btn-shadow-hard .button:active { transform: translate(3px, 3px); box-shadow: none; }
body.btn-shadow-hard .button--secondary { background: var(--surface); color: var(--ink); }

/* ---------- Accessibility ---------- */

.skip-link {
	position: absolute;
	left: 1rem;
	top: -10rem;
	z-index: 100;
	padding: 0.5rem 1rem;
	background: var(--surface);
	color: var(--ink);
}

.skip-link:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Icons: inline SVGs from inc/icons.php. */
.ico { width: 1.25em; height: 1.25em; flex: none; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Hover effects (Clinic → Look and feel → Buttons: Button hover, Card hover) ---------- */
/* Body classes hov-btn-lift|darken|glow|none and hov-card-lift|outline|none. Default: a slight lift. */

:is(.button, .m-btn, .chat__fab) { transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease; }
body:not(.hov-card-none) :is(.services__card, .services__tile--link, .team__member, .promotion__card, .faqs__item, .contact__card) { transition: transform 0.18s ease, box-shadow 0.18s ease; }

@media (hover: hover) {
	body.hov-btn-lift :is(.button, .m-btn, .chat__fab):hover { transform: translateY(-2px); box-shadow: var(--btn-shadow), 0 10px 18px -10px color-mix(in srgb, var(--ink) 50%, transparent); }
	body.hov-btn-glow :is(.button, .m-btn, .chat__fab):hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 28%, transparent); }
	body.hov-btn-none .button:not(.button--secondary):not(.button--alert):hover { background: var(--primary); }

	body.hov-card-lift :is(.services__card, .services__tile--link, .team__member, .promotion__card, .faqs__item, .contact__card):hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--ink) 45%, transparent); }
	body.hov-card-outline :is(.services__card, .services__tile--link, .team__member, .promotion__card, .faqs__item, .contact__card):hover { box-shadow: 0 0 0 2px var(--brand); }
}

@media (prefers-reduced-motion: reduce) {
	:is(.button, .m-btn, .chat__fab, .services__card, .team__member, .promotion__card, .faqs__item, .contact__card) { transition: none; }
	body :is(.button, .m-btn, .chat__fab, .services__card, .team__member, .promotion__card, .faqs__item, .contact__card):hover { transform: none; }
}

/* ---------- Decoration: coloured circles or blurred gradient glows (hero, banner) ---------- */
/* apiam_decor() prints .decor as the first child of the section. Colours follow the clinic's palette. */

.decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.decor i { position: absolute; display: block; border-radius: 50%; }
.decor ~ .container { position: relative; z-index: 1; }

/* Circles: soft, flat discs in the accent, brand and highlight colours. */
.decor--circles i:nth-child(1) { top: -12%; right: -6%; width: min(46vw, 460px); aspect-ratio: 1; background: color-mix(in srgb, var(--accent) 20%, transparent); }
.decor--circles i:nth-child(2) { bottom: -22%; left: -8%; width: min(38vw, 380px); aspect-ratio: 1; background: color-mix(in srgb, var(--brand) 12%, transparent); }
.decor--circles i:nth-child(3) { top: 30%; right: 26%; width: min(14vw, 140px); aspect-ratio: 1; background: var(--sun); opacity: 0.8; }

/* Glow: large blurred gradients that melt into the page. */
.decor--glow i { filter: blur(70px); }
.decor--glow i:nth-child(1) { top: -25%; right: -10%; width: min(60vw, 620px); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%); }
.decor--glow i:nth-child(2) { bottom: -35%; left: -12%; width: min(55vw, 560px); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 38%, transparent), transparent 70%); }
.decor--glow i:nth-child(3) { top: 10%; left: 38%; width: min(34vw, 340px); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--sun) 90%, transparent), transparent 70%); }

/* ---------- Watermark: a faint SVG or PNG in a corner of the page, footer or a section ---------- */
/* Set under Look and feel → Watermark. Variables --wm-img --wm-op --wm-w (--wm-color when tinted). The picture sits
   behind the content (isolation + z-index -1), never over it, and never takes clicks. */

.has-wm,
.has-bgimg,
body.wm-page .site-main,
body.wm-footer .ftr { position: relative; isolation: isolate; }

.has-wm::after,
body.wm-page .site-main::after,
body.wm-footer .ftr::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: 0;
	bottom: 0;
	width: min(var(--wm-w, 260px), 60%);
	aspect-ratio: 1;
	background: var(--wm-img) no-repeat right bottom / contain;
	opacity: var(--wm-op, 0.1);
	pointer-events: none;
}

/* Tinted: the picture's outline is cut out of a block of the chosen colour. */
body.wm-tint .has-wm::after,
body.wm-tint.wm-page .site-main::after,
body.wm-tint.wm-footer .ftr::after {
	background: var(--wm-color, currentcolor);
	-webkit-mask: var(--wm-img) no-repeat right bottom / contain;
	mask: var(--wm-img) no-repeat right bottom / contain;
}

/* Corners. */
body.wm-left.wm-page .site-main::after,
body.wm-left.wm-footer .ftr::after,
.has-wm.wm-bl::after { right: auto; left: 0; background-position: left bottom; -webkit-mask-position: left bottom; mask-position: left bottom; }
.has-wm.wm-tr::after { bottom: auto; top: 0; background-position: right top; -webkit-mask-position: right top; mask-position: right top; }
.has-wm.wm-tl::after { right: auto; left: 0; bottom: auto; top: 0; background-position: left top; -webkit-mask-position: left top; mask-position: left top; }

/* ---------- Picture style: one corner, border and shadow for every content picture ---------- */
/* Look and feel → Images. Body classes img-r-*, img-b-*, img-s-* (tokens.php). Empty = each block's own look-based style. */

body.img-r-square { --pic-r: 0px; }
body.img-r-soft   { --pic-r: 14px; }
body.img-r-round  { --pic-r: 32px; }

body.img-b-line  { --pic-border: 1px solid var(--line); }
body.img-b-brand { --pic-border: 2px solid var(--brand); }

body.img-s-soft { --pic-shadow: 0 10px 24px -14px color-mix(in srgb, var(--ink) 55%, transparent); }
body.img-s-lift { --pic-shadow: 0 22px 44px -20px color-mix(in srgb, var(--ink) 65%, transparent); }
body.img-s-hard { --pic-shadow: 6px 6px 0 var(--ink); }

:is(.image__item figure, .services__tile-img, .team__photo, .promotion__media:not(.promotion__media--bestmates), .hero--c .hero__media) {
	border: var(--pic-border, 0);
	box-shadow: var(--pic-shadow, none);
}

body:is(.img-r-square, .img-r-soft, .img-r-round) :is(.image__item figure, .services__tile-img, .team__photo, .promotion__media:not(.promotion__media--bestmates), .hero--c .hero__media) {
	border-radius: var(--pic-r);
}

/* ---------- Block options: colour theme and background picture (Display and Advanced options on any block) ---------- */
/* apiam_block_extras() sets the tokens (--bg, --surface, --ink, --muted, --line, --tint, --brand-text, buttons) on the
   block's own section, so everything inside it follows. The background picture is a layer under the content. */

html body .blk-tone { background: var(--bg); color: var(--ink); }

.has-bgimg { position: relative; isolation: isolate; }
.has-bgimg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--blk-img) var(--blk-img-pos, center) / var(--blk-img-size, cover) no-repeat;
	opacity: var(--blk-img-op, 0.3);
	pointer-events: none;
}

/* ---------- Site-wide spacing (Look and feel → Spacing) ---------- */
/* Body classes sec-tight / sec-roomy, cw-narrow / cw-wide / cw-full, cx-tight / cx-roomy / cx-wide. A block's own
   padding (Advanced options) still wins. */

body.cw-narrow { --cw: 62rem; }
body.cw-wide   { --cw: 86rem; }
body.cw-full   { --cw: 120rem; }
body.cx-tight  { --cx: 0.75rem; }
body.cx-roomy  { --cx: 1.75rem; }
body.cx-wide   { --cx: 3rem; }

body.sec-tight  { --sec-y: 28px; --sec-y-d: 44px; }
body.sec-roomy  { --sec-y: 76px; --sec-y-d: 120px; }

body:is(.sec-tight, .sec-roomy) :is(.services, .team, .faqs, .hours, .contact, .map-block, .subscribe, .promotion, .reviews, .richtext, .cta-band, .image, .trust, .quick, .emergency, .button-block) {
	padding-block: var(--sec-y);
}

@media (min-width: 900px) {
	body:is(.sec-tight, .sec-roomy) :is(.services, .team, .faqs, .hours, .contact, .map-block, .subscribe, .promotion, .reviews, .richtext, .cta-band, .image, .trust, .quick, .emergency, .button-block) {
		padding-block: var(--sec-y-d);
	}
}

/* ---------- One gap between neighbouring sections on the page background ---------- */
/* Each section has its own top and bottom padding, so two plain sections in a row used to add both together
   (96px + 96px on desktop). When a section sits straight after another one that has no colour or picture of its
   own, its top padding drops to --sec-join (default: 20% of the normal section padding, so it follows the Spacing setting), leaving one gap of the first section's bottom padding plus that.
   A section with a colour theme or background picture keeps its full padding, as does one with its own padding set
   in Advanced options (that is an inline style, so it wins). To get a little more air, set --sec-join on body, e.g. 16px. */

:is(.services, .team, .faqs, .hours, .contact, .map-block, .promotion, .reviews, .richtext, .image):not(.blk-tone):not(.has-bgimg)
+ :is(.services, .team, .faqs, .hours, .contact, .map-block, .promotion, .reviews, .richtext, .image):not(.blk-tone):not(.has-bgimg) {
	padding-top: var(--sec-join, calc(var(--sec-y, 56px) * 0.2));
}

@media (min-width: 900px) {
	:is(.services, .team, .faqs, .hours, .contact, .map-block, .promotion, .reviews, .richtext, .image):not(.blk-tone):not(.has-bgimg)
	+ :is(.services, .team, .faqs, .hours, .contact, .map-block, .promotion, .reviews, .richtext, .image):not(.blk-tone):not(.has-bgimg) {
		padding-top: var(--sec-join, calc(var(--sec-y-d, 96px) * 0.2));
	}
}