/* =====================================================================
   ATELIER MOLLEMA — child theme styling
   Playful yet elegant. Progressive polish on Astra + block editor.
   Everything keys off CSS custom properties so it's easy to retheme.
   ===================================================================== */

:root {
	--atelier-ink:       #141210;
	--atelier-ink-soft:  #3a3530;
	--atelier-cream:     #f6f1e7;
	--atelier-cream-2:   #efe7d8;
	--atelier-accent:    #d8663f; /* terracotta */
	--atelier-accent-2:  #c4552f;
	--atelier-sage:      #7d8a6e;
	--atelier-white:     #ffffff;

	--atelier-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--atelier-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--atelier-maxw: 1180px;
	--atelier-radius: 18px;
	--atelier-shadow: 0 18px 50px rgba(20, 18, 16, 0.10);
}

/* ---- Editor palette hooks (so block color picker matches front end) ---- */
.has-atelier-ink-color        { color: var(--atelier-ink) !important; }
.has-atelier-cream-color      { color: var(--atelier-cream) !important; }
.has-atelier-accent-color     { color: var(--atelier-accent) !important; }
.has-atelier-sage-color       { color: var(--atelier-sage) !important; }
.has-atelier-white-color      { color: var(--atelier-white) !important; }
.has-atelier-ink-background-color     { background-color: var(--atelier-ink) !important; }
.has-atelier-cream-background-color   { background-color: var(--atelier-cream) !important; }
.has-atelier-accent-background-color  { background-color: var(--atelier-accent) !important; }
.has-atelier-sage-background-color    { background-color: var(--atelier-sage) !important; }
.has-atelier-white-background-color   { background-color: var(--atelier-white) !important; }

/* ---- Base typography ---- */
body,
.entry-content,
.ast-container {
	font-family: var(--atelier-font-body);
	color: var(--atelier-ink);
	background-color: var(--atelier-cream);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: var(--atelier-font-display);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--atelier-ink);
}

h1, .wp-block-heading.has-huge-font-size {
	font-size: clamp(2.6rem, 6vw, 5rem);
	font-weight: 300;
}

/* Playful italic display accents */
em, .atelier-fancy {
	font-family: var(--atelier-font-display);
	font-style: italic;
	color: var(--atelier-accent);
}

a { color: var(--atelier-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--atelier-accent-2); }

/* ---- Section rhythm ---- */
.entry-content > .wp-block-group,
.entry-content > .wp-block-cover,
.wp-block-group.is-layout-constrained {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.entry-content .wp-block-group.is-layout-constrained > *,
.wp-block-group__inner-container {
	max-width: var(--atelier-maxw);
	margin-inline: auto;
}

/* ---- Eyebrow / section labels ---- */
.atelier-eyebrow,
.is-style-atelier-eyebrow {
	font-family: var(--atelier-font-body);
	text-transform: uppercase;
	letter-spacing: 0.28em;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--atelier-accent);
	margin-bottom: 0.75rem;
}

/* ---- Buttons ---- */
.wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link {
	background-color: var(--atelier-ink);
	color: var(--atelier-cream);
	border-radius: 999px;
	padding: 0.85em 1.9em;
	font-family: var(--atelier-font-body);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	transition: transform 0.15s ease, background-color 0.15s ease;
	border: 0;
}
.wp-block-button__link:hover {
	background-color: var(--atelier-accent);
	color: var(--atelier-white);
	transform: translateY(-2px);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--atelier-ink);
	border: 1.5px solid var(--atelier-ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--atelier-ink);
	color: var(--atelier-cream);
}

/* ---- Cover blocks (hero) ---- */
.wp-block-cover {
	border-radius: var(--atelier-radius);
	overflow: hidden;
}
.wp-block-cover.is-hero {
	min-height: 78vh;
	border-radius: 0;
}
.wp-block-cover .wp-block-cover__inner-container {
	max-width: 900px;
}

/* ---- Service / feature cards ---- */
.wp-block-column.atelier-card,
.atelier-card {
	background: var(--atelier-white);
	border-radius: var(--atelier-radius);
	padding: 2rem;
	box-shadow: var(--atelier-shadow);
	border: 1px solid rgba(20,18,16,0.05);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.atelier-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 26px 60px rgba(20,18,16,0.14);
}
.atelier-card h3 { margin-top: 0.4rem; font-size: 1.4rem; }

/* ---- Portfolio grid images ---- */
.atelier-portfolio .wp-block-image img,
.wp-block-image.atelier-shot img {
	border-radius: var(--atelier-radius);
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* ---- Dark sections ---- */
.wp-block-group.has-atelier-ink-background-color,
.atelier-dark {
	color: var(--atelier-cream);
}
.atelier-dark h1, .atelier-dark h2, .atelier-dark h3,
.wp-block-group.has-atelier-ink-background-color h2,
.wp-block-group.has-atelier-ink-background-color h3 {
	color: var(--atelier-cream);
}

/* ---- Team (About duo) ---- */
.atelier-team .wp-block-image img {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	max-width: 220px;
}

/* ---- Contact ---- */
.atelier-contact a[href^="mailto:"] {
	font-family: var(--atelier-font-display);
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	font-style: italic;
	color: var(--atelier-accent);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.atelier-contact a[href^="mailto:"]:hover {
	border-bottom-color: var(--atelier-accent);
}

/* ---- Footer polish ---- */
.site-footer, .ast-footer-copyright {
	background: var(--atelier-ink);
	color: var(--atelier-cream);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
	.wp-block-cover.is-hero { min-height: 62vh; }
	.atelier-card { padding: 1.5rem; }
}

/* ---- Block editor: constrain + show fonts so WYSIWYG matches ---- */
.editor-styles-wrapper {
	font-family: var(--atelier-font-body);
	background-color: var(--atelier-cream);
}
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3 {
	font-family: var(--atelier-font-display);
	font-weight: 400;
}