/*
Theme Name: Sunshine Water Damage
Theme URI: https://sunshinewaterdamage.com/
Description: Child theme of Twenty Twenty-Five for sunshinewaterdamage.com. Chalk ground, slate ink, dark ochre, a rounded sans display over an old-style serif body with monospace labels. Reference-minded — practical guides, home and property, trades, how-things-work subjects.
Author: Sunshine Water Damage
Version: 1.1.1
Template: twentytwentyfive
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: sunshine-water-damage
*/

:root {
	--tt-rule: var(--wp--preset--color--accent-3);
	--tt-muted: var(--wp--preset--color--accent-2);
	--tt-accent: var(--wp--preset--color--accent-1);
	--tt-ui: var(--wp--preset--font-family--ui);
	--tt-display: var(--wp--preset--font-family--display);
}

/* ---------------------------------------------------------------- masthead */

.tt-masthead {
	border-bottom: 1px solid var(--tt-rule);
}
.tt-masthead .wp-block-site-title {
	font-family: var(--tt-display);
	font-weight: 800;
	letter-spacing: -0.03em;
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1;
	margin: 0;
	text-align: center;
}
.tt-masthead .wp-block-site-title a { text-decoration: none; }

.tt-masthead .wp-block-navigation {
	font-family: var(--tt-ui);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2.25rem);
}
.tt-masthead .wp-block-navigation a { text-decoration: none; }
.tt-masthead .wp-block-navigation a:hover { color: var(--tt-accent); text-decoration: underline; text-underline-offset: 0.35em; }

/* ------------------------------------------------------------------ kicker */
/* Category label above a headline. Sans, small caps, accent — the one place
   colour is used, which is what keeps it doing work. */

.tt-kicker,
.tt-kicker .wp-block-post-terms {
	font-family: var(--tt-ui);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--tt-accent);
	line-height: 1;
}
.tt-kicker a { color: inherit; text-decoration: none; }
.tt-kicker a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.tt-kicker .wp-block-post-terms__separator { opacity: 0.5; }

/* ---------------------------------------------------------- section header */
/* Short accent rule above a serif section heading. */

.tt-section-head {
	border-top: 3px solid var(--tt-accent);
	padding-top: 0.75rem;
	margin-bottom: 1.5rem;
	max-width: 100%;
}
/* The heading sits inside a constrained group, which was centring it over a
   left-aligned grid. Pin it back to the left edge of the rule above it.
   Core's constrained-layout rule is
     .is-layout-constrained > :where(...) { margin-left:auto !important; margin-right:auto !important }
   so !important is required here, not optional. Without it only full-width
   children look correct — anything with a max-width (a standfirst, a term
   description) silently centres itself over a left-aligned grid. */
.tt-section-head > * {
	max-width: none;
	margin-left: 0 !important;
	margin-right: auto !important;
}
/* h1 on archive/search/blog-index, h2 on the homepage bands — same treatment,
   so a section header looks identical whatever the page's heading level is. */
.tt-section-head :is(h1, h2) {
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	margin: 0;
	letter-spacing: -0.01em;
}
/* Yoast/core emit the term name in a span inside query-title; keep it inline. */
.tt-section-head :is(h1, h2) span { font: inherit; }

/* Optional one-line standfirst under a section header. */
.tt-section-sub {
	margin: 0.4rem 0 0;
	color: var(--tt-muted);
	font-size: 0.98rem;
	max-width: 56ch;
}

/* Term description, when a category has one. */
.tt-section-head .wp-block-term-description {
	margin: 0.4rem 0 0;
	color: var(--tt-muted);
	font-size: 0.98rem;
	max-width: 56ch;
}

/* -------------------------------------------------------------- lead story */
/* Until every post had a featured image the lead was text-only, because the six
   most recent posts had none and a blank slot at that size is worse than no
   image. All 226 now have one, so the lead carries it. */

.tt-lead .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.tt-lead li { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
.tt-lead .wp-block-post-featured-image { margin: 0; overflow: hidden; background: var(--wp--preset--color--accent-4); }
.tt-lead .wp-block-post-featured-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
	transition: transform 420ms ease;
}
.tt-lead .wp-block-post-featured-image:hover img { transform: scale(1.02); }

/* Desktop: headline left so it keeps the page's left spine, image right.
   The image is first in the DOM so it leads on mobile, where a magazine
   front would show the picture before the headline. */
@media (min-width: 900px) {
	.tt-lead li { grid-template-columns: 1fr 1fr; align-items: center; }
	.tt-lead .tt-lead-text          { grid-column: 1; grid-row: 1; }
	.tt-lead .wp-block-post-featured-image { grid-column: 2; grid-row: 1; }
	.tt-lead .wp-block-post-featured-image img { aspect-ratio: 5 / 4; }
}


