/*
Theme Name: Linden
Author: Dary Technologies
Author URI: https://darytechnologies.com
Description: Linden is a calm, doctor-led block theme for dental and medical practices. Four pages, one appointment link, self-hosted type, no JavaScript. Rebrand the logo, colours, fonts, photos and appointment link from the Site Editor.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: linden
Tags: full-site-editing, block-patterns, one-column, two-columns, custom-colors, editor-style, block-styles
*/

/* Fallback metrics so text does not jump when Figtree loads. */
@font-face {
	font-family: "Figtree Fallback";
	src: local("Arial");
	size-adjust: 100.72%;
}

:where(a, button, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Header: brand left, phone and directions right. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

.linden-topbar {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
}

.linden-topbar > * {
	margin-block: 0;
}

.linden-brand .wp-block-site-title {
	font-size: clamp(1.5rem, 3.2vw, 2rem);
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
}

.linden-brand .wp-block-site-title a {
	color: var(--wp--preset--color--stone);
	text-decoration: none;
}

.linden-brand .linden-tagline {
	margin: 0.15rem 0 0;
	color: var(--wp--preset--color--stone);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.linden-contact {
	text-align: right;
}

.linden-contact p {
	margin: 0;
}

.linden-contact p a {
	display: inline-block;
	padding-block: 0.2rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.linden-contact p a:hover {
	text-decoration: underline;
}

.linden-contact .linden-phone {
	font-size: var(--wp--preset--font-size--large);
}

.linden-contact .wp-block-buttons {
	justify-content: flex-end;
	margin-top: 0.6rem;
}

/* Navigation bar. */
.linden-nav {
	background: var(--wp--preset--color--stone);
	color: var(--wp--preset--color--base);
}

.linden-nav .wp-block-navigation {
	justify-content: center;
}

.linden-nav .wp-block-navigation__container {
	justify-content: center;
	gap: 0 var(--wp--preset--spacing--30);
}

.linden-nav .wp-block-navigation-item__content {
	display: block;
	padding: 0.7rem 0.4rem;
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
}

.linden-nav .wp-block-navigation-item__content:hover {
	text-decoration: underline;
}

.linden-nav :where(a):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* Hero photo. */
.linden-hero {
	margin-block: 0;
}

.linden-hero img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 2;
	object-fit: cover;
	object-position: 50% 26%;
}

/* Stacked action buttons beside the intro. */
.linden-actions .wp-block-buttons {
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.linden-actions .wp-block-button,
.linden-actions .wp-block-button__link {
	width: 100%;
	box-sizing: border-box;
}

.linden-actions .wp-block-button__link {
	padding-block: 1.25rem;
	text-align: center;
}

.wp-block-button__link:hover {
	filter: brightness(0.9);
}

/* Pale featured band. */
.linden-band {
	background: var(--wp--preset--color--band);
	padding-block: var(--wp--preset--spacing--60);
}

.linden-band img,
.linden-portrait img,
.linden-visit img,
.linden-map img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.linden-band img {
	aspect-ratio: 4 / 3;
}

.linden-portrait img {
	aspect-ratio: 9 / 7;
}

.linden-lead {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
}

/* Visit us. */
.linden-visit {
	padding-block: var(--wp--preset--spacing--60);
	text-align: center;
}

.linden-visit :where(h2) {
	color: var(--wp--preset--color--stone);
}

.linden-visit .wp-block-image {
	max-width: 420px;
	margin-inline: auto;
}

.linden-visit img {
	aspect-ratio: 3 / 2;
	border: 1px solid var(--wp--preset--color--stone);
}

.linden-visit .wp-block-buttons {
	justify-content: center;
}

.linden-map img {
	aspect-ratio: 16 / 9;
	border: 1px solid var(--wp--preset--color--band);
}

.linden-section {
	padding-block: var(--wp--preset--spacing--40);
}

.linden-page {
	padding-block: var(--wp--preset--spacing--50);
}

.linden-phone-large a {
	font-size: var(--wp--preset--font-size--x-large);
	text-decoration: none;
}

/* Footer bar. */
.linden-footer {
	background: var(--wp--preset--color--stone);
	color: var(--wp--preset--color--base);
	padding-block: var(--wp--preset--spacing--20);
	font-size: 0.8125rem;
	text-align: center;
}

.linden-footer p {
	margin: 0;
}

.linden-footer a {
	color: var(--wp--preset--color--base);
}

.linden-footer :where(a):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

@media (max-width: 700px) {
	.linden-topbar {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.linden-contact {
		text-align: center;
	}

	.linden-contact .wp-block-buttons {
		justify-content: center;
	}

	.linden-hero img {
		aspect-ratio: 4 / 3;
		object-position: 16% 30%;
	}

	.linden-band {
		padding-block: var(--wp--preset--spacing--50);
	}
}

/* Wider gutters between photo and text columns. */
.linden-band .wp-block-columns,
.linden-page .wp-block-columns {
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

/* Services: two columns of short entries, each under a hairline. */
.linden-services {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--wp--preset--spacing--50);
	margin-block: var(--wp--preset--spacing--40);
}

.linden-services > .linden-service {
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--30);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--stone) 35%, transparent);
}

.linden-service :where(h2) {
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--large);
}

