/*
Theme Name: Tubeneur Blog
Theme URI: https://tubeneur.com/blog/
Description: Tubeneur-branded child theme for Twenty Twenty-Five. Applies the Tubeneur brand system from docs/BRAND_FOUNDATION.md: Void Black and Graphite surfaces, Signal Gold accent, Clash Display headings and Inter body text. Dark mode only — the brand's chrome and gold lose contrast on light backgrounds.
Author: Tubeneur
Author URI: https://tubeneur.com/
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tubeneur-blog
Tags: blog, one-column, custom-colors, custom-menu, block-patterns, full-site-editing
*/

/*
   Almost everything is set in theme.json, which is the right place for a
   block theme: it feeds the editor as well as the front end, so the admin
   preview matches what readers see. Only rules that theme.json cannot express
   belong here.

   Bundled fonts (self-hosted, no CDN at runtime):
     assets/fonts/clash-display/  Clash Display 400/500/600/700 — Fontshare, free
     assets/fonts/inter/          Inter variable 100-900 — Google Fonts, SIL OFL 1.1
*/

/* Large headlines are tighter than Clash Display's default spacing, matching
   the -0.02em used across tubeneur.com. theme.json has no letterSpacing for
   individual heading levels in a way that covers editor + front end reliably,
   so it is set here. */
h1,
h2,
.wp-block-post-title,
.wp-block-site-title {
	letter-spacing: -0.02em;
}

/* Dark surfaces need a visible focus ring; the parent's outline colour is
   tuned for a white background. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* Form fields inherit the page background on a dark theme and become
   invisible. Give them the Graphite surface and a hairline border. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
	background-color: var(--wp--preset--color--accent-2);
	border: 1px solid var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--contrast);
}

/* Images and embeds on a near-black page look harsh at full brightness.
   A hairline keeps them from bleeding into the background. */
.wp-block-image img,
.wp-block-post-featured-image img {
	border-radius: 12px;
}

/* The browser's own UI (scrollbars, form controls) should follow the theme. */
html {
	color-scheme: dark;
}

/* ==========================================================================
   Blog archive/home: hero + card grid.
   Used by templates/home.html and templates/index.html. Replaces the parent
   theme's default listing, which rendered each post's FULL body inline on
   the archive page — this shows a thumbnail, title and short excerpt only,
   with the rest a click away on the post itself.
   ========================================================================== */

.blog-hero { text-align: left; }

.blog-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
	margin: 0 0 16px;
}

.blog-hero h1 { margin-bottom: 12px; }

.blog-hero-tagline {
	color: var(--wp--preset--color--accent-4);
	font-size: 18px;
	max-width: 60ch;
}

/* Query Loop's own "grid" layout sets column count but not a responsive
   breakpoint, so collapse to one column by hand below 780px (see the media
   query at the end of this block). */
.wp-block-post-template.blog-grid {
	gap: 32px;
}

.blog-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	background: var(--wp--preset--color--accent-2);
	/* Same rgba(227,178,60,...) "gold-line" the static site uses for a subtle
	   gold frame (base.css: --gold-line: rgba(227, 178, 60, 0.28)) — a light
	   border on every card, not just on hover. */
	border: 1px solid rgba(227, 178, 60, 0.28);
	border-radius: 16px;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(227, 178, 60, 0.12);
}

.blog-card__image {
	margin: 0 0 4px;
	border-radius: 10px;
	overflow: hidden;
}
.blog-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.blog-card__title {
	margin: 0;
	font-size: 22px;
}
/* theme.json sets Signal Gold as the site-wide DEFAULT link colour (for
   inline prose links), so without this the post title — itself a link —
   rendered solid gold instead of reading as a heading. White by default,
   same as every other card title on the static site; gold only on hover. */
.blog-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.blog-card__title a:hover { color: var(--wp--preset--color--accent-1); }

.blog-card__excerpt {
	margin: 0;
	color: var(--wp--preset--color--accent-4);
	font-size: 15px;
	line-height: 1.6;
}
.blog-card__excerpt a {
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
	white-space: nowrap;
}
.blog-card__excerpt a:hover { text-decoration: underline; }

.blog-card__date {
	margin-top: auto;
	padding-top: 8px;
	color: var(--wp--preset--color--accent-4);
	font-size: 13px;
}

@media (max-width: 780px) {
	.wp-block-post-template.blog-grid { grid-template-columns: 1fr !important; }
}