/*
Theme Name: National Park
Theme URI: https://www.lukenaughton.com
Author: Luke Naughton
Description: A 1930s WPA National Park poster for lukenaughton.com. Flat screen-print inks, a lone gum on a ridge at sunset, and a manhole lid for a seal.
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 (theme code). Fonts are licensed separately: see assets/fonts.
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: national-park
*/

:root {
	--np-sky: var(--wp--preset--color--sky);
	--np-navy: var(--wp--preset--color--navy);
	--np-indigo: var(--wp--preset--color--indigo);
	--np-orange: var(--wp--preset--color--orange);
	--np-red: var(--wp--preset--color--red);
	--np-yellow: var(--wp--preset--color--yellow);
	--np-sage: var(--wp--preset--color--sage);
	--np-paper: var(--wp--preset--color--paper);
	--np-sans: var(--wp--preset--font-family--john-muir);
	--np-wide: var(--wp--preset--font-family--john-muir-wide);
}

body { -webkit-font-smoothing: antialiased; }

a { text-decoration-color: var(--np-orange); text-decoration-thickness: .12em; text-underline-offset: .22em; }
a:hover { color: var(--np-paper); }
a:focus-visible { outline: 3px solid var(--np-paper); outline-offset: 4px; border-radius: 2px; }


/* ==========================================================================
   Homepage poster  (pattern: patterns/poster.php)
   ========================================================================== */

.np-front, .np-front .entry-content { margin: 0; }

.np-poster { color: var(--np-yellow); font-family: var(--np-sans); line-height: normal; }  /* poster lettering, not reading text */
.np-poster p, .np-poster h1, .np-poster h2, .np-poster ul, .np-poster figure { margin: 0; }
.np-poster ul { list-style: none; padding: 0; }

.np-top-lines { text-align: center; text-transform: uppercase; }
.np-kicker { font-family: var(--np-wide); letter-spacing: .04em; }
.np-genres { color: var(--np-paper); letter-spacing: .2em; }
.np-motto { letter-spacing: .12em; }

.np-art img { display: block; width: 100%; height: auto; aspect-ratio: 1666 / 935; }

