/*
 * TechProMaster Premium UI Upgrade — Phase 1 visual layer.
 *
 * Scope (per Phase 1 objective): Global Design System, Header & Navigation,
 * Homepage. Category-archive- and single-article-specific selectors are
 * intentionally NOT included here — those are Phase 2.
 *
 * This file is a pure presentation layer on top of the untouched
 * style.css/components.css baseline: every selector below either (a)
 * targets a brand-new class introduced by this upgrade (.tpm-hero-panel,
 * .tpm-hero-grid, etc. — added as markup wrappers in front-page.php only,
 * no PHP logic changed) or (b) overrides specific *properties* that the
 * base stylesheets deliberately leave at their original values, via the
 * same selector, relying on normal CSS cascade order (loaded after
 * components.css — see inc/enqueue.php). No !important is used anywhere.
 *
 * Every color/spacing/radius value below is a var() reference to the
 * design tokens defined in style.css :root / [data-theme="dark"] — this
 * file defines no new hex colors of its own, so a future token change
 * (e.g. a Customizer primary-color override) still flows through
 * correctly here exactly as it does in components.css.
 */

/* =========================================================
   1. GLOBAL — dark-mode background texture, focus rings
   ========================================================= */

/*
 * Subtle dot-grid texture behind dark-mode pages, matching the supplied
 * mockups exactly. Additive background-image/-size layered on top of the
 * existing background-color (set by style.css's `body` rule) rather than
 * replacing the `background` shorthand, so nothing else about body's
 * existing background handling changes. Light mode is untouched.
 */
[data-theme="dark"] body {
	background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.035) 1px, transparent 0);
	background-size: 28px 28px;
}

/*
 * Input focus rings — components.css already defines a focus ring for
 * comment-form fields only (hardcoded to the light-mode blue). These add
 * the same treatment, token-driven so it adapts per mode, to the header
 * search field and newsletter field (previously no explicit focus style,
 * relying on the browser default outline only), and correct the
 * comment-form ring's color specifically in dark mode.
 */
.tpm-search-input:focus,
.tpm-search-input:focus-visible,
.tpm-newsletter-form input[type="email"]:focus,
.tpm-newsletter-form input[type="email"]:focus-visible {
	outline: none;
	border-color: var(--tpm-color-primary);
	box-shadow: 0 0 0 3px var(--tpm-color-primary-dim);
}

[data-theme="dark"] .tpm-comment-textarea:focus,
[data-theme="dark"] .tpm-comment-form input[type="text"]:focus,
[data-theme="dark"] .tpm-comment-form input[type="email"]:focus,
[data-theme="dark"] .tpm-comment-form input[type="url"]:focus {
	border-color: var(--tpm-color-primary);
	box-shadow: 0 0 0 3px var(--tpm-color-primary-dim);
}

/* =========================================================
   2. HEADER & NAVIGATION polish
   ========================================================= */

/*
 * Ghost-button hover: nudge the border toward the accent color on hover/
 * focus so "Create account" reads as an intentional secondary button
 * rather than a static outline (mockup .btn-ghost-nav has no explicit
 * hover state, but every other bordered control in this design system
 * does — kept consistent).
 */
.tpm-header-signup:hover,
.tpm-header-signup:focus-visible {
	border-color: var(--tpm-color-primary);
}

/* =========================================================
   3. HOMEPAGE HERO — premium editorial layout
   Markup added in front-page.php: .tpm-hero-grid wraps the existing
   .tpm-hero-eyebrow/h1/p/ctas (now grouped in .tpm-hero-main) and a new
   .tpm-hero-panel that re-presents the *same* existing dynamic hero-stats
   markup/data (techpromaster_get_platform_stats(), unchanged) as a
   bordered data panel instead of a plain centered row. No new query, no
   new Customizer setting — purely a markup regrouping + restyle.
   ========================================================= */

.tpm-hero-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: var(--tpm-space-6);
	align-items: center;
}

.tpm-hero-panel {
	background: var(--tpm-color-surface);
	border: 1px solid var(--tpm-color-border);
	border-radius: 14px;
	padding: var(--tpm-space-4);
}

.tpm-hero-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--tpm-font-mono);
	font-size: 0.71875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tpm-color-text-muted);
	margin-bottom: var(--tpm-space-3);
}

.tpm-hero-panel-live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--tpm-color-accent);
	text-transform: none;
	letter-spacing: 0;
}

.tpm-hero-panel-live::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	animation: tpm-live-pulse 1.6s ease-in-out infinite;
}

@keyframes tpm-live-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
	.tpm-hero-panel-live::before { animation: none; }
}

/* Re-flow the existing hero-stats row into stacked mono data rows when it lives inside the panel. */
.tpm-hero-panel .tpm-hero-stats {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--tpm-space-3);
	font-weight: 400;
}

.tpm-hero-panel .tpm-hero-stats > span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	padding-bottom: var(--tpm-space-3);
	border-bottom: 1px solid var(--tpm-color-border);
}

.tpm-hero-panel .tpm-hero-stats > span:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.tpm-hero-panel .tpm-hero-stats strong {
	font-family: var(--tpm-font-mono);
	font-size: 1.375rem;
}

