/*
Theme Name: Stitcheria
Theme URI: https://stitcheria.it
Description: Child theme of Blocksy for Stitcheria - custom embroidery, digital designs and made-to-order work.
Author: Stitcheria
Template: blocksy
Version: 0.4.0
Text Domain: stitcheria
*/

/* ==========================================================================
   TOKENS
   Palette comes from the workshop, not from e-commerce convention: a petrol
   thread-teal as the single bold voice, muted brass for structure, on cool
   paper neutrals biased slightly green so they read as chosen. Boldness is
   spent in one place; everything else stays quiet.

   The recurring motif is a stitch line - a dashed rule, 2px, in brass or
   teal. It does structural work (dividers, step connectors, hover states)
   rather than decorating, which is why it earns its place.
   ========================================================================== */

:root {
	--st-paper:        #F4F5F2;
	--st-paper-raised: #FFFFFF;
	--st-paper-sunk:   #EAEDE8;

	--st-ink:          #14201E;
	--st-ink-muted:    #4B5A56;
	--st-ink-faint:    #6D7C77;
	--st-ink-invert:   #F2F6F4;

	--st-line:         #DCE1DA;
	--st-line-strong:  #BFC8C0;

	--st-thread:       #0F5257;
	--st-thread-deep:  #093A3E;
	--st-thread-wash:  #E3EDEC;
	--st-brass:        #8F6520;
	--st-brass-wash:   #F3EBDA;

	--st-ok:    #2F6B3F;
	--st-error: #95261F;

	--st-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--st-font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--st-font-mono:    "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;

	--st-s1: .5rem;  --st-s2: .875rem; --st-s3: 1.5rem;
	--st-s4: 2.5rem; --st-s5: 4rem;    --st-s6: 6rem;

	--st-radius: 6px;
	--st-measure: 34rem;
	--st-shell: 72rem;
}

/* ==========================================================================
   BASE
   ========================================================================== */

body {
	background: var(--st-paper);
	color: var(--st-ink);
	font-family: var(--st-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

.ct-container,
.ct-container-full > .entry-content,
[class*="ct-container"] { --container-max-width: var(--st-shell); }

h1, h2, h3, h4,
.entry-title, .page-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--st-font-display);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.015em;
	text-wrap: balance;
	color: var(--st-ink);
}

a { color: var(--st-thread); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--st-thread-deep); }
:focus-visible { outline: 2px solid var(--st-thread); outline-offset: 3px; border-radius: 2px; }

.st-figure, .woocommerce-Price-amount, .st-step__n { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   EDITORIAL CONTENT - fixes every prose page at once
   ========================================================================== */

.entry-content > * { max-width: var(--st-measure); }
.entry-content > h2 { max-width: 30rem; }

.entry-content > h2 {
	font-size: clamp(1.65rem, 3vw, 2.1rem);
	margin: var(--st-s5) 0 var(--st-s2);
}
.entry-content > h2:first-child { margin-top: 0; }

.entry-content > h3 {
	font-size: 1.3rem;
	margin: var(--st-s4) 0 var(--st-s1);
}

.entry-content > h4 {
	font-family: var(--st-font-body);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--st-thread);
	margin: var(--st-s3) 0 var(--st-s1);
}

.entry-content > p,
.entry-content > ul,
.entry-content > ol { margin: 0 0 var(--st-s3); color: var(--st-ink-muted); }
.entry-content > p > strong { color: var(--st-ink); }
.entry-content li { margin-bottom: .4rem; }
.entry-content li::marker { color: var(--st-brass); }

/* A long prose page (FAQ, legal) gets a stitch rule before each h2 so it
   scans as sections rather than an undifferentiated wall. */
.entry-content > h2:not(:first-child)::before {
	content: "";
	display: block;
	width: 100%;
	border-top: 2px dashed var(--st-line-strong);
	margin-bottom: var(--st-s4);
}

