/*
Theme Name: Steve Eggleston
Template: twentytwentyfive
Description: Child theme for Steve Eggleston's author landing page. Colours and fonts live in theme.json (editable in Appearance → Editor → Styles); layout details live here.
Version: 1.0.10
Requires at least: 6.6
Text Domain: eggleston
*/

/* ---------- aliases to palette (change colours in Styles, not here) ---------- */
:root {
	--paper:      var(--wp--preset--color--base);
	--paper-2:    var(--wp--preset--color--accent-3);
	--ink:        var(--wp--preset--color--contrast);
	--muted:      var(--wp--preset--color--accent-4);
	--rule:       var(--wp--preset--color--accent-6);
	--green:      var(--wp--preset--color--accent-1);
	--green-deep: var(--wp--preset--color--accent-5);
	--brass:      var(--wp--preset--color--accent-2);
	--brass-dim:  #9E8148;
	--on-dark:    #DCE3DD;
	--error:      #9A2B22;

	--sp-oxblood: #6A2A2B;
	--sp-navy:    #253650;
	--sp-tan:     #8E6B43;
	--sp-green:   #2C4A3F;
	--sp-ink:     #2A2F2C;

	--f-display: var(--wp--preset--font-family--caslon-display);
	--f-text:    var(--wp--preset--font-family--caslon-text);

	--section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);
	--col-gap:   clamp(2rem, 1rem + 4vw, 6rem);
}

/* = sticky header height, so an anchored section starts right under the header (no strip of the previous section) */
html { scroll-behavior: smooth; scroll-padding-top: 73px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.on-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--brass); }

/* ---------- page skeleton ---------- */
.wp-site-blocks { padding-top: 0; padding-bottom: 0; }
.wp-site-blocks > * { margin-block-start: 0; }
.landing, .landing > .entry-content { margin-block-start: 0; }
.landing .entry-content > .alignfull { margin-block-start: 0; }

.sec { padding-top: var(--section-y); padding-bottom: var(--section-y); }

/* two-column split used by most sections */
:is(.hero, .sec) .wp-block-columns { gap: var(--col-gap); margin-bottom: 0; }
.split__body { max-width: 58ch; padding-top: .6rem; }
h2.narrow { max-width: 10ch; }

.muted { color: var(--muted); }
.accent-line {
	font-style: italic;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--green);
	margin-block-start: 1.75rem !important;
}

/* buttons */
.wp-block-button__link { transition: background-color .2s ease; }
.btn--small .wp-block-button__link { padding: .7rem 1.15rem; font-size: .9375rem; }

/* ---------- header ---------- */
header:has(> .site-header) { position: sticky; top: 0; z-index: 50; }
.admin-bar header:has(> .site-header) { top: 32px; }
@media (max-width: 782px) { .admin-bar header:has(> .site-header) { top: 0; } }
.site-header {
	background: color-mix(in srgb, var(--paper) 94%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--rule);
}
.site-header__inner { min-height: 72px; gap: 2rem; }
.site-header__right { gap: 1.75rem; }
.wordmark {
	font-family: var(--f-display);
	font-size: 1.6rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	margin: 0;
}
.wordmark a { text-decoration: none; color: inherit; }
.site-nav { font-size: var(--wp--preset--font-size--small); gap: 1.75rem; }
.site-nav a { text-decoration: none; color: var(--muted); }
.site-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(3rem, 2rem + 4vw, 6rem); }
.hero__grid { align-items: flex-start !important; }
h1.wp-block-heading.hero__title {
	font-family: var(--f-text);
	font-style: italic;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--green);
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--brass-dim);
	max-width: 30ch;
}
.hero__lede {
	font-family: var(--f-display);
	/* a step below the "huge" preset: the lede is ~130 characters and should stay ~6 lines */
	font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.5rem);
	line-height: 1.02;
	letter-spacing: -0.015em;
	max-width: 17ch;
	margin-block-start: 1.6rem !important;
	margin-bottom: 2rem;
}
.hero .muted { max-width: 60ch; }
.hero__actions { margin-block-start: 2.25rem !important; }

