/*
Theme Name:        WUF Starter
Theme URI:         https://www.wufdesign.co.uk/
Author:            WUF Design
Author URI:        https://www.wufdesign.co.uk/
Description:       Lightweight block theme for WUF Design pet-business websites. Full Site Editing, self-hosted fonts, no jQuery, no page builder. Pairs with the WUF QuickLaunch Engine plugin.
Requires at least: 6.6
Tested up to:      6.8
Requires PHP:      8.0
Version:           1.5.3
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       wuf-starter
Tags:              full-site-editing, block-patterns, block-styles, style-variations, custom-colors, custom-logo, custom-menu, editor-style, wide-blocks, accessibility-ready
*/

/* Most styling lives in theme.json. This file only holds what theme.json can't express. */

/* ---------- Global ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
::selection { background: var(--wp--preset--color--primary); color: #fff; }
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
img { height: auto; }

/* Remove the root block gap between header, main and footer. */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ---------- Header ---------- */
.wuf-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: 0.85rem;
}
.admin-bar .wuf-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .wuf-site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .wuf-site-header { top: 0; } }
.wuf-site-header .wp-block-site-logo img { max-height: 56px; width: auto; }
.wuf-site-header .wp-block-site-title a { color: var(--wp--preset--color--contrast); }
.wuf-site-header .wp-block-navigation-item__content { text-decoration: none; padding-block: 0.4rem; }
.wuf-site-header .wp-block-navigation-item__content:hover,
.wuf-site-header .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--primary); }

/* "Book Now" menu item rendered as a button. */
.wp-block-navigation .wuf-menu-cta > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--primary);
	color: #fff !important;
	border-radius: 999px;
	padding: 0.6rem 1.25rem;
}
.wp-block-navigation .wuf-menu-cta > .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--primary-dark); }

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--x-large);
}

/* ---------- Main ---------- */
.wuf-main--page { padding-block: var(--wp--preset--spacing--60); }
.wuf-page-header { margin-bottom: var(--wp--preset--spacing--50); }

/* ---------- Footer ---------- */
.wuf-site-footer {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}
.wuf-site-footer a,
.wuf-site-footer .wp-block-site-title a,
.wuf-site-footer .wp-block-navigation-item__content { color: var(--wp--preset--color--base); }
.wuf-site-footer a:hover { color: var(--wp--preset--color--primary); }
.wuf-site-footer .wuf-footer-heading {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--medium);
	margin-bottom: 0.75rem;
}
.wuf-site-footer .wp-block-site-tagline { opacity: 0.75; }
.wuf-site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.8;
}
.wuf-site-footer .wuf-menu-cta > .wp-block-navigation-item__content { background: none; padding: 0; color: var(--wp--preset--color--base) !important; }

/* ---------- Block styles ---------- */
.is-style-wuf-card {
	background: var(--wp--preset--color--base);
	border: var(--wp--custom--wuf--border-width, 1px) var(--wp--custom--wuf--border-style, solid) var(--wp--preset--color--border);
	border-radius: var(--wp--custom--wuf--radius, 16px);
	padding: var(--wp--preset--spacing--40);
	box-shadow: var(--wp--preset--shadow--soft);
}
.is-style-wuf-card > .wp-block-post-featured-image { margin: calc(var(--wp--preset--spacing--40) * -1) calc(var(--wp--preset--spacing--40) * -1) 1rem; }
.is-style-wuf-card > .wp-block-post-featured-image img { border-radius: var(--wp--custom--wuf--radius, 16px) var(--wp--custom--wuf--radius, 16px) 0 0; }

.is-style-wuf-ticks { list-style: none; padding-left: 0; }
.is-style-wuf-ticks li { position: relative; padding-left: 1.6rem; margin-bottom: 0.45rem; }
.is-style-wuf-ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--wp--preset--color--accent); font-weight: 800; }

.is-style-wuf-rounded img { border-radius: var(--wp--custom--wuf--radius, 20px); }

