/*
Theme Name: Teemusk Red
Theme URI: https://teemusk.com
Author: Tanel Teemusk
Author URI: https://teemusk.com
Description: Bespoke Gutenberg-native block theme for teemusk.com — the "Red Heavy" design. Editorial blog + iOS portfolio. All content stays block/menu/meta editable; design lives in theme.json + patterns.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.0.6
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: teemusk
Tags: blog, portfolio, one-column, full-site-editing, block-patterns, custom-colors, custom-menu, editor-style, featured-images, threaded-comments
*/

/* Most styling lives in theme.json. This file holds only what presets cannot express. */

/* Red inline-emphasis format (registered as teemusk/red). */
.r { color: var(--wp--preset--color--red); }

/* Thumbnails sit on white backgrounds, so give them a hairline edge. */
.is-style-teemusk-thumb img,
.wp-block-post-featured-image.is-style-teemusk-thumb img {
	border: 1px solid var(--wp--preset--color--soft);
	border-radius: 8px;
}

/* Mono eyebrow helper (used by patterns where a block style is overkill). */
.teemusk-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
	margin: 0;
}
.teemusk-eyebrow .mut { color: var(--wp--preset--color--meta); }

/* Breadcrumb eyebrow (per Penpot) — ancestor links red, current page + the
   middot separators in meta grey. */
.teemusk-eyebrow.teemusk-crumbs { color: var(--wp--preset--color--meta); }
.teemusk-crumbs a { color: var(--wp--preset--color--red); text-decoration: none; }
.teemusk-crumbs .mut { color: var(--wp--preset--color--meta); }

/* Stacked wordmark: "Tanel Teemusk" over a small tight tagline. */
.teemusk-brand { gap: 1px; }
.teemusk-brand .wp-block-site-title { line-height: 1; }
.teemusk-tagline {
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--meta);
	margin: 0;
}

/* Mono meta line (CATEGORY · DATE) for hand-authored patterns. */
.teemusk-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--meta);
	margin: 0;
}
.teemusk-meta .r { color: var(--wp--preset--color--red); }

/* Measure utilities — readable line lengths the block supports can't set.
   Flush-left: a constrained layout auto-centers any child narrower than the
   content area, so pin these to the left edge instead. */
.teemusk-mw-hero,
.teemusk-mw-sub,
.teemusk-mw-ex,
.teemusk-mw-bio,
.teemusk-mw-lede { margin-left: 0; margin-right: auto; }
.teemusk-mw-hero { max-width: 1100px; }
.teemusk-mw-sub { max-width: 560px; }
.teemusk-mw-ex { max-width: 460px; }
.teemusk-mw-bio { max-width: 820px; }
.teemusk-mw-lede { max-width: 640px; }

/* Ghost button — transparent with hairline border (light backgrounds). */
.wp-block-button.is-style-ghost > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid #d0d0d0;
}
.wp-block-button.is-style-ghost > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--ink);
}
/* Ghost button on dark bands. */
.teemusk-dark .wp-block-button.is-style-ghost > .wp-block-button__link {
	color: #ffffff;
	border-color: #444444;
}
.teemusk-dark .wp-block-button.is-style-ghost > .wp-block-button__link:hover {
	border-color: #ffffff;
}

/* Topic filter bar — mono tab row, ALL/active in red. */
.teemusk-filters {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.teemusk-filters a { color: var(--wp--preset--color--meta); text-decoration: none; }
.teemusk-filters a:hover { color: var(--wp--preset--color--red); }
/* Selected topic — red and semi-bold. */
.teemusk-filters a.on,
.teemusk-filters a.is-active { color: var(--wp--preset--color--red); font-weight: 600; }
/* Right-aligned article count on the listing filter bar. */
.teemusk-count { margin-left: auto; color: var(--wp--preset--color--meta); }
.teemusk-browse a, a.teemusk-browse { color: var(--wp--preset--color--red); font-weight: 600; font-size: 15px; }

/* Recent-writing card titles sit tight under their meta line (design: 21px/700). */
.teemusk-card .wp-block-post-title {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	margin-top: 9px;
}
.teemusk-card .wp-block-post-featured-image { margin: 0; }
/* Thumbnail links must be a full-area block click target. */
.wp-block-post-featured-image a { display: block; }
.wp-block-post-featured-image img { display: block; width: 100%; }

/* Selected Work name list — hairline under each project name. */
.teemusk-worklist .wp-block-post-title {
	font-size: 17px;
	font-weight: 600;
	padding: 14px 0;
	margin: 0;
	border-bottom: 1px solid #333333;
	line-height: 1.2;
}
.teemusk-worklist .wp-block-post-title a { color: #eaeaea; }

/* Query pagination — 42px mono squares, current = dark. */
.wp-block-query-pagination {
	margin-top: 70px;
	gap: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
}
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
	min-width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border: 1px solid var(--wp--preset--color--soft);
	border-radius: 6px;
	color: var(--wp--preset--color--body);
	text-decoration: none;
}
.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--ink);
	color: #fff;
	border-color: var(--wp--preset--color--ink);
}
.wp-block-query-pagination a:hover { border-color: var(--wp--preset--color--ink); }

