/*
Theme Name: Developer Advocate
Theme URI: https://ryanwelcher.com/
Author: Ryan Welcher
Author URI: https://ryanwelcher.com/
Description: A monochrome block theme for a developer advocate — near-black ground, Syne over Spline Sans, deep shadows. Built for Advanced Query Loop and Code Block Pro.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: developer-advocate
Tags: blog, one-column, block-patterns, full-site-editing, dark-mode
*/

/* Everything visual lives in theme.json. This file carries only what
   theme.json cannot express. */

:root {
	--da-shadow-card: inset 0 0 0 1px #22221f, 0 10px 26px rgba(0, 0, 0, 0.6);
	--da-shadow-lift: 0 8px 26px rgba(0, 0, 0, 0.75);
	--da-shadow-photo: 0 24px 60px rgba(0, 0, 0, 0.85);
}

/* Card surface — used by the .is-style-da-card block style on groups. */
.is-style-da-card {
	box-shadow: var(--da-shadow-card);
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.is-style-da-card:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 1px #33322f, 0 14px 32px rgba(0, 0, 0, 0.7);
}

/* Photographs sit on a deep shadow rather than a border. */
.is-style-da-photo img {
	box-shadow: var(--da-shadow-photo);
}

/* Mono eyebrow above sections — .is-style-da-kicker on a paragraph or heading. */
.is-style-da-kicker {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Filled button lifts; outline button keeps a hairline. */
.wp-block-button.is-style-fill .wp-block-button__link {
	box-shadow: var(--da-shadow-lift);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	box-shadow: inset 0 0 0 1px #33322f, 0 8px 22px rgba(0, 0, 0, 0.5);
}

/* Post-list rows: a hairline above each, no card. */
.is-style-da-rows .wp-block-post-template > li {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--40);
}

/* Row columns (date, title, extras) share a text baseline, as in the design. */
.is-style-da-rows .wp-block-post-template > li > .wp-block-group {
	align-items: baseline;
}

/* The date column keeps its width so every title starts on the same line. */
.is-style-da-rows .wp-block-post-template > li > .wp-block-group > :first-child {
	flex-shrink: 0;
}

/* Row pills and links keep their size so titles line up. */
.is-style-da-rows .wp-block-post-template > li > .wp-block-group > :is(.is-style-da-pill, .wp-block-buttons) {
	flex-shrink: 0;
}

.is-style-da-rows .is-style-da-pill {
	box-sizing: border-box;
	text-align: center;
}

/* On narrow screens the date sits above the title instead of beside it. */
@media (max-width: 600px) {
	.is-style-da-rows .wp-block-post-template > li > .wp-block-group {
		flex-wrap: wrap;
	}
}

/* Small mono label with a hairline — .is-style-da-pill on a paragraph. */
.is-style-da-pill {
	margin: 0;
	padding: 6px 11px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px #33322f;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
	white-space: nowrap;
}

/* A button that reads as a quiet mono link — .is-style-da-text-link. */
.wp-block-button.is-style-da-text-link .wp-block-button__link {
	padding: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.wp-block-button.is-style-da-text-link .wp-block-button__link:hover {
	color: var(--wp--preset--color--contrast);
}

/* The article column sits flush left in the wide wrapper, not centred —
   constrained layout would otherwise give it auto margins on both sides, and
   core sets those with !important, so this has to answer in kind. */
.da-article.da-article > :where(:not(.alignfull):not(.alignright)),
.da-page .entry-content > :where(:not(.alignfull):not(.alignright)) {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Inline code reads as a pill inside body copy. */
:where(.entry-content) :not(pre) > code {
	padding: 2px 6px;
	border-radius: 4px;
	background: #1a1a1c;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.88em;
	color: var(--wp--preset--color--contrast);
}

/* An aside inside an article — .is-style-da-note on a group. */
.is-style-da-note {
	padding: 18px 20px;
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--wp--preset--color--secondary);
}

/* Section headings in an article carry their own rhythm. */
.da-article .entry-content > :is(h2, h3) {
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Related posts share the row equally. Core's grid layout uses auto-fill,
   which reserves a fourth empty column at wide sizes and leaves three cards
   stranded on the left; auto-fit collapses it so they stretch to fit. */
.da-related-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* Cards match the tallest in the row. The list item already stretches to the
   row height; the card inside it has to be told to fill that. */
.da-related-grid > li {
	display: flex;
}

.da-related-grid > li > .wp-block-group {
	flex: 1;
}

/* Jetpack form fields, dressed to match the theme's inputs. Targeted by
   element rather than Jetpack's own class names, which move between
   versions. */
.da-form {
	gap: var(--wp--preset--spacing--40);
}

.da-form :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="date"], select, textarea),
.wp-block-post-comments-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--surface);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	color: var(--wp--preset--color--contrast);
}

/* Comments: hairline-ruled, like the post rows, rather than boxed. */
.da-comment {
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
}

.da-comments .wp-block-comment-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A reply sits indented under its parent, with the hairline pulled in too. */
.da-comments .wp-block-comment-template ol {
	margin: 0 0 0 var(--wp--preset--spacing--50);
	padding: 0;
	list-style: none;
}

.da-comments .wp-block-comment-author-name a {
	text-decoration: none;
}

.da-comments .wp-block-comment-content {
	color: var(--wp--preset--color--secondary);
}

/* Reply and pagination read as the same quiet mono link as Watch / Slides. */
.da-comments :is(.wp-block-comment-reply-link a, .wp-block-comments-pagination a) {
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.da-comments :is(.wp-block-comment-reply-link a, .wp-block-comments-pagination a):hover {
	color: var(--wp--preset--color--contrast);
}

/* The form's own labels and notes, which core renders outside our block. */
.wp-block-post-comments-form :is(label, .comment-notes, .logged-in-as) {
	display: block;
	margin-bottom: 7px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.wp-block-post-comments-form .comment-form > p {
	margin-bottom: var(--wp--preset--spacing--40);
}


.da-form textarea {
	min-height: 160px;
	line-height: 1.6;
	resize: vertical;
}

.da-form ::placeholder {
	color: var(--wp--preset--color--muted);
}

.da-form :is(input, select, textarea):focus {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--muted);
}

/* Labels read as the same mono eyebrow used everywhere else. */
.da-form .grunion-field-label {
	display: block;
	margin-bottom: 7px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.da-form .grunion-label-required {
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.08em;
	text-transform: none;
}

/* Keyboard focus is never the browser default. */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

::selection {
	background: #33322f;
	color: var(--wp--preset--color--contrast);
}

/* Uppercase display headings — Syne is set tight and in caps by design. */
.is-style-da-display {
	text-transform: uppercase;
	letter-spacing: -0.03em;
	line-height: 0.95;
}