/*
Theme Name: Prof Keith
Theme URI: https://www.profkeith.com/
Author: Prof Keith
Description: A warm, highly legible block theme for Professor Keith Brown's free resources for health, social care and faith-based organisations. Includes ready-made patterns for the home page, resource libraries, about and contact pages, plus a high-contrast style variation.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: profkeith
Tags: block-patterns, full-site-editing, accessibility-ready, custom-colors, editor-style, one-column, wide-blocks
*/

/* ---------- Base ---------- */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection { background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--contrast); }

:where(.wp-site-blocks) :focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 { font-variation-settings: "SOFT" 50, "WONK" 0; text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- Header ---------- */

.pk-header {
	position: sticky;
	top: 0;
	z-index: 50;
	/* Solid background: a backdrop-filter here would trap the mobile menu overlay inside the header. */
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.admin-bar .pk-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .pk-header { top: 0; } }

.pk-brand .wp-block-site-title { margin: 0; }
.pk-brand .wp-block-site-tagline { margin: 0.2rem 0 0; line-height: 1.3; }
.pk-brand-mark {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	margin: 0;
}
.pk-brand-mark img { border-radius: 50% !important; display: block; }

.pk-header .wp-block-navigation-item__content { padding: 0.35rem 0; position: relative; text-decoration: none; }
.pk-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 2px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}
.pk-header .wp-block-navigation-item__content:hover::after,
.pk-header .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.pk-header .wp-block-navigation__responsive-container.is-menu-open { padding: 2rem; }
.pk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.375rem; }
.pk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }

@media (min-width: 782px) { .pk-nav-contact { display: none !important; } }
@media (max-width: 781px) {
	.pk-header-cta { display: none !important; }
	.pk-brand .wp-block-site-tagline { display: none; }
}

/* ---------- Eyebrow headings ---------- */

.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-text);
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.is-style-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--wp--preset--color--accent);
	flex-shrink: 0;
}
.has-text-align-center.is-style-eyebrow { justify-content: center; }
.has-primary-dark-background-color .is-style-eyebrow,
.has-contrast-background-color .is-style-eyebrow { color: var(--wp--preset--color--accent-soft); }

/* ---------- Hero ---------- */

.pk-hero { position: relative; overflow: hidden; }
.pk-hero::before {
	content: "";
	position: absolute;
	inset: auto -10% -45% auto;
	width: min(70vw, 760px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at center, var(--wp--preset--color--accent-soft) 0%, transparent 65%);
	opacity: 0.7;
	pointer-events: none;
}
.pk-hero > * { position: relative; }
.pk-hero h1 em { font-style: italic; color: var(--wp--preset--color--primary); font-weight: 400; }

.pk-portrait { position: relative; }
.pk-portrait .wp-block-image { margin: 0; }
.pk-portrait .wp-block-image img {
	border-radius: 999px 999px var(--wp--custom--radius--large) var(--wp--custom--radius--large) !important;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	box-shadow: var(--wp--preset--shadow--lifted);
}
.pk-portrait-badge {
	position: absolute !important;
	left: -1.5rem;
	bottom: 1.75rem;
	max-width: 260px;
	margin: 0 !important;
}
@media (max-width: 781px) {
	.pk-portrait-badge { position: relative !important; left: auto; bottom: auto; margin-top: -2.5rem !important; margin-inline: auto !important; }
}

/* ---------- Trust bar ---------- */

.pk-trust .wp-block-column { display: flex; gap: 0.9rem; align-items: flex-start; }
.pk-trust .wp-block-image { flex-shrink: 0; margin: 0; }
.pk-trust p { margin: 0; }

/* ---------- Cards ---------- */

.is-style-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--soft);
}

.pk-topic {
	position: relative;
	height: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pk-topic:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--lifted); border-color: var(--wp--preset--color--accent); }
.pk-topic .pk-icon { margin: 0 0 0.25rem; }
.pk-topic h3 a { text-decoration: none; color: inherit; }
/* The whole card is clickable via the heading link. */
.pk-topic h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pk-topic .pk-topic-more { margin-top: auto !important; font-weight: 600; color: var(--wp--preset--color--primary); }
.pk-topic .pk-topic-more::after { content: " →"; transition: margin 0.2s ease; }
.pk-topic:hover .pk-topic-more::after { margin-left: 0.25em; }

.pk-icon img { width: 56px; height: 56px; border-radius: 0 !important; }

/* Grid columns stretch cards to equal height */
.pk-topics.wp-block-group.is-layout-grid > * { height: 100%; }

/* ---------- Resource cards ---------- */

.is-style-resource {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--soft);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.is-style-resource:hover { box-shadow: var(--wp--preset--shadow--lifted); border-color: var(--wp--preset--color--accent); }
.is-style-resource .wp-block-image { margin: 0; }
.is-style-resource .wp-block-image img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
	border-radius: var(--wp--custom--radius--small) !important;
	box-shadow: 0 1px 2px rgba(26,34,51,.1), 0 6px 16px rgba(26,34,51,.12);
}
.is-style-resource h3 { margin-top: 0; }
.is-style-resource .wp-block-columns { margin-bottom: 0; }
.is-style-resource p { margin: 0; }
.is-style-resource .wp-block-column:last-child { display: flex; flex-direction: column; }
.is-style-resource .wp-block-buttons { margin-top: auto !important; padding-top: 0.75rem; }
.pk-library > * { height: 100%; }
@media (max-width: 600px) {
	.pk-resource-cover { flex-basis: 84px !important; }
}

.pk-meta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8125rem !important;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-text);
	margin: 0 !important;
}

/* ---------- Arrow button style ---------- */

.wp-block-button.is-style-arrow .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--primary) !important;
	padding: 0.25rem 0 !important;
	border-radius: 0;
	border-bottom: 2px solid var(--wp--preset--color--accent);
}
.wp-block-button.is-style-arrow .wp-block-button__link::after {
	content: "→";
	display: inline-block;
	margin-left: 0.5em;
	transition: transform 0.2s ease;
}
.wp-block-button.is-style-arrow .wp-block-button__link.is-external::after { content: "↗"; }
.wp-block-button.is-style-arrow .wp-block-button__link:hover { color: var(--wp--preset--color--primary-dark) !important; }
.wp-block-button.is-style-arrow .wp-block-button__link:hover::after { transform: translateX(3px); }

/* Buttons on dark backgrounds */
.has-primary-dark-background-color .wp-block-button:not(.is-style-outline):not(.is-style-arrow) .wp-block-button__link,
.has-contrast-background-color .wp-block-button:not(.is-style-outline):not(.is-style-arrow) .wp-block-button__link {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
}
.has-primary-dark-background-color .wp-block-button:not(.is-style-outline):not(.is-style-arrow) .wp-block-button__link:hover,
.has-contrast-background-color .wp-block-button:not(.is-style-outline):not(.is-style-arrow) .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
}
.has-primary-dark-background-color .is-style-outline .wp-block-button__link,
.has-contrast-background-color .is-style-outline .wp-block-button__link { color: var(--wp--preset--color--white); }

/* ---------- Tick list ---------- */

.is-style-tick { list-style: none; padding-left: 0 !important; }
.is-style-tick li { position: relative; padding-left: 2rem; margin-bottom: 0.6rem; }
.is-style-tick li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231D5753' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}

/* ---------- Testimonial ---------- */

