/*
Theme Name: KM Gallery
Theme URI: https://kevinmartel.com
Description: Dark gallery child theme for Kevin Martel Photography. Image-first
  layout, quiet typography, and a restrained brass accent drawn from the dawn
  tones in the Angkor work. Built on Blocksy.
Author: Kevin Martel
Template: blocksy
Version: 1.0.0
Text Domain: km-gallery
*/

/* ---------------------------------------------------------------- tokens */
:root {
	--km-bg:          #0d0d0d;
	--km-bg-raised:   #141414;
	--km-ink:         #f2f0ed;
	--km-ink-soft:    #b4b0aa;
	--km-ink-faint:   #6f6b66;
	--km-rule:        #262626;
	--km-brass:       #c9a063;
	--km-brass-lift:  #dcb87d;

	--km-measure:     68ch;
	--km-step:        clamp(1.5rem, 4vw, 4rem);
}

/* ------------------------------------------------------------ typography */
body {
	background-color: var(--km-bg);
	color: var(--km-ink-soft);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.ct-title {
	color: var(--km-ink);
	font-weight: 400;
	letter-spacing: -0.01em;
}

/* Wordmark: spaced caps, the one place letterspacing earns its keep. */
.site-title,
.site-title a {
	font-weight: 400 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase;
	color: var(--km-ink) !important;
}

.site-description {
	color: var(--km-ink-faint) !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.7rem !important;
}

/* Long-form copy stays readable: cap the measure. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3 {
	max-width: var(--km-measure);
}

a { color: var(--km-brass); }
a:hover { color: var(--km-brass-lift); }

/* ---------------------------------------------------------- header/footer */
[data-header] .ct-header-row {
	border-bottom: 1px solid var(--km-rule);
}

[data-footer] {
	border-top: 1px solid var(--km-rule);
	color: var(--km-ink-faint);
}

[data-footer] a { color: var(--km-ink-soft); }
[data-footer] a:hover { color: var(--km-brass); }

/* Nav: quiet caps, hairline underline on hover rather than a colour flash. */
.header-menu-1 > li > a,
.menu-item > a {
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.76rem;
}

/* -------------------------------------------------------------- products */
/* Let the photograph carry the card. Chrome stays minimal. */
.woocommerce ul.products li.product,
.product-item {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	text-align: left;
}

.woocommerce ul.products li.product a img,
.product-item img {
	border-radius: 2px;
	transition: opacity 240ms ease;
	display: block;
}

.woocommerce ul.products li.product:hover a img,
.product-item:hover img {
	opacity: 0.82;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.product-item .woocommerce-loop-product__title,
.ct-product-title {
	font-size: 0.98rem !important;
	color: var(--km-ink) !important;
	margin: 0.9em 0 0.25em !important;
	letter-spacing: 0.01em;
}

.woocommerce ul.products li.product .price,
.product-item .price,
.ct-product-price {
	color: var(--km-ink-faint) !important;
	font-size: 0.82rem !important;
	letter-spacing: 0.04em;
}

/* "from $85" reads better than a struck-through range on art. */
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	opacity: 1;
}

/* Hide the loop add-to-cart: every print needs a size chosen first. */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart {
	display: none !important;
}

/* Single product: give the image room, keep the buy panel calm. */
.woocommerce div.product div.images img {
	border-radius: 2px;
}

.woocommerce div.product .product_title {
	margin-bottom: 0.35em;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--km-ink) !important;
	font-size: 1.35rem !important;
	font-weight: 400;
}

.woocommerce div.product form.cart .variations {
	border: 1px solid var(--km-rule);
	border-radius: 3px;
	padding: 0.5rem 0.9rem;
	background: var(--km-bg-raised);
}

.woocommerce div.product form.cart .variations label {
	color: var(--km-ink-soft);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.72rem;
}

.woocommerce div.product form.cart .reset_variations {
	color: var(--km-ink-faint);
	font-size: 0.75rem;
}

/* Buttons: brass, flat, no gradient. */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.wp-block-button__link {
	background: var(--km-brass) !important;
	color: #14100a !important;
	border: none !important;
	border-radius: 2px !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.78rem !important;
	font-weight: 500;
	padding: 0.95em 2em !important;
	transition: background 180ms ease;
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.wp-block-button__link:hover {
	background: var(--km-brass-lift) !important;
	color: #14100a !important;
}

/* Secondary/ghost button for gallery links. */
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--km-ink) !important;
	border: 1px solid var(--km-rule) !important;
}

.is-style-outline .wp-block-button__link:hover {
	border-color: var(--km-brass) !important;
	color: var(--km-brass) !important;
	background: transparent !important;
}

/* Tabs / meta: de-emphasise. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--km-rule);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--km-ink-faint) !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.75rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--km-ink) !important;
}

.product_meta { color: var(--km-ink-faint); font-size: 0.8rem; }

/* ------------------------------------------------------------- forms/UI */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="search"],
textarea, select {
	background: var(--km-bg-raised) !important;
	border: 1px solid var(--km-rule) !important;
	color: var(--km-ink) !important;
	border-radius: 2px !important;
}

input:focus, textarea:focus, select:focus {
	border-color: var(--km-brass) !important;
	outline: 2px solid rgba(201, 160, 99, 0.25);
	outline-offset: 1px;
}

/* Woo notices readable on dark. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--km-bg-raised) !important;
	color: var(--km-ink) !important;
	border-top-color: var(--km-brass) !important;
}

.woocommerce-message a, .woocommerce-info a { color: var(--km-brass) !important; }

/* Tables (cart, order details). */
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	border-color: var(--km-rule) !important;
	color: var(--km-ink-soft);
}

.woocommerce table.shop_table thead th { color: var(--km-ink); }

/* ------------------------------------------------------- FooGallery tune */
.foogallery { margin-block: var(--km-step); }

.foogallery .fg-caption-title {
	color: var(--km-ink) !important;
	letter-spacing: 0.02em;
}

.foogallery .fg-caption-desc { color: var(--km-ink-soft) !important; }

.foogallery.fg-light .fg-item-inner { background: transparent !important; }

/* --------------------------------------------------------- custom blocks */
/* Editorial two-column intro used on the home and about pages. */
.km-lede {
	font-size: clamp(1.05rem, 2.2vw, 1.35rem);
	line-height: 1.6;
	color: var(--km-ink);
	max-width: 60ch;
	font-weight: 300;
}

.km-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.72rem;
	color: var(--km-brass);
	margin-bottom: 0.9em;
}

.km-rule {
	border: 0;
	border-top: 1px solid var(--km-rule);
	margin-block: var(--km-step);
}

/* Spec list for the print-details page. */
.km-spec { list-style: none; padding: 0; margin: 0; }
.km-spec li {
	display: flex;
	gap: 1.5rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--km-rule);
	font-size: 0.92rem;
}
.km-spec li strong {
	flex: 0 0 11rem;
	color: var(--km-ink);
	font-weight: 400;
	letter-spacing: 0.04em;
}

/* Size/price table. */
.km-sizes { width: 100%; border-collapse: collapse; margin-block: 1.5rem; }
.km-sizes th, .km-sizes td {
	text-align: left;
	padding: 0.8rem 1rem 0.8rem 0;
	border-bottom: 1px solid var(--km-rule);
	font-size: 0.92rem;
}
.km-sizes th {
	color: var(--km-ink-faint);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.7rem;
}
.km-sizes td:first-child { color: var(--km-ink); }

@media (max-width: 600px) {
	.km-spec li { flex-direction: column; gap: 0.2rem; }
	.km-spec li strong { flex: none; }
}

/* Respect users who don't want motion. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}