.entry-content table {
	width: 100%; max-width: none; border-collapse: collapse;
	font-size: .9rem; margin: var(--st-s3) 0;
	border: 1px solid var(--st-line); border-radius: var(--st-radius);
	overflow: hidden;
}
.entry-content th {
	text-align: left; background: var(--st-paper-sunk);
	font-family: var(--st-font-mono); font-size: .68rem;
	letter-spacing: .1em; text-transform: uppercase; color: var(--st-ink-faint);
	padding: .7rem .9rem;
}
.entry-content td { padding: .65rem .9rem; border-top: 1px solid var(--st-line); }

/* ==========================================================================
   PAGE HEADER (inner pages) - hidden on the homepage, which brings its own
   ========================================================================== */

.home .hero-section,
.home .entry-header { display: none; }

.hero-section .page-title { font-size: clamp(2rem, 5vw, 3rem); }

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */

.st-hero {
	max-width: none !important;
	padding: clamp(2rem, 6vw, var(--st-s6)) 0 var(--st-s5);
	border-bottom: 2px dashed var(--st-line-strong);
	margin-bottom: var(--st-s5);
}
.st-hero__eyebrow {
	font-family: var(--st-font-mono);
	font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
	color: var(--st-thread); margin: 0 0 var(--st-s3);
}
.st-hero h1 {
	font-size: clamp(2.5rem, 7vw, 4.25rem);
	line-height: 1.02; letter-spacing: -.025em;
	margin: 0 0 var(--st-s3); max-width: 16ch;
}
.st-hero h1 em { font-style: italic; color: var(--st-thread); }
.st-hero__lead {
	font-size: clamp(1.05rem, 2vw, 1.2rem);
	color: var(--st-ink-muted); max-width: 38ch; margin: 0 0 var(--st-s4);
}
.st-actions { display: flex; flex-wrap: wrap; gap: var(--st-s2); max-width: none !important; }

.st-btn {
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: .95rem; font-weight: 600; text-decoration: none;
	padding: .8rem 1.4rem; border-radius: var(--st-radius);
	border: 1px solid transparent; transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.st-btn--solid { background: var(--st-thread); color: #fff; }
.st-btn--solid:hover { background: var(--st-thread-deep); color: #fff; }
.st-btn--ghost { border-color: var(--st-line-strong); color: var(--st-ink); background: transparent; }
.st-btn--ghost:hover { border-color: var(--st-thread); color: var(--st-thread); }

/* Three offers */
.st-offers {
	max-width: none !important;
	display: grid; gap: var(--st-s3);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	margin-bottom: var(--st-s5);
}
.st-card {
	background: var(--st-paper-raised);
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius);
	padding: var(--st-s3);
	display: flex; flex-direction: column;
	transition: border-color .18s ease, transform .18s ease;
}
.st-card:hover { border-color: var(--st-thread); transform: translateY(-2px); }
.st-card__label {
	font-family: var(--st-font-mono); font-size: .66rem;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--st-brass); margin: 0 0 var(--st-s1);
}
.st-card h3 { font-size: 1.35rem; margin: 0 0 var(--st-s1); }
.st-card p { color: var(--st-ink-muted); margin: 0 0 var(--st-s3); font-size: .96rem; flex: 1; }
.st-card a.st-more {
	font-weight: 600; font-size: .92rem; text-decoration: none;
	align-self: flex-start; border-bottom: 2px dashed currentColor; padding-bottom: 1px;
}

/* Process - the dashed connector is the stitch line running through the steps */
.st-steps { max-width: none !important; margin-bottom: var(--st-s5); }
.st-steps h2 { font-size: 1.5rem; margin: 0 0 var(--st-s3); }
.st-steps ol {
	list-style: none; margin: 0; padding: 0; max-width: none;
	display: grid; gap: var(--st-s3);
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.st-step { position: relative; padding-top: var(--st-s3); border-top: 2px dashed var(--st-line-strong); }
.st-step__n {
	font-family: var(--st-font-mono); font-size: .7rem; letter-spacing: .14em;
	color: var(--st-brass); display: block; margin-bottom: .35rem;
}
.st-step p { margin: 0; font-size: .95rem; color: var(--st-ink-muted); max-width: none; }

/* Closing band - full bleed out of the constrained content column */
.st-band {
	max-width: none !important;
	margin-inline: calc(50% - 50vw);
	padding: var(--st-s5) max(1.25rem, calc(50vw - var(--st-shell) / 2));
	background: var(--st-thread);
	color: var(--st-ink-invert);
}
.st-band h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 var(--st-s2); max-width: 22ch; }
.st-band p { color: rgba(242,246,244,.85); max-width: 46ch; margin: 0; }

/* ==========================================================================
   WOOCOMMERCE
   ========================================================================== */

.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.05rem; }
.woocommerce span.onsale { background: var(--st-brass); border-radius: var(--st-radius); }
.woocommerce .button, .wp-element-button, button.button {
	border-radius: var(--st-radius) !important;
	font-weight: 600;
}

