/*
Theme Name:   Highlandkatz
Description:  Dark, elegant block theme for the Highlandkatz Selkirk Rex cattery in black and charcoal with antique gold and bronze, matched to the Highlandkatz banner. Use with the Highlandkatz Cats plugin.
Version:      1.0.3
Requires at least: 6.4
Requires PHP: 7.4
Author:       Highlandkatz
License:      GPL-2.0-or-later
Text Domain:  highlandkatz
*/

/* Visible keyboard focus everywhere. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
	border-radius: 4px;
}
::selection { background: var(--wp--preset--color--bronze); color: var(--wp--preset--color--white); }

/* The banner and menu bar sit flush, with no gap between them. */
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks > main, .wp-site-blocks > .hkz-main { margin-block-start: 0; }

/* ---------- Banner ---------- */
/* The banner artwork under the menu bar, full width on a black band, never
   cropped. On very wide screens it stays at its own size, centered. The two
   main buttons sit over its bottom left corner. Phones don't get the banner;
   they get the home page's intro section instead (.hkz-mobile-only). */
.hkz-banner-wrap {
	position: relative;
	max-width: 1584px;
	margin: 0 auto;
	line-height: 0;
}
.hkz-banner-part, p:has(> .hkz-banner-wrap) { margin: 0; background: #000; }
/* WordPress wraps the banner shortcode in a paragraph; drop its spacing. */
.hkz-banner-part p { margin: 0; }
.hkz-banner-part p:empty { display: none; }
.hkz-banner { display: block; }
.hkz-banner img {
	display: block;
	width: 100%;
	height: auto;
}
.hkz-banner-actions {
	position: absolute;
	left: clamp(1rem, 3vw, 2.5rem);
	bottom: clamp(1rem, 3vw, 2.25rem);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	line-height: 1.3;
}
.hkz-banner-button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	border: 2px solid var(--wp--preset--color--gold);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--black) !important;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none !important;
	box-shadow: 0 6px 18px rgb(0 0 0 / 0.55);
}
.hkz-banner-button:hover { background: var(--wp--preset--color--gold-light); border-color: var(--wp--preset--color--gold-light); }
.hkz-banner-button-outline {
	background: rgb(10 10 9 / 0.7);
	color: var(--wp--preset--color--gold) !important;
}
.hkz-banner-button-outline:hover { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--black) !important; }
@media (max-width: 1000px) {
	.hkz-banner-button { padding: 0.55rem 1.1rem; font-size: 0.9rem; }
}
@media (max-width: 781px) {
	.hkz-banner-part, .hkz-banner-wrap { display: none !important; }
}
/* The home page intro shows on phones only; computers see the banner. */
@media (min-width: 782px) {
	.hkz-mobile-only { display: none !important; }
	.hkz-front { padding-top: var(--wp--preset--spacing--30); }
}

/* ---------- Menu bar ---------- */
/* The menu bar is the first thing on the page and stays at the top while scrolling. */
.hkz-sticky { position: sticky; top: 0; z-index: 50; }
.admin-bar .hkz-sticky { top: 32px; }
@media (max-width: 782px) { .admin-bar .hkz-sticky { top: 0; position: relative; } }
.hkz-header {
	border-top: 1px solid var(--wp--preset--color--bronze-dark);
	border-bottom: 2px solid var(--wp--preset--color--bronze);
	box-shadow: 0 6px 20px rgb(0 0 0 / 0.45);
}
/* Room for a logo: a file named highlandkatz-logo.png in assets/images shows
   here; until then the cattery name is shown in gold capitals. */
