/*
Theme Name:   Plugin Store
Theme URI:    https://example.com
Description:  Storefront child theme for selling digital plugin downloads. Custom color palette, typography, product cards, and homepage hero — built on top of Storefront for full WooCommerce compatibility.
Author:       Ruel Porlas
Author URI:   https://example.com
Template:     storefront
Version:      1.0.0
Text Domain:  plugin-store
*/

/* -------------------------------------------------------------------------
   1. Design tokens
   Matches the approved style guide. Change these six values and the whole
   theme re-colors consistently — nothing else in this file should need to
   reference a raw hex code outside this block.
   ------------------------------------------------------------------------- */
:root {
	--color-paper: #EDEFEA;
	--color-ink: #1B2420;
	--color-ink-muted: #333F3A;
	--color-brass: #AD7A2E;
	--color-verdigris: #4B6E62;
	--color-graphite: #C9CCC2;
	--color-blueprint: #202B2E;

	--font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-body: 'Source Serif 4', Georgia, serif;
	--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* -------------------------------------------------------------------------
   2. Base typography
   ------------------------------------------------------------------------- */
body {
	background-color: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.widget-title,
.woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-ink);
}

h1 { font-size: 44px; font-weight: 700; line-height: 1.1; }
h2 { font-size: 28px; line-height: 1.2; }
h3 { font-size: 19px; line-height: 1.3; }

p {
	color: var(--color-ink-muted);
}

a {
	color: var(--color-ink);
}

a:hover,
a:focus {
	color: var(--color-brass);
}

code, kbd, pre, .code,
.woocommerce-product-details__short-description code {
	font-family: var(--font-mono);
	background: #E3E5DD;
	padding: 2px 6px;
	font-size: 0.9em;
}

/* -------------------------------------------------------------------------
   3. Buttons
   Covers Storefront/WooCommerce's standard button classes so this applies
   consistently across cart, checkout, product pages, and forms without
   needing template overrides.
   ------------------------------------------------------------------------- */
.button,
button,
input[type="submit"],
input[type="button"],
.wc-proceed-to-checkout a.checkout-button,
a.button.alt,
.single_add_to_cart_button {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	background: var(--color-brass);
	color: var(--color-paper);
	border: none;
	border-radius: 0;
	padding: 14px 26px;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.single_add_to_cart_button:hover {
	background: var(--color-verdigris);
	color: var(--color-paper);
}

.button.alt.disabled,
button:disabled,
input:disabled {
	background: #DADCD3;
	color: #8D9088;
	cursor: not-allowed;
}

/* Secondary / ghost button variant. Add class="button-secondary" wherever
   a lower-emphasis action is needed (used on the homepage hero). */
.button-secondary {
	background: none;
	border: 1px solid var(--color-ink);
	color: var(--color-ink);
}

.button-secondary:hover {
	background: var(--color-ink);
	color: var(--color-paper);
	border-color: var(--color-ink);
}

/* -------------------------------------------------------------------------
   4. Forms
   ------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	font-family: var(--font-body);
	font-size: 15px;
	padding: 11px 14px;
	border: 1px solid var(--color-graphite);
	background: var(--color-paper);
	color: var(--color-ink);
	border-radius: 0;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-brass);
}

label {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
}

/* -------------------------------------------------------------------------
   5. Header / navigation
   Restyles Storefront's existing header markup — no template override
   needed.
   ------------------------------------------------------------------------- */
.site-header {
	background: var(--color-paper);
	border-bottom: 1px solid var(--color-graphite);
}

.site-header .site-branding .site-title a {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 22px;
	color: var(--color-ink);
	text-decoration: none;
}

.site-header .site-description {
	font-family: var(--font-body);
	color: var(--color-ink-muted);
}

.main-navigation ul li a {
	font-family: var(--font-display);
	font-size: 15px;
	color: var(--color-ink);
}

.main-navigation ul li a:hover {
	color: var(--color-brass);
}

/* -------------------------------------------------------------------------
   6. Product grid / cards
   Targets WooCommerce's native loop markup (ul.products li.product) so the
   Shop page, [products] shortcode, and Products block all inherit this
   automatically.
   ------------------------------------------------------------------------- */
ul.products li.product {
	border: 1px solid var(--color-graphite);
	padding: 24px;
	transition: border-color 0.15s ease-in-out;
}

ul.products li.product:hover {
	border-color: var(--color-brass);
}

ul.products li.product .woocommerce-loop-product__title {
	font-size: 18px;
	margin: 14px 0 8px;
}

ul.products li.product .price {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 17px;
	color: var(--color-ink);
}

ul.products li.product .button {
	margin-top: 14px;
	width: 100%;
	text-align: center;
}

.woocommerce-product-gallery,
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	font-family: var(--font-display);
}

