/*
Theme Name: Shirt Forge
Theme URI: https://example.com/shirt-forge
Author: Shirt Forge
Author URI: https://example.com
Description: A block theme for Shirt Forge — legendary shirt-smith. Dark, industrial and loud, with a molten gold and ember red palette. Includes a Designs custom post type for managing the shirt catalogue.
Requires at least: 6.5
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: shirt-forge
Tags: block-theme, full-site-editing, dark, one-column, custom-colors, custom-logo, custom-menu, featured-images
*/

/* ==========================================================================
   Notes
   Most colour, spacing and type decisions live in theme.json so that they
   stay editable under Appearance > Editor > Styles. This file only handles
   the details that block markup cannot express cleanly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Visible keyboard focus everywhere. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */

.sf-site-header {
	border-bottom: 2px solid var(--wp--preset--color--rule);
}

.sf-site-header .wp-block-site-logo img {
	width: 80px;
	height: auto;
	display: block;
}

.sf-site-header .wp-block-site-tagline {
	margin-block-start: 4px;
}

/* Navigation — underline on hover, gold underline on the current page. */
.sf-nav .wp-block-navigation-item__content {
	padding-block-end: 4px;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.sf-nav .wp-block-navigation-item__content:hover {
	border-bottom-color: var(--wp--preset--color--accent);
}

.sf-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.sf-nav .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.sf-nav .wp-block-navigation-item[aria-current="page"] > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

/* Mobile overlay menu should match the site, not default to white. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* --------------------------------------------------------------------------
   Page header — the gradient rule under section intros
   -------------------------------------------------------------------------- */

.sf-page-header {
	text-align: center;
}

.sf-page-header::after {
	content: "";
	display: block;
	width: 120px;
	height: 4px;
	margin: 18px auto 0;
	background: var(--wp--preset--gradient--ember, linear-gradient(90deg, #d62828, #f2c200));
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.sf-hero {
	text-align: center;
}

.sf-hero .sf-hero__lede {
	max-width: 600px;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Design grid + cards
   -------------------------------------------------------------------------- */

.sf-design-grid.wp-block-post-template,
.sf-design-grid.wp-block-query .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	padding: 0;
	margin: 0;
}

.sf-design-card {
	background: var(--wp--preset--color--surface);
	border: 2px solid var(--wp--preset--color--rule);
	padding: 16px;
	text-align: center;
	height: 100%;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sf-design-card:hover,
.sf-design-card:focus-within {
	transform: scale(1.04);
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 12px rgba(214, 40, 40, 0.6);
}

/* Uniform framing regardless of the source image's aspect ratio. */
.sf-design-card .wp-block-post-featured-image {
	margin-block-end: 12px;
	border-bottom: 2px solid var(--wp--preset--color--rule);
}

.sf-design-card .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.sf-design-card .wp-block-post-title {
	margin: 8px 0;
}

.sf-design-card .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.sf-design-card .wp-block-post-excerpt {
	font-size: var(--wp--preset--font-size--small);
}

.sf-design-card .wp-block-post-excerpt__more-text {
	display: none;
}

/* --------------------------------------------------------------------------
   Single design
   -------------------------------------------------------------------------- */

.sf-single-design .wp-block-post-featured-image img {
	width: 100%;
	max-height: 70vh;
	object-fit: contain;
	background: var(--wp--preset--color--surface);
	border: 2px solid var(--wp--preset--color--rule);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.sf-site-footer {
	border-top: 2px solid var(--wp--preset--color--rule);
	font-size: var(--wp--preset--font-size--small);
}

/* --------------------------------------------------------------------------
   Editor parity — the logo has a transparent background, so give the editor
   canvas the same dark surface the front end has.
   -------------------------------------------------------------------------- */

.editor-styles-wrapper .sf-design-card {
	background: var(--wp--preset--color--surface);
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.sf-design-card:hover,
	.sf-design-card:focus-within {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
	.sf-site-header {
		text-align: left;
	}

	.sf-design-card {
		padding: 14px;
	}
}