.portrait { margin-top: .4rem; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; }
.portrait figcaption {
	margin-top: .75rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--muted);
	font-style: italic;
	text-align: left;
}

.credentials {
	list-style: none;
	padding: 1.5rem 0 0 !important;
	margin-block-start: clamp(3rem, 2rem + 3vw, 5rem) !important;
	border-top: 1px solid var(--rule);
	/* grid, not flex-wrap, so no row ends with a dangling divider */
	display: grid; grid-template-columns: repeat(3, max-content); gap: .5rem 0;
	font-size: var(--wp--preset--font-size--small);
}
.credentials li { padding-right: 1.25rem; margin-right: 1.25rem; border-right: 1px solid var(--rule); }
.credentials li:nth-child(3n), .credentials li:last-child { border-right: 0; }
@media (max-width: 999px) {
	.credentials { grid-template-columns: repeat(2, max-content); }
	.credentials li:nth-child(3n) { border-right: 1px solid var(--rule); }
	.credentials li:nth-child(2n), .credentials li:last-child { border-right: 0; }
}

/* ---------- dark sections ---------- */
.on-dark { color: var(--on-dark); }
.on-dark h2, .on-dark h3, .on-dark .pullquote { color: var(--paper); }

.facts {
	margin-block-start: clamp(3rem, 2rem + 3vw, 5rem) !important;
	padding-top: clamp(3rem, 2rem + 3vw, 4.5rem);
	padding-bottom: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.facts .wp-block-columns { gap: clamp(2rem, 1rem + 3vw, 4rem) !important; }
.on-dark h2.fact__title {
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--brass);
}
.facts p { font-size: var(--wp--preset--font-size--small); line-height: 1.75; margin-block-start: .9rem; }

/* ---------- paths ---------- */
.paths__header { align-items: flex-end !important; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem) !important; }
.paths__index { display: flex; flex-wrap: wrap; gap: .6rem; }
.paths__index a {
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	padding: .45rem .9rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	background: var(--paper);
}
.paths__index a:hover { border-color: var(--green); }