.woocommerce span.onsale {
	background: var(--color-brass);
	font-family: var(--font-display);
	border-radius: 0;
}

/* -------------------------------------------------------------------------
   7. Homepage hero (see front-page.php)
   ------------------------------------------------------------------------- */
.hero {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 64px;
	align-items: center;
	padding: 96px 0 88px;
}

.hero__headline {
	font-size: 48px;
	max-width: 560px;
}

.hero__subhead {
	font-size: 19px;
	max-width: 540px;
}

.hero__actions {
	display: flex;
	gap: 16px;
	padding-top: 8px;
}

.hero__actions .button {
	text-decoration: none;
	display: inline-block;
}

.hero__diagram {
	max-width: 440px;
	margin: 0 auto;
}

@media (max-width: 860px) {
	.hero {
		grid-template-columns: 1fr;
		padding: 56px 0;
	}
}

.hero__diagram-line {
	stroke-dasharray: 420;
	stroke-dashoffset: 420;
	animation: draw-line 1.4s ease-out forwards;
}

.hero__diagram-line--1 {
	animation-delay: 0.2s;
}

.hero__diagram-line--2 {
	animation-delay: 0.7s;
}

@keyframes draw-line {
	from { stroke-dashoffset: 420; }
	to { stroke-dashoffset: 0; }
}

.front-page-content {
	padding: 72px 0;
	border-top: 1px solid var(--color-graphite);
}

.front-page-products {
	padding: 72px 0;
	border-top: 1px solid var(--color-graphite);
}

.front-page-products h2 {
	margin-bottom: 32px;
}

/* -------------------------------------------------------------------------
   11. Value props
   ------------------------------------------------------------------------- */
.value-props {
	padding: 56px 0;
}

.value-props__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.value-props__item h3 {
	font-size: 17px;
	margin: 0 0 10px;
}

.value-props__item p {
	font-size: 15px;
	margin: 0;
}

@media (max-width: 860px) {
	.value-props__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.value-props__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   12. Step block grid (non-block-editor version, used on the hardcoded
   "How it works" section in page-templates/home-page.php)
   ------------------------------------------------------------------------- */
.step-block-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	counter-reset: step-counter;
}

.step-block-grid .step-block h3 {
	margin: 0 0 10px;
}

.step-block-grid .step-block p {
	margin: 0;
	font-size: 15px;
}

@media (max-width: 860px) {
	.step-block-grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   13. FAQ
   ------------------------------------------------------------------------- */
.faq {
	padding: 72px 0;
	border-top: 1px solid var(--color-graphite);
}

.faq__list {
	max-width: 760px;
}

.faq__item {
	border-bottom: 1px solid var(--color-graphite);
	padding: 20px 0;
}

.faq__item summary {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
}

.faq__item p {
	margin: 12px 0 0;
	font-size: 15px;
}

/* -------------------------------------------------------------------------
   14. Closing CTA band
   ------------------------------------------------------------------------- */
.cta-band {
	background: var(--color-blueprint);
	color: var(--color-paper);
	text-align: center;
	padding: 72px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.cta-band h2 {
	color: var(--color-paper);
	margin: 0;
}

/* -------------------------------------------------------------------------
   8. "How it works" step blocks
   Add the class "step-block" to a Columns block (or any block) in the
   block editor to get the numbered, line-connected step treatment used on
   the homepage.
   ------------------------------------------------------------------------- */
.step-block {
	position: relative;
	padding-top: 36px;
}

.step-block::before {
	counter-increment: step-counter;
	content: counter(step-counter, decimal-leading-zero);
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--color-brass);
	display: block;
	margin-bottom: 10px;
}

.wp-block-columns:has(.step-block) {
	counter-reset: step-counter;
}

/* -------------------------------------------------------------------------
   9. Footer
   ------------------------------------------------------------------------- */
.site-footer,
.site-footer .footer-widget-region {
	background: var(--color-blueprint);
	color: var(--color-paper);
}

.site-footer .widget-title {
	color: #9FB0A9;
	font-size: 14px;
}

.site-footer a {
	color: var(--color-paper);
}

.site-footer a:hover {
	color: var(--color-brass);
}

.site-info {
	font-family: var(--font-mono);
	font-size: 12px;
	color: #9FB0A9;
	border-top: 1px solid #3A4A46;
}

/* -------------------------------------------------------------------------
   10. About page template
   ------------------------------------------------------------------------- */
.about-page__content {
	max-width: 760px;
	margin: 0 auto;
	padding: 72px 0;
}

.about-page__content h1 {
	margin-bottom: 24px;
}