.is-style-wuf-pill-list { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.is-style-wuf-pill-list li { background: var(--wp--preset--color--tint); border: 1px solid var(--wp--preset--color--border); border-radius: 999px; padding: 0.35rem 1rem; margin: 0; }

/* ---------- Details / FAQ ---------- */
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: 1rem;
}
.wp-block-details summary { font-weight: 800; cursor: pointer; list-style: none; position: relative; padding-right: 2rem; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; position: absolute; right: 0; top: 0; color: var(--wp--preset--color--primary); font-size: 1.4em; line-height: 1; }
.wp-block-details[open] summary::after { content: "−"; }

/* ---------- Forms (core search, comments) ---------- */
.wp-block-search__input,
.comment-form input:not([type=submit]):not([type=checkbox]),
.comment-form textarea {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.7rem 0.9rem;
	font: inherit;
}

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

/* ---------- QuickLaunch blueprint sections ----------
   Layout only; colours, spacing and type come from block attributes and
   Global Styles, so these pages need nothing from the plugin. */
.wuf-bp-grid > .wp-block-column.is-style-wuf-card { display: flex; flex-direction: column; }
.wuf-bp-grid > .wp-block-column.is-style-wuf-card > .wp-block-buttons { margin-top: auto !important; padding-top: var(--wp--preset--spacing--30); }
.wuf-bp-grid .is-style-wuf-card > .wp-block-image:first-child { margin: 0 0 var(--wp--preset--spacing--30); }
.wuf-bp-spacer:empty { visibility: hidden; }
@media (max-width: 781px) { .wuf-bp-spacer:empty { display: none; } }
/* Comfortable line lengths. Sections centre their children in a 1140px
   column; a narrower left-aligned block keeps its left edge on that column
   (the margin works out to 0 when the column is narrower than 1140px). */
.wuf-bp-hero .wp-block-heading.has-text-align-center { max-width: 20ch; margin-inline: auto; }
.wuf-bp-section p.has-large-font-size.has-text-align-center { max-width: 62ch; margin-inline: auto; }
.wuf-bp-hero .wp-block-heading:not(.has-text-align-center) { max-width: 20ch; }
.wuf-bp-section p.has-large-font-size:not(.has-text-align-center) { max-width: 62ch; }
.wuf-bp-hero .wp-block-heading:not(.has-text-align-center),
.wuf-bp-section p.has-large-font-size:not(.has-text-align-center) {
	margin-left: max(0px, calc((100% - 1140px) / 2)) !important;
	margin-right: auto !important;
}
.wuf-bp-testimonial { margin: 0; }
.wuf-bp-testimonial cite { display: block; margin-top: 0.75rem; font-size: var(--wp--preset--font-size--small); font-style: normal; font-weight: 700; }

/* Before & after, pricing table, trust strip, photo gallery (QuickLaunch 1.11) */
.wuf-bp-ba-pair { gap: 0.75rem; margin-block: 0.75rem; }
.wuf-bp-ba-pair .wp-block-image { position: relative; margin: 0; }
.wuf-bp-ba-pair .wp-block-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: min(var(--wp--custom--wuf--radius, 12px), 32px); }
.wuf-bp-ba-pair .wp-element-caption { position: absolute; top: 0.6rem; left: 0.6rem; margin: 0; padding: 0.15rem 0.65rem; border-radius: 999px; background: rgb(0 0 0 / 0.66); color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; }
.wuf-bp-ba-pair .wp-block-column:last-child .wp-element-caption { background: var(--wp--preset--color--primary); }
@media (max-width: 781px) { .wuf-bp-ba-pair { flex-wrap: nowrap !important; } .wuf-bp-ba-pair > .wp-block-column { flex-basis: 50% !important; } }

