/*
Theme Name: Cheeks JS Studios
Theme URI: https://cheeksjs.com
Author: Cheeks JS
Description: Editorial, luxury block theme for Cheeks JS Studios — AI ad creative for fashion and beauty brands. Cream, chocolate and peach palette, Bodoni Moda and Jost type. Works with WooCommerce.
Version: 1.3.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cheeksjs-studios
*/

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; }
img { height: auto; }

/* ---------- Type helpers ---------- */
.cj-eyebrow {
	font-size: 12px !important;
	font-weight: 500;
	letter-spacing: 0.38em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cocoa);
	margin-bottom: 1.25rem;
}
.cj-eyebrow.on-dark { color: var(--wp--preset--color--peach); }
.cj-italic { font-family: var(--wp--preset--font-family--display); font-style: italic; }
.cj-accent { color: var(--wp--preset--color--burnt-orange); }
.cj-display { font-size: clamp(48px, 7vw, 104px) !important; line-height: 1.02 !important; letter-spacing: -0.01em; }
.cj-h2 { font-size: clamp(36px, 4vw, 56px) !important; }
.cj-statement { font-family: var(--wp--preset--font-family--display); font-size: clamp(30px, 4vw, 56px) !important; line-height: 1.2; }
.cj-sub { font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: clamp(22px, 2.6vw, 36px) !important; color: var(--wp--preset--color--cocoa); margin-top: 0.75rem; }
.cj-lead { max-width: 480px; color: var(--wp--preset--color--mocha); }
.cj-muted { color: var(--wp--preset--color--mocha); }
.cj-small { font-size: 14px !important; }

/* ---------- Sections ---------- */
.cj-section { padding: clamp(80px, 11vw, 160px) clamp(20px, 3vw, 40px); }
.cj-section-tight { padding: clamp(56px, 7vw, 100px) clamp(20px, 3vw, 40px); }
.cj-bg-sand { background: var(--wp--preset--color--sand); }
.cj-bg-dark { background: var(--wp--preset--color--chocolate); color: var(--wp--preset--color--cream); }
.cj-bg-dark h1, .cj-bg-dark h2, .cj-bg-dark h3, .cj-bg-dark a { color: var(--wp--preset--color--cream); }
.cj-bg-peach { background: var(--wp--preset--color--peach); }
.cj-rule-top { border-top: 1px solid var(--wp--preset--color--line); }
.cj-rule-y { border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
.cj-center { text-align: center; }

/* ---------- Announcement + header ---------- */
.cj-announce {
	background: var(--wp--preset--color--chocolate);
	color: var(--wp--preset--color--cream);
	text-align: center;
	font-size: 11px !important;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	padding: 12px 16px;
	margin: 0 !important;
}
.cj-announce a { color: var(--wp--preset--color--cream); text-decoration: none; }
.cj-header { padding: 24px clamp(20px, 3vw, 40px); }
.cj-wordmark .wp-block-site-title, .cj-wordmark.wp-block-site-title {
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-size: clamp(20px, 2vw, 26px) !important;
	margin: 0;
}
.cj-wordmark a { text-decoration: none; }
.cj-wordmark-sub {
	font-size: 9px !important;
	letter-spacing: 0.6em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cocoa);
	margin: 2px 0 0 !important;
}
.cj-nav { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; }
.cj-nav a { text-decoration: none; }
.cj-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--chocolate) !important;
	color: var(--wp--preset--color--cream) !important;
}
.cj-nav .wp-block-navigation__responsive-container.is-menu-open a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 34px;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* ---------- Buttons ---------- */
.wp-block-button .wp-block-button__link {
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	padding: 18px 36px;
	border-radius: 999px;
	min-height: 48px;
}
.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);
}
.cj-bg-dark .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--cream);
	border-color: var(--wp--preset--color--cream);
}
.cj-link-underline a, a.cj-link-underline {
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 4px;
}

/* ---------- Media ---------- */
.cj-media img { border-radius: 4px; width: 100%; object-fit: cover; display: block; }
.cj-media-tall img { aspect-ratio: 9 / 16; }
.cj-media-portrait img { aspect-ratio: 4 / 5; }
.cj-hero-media { max-width: 400px; margin-left: auto; margin-right: auto; }
.cj-tile figcaption, .cj-tile .wp-element-caption {
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	text-align: left;
	margin-top: 14px;
	color: var(--wp--preset--color--ink);
}

/* ---------- Trust strip ---------- */
.cj-trust {
	font-size: 12px !important;
	font-weight: 500;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cocoa);
	text-align: center;
	margin: 0 !important;
	line-height: 2.2;
}