.pk-testimonial { position: relative; }
.pk-testimonial::before {
	content: "“";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 7rem;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	opacity: 0.35;
	pointer-events: none;
}
.pk-testimonial .wp-block-pullquote { padding: 0; margin: 0; }
.pk-testimonial .wp-block-pullquote blockquote p { font-size: inherit; }
.pk-testimonial { padding-top: 4.75rem; }
.pk-testimonial .wp-block-pullquote cite { display: block; margin-top: 1.75rem; text-transform: none; letter-spacing: 0; color: #C9D6D3; font-size: 1rem; line-height: 1.5; }
.pk-testimonial .wp-block-pullquote cite strong { display: block; font-size: 1.0625rem; color: var(--wp--preset--color--white); }

/* ---------- Partners ---------- */

.pk-partners { align-items: center; }
.pk-partners .wp-block-image { margin: 0; display: flex; justify-content: center; }
.pk-partners .wp-block-image img {
	height: 72px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.2s ease, opacity 0.2s ease;
	border-radius: 0 !important;
}
.pk-partners .wp-block-image:hover img { filter: none; opacity: 1; }

/* ---------- Page title band ---------- */

.pk-page-band { position: relative; overflow: hidden; }
.pk-page-band::after {
	content: "";
	position: absolute;
	right: -120px;
	top: -120px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--accent);
	opacity: 0.35;
	box-shadow: 0 0 0 40px rgba(194,142,58,0.06), 0 0 0 80px rgba(194,142,58,0.04);
	pointer-events: none;
}
.pk-page-band .wp-block-post-excerpt__excerpt { font-size: var(--wp--preset--font-size--large); line-height: 1.5; color: var(--wp--preset--color--muted); max-width: 46ch; }
.pk-page-band .wp-block-post-excerpt__more-text { display: none; }

/* ---------- Footer ---------- */

.pk-footer a { color: inherit; text-decoration: none; }
.pk-footer a:hover { text-decoration: underline; color: var(--wp--preset--color--white); }
.pk-footer .wp-block-navigation-item__content { padding: 0.15rem 0; }
.pk-footer .wp-block-site-title a { color: var(--wp--preset--color--white); }
.pk-footer-mark img { border-radius: 50% !important; }

/* ---------- Contact ---------- */

.pk-contact-card .wp-block-image img { border-radius: 0 !important; }

/* ---------- Inline quote (about page) ---------- */

.pk-inline-quote { border-left: 4px solid var(--wp--preset--color--accent) !important; padding: 0 0 0 var(--wp--preset--spacing--40) !important; }
.pk-inline-quote blockquote p { color: var(--wp--preset--color--primary); }

/* ---------- Forms (works with most form plugins) ---------- */

.wp-site-blocks input[type="text"],
.wp-site-blocks input[type="email"],
.wp-site-blocks input[type="tel"],
.wp-site-blocks input[type="url"],
.wp-site-blocks textarea,
.wp-site-blocks select {
	width: 100%;
	font: inherit;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	padding: 0.8rem 1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wp-site-blocks textarea { min-height: 10rem; }
.wp-site-blocks input:focus,
.wp-site-blocks textarea:focus,
.wp-site-blocks select:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent);
}
.wp-site-blocks label { font-weight: 600; font-size: 1rem; }
.wp-site-blocks input[type="submit"],
.wp-site-blocks button[type="submit"]:not(.wp-block-search__button) {
	font: inherit;
	font-weight: 600;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: 999px;
	padding: 0.85rem 1.75rem;
	cursor: pointer;
}
.wp-site-blocks input[type="submit"]:hover,
.wp-site-blocks button[type="submit"]:not(.wp-block-search__button):hover { background: var(--wp--preset--color--primary-dark); }

/* ---------- Misc ---------- */

.wp-block-search__input {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.75rem 1.1rem;
	background: var(--wp--preset--color--white);
	font: inherit;
}
.wp-block-search__button { margin-left: 0.5rem; }

.wp-block-query-pagination { font-weight: 600; }

/* Space between the title band and page content */
.pk-page-band + .wp-block-post-content { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.is-style-eyebrow a { color: inherit; text-decoration: none; }
.is-style-eyebrow a:hover { text-decoration: underline; }
@media (max-width: 781px) {
	.pk-portrait { max-width: 340px; margin-inline: auto; }
}

/* Mobile menu overlay */
.pk-header .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--contrast) !important; }
.pk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.pk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start !important; }
.pk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-family: var(--wp--preset--font-family--heading); font-weight: 500; font-size: 1.75rem; }