.wuf-bp-pricing { margin-block: 0; overflow-x: auto; border-radius: min(var(--wp--custom--wuf--radius, 12px), 32px); border: 1px solid var(--wp--preset--color--border, #e5e5e5); background: var(--wp--preset--color--base); }
.wuf-bp-pricing table { width: 100%; min-width: 520px; border-collapse: collapse; }
.wuf-bp-pricing th, .wuf-bp-pricing td { padding: 0.9rem 1rem; border: 0; border-bottom: 1px solid var(--wp--preset--color--border, #ececec); text-align: center; vertical-align: middle; }
.wuf-bp-pricing th:first-child, .wuf-bp-pricing td:first-child { text-align: left; }
.wuf-bp-pricing thead th { background: var(--wp--preset--color--primary); color: #fff; font-weight: 700; border-bottom: 0; }
.wuf-bp-pricing tbody tr:nth-child(even) { background: color-mix(in srgb, var(--wp--preset--color--primary) 5%, transparent); }
.wuf-bp-pricing tbody tr:last-child td { border-bottom: 0; }
.wuf-bp-pricing td em { font-style: normal; font-size: 0.85em; opacity: 0.75; }
.wuf-bp-pricing td:not(:first-child) { font-weight: 700; font-variant-numeric: tabular-nums; }
.wuf-bp-pricing .wp-element-caption { margin: 0; padding: 0.75rem 1rem; font-size: 0.85rem; text-align: left; border-top: 1px solid var(--wp--preset--color--border, #ececec); }

.wuf-bp-trust-item { text-align: center; }
.wuf-bp-trust-item > * + * { margin-block-start: 0.25rem !important; }
.wuf-bp-trust-value { margin: 0; font-weight: 800; line-height: 1.1; color: var(--wp--preset--color--primary); }
.has-base-color .wuf-bp-trust-value { color: inherit; }
.wuf-bp-trust-label { margin: 0; opacity: 0.8; }

.wuf-bp-gallery.wp-block-gallery { gap: 0.75rem; }
.wuf-bp-gallery .wp-block-image img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: min(var(--wp--custom--wuf--radius, 12px), 32px); }
.wuf-bp-gallery .wp-block-image .wp-element-caption { background: none; color: inherit; position: static; padding: 0.4rem 0 0; font-size: 0.85rem; text-align: left; }

/* Photo-background sections, map section, announcement bar (QuickLaunch 1.12) */
.wuf-bp-bg-image.wp-block-cover { min-height: 0; }
.wuf-bp-bg-image.wuf-pad-sm { padding-block: var(--wp--preset--spacing--40); }
.wuf-bp-bg-image.wuf-pad-md { padding-block: var(--wp--preset--spacing--60); }
.wuf-bp-bg-image.wuf-pad-lg { padding-block: var(--wp--preset--spacing--70); }
.wuf-bp-bg-image .wp-block-cover__inner-container { width: 100%; }
/* Text over a photo: FAQ items have no card behind them, so they stay light;
   solid cards keep their own background and dark text; glass cards become
   dark frosted glass so white text reads. */
.wuf-bp-bg-image:not(.wuf-cards-glass) .is-style-wuf-card { color: var(--wp--preset--color--contrast); }
.wuf-bp-bg-image .wp-block-details { border-bottom-color: rgb(255 255 255 / 0.3); }
.wuf-bp-bg-image .wp-block-details summary::after { color: currentColor; }
.wuf-bp-bg-image.wuf-cards-glass .is-style-wuf-card { background: rgb(0 0 0 / 0.28); border-color: rgb(255 255 255 / 0.28); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.wuf-bp-map { align-items: stretch; }
.wuf-map { position: relative; min-height: 320px; height: 100%; border-radius: min(var(--wp--custom--wuf--radius, 12px), 32px); overflow: hidden; background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, var(--wp--preset--color--base)); }
.wuf-map__frame { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
.wuf-map--click:not([open]) { display: grid; place-items: center; }
.wuf-map__load { list-style: none; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.85rem 1.4rem; border-radius: 999px; background: var(--wp--preset--color--primary); color: #fff; font-weight: 700; }
.wuf-map__load::-webkit-details-marker { display: none; }
.wuf-map__load span { font-size: 0.75rem; font-weight: 400; opacity: 0.85; }
.wuf-map--click[open] .wuf-map__load { position: absolute; inset: auto auto 0.75rem 0.75rem; z-index: 1; padding: 0.35rem 0.8rem; font-size: 0.8rem; }
.wuf-map--click[open] .wuf-map__load span { display: none; }
.wuf-map-open a { font-weight: 700; }

.wuf-announcement { background: var(--wp--preset--color--primary); color: #fff; text-align: center; font-size: 0.875rem; padding: 0.55rem 1rem; }
.wuf-announcement p { margin: 0; }
.wuf-announcement a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }