/*
Theme Name: Handhold
Theme URI: https://example.com/handhold
Author: Hugo Rifbjerg
Author URI: https://example.com
Description: A calm, human block theme for managed WordPress hosting and small-business websites. Warm paper tones, a serif voice for headings, generous whitespace and plain-language layouts — built for owners who would rather run their business than their website. Full Site Editing, automatic dark mode, self-hosted fonts, no build step.
Requires at least: 6.6
Tested up to: 7.1
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: handhold
Tags: block-theme, full-site-editing, blog, business, one-column, two-columns, wide-blocks, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready, accessibility-ready
*/

/* ==========================================================================
   1. Automatic dark mode
   --------------------------------------------------------------------------
   theme.json ships both palettes so editors can pick either one by hand.
   This block remaps the semantic preset variables when the visitor's OS asks
   for dark, so the site simply looks right without anyone touching a setting.
   `:root:root` outranks WordPress's own `:root` regardless of style order.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
	:root:root {
		--wp--preset--color--base: #131210;
		--wp--preset--color--surface: #1D1B18;
		--wp--preset--color--contrast: #F4F1EA;
		--wp--preset--color--muted: #B0A99E;
		--wp--preset--color--primary: #7FD6B0;
		--wp--preset--color--primary-strong: #A7E6C9;
		--wp--preset--color--primary-tint: #1B3A31;
		--wp--preset--color--accent: #F0B863;
		--wp--preset--color--accent-strong: #F7CD8F;
		--wp--preset--color--accent-tint: #3A2C15;
		--wp--preset--color--border: #2E2A25;
		--wp--preset--color--warm-glow: linear-gradient(165deg, #131210 0%, #1B1815 100%);
	}
}

/* ==========================================================================
   2. Base behaviour
   ========================================================================== */
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	/* Stops the page shifting sideways when a modal/menu locks scrolling. */
	scrollbar-gutter: stable;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Consistent, visible keyboard focus everywhere. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-strong);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--small);
}

/* The skip link itself is provided and styled by WordPress core
   (#wp-skip-link → #content), so the theme does not add a second one. */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   2b. Left edge alignment
   --------------------------------------------------------------------------
   WordPress centres constrained content inside a wide container. On a landing
   page that puts section headings ~290px to the right of the card grids below
   them, which reads as a mistake. Anchoring constrained children to the left of
   a wide group makes headings, prose and grids share one left edge, while
   leaving the reading measure capped at the content size.
   ========================================================================== */
.is-layout-constrained.alignwide > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
	max-width: var(--wp--style--global--content-size);
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* ==========================================================================
   3. Header
   ========================================================================== */
.hh-header {
	position: relative;
	z-index: 100;
	background: var(--wp--preset--color--base);
	border-bottom: var(--wp--custom--hairline);
}

/* Sticky (set in the header template part) — translucent, content reads through. */
.hh-header {
	position: sticky;
	top: 0;
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	backdrop-filter: saturate(150%) blur(12px);
	-webkit-backdrop-filter: saturate(150%) blur(12px);
}

.hh-header .wp-block-navigation a {
	position: relative;
	padding-bottom: 2px;
}

/* Underline grows from the left on hover — feedback, not decoration. */
.hh-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	height: 2px;
	width: 100%;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--wp--custom--transition);
}

.hh-header .wp-block-navigation a:hover::after,
.hh-header .wp-block-navigation .current-menu-item > a::after,
.hh-header .wp-block-navigation .current_page_item > a::after {
	transform: scaleX(1);
}

.hh-header .wp-block-navigation a:focus-visible::after {
	transform: scaleX(1);
}

.wp-block-site-title a {
	transition: color var(--wp--custom--transition);
}

/* On a phone the hero carries the call to action; a second one in the header
   only forces the bar to wrap onto two rows. */
@media (max-width: 640px) {
	.hh-header .wp-block-buttons {
		display: none;
	}

	.hh-header .wp-block-site-title,
	.hh-header .wp-block-site-title a {
		font-size: 1.15rem;
		line-height: 1.3;
	}
}

/* ==========================================================================
   4. Buttons & links
   ========================================================================== */
.wp-block-button__link {
	transition: background-color var(--wp--custom--transition),
		color var(--wp--custom--transition),
		transform var(--wp--custom--transition),
		box-shadow var(--wp--custom--transition);
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: var(--wp--preset--shadow--soft);
}

.wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Quiet: a link that reads like a link, for secondary actions. */
.wp-block-button.is-style-quiet .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border-color: transparent;
	padding-left: 0.4rem;
	padding-right: 0.4rem;
}

.wp-block-button.is-style-quiet .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-tint);
	color: var(--wp--preset--color--primary-strong);
	box-shadow: none;
}

/* Outline: same footprint as the solid button, lower emphasis. */
.wp-block-button.is-style-outline-hh .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--border);
}

.wp-block-button.is-style-outline-hh .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-strong);
}

/* Accent: warm amber, for the one action you really want clicked. */
.wp-block-button.is-style-accent-hh .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: #FFFFFF;
}

.wp-block-button.is-style-accent-hh .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-strong);
	color: #FFFFFF;
}

/* Full-width, thumb-friendly buttons on small screens. */
@media (max-width: 480px) {
	.wp-block-buttons.is-style-hh-stack-mobile {
		flex-direction: column;
	}

	.wp-block-buttons.is-style-hh-stack-mobile > .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons.is-style-hh-stack-mobile .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* ==========================================================================
   5. Text helpers
   ========================================================================== */
.is-style-hh-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.is-style-hh-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
	letter-spacing: -0.01em;
}

.is-style-hh-note {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}

.is-style-hh-balance {
	text-wrap: balance;
}

.is-style-hh-pretty {
	text-wrap: pretty;
}