.hkz-logo { display: block; line-height: 0; }
.hkz-logo img { display: block; height: clamp(44px, 6vw, 64px); width: auto; }
.hkz-logo-text {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold) !important;
	text-decoration: none !important;
	white-space: nowrap;
}
.hkz-header p:has(> .hkz-logo), .hkz-header p:has(> .hkz-logo-text) { margin: 0; }
@media (min-width: 600px) and (max-width: 1000px) {
	.hkz-header .wp-block-navigation { gap: 1rem !important; font-size: 0.95rem; }
}
.hkz-header .wp-block-navigation a { text-decoration: none; }
.hkz-header .wp-block-navigation,
.hkz-header .wp-block-navigation a { color: var(--wp--preset--color--cream); }
.hkz-header .wp-block-navigation-item > a:hover,
.hkz-header .wp-block-navigation-submenu > button:hover { color: var(--wp--preset--color--gold-light); }
.hkz-header .wp-block-navigation__responsive-container.is-menu-open a { color: var(--wp--preset--color--cream); }
.hkz-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; border: 0 !important; }
.hkz-header .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--wp--preset--color--bronze); }
/* Dropdowns: dark panels with a bronze edge, as wide as their longest item. */
@media (min-width: 600px) {
	.hkz-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%);
		width: max-content !important;
		min-width: 190px !important;
		top: calc(100% + 0.6rem) !important;
		border-radius: 12px;
		border: 1px solid var(--wp--preset--color--bronze-dark) !important;
		padding: 0.45rem !important;
		box-shadow: 0 14px 34px rgb(0 0 0 / 0.55);
		background: var(--wp--preset--color--charcoal) !important;
		color: var(--wp--preset--color--cream) !important;
	}
	/* Invisible bridge so the menu doesn't close while moving the mouse down. */
	.hkz-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -0.7rem;
		height: 0.7rem;
	}
	.hkz-header .wp-block-navigation__submenu-container a {
		display: block;
		padding: 0.5rem 0.9rem !important;
		border-radius: 8px;
		font-weight: 600;
		white-space: nowrap;
	}
	.hkz-header .wp-block-navigation__submenu-container a:hover,
	.hkz-header .wp-block-navigation__submenu-container a:focus-visible {
		background: var(--wp--preset--color--charcoal-light);
		color: var(--wp--preset--color--gold-light);
		text-decoration: none !important;
	}
}
.hkz-nav-cta > a {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--black) !important;
	padding: 0.45rem 1.15rem !important;
	border-radius: 999px;
}
.hkz-nav-cta > a:hover { background: var(--wp--preset--color--gold-light); text-decoration: none !important; }
.wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .hkz-nav-cta > a { display: inline-block; }
.hkz-header .wp-block-navigation__responsive-container-open,
.hkz-header .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--gold); }

/* ---------- Page layout ---------- */
/* Jump links (e.g. /our-cats/#queens) land below the sticky menu bar. */
[id] { scroll-margin-top: 90px; }
.hkz-main { padding-top: var(--wp--preset--spacing--50); }
.hkz-front { padding-top: 0; }
.hkz-page-title { margin-bottom: var(--wp--preset--spacing--40); }
/* Page titles and big headings in the spaced capitals of the banner. */
h1.wp-block-heading, .hkz-page-title, .wp-block-post-title {
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--gold);
}
/* A thin bronze flourish under section headings, echoing the banner's knotwork. */
.hkz-main h2.wp-block-heading:not(.hkz-panel h2):not(.hkz-highlights h2)::after {
	content: "";
	display: block;
	width: 72px;
	height: 2px;
	margin-top: 0.6rem;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), var(--wp--preset--color--bronze-dark));
	border-radius: 2px;
}
hr, .wp-block-separator { border-color: var(--wp--preset--color--line); }

/* ---------- Home intro (under the banner) ---------- */
.hkz-intro {
	text-align: center;
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--30);
}
.hkz-intro .wp-block-buttons { justify-content: center; }
.hkz-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wp--preset--color--bronze) !important;
	filter: brightness(1.35);
}
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--gold);
	border: 2px solid var(--wp--preset--color--gold);
	background: transparent;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	color: var(--wp--preset--color--black);
	background: var(--wp--preset--color--gold);
}

/* ---------- Highlights, panels and lists ---------- */
.hkz-highlights { margin-top: var(--wp--preset--spacing--50) !important; }
.hkz-highlights > .wp-block-column {
	background: var(--wp--preset--color--charcoal-light);
	border: 1px solid var(--wp--preset--color--line);
	border-top: 3px solid var(--wp--preset--color--gold);
	border-radius: 14px;
	padding: 1.5rem;
}
.hkz-highlights h2 { margin-top: 0; }
.hkz-panel {
	border-radius: 18px;
	border: 1px solid var(--wp--preset--color--line);
	padding: clamp(1.25rem, 4vw, 2.5rem) !important;
	margin-top: var(--wp--preset--spacing--50) !important;
}
.hkz-panel > :first-child { margin-top: 0; }
.hkz-cta { text-align: center; background-image: radial-gradient(ellipse at 50% 0%, rgb(194 165 110 / 0.16), transparent 65%); }
.hkz-cta .wp-block-buttons { justify-content: center; }
.hkz-scam { border-left: 4px solid var(--wp--preset--color--bronze) !important; }

.hkz-checklist { list-style: none; padding-left: 0; }
.hkz-checklist li { position: relative; padding-left: 2rem; margin-bottom: 0.5rem; }
.hkz-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230A0A09' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}