.tt-lead .wp-block-post-title {
	font-size: clamp(1.9rem, 3.6vw, 3rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0.5rem 0 0.75rem;
	max-width: 20ch;
}
.tt-lead .wp-block-post-title { max-width: 18ch; }
.tt-lead .wp-block-post-title a { text-decoration: none; }
.tt-lead .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 0.1em; }
.tt-lead .wp-block-post-excerpt__excerpt {
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	color: var(--tt-muted);
	max-width: 52ch;
	line-height: 1.55;
}
.tt-lead .wp-block-post-excerpt__more-text { display: none; }

/* ------------------------------------------------------- ruled text list */
/* Used where posts have no featured image, so the absence reads as a
   deliberate list rather than a broken grid. 67 of 226 posts have no image. */

.tt-list .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tt-list .wp-block-post-template > li {
	border-top: 1px solid var(--tt-rule);
	padding: 1.1rem 0 1.2rem;
	margin: 0;
}
.tt-list .wp-block-post-title {
	font-size: 1.15rem;
	line-height: 1.25;
	margin: 0.45rem 0 0.4rem;
}
.tt-list .wp-block-post-title a { text-decoration: none; }
.tt-list .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 0.12em; }
.tt-list .wp-block-post-excerpt__excerpt {
	font-size: 0.9rem;
	color: var(--tt-muted);
	line-height: 1.5;
	margin: 0;
}
.tt-list .wp-block-post-excerpt__more-text { display: none; }

/* ------------------------------------------------------------- image cards */

.tt-cards .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tt-cards .wp-block-post-template > li { margin: 0; }
.tt-cards .wp-block-post-featured-image {
	margin: 0 0 0.9rem;
	overflow: hidden;
	background: var(--wp--preset--color--accent-4);
}
.tt-cards .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
	transition: transform 320ms ease;
}
.tt-cards .wp-block-post-featured-image:hover img { transform: scale(1.03); }
.tt-cards .wp-block-post-title {
	font-size: 1.2rem;
	line-height: 1.25;
	margin: 0.45rem 0 0.4rem;
}
.tt-cards .wp-block-post-title a { text-decoration: none; }
.tt-cards .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 0.12em; }
.tt-cards .wp-block-post-excerpt__excerpt {
	font-size: 0.9rem;
	color: var(--tt-muted);
	line-height: 1.5;
	margin: 0;
}
.tt-cards .wp-block-post-excerpt__more-text { display: none; }

/* -------------------------------------------------------- more-link / meta */

.tt-more {
	font-family: var(--tt-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-top: 1.75rem;
	border-top: 1px solid var(--tt-rule);
	padding-top: 0.9rem;
}
.tt-more a { text-decoration: none; }
.tt-more a:hover { color: var(--tt-accent); text-decoration: underline; text-underline-offset: 0.3em; }

.tt-meta,
.tt-meta .wp-block-post-date,
.tt-meta .wp-block-post-terms {
	font-family: var(--tt-ui);
	font-size: 0.76rem;
	letter-spacing: 0.04em;
	color: var(--tt-muted);
}
.tt-meta a { color: inherit; text-decoration: none; }
.tt-meta a:hover { color: var(--tt-accent); text-decoration: underline; }

/* ------------------------------------------------------- communities band */

.tt-feature {
	background: var(--wp--preset--color--accent-4);
	border-top: 3px solid var(--tt-accent);
	padding: clamp(2rem, 5vw, 3.5rem);
}
.tt-feature h2 {
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	margin: 0.4rem 0 0.75rem;
	max-width: 22ch;
}
.tt-feature p { max-width: 58ch; color: var(--tt-muted); }
.tt-feature .tt-more { border-top: none; padding-top: 0.5rem; }
.tt-feature .tt-more a { color: var(--tt-accent); }

/* ---------------------------------------------------------------- articles */

.tt-article .wp-block-post-title {
	max-width: 22ch;
	letter-spacing: -0.025em;
	line-height: 1.06;
}
.tt-article .tt-lede {
	font-size: clamp(1.1rem, 1.8vw, 1.3rem);
	line-height: 1.55;
	color: var(--tt-muted);
	max-width: 56ch;
}
/* First paragraph of body copy carries a little more weight. */
.tt-article .wp-block-post-content > p:first-of-type {
	font-size: 1.15rem;
	line-height: 1.6;
}
.tt-article .wp-block-post-content h2 {
	margin-top: 2.4em;
	margin-bottom: 0.5em;
	font-size: clamp(1.35rem, 2.3vw, 1.7rem);
}
.tt-article .wp-block-post-content h3 {
	margin-top: 2em;
	margin-bottom: 0.4em;
}
.tt-article .wp-block-post-content p { margin-block: 0 1.3em; }
.tt-article .wp-block-post-content a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.tt-article .wp-block-post-content img { height: auto; }

/* The featured image on a post was filling the viewport at desktop width. */
.tt-article .wp-block-post-featured-image img {
	max-height: 60vh;
	width: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------------------ footer */

.tt-footer {
	border-top: 1px solid var(--tt-rule);
	font-family: var(--tt-ui);
	font-size: 0.8rem;
	color: var(--tt-muted);
}
.tt-footer .wp-block-navigation {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	gap: 1.5rem;
}
.tt-footer a { color: inherit; text-decoration: none; }
.tt-footer a:hover { color: var(--tt-accent); text-decoration: underline; text-underline-offset: 0.3em; }

/* ------------------------------------------------------------ small screens */

@media (max-width: 1023px) {
	.tt-list .wp-block-post-template,
	.tt-index .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 781px) {
	.tt-list .wp-block-post-template,
	.tt-index .wp-block-post-template { grid-template-columns: 1fr; }
	.tt-lead .wp-block-post-title { max-width: none; }
	.tt-list .wp-block-post-template { gap: 0; }
	.tt-cards .wp-block-post-template { gap: 2rem; }
	.tt-masthead .wp-block-navigation { font-size: 0.72rem; gap: 0.9rem; }
}


/* ------------------------------------------------ communities section index */

.tt-index .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: tt-idx;
}
.tt-index .wp-block-post-template > li {
	border-top: 1px solid var(--tt-rule);
	padding: 1.1rem 0 1.3rem;
	margin: 0;
	counter-increment: tt-idx;
}
.tt-index .wp-block-post-template > li::before {
	content: counter(tt-idx, decimal-leading-zero);
	font-family: var(--tt-ui);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--tt-accent);
	display: block;
	margin-bottom: 0.4rem;
}
.tt-index .wp-block-post-title {
	font-size: 1.15rem;
	line-height: 1.25;
	margin: 0 0 0.4rem;
}
.tt-index .wp-block-post-title a { text-decoration: none; }
.tt-index .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 0.12em; }
.tt-index .wp-block-post-excerpt__excerpt {
	font-size: 0.9rem;
	color: var(--tt-muted);
	line-height: 1.5;
	margin: 0;
}
.tt-index .wp-block-post-excerpt__more-text { display: none; }

