/*
Theme Name: Albert's Horse Sanctuary
Theme URI: https://albertshorsesanctuary.org.uk
Author: Albert's Horse Sanctuary (volunteer build)
Description: A warm, playful, accessible block theme for Albert's Horse Sanctuary, a UK animal rescue charity. Direction 2 design system: a Caveat / Baloo 2 / Nunito type pairing on a bright grass/sunshine/coral palette, self-hosted fonts, a Stitched card block style, and ready-made patterns for the native WordPress block editor. Includes an Animals custom post type for sponsorships.
Version: 3.16.1
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alberts-horse-sanctuary
Tags: full-site-editing, block-patterns, custom-colors, blog, one-column, wide-blocks
*/

/* Most styling is handled in theme.json. A few supplementary rules: */

/* Links are underlined by default (set in theme.json) for accessibility.
   Remove the underline only in the top bar and the navigation. */
.ahs-topbar a,
.wp-block-navigation a {
	text-decoration: none;
}

/* Top-bar links inherit the cream text colour */
.ahs-topbar a {
	color: inherit;
}

/* Footer links sit on the dark band: keep them underlined but light */
footer a {
	color: var(--wp--preset--color--cream);
}

/* Buttons are buttons, not text links - never underline them */
.wp-element-button,
.wp-block-button__link {
	text-decoration: none;
}

/* Unified raised shadow on all solid buttons, with a subtle hover lift.
   Outline buttons are skipped (a shadow under a transparent button looks odd). */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.18);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12), 0 7px 14px rgba(0, 0, 0, 0.22);
	transform: translateY(-1px);
}

/* Heart icon on the donate buttons (class "ahs-donate"). Uses an SVG mask
   tinted to the button's own text colour, so it matches and stays monochrome
   (not an emoji), and doesn't touch the button's editable text. */
.ahs-donate .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.45em;
	vertical-align: -0.12em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%2021s-8-5.3-8-11a4%204%200%200%201%208-1%204%204%200%200%201%208%201c0%205.7-8%2011-8%2011z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%2021s-8-5.3-8-11a4%204%200%200%201%208-1%204%204%200%200%201%208%201c0%205.7-8%2011-8%2011z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Site logo: set the radius directly on the image. The Site Logo block uses
   border-radius:inherit on the img, so the block's own radius attribute can
   fail to apply on the front end - targeting the img avoids that. */
.wp-block-site-logo img {
	border-radius: 10px;
}

/* Navigation: amber underline bar on hover/focus and for the current page.
   Text stays the high-contrast deep green; the bar is the indicator, which
   is noticeable without relying on low-contrast coloured text. */
.wp-block-navigation-item__content {
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s ease;
}
.wp-block-navigation-item__content:hover,
.wp-block-navigation-item__content:focus,
.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--sage) !important;
	border-bottom-color: var(--wp--preset--color--amber);
}

/* Dropdown submenus: a clean white panel with sand hover highlight.
   Submenu items use a background highlight rather than the amber underline bar. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	padding: 6px;
	min-width: 210px;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-bottom: none;
	border-radius: 6px;
	padding: 8px 12px;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus,
.wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--forest) !important;
	background-color: var(--wp--preset--color--sand);
	border-bottom: none;
}

/* Tidy spacing on the navigation on small screens */
.wp-block-navigation {
	--wp--style--block-gap: 1rem;
}

/* Ensure full-bleed sections never show a horizontal scrollbar */
body {
	overflow-x: hidden;
}

/* No vertical margin around the main content area (removes the gap between
   the header, main content and footer). */
main.wp-block-group {
	margin-top: 0;
	margin-bottom: 0;
}

/* Same for the header and footer template parts, so the bands sit flush. */
.wp-block-template-part {
	margin-top: 0;
	margin-bottom: 0;
}

/* ----------------------------------------------------------------------
   Shop: product filters sidebar + product grid (first-pass styling).
   WooCommerce filter/grid block class names vary by version, so this is a
   light touch - refine once the catalogue template is built and rendering.
   ---------------------------------------------------------------------- */
.wp-block-woocommerce-product-filters h3,
.wc-block-product-filter h3,
.wc-block-components-filter-title,
.wp-block-woocommerce-product-filter-taxonomy h3,
.wp-block-woocommerce-product-filter-price h3,
.wp-block-woocommerce-product-filter-attribute h3 {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--forest);
	font-size: 17px;
	margin-bottom: 0.5rem;
}
.wc-block-components-checkbox input:checked + .wc-block-components-checkbox__mark {
	accent-color: var(--wp--preset--color--sage);
}
.wc-block-components-product-button .wp-element-button {
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.18);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.wc-block-components-product-button .wp-element-button:hover {
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12), 0 7px 14px rgba(0, 0, 0, 0.22);
	transform: translateY(-1px);
}
.wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--forest);
}