.hkz-steps { counter-reset: step; list-style: none; padding-left: 0; }
.hkz-steps li {
	counter-increment: step;
	position: relative;
	padding: 1rem 1rem 1rem 4rem;
	margin-bottom: 0.75rem;
	background: var(--wp--preset--color--charcoal-light);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
}
.hkz-steps li::before {
	content: counter(step);
	position: absolute;
	left: 1rem;
	top: 1rem;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--black);
	border: 1.5px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	font-weight: 700;
	font-family: var(--wp--preset--font-family--heading);
}

.hkz-option-grid > .wp-block-column {
	background: var(--wp--preset--color--charcoal-light);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: 1.25rem 1.5rem;
}
.hkz-option-grid h3 { margin-top: 0; }

.hkz-faq {
	background: var(--wp--preset--color--charcoal-light);
	padding: 0.9rem 1.2rem;
	margin-bottom: 0.6rem !important;
}
.hkz-faq summary { font-weight: 700; cursor: pointer; }
.hkz-faq[open] summary { margin-bottom: 0.5rem; }

/* ---------- Footer ---------- */
.hkz-footer { border-top: 2px solid var(--wp--preset--color--bronze); }
.hkz-footer h2 { margin-top: 0; }
.hkz-footer .wp-block-site-title a { letter-spacing: 0.14em; text-transform: uppercase; }
.hkz-footer-links { list-style: none; padding-left: 0; }
.hkz-footer-links li { margin-bottom: 0.35rem; }
.hkz-footer a { text-decoration: none; }
.hkz-footer a:hover { text-decoration: underline; }
.hkz-footer-bottom { margin-top: var(--wp--preset--spacing--50) !important; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--wp--preset--color--line); }
.hkz-copyright { margin: 0 !important; opacity: 0.8; }
.hkz-credit { margin: 0 !important; opacity: 0.8; }
.hkz-credit:hover { opacity: 1; }
.hkz-registries { letter-spacing: 0.12em; font-weight: 700; }
.hkz-footer-scam { opacity: 0.8; }
.hkz-footer .hkz-social { display: flex; flex-direction: column; gap: 0.35rem; }
.hkz-footer .hkz-social span { display: none; }

/* ---------- Gallery: Carousel style ---------- */
/* Photos sit in one sliding row: 4 across in a portrait 2:3 frame (or the gallery's Columns number),
   3 on tablets, 2 on phones. Visitors can swipe or use the arrows. */
.hkz-carousel { position: relative; }
.wp-block-gallery.is-style-hkz-carousel {
	--hkz-per-view: 4;
	--hkz-gap: 1rem;
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--hkz-gap) !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.wp-block-gallery.is-style-hkz-carousel::-webkit-scrollbar { display: none; }
.wp-block-gallery.is-style-hkz-carousel.columns-2 { --hkz-per-view: 2; }
.wp-block-gallery.is-style-hkz-carousel.columns-3 { --hkz-per-view: 3; }
.wp-block-gallery.is-style-hkz-carousel.has-nested-images figure.wp-block-image {
	flex: 0 0 calc((100% - (var(--hkz-per-view) - 1) * var(--hkz-gap)) / var(--hkz-per-view)) !important;
	width: auto !important;
	margin: 0 !important;
	scroll-snap-align: start;
	border-radius: 18px;
	overflow: hidden;
}
.wp-block-gallery.is-style-hkz-carousel.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100% !important;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}
@media (max-width: 900px) { .wp-block-gallery.is-style-hkz-carousel { --hkz-per-view: 3 !important; } }
@media (max-width: 600px) { .wp-block-gallery.is-style-hkz-carousel { --hkz-per-view: 2 !important; } }
.hkz-carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--gold);
	border: 1px solid var(--wp--preset--color--bronze) !important;
	font-size: 1.9rem;
	line-height: 1;
	padding: 0 0 0.2rem;
	cursor: pointer;
	box-shadow: 0 4px 14px rgb(0 0 0 / 0.25);
	z-index: 2;
}
.hkz-carousel-arrow:hover { background: var(--wp--preset--color--bronze-dark); }
.hkz-carousel-prev { left: -0.9rem; }
.hkz-carousel-next { right: -0.9rem; }
@media (max-width: 600px) { .hkz-carousel-prev { left: 0.25rem; } .hkz-carousel-next { right: 0.25rem; } }

/* Cat page main photo: portrait 2:3, kept to a sensible size on phones. */
@media (max-width: 781px) {
	.hkz-cat-photo { max-width: 420px; margin-left: auto; margin-right: auto; }
}