/* Hub intro: the lede paragraph of the section front. */
.tt-hub-intro .wp-block-post-content > p:first-of-type {
	font-size: clamp(1.15rem, 1.9vw, 1.35rem);
	line-height: 1.55;
}


/* ============================================================ page furniture */

/* Generic pages (About, Privacy, and anything added later) get the same lede
   treatment as the section fronts, so no page looks like an afterthought. */
.tt-page .wp-block-post-title {
	max-width: 20ch;
	letter-spacing: -0.025em;
	line-height: 1.06;
}
.tt-page .wp-block-post-content > p:first-of-type {
	font-size: clamp(1.1rem, 1.8vw, 1.3rem);
	line-height: 1.55;
	color: var(--tt-muted);
}
.tt-page .wp-block-post-content h2 {
	margin-top: 2.4em;
	margin-bottom: 0.5em;
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}
.tt-page .wp-block-post-content h3 { margin-top: 2em; margin-bottom: 0.4em; }
.tt-page .wp-block-post-content p { margin-block: 0 1.3em; }
.tt-page .wp-block-post-content ul,
.tt-page .wp-block-post-content ol { margin-block: 0 1.3em; padding-left: 1.4em; }
.tt-page .wp-block-post-content li { margin-block: 0.35em; }

/* ================================================================== forms */
/* Contact Form 7 ships unstyled, which on a default theme reads as a raw
   browser form. These rules are generic CF7 selectors, so they carry to any
   site in the network running the same plugin. */

.tt-form .wpcf7-form p { margin-block: 0 1.25rem; }

.tt-form label {
	display: block;
	font-family: var(--tt-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tt-muted);
	margin-bottom: 0.45rem;
}

.tt-form input[type="text"],
.tt-form input[type="email"],
.tt-form input[type="tel"],
.tt-form input[type="url"],
.tt-form input[type="search"],
.tt-form textarea,
.tt-form select {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--tt-rule);
	border-radius: 2px;
	padding: 0.7rem 0.85rem;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.tt-form textarea { min-height: 11rem; resize: vertical; }

.tt-form input:focus,
.tt-form textarea:focus,
.tt-form select:focus {
	outline: none;
	border-color: var(--tt-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tt-accent) 14%, transparent);
}
.tt-form ::placeholder { color: var(--tt-muted); opacity: 0.7; }

.tt-form input[type="submit"],
.tt-form button[type="submit"],
.tt-form .wpcf7-submit {
	width: auto;
	font-family: var(--tt-ui);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	padding: 0.85rem 2rem;
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease;
}
.tt-form input[type="submit"]:hover,
.tt-form .wpcf7-submit:hover {
	background: var(--tt-accent);
	border-color: var(--tt-accent);
}