/* Single-post tag list spacing + byline. */
.teemusk-tags .wp-block-post-terms { font-size: 13px; }
.teemusk-byline img { border-radius: 50%; }

/* Newsletter band (static placeholder form). */
.teemusk-news-input {
	width: 300px;
	max-width: 100%;
	height: 54px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	padding: 0 16px;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 15px;
	background: #fff;
	color: var(--wp--preset--color--ink);
}
.teemusk-news-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.teemusk-news-btn {
	height: 54px;
	display: inline-flex;
	align-items: center;
	background: var(--wp--preset--color--red);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	padding: 0 22px;
	border-radius: 6px;
	border: 0;
	cursor: pointer;
}

/* Contact Form 7 — match the design's inputs and red submit. */
.wpcf7 { max-width: 100%; }
.wp-block-column { min-width: 0; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	padding: 14px 16px;
	margin-top: 6px;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 15px;
	background: #fff;
	color: var(--wp--preset--color--ink);
}
.wpcf7 textarea { min-height: 150px; resize: vertical; }
.wpcf7 label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 16px; }
.wpcf7 .wpcf7-submit {
	background: var(--wp--preset--color--red);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 15px 26px;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}
.wpcf7 .wpcf7-submit:hover { background: #e22b20; }
.wpcf7 input:focus,
.wpcf7 textarea:focus { outline: none; border-color: var(--wp--preset--color--ink); box-shadow: none; }
/* Validation + response messages — on-brand, not the default yellow box. */
.wpcf7 .wpcf7-response-output {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-left: 3px solid var(--wp--preset--color--red) !important;
	border-radius: 6px;
	padding: 14px 16px !important;
	margin: 22px 0 0 !important;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}
.wpcf7 .wpcf7-not-valid-tip {
	color: var(--wp--preset--color--red);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	margin-top: 6px;
}
.wpcf7 .wpcf7-not-valid { border-color: var(--wp--preset--color--red) !important; }
.wpcf7-form.sent .wpcf7-response-output { border-left-color: #2e7d32 !important; }

/* Contact: on mobile, show the details first and the form below them. */
@media (max-width: 781px) {
	.teemusk-contact-cols.is-layout-flex { flex-direction: column-reverse !important; }
}

/* About — stat figures + contact detail list. */
.teemusk-stats { display: flex; gap: 48px; flex-wrap: wrap; }
/* Stat figures are red per Penpot. */
.teemusk-stat-num { font-size: 48px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; color: var(--wp--preset--color--red); }
.teemusk-stat-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--meta);
	margin-top: 6px;
}
.teemusk-logos {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--meta);
	line-height: 2;
}
.teemusk-logos a { color: inherit; text-decoration: none; }
.teemusk-logos a:hover { color: var(--wp--preset--color--red); }

/* Footer nav links — the navigation block forces body ink, too dark on the
   dark band; restore the design's light grey (#ccc) with a white hover. */
