/*
Theme Name: Christina Felten
Theme URI: https://christinafelten.com
Author: Shaw Design
Author URI: https://mattjshaw.com/design
Description: A quiet gallery for Christina Felten — Charlotte mixed-media painter. Block theme; all design lives in theme.json so the Site Editor always wins.
Version: 1.2.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: christina-felten
Tags: full-site-editing, block-patterns, portfolio, one-column
*/

/* ══════════════════════════════════════════════════════════════════
   MECHANICS ONLY.

   The design lives in theme.json. Christina (or Matt) must be able to
   change any colour, size or typeface from Appearance → Editor → Styles
   and see it take effect. That only stays true while this file contains
   no design decisions.

   ⛔ Every colour, size and family below is a --wp--preset--* or
      --wp--custom--* variable. A literal value here is a bug.
   ⛔ Never set `aspect-ratio` on an image she can crop. It fights every
      crop she makes in the editor.
   ⛔ Never `display:none` a figcaption. That swallows captions she types.
   ══════════════════════════════════════════════════════════════════ */

/* — page rhythm ————————————————————————————————— */

.cf-rhythm { margin-block-start: var(--wp--custom--rhythm); }

.cf-measure > * { max-width: var(--wp--custom--measure); }
.cf-measure.has-text-align-center > * { margin-inline: auto; }

/* — small uppercase label, used for section headings and meta ——— */

.cf-label {
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: var(--wp--custom--tracking-label);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* — header ————————————————————————————————————— */

.cf-masthead {
	border-block-end: 1px solid var(--wp--preset--color--line);
}

/* — gallery item meta (title · size · price under an image) ————
   Rendered by the artwork block in PHP; the editor cannot reach these,
   so the layout values are literal on purpose. Colours are not.       */

.cf-piece__meta {
	margin-block-start: 0.85rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.cf-piece__title {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
	font-weight: 400;
	letter-spacing: 0.02em;
}
.cf-piece__detail {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}
.cf-piece__sold {
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking-label);
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--muted);
}

/* — artwork / instagram grids (PHP-rendered blocks) ———————————
   No aspect-ratio: her photographs are consistently framed already and
   forcing a ratio would crop them differently than she chose.          */

.cf-grid {
	display: grid;
	gap: var(--wp--custom--gallery-gap);
	grid-template-columns: repeat(var(--cf-cols, 3), minmax(0, 1fr));
}
.cf-grid img {
	display: block;
	width: 100%;
	height: auto;
}
@media (max-width: 781px) { .cf-grid { --cf-cols: 2; } }
@media (max-width: 480px) { .cf-grid { --cf-cols: 1; } }

.cf-grid--ig { --cf-cols: 4; }
@media (max-width: 781px) { .cf-grid--ig { --cf-cols: 2; } }

.cf-follow {
	display: block;
	margin-block-start: var(--wp--preset--spacing--30);
	text-align: center;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: var(--wp--custom--tracking-label);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.cf-follow:hover { color: var(--wp--preset--color--ink); }

.cf-empty {
	border: 1px dashed var(--wp--preset--color--line-strong);
	padding: var(--wp--preset--spacing--30);
	text-align: center;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* — subscribe box (PHP-rendered block) ————————————————— */

.cf-subscribe { max-width: 27rem; margin-inline: auto; text-align: center; }
.cf-subscribe__field { display: flex; border-block-end: 1px solid var(--wp--preset--color--line-strong); }
.cf-subscribe__field input[type="email"] {
	flex: 1;
	border: 0;
	background: transparent;
	padding: 0.65rem 0.15rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
}
.cf-subscribe__field input::placeholder { color: var(--wp--preset--color--muted); }
.cf-subscribe__field button {
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: var(--wp--custom--tracking-label);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	padding: 0.65rem 0;
}
.cf-subscribe__note { margin-block-start: 0.7rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* — WooCommerce: strip the plugin's chrome back to the theme ————— */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	padding-block: 0.6rem 0.15rem;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale { display: none; }

.woocommerce ul.products li.product .button { margin-block-start: 0.6rem; }

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	border-block-start-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--wash);
	color: var(--wp--preset--color--ink);
}

.woocommerce-product-gallery__image img { height: auto; }

/* — focus ————————————————————————————————————— */

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

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

/* — draft highlight —————————————————————————————————
   Matt's rule, 2026-09-18: only Christina's own words go on this site.
   Where a sentence is ours and not hers, it is marked so it cannot be
   mistaken for her voice. She clears it from the editor by removing the
   highlight. Measured 16.20:1 against ink, 1.03 against paper — legible
   text, unmistakable mark, no shouting.                                   */

mark.has-inline-color { border-radius: 2px; padding: 0 0.15em; }