/* CF7 status and validation messages */
.tt-form .wpcf7-not-valid-tip {
	font-family: var(--tt-ui);
	font-size: 0.78rem;
	color: var(--tt-accent);
	margin-top: 0.35rem;
}
.tt-form .wpcf7-response-output {
	font-family: var(--tt-ui);
	font-size: 0.85rem;
	border: 1px solid var(--tt-rule) !important;
	border-left: 3px solid var(--tt-accent) !important;
	padding: 0.9rem 1.1rem !important;
	margin: 1.5rem 0 0 !important;
}
.tt-form .wpcf7-spinner { display: none; }

/* Contact layout: intro beside the form on wide screens. */
.tt-contact-grid { align-items: start; }
.tt-contact-aside p { color: var(--tt-muted); font-size: 0.95rem; }
.tt-contact-aside .tt-kicker { margin-bottom: 0.5rem; }

/* ================================================= search form and results */

.tt-searchbar .wp-block-search__input {
	font-family: var(--wp--preset--font-family--body);
	border: 1px solid var(--tt-rule);
	border-radius: 2px;
	padding: 0.7rem 0.85rem;
	background: var(--wp--preset--color--base);
}
.tt-searchbar .wp-block-search__button {
	font-family: var(--tt-ui);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2px;
	padding: 0.75rem 1.6rem;
	cursor: pointer;
}
.tt-searchbar .wp-block-search__button:hover {
	background: var(--tt-accent);
	border-color: var(--tt-accent);
}

/* ===================================================================== 404 */

.tt-404 h1 { max-width: 16ch; }
.tt-404 p { color: var(--tt-muted); max-width: 48ch; }

/* ============================================================ guide homepage */
/* The second homepage shape (make_theme.py --homepage guide). A publication
   front leads with the newest story; a site whose spine is a handful of
   location guides leads with what it is and where the guides are. The hero
   ground is the preset's choice: plain (page colour), surface (accent-4) or
   filled (accent-1 with base-coloured type). */

.tt-hero {
	padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.25rem, 5vw, 3.75rem);
	border-bottom: 1px solid var(--tt-rule);
}
.tt-hero-inner > * { max-width: none; margin-left: 0 !important; margin-right: auto !important; }
.tt-hero .tt-kicker { margin: 0 0 1rem; }
.tt-hero h1 {
	font-size: clamp(2.1rem, 4.6vw, 3.6rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
	margin: 0 0 1.1rem;
	max-width: 18ch;
}
.tt-hero .tt-hero-text {
	font-size: clamp(1.1rem, 1.8vw, 1.3rem);
	line-height: 1.55;
	max-width: 58ch;
	margin: 0 0 1.1rem;
	color: var(--tt-muted);
}
.tt-hero .tt-hero-note {
	font-family: var(--tt-ui);
	font-size: 0.88rem;
	line-height: 1.5;
	max-width: 62ch;
	margin: 0 0 1.4rem;
	color: var(--tt-muted);
}
.tt-hero .tt-hero-links {
	font-family: var(--tt-ui);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0.4rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 2rem;
}
.tt-hero .tt-hero-links a { text-decoration: none; border-bottom: 2px solid var(--tt-accent); padding-bottom: 0.25rem; }
.tt-hero .tt-hero-links a:hover { color: var(--tt-accent); }

.tt-hero-surface { background: var(--wp--preset--color--accent-4); border-bottom: none; }

.tt-hero-filled { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--base); border-bottom: none; }
.tt-hero-filled h1, .tt-hero-filled a { color: inherit; }
.tt-hero-filled .tt-kicker { color: inherit; opacity: 0.78; }
.tt-hero-filled .tt-hero-text, .tt-hero-filled .tt-hero-note { color: inherit; opacity: 0.86; }
.tt-hero-filled .tt-hero-links a { border-bottom-color: currentColor; }
.tt-hero-filled .tt-hero-links a:hover { color: inherit; opacity: 0.8; }

/* Guide cards: a numbered, ruled grid. Static markup, one card per guide page,
   because the core Query Loop cannot select pages by ID. */
.tt-guides-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: tt-guide;
}
.tt-guides-list > li {
	border-top: 1px solid var(--tt-rule);
	padding: 1.1rem 0 1.4rem;
	margin: 0;
	counter-increment: tt-guide;
}
.tt-guides-list > li::before {
	content: counter(tt-guide, decimal-leading-zero);
	font-family: var(--tt-ui);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--tt-accent);
	display: block;
	margin-bottom: 0.5rem;
}
.tt-guide-title {
	font-size: 1.25rem;
	line-height: 1.25;
	margin: 0 0 0.45rem;
}
.tt-guide-title a { text-decoration: none; }
.tt-guide-title a:hover { text-decoration: underline; text-underline-offset: 0.12em; }
.tt-guide-text {
	font-size: 0.92rem;
	color: var(--tt-muted);
	line-height: 1.5;
	margin: 0;
}
@media (max-width: 1023px) { .tt-guides-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 781px) { .tt-guides-list { grid-template-columns: 1fr; gap: 0; } .tt-hero h1 { max-width: none; } }