/* Legibility when the panel sits over a Customizer-set hero background image — feature untouched, just kept readable on top of a photo. */
.tpm-hero.has-bg-image .tpm-hero-panel {
	background: rgba(18, 24, 33, 0.55);
	border-color: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

@media (max-width: 1024px) {
	.tpm-hero-grid { grid-template-columns: 1fr; }
	.tpm-hero-panel { max-width: 480px; }
}

/* =========================================================
   4. HOMEPAGE — ticker "tag" treatment
   Same element (.tpm-ticker-heading), restyled from a plain uppercase
   label into the mockup's mono pill tag. Admin-configured heading text
   (Customizer: Latest Headlines ticker heading) is preserved verbatim.
   ========================================================= */
.tpm-ticker-heading {
	display: inline-block;
	font-family: var(--tpm-font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--tpm-color-bg);
	background: var(--tpm-color-accent);
	padding: 3px 9px;
	border-radius: 5px;
	margin: 0 0 var(--tpm-space-2);
}

/* =========================================================
   5. HOMEPAGE — section heading numbering
   Pure-CSS counter, zero PHP/template changes: every .tpm-featured
   section on the page (topic sections, menu-driven categories, and the
   WooCommerce homepage sections all already share this class) gets an
   automatic "01 — FEATURED" style eyebrow above its heading, in source
   order. Renumbers itself correctly regardless of how many sections are
   enabled/resolve on a given page load.
   ========================================================= */
.tpm-main {
	counter-reset: tpm-section;
}

.tpm-featured {
	counter-increment: tpm-section;
}

.tpm-section-heading {
	align-items: baseline;
}

.tpm-section-heading h2::before {
	content: counter(tpm-section, decimal-leading-zero) " — FEATURED";
	display: block;
	font-family: var(--tpm-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--tpm-color-primary);
	margin-bottom: 6px;
}

/* =========================================================
   6. HOMEPAGE — card grid, cards, badges, meta
   Same .tpm-card-grid / .tpm-card / .tpm-card-badge / .tpm-card-meta
   classes used by template-parts/content.php and the WooCommerce
   homepage cards in front-page.php — restyled in place.
   ========================================================= */

/*
 * auto-fit instead of a hard repeat(3, 1fr): when a section has fewer
 * cards than fit one row (e.g. a topic section with only 1-2 published
 * posts), the grid no longer leaves a blank trailing column — cards keep
 * a natural width and left-align instead. Full rows (3+ cards) render
 * visually identically to the previous fixed 3-column layout at normal
 * container widths. Tablet/mobile fixed column counts (below) are
 * restated here so they continue to win at those widths.
 */
.tpm-card-grid {
	grid-template-columns: repeat(auto-fit, minmax(260px, 380px));
	justify-content: start;
}

@media (max-width: 1024px) {
	.tpm-card-grid {
		grid-template-columns: repeat(2, 1fr);
		justify-content: normal;
	}
}

@media (max-width: 782px) {
	.tpm-card-grid {
		grid-template-columns: 1fr;
		justify-content: normal;
	}
}

.tpm-card {
	transition: transform 0.18s ease, border-color 0.18s ease;
}

.tpm-card:hover,
.tpm-card:focus-within {
	transform: translateY(-3px);
	border-color: var(--tpm-color-primary);
}

[data-theme="dark"] .tpm-card {
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.tpm-card { transition: none; }
	.tpm-card:hover, .tpm-card:focus-within { transform: none; }
}

/* Filter kept subtle (0.92, not the mockup's 0.9) — object-fit stays "contain" (unchanged, see components.css comment on the P1.21 no-crop fix); this only adds a light desaturation on top of that unchanged, uncropped image. */
.tpm-card-thumb img {
	filter: saturate(0.92);
}

/*
 * Category/tag label: mono, amber, uppercase — replaces the previous
 * pill-badge treatment (design-system-handoff.md §4). The WooCommerce
 * "N products" count badge next to homepage category headings shares
 * this class and gets the same mono-data treatment, which is consistent
 * with this design system's "mono = data" rule (§2).
 */
.tpm-card-badge {
	font-family: var(--tpm-font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tpm-color-accent);
	background: transparent;
	padding: 0;
	border-radius: 0;
}

[data-theme="dark"] .tpm-card-badge {
	color: var(--tpm-color-accent);
}

/*
 * .tpm-badge-sale (WooCommerce "Sale" ribbon) extends .tpm-card-badge but
 * must stay a solid, legible pill overlaid on the product image — restore
 * the padding/radius/type the base rule above intentionally strips, so
 * this ribbon doesn't inherit the new flat/transparent label style.
 */
.tpm-badge-sale {
	font-family: var(--tpm-font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	padding: 2px var(--tpm-space-2);
	border-radius: 6px;
}

.tpm-card-meta {
	font-family: var(--tpm-font-mono);
	font-size: 0.6875rem;
}

.tpm-card-meta > *:not(:first-child)::before {
	content: '·';
	margin-right: 6px;
	color: var(--tpm-color-text-muted);
}

/* =========================================================
   7. HOMEPAGE — newsletter panel
   ========================================================= */
.tpm-newsletter .tpm-container {
	background: linear-gradient(135deg, var(--tpm-color-surface), var(--tpm-color-bg-alt));
	border: 1px solid var(--tpm-color-border);
	border-radius: 14px;
	padding: var(--tpm-space-5) var(--tpm-space-4);
}