.path {
	padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
	padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
	border-top: 1px solid var(--rule);
	margin-block-start: 0 !important;
}
.path .wp-block-columns { align-items: flex-end !important; }
.path__text { max-width: 62ch; }
.path__text h3 { margin-bottom: .6rem; }
.path__tagline {
	font-style: italic;
	font-size: 1.2rem;
	line-height: 1.5;
	color: var(--green);
	margin-block-start: .5rem !important;
	margin-bottom: 1.4rem;
}
.path__cta { margin-block-start: 1.5rem !important; }
.path__cta a, .path__cta a:visited {
	font-weight: 700;
	color: var(--green);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.path__cta a:hover { text-decoration-thickness: 2px; }
.paths__action { margin-block-start: clamp(2rem, 1.5rem + 2vw, 3.5rem) !important; }

/* the shelf: a plain list; each item becomes a book spine */
.shelf__caption {
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
	color: var(--muted);
	margin-bottom: .75rem;
}
ul.shelf {
	list-style: none;
	padding: 0 12px !important;
	margin: .75rem 0 0 !important;
	height: 300px;
	display: flex; align-items: flex-end; gap: 5px;
	border-bottom: 10px solid var(--sp-tan);
	box-shadow: 0 6px 0 -2px rgba(0,0,0,.12);
}
ul.shelf > li {
	--c: var(--sp-ink);
	--h: 86%;
	height: var(--h);
	width: 52px;
	flex: 0 0 auto;
	margin: 0;
	writing-mode: vertical-rl;
	display: flex; align-items: center; justify-content: center;
	padding: 1.1rem 0;
	font-family: var(--f-text);
	font-size: .8125rem;
	line-height: 1.15;
	letter-spacing: .02em;
	text-align: center;
	color: var(--brass);
	background:
		linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.07) 30%, rgba(255,255,255,.02) 60%, rgba(0,0,0,.25)),
		var(--c);
	box-shadow:
		inset 0 14px 0 -11px var(--brass),
		inset 0 -14px 0 -11px var(--brass);
	border-radius: 2px 2px 0 0;
	overflow: hidden;
	transition: transform .25s ease;
}
ul.shelf > li:hover { transform: translateY(-8px); }
/* colours and heights repeat every five books, so new books style themselves */
ul.shelf > li:nth-child(5n+1) { --c: var(--sp-oxblood); --h: 92%; }
ul.shelf > li:nth-child(5n+2) { --c: var(--sp-ink);     --h: 80%; width: 46px; }
ul.shelf > li:nth-child(5n+3) { --c: var(--sp-tan);     --h: 88%; color: #F3E6C8; }
ul.shelf > li:nth-child(5n+4) { --c: var(--sp-navy);    --h: 96%; width: 46px; }
ul.shelf > li:nth-child(5n+5) { --c: var(--sp-green);   --h: 84%; }
@media (prefers-reduced-motion: reduce) { ul.shelf > li { transition: none; } ul.shelf > li:hover { transform: none; } }

/* ---------- why ---------- */
.why__roles {
	margin-block-start: 1.5rem !important;
	font-style: italic;
	font-size: 1.2rem;
	line-height: 1.55;
	color: var(--brass);
	max-width: 26ch;
}
p.pullquote.pullquote {
	box-sizing: border-box;
	max-width: var(--wp--style--global--content-size);
	margin: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) auto !important;
	padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 22% clamp(2rem, 1.5rem + 2vw, 3.5rem) 0;
	border-top: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
	font-family: var(--f-display);
	font-size: clamp(2rem, 1.3rem + 3vw, 4.25rem);
	line-height: 1.1;
}
@media (max-width: 781px) { p.pullquote.pullquote { padding-right: 0; } }
.further__title { max-width: 14ch; }

ul.pills {
	list-style: none;
	padding: 0 !important;
	margin-block-start: 1.75rem !important;
	display: flex; flex-wrap: wrap; gap: .5rem;
}
ul.pills > li {
	font-size: var(--wp--preset--font-size--small);
	padding: .4rem .85rem;
	border: 1px solid color-mix(in srgb, var(--brass) 55%, transparent);
	color: var(--brass);
	border-radius: 999px;
	margin: 0;
}

/* ---------- contact ---------- */
.contact__grid { align-items: flex-start !important; }
@media (min-width: 782px) { .contact__intro { position: sticky; top: 110px; } }
.contact__intro .muted { max-width: 44ch; }
.contact__intro .accent-line { margin-block-start: 1.25rem !important; }

/* ---------- Fluent Forms: book enquiry ---------- */
.contact__form .fluentform {
	background: var(--paper);
	border: 1px solid var(--rule);
	padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}
.contact__form .ff-el-group { margin-bottom: 1.5rem; }
.contact__form .ff-el-input--label label,
.contact__form .ff-el-input--label {
	font-family: var(--f-text);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	color: var(--ink);
}
.contact__form .ff-el-form-control {
	font-family: var(--f-text);
	font-size: 1rem;
	color: var(--ink);
	background: #fff;
	border: 1px solid #AEB5AA;
	border-radius: 2px;
	padding: .8rem .9rem;
	box-shadow: none;
}
.contact__form .ff-el-form-control:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
.contact__form .ff-el-is-error .ff-el-form-control { border-color: var(--error); }
.contact__form .error, .contact__form .text-danger { color: var(--error); font-size: .875rem; }