/* Two-column shop archive (archive-product.html): filters left, grid right.
   Give the filter groups consistent vertical rhythm and a light divider. */
.wp-block-woocommerce-product-filters > * + * {
	margin-top: 1.25rem;
}
.wp-block-woocommerce-product-filters .wp-block-woocommerce-product-filter-price,
.wp-block-woocommerce-product-filters .wp-block-woocommerce-product-filter-status {
	border-top: 1px solid var(--wp--preset--color--sand);
	padding-top: 1.25rem;
}
/* Keep the count/sorting row readable when it wraps on small screens. */
.wc-block-catalog-sorting,
.wc-block-product-results-count {
	font-size: 15px;
}

/* ----------------------------------------------------------------------
   Flush top-level bands. WordPress adds a default 24px gap between the
   direct children of .wp-site-blocks (header, page banners, main, footer)
   via :where(.wp-site-blocks) > *, which has zero specificity. This theme's
   full-width bands are meant to sit flush, so override it on EVERY template
   - including category and subcategory archives - rather than relying on a
   per-template element style. One class beats the :where() rule.
   ---------------------------------------------------------------------- */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ----------------------------------------------------------------------
   ...but the footer needs breathing room when nothing flush precedes it.
   Only page.html and front-page.html end with the donate band; every other
   template (WooCommerce catalogue, product, order received, blog index,
   single post, 404, page-no-banner) ends with ordinary contained content,
   which would otherwise butt straight against the dark footer band.

   So: restore a gap above the footer by default, then remove it again where
   main's last child is a full-width band - which is exactly the case the
   flush treatment is for. Self-maintaining: any new template gets the right
   spacing based on how it actually ends, with no per-template rules.
   ---------------------------------------------------------------------- */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: var(--wp--preset--spacing--40);
}
.wp-site-blocks > main:has(> .alignfull:last-child) + footer.wp-block-template-part {
	margin-block-start: 0;
}

/* ----------------------------------------------------------------------
   Sticky footer: anchor the footer to the bottom of the viewport so short
   pages (empty basket, order received, 404) don't leave the footer floating
   mid-screen with dead space beneath it.

   Only .wp-site-blocks becomes a flex container; main stays an ordinary
   block container and merely grows. Do NOT put display:flex on main - it
   turns the Cart and Checkout blocks into flex items and they collapse to
   content width, since those blocks manage their own internal widths.
   ---------------------------------------------------------------------- */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.wp-site-blocks > main {
	flex-grow: 1;
}

/* Don't stretch main where it ends with a flush band - stretching would open
   white space between the donate band and the footer. */
.wp-site-blocks > main:has(> .alignfull:last-child) {
	flex-grow: 0;
}

/* ----------------------------------------------------------------------
   Customer Account block (header). The block renders its icon with no
   colour, so on the cream header row it shows as blank clickable space.
   Give it the forest colour and a size that matches the mini-cart icon.
   ---------------------------------------------------------------------- */
.wp-block-woocommerce-customer-account {
	color: var(--wp--preset--color--forest);
}
.wp-block-woocommerce-customer-account svg,
.wp-block-woocommerce-customer-account svg path {
	fill: currentColor;
}
.wp-block-woocommerce-customer-account svg {
	width: 24px;
	height: 24px;
}

/* ----------------------------------------------------------------------
   Header utility cluster (account + cart) - their own strip under the top
   bar, above the donate button. Tighter gap, slightly larger icons.
   ---------------------------------------------------------------------- */
.ahs-utility {
	gap: 10px;
}
.ahs-utility .wp-block-woocommerce-customer-account,
.ahs-utility .wp-block-woocommerce-mini-cart {
	margin: 0;
}
.ahs-utility .wp-block-woocommerce-customer-account svg,
.ahs-utility .wp-block-woocommerce-mini-cart svg {
	width: 28px;
	height: 28px;
}

/* Change email icon background color */
.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-mail {
    background-color: #12191d; 
}

/* Change the inner envelope color */
.wp-block-social-links .wp-social-link-mail .wp-block-social-link-anchor {
    color: #ffffff; 
}
/* ============================================================
   Direction 2 build additions
   ============================================================ */