.teemusk-footer .wp-block-navigation,
.teemusk-footer .wp-block-navigation a,
.teemusk-footer .wp-block-navigation .wp-block-navigation-item__content {
	color: #cccccc;
	text-decoration: none;
}
.teemusk-footer .wp-block-navigation a:hover,
.teemusk-footer .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: #ffffff;
}
.teemusk-footer-brand a { color: #ffffff; text-decoration: none; }

/* Full-bleed bands — the homepage/newsletter/CTA bands must span the viewport
   regardless of how post-content nests them; the alignfull root-padding rule
   doesn't apply without a global-padding parent here, so force it. */
.wp-site-blocks { overflow-x: clip; }
.teemusk-news,
.teemusk-dark,
.teemusk-cta {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
/* Newsletter (homepage) sits flush against the footer below it. */
.teemusk-news { margin-bottom: 0 !important; border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; }
/* Light CTA band carries a thin top hairline (per Penpot). */
.teemusk-cta { border-top: 1px solid #e2e2e2; }

/* Single-article reading column — left-aligned (not centered) at ~760px,
   with a comfortably larger body size than the 16px base. */
.teemusk-article { max-width: 760px; margin-left: 0; margin-right: 0; }
.teemusk-article-body p,
.teemusk-article-body li { font-size: 18px; line-height: 1.75; }
.teemusk-article-body ul,
.teemusk-article-body ol { padding-left: 1.2em; }
.teemusk-article-body h2 { font-size: 30px; line-height: 1.2; margin-top: 1.7em; }
.teemusk-article-body h3 { font-size: 23px; line-height: 1.25; margin-top: 1.4em; }
.teemusk-article-body blockquote {
	border-left: 3px solid var(--wp--preset--color--red);
	padding-left: 22px;
	margin: 1.6em 0;
	font-size: 22px;
	line-height: 1.45;
	font-style: normal;
	color: var(--wp--preset--color--ink);
}

/* "Hire me" lives inside the nav (so it folds into the mobile hamburger);
   render it as the red pill button on the desktop bar. */
.teemusk-hire-link .wp-block-navigation-item__content {
	background: var(--wp--preset--color--red);
	color: #ffffff;
	border-radius: 6px;
	padding: 11px 18px;
	font-weight: 600;
}
.teemusk-hire-link .wp-block-navigation-item__content:hover { color: #ffffff; }

/* Kill hover-underline on touch devices (it flickers in while scrolling). */
@media (hover: none) {
	a:hover,
	.teemusk-footer .wp-block-navigation a:hover { text-decoration: none !important; }
}

/* ---- Responsive: tablet ---- */
@media (max-width: 1100px) {
	body { --wp--style--root--padding-left: 48px; --wp--style--root--padding-right: 48px; }
	.teemusk-header, .teemusk-footer, .teemusk-dark, .teemusk-news, .teemusk-cta {
		padding-left: 48px !important;
		padding-right: 48px !important;
	}
}

/* ---- Responsive: phone ---- */
@media (max-width: 781px) {
	body { --wp--style--root--padding-left: 22px; --wp--style--root--padding-right: 22px; }
	.teemusk-header, .teemusk-footer, .teemusk-dark, .teemusk-news, .teemusk-cta {
		padding-left: 22px !important;
		padding-right: 22px !important;
	}
	/* Big DISPLAY headings only (page H1, article title, query title) scale to
	   viewport — explicitly NOT card or worklist titles. */
	h1,
	.teemusk-article .wp-block-post-title,
	.wp-block-query-title {
		font-size: clamp(38px, 11vw, 60px) !important;
		line-height: 1.05 !important;
	}
	.teemusk-mw-hero { font-size: clamp(34px, 10vw, 54px) !important; }
	/* Featured headline scales modestly, stays well below display size. */
	.teemusk-featured .wp-block-post-title { font-size: clamp(28px, 7vw, 38px) !important; }
	/* Card titles under thumbnails — smaller on phones. */
	.teemusk-card .wp-block-post-title { font-size: 18px !important; line-height: 1.28 !important; }
	/* Selected Work app names — smaller on phones. */
	.teemusk-worklist .wp-block-post-title { font-size: 15px !important; padding: 11px 0 !important; }
	/* Single-column grids on phones. */
	.teemusk-cards.is-layout-grid,
	.teemusk-worklist.is-layout-grid { grid-template-columns: 1fr !important; }
	/* On mobile the homepage filterbar stacks so the topic row can take the
	   full width and scroll on its own. */
	.teemusk-filterbar {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 18px !important;
	}
	/* Topic/category filters stay one line, middot-separated, and scroll. */
	.teemusk-filters {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		gap: 0 !important;
		scrollbar-width: none;
	}
	.teemusk-filters::-webkit-scrollbar { display: none; }
	.teemusk-filters > p { margin: 0; display: flex; align-items: center; }
	.teemusk-filters > p a { white-space: nowrap; }
	.teemusk-filters > p:not(:last-child)::after {
		content: "·";
		color: var(--wp--preset--color--meta);
		margin: 0 12px;
	}
	/* Dark bands breathe a little less. */
	.teemusk-dark { padding-top: 56px !important; padding-bottom: 56px !important; }
	.teemusk-news { padding-top: 40px !important; padding-bottom: 40px !important; }
	/* Header nav wraps under the wordmark gracefully. */
	.teemusk-header .wp-block-navigation { row-gap: 12px; }
}

/* Mobile nav overlay — left-aligned, padded, never clipped off-screen. */
@media (max-width: 781px) {
	.wp-block-navigation__responsive-container.is-menu-open {
		background-color: #ffffff;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: flex-start !important;
		justify-content: flex-start !important;
		padding: 92px 22px 40px !important;
	}
	/* Close (X) aligns to the header's right margin and vertical centre. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		top: 30px !important;
		right: 22px !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: flex-start !important;
		gap: 22px !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: 22px;
		font-weight: 600;
		color: var(--wp--preset--color--ink);
	}
	/* In the overlay, Hire me is just the last (red) item, no pill chrome. */
	.is-menu-open .teemusk-hire-link .wp-block-navigation-item__content {
		background: transparent;
		color: var(--wp--preset--color--red);
		padding: 0;
	}
}

/* ============================================================
   Cross-document View Transitions — a calm crossfade between page
   loads (like bentrushmore.com). Pure CSS: works in Chromium 126+ /
   Safari 18.2+; every other browser navigates normally (no fade, no
   breakage). No JS, no router — only real navigations animate.
   ============================================================ */
@view-transition {
	navigation: auto;
}

/* Soften the root crossfade (default 0.25s) and the named chrome below. */
::view-transition-old(*),
::view-transition-new(*) {
	animation-duration: 0.4s;
	animation-timing-function: ease;
}

/* Anchor the persistent header/footer/wordmark so they hold their place
   while the page body crossfades behind them. */
.teemusk-header {
	view-transition-name: teemusk-header;
}

.teemusk-footer {
	view-transition-name: teemusk-footer;
}

.teemusk-brand {
	view-transition-name: teemusk-brand;
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}