/*
Theme Name: Piano for Hope
Theme URI: https://pianoforhope.org
Author: Piano for Hope
Description: Custom block theme for the Piano for Hope website. Warm white, charcoal and restrained gold; Literata headings, Inter body — both with full Greek support.
Version: 0.2.0
Requires at least: 6.9
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: piano-hope
*/

/* ---------------------------------------------------------- foundations */

*,
*::before,
*::after {
	box-sizing: border-box;
}

:focus-visible {
	outline: 2px solid #8C6D24;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	a,
	.wp-element-button,
	.wp-block-button__link {
		transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
	}
}

/* Long Greek words on narrow screens */
h1, h2, h3 {
	overflow-wrap: anywhere;
	text-wrap: balance;
}

/* Lead paragraph directly after a page title */
h1 + p {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	color: var(--wp--preset--color--soft-grey);
}

/* Small-caps eyebrow label (e.g. above the hero title) */
.ph-eyebrow {
	letter-spacing: 0.25em;
	text-transform: uppercase;
	font-size: 0.8rem;
	font-weight: 500;
}

/* ------------------------------------------------------------ buttons */

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: currentColor;
	border-color: currentColor;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--warm-white);
}

/* --------------------------------------------------------- navigation */

.wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.25rem 0;
	border-bottom: 1px solid transparent;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--charcoal);
	border-bottom-color: var(--wp--preset--color--gold);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	/* 44px tap targets */
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: -10px;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--warm-white);
	padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0.25rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	padding: 0.5rem 0;
}

/* Polylang switcher: compact "EN" / "EL" style */
.wp-block-polylang-language-switcher {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.5rem;
}

.wp-block-polylang-language-switcher a {
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--soft-grey);
	padding: 0.3rem 0.6rem;
	line-height: 1;
}

.wp-block-polylang-language-switcher a:hover {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-polylang-language-switcher {
	margin-top: 1.5rem;
}

/* Footer navigation: plain vertical list */
.ph-footer .wp-block-navigation-item__content {
	padding: 0.15rem 0;
}

.ph-footer .wp-block-polylang-language-switcher {
	margin-top: 0.75rem;
}

/* ---------------------------------------------------------- posts list */

.ph-post-card {
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--ivory);
}

.ph-empty {
	text-align: center;
	color: var(--wp--preset--color--soft-grey);
	font-style: italic;
}

/* --------------------------------------------------------------- forms */

.ph-form {
	max-width: 640px;
}

.ph-form fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 2rem;
	min-width: 0;
}

.ph-form legend {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	margin-bottom: 1rem;
	padding: 0;
}

.ph-form .ph-field {
	margin: 0 0 1.25rem;
}

.ph-form label {
	display: block;
	font-weight: 500;
	margin-bottom: 0.35rem;
}

.ph-form .ph-hint {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--soft-grey);
	margin-top: 0.35rem;
}

.ph-form .ph-required {
	color: var(--wp--preset--color--gold);
}

.ph-form input:not([type="checkbox"]),
.ph-form select,
.ph-form textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	font: inherit;
	font-size: 1rem; /* ≥16px: avoids iOS auto-zoom */
	color: var(--wp--preset--color--charcoal);
	background: #fff;
	border: 1px solid var(--wp--preset--color--soft-grey);
	border-radius: 0;
}

.ph-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.ph-form input:focus-visible,
.ph-form select:focus-visible,
.ph-form textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 0;
	border-color: var(--wp--preset--color--gold);
}

.ph-form .ph-check label {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	font-weight: 400;
}

.ph-form input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.15rem 0 0;
	accent-color: var(--wp--preset--color--gold);
	flex: none;
}

.ph-form .ph-honeypot {
	position: absolute;
	left: -9999px;
}

.ph-form-notice {
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
	border-left: 3px solid var(--wp--preset--color--gold);
	background: var(--wp--preset--color--ivory);
}

.ph-form-error {
	border-left-color: #A63D2F;
}

/* Two-form pages: quick jump links */
.ph-form-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.5rem 0 2.5rem;
}