/* "Stitched" block style — solid rounded card + inset dashed line.
   Apply to a Group or Column via the block Styles panel. Give the block a
   background colour as usual; the dashed stitch adapts to any background. */
.is-style-stitched {
	position: relative;
	border-radius: 18px;
}
.is-style-stitched::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 2px dashed rgba(46, 42, 38, 0.22);
	border-radius: 12px;
	pointer-events: none;
}

/* Decorative paw print (patterns/paw.php). Defaults to a faint coral;
   override colour by setting text colour on a wrapping group. */
.ahs-paw {
	display: inline-block;
	line-height: 0;
	color: var(--wp--preset--color--coral);
	opacity: 0.18;
}

/* Pill buttons already come from theme.json; keep the donate button legible
   on its sunshine background. */
.ahs-donate .wp-block-button__link {
	border-radius: 999px;
}

/* Birthday panel stub wrapper (styled fully in a later tranche). */
.ahs-birthdays {
	text-align: center;
}

/* ---- Tranche 2: integrated header scene ---- */
/* The cartoon animals sit in a band directly above the green nav bar, so they
   read as part of the header. background-size/position are the knobs to tune
   live (I can't render WP here); nudge min-height / position to taste. */
/* Header scene, two layers:
   1. Full-bleed background — flat sky + bunting tile (top) + scalloped grass
      tile (bottom). Tiles repeat horizontally, so no stretching/distortion at
      any screen width.
   2. Animals — rendered inside the SAME constrained column as the nav content
      (max 1280px, centred), so their position relative to the logo is fixed on
      every screen size. This is why the horse never slides behind the logo on
      wide monitors. LOGO_GAP inside animals.svg reserves the space. */
.ahs-header-scene {
	position: relative;
	height: clamp(120px, 12vw, 150px);
	background-color: #BEE7F6;
	background-image: url(assets/img/bunting.svg), url(assets/img/grass.svg);
	background-repeat: repeat-x, repeat-x;
	background-position: left top, left bottom;
	background-size: 240px 34px, 92px 22px;
	overflow: hidden;
	margin-bottom: -1px;
}
.ahs-scene-animals {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;            /* plants feet just into the grass bump line */
	max-width: 1280px;       /* must match theme.json contentSize */
	margin: 0 auto;
	padding: 0 20px;
}
.ahs-scene-animals svg {
	display: block;
	width: 100%;
	height: auto;
}
/* Narrow screens: the logo stays a fixed size while the column shrinks, so
   drop the two leftmost animals rather than let them collide with it. */
@media (max-width: 860px) {
	.ahs-scene-animals { padding-left: 0; }
	.ahs-header-scene { height: clamp(96px, 16vw, 130px); }
}
/* Top-level nav links sit on the green bar, so they are cream — but scoped to
   the TOP LEVEL only.
   This previously redefined --wp--preset--color--forest inside the navbar to
   force white links. That token is also what the theme colours submenu text
   with (see the submenu rules above, which use it with !important), so the
   override leaked into the dropdown and made its text cream-on-white. */
.ahs-navbar .ahs-mainnav > ul > li > a,
.ahs-navbar .ahs-mainnav > ul > li > button,
.ahs-navbar .ahs-mainnav > ul > li > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--cream);
}
.ahs-navbar .ahs-mainnav > ul > li > a svg,
.ahs-navbar .ahs-mainnav > ul > li > button svg,
.ahs-navbar .ahs-mainnav > ul > li > .wp-block-navigation-item__content svg {
	fill: currentColor;
}

/* Submenu panel is white, so its links keep dark text. */
.ahs-navbar .wp-block-navigation__submenu-container a,
.ahs-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
}
.ahs-navbar .wp-block-navigation__submenu-container a:hover,
.ahs-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.ahs-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--forest);
}
.ahs-navbar .ahs-donate .wp-block-button__link { border-radius: 999px; }

/* Logo lifts up and overlaps the animal scene band as a badge.
   Tune the negative margin to taste (how far it rises into the scene). */
.ahs-navrow { align-items: flex-end; }
.ahs-navrow { align-items: flex-end; }
/* Menu grows to fill the space between logo and icons, and centres itself. */
.ahs-mainnav { flex: 1 1 auto; }
.ahs-mainnav.wp-block-navigation,
.ahs-mainnav .wp-block-navigation__container { justify-content: center; }
/* Account + cart sit together as a tight pair, separate from the menu gap. */
.ahs-right { align-items: flex-end; }
.ahs-utility { align-items: center; }
.ahs-logo,
.ahs-navbar .wp-block-site-logo {
	position: relative;
	z-index: 2;
	margin-top: clamp(-124px, -8vw, -84px);
	margin-bottom: 0;
}
.ahs-logo img,
.ahs-logo .custom-logo,
.ahs-navbar .wp-block-site-logo img {
	border: 4px solid var(--wp--preset--color--cream);
	border-radius: 16px;
	box-shadow: 0 8px 18px rgba(20, 15, 8, 0.25);
	background: var(--wp--preset--color--forest);
	display: block;
}