/* ------------------------------------------------- hero with an image */
.tt-hero-inner:has(.tt-hero-img img) {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}
.tt-hero-inner:has(.tt-hero-img img) > * { max-width: none; }
.tt-hero-copy > * { max-width: none; margin-left: 0 !important; margin-right: auto !important; }
.tt-hero .tt-hero-img { margin: 0; }
.tt-hero .tt-hero-img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (max-width: 899px) {
	.tt-hero-inner:has(.tt-hero-img img) { grid-template-columns: 1fr; }
	.tt-hero .tt-hero-img { order: -1; }
	.tt-hero .tt-hero-img img { aspect-ratio: 16 / 9; }
}

/* Guide cards with an image (injected by functions.php from the page's featured image). */
.tt-guides-list > li:has(.tt-guide-img) { border-top: none; padding-top: 0; }
.tt-guides-list > li:has(.tt-guide-img)::before { display: none; }
.tt-guide-img { display: block; margin: 0 0 0.9rem; overflow: hidden; background: var(--wp--preset--color--accent-4); }
.tt-guide-img img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform 320ms ease; }
.tt-guide-img:hover img { transform: scale(1.03); }
.tt-guides-list > li:has(.tt-guide-img) .tt-guide-body::before {
	content: counter(tt-guide, decimal-leading-zero);
	font-family: var(--tt-ui); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
	color: var(--tt-accent); display: block; margin-bottom: 0.5rem;
}
.tt-guides-list:has(.tt-guide-img) { gap: 2.5rem; }

/* ========================================================== guide pages */
/* The Guide page template (templates/guide.html): for the evergreen city or
   topic guides, as opposed to dated articles. A hero with the featured image,
   a sticky "On this page" column, numbered sections, and the content-level
   blocks the site's guide_pages.php inserts: an at-a-glance facts strip, a
   resources band and a card grid of the sibling guides. */

.tt-guide-hero {
	background: var(--wp--preset--color--accent-4);
	padding: clamp(2rem, 5vw, 3.5rem) 0 0;
}
.tt-guide-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.tt-guide-hero-inner > * { max-width: none; }
.tt-guide-hero-text > * { max-width: none; margin-left: 0 !important; margin-right: auto !important; }
.tt-guide-hero .tt-kicker { margin: 0 0 0.9rem; }
.tt-guide-hero .wp-block-post-title {
	font-size: clamp(1.9rem, 3.8vw, 3rem);
	line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 1rem; max-width: 22ch;
}
.tt-guide-hero .tt-guide-standfirst,
.tt-guide-hero .tt-guide-standfirst p {
	font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.55; color: var(--tt-muted); max-width: 58ch; margin: 0 0 clamp(1.5rem, 4vw, 3rem);
}
.tt-guide-hero .tt-guide-hero-img { margin: 0; }
.tt-guide-hero .tt-guide-hero-img img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
@media (min-width: 900px) {
	.tt-guide-hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; }
	.tt-guide-hero .tt-guide-hero-img img { aspect-ratio: 4 / 3; }
}

/* Body: sticky contents column beside the prose. The TOC is the first child of
   the content (functions.php); every other block goes in the second column. */
.tt-guide-layout .entry-content { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); }
.tt-guide-layout .entry-content > * { grid-column: 1; max-width: 68ch; }
.tt-guide-layout .entry-content > .tt-toc-guide { max-width: none; }
@media (min-width: 1024px) {
	.tt-guide-layout .entry-content { grid-template-columns: 220px minmax(0, 1fr); }
	.tt-guide-layout .entry-content > * { grid-column: 2; }
	.tt-guide-layout .entry-content > .tt-toc-guide { grid-column: 1; grid-row: 1 / span 1000; position: sticky; top: 1.5rem; align-self: start; }
}
.tt-guide-layout .entry-content > .alignwide,
.tt-guide-layout .entry-content > .tt-cta,
.tt-guide-layout .entry-content > .tt-facts,
.tt-guide-layout .entry-content > .tt-related-wrap { max-width: none; }

