/*
Theme Name: Marion Art
Template: twentytwentyfive
Description: Child theme for marion.art. Colors, fonts and page layouts for Marion's watercolors. Works with the Marion Paintings plugin.
Author: Jeff (built with Claude)
Version: 0.4.2
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marion-art
*/

/* Most styling lives in theme.json. This file holds only what theme.json can't express. */

/* ---------- Background: a faint watercolor-paper grain. Delete this rule for plain off-white. ---------- */
body {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.40 0 0 0 0 0.32 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Text only for search engines and screen readers ---------- */
.visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Homepage: one wide painting ---------- */
.home-hero .wp-block-image { margin: 0; }
.home-hero img { width: 100%; height: auto; display: block; }

/* ---------- Phones: keep the name on one line ---------- */
@media (max-width: 600px) {
	.site-header .wp-block-site-title { letter-spacing: 0.12em; font-size: 0.95rem; }
}

/* ---------- Text helpers ---------- */
.lead { font-size: var(--wp--preset--font-size--large); font-weight: 300; line-height: 1.5; }
.text-block > p, .text-block > h2 { max-width: 42rem; }

/* ---------- Header ---------- */
.site-name { line-height: 1.2; }
.site-kicker { margin: 0; font-size: 0.95rem; letter-spacing: 0.02em; }
.site-header .wp-block-site-title { margin: 0; }
.site-header .wp-block-site-title a { text-decoration: none; }
.site-header .wp-block-navigation a { text-decoration: none; }
.site-header .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 0.3em; }

/* ---------- Search button in the header ---------- */
.site-search .wp-block-search__button { background: transparent; color: var(--wp--preset--color--contrast); padding: 0.4rem; border: 0; }
.site-search .wp-block-search__button:hover { color: var(--wp--preset--color--accent-1); }
.search-page-field { max-width: 32rem; }

/* ---------- Homepage theme tiles (Collections) ---------- */
.collection-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.collection-card a {
	display: block; height: 100%; text-decoration: none; color: inherit;
	border: 1px solid var(--wp--preset--color--accent-6);
	background: var(--wp--preset--color--base);
	padding: 0.9rem 1rem 1rem;
	transition: border-color 0.3s ease;
}
.collection-card a:hover, .collection-card a:focus-visible { border-color: var(--wp--preset--color--contrast); }
.collection-card__name { display: block; margin-bottom: 0.7rem; font-weight: 600; text-align: center; }
.collection-card__image {
	display: block; aspect-ratio: 4 / 3; overflow: hidden;
	background: var(--wp--preset--color--accent-5);
}
.collection-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.collection-card a:hover img, .collection-card a:focus-visible img { transform: scale(1.04); }
.page-heading { margin-bottom: var(--wp--preset--spacing--50); }
.page-intro { color: var(--wp--preset--color--accent-4); margin-top: calc(-1 * var(--wp--preset--spacing--30)); margin-bottom: var(--wp--preset--spacing--50); }

/* ---------- Painting tiles (homepage + gallery) ----------
   Each painting sits whole, uncropped, on a soft square tile. */
.painting-tile {
	background: var(--wp--preset--color--accent-5);
	padding: clamp(0.75rem, 2.5vw, 1.5rem);
	margin-bottom: 0.75rem;
}
.painting-tile { position: relative; }
.painting-tile img { transition: transform 0.4s ease; }
.painting-tile a:hover img,
.painting-tile a:focus-visible img { transform: scale(1.03); }
.painting-grid .wp-block-post-template li > * { margin-block: 0; }
.painting-grid .painting-tile { margin-bottom: 0.9rem; }
.painting-card-title { margin-top: 0; }
.painting-card-title a { text-decoration: none; }
.painting-card-status,
.painting-card-status a {
	color: var(--wp--preset--color--accent-4);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-top: 0.3rem !important;
}

/* ---------- Breadcrumb (Gallery › Animals › Dahlia) and the "Other themes" pull-down ---------- */
.marion-breadcrumb { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent-4); }
.marion-breadcrumb a { color: inherit; text-decoration: none; }
.marion-breadcrumb a:hover { color: var(--wp--preset--color--contrast); text-decoration: underline; }
.marion-breadcrumb .sep { margin: 0 0.4em; }
.theme-heading { margin-top: var(--wp--preset--spacing--30); gap: 1rem 2rem; }
.theme-heading h1 { margin: 0; }
.marion-collection-menu { margin: 0; font-size: var(--wp--preset--font-size--small); }
.marion-collection-menu label { margin-right: 0.5rem; color: var(--wp--preset--color--accent-4); }
.marion-collection-menu select {
	font: inherit; color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-6); border-radius: 2px;
	padding: 0.45rem 2rem 0.45rem 0.7rem;
}

