/*
Theme Name: Loomworks
Theme URI: https://tenfoldthemes.example/loomworks
Author: Tenfold Themes
Author URI: https://tenfoldthemes.example
Description: A fashion-editorial block theme for apparel and textile OEM manufacturers — magazine masthead hero, numbered production indexes, fabric library and RFQ sections, an After Dark style, locally hosted fonts and original garment artwork, all editable in the Site Editor.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: loomworks
Tags: block-theme, full-site-editing, block-patterns, block-styles, custom-colors, editor-style, featured-images, threaded-comments, translation-ready, wide-blocks, one-column, portfolio, e-commerce, blog
*/

/* ---------------------------------------------------------------------------
 * Focus visibility & motion
 * ------------------------------------------------------------------------- */

:where(a, button, input, summary, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: #fff;
}

a,
.wp-block-button__link,
.wp-element-button {
	transition: var(--wp--custom--transition);
}

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

/* ---------------------------------------------------------------------------
 * Block styles: Group — Boxed / Hairline top
 * ------------------------------------------------------------------------- */

.wp-block-group.is-style-boxed {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	padding: var(--wp--preset--spacing--40);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wp-block-group.is-style-boxed:hover {
	box-shadow: var(--wp--preset--shadow--lift);
	transform: translate(-2px, -2px);
}

.wp-block-group.is-style-hairline-top {
	border-top: 1px solid var(--wp--preset--color--contrast);
	padding-top: var(--wp--preset--spacing--30);
}

/* ---------------------------------------------------------------------------
 * Block styles: Separator — Runway red (the lipstick mark) / Heavy rule
 * ------------------------------------------------------------------------- */

hr.is-style-runway-red {
	border: none;
	height: 3px;
	width: 56px;
	background: var(--wp--preset--color--accent);
}

hr.is-style-heavy {
	border: none;
	height: 4px;
	width: 100%;
	background: var(--wp--preset--color--contrast);
}

/* ---------------------------------------------------------------------------
 * Block styles: List — Editorial index (01, 02, 03 …)
 * ------------------------------------------------------------------------- */

ul.is-style-index,
ol.is-style-index {
	list-style: none;
	counter-reset: lw-index;
	padding-left: 0;
}

ul.is-style-index > li,
ol.is-style-index > li {
	counter-increment: lw-index;
	border-top: 1px solid var(--wp--preset--color--contrast);
	padding: 0.875em 0 0.875em 3.5em;
	position: relative;
}

ul.is-style-index > li::before,
ol.is-style-index > li::before {
	content: counter(lw-index, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.7em;
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: 1.35em;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
}

/* ---------------------------------------------------------------------------
 * Details / FAQ affordance
 * ------------------------------------------------------------------------- */

.wp-block-details summary {
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 2rem;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.4em;
	font-style: italic;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
	transition: transform 0.2s ease;
}

.wp-block-details[open] summary::after {
	content: "−";
}

.wp-block-details > :not(summary) {
	font-weight: 400;
	color: var(--wp--preset--color--contrast-2);
}

/* ---------------------------------------------------------------------------
 * Small refinements
 * ------------------------------------------------------------------------- */

.wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--accent);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 1px;
}

.wp-block-image img {
	height: auto;
	max-width: 100%;
}

.wp-block-table th {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wp-block-table th,
.wp-block-table td {
	border-color: var(--wp--preset--color--border);
	padding: 0.875rem 1rem;
}
/* ---------------------------------------------------------------------------
 * Palette-slug guard: the standard palette includes a slug named "border".
 * When used as a *text* color, WordPress emits `.has-border-color`, which core
 * pairs with `:where(.has-border-color){border-style:solid}`; with the default
 * medium width that paints a stray ~3px box around the text. Zero the width
 * here — genuine borders set an explicit width (inline or via block-style
 * classes) that overrides this 0-specificity rule.
 * ------------------------------------------------------------------------- */
:where(.has-border-color) {
	border-width: 0;
}