/* Numbered sections. */
.tt-guide-page .entry-content { counter-reset: tt-sec; }
.tt-guide-page .entry-content > h2 {
	counter-increment: tt-sec;
	border-top: 1px solid var(--tt-rule);
	padding-top: 1.4rem; margin-top: 2.6rem; margin-bottom: 0.6rem;
	font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: -0.015em;
}
.tt-guide-page .entry-content > h2::before {
	content: counter(tt-sec, decimal-leading-zero);
	display: block; font-family: var(--tt-ui); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
	color: var(--tt-accent); margin-bottom: 0.55rem;
}
.tt-guide-page .entry-content > h3 { margin-top: 1.8em; margin-bottom: 0.4em; font-size: 1.2rem; }
.tt-guide-page .entry-content > p { margin-block: 0 1.25em; }
.tt-guide-page .entry-content > p:first-of-type { font-size: 1.12rem; line-height: 1.6; }
.tt-guide-page .entry-content > figure { margin: 1.5rem 0 2rem; }
.tt-guide-page .entry-content > figure img { width: 100%; height: auto; }
.tt-guide-page .entry-content a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

/* Table of contents: boxed at the top of an article; a quiet list in the guide column. */
.tt-toc { border: 1px solid var(--tt-rule); padding: 1.1rem 1.4rem 1.2rem; margin: 0 0 2.2rem; background: var(--wp--preset--color--accent-4); }
.tt-toc-title { font-family: var(--tt-ui); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--tt-accent); margin: 0 0 0.7rem; }
.tt-toc ol { margin: 0; padding: 0 0 0 1.4em; columns: 2; column-gap: 2.5rem; font-size: 0.95rem; line-height: 1.4; }
.tt-toc li { margin: 0 0 0.45em; break-inside: avoid; }
.tt-toc a { text-decoration: none; }
.tt-toc a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
@media (max-width: 781px) { .tt-toc ol { columns: 1; } }
.tt-toc-guide { border: none; background: none; padding: 0; border-top: 1px solid var(--tt-rule); padding-top: 1rem; margin-bottom: 2rem; }
.tt-toc-guide ol { columns: 1; list-style: none; padding: 0; counter-reset: tt-toc; }
.tt-toc-guide li { counter-increment: tt-toc; display: grid; grid-template-columns: 1.8em 1fr; margin: 0 0 0.6em; font-size: 0.9rem; }
.tt-toc-guide li::before { content: counter(tt-toc, decimal-leading-zero); font-family: var(--tt-ui); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; color: var(--tt-accent); padding-top: 0.2em; }
.tt-toc-guide a { color: var(--tt-muted); }
.tt-toc-guide a:hover { color: var(--wp--preset--color--contrast); }

/* At-a-glance facts strip. */
.tt-facts {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.25rem 2rem;
	margin: 1.5rem 0 2.2rem; padding: 1.3rem 0 1.2rem; border-top: 3px solid var(--tt-accent); border-bottom: 1px solid var(--tt-rule);
}
.tt-facts > div { margin: 0; }
.tt-facts dt { font-family: var(--tt-ui); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tt-muted); margin: 0 0 0.35rem; }
.tt-facts dd { margin: 0; font-family: var(--tt-display); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.1; letter-spacing: -0.01em; }
.tt-facts dd small { display: block; font-family: var(--tt-ui); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--tt-muted); margin-top: 0.3rem; }
.tt-facts-source { font-family: var(--tt-ui); font-size: 0.78rem; color: var(--tt-muted); margin: -1.4rem 0 2.2rem !important; }
.tt-facts-source a { color: inherit; }

/* Resources / call-to-action band. Same ground as the feature block. */
.tt-cta { background: var(--wp--preset--color--accent-4); border-top: 3px solid var(--tt-accent); padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.4rem, 3.5vw, 2.4rem); margin: 2.8rem 0 2.4rem; }
.tt-cta > * { max-width: none; margin-left: 0 !important; margin-right: auto !important; }
.tt-cta .tt-kicker { margin: 0 0 0.6rem; }
.tt-cta h2 { border-top: none !important; padding-top: 0 !important; margin: 0 0 0.7rem !important; font-size: clamp(1.35rem, 2.4vw, 1.8rem) !important; max-width: 24ch; }
.tt-cta h2::before { display: none !important; }
.tt-cta p { color: var(--tt-muted); max-width: 60ch; margin: 0 0 1rem; }
.tt-cta .tt-cta-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; margin: 1.2rem 0 0; font-family: var(--tt-ui); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--contrast); }
.tt-cta .tt-cta-links a { text-decoration: none; border-bottom: 2px solid var(--tt-accent); padding-bottom: 0.25rem; }
.tt-cta .tt-cta-links a:hover { color: var(--tt-accent); }

