/**
 * Components — restrained UI primitives shared across every module.
 */

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-xs) var(--space-lg);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	border: var(--border-width) solid var(--color-ink);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-ink);
	transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.btn--primary {
	background: var(--color-ink);
	color: var(--color-paper);
}

.btn--primary:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
}

.btn--outline:hover {
	background: var(--color-ink);
	color: var(--color-paper);
}

.btn--sm {
	padding: var(--space-2xs) var(--space-md);
}

.btn--lg {
	padding: var(--space-sm) var(--space-xl);
}

.btn--text {
	border-color: transparent;
	padding-inline: 0;
}

.btn--text:hover {
	background: transparent;
	color: var(--color-accent);
}

.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* Links — inline text links (prose, footer lists), distinct from nav
   links and .btn. Underline sits on a soft rule so it reads editorial
   rather than "web app blue". */
.link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	text-underline-offset: 0.2em;
	text-decoration: underline;
	text-decoration-color: var(--color-line);
	transition: text-decoration-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.link:hover {
	text-decoration-color: currentColor;
}

.link--accent {
	color: var(--color-accent);
}

.link--muted {
	color: var(--color-ink-muted);
}

/* Prose links (Journal/About body copy) get the same restrained
   underline treatment without needing the .link class on every <a>. */
.entry-content a,
.wp-block-post-content a {
	text-underline-offset: 0.2em;
	text-decoration: underline;
	text-decoration-color: var(--color-line);
	transition: text-decoration-color var(--duration-fast) var(--ease);
}

.entry-content a:hover,
.wp-block-post-content a:hover {
	text-decoration-color: currentColor;
}

/* Section heading */
.section-heading {
	margin-bottom: var(--space-lg);
}

.section-heading__eyebrow {
	display: block;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-ink-muted);
	margin-bottom: var(--space-3xs);
}

.section-heading__title {
	font-size: var(--fs-xl);
}

/* Breadcrumbs */
.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs);
	font-size: var(--fs-xs);
	color: var(--color-ink-muted);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	padding-block: var(--space-md);
}

.breadcrumbs a:hover {
	color: var(--color-ink);
}

/* ---------------------------------------------------------------------
   Image ratio utilities — apply directly to an <img>/<video> or to a
   wrapper around one. Named to match the intent-based ratio tokens in
   tokens.css (kept in sync with the add_image_size() crops in
   inc/setup.php) so any module reaches for the same handful of shapes
   instead of ad-hoc aspect-ratio values.
--------------------------------------------------------------------- */
.ratio-square,
.ratio-portrait,
.ratio-landscape,
.ratio-wide,
.ratio-hero {
	width: 100%;
	object-fit: cover;
}

.ratio-square    { aspect-ratio: var(--ratio-square); }
.ratio-portrait  { aspect-ratio: var(--ratio-portrait); }
.ratio-landscape { aspect-ratio: var(--ratio-landscape); }
.ratio-wide      { aspect-ratio: var(--ratio-wide); }
.ratio-hero      { aspect-ratio: var(--ratio-hero); }

/* ---------------------------------------------------------------------
   Border utilities — thin hairlines using the token pair, not one-off
   `border: 1px solid #eee` calls scattered through templates.
--------------------------------------------------------------------- */
.border        { border: var(--border-width) solid var(--color-line); }
.border-top    { border-top: var(--border-width) solid var(--color-line); }
.border-bottom { border-bottom: var(--border-width) solid var(--color-line); }
.border-strong { border-color: var(--color-ink); border-width: var(--border-width-md); }

/* Entry card (Journal) */
.entry-card__media img,
.product-card__media img {
	aspect-ratio: var(--ratio-portrait);
	object-fit: cover;
	width: 100%;
}

/* Product card (WooCommerce shop-loop override — see
   /woocommerce/content-product.php). Structural rules only: spacing,
   media ratio, and typography alignment with .entry-card so Shop and
   Journal grids share the same visual rhythm. Price/rating/button
   elements are WooCommerce core markup and are themed in
   assets/css/woocommerce.css, not here, to keep this file free of
   plugin-specific selectors. */
.product-card {
	display: flex;
	flex-direction: column;
}

.product-card__media {
	position: relative;
	overflow: hidden;
	background: var(--color-paper-alt);
}

.product-card__body {
	margin-top: var(--space-xs);
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
}

.entry-card__meta {
	font-size: var(--fs-2xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-ink-muted);
}

.entry-card__title {
	margin-block: var(--space-2xs);
	font-size: var(--fs-md);
}