/* ---------- Single painting ---------- */
.painting-detail-image {
	background: var(--wp--preset--color--accent-5);
	padding: clamp(1rem, 4vw, 3rem);
}
.painting-details {
	border-top: 1px solid var(--wp--preset--color--accent-6);
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	padding: 1rem 0;
	margin-block: 1.5rem;
}
.painting-details > p { margin: 0.2rem 0; }
.painting-details:not(:has(p:not(:empty))) { display: none; } /* whole box hidden when no details are filled in */
.painting-details > p:empty,
.painting-story:empty { display: none; }
.painting-price, .painting-prints { font-weight: 600; }
.painting-prints { margin-top: 0.9rem !important; }
.painting-price:empty + .painting-size + .painting-prints { margin-top: 0.2rem !important; }

/* Painting page title: a little smaller so most titles fit on one line */
.single-painting .wp-block-post-title { font-size: clamp(1.7rem, 1.35rem + 1vw, 2.3rem); }

/* About page: a narrow photo column, so the text sits close to Marion's photo (v4) */
@media (min-width: 782px) {
	.wp-block-columns:has(.about-photo) > .wp-block-column:first-child { flex-basis: 19% !important; flex-grow: 0; }
	.wp-block-columns:has(.about-photo) > .wp-block-column:last-child { flex-basis: auto !important; flex-grow: 1; }
	.wp-block-columns:has(.about-photo) > .wp-block-column:last-child > p { max-width: 44rem; }
}
@media (max-width: 781px) { .about-photo { max-width: 60%; } }

/* ---------- Buy buttons on a painting page ---------- */
.marion-buy-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.marion-buy-buttons .wp-block-button__link { display: inline-block; text-decoration: none; }
.marion-buy-buttons .is-style-outline .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
}
.marion-buy-buttons .is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.marion-etsy-note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent-4); margin-top: 0.75rem; }

/* ---------- Footer social icons ---------- */
.marion-social { gap: 0.9rem; }
.marion-social:empty { display: none; }
.marion-social .wp-social-link { color: var(--wp--preset--color--contrast); }

/* ---------- Commissions price list ---------- */
.price-list { padding-left: 1.2rem; }
.price-list li { margin: 0.2rem 0; }

/* ---------- Contact page: keep lines a readable length ---------- */
.contact-block p { max-width: 38rem; }

/* ---------- Placeholder text: visible reminder that Marion's words are still to come ---------- */
.is-placeholder { color: var(--wp--preset--color--accent-3); font-style: italic; }

/* ---------- Contact form (Fluent Forms): match the site's lettering, colors and width ---------- */
.text-block .fluentform { max-width: 42rem; }
.fluentform, .fluentform input, .fluentform textarea, .fluentform button, .fluentform label { font-family: inherit !important; }
.fluentform .ff-el-input--label label { font-weight: 500; }
.fluentform .ff-el-form-control {
	background: #fff; border: 1px solid var(--wp--preset--color--accent-6); border-radius: 2px;
	color: var(--wp--preset--color--contrast); font-size: 1rem;
}
.fluentform .ff-el-form-control:focus { border-color: var(--wp--preset--color--accent-1); }
.fluentform .ff-btn-submit, .fluentform .ff-btn-submit:hover {
	background: var(--wp--preset--color--contrast) !important; color: var(--wp--preset--color--base) !important;
	border-radius: 2px; padding: 0.8rem 1.6rem;
	font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.fluentform .ff-btn-submit:hover { background: var(--wp--preset--color--accent-1) !important; }
.fluentform .ff-message-success { border: 1px solid var(--wp--preset--color--accent-6); background: var(--wp--preset--color--accent-5); box-shadow: none; }

/* ---------- Prints and More: prices and photo rows ---------- */
.pm-price { font-weight: 600; }
.pm-gallery { margin-block: 1.25rem 0.5rem; }
.text-block .pm-gallery { max-width: 42rem; }

/* ---------- Search boxes: a small × to clear the text (assets/js/search-clear.js) ---------- */
.has-search-clear { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
.has-search-clear .wp-block-search__input { width: 100%; }
.has-search-clear .wp-block-search__input { padding-right: 2.2rem; }
.search-clear {
	position: absolute; top: 50%; transform: translateY(-50%);
	right: 0.4rem; width: 1.6rem; height: 1.6rem; padding: 0;
	border: 0; border-radius: 50%; background: transparent;
	color: var(--wp--preset--color--accent-4); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.search-clear:hover, .search-clear:focus-visible { color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--accent-5); }
.search-clear[hidden] { display: none; }
/* Hide the browsers' own small clear icons so there's only one × */
.wp-block-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* Header search starts folded up: no × until it opens */
.wp-block-search__searchfield-hidden .search-clear { display: none; }