.linden-service p {
	margin: 0;
}

@media (min-width: 782px) {
	.linden-services {
		grid-template-columns: 1fr 1fr;
	}
}

/* Contact: details beside the map, then two short notes side by side. */
.linden-contact-top {
	margin-top: var(--wp--preset--spacing--30);
}

.linden-contact-more {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--stone) 35%, transparent);
}

.linden-page :where(h2) {
	margin-top: var(--wp--preset--spacing--30);
}

.linden-page .wp-block-column > :where(h2):first-child {
	margin-top: 0;
}

.linden-page .wp-block-table td {
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--stone) 35%, transparent);
	padding: 0.6rem 0.25rem;
}

/* Hero: the tagline sits over the calm side of the photo on wide screens and
   under the photo on phones. It is real text, so it can be edited and read aloud. */
.linden-hero-wrap {
	position: relative;
	margin-block: 0;
}

.linden-hero-wrap > * {
	margin-block: 0;
}

.linden-hero-tagline {
	padding: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--stone);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
	text-align: center;
}

@media (min-width: 782px) {
	.linden-hero-tagline {
		position: absolute;
		top: 50%;
		right: 8%;
		max-width: 34%;
		padding: 0;
		transform: translateY(-50%);
		color: var(--wp--preset--color--contrast);
		font-size: clamp(1.75rem, 3.2vw, 2.9rem);
		text-align: left;
	}
}

/* Motion: text rises in on page load (first screen) and reveals as it scrolls
   into view (everything below). CSS only. Opacity and translate alone, so
   nothing shifts layout. Scroll reveals are a progressive enhancement
   (Chrome 115+, Safari 26+); browsers without view timelines show the text
   as is. Reduced motion turns everything off. Longhand animation properties
   on purpose: minifiers mangle the shorthand with animation-timeline. */
@keyframes linden-rise {
	from {
		opacity: 0;
		translate: 0 12px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

/* Floor of 0.9: the lowest opacity at which every text/background pair in
   the three palettes still meets WCAG contrast (accent lead text on the band
   needs 0.89), so text parked before or stalled mid-reveal always passes.
   The rise carries the motion; the fade is a hint. */
@keyframes linden-reveal {
	from {
		opacity: 0.9;
		translate: 0 16px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.linden-hero-tagline,
	main :where(h1),
	.linden-lead,
	.linden-section .wp-block-column:first-child > p {
		animation-name: linden-rise;
		animation-duration: 0.5s;
		animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
		animation-fill-mode: both;
	}

	main :where(h1) {
		animation-delay: 0.1s;
	}

	.linden-lead,
	.linden-section .wp-block-column:first-child > p {
		animation-delay: 0.2s;
	}

	@supports (animation-timeline: view()) {
		main :where(h2),
		.linden-service,
		.linden-page .wp-block-columns p {
			animation-name: linden-reveal;
			animation-duration: 1ms; /* ignored by the timeline, required to run */
			animation-timing-function: ease-out;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range-start: entry 0%;
			animation-range-end: entry 70%;
		}
	}
}