/* ==========================================================================
   6. Surfaces: cards & panels
   ========================================================================== */
.is-style-hh-card {
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--hairline);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--50);
	box-shadow: var(--wp--preset--shadow--soft);
	transition: transform var(--wp--custom--transition),
		box-shadow var(--wp--custom--transition),
		border-color var(--wp--custom--transition);
}

.is-style-hh-card.is-style-hh-lift:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--lift);
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, var(--wp--preset--color--border));
}

/* The one card you want people to pick. */
.is-style-hh-card.is-style-hh-featured {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 50%, var(--wp--preset--color--border));
	box-shadow: var(--wp--preset--shadow--lift);
}

.is-style-hh-panel {
	background: var(--wp--preset--color--primary-tint);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--60);
}

/* An "ink" panel: flips to a light panel in dark mode on purpose. */
.is-style-hh-ink {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--card);
}

.is-style-hh-ink h1,
.is-style-hh-ink h2,
.is-style-hh-ink h3,
.is-style-hh-ink h4,
.is-style-hh-ink .is-style-hh-eyebrow {
	color: var(--wp--preset--color--base);
}

.is-style-hh-ink a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--base);
}

.is-style-hh-ink .is-style-hh-lead,
.is-style-hh-ink .is-style-hh-note {
	color: color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent);
}

.is-style-hh-hairline-top {
	border-top: var(--wp--custom--hairline);
}

.is-style-hh-hairline-bottom {
	border-bottom: var(--wp--custom--hairline);
}

/* ==========================================================================
   7. Post meta & cards
   ========================================================================== */
.hh-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.hh-meta > * + *::before {
	content: "·";
	margin-right: 0.5rem;
	color: var(--wp--preset--color--border);
}

.hh-post-card .wp-block-post-featured-image img {
	transition: transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hh-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.hh-post-card .wp-block-post-featured-image {
	overflow: hidden;
}

.hh-post-card .wp-block-post-title a {
	transition: color var(--wp--custom--transition);
}

.hh-post-card:hover .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
}

.wp-block-post-terms a {
	border-bottom: 1px solid transparent;
	transition: border-color var(--wp--custom--transition);
}

.wp-block-post-terms a:hover {
	border-color: currentColor;
}

/* ==========================================================================
   8. Article typography
   ========================================================================== */
.hh-entry .entry-content > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* WordPress's constrained layout puts a uniform block gap above every child, so
   headings have to out-specify that rule to earn extra air. The literal
   fallback keeps the rhythm intact even when a spacing preset is not emitted. */
.hh-entry .entry-content > :is(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--70, 4.5rem);
}

.hh-entry .entry-content > :is(h2, h3, h4) + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.hh-entry ul,
.hh-entry ol {
	padding-inline-start: 1.35rem;
}

.hh-entry li + li {
	margin-block-start: 0.5rem;
}

.hh-entry img {
	height: auto;
}

.hh-entry figcaption {
	margin-block-start: 0.75rem;
}

/* Lede paragraph: the opening paragraph gets a touch more presence.
   core/post-content wraps the article in .entry-content, so the selectors have
   to reach through that wrapper. */
.hh-entry .entry-content > p:first-of-type:not(.is-style-hh-note) {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

.hh-entry blockquote {
	margin-inline: 0;
}

/* ==========================================================================
   9. FAQ / details
   ========================================================================== */
.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.015em;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.35rem;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	transition: transform var(--wp--custom--transition);
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.wp-block-details summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-strong);
	outline-offset: 4px;
}

.wp-block-details > *:not(summary) {
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   10. Forms
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	width: 100%;
	max-width: 100%;
	padding: 0.7rem 0.9rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	transition: border-color var(--wp--custom--transition),
		box-shadow var(--wp--custom--transition);
}

input:hover,
textarea:hover,
select:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--border));
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
	outline: none;
}

input::placeholder,
textarea::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--muted) 75%, transparent);
}

label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Contact Form 7 keeps its own markup; just make it breathe. */
.wpcf7 input[type="submit"] {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.8rem 1.6rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition);
}

.wpcf7 input[type="submit"]:hover {
	background: var(--wp--preset--color--primary-strong);
}

.wpcf7-not-valid-tip {
	color: var(--wp--preset--color--accent-strong);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
}

.wpcf7 form .wpcf7-response-output {
	border-radius: var(--wp--custom--radius--small);
	font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   10b. Checklists & step numbers
   ========================================================================== */
.wp-block-list.is-style-hh-checklist {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.is-style-hh-checklist li {
	position: relative;
	padding-inline-start: 1.75rem;
	/* Stops a single word orphaning onto the last line of a checklist item. */
	text-wrap: pretty;
}

.wp-block-list.is-style-hh-checklist li::before {
	content: "";
	position: absolute;
	left: 0.1rem;
	top: 0.6em;
	width: 0.6rem;
	height: 0.32rem;
	border-left: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: rotate(-45deg);
}

.hh-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 0 var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary-tint);
	color: var(--wp--preset--color--primary-strong);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
}

/* ==========================================================================
   11. Footer
   ========================================================================== */
.hh-footer {
	border-top: var(--wp--custom--hairline);
	background: var(--wp--preset--color--base);
}

.hh-footer .wp-block-navigation a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color var(--wp--custom--transition);
}

.hh-footer .wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.hh-footer .wp-block-site-title a {
	text-decoration: none;
}

/* ==========================================================================
   12. Motion preferences & print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.wp-block-button__link:hover,
	.is-style-hh-card.is-style-hh-lift:hover,
	.hh-post-card:hover .wp-block-post-featured-image img {
		transform: none;
	}
}

@media print {
	.hh-header,
	.hh-footer,
	.wp-block-navigation,
	.skip-link {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}