.np-side { text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.np-side li { margin: 0; }
.np-poster a { text-decoration: none; }
.np-poster a:hover, .np-poster a:focus-visible { text-decoration: underline; text-decoration-color: currentColor; color: var(--np-paper); }
/* Trail marker: a link is a trail you can take. The arrowhead, not colour, says "this goes somewhere". */
.np-side a::after { content: ""; display: inline-block; width: .5em; height: .62em; margin-left: .45em; background: var(--np-orange); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.np-side .np-side-heading { font: inherit; letter-spacing: inherit; line-height: inherit; text-transform: inherit; color: var(--np-paper); } /* heading, set apart from yellow links */

.np-title-block { text-align: center; color: var(--np-red); text-transform: uppercase; }
.np-poster .np-name { font-family: var(--np-wide); font-size: inherit; letter-spacing: .02em; line-height: 1; color: inherit; }
.np-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-family: var(--np-wide); letter-spacing: .06em; }
.np-foot > * { margin: 0; }
.np-gw { text-align: right; }
.np-cs { text-align: left; }
.np-lid img { display: block; width: 100%; height: auto; }

/* Desktop: one locked-ratio poster, every position and size in artwork units */
@media (min-width: 1200px) {
	.np-poster {
		--u: calc(100cqw / 1666);           /* 1 unit = 1px of the 1666-wide artwork */
		container-type: inline-size;
		position: relative; aspect-ratio: 1666 / 1260; overflow: hidden;
	}
	.np-poster::before { content: ""; position: absolute; inset: 0 0 auto 0; height: calc(80 * var(--u)); background: var(--np-sky); }
	.np-poster > * { position: absolute; }
	.np-poster > .np-top-lines, .np-poster > .np-side, .np-poster > .np-title-block { z-index: 1; }
	.np-top-lines p, .np-title-block .np-name { white-space: nowrap; }

	.np-art { top: calc(70 * var(--u)); left: 0; width: 100%; }

	.np-top-lines { top: calc(34 * var(--u)); left: 0; right: 0; }
	.np-kicker { font-size: calc(54 * var(--u)); line-height: 1.1; }
	.np-genres { font-size: calc(30 * var(--u)); margin-top: calc(10 * var(--u)) !important; }
	.np-motto  { font-size: calc(24 * var(--u)); margin-top: calc(14 * var(--u)) !important; }

	/* Both lists: same size, same line pitch, same top, so they balance across the tree */
	.np-side { top: calc(502 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(35 * var(--u)); }
	.np-side-left  { left: calc(58 * var(--u)); }
	.np-side-right { right: calc(36 * var(--u)); text-align: right; }

	.np-title-block { top: calc(880 * var(--u)); left: 0; right: 0; }
	.np-name { font-size: calc(104 * var(--u)) !important; }
	.np-foot { gap: calc(48 * var(--u)); margin-top: calc(44 * var(--u)) !important; font-size: calc(62 * var(--u)); line-height: 1.05; letter-spacing: .04em; }
	.np-lid { width: calc(204 * var(--u)); }
}

/* Tablet and phone: the poster stacks */
@media (max-width: 1199.98px) {
	.np-top-lines { background: var(--np-sky); padding: clamp(28px, 6vw, 56px) 16px 0; }
	.np-kicker { font-size: clamp(26px, 6.6vw, 60px); line-height: 1.12; }
	.np-genres { font-size: clamp(14px, 3vw, 26px); margin-top: .6em !important; }
	.np-motto  { font-size: clamp(13px, 2.4vw, 20px); margin-top: .8em !important; line-height: 1.5; }
	.np-art { margin-top: -1px !important; }

	.np-side { font-size: clamp(15px, 2.4vw, 20px); line-height: 2; text-align: center; white-space: normal; }
	.np-side-left { padding: 32px 16px 0 !important; }
	.np-side-right { padding: 8px 16px 0; }

	.np-title-block { padding: 40px 16px 56px; }
	.np-name { font-size: clamp(34px, 9.4vw, 104px) !important; }
	.np-foot { gap: clamp(14px, 3vw, 36px); margin-top: 28px !important; font-size: clamp(24px, 2.6vw, 30px); white-space: nowrap; } /* red on navy is AA only at 24px+ */
	.np-foot br { display: none; }
	.np-lid { width: clamp(84px, 16vw, 160px); }
}
@media (min-width: 700px) and (max-width: 1199.98px) {
	/* Tablet: lists side by side under the art, mirroring the desktop poster */
	.np-poster { display: grid; grid-template-columns: 1fr 1fr; }
	.np-poster > .np-top-lines, .np-poster > .np-art, .np-poster > .np-title-block { grid-column: 1 / -1; }
	.np-side-left  { text-align: right; padding: 36px 28px 0 16px !important; border-right: 2px solid var(--np-sage); }
	.np-side-right { text-align: left;  padding: 36px 16px 0 28px; }
	.np-side { font-size: clamp(13px, 1.85vw, 20px); letter-spacing: .06em; white-space: nowrap; }
}
@media (max-width: 699.98px) {
	/* Phone: crop the art to the tree so it isn't a thin strip */
	.np-art img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%; }
	.np-side { font-size: clamp(12.5px, 3.75vw, 20px); letter-spacing: .06em; }
	.np-side-right::before { content: ""; display: block; width: 64px; height: 3px; margin: 14px auto 18px; background: var(--np-sage); }
	.np-side a { padding-block: .45em; } /* bigger tap target, same look */
}
@media (max-width: 879.98px) {
	.np-foot { grid-template-columns: 1fr; justify-items: center; gap: 10px; white-space: normal; }
	.np-gw, .np-cs { text-align: center; }
	.np-foot .np-lid { order: -1; }
}


/* ==========================================================================
   Pages (About) — header band, art strip, paper body, navy footer
   ========================================================================== */

.np-page-header { background: var(--np-sky); text-align: center; padding-top: clamp(20px, 4vw, 36px); }
.np-page-header .wp-block-site-title { margin: 0; font-family: var(--np-wide); font-size: clamp(26px, 4.4vw, 44px); line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; color: var(--np-yellow); }
.np-page-header .wp-block-site-title a { text-decoration: none; color: inherit; }
.np-page-header .wp-block-site-title a:hover { color: var(--np-paper); }
.np-page-header .np-page-tagline { margin: .5em 0 0; font-family: var(--np-sans); font-size: clamp(13px, 1.6vw, 17px); letter-spacing: .16em; text-transform: uppercase; color: var(--np-paper); }

.np-art-strip { margin: 0 !important; }
.np-art-strip img { display: block; width: 100%; height: clamp(150px, 24vw, 340px); object-fit: cover; object-position: 50% 62%; }

.np-page { background: var(--np-paper); color: var(--np-navy); margin: 0 !important; padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(56px, 8vw, 96px); }
.np-page h1, .np-page h2, .np-page h3 { color: var(--np-navy); }
.np-page .wp-block-post-title { color: var(--np-red); }            /* red on paper: large text only, so titles only */
.np-page a { color: var(--np-navy); text-decoration-color: var(--np-red); }
.np-page a:hover { color: var(--np-red); }
.np-page a:focus-visible { outline-color: var(--np-navy); }
.np-page .wp-block-post-featured-image img { border: 6px solid var(--np-navy); }
.np-page blockquote { border-left: 4px solid var(--np-sage); margin-left: 0; padding-left: 1.25rem; font-style: italic; }
.np-page strong, .np-page b { font-weight: 600; }

.np-site-footer { background: var(--np-navy); color: var(--np-red); text-align: center; padding: clamp(40px, 6vw, 64px) 16px; margin: 0 !important; }
.np-site-footer .np-lid { width: 120px; margin: 0 auto 14px !important; }
.np-site-footer .np-lid a { display: block; }
.np-site-footer p { margin: 0; font-family: var(--np-wide); font-size: 24px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; } /* 24px keeps red on navy at AA */

.np-page .wp-block-button__link { background: var(--np-navy); color: var(--np-yellow); border-radius: 0; padding: .8em 1.4em; font-family: var(--np-wide); font-size: 1.125rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.np-page .wp-block-button__link:hover { background: var(--np-indigo); color: var(--np-paper); }

/* Footer note: one editable line under every page (synced pattern "Footer note") */
.np-footnote { background: var(--np-navy); color: var(--np-sage); text-align: center; padding: 18px 16px 28px; margin: 0 !important; }
.np-footnote p { margin: 0; font-family: var(--np-sans); font-size: 13px; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; }
.np-footnote a { color: inherit; }
.np-site-footer { padding-bottom: clamp(24px, 4vw, 40px); }