.st-notice {
	border-left: 3px solid var(--st-thread);
	background: var(--st-thread-wash);
	padding: var(--st-s2) var(--st-s3);
	border-radius: 0 var(--st-radius) var(--st-radius) 0;
	margin: var(--st-s3) 0;
}
.st-notice p { margin: 0; font-size: .95rem; }
.st-notice--legal { border-left-color: var(--st-brass); background: var(--st-brass-wash); }
.stitcheria-digital-consent label { font-weight: 500; line-height: 1.5; }

/* ==========================================================================
   HEADER / FOOTER
   ========================================================================== */

.site-title a { font-family: var(--st-font-display); font-weight: 600; letter-spacing: -.02em; }
.ct-header [data-row="middle"] { border-bottom: 1px solid var(--st-line); }
.header-menu-1 .menu-item > a { font-size: .95rem; }

.ct-footer { border-top: 2px dashed var(--st-line-strong); background: var(--st-paper-sunk); }
.ct-footer-copyright { font-size: .85rem; color: var(--st-ink-faint); }
.ct-footer-copyright a { color: var(--st-ink-muted); }

/* ==========================================================================
   RESPONSIVE / MOTION
   ========================================================================== */

@media (max-width: 720px) {
	:root { --st-s5: 2.75rem; --st-s6: 3.5rem; }
	.st-hero { padding-top: var(--st-s4); }
	.st-actions .st-btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	.st-card:hover { transform: none; }
}

/* ==========================================================================
   LEGAL BAR - replaces Blocksy's theme credit with required identification
   ========================================================================== */

.ct-footer-copyright { display: none !important; }

.st-legalbar {
	background: var(--st-thread-deep);
	color: rgba(242,246,244,.78);
	font-size: .8rem;
	line-height: 1.6;
	padding: var(--st-s3) max(1.25rem, calc(50vw - var(--st-shell) / 2));
}
.st-legalbar__inner {
	display: flex; flex-wrap: wrap; gap: var(--st-s1) var(--st-s3);
	align-items: baseline; justify-content: space-between;
	max-width: var(--st-shell); margin: 0 auto;
}
.st-legalbar p { margin: 0; max-width: none; }
.st-legalbar strong { color: #fff; font-weight: 600; }
.st-legalbar a { color: rgba(242,246,244,.9); margin-right: var(--st-s2); text-decoration: none; border-bottom: 1px dashed rgba(242,246,244,.4); }
.st-legalbar a:hover { color: #fff; border-bottom-style: solid; }

/* Nothing may scroll the page sideways - the full-bleed band uses viewport
   units, so clip at the root rather than on body (body would break sticky). */
html { overflow-x: clip; }
/* ==========================================================================
   LEGAL ACCORDION
   Native <details>/<summary> - no JavaScript, keyboard-operable for free,
   and findable by in-page browser search even when collapsed in most engines.
   ========================================================================== */

.st-legal-intro { max-width: var(--st-measure); margin-bottom: var(--st-s4); }
.st-legal-intro p { color: var(--st-ink-muted); }

.st-accordion {
	max-width: 46rem !important;
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius);
	overflow: hidden;
	background: var(--st-paper-raised);
}

.st-acc { border-bottom: 1px solid var(--st-line); }
.st-acc:last-child { border-bottom: 0; }

.st-acc__head {
	list-style: none;
	cursor: pointer;
	padding: var(--st-s3);
	font-family: var(--st-font-display);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--st-ink);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--st-s2);
	transition: background .15s ease, color .15s ease;
}
.st-acc__head::-webkit-details-marker { display: none; }
.st-acc__head:hover { background: var(--st-thread-wash); color: var(--st-thread); }
.st-acc__head:focus-visible { outline: 2px solid var(--st-thread); outline-offset: -2px; }