/* radio groups as pills */
.contact__form .ff-pills .ff-el-input--content { display: flex; flex-wrap: wrap; gap: .5rem; }
.contact__form .ff-pills .ff-el-form-check { position: relative; margin: 0 !important; display: inline-block; }
.contact__form .ff-pills .ff-el-form-check-label {
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin: 0;
	padding: 0;
}
.contact__form .ff-pills .ff-el-form-check-input {
	position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer;
}
.contact__form .ff-pills .ff-el-form-check-label > span {
	display: inline-block;
	font-family: var(--f-text);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	padding: .55rem 1rem;
	border: 1px solid #AEB5AA;
	border-radius: 999px;
	background: #fff;
	color: var(--ink);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.contact__form .ff-pills .ff-el-form-check-label:hover > span { border-color: var(--green); }
.contact__form .ff-pills .ff-el-form-check-input:checked + span { background: var(--green); border-color: var(--green); color: var(--paper); }
.contact__form .ff-pills .ff-el-form-check-input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }

/* consent */
.contact__form .ff_t_c, .contact__form .ff-el-tc { font-size: var(--wp--preset--font-size--small); color: var(--muted); }
.contact__form .ff_gdpr_field { accent-color: var(--green); width: 18px; height: 18px; margin: 0 .75rem 0 0; vertical-align: -3px; }

/* submit */
.contact__form .ff-btn-submit {
	width: 100%;
	font-family: var(--f-text) !important;
	font-weight: 700;
	font-size: 1.0625rem;
	padding: 1.2rem 1.9rem;
	border-radius: 2px;
	background: var(--green) !important;
	border: 1px solid var(--green) !important;
	color: var(--paper) !important;
	margin-top: 1rem;
	opacity: 1;
}
.contact__form .ff-btn-submit:hover { background: var(--green-deep) !important; }

/* confirmation */
.contact__form .ff-message-success {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	box-shadow: none;
}
.contact__form .ff-message-success h3 { color: var(--green); margin: 0 0 .75rem; }

/* ---------- footer ---------- */
.site-footer {
	color: #B9C4BD;
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
	font-size: var(--wp--preset--font-size--small);
}
.site-footer .wp-block-columns { gap: 2rem; margin: 0; }
.site-footer p { margin-block-start: .35rem; }
.site-footer a { color: inherit; }
.wordmark--footer, .wordmark--footer a { color: var(--paper); margin-bottom: .6rem; }
.site-footer__legal { text-align: right; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
	.site-nav { display: none !important; }
}
@media (max-width: 781px) {
	.portrait { max-width: 360px; }
	.site-footer__legal { text-align: left; }
	.contact__intro { position: static; }
	.credentials { grid-template-columns: 1fr; }
	.credentials li, .credentials li:nth-child(3n) { border-right: 0; padding-right: 0; margin-right: 0; }
}
@media (max-width: 600px) {
	.wp-site-blocks, .has-global-padding { --wp--style--root--padding-left: 16px; --wp--style--root--padding-right: 16px; }
	html { scroll-padding-top: 63px; }
	.site-header__inner { min-height: 62px; gap: 1rem; }
	.wordmark { font-size: 1.3rem; }
	/* header stays one line: wordmark + "Tell me about your project" */
	.wordmark, .btn--small .wp-block-button__link { white-space: nowrap; }
	.btn--small .wp-block-button__link { padding: .6rem .7rem; font-size: .78rem; }
	ul.shelf { height: 240px; padding: 0 8px !important; gap: 4px; overflow-x: auto; }
	ul.shelf > li { width: 44px; font-size: .75rem; }
	.hero__actions .wp-block-button, .paths__action .wp-block-button { width: 100%; }
	.hero__actions .wp-block-button__link, .paths__action .wp-block-button__link { width: 100%; }
}
@media (max-width: 400px) {
	.wordmark { font-size: 1.12rem; }
	.btn--small .wp-block-button__link { padding: .55rem .6rem; font-size: .72rem; }
}
@media (max-width: 359px) {
	.wordmark { font-size: 1.02rem; }
	.btn--small .wp-block-button__link { padding: .5rem .5rem; font-size: .68rem; }
}