/*
Theme Name: Twenty Twenty-Five Child
Description: Child theme for Twenty Twenty-Five. Adds the "Botanical Notebook" palette (theme.json) — deep bark, autumn amber, forest green, soft sage, terracotta — plus tactile bark/amber controls, amber prose underlines with sage hover, woodland sprout bullets, sage category pills, a dashed notebook header divider, and paper index-card posts on the blog listing.
Author: Sam
Template: twentytwentyfive
Version: 1.1.4
*/

/*
 * Blog listing: each post's date shows above its title (via template-query-loop
 * pattern override). The "Rare blog, rattlin' blog" tagline now lives in the
 * header pattern, directly under the site title (see .site-tagline below); the
 * hidden-blog-heading pattern override renders nothing. This bump busts the
 * theme pattern cache so the overrides register on deploy.
 */

/*
 * --- Tactile controls: header search + buttons ---
 * Deep-bark borders and hard drop shadows that "press in" on hover.
 * Buttons fill with autumn amber and go forest green on hover. Overrides
 * the parent theme's pill-shaped search (border-radius 3.125rem) with a
 * framed, notebook-ink look.
 */
.wp-block-search__input {
	border: 2px solid var(--wp--preset--color--contrast) !important;
	border-radius: 8px !important;
	background-color: #ffffff !important;
	padding: 8px 14px !important;
	box-shadow: 3px 3px 0 var(--wp--preset--color--contrast);
}

.wp-block-search__button,
.wp-block-button__link {
	border: 2px solid var(--wp--preset--color--contrast) !important;
	border-radius: 8px !important;
	background-color: var(--wp--preset--color--accent-amber) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	padding: 8px 18px !important; /* compact, vs the parent's 2.25rem */
	box-shadow: 3px 3px 0 var(--wp--preset--color--contrast);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.wp-block-search__button:hover,
.wp-block-button__link:hover {
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--accent-forest) !important;
}

/*
 * --- Typo link underlines (prose only) ---
 * A clean 2px amber underline, offset from the text; on hover it flips to
 * forest green and fills with a soft sage highlight. Scoped to paragraph /
 * list links inside post content so headings, dates, featured images, and
 * nav links keep their normal look.
 */
main .entry-content p a,
main .entry-content li a {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent-amber);
	text-decoration-thickness: 2px !important;
	text-underline-offset: 4px;
	font-weight: 600;
	padding: 0 2px;
	transition: color 0.15s ease-in-out, text-decoration-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

main .entry-content p a:hover,
main .entry-content li a:hover {
	color: var(--wp--preset--color--accent-forest);
	text-decoration-color: var(--wp--preset--color--accent-forest);
	background-color: var(--wp--preset--color--accent-sage);
	border-radius: 4px;
}

/*
 * --- Woodland list markers for prose lists ---
 * A little sprout sits in place of each bullet. Swap the emoji for 🌿 or
 * ✦ if the seedling reads too playful.
 */
main .entry-content ul:not(.wp-block-social-links):not(.wp-block-navigation) {
	list-style: none !important;
	padding-left: 1.6rem !important;
}

main .entry-content ul:not(.wp-block-social-links):not(.wp-block-navigation) li {
	position: relative;
	margin-bottom: 0.5rem;
}

main .entry-content ul:not(.wp-block-social-links):not(.wp-block-navigation) li::before {
	content: "🌱"; /* Woodland sprout */
	position: absolute;
	left: -1.7rem;
	font-size: 0.95rem;
}

/*
 * --- Dashed "notebook" divider under the header ---
 * The header group already carries its own bottom padding, so only a little
 * extra room is added above the divider line.
 */
header.wp-block-template-part {
	border-bottom: 3px dashed var(--wp--preset--color--contrast);
	padding-bottom: 0.75rem;
	margin-bottom: 1.5rem;
}

/*
 * --- Site tagline under the masthead ---
 * "Rare blog, rattlin' blog" sits directly under the site title in the
 * header's vertical branding stack. Warm terracotta, italic serif, a touch
 * smaller than body text so it reads as a subtitle rather than a headline.
 */
header .site-tagline {
	margin: 0 !important;
	padding: 0;
	color: var(--wp--preset--color--accent-terracotta);
	font-size: 1.05rem;
	font-style: italic;
	font-family: Georgia, "Times New Roman", serif;
	letter-spacing: 0.02em;
}

/*
 * --- Category pill badges ---
 * Post categories (e.g. "DIY", "Software") become sage pill tags; the ", "
 * separators the block renders are hidden so the pills read as a clean row.
 */
.taxonomy-category a,
.entry-taxonomy a {
	display: inline-block;
	background-color: var(--wp--preset--color--accent-sage);
	color: var(--wp--preset--color--accent-forest) !important;
	font-size: 0.82rem;
	font-weight: 600 !important;
	padding: 3px 10px;
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--accent-forest);
	text-decoration: none !important;
	margin-right: 4px;
}