/* Sibling guides at the foot of a guide: the same card grid as the homepage. */
.tt-related-wrap { margin-top: 1rem; }
.tt-related-wrap .tt-guides-list { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.tt-related-wrap .tt-guide-title { font-size: 1.1rem; }

/* ------------------------------------------------ masthead fixes, 2026-09-22 */
/* Core's constrained layout caps a child at content width (680px), which folded
   a seven-item centred menu onto two lines. The nav row is wide. */
.tt-masthead .tt-nav > .wp-block-navigation { max-width: none; }
.tt-masthead { padding-top: 2rem !important; padding-bottom: 1.25rem !important; }
.tt-masthead-left { padding-top: 2.1rem !important; padding-bottom: 1.35rem !important; }
.tt-masthead-left .tt-masthead-row { row-gap: 0.9rem; }

/* ------------------------------------------------------ guide-site footer */
/* Spacing stated here, not left to the block's inline style, which the render dropped. */
.tt-footer-guide { background: var(--wp--preset--color--accent-4); border-top: 1px solid var(--tt-rule);
	margin-top: clamp(4rem, 8vw, 6rem) !important; padding-top: clamp(3rem, 5vw, 4rem) !important; padding-bottom: 2.5rem !important; }
.tt-footer-grid { padding-top: 0.25rem; }
.tt-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem 3rem; }
.tt-footer-grid > * { max-width: none; margin: 0 !important; }
.tt-footer-title, .tt-footer .tt-footer-title a { font-family: var(--tt-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: var(--wp--preset--color--contrast); text-decoration: none; margin: 0 0 0.6rem; text-align: left; }
.tt-footer-desc { font-family: var(--wp--preset--font-family--body); font-size: 0.95rem; line-height: 1.55; color: var(--tt-muted); max-width: 34ch; margin: 0; }
.tt-footer-head { font-family: var(--tt-ui); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--tt-accent); margin: 0.2rem 0 0.9rem; }
.tt-footer-guide .tt-footer-nav, .tt-footer-guide .tt-footer-nav .wp-block-navigation__container { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.tt-footer-guide .tt-footer-nav { font-family: var(--wp--preset--font-family--body); font-size: 0.95rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.tt-footer-guide .tt-footer-nav a, .tt-footer-list a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.tt-footer-guide .tt-footer-nav a:hover, .tt-footer-list a:hover { color: var(--tt-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.tt-footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-family: var(--wp--preset--font-family--body); font-size: 0.95rem; }
.tt-footer-bottom { margin-top: 2.5rem !important; padding-top: 1.25rem; border-top: 1px solid var(--tt-rule); font-size: 0.78rem; color: var(--tt-muted); }
.tt-footer-bottom p { margin: 0; }
@media (max-width: 1023px) { .tt-footer-grid { grid-template-columns: 1fr 1fr; } .tt-footer-about { grid-column: 1 / -1; } }
@media (max-width: 600px) { .tt-footer-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------ guides band under every post */
.tt-post-guides { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 3px solid var(--tt-accent); }
.tt-post-guides .tt-kicker { margin: 0 0 0.5rem; }
.tt-post-guides h2 { margin: 0 0 1.5rem !important; font-size: clamp(1.35rem, 2.4vw, 1.8rem) !important; }
.tt-post-guides .tt-guides-list { grid-template-columns: repeat(3, 1fr); }
.tt-post-guides .tt-guide-title { font-size: 1.05rem; }
.tt-post-guides .tt-guide-text { display: none; }
@media (max-width: 781px) { .tt-post-guides .tt-guides-list { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
/* The article column is the content width; let the band use it fully. */
.tt-article .tt-post-guides { max-width: none; }

/* -------------------------------------------------- section cards (about) */
.tt-sections { list-style: none; margin: 1.5rem 0 2.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.25rem; }
.tt-sections li { margin: 0; }
.tt-sections a { display: block; height: 100%; padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--tt-rule); border-top: 3px solid var(--tt-accent); text-decoration: none; color: inherit; background: var(--wp--preset--color--base); transition: border-color 160ms ease; }
.tt-sections a:hover { border-color: var(--tt-accent); }
.tt-section-count { display: block; font-family: var(--tt-ui); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tt-accent); margin-bottom: 0.45rem; }
.tt-section-name { display: block; font-family: var(--tt-display); font-size: 1.2rem; line-height: 1.2; margin-bottom: 0.4rem; }
.tt-section-desc { display: block; font-size: 0.9rem; line-height: 1.45; color: var(--tt-muted); }
.tt-guide-layout .entry-content > .tt-sections, .tt-guide-layout .entry-content > .tt-guides-list { max-width: none; }

/* ------------------------------------------------------------ contact form */
.tt-contact { margin: 0.5rem 0 2rem; }
.tt-contact-row { margin: 0 0 1.2rem; }
.tt-contact label { display: block; font-family: var(--tt-ui); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-muted); margin-bottom: 0.45rem; }
.tt-contact input[type="text"], .tt-contact input[type="email"], .tt-contact select, .tt-contact textarea {
	width: 100%; box-sizing: border-box; font-family: var(--wp--preset--font-family--body); font-size: 1rem; line-height: 1.5;
	color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--base); border: 1px solid var(--tt-rule); border-radius: 2px; padding: 0.7rem 0.85rem; }
.tt-contact textarea { min-height: 10rem; resize: vertical; }
.tt-contact input:focus, .tt-contact select:focus, .tt-contact textarea:focus { outline: none; border-color: var(--tt-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tt-accent) 14%, transparent); }
.tt-contact-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tt-contact-submit { font-family: var(--tt-ui); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--base); background: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--contrast); border-radius: 2px; padding: 0.85rem 2rem; cursor: pointer; }
.tt-contact-submit:hover { background: var(--tt-accent); border-color: var(--tt-accent); }
.tt-contact-note, .tt-contact-error { font-family: var(--tt-ui); font-size: 0.8rem; color: var(--tt-muted); margin: 0.4rem 0 0; }
.tt-contact-error { color: var(--tt-accent); margin-bottom: 1rem; }
.tt-contact-sent { border: 1px solid var(--tt-rule); border-left: 3px solid var(--tt-accent); padding: 1.1rem 1.4rem; margin: 0.5rem 0 2rem; }
.tt-contact-sent p { margin: 0; } .tt-contact-sent .tt-kicker { margin-bottom: 0.4rem; }

