/*
Theme Name: Narrow Path
Theme URI: https://narrowpath.vargar.eu
Author: Narrow Path
Description: Block theme for Narrow Path, a hiking website about local day hikes. Calm and outdoorsy: parchment paper, pine and moss greens, a rust trail accent and topographic line art.
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: narrowpath
*/

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
:where(a, button, .wp-element-button):focus-visible { outline: 3px solid var(--wp--preset--color--rust); outline-offset: 2px; }
.screen-reader-text:focus { background: var(--wp--preset--color--card); }

/* ---------- Labels ---------- */
.is-style-eyebrow, .np-eyebrow {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--wp--preset--color--rust-ink);
}
.has-pine-background-color .is-style-eyebrow,
.has-forest-background-color .is-style-eyebrow { color: var(--wp--preset--color--rust); }
.is-style-eyebrow a { text-decoration: none; }
.is-style-eyebrow a:hover { text-decoration: underline; }

.is-style-lede { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--ink-soft); }
.has-pine-background-color .is-style-lede,
.has-forest-background-color .is-style-lede { color: var(--wp--preset--color--light); opacity: .9; }

.is-style-section-header { border-top: 1px solid var(--wp--preset--color--rule); padding-top: 1.25rem; }
.is-style-pill {
	display: inline-block; width: fit-content; background: var(--wp--preset--color--card); color: var(--wp--preset--color--pine);
	border: 1.5px solid var(--wp--preset--color--pine); border-radius: 999px; padding: .25rem .875rem;
	font-family: var(--wp--preset--font-family--ui); font-weight: 800; font-size: .8125rem;
}
.is-style-tip {
	background: var(--wp--preset--color--sage); border-left: 5px solid var(--wp--preset--color--moss);
	border-radius: 4px; padding: .9rem 1.1rem; font-family: var(--wp--preset--font-family--ui); font-size: .9375rem;
}
.is-style-tip::before { content: "Trail tip: "; font-weight: 800; }

/* ---------- Buttons ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: currentColor; border: 1.5px solid currentColor; }

/* ---------- Header / footer ---------- */
.np-header { border-bottom: 1px solid var(--wp--preset--color--rule); }
.np-header .wp-block-site-title a { text-decoration: none; }
.np-footer a { color: var(--wp--preset--color--light); }
.np-footer .wp-block-site-title a { text-decoration: none; }

/* Faint contour-line watermark for dark panels and footer */
.np-watermark { position: relative; overflow: hidden; isolation: isolate; }
.np-watermark::after {
	content: ""; position: absolute; inset: auto 0 -10px 0; height: 140px;
	background: url("assets/img/contours.svg") center bottom / auto 130px repeat-x;
	opacity: 0.12; pointer-events: none; z-index: -1;
}

/* ---------- Cards & panels ---------- */
.is-style-card, .np-panel {
	background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--rule);
	border-radius: 8px; padding: 1.25rem;
}
.np-hike-card { display: flex; flex-direction: column; gap: .6rem; height: 100%; padding: 0 !important; overflow: hidden; }
.np-hike-card > :not(.wp-block-post-featured-image) { margin-inline: 1.125rem; }
.np-hike-card > :last-child { margin-bottom: 1.125rem; }
.np-hike-card .wp-block-post-featured-image { margin: 0; }
.np-hike-card .wp-block-post-featured-image img { border-radius: 0; width: 100%; }
.np-hike-card .wp-block-post-title { font-size: var(--wp--preset--font-size--large); margin: .15rem 1.125rem 0; }
.np-hike-card .wp-block-post-title a { text-decoration: none; }
.np-hike-card .np-stats { margin-top: auto; }
.np-no-photo { aspect-ratio: 3 / 2; background: var(--wp--preset--color--pine) url("assets/img/contours.svg") center / cover; }
.np-meta { font-family: var(--wp--preset--font-family--ui); font-size: .8125rem; color: var(--wp--preset--color--ink-soft); }
.np-meta p { margin: 0; }

/* Region filter (core/categories with taxonomy=region) */
.np-region-filter ul, ul.np-region-filter { list-style: none; padding: 0; margin: var(--wp--preset--spacing--30) 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.np-region-filter li a {
	display: inline-block; padding: .4rem 1rem; border: 1.5px solid var(--wp--preset--color--pine); border-radius: 999px;
	font-family: var(--wp--preset--font-family--ui); font-weight: 800; font-size: .875rem; text-decoration: none;
}
.np-region-filter li a:hover, .np-region-filter li.current-cat a { background: var(--wp--preset--color--pine); color: var(--wp--preset--color--parchment); }

/* ---------- Hike facts strip (dynamic block narrowpath/hike-stats) ---------- */
.np-stats { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.np-stat {
	display: flex; flex-direction: column; min-width: 5.5rem; padding: .5rem .85rem;
	background: var(--wp--preset--color--paper); border-radius: 6px; font-family: var(--wp--preset--font-family--ui);
}
.np-stat__value { font-weight: 800; font-size: 1.0625rem; line-height: 1.25; color: var(--wp--preset--color--pine); }
.np-stat__label { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--ink-soft); }
.np-diff--easy .np-stat__value { color: #3E7A2C; }
.np-diff--moderate .np-stat__value { color: #A4691C; }
.np-diff--hard .np-stat__value { color: #A8321A; }
.np-hike-card .np-stat { min-width: 0; padding: .35rem .6rem; }
.np-hike-card .np-stat__value { font-size: .9375rem; }
.single-hike .np-stat { background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--rule); padding: .7rem 1.1rem; }

.np-links .wp-block-buttons { gap: .6rem; }

/* ---------- Tables ---------- */
.wp-block-table table { background: var(--wp--preset--color--card); }
.wp-block-table th { font-family: var(--wp--preset--font-family--ui); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--ink-soft); }
.wp-block-table td, .wp-block-table th { border-color: var(--wp--preset--color--rule); }

/* ---------- Trail steps ---------- */
.np-steps > .wp-block-column { background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--rule); border-radius: 8px; padding: 1.25rem; }
.np-steps .np-step-n { font-family: var(--wp--preset--font-family--display); font-size: 2.25rem; font-weight: 700; line-height: 1; color: var(--wp--preset--color--rust-ink); margin: 0; }

/* ---------- Post cards (blog) ---------- */
.np-post-card .wp-block-post-featured-image img { border-radius: 6px; }
.np-post-card .wp-block-post-title a { text-decoration: none; }