/*
Theme Name: Studio Lotka
Theme URI: https://studiolotka.com
Author: Studio Lotka
Author URI: https://studiolotka.com
Description: The Studio Lotka block theme. Paper and flight: bold Bricolage headlines, one italic serif letter, sky blue accents and lots of room to breathe.
Version: 1.0.2
Requires at least: 6.5
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: studio-lotka
*/

/* ---------- Paper texture ---------- */
body {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .11 0 0 0 0 .07 0 0 0 0 .05 0 0 0 .07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	font-variation-settings: "opsz" 14;
}
h1, h2, h3 { text-wrap: balance; font-variation-settings: "opsz" 96; }

/* ---------- The swap: italicise ONE letter in a heading (Ctrl/Cmd + I) ---------- */
h1 em, h2 em, h3 em,
.sl-swap em {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	font-size: 1.16em;
	line-height: 0;
	color: var(--wp--preset--color--sky);
}
.sl-band--sky h1 em, .sl-band--sky h2 em, .sl-band--sky h3 em { color: var(--wp--preset--color--ink); }
.sl-band--ink h1 em, .sl-band--ink h2 em, .sl-band--ink h3 em { color: var(--wp--preset--color--cerulean); }

/* ---------- Small type ---------- */
.sl-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}
.sl-hand {
	font-family: var(--wp--preset--font-family--hand);
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	line-height: 1;
	color: var(--wp--preset--color--sky);
}
.sl-lede { font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.5; max-width: 40rem; }
.sl-muted { color: var(--wp--preset--color--ink-soft); }

/* ---------- Header ---------- */
.sl-header {
	border-bottom: 1px solid var(--wp--preset--color--ink);
	padding-top: 1.1rem !important;
	padding-bottom: 1.1rem !important;
	padding-left: var(--wp--style--root--padding-left, clamp(16px, 4vw, 48px)) !important;
	padding-right: var(--wp--style--root--padding-right, clamp(16px, 4vw, 48px)) !important;
	gap: 1rem;
}
.sl-logo { margin: 0 !important; }
.sl-logo img { width: 168px; height: auto; display: block; }
.sl-nav a { text-decoration: none; }
.sl-nav a:hover, .sl-nav .current-menu-item a { color: var(--wp--preset--color--sky); }
.sl-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--paper); }

/* ---------- Bands (full-width coloured sections) ---------- */
.sl-band { padding-top: clamp(4rem, 9vw, 7.5rem) !important; padding-bottom: clamp(4rem, 9vw, 7.5rem) !important; }
.sl-band--light { background: var(--wp--preset--color--paper-light); }
.sl-band--cerulean { background: var(--wp--preset--color--cerulean); }
.sl-band--sky { background: var(--wp--preset--color--sky); color: var(--wp--preset--color--paper); }
.sl-band--sky h1, .sl-band--sky h2, .sl-band--sky h3 { color: var(--wp--preset--color--paper); }
.sl-band--ink { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.sl-band--ink h1, .sl-band--ink h2, .sl-band--ink h3 { color: var(--wp--preset--color--paper); }
.sl-band--ink a, .sl-band--sky a:not(.wp-element-button) { color: var(--wp--preset--color--paper); }
.sl-band--ink .sl-eyebrow { color: var(--wp--preset--color--cerulean); }
.sl-band--sky .sl-eyebrow, .sl-band--sky .sl-muted { color: var(--wp--preset--color--paper); }
.sl-band--sky .wp-element-button { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.sl-band--sky .wp-element-button:hover { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.sl-band--ink .wp-element-button { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.sl-band--ink .wp-element-button:hover { background: var(--wp--preset--color--cerulean); }

/* ---------- Wide layout: sections run nearly edge to edge, text stays readable ---------- */
:root { --sl-max: 1600px; --sl-text: 46rem; }
.sl-band.is-layout-constrained > :not(.alignfull),
.sl-footer.is-layout-constrained > :not(.alignfull) {
	max-width: var(--sl-max) !important;
}
.sl-band.is-layout-constrained > p:not(.sl-eyebrow),
.sl-band.is-layout-constrained > .sl-lede {
	max-width: var(--sl-text) !important;
	margin-left: max(0px, calc((100% - var(--sl-max)) / 2)) !important;
	margin-right: auto !important;
}
.sl-band .sl-lede { max-width: var(--sl-text); }

/* ---------- Sky window: stands in for a photo until you add one ---------- */
.sl-sky {
	aspect-ratio: 4 / 3;
	min-height: 220px;
	border: 1px solid var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--sky);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='xMidYMid slice'><g fill='%23F1ECE4'><path d='M60 80 q12-13 24-2 q12-11 24 2 q-12-6-24 4 q-12-9-24-4z'/><path d='M150 50 q9-10 18-2 q9-8 18 2 q-9-5-18 3 q-9-7-18-3z'/><path d='M210 120 q15-17 30-3 q15-14 30 3 q-15-8-30 5 q-15-12-30-5z'/><path d='M310 70 q10-11 20-2 q10-9 20 2 q-10-5-20 3 q-10-8-20-3z'/><path d='M110 190 q11-12 22-2 q11-10 22 2 q-11-6-22 4 q-11-9-22-4z'/><path d='M290 200 q8-9 16-2 q8-7 16 2 q-8-4-16 3 q-8-6-16-3z'/></g></svg>");
	background-size: cover;
	background-position: center;
}

/* ---------- Cards and lists ---------- */
.sl-card {
	border-top: 2px solid var(--wp--preset--color--ink);
	padding-top: 1.25rem;
}
.sl-card h3 { margin-top: 0; }
.sl-step-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--sky);
	margin-bottom: 0.25rem !important;
}
.sl-ticks { list-style: none; padding-left: 0; border-top: 1px solid var(--wp--preset--color--ink); }
.sl-ticks li { padding: 0.7rem 0; border-bottom: 1px solid rgba(29, 18, 14, 0.2); }
.sl-band--ink .sl-ticks, .sl-band--ink .sl-ticks li { border-color: rgba(221, 211, 196, 0.3); }

.sl-service + .sl-service { margin-top: clamp(3rem, 6vw, 5rem) !important; }

/* ---------- Footer ---------- */
.sl-footer { padding-top: clamp(3.5rem, 7vw, 5.5rem) !important; padding-bottom: 2.5rem !important; }
.sl-footer-mark img { width: 64px; height: auto; display: block; }
.sl-footer .sl-small { font-family: var(--wp--preset--font-family--mono); font-size: 0.78rem; letter-spacing: 0.08em; }
.sl-footer-base { border-top: 1px solid rgba(221, 211, 196, 0.3); padding-top: 1.25rem; margin-top: 3rem !important; }

/* ---------- Buttons ---------- */
.wp-block-button.is-style-outline .wp-element-button {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid currentColor;
}
.wp-block-button.is-style-outline .wp-element-button:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }

@media (prefers-reduced-motion: no-preference) {
	.wp-element-button { transition: background-color .2s ease, color .2s ease; }
}