.taxonomy-category a:hover,
.entry-taxonomy a:hover {
	background-color: var(--wp--preset--color--accent-forest);
	color: #ffffff !important;
}

.taxonomy-category .wp-block-post-terms__separator,
.entry-taxonomy .wp-block-post-terms__separator {
	display: none;
}

/*
 * --- Tactile post cards (blog listing) ---
 * Each post on the home page becomes a paper index card: white with a deep
 * bark border and a soft sage drop shadow, lifting to forest green on hover.
 * The posts stack as a flex column with a gap in place of the old per-post
 * spacing. The inner group used to carry spacing-60 top/bottom padding to
 * separate posts; with cards + gap that padding would double up inside each
 * card, so it is zeroed here and the card's own padding governs the interior.
 * Each card is capped at its own slightly wider column (680px) and centered so
 * it reads as an index card instead of stretching edge-to-edge on desktop.
 * 680px is intentionally wider than the 645px prose measure (content-size):
 * the card's border and 1.8rem padding eat into the line length, so 680px
 * cards render text at about the same measure as a 645px single post.
 * The cap lives on the LIST (a block element) — capping the flex-item <li>
 * is unreliable in some browsers — and auto margins re-center the whole
 * column inside the full-width, alignfull template.
 */
.wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-post-template > li {
	background-color: #ffffff;
	border: 2px solid var(--wp--preset--color--contrast); /* Deep Bark */
	border-radius: 12px;
	padding: 1.5rem 1.8rem !important;
	margin: 0 auto !important; /* center card in the post-text column */
	max-width: 100%;
	box-shadow: 4px 4px 0 var(--wp--preset--color--accent-sage); /* Soft sage */
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-post-template > li:hover {
	transform: translateY(-2px);
	box-shadow: 6px 6px 0 var(--wp--preset--color--accent-forest); /* Forest green */
}

.wp-block-post-template > li > .wp-block-group {
	padding: 0 !important;
}

/*
 * Excerpt text inside cards: the post-content block is alignfull, so its box
 * breaks out of the card and rides up against the border. The content's own
 * global padding was papering over that mismatch (on desktop the excerpt sat
 * ~10px from the edge while the title/date sat at the card's proper padding).
 * Pin it to the card's inner width with no extra padding so text lines up
 * with the title, and let long unbreakable tokens (URLs) wrap so they can
 * never stretch a card past the viewport on mobile.
 */
.wp-block-post-template > li .wp-block-post-content {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	overflow-wrap: anywhere;
}

/*
 * On small screens the content column (645px) is wider than the viewport, so
 * the list-level cap stops biting and the alignfull list would run the cards
 * flush to the screen edges. Keep them a hair off the bezel instead.
 */
@media (max-width: 781px) {
	.wp-block-post-template {
		max-width: none;
		margin-left: 12px;
		margin-right: 12px;
	}
}

/*
 * --- Comment counts on post cards ---
 * The comments-link block shows "N comments" (or "No comments") at the
 * bottom of each homepage card; kept subtle and forest-green to echo the
 * category pills.
 */
.wp-block-post-template > li .wp-block-post-comments-link {
	margin-top: 0.75rem;
	font-size: 0.85rem;
}

.wp-block-post-template > li .wp-block-post-comments-link a {
	color: var(--wp--preset--color--accent-forest);
	font-weight: 600;
	text-decoration: none;
}

.wp-block-post-template > li .wp-block-post-comments-link a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent-amber);
	text-underline-offset: 3px;
}

/*
 * Site title on small screens: keep the masthead on ONE line by scaling it
 * with the viewport instead of wrapping (the 3.5rem title needs ~471px; a
 * phone only gives ~260-370px). The clamp hits the full 3.5rem by ~622px
 * viewport, so it meets the desktop size smoothly at the 782px breakpoint.
 */
@media (max-width: 781px) {
	header .wp-block-site-title {
		font-size: clamp(1.75rem, 9vw, 3.5rem);
		line-height: 1.1;
	}
}

/*
 * Header search: give the search box a little breathing room from the nav
 * ("Subscribe") on desktop.
 */
header .wp-block-group.alignwide {
	/* The theme's default 1.2rem flex gap would double-count with the search's
	   own margins below; spacing in this header is margin-driven instead. */
	gap: 0;
}
@media (min-width: 782px) {
	header .wp-block-search {
		/* Cap the desktop search width so the enlarged site title, nav, and
		   search all share one row and the search doesn't hog the space. */
		width: 300px;
		max-width: 100%;
		margin-left: var(--wp--preset--spacing--30);
	}
}

/*
 * Header search on small screens: the header group wraps, so the search
 * drops to its own full-width row below the title/hamburger. The block's
 * internal wrapper is flex with an auto-growing input, so a full-width form
 * renders as a balanced input + "Search" button instead of a tiny oval and
 * an oversized pill.
 */
@media (max-width: 781px) {
	header .wp-block-search {
		flex-basis: 100%;
		width: 100%;
		max-width: none;
		margin-left: 0;
		margin-top: var(--wp--preset--spacing--20);
	}
}