/* Chevron drawn in CSS - rotates on open, respects reduced motion */
.st-acc__head::after {
	content: "";
	flex: none;
	width: .55rem; height: .55rem;
	border-right: 2px solid var(--st-brass);
	border-bottom: 2px solid var(--st-brass);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}
.st-acc[open] > .st-acc__head::after { transform: rotate(-135deg) translate(-2px, -2px); }
.st-acc[open] > .st-acc__head {
	background: var(--st-paper-sunk);
	border-bottom: 2px dashed var(--st-line-strong);
}

.st-acc__body { padding: var(--st-s3) var(--st-s3) var(--st-s4); }
.st-acc__body > *  { max-width: var(--st-measure); }
.st-acc__body h3 {
	font-size: 1.05rem;
	margin: var(--st-s3) 0 var(--st-s1);
}
.st-acc__body h3:first-child { margin-top: 0; }
.st-acc__body h4 { font-size: .95rem; margin: var(--st-s2) 0 var(--st-s1); }
.st-acc__body p, .st-acc__body ul, .st-acc__body ol {
	color: var(--st-ink-muted); font-size: .95rem; margin: 0 0 var(--st-s2);
}
.st-acc__body table { max-width: none; }

/* Deep-linking from the footer must open the right section, not just scroll
   to a collapsed one. */
.st-acc:target { scroll-margin-top: 5rem; }
.st-acc:target > .st-acc__head { background: var(--st-brass-wash); }

@media (prefers-reduced-motion: reduce) {
	.st-acc__head::after { transition: none; }
}
/* ==========================================================================
   PRODUCT STRIPS ON THE HOMEPAGE
   Shopping should start above the fold, not after three sections of prose.
   ========================================================================== */

.st-shopstrip { max-width: none !important; margin-bottom: var(--st-s5); }
.st-shopstrip__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--st-s3); flex-wrap: wrap;
	padding-bottom: var(--st-s2); margin-bottom: var(--st-s3);
	border-bottom: 2px dashed var(--st-line-strong);
	max-width: none;
}
.st-shopstrip__head h2 { margin: 0 !important; font-size: 1.5rem; max-width: none; }
.st-shopstrip__head .st-more { font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }

.st-shopstrip .products { margin: 0 !important; }

