/*
Theme Name: Contour
Theme URI: https://getcontour.example
Author: Contour Studio
Author URI: https://getcontour.example
Description: A calm white-wall gallery block theme for the Contour print studio. Neutral, premium store chrome so the colourful endurance data-art prints carry the colour. Light gallery direction: warm paper ground, near-black ink, generous whitespace, restrained mixed-case type. WooCommerce-ready.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Version: 0.2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: printworks
Tags: block-theme, full-site-editing, e-commerce, minimal, one-column, custom-colors, custom-logo, editor-style
*/

/*
 * The visual system lives in theme.json (colours, type, spacing, block styles).
 * Keep this file to a minimal, non-invasive base so nothing fights theme.json.
 */

.wp-block-post-content > *:first-child {
	margin-top: 0;
}

/* Thin, quiet hairlines everywhere the theme draws a divider. */
.wp-block-separator {
	border: none;
	border-top: 1px solid var(--wp--preset--color--line);
	opacity: 1;
}

/* --- The wordmark, shared with the Studio (studio/app/globals.css). --- */
.contour-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--wp--preset--color--ink); }
.contour-brand:hover { color: var(--wp--preset--color--ink); }
.contour-brand-text { display: flex; flex-direction: column; line-height: 1; }
.contour-brand-name { font-family: var(--wp--preset--font-family--display); font-size: 1.6rem; font-weight: 750; letter-spacing: -0.06em; }
.contour-brand-dot { color: var(--wp--preset--color--accent); }
.contour-brand-label { font-family: var(--wp--preset--font-family--mono); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.28em; color: var(--wp--preset--color--muted); margin-top: 4px; }
.contour-brand--small .contour-brand-name { font-size: 1.3rem; }
.contour-brand--small .wp-block-contour-mark { width: 22px; height: 25px; }

/* Header: quiet nav, one loud action, the bag. */
.contour-header .wp-block-navigation a { color: var(--wp--preset--color--muted); }
.contour-header .wp-block-navigation a:hover { color: var(--wp--preset--color--ink); }
.contour-header-cta .wp-block-button__link { padding: 0.55rem 1.05rem; font-size: var(--wp--preset--font-size--small); }
.contour-header .wc-block-mini-cart__button { color: var(--wp--preset--color--ink); }
.contour-header .wc-block-mini-cart__badge { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: #fff; }
.contour-header-cta .wp-block-button__link { white-space: nowrap; }
@media (max-width: 600px) { .contour-header .contour-header-cta { display: none; } }

/* Footer nav: same quiet links. */
.contour-footer .wp-block-navigation a { color: var(--wp--preset--color--muted); }
.contour-footer .wp-block-navigation a:hover { color: var(--wp--preset--color--ink); }

/* Outline button style (the quiet second action). */
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--ink); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: #fff; }

/* 404 */
.contour-404 { text-align: center; }
.contour-404-route { margin: 0 auto var(--wp--preset--spacing--30); }
.contour-404 .wp-block-buttons { justify-content: center; }


/* --- Landing: mockups, grid, cards, trust, FAQ ---------------------------- */
.contour-lede { font-size: 1.125rem; line-height: 1.6; max-width: 34em; }
.has-text-align-center.contour-lede { margin-left: auto; margin-right: auto; }
.contour-hero-title { max-width: 11em; }
.contour-hero-note { margin-top: var(--wp--preset--spacing--20); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.08em; text-transform: uppercase; }

/* A framed print: mat, moulding, shadow. The image is the master, so the
   frame colour is the only thing that changes. */
.contour-mockup { margin: 0; text-align: center; }
.contour-mockup figcaption { margin-top: var(--wp--preset--spacing--20); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.contour-frame { display: inline-block; padding: 4.5%; background: #fff; border: 12px solid #1a1814; box-shadow: 0 24px 48px -20px rgba(23,21,15,.35), 0 8px 18px -10px rgba(23,21,15,.25), inset 0 0 0 1px rgba(0,0,0,.06); max-width: 100%; }
.contour-frame img { display: block; width: 100%; height: auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.contour-frame--black { border-color: #1a1814; }
.contour-frame--white { border-color: #f3f1ec; }
.contour-frame--oak { border-color: #b8916a; background: #fff; }
.contour-frame--thin { border-width: 7px; padding: 5%; }
.contour-mockup--hero .contour-frame { width: min(100%, 420px); }
.contour-mockup--small .contour-frame { width: min(100%, 260px); border-width: 8px; }
.contour-mockup--spot .contour-frame { width: min(100%, 400px); }
.contour-hero-columns { gap: var(--wp--preset--spacing--50); }

.contour-steps .contour-step { text-align: left; }
.contour-steps .contour-mockup { margin-bottom: var(--wp--preset--spacing--30); text-align: left; }
.contour-steps h3 { margin-top: 0.25rem; margin-bottom: 0.5rem; }

.contour-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); }
.contour-card { display: block; text-decoration: none; color: var(--wp--preset--color--ink); }
.contour-card .contour-mockup { transition: transform .25s ease; }
.contour-card:hover .contour-mockup { transform: translateY(-4px); }
.contour-card:hover { color: var(--wp--preset--color--ink); }
.contour-card-name { display: block; margin-top: var(--wp--preset--spacing--20); font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.contour-card-desc { display: block; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.contour-card:hover .contour-card-name { color: var(--wp--preset--color--accent); }

.contour-list { padding-left: 1.1em; color: var(--wp--preset--color--ink-soft); }
.contour-list li { margin-bottom: 0.5rem; }
.contour-price { font-size: 1.125rem; }

.contour-trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); }
.contour-trust-list li { display: flex; flex-direction: column; gap: 4px; }
.contour-trust-list strong { font-family: var(--wp--preset--font-family--display); font-weight: 600; letter-spacing: -0.01em; }
.contour-trust-list span { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }

.contour-faq-item { border-top: 1px solid var(--wp--preset--color--line); padding: 0.9rem 0; }
.contour-faq-item:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.contour-faq-item summary { cursor: pointer; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.contour-faq-item summary::-webkit-details-marker { display: none; }
.contour-faq-item summary::after { content: "+"; color: var(--wp--preset--color--muted); font-weight: 400; margin-left: 1rem; }
.contour-faq-item[open] summary::after { content: "–"; }
.contour-faq-item p { margin: 0.6rem 0 0; }

@media (max-width: 1023px) { .contour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contour-trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .contour-hero-columns { flex-direction: column-reverse; } .contour-mockup--hero .contour-frame { width: min(100%, 300px); border-width: 9px; } .contour-grid { gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20); } .contour-trust-list { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--20); } }