/* Account + cart now sit inline on the nav row; keep their icons light on the
   green bar. */
.ahs-navbar .ahs-utility,
.ahs-navbar .ahs-utility a,
.ahs-navbar .ahs-utility svg,
.ahs-navbar .wc-block-mini-cart__button {
	color: var(--wp--preset--color--cream);
	fill: currentColor;
}

/* ---- Tranche 2: sponsorship helpers ---- */
.ahs-helps .wp-block-column { text-align: center; }
.ahs-animal-grid .wp-block-post-title { margin-top: 10px; }

/* ---- Tranche 3: sponsor panel ---- */
.ahs-sponsor-panel {
	/* Tinted version of this animal's accent (set per-animal in inc/sponsorship.php). */
	background: var(--ahs-accent-soft, var(--wp--preset--color--sand));
	border-radius: 18px;
	padding: 22px;
	margin: 22px 0;
	max-width: 420px;
}
.ahs-sponsor-panel .ahs-field-label {
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 700;
	margin: 0 0 6px;
}
.ahs-sponsor-panel select {
	width: 100%;
	padding: 12px 14px;
	border: 2px solid var(--ahs-accent-mid, #e3ddce);
	border-radius: 12px;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	margin-bottom: 16px;
}
.ahs-sponsor-panel .ahs-delivery {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 9px 0;
	cursor: pointer;
	font-size: 15px;
}
.ahs-sponsor-panel .ahs-delivery input { margin-top: 4px; flex: none; }
.ahs-sponsor-panel .ahs-delivery small {
	display: block;
	color: #6b655c;
	font-size: 12.5px;
}
.ahs-sponsor-panel .ahs-panel-note {
	font-size: 12.5px;
	color: #6b655c;
	border-top: 2px dashed var(--ahs-accent-mid, #c7bda6);
	padding-top: 12px;
	margin: 14px 0 16px;
}
.ahs-sponsor-panel button { width: 100%; cursor: pointer; border: 0; }
.ahs-checkout-note {
	background: var(--wp--preset--color--sage-soft);
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 14px;
}
.ahs-notice { color: #b3261e; font-size: 14px; }

/* Animal page gallery (replaces the single featured image). */
.ahs-animal-gallery img { border-radius: 14px; }

/* ---- Animal gallery: thumbnail strip beside a large main image (mockup layout) ---- */
.ahs-gallery {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
/* Thumbnail column: up/down buttons either side of a 4-high scroll viewport. */
.ahs-gallery__thumbcol {
	flex: 0 0 82px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: stretch;
}
.ahs-gallery__thumbs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
}
/* Show 4 thumbnails (4 x 72px + 3 x 10px gap) and scroll for the rest.
   Native scrollbar hidden — the arrow buttons do the scrolling. */
.ahs-gallery__thumbs.is-scrollable {
	max-height: 318px;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
}
.ahs-gallery__thumbs.is-scrollable::-webkit-scrollbar { display: none; }
.ahs-gallery__thumb {
	/* Flex items shrink by default, which squashed the thumbnails instead of
	   letting the strip scroll. Fixed height, no shrinking. */
	flex: 0 0 72px;
	height: 72px;
	padding: 0;
	border: 2px solid #ece6da;
	border-radius: 12px;
	background: none;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
	transition: border-color .15s ease;
}
.ahs-gallery__thumb.is-active { border-color: var(--wp--preset--color--sage); }
.ahs-gallery__thumb:hover     { border-color: var(--wp--preset--color--coral); }
.ahs-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ahs-gallery__scroll {
	flex: 0 0 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #ece6da;
	border-radius: 9px;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	padding: 0;
	transition: border-color .15s ease, opacity .15s ease;
}
.ahs-gallery__scroll:hover:not([disabled]) { border-color: var(--wp--preset--color--sage); }
.ahs-gallery__scroll[disabled] {
	opacity: 0.35;
	cursor: default;
}
.ahs-gallery__main { flex: 1 1 auto; }
.ahs-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.ahs-gallery--single .ahs-gallery__thumbs { display: none; }

/* Admin gallery panel */
.ahs-gallery-admin__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin: 10px 0;
	padding: 0;
	list-style: none;
}
.ahs-gallery-admin__item { position: relative; margin: 0; cursor: move; }
.ahs-gallery-admin__item img {
	width: 100%;
	height: 60px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	background: #f0f0f0;
}
.ahs-gallery-admin__remove {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 50%;
	background: #b3261e;
	color: #fff;
	cursor: pointer;
	line-height: 18px;
	padding: 0;
}

/* Editor preview wrapper for the sponsorship blocks (front end unaffected). */
.ahs-block-preview { position: relative; }

/* ---- Gallery: zoomable main image ---- */
.ahs-gallery__main.ahs-gallery__zoom {
	position: relative;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	display: block;
	line-height: 0;
}
.ahs-gallery__zoom-hint {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 253, 247, 0.92);
	color: var(--wp--preset--color--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 3px 10px rgba(20, 15, 8, 0.25);
	opacity: 0;
	transition: opacity .18s ease;
}
.ahs-gallery__zoom:hover .ahs-gallery__zoom-hint,
.ahs-gallery__zoom:focus-visible .ahs-gallery__zoom-hint { opacity: 1; }

/* ---- Lightbox ---- */
body.ahs-lightbox-open { overflow: hidden; }
.ahs-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba(20, 15, 8, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 20px;
}
.ahs-lightbox[hidden] { display: none; }
.ahs-lightbox__figure {
	margin: 0;
	max-width: min(1100px, 88vw);
	max-height: 86vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ahs-lightbox__img {
	max-width: 100%;
	max-height: 86vh;
	width: auto;
	height: auto;
	border-radius: 12px;
	display: block;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.ahs-lightbox__nav,
.ahs-lightbox__close {
	border: 0;
	background: rgba(255, 253, 247, 0.14);
	color: #fff;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex: none;
	transition: background .15s ease;
}
.ahs-lightbox__nav:hover,
.ahs-lightbox__close:hover { background: rgba(255, 253, 247, 0.3); }
.ahs-lightbox__nav[hidden] { display: none; }
.ahs-lightbox__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 46px;
	height: 46px;
}
.ahs-lightbox__count {
	position: absolute;
	bottom: 18px;
	left: 0;
	right: 0;
	text-align: center;
	color: rgba(255, 253, 247, 0.85);
	font-size: 14px;
	margin: 0;
}
@media (max-width: 600px) {
	.ahs-lightbox__nav { width: 42px; height: 42px; }
	.ahs-lightbox { gap: 4px; padding: 10px; }
}

/* ---- Squiggle underline (rich-text format "Squiggle underline") ----
   A masked SVG so it takes the animal's accent colour where one is set,
   falling back to coral. Applied to selected words via the editor toolbar. */
.ahs-squiggle {
	position: relative;
	display: inline;
}
/* Hand-drawn wave: 110px period (one up hump + one down hump), baseline at
   y=7 in a 14-tall viewBox.
   Two things matter here:
   - The viewBox must be tall enough for the DOWN hump. The T command mirrors
     the control point, so the trough reaches y=10 plus half the stroke; a
     10-tall box clipped the bottom of every second hump.
   - preserveAspectRatio="none" stops the SVG letterboxing inside each mask
     tile, which broke the line into dashes at smaller text sizes. */
.ahs-squiggle::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.18em;
	height: 0.34em;
	background-color: var(--ahs-accent, var(--wp--preset--color--coral));
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 Q27.5 1 55 7 T110 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 Q27.5 1 55 7 T110 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 110px 100%;
	mask-size: 110px 100%;
	pointer-events: none;
}

/* ---- Per-animal accent applied to the sponsorship UI ---- */
.ahs-sponsor-panel button {
	background-color: var(--ahs-accent, var(--wp--preset--color--sage));
}
.ahs-gallery__thumb.is-active { border-color: var(--ahs-accent, var(--wp--preset--color--sage)); }
.ahs-gallery__scroll:hover:not([disabled]) { border-color: var(--ahs-accent, var(--wp--preset--color--sage)); }

/* ---- Buy-for button: keep it a normal pill, not a blob ---- */
.ahs-buy-for-wrap { margin-top: 4px; }
.ahs-buy-for .wp-block-button__link {
	display: inline-block;
	width: auto;
	aspect-ratio: auto;
}

/* ---- Sponsor panel: conditional certificate fields ---- */
.ahs-sponsor-panel input[type="text"],
.ahs-sponsor-panel input[type="email"] {
	width: 100%;
	padding: 11px 13px;
	border: 2px solid var(--ahs-accent-mid, #e3ddce);
	border-radius: 10px;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	margin-bottom: 8px;
	box-sizing: border-box;
}
.ahs-cert-fields {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 2px dashed var(--ahs-accent-mid, #c7bda6);
}
.ahs-cert-fields[hidden] { display: none; }
.ahs-sponsor-panel .ahs-field-hint {
	display: block;
	color: #6b655c;
	font-size: 12.5px;
	margin: -2px 0 4px;
}

/* ============================================================
   Seasonal header scenes
   The scene SVG is swapped in PHP (inc/header-scene.php); the sky colour,
   bunting tile, grass tile and nav bar are themed here off the body class it
   adds (ahs-season-<slug>). Add a new season by adding its artwork plus a
   block of overrides below.
   ============================================================ */

/* ---- Halloween: starry night, black/orange bunting, darker field ---- */
.ahs-season-halloween .ahs-header-scene {
	/* Gradient rather than a flat near-black: the sky lightens toward the
	   horizon so the dark costumes (vampire collar, wolf ears, bats) still
	   read against it. */
	background-image:
		url(assets/img/bunting-halloween.svg),
		url(assets/img/grass-night.svg),
		linear-gradient(180deg, #241C4A 0%, #4B3C7D 100%);
	background-repeat: repeat-x, repeat-x, no-repeat;
	background-position: left top, left bottom, center;
	background-size: 240px 34px, 92px 22px, cover;
}
/* Darken the bars so the green doesn't glow against the night sky. */
.ahs-season-halloween .ahs-navbar,
.ahs-season-halloween .ahs-topbar {
	background-color: #1F5A33;
}

/* ---- Christmas: winter dusk, snow-capped field, red/green bunting ---- */
.ahs-season-christmas .ahs-header-scene {
	background-image:
		url(assets/img/bunting-christmas.svg),
		url(assets/img/grass-snow.svg),
		linear-gradient(180deg, #0F2350 0%, #3E6AA8 78%, #6E93C6 100%);
	background-repeat: repeat-x, repeat-x, no-repeat;
	background-position: left top, left bottom, center;
	background-size: 240px 34px, 92px 22px, cover;
}
/* Wintry pine bars, matching the base of the snowy grass tile. */
.ahs-season-christmas .ahs-navbar,
.ahs-season-christmas .ahs-topbar {
	background-color: #1F4D35;
}

/* ---- Easter: spring sky, pastel bunting, daisies in the grass ---- */
.ahs-season-easter .ahs-header-scene {
	background-image:
		url(assets/img/bunting-easter.svg),
		url(assets/img/grass-spring.svg),
		linear-gradient(180deg, #9FD8F5 0%, #CDEBFA 62%, #F4F3D8 100%);
	background-repeat: repeat-x, repeat-x, no-repeat;
	background-position: left top, left bottom, center;
	background-size: 240px 34px, 92px 22px, cover;
}
/* Bars keep the everyday green — the spring field is the same grass. */

/* ============================================================
   Clickable promo tiles
   A Cover block can't be a link in WordPress, so the visible link inside a
   tile grows an invisible overlay that covers the whole tile (the well-worn
   "stretched link" approach). The link text stays real, so screen readers and
   keyboard users get a proper labelled link rather than a clickable div.
   Edit the URL by selecting the link text inside the tile.
   ============================================================ */
.ahs-tile { position: relative; }
.ahs-tile a.ahs-stretch {
	color: inherit;
	text-decoration: none;
}
.ahs-tile a.ahs-stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}
.ahs-tile:hover a.ahs-stretch { text-decoration: underline; }
/* In the editor the overlay would sit on top of the tile and swallow clicks,
   making the link text impossible to select. Switch it off there — the front
   end is unaffected. */
.editor-styles-wrapper .ahs-tile a.ahs-stretch::after {
	display: none;
}
.ahs-tile:hover { filter: brightness(1.05); }
.ahs-tile a.ahs-stretch:focus-visible::after {
	outline: 3px solid var(--wp--preset--color--amber);
	outline-offset: 3px;
}

/* ---- Donate band: paw-print detailing (decorative, can't be deleted by
   accident in the editor) ---- */
.ahs-donate-band { position: relative; overflow: hidden; }
.ahs-donate-band::before,
.ahs-donate-band::after {
	content: "";
	position: absolute;
	width: 46px;
	height: 46px;
	opacity: 0.16;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2333A64F'%3E%3Cellipse cx='12' cy='16' rx='5.5' ry='4.5'/%3E%3Cellipse cx='5.5' cy='10' rx='2.2' ry='3.2'/%3E%3Cellipse cx='10' cy='6.5' rx='2.2' ry='3.2'/%3E%3Cellipse cx='14' cy='6.5' rx='2.2' ry='3.2'/%3E%3Cellipse cx='18.5' cy='10' rx='2.2' ry='3.2'/%3E%3C/svg%3E");
	pointer-events: none;
}
.ahs-donate-band::before { left: 4%; top: 18%; transform: rotate(-18deg); }
.ahs-donate-band::after { right: 4%; top: 24%; transform: rotate(16deg); }

/* ---- Homepage "Sponsor a rescue" feature panel ----
   The panel needs its own height so it doesn't collapse around a small photo,
   and the photo has to fill its half edge to edge. An Image block inside a
   Column keeps its intrinsic size, so the column is made a flex container and
   the figure told to fill it. */
/* ---- Homepage "Sponsor a rescue" feature panel ----
   A Media & Text block with "Crop image to fill entire column" (imageFill),
   which makes the photo a background on its half and fills it edge to edge —
   natively, with no custom sizing CSS. An Image or Cover inside nested columns
   fought WordPress's own layout classes and never filled properly.
   Only two things are needed here: a height so the panel matches the tile
   stack beside it, and the rounded corner clipping the photo. */
.ahs-help-grid > .wp-block-column:first-child { display: flex; }
.ahs-help-grid > .wp-block-column:first-child > .ahs-feature {
	flex: 1 1 auto;
	width: 100%;
}
.ahs-feature {
	min-height: 383px;
	overflow: hidden;
}
/* Padding belongs on the text half only. Set on the block itself it pads the
   whole grid, which inset the photo away from the panel edges — that was the
   gap that survived every earlier attempt. */
.ahs-feature > .wp-block-media-text__content {
	padding: 30px 26px 30px 30px;
}
@media (max-width: 781px) {
	/* Stacked, so the photo needs a height of its own. */
	.ahs-feature { min-height: 0; }
	.ahs-help-grid > .wp-block-column:first-child { display: block; }
	.ahs-feature .wp-block-media-text__media { min-height: 220px; }
}

/* ---- Latest news cards: all the same height, content aligned ---- */
.ahs-news .wp-block-post-template { align-items: stretch; }
.ahs-news .wp-block-post-template > li { display: flex; }
.ahs-news .wp-block-post-template > li > .wp-block-group {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.ahs-news .wp-block-post-title { margin: 8px 0 4px; }
.ahs-news .wp-block-post-date { margin: 10px 0 0; }
.ahs-news .wp-block-post-excerpt { margin-top: 4px; }
.ahs-news .wp-block-post-featured-image { margin: 0; }
.ahs-news .wp-block-post-featured-image img { border-radius: 12px; }

/* ============================================================
   Birthday panel
   Appears only on an animal's birthday (see [birthday_panel]), so it is
   styled to feel like a one-off celebration rather than a standing banner.
   ============================================================ */
.ahs-birthdays {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ahs-birthday {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
	background: var(--wp--preset--color--sand);
	padding: 18px 26px;
}
/* Paw prints, drawn in CSS so they can't be edited away by accident. */
.ahs-birthday::before,
.ahs-birthday::after {
	content: "";
	position: absolute;
	width: 40px;
	height: 40px;
	opacity: 0.35;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFC01E'%3E%3Cellipse cx='12' cy='16' rx='5.5' ry='4.5'/%3E%3Cellipse cx='5.5' cy='10' rx='2.2' ry='3.2'/%3E%3Cellipse cx='10' cy='6.5' rx='2.2' ry='3.2'/%3E%3Cellipse cx='14' cy='6.5' rx='2.2' ry='3.2'/%3E%3Cellipse cx='18.5' cy='10' rx='2.2' ry='3.2'/%3E%3C/svg%3E");
	pointer-events: none;
}
.ahs-birthday::before { left: 14px; top: 14px; transform: rotate(-18deg); }
.ahs-birthday::after { right: 14px; bottom: 12px; transform: rotate(16deg); }

.ahs-birthday__media { flex: none; line-height: 0; }
.ahs-birthday__photo {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--wp--preset--color--amber);
	display: block;
}
.ahs-birthday__text { text-align: left; }
.ahs-birthday__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.05;
	color: #8a5a00;
	margin: 0;
}
.ahs-birthday__sub {
	font-size: 14px;
	color: #6b5a2e;
	margin: 4px 0 0;
}
.ahs-birthday__cta {
	flex: none;
	background: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 700;
	text-decoration: none;
	padding: 12px 24px;
	border-radius: 999px;
}
.ahs-birthday__cta:hover { background: #F0B000; color: var(--wp--preset--color--ink); }

@media (max-width: 600px) {
	.ahs-birthday { padding: 16px; gap: 14px; }
	.ahs-birthday__text { text-align: center; }
}

/* ---- Archive title with a squiggle underneath ----
   Used by the product catalogue templates. The title is dynamic, so the
   squiggle can't be a rich-text format like the one in the editor toolbar;
   it's drawn under the whole title instead.
   display:table shrink-wraps the heading to its text so the squiggle matches
   the title's width rather than the full column, and the auto margins centre
   it (text-align alone wouldn't, since the heading is block level). */
.ahs-title-squiggle {
	display: table;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	padding-bottom: 0.34em;
}
.ahs-title-squiggle::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0.3em;
	background-color: var(--ahs-accent, var(--wp--preset--color--coral));
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 Q27.5 1 55 7 T110 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 Q27.5 1 55 7 T110 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 110px 100%;
	mask-size: 110px 100%;
	pointer-events: none;
}

/* ============================================================
   Form panel  (.ahs-form-panel)
   Styling is scoped to a wrapper class you add to the Group around the form,
   and targets plain elements (input, select, textarea, button) rather than any
   plugin's own class names — so it works with FormLayer and would survive
   swapping form plugins again.

   To use: wrap the form block in a Group → set its background to Grass tint
   → apply the "Stitched" block style → add ahs-form-panel under
   Advanced → Additional CSS class(es).
   ============================================================ */
.ahs-form-panel {
	padding: clamp(20px, 3vw, 32px);
	border-radius: 18px;
}

/* FormLayer wraps each field in .formlayer-field-wrap and gives it a large
   margin. Spacing is handled by the fields themselves below, so flatten it —
   scoped to the panel so FormLayer's own defaults still apply elsewhere. */
.ahs-form-panel .formlayer-field-wrap {
	margin: 0;
}

/* Labels */
.ahs-form-panel label {
	display: block;
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 700;
	font-size: 14px;
	color: var(--wp--preset--color--ink);
	margin-bottom: 6px;
}

/* Fields */
.ahs-form-panel input[type="text"],
.ahs-form-panel input[type="email"],
.ahs-form-panel input[type="tel"],
.ahs-form-panel input[type="url"],
.ahs-form-panel input[type="number"],
.ahs-form-panel input[type="date"],
.ahs-form-panel input[type="search"],
.ahs-form-panel input[type="password"],
.ahs-form-panel select,
.ahs-form-panel textarea {
	width: 100%;
	box-sizing: border-box;
	background: #ffffff;
	border: 2px solid var(--ahs-accent-mid, var(--wp--preset--color--sage-mid));
	border-radius: 12px;
	padding: 12px 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;            /* 16px stops iOS zooming on focus */
	color: var(--wp--preset--color--ink);
	margin-bottom: 16px;
}
.ahs-form-panel textarea { min-height: 140px; resize: vertical; }

.ahs-form-panel ::placeholder {
	color: #8a8271;
	opacity: 1;
}

.ahs-form-panel input:focus,
.ahs-form-panel select:focus,
.ahs-form-panel textarea:focus {
	outline: none;
	border-color: var(--ahs-accent, var(--wp--preset--color--sage));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ahs-accent, var(--wp--preset--color--sage)) 25%, transparent);
}

/* Checkboxes and radios keep their own size */
.ahs-form-panel input[type="checkbox"],
.ahs-form-panel input[type="radio"] {
	width: auto;
	margin-right: 8px;
	accent-color: var(--wp--preset--color--sage);
}

/* Submit — matches the theme's pill buttons */
.ahs-form-panel button[type="submit"],
.ahs-form-panel input[type="submit"] {
	background: var(--wp--preset--color--sage);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 700;
	font-size: 16px;
	border: 0;
	border-radius: 999px;
	padding: 14px 30px;
	cursor: pointer;
	width: auto;
}
.ahs-form-panel button[type="submit"]:hover,
.ahs-form-panel input[type="submit"]:hover {
	background: var(--wp--preset--color--forest);
}

/* Validation messages */
.ahs-form-panel [aria-invalid="true"] { border-color: #b3261e; }