.entry-card__excerpt {
	font-size: var(--fs-sm);
	color: var(--color-ink-muted);
}

/* Badges */
.badge {
	display: inline-block;
	font-size: var(--fs-2xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	padding: var(--space-3xs) var(--space-2xs);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-sm);
}

.badge--in-stock {
	border-color: var(--color-success);
	color: var(--color-success);
}

/* Collection / Lookbook tiles */
.collection-tile,
.lookbook-tile {
	position: relative;
	display: block;
}

.collection-tile__media,
.lookbook-tile img {
	aspect-ratio: var(--ratio-portrait);
	width: 100%;
	object-fit: cover;
}

.collection-tile__label,
.lookbook-tile__title {
	display: block;
	margin-top: var(--space-xs);
	font-family: var(--font-display);
	font-size: var(--fs-md);
}

/* Forms */
.form-row {
	margin-bottom: var(--space-md);
}

label {
	display: block;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	margin-bottom: var(--space-2xs);
	color: var(--color-ink-muted);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
	width: 100%;
	padding: var(--space-xs) var(--space-sm);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-sm);
	background: var(--color-paper);
	color: var(--color-ink);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--color-accent);
}

::placeholder {
	color: var(--color-ink-muted);
	opacity: 1;
}

input:disabled,
textarea:disabled,
select:disabled {
	background: var(--color-paper-alt);
	color: var(--color-ink-muted);
	cursor: not-allowed;
}

input.is-invalid,
textarea.is-invalid,
select.is-invalid,
input:invalid:not(:placeholder-shown) {
	border-color: var(--color-error);
}

.form-hint {
	display: block;
	margin-top: var(--space-3xs);
	font-size: var(--fs-xs);
	color: var(--color-ink-muted);
}

.form-hint--error {
	color: var(--color-error);
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

/* Checkboxes / radios keep native controls (no custom-drawn boxes —
   avoids extra markup/JS for a foundational stage) but align sizing
   and label pairing with the rest of the form system. */
input[type="checkbox"],
input[type="radio"] {
	width: auto;
	accent-color: var(--color-ink);
}

.form-choice {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
}

.form-choice label {
	display: inline;
	text-transform: none;
	letter-spacing: normal;
	font-size: var(--fs-sm);
	color: var(--color-ink);
	margin-bottom: 0;
}

fieldset {
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-sm);
	padding: var(--space-md);
}

legend {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-ink-muted);
	padding-inline: var(--space-2xs);
}

/* Pagination */
.pagination,
.nav-links {
	display: flex;
	gap: var(--space-sm);
	justify-content: center;
	padding-block: var(--space-lg);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
}

.pagination .current,
.nav-links .current {
	color: var(--color-accent);
}

/* Placeholder blocks — used only in this initial-setup phase to mark
   where designed content will be authored later. Visually obvious so
   nobody mistakes it for the final design; safe to delete rules once
   every module has real content. */
.module-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	border: var(--border-width) dashed var(--color-line);
	background: var(--color-paper-alt);
	color: var(--color-ink-muted);
	font-size: var(--fs-sm);
	text-align: center;
	padding: var(--space-lg);
}

.module-placeholder-inline {
	font-size: var(--fs-xs);
	color: var(--color-ink-muted);
}

.hero-section__media.module-placeholder {
	min-height: 60vh;
}

/* ---------------------------------------------------------------------
   Accordion — reusable expand/collapse list (template-parts/global/
   accordion.php). Native <details>/<summary>, no JS. Lives in this
   shared file (not a module-specific stylesheet) since the component
   itself is meant to be reused by any module, not just Support — same
   visual language as the Product page's own accordion
   (.product-tab* in product-single.css) but intentionally its own
   classnames so neither depends on the other.
--------------------------------------------------------------------- */
.accordion__item {
	border-bottom: var(--border-width) solid var(--color-line);
}

.accordion__item:first-child {
	border-top: var(--border-width) solid var(--color-line);
}

.accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: var(--space-sm) 0;
	list-style: none;
	font-family: var(--font-body);
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	cursor: pointer;
}

.accordion__summary::-webkit-details-marker {
	display: none;
}

.accordion__summary::after {
	content: '+';
	flex-shrink: 0;
	color: var(--color-ink-muted);
	font-size: var(--fs-lg);
}

.accordion__item[open] > .accordion__summary::after {
	content: '\2212'; /* minus sign */
}

.accordion__panel {
	max-width: 65ch;
	padding: 0 0 var(--space-md);
	color: var(--color-ink-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
}

.accordion__panel p:last-child {
	margin-bottom: 0;
}