/* Product cards match the offer cards so the page reads as one system */
.woocommerce ul.products li.product,
.st-shopstrip ul.products li.product {
	background: var(--st-paper-raised);
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius);
	padding: var(--st-s2);
	transition: border-color .18s ease, transform .18s ease;
}
.woocommerce ul.products li.product:hover { border-color: var(--st-thread); transform: translateY(-2px); }
.woocommerce ul.products li.product img { border-radius: calc(var(--st-radius) - 2px); margin-bottom: var(--st-s2); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.05rem !important; padding: 0 !important; margin: 0 0 .25rem !important;
}
.woocommerce ul.products li.product .price {
	color: var(--st-ink-muted) !important; font-size: .95rem !important; font-weight: 600;
}
.woocommerce ul.products li.product .button {
	margin-top: var(--st-s2); background: var(--st-thread); color: #fff;
}
.woocommerce ul.products li.product .button:hover { background: var(--st-thread-deep); color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product:hover { transform: none; }
}
/* ==========================================================================
   LAYOUT CORRECTIONS
   The editorial measure (34rem) is right for prose but was leaking into the
   homepage sections, so the hero, the steps and the closing band all crammed
   into the left third of a 1440px screen. These sections opt out and use the
   full shell instead.
   ========================================================================== */

/* --- Hero: two columns, so the right side carries a motif instead of void --- */
.st-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: var(--st-s5);
	align-items: center;
}
.st-hero__copy { max-width: 30rem; }
.st-hero h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); max-width: 14ch; }
.st-hero__lead { max-width: 34ch; }

/* Hoop-and-stitch mark, drawn in CSS - no image request, scales cleanly,
   and repeats the dashed motif the rest of the page is built on. */
.st-hero__mark {
	position: relative;
	aspect-ratio: 1;
	max-width: 22rem;
	justify-self: center;
	border-radius: 50%;
	border: 2px dashed var(--st-line-strong);
	display: grid;
	place-items: center;
}
.st-hero__mark::before,
.st-hero__mark::after {
	content: "";
	position: absolute;
	border-radius: 50%;
}
.st-hero__mark::before { inset: 12%; border: 2px dashed var(--st-brass); }
.st-hero__mark::after  { inset: 26%; border: 2px dashed var(--st-thread); }
.st-hero__mark span {
	font-family: var(--st-font-display);
	font-size: clamp(3rem, 7vw, 5.5rem);
	color: var(--st-thread);
	line-height: 1;
}

@media (max-width: 860px) {
	.st-hero { grid-template-columns: 1fr; gap: var(--st-s4); }
	.st-hero__mark { max-width: 13rem; order: -1; justify-self: start; }
}

/* --- Steps: give them real presence instead of grey whispers --- */
.st-steps ol { gap: var(--st-s3); }
.st-step {
	background: var(--st-paper-raised);
	border: 1px solid var(--st-line);
	border-top: 3px solid var(--st-brass);
	border-radius: var(--st-radius);
	padding: var(--st-s3);
}
.st-step__n { color: var(--st-brass); font-size: .68rem; margin-bottom: var(--st-s1); }
.st-step p { color: var(--st-ink); font-size: 1rem; }

/* --- Closing band: fill the box it lives in --- */
.st-band {
	display: grid;
	grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
	gap: var(--st-s4);
	align-items: start;
}
.st-band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); max-width: none; }
.st-band p { max-width: 52ch; font-size: 1.05rem; }
@media (max-width: 860px) { .st-band { grid-template-columns: 1fr; gap: var(--st-s2); } }

/* --- Equal-height product cards, buttons aligned along one line --- */
.woocommerce ul.products { align-items: stretch; }
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.woocommerce ul.products li.product .price { margin-top: auto; }
.woocommerce ul.products li.product .button { align-self: flex-start; }

/* Offer cards a touch more generous */
.st-card { padding: var(--st-s3) var(--st-s3) calc(var(--st-s3) + .25rem); }
.st-card p { font-size: 1rem; }
/* The hero mark collapsed to icon size: aspect-ratio needs a resolved width,
   and justify-self:center gave it none. Make it fill its column. */
.st-hero__mark {
	width: 100%;
	max-width: 24rem;
	justify-self: end;
	margin-inline-end: var(--st-s3);
}
.st-hero__mark span { font-size: clamp(4rem, 9vw, 7rem); }
@media (max-width: 860px) {
	.st-hero__mark { max-width: 12rem; justify-self: start; margin-inline-end: 0; }
}