/* ---------------------------------------------------------------- map */

.ph-map {
	width: 100%;
	height: clamp(320px, 55vh, 520px);
	border: 1px solid var(--wp--preset--color--ivory);
	background: var(--wp--preset--color--ivory);
}

.ph-marker {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	border: 2px solid var(--wp--preset--color--warm-white);
	box-shadow: 0 0 0 1px var(--wp--preset--color--gold);
}

.leaflet-container {
	font-family: var(--wp--preset--font-family--body);
}

.leaflet-popup-content-wrapper {
	border-radius: 0;
	background: var(--wp--preset--color--warm-white);
	color: var(--wp--preset--color--charcoal);
	box-shadow: 0 2px 12px rgba(31, 30, 28, 0.15);
}

.leaflet-popup-content {
	margin: 1rem 1.1rem;
	line-height: 1.5;
}

.leaflet-popup-content strong {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
}

.leaflet-popup-tip {
	background: var(--wp--preset--color--warm-white);
}

.ph-passport-list {
	margin-top: 2.5rem;
}

.ph-passport-item {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--wp--preset--color--ivory);
}

.ph-passport-item h3 {
	margin: 0 0 0.25rem;
}

.ph-passport-item .ph-meta {
	margin: 0;
	color: var(--wp--preset--color--soft-grey);
	font-size: var(--wp--preset--font-size--small);
}

.ph-passport-item p:last-child {
	margin: 0.5rem 0 0;
}

/* ------------------------------------------------- refinement pass 2 */

/* Hyphenate long Greek words instead of breaking anywhere */
h1, h2, h3 {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Inner-page titles one step below the hero */
main h1 {
	font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
}

.wp-block-cover h1 {
	font-size: var(--wp--preset--font-size--hero);
}

/* Signature gold rule under every page title */
.wp-block-post-content > h1:first-child::after {
	content: "";
	display: block;
	width: 3rem;
	height: 1px;
	background: var(--wp--preset--color--gold);
	margin-top: 1.25rem;
}

/* Vertical rhythm inside long-form content */
.wp-block-post-content > h2:not(:first-child) {
	margin-top: 3.5rem;
}

.wp-block-post-content > h3:not(:first-child) {
	margin-top: 2.5rem;
}

.wp-block-post-content > .wp-block-separator {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.wp-block-list li + li {
	margin-top: 0.4rem;
}

/* Separators: core resets border-width after theme.json, so set it here */
.wp-block-separator {
	border: 0;
	border-bottom: 1px solid currentColor;
	opacity: 0.6;
}

.wp-block-column > .wp-block-separator {
	width: 3rem;
	margin: 0.75rem 0 1rem;
}

/* Headings inside column grids: lighter, tighter */
.wp-block-column > h3 {
	font-size: 1.25rem;
	line-height: 1.3;
}

.wp-block-column > h3 + p {
	margin-top: 0.5rem;
}

.wp-block-column > h3:not(:first-child) {
	margin-top: 2.25rem;
}

/* Value / option grids: numbered, with a gold hairline above each item */
.ph-values {
	counter-reset: ph-item;
}

.ph-values h3 {
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--gold);
}

.ph-values h3::before {
	counter-increment: ph-item;
	content: counter(ph-item, decimal-leading-zero);
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--gold);
	margin-bottom: 0.6rem;
}

/* Forms as a grouped panel */
.ph-form {
	background: var(--wp--preset--color--ivory);
	padding: clamp(1.25rem, 4vw, 2.5rem);
	margin-top: 1.5rem;
}

.ph-form > p:last-child {
	margin-bottom: 0;
}

.ph-form input:not([type="checkbox"]),
.ph-form select,
.ph-form textarea {
	border-color: #C9C2B5;
}

/* Mobile: buttons stack full-width, less dead space */
@media (max-width: 600px) {
	.wp-block-buttons:not(.ph-form-jump) .wp-block-button,
	.wp-block-buttons:not(.ph-form-jump) .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	.wp-block-cover {
		min-height: 70vh !important;
	}
}