/* ---------- Steps ---------- */
.cj-step { border-top: 1px solid var(--wp--preset--color--ink); padding-top: 28px; }
.cj-step-num { font-family: var(--wp--preset--font-family--display); font-size: 44px !important; color: var(--wp--preset--color--burnt-orange); margin: 0 !important; line-height: 1; }

/* ---------- Pricing cards ---------- */
.cj-card {
	background: var(--wp--preset--color--cream);
	border-radius: 4px;
	padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 40px) !important;
	height: 100%;
	box-sizing: border-box;
	color: var(--wp--preset--color--ink);
}
.cj-bg-dark .cj-card .cj-muted { color: var(--wp--preset--color--mocha); }
.cj-card.is-featured { background: var(--wp--preset--color--peach); }
.cj-price { font-family: var(--wp--preset--font-family--display); font-size: clamp(48px, 5vw, 64px) !important; line-height: 1 !important; margin: 12px 0 !important; }
.cj-card .wp-block-buttons { margin-top: auto; }
.cj-card .wp-block-button, .cj-card .wp-block-button__link { width: 100%; text-align: center; }
.cj-card-label { font-size: 12px !important; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--wp--preset--color--cocoa); margin: 0 !important; }
.cj-card.is-featured .cj-card-label { color: var(--wp--preset--color--ink); }

/* ---------- Tables (pricing add-ons) ---------- */
.cj-table table { border-collapse: collapse; width: 100%; font-size: 16px; }
.cj-table th, .cj-table td { border: none; border-bottom: 1px solid var(--wp--preset--color--line); padding: 16px 8px; text-align: left; }
.cj-table th { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--wp--preset--color--cocoa); font-weight: 400; }

/* ---------- FAQ ---------- */
.cj-faq .wp-block-details { border-bottom: 1px solid var(--wp--preset--color--line); padding: 22px 0; }
.cj-faq summary { font-family: var(--wp--preset--font-family--display); font-size: 22px; cursor: pointer; }
.cj-faq .wp-block-details p { color: var(--wp--preset--color--mocha); margin-top: 12px; }

/* ---------- Footer ---------- */
.cj-footer { background: var(--wp--preset--color--chocolate); color: var(--wp--preset--color--blush); padding: clamp(64px, 8vw, 96px) clamp(20px, 3vw, 40px) 40px; }
.cj-footer a { color: var(--wp--preset--color--blush); text-decoration: none; }
.cj-footer a:hover { color: var(--wp--preset--color--peach); }
.cj-footer .cj-eyebrow { color: var(--wp--preset--color--peach); margin-bottom: 0.75rem; }
.cj-footer-brand { font-family: var(--wp--preset--font-family--display); font-size: 28px !important; letter-spacing: 0.18em; color: var(--wp--preset--color--cream); margin: 0 !important; }
.cj-footer-base { border-top: 1px solid #5A3A28; margin-top: 56px !important; padding-top: 24px; font-size: 12px !important; letter-spacing: 0.12em; color: #C9AE9B; }
.cj-footer p { margin: 0 0 10px; }

/* ---------- Seamless full-width sections ---------- */
.wp-site-blocks > * + * { margin-block-start: 0; }
main.wp-block-group > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.wp-block-post-content > .alignfull { margin-block-start: 0 !important; }
.cj-bg-peach .wp-block-buttons { margin-top: 40px; }
.cj-wordmark .wp-block-site-title { white-space: nowrap; }

/* ---------- Mobile ---------- */
@media (max-width: 781px) {
	.cj-hero-media { max-width: 300px; margin-top: 16px; }
	.cj-buttons-stack .wp-block-button { width: 100%; }
	.cj-buttons-stack .wp-block-button__link { width: 100%; text-align: center; }
	.wp-block-columns.is-not-stacked-on-mobile.cj-work-grid { flex-wrap: wrap !important; gap: 24px 12px !important; }
	.wp-block-columns.is-not-stacked-on-mobile.cj-work-grid > .wp-block-column { flex-basis: calc(50% - 6px) !important; flex-grow: 0; }
	.cj-header .wp-block-buttons { display: none; }
	.cj-header { padding-top: 18px; padding-bottom: 18px; }
	.cj-announce { letter-spacing: 0.2em; }
	.cj-tile figcaption, .cj-tile .wp-element-caption { font-size: 10px; letter-spacing: 0.2em; }
	.cj-step { display: block; }
}