/* ----------------------------------------------------------------- logo mark */
/* A site with a logo keeps it (DESIGN.md §8): the mark sits beside the wordmark
   on a left masthead and above it on a centred one. The block renders nothing
   when no logo is set, so a site without one looks exactly as before. */
.tt-brand { gap: 0.8rem; }
.tt-brand .tt-mark { margin: 0; line-height: 0; }
.tt-brand .tt-mark img { height: 2.4rem; width: auto; display: block; }
.tt-brand-centered { gap: 0.55rem; }
.tt-brand-centered .tt-mark img { height: 2.75rem; }
.tt-masthead-left .tt-brand { align-items: center; }
@media (max-width: 780px) { .tt-brand .tt-mark img { height: 1.9rem; } }

/* ==== preset ==== */
.tt-cards .wp-block-post-featured-image img { aspect-ratio: 1 / 1; }
.tt-section-head { border-top: 6px solid var(--wp--preset--color--contrast); padding-top: 0.9rem; }
.tt-feature, .tt-cta, .tt-facts { border-top-color: var(--wp--preset--color--contrast); }
.tt-kicker, .tt-kicker .wp-block-post-terms { font-weight: 500; letter-spacing: 0.06em; font-size: 0.72rem; }
.tt-kicker::before, .tt-toc-title::before { content: '\2014 '; opacity: 0.6; }
.tt-masthead .wp-block-navigation, .tt-footer .wp-block-navigation, .tt-more, .tt-hero .tt-hero-links, .tt-cta .tt-cta-links {
	font-weight: 500; letter-spacing: 0.04em; text-transform: none; font-size: 0.86rem; }
.tt-masthead-banner { padding-bottom: 0 !important; }
.tt-masthead-banner .wp-block-site-title { text-align: left; font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -0.035em; }
.tt-masthead-banner .tt-brand-banner { padding-bottom: 1.1rem; }
.tt-masthead-banner .tt-nav-banner { border-top: 1px solid var(--tt-rule); }
.tt-masthead-banner .tt-nav-banner-row > .wp-block-navigation { max-width: none; justify-content: flex-start; padding: 0.7rem 0; gap: clamp(1rem, 2.5vw, 2rem); }
@media (max-width: 780px) {
	.tt-masthead-banner .wp-block-site-title { font-size: 1.6rem; }
	.tt-masthead-banner .tt-nav-banner-row > .wp-block-navigation { padding: 0.5rem 0; } }
.tt-masthead .wp-block-site-title, .tt-lead .wp-block-post-title, .tt-article .wp-block-post-title,
	.tt-page .wp-block-post-title, .tt-hero h1, .tt-guide-hero .wp-block-post-title, .tt-feature h2,
	.tt-section-head h1, .tt-section-head h2, .tt-cta h2 { letter-spacing: -0.005em; }

/* ------------------------------------------------------- FAQ, 2026-09-22 */
/* An h2.tt-faq-heading (a numbered section on a guide, in the contents) over a
   group of h3 questions and paragraph answers. Plain, crawlable, no toggles. */
.tt-faq { margin: 0 0 1rem; border-top: 1px solid var(--tt-rule); }
.tt-faq > * { max-width: none; }
.tt-faq h3 { font-size: 1.08rem !important; margin: 1.5rem 0 0.45rem !important; padding: 0; line-height: 1.35; }
.tt-faq h3 + p { margin: 0 0 0.6rem; }
.tt-faq p { color: var(--tt-muted); }
.tt-faq p:last-child { margin-bottom: 0; padding-bottom: 1.5rem; }
.tt-guide-layout .entry-content > .tt-faq { max-width: 68ch; }