/* ==========================================================================
   LoLee Games theme — "sticker-pop" styles
   Colours come from theme.json presets. The four "side" colours
   (ground, header, cta, hero) are swapped below for Happy Meeples.
   ========================================================================== */

/* ---------- Side palettes ---------- */
body.lolee-side-lg {
	--wp--preset--color--ground: #FFFBF2;
	--wp--preset--color--header: #FFFFFF;
	--wp--preset--color--cta: #FEC802;
	--wp--preset--color--hero: #FFFBF2;
	--lolee-toggle-active: #FEC802;
}
body.lolee-side-hm {
	--wp--preset--color--ground: #F2FCFB;
	--wp--preset--color--header: #B0F4F2;
	--wp--preset--color--cta: #FE8394;
	--wp--preset--color--hero: #E4FAF9;
	--lolee-toggle-active: #B0F4F2;
}

:root {
	--lolee-ink: #0B1440;
	--lolee-line: 3px solid #0B1440;
	--lolee-shadow: 0 6px 0 #0B1440;
	--lolee-shadow-sm: 0 4px 0 #0B1440;
	--lolee-gutter: clamp(16px, 5vw, 48px);
	--lolee-wide: 1200px;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; width: 1px; word-wrap: normal !important;
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid #1466B8;
	outline-offset: 3px;
}

/* Template-part wrappers should not add gaps */
.lolee-header-part, .lolee-footer-part { margin-block: 0 !important; }
.wp-site-blocks > * + * { margin-block-start: 0; }
main.wp-block-group { margin-block-start: 0; }

/* ---------- Buttons ---------- */
.wp-element-button, .wp-block-button__link {
	transition: transform .12s ease, box-shadow .12s ease;
	text-decoration: none;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(2px); }
.wp-block-button.is-style-lolee-white .wp-block-button__link { background: #FFFFFF; color: var(--lolee-ink); }
.wp-block-button.is-style-lolee-ink .wp-block-button__link { background: var(--lolee-ink); color: #FFFFFF; }
.wp-block-button.is-style-lolee-ink .wp-block-button__link:hover { color: #FFFFFF; }
.wp-block-buttons { gap: 14px; }

/* ---------- Block styles ---------- */
.is-style-lolee-card {
	border: var(--lolee-line);
	border-radius: 32px;
	box-shadow: 0 8px 0 #0B1440;
	padding: clamp(24px, 4vw, 56px);
}
.is-style-lolee-panel {
	border: var(--lolee-line);
	border-radius: 28px;
	padding: clamp(18px, 2.4vw, 32px);
	background-color: #FFFFFF;
}
.is-style-lolee-dashed {
	border: 3px dashed var(--lolee-ink);
	border-radius: 28px;
	padding: clamp(20px, 3vw, 40px);
}
.is-style-lolee-band {
	border-top: var(--lolee-line);
	border-bottom: var(--lolee-line);
	padding-top: clamp(40px, 6vw, 72px) !important;
	padding-bottom: clamp(40px, 6vw, 72px) !important;
}
p.is-style-lolee-pill {
	display: inline-block;
	align-self: flex-start;
	padding: 6px 16px;
	border: 2px solid var(--lolee-ink);
	border-radius: 999px;
	background: #FFFFFF;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	line-height: 1.4;
	width: fit-content;
}
.has-text-align-center.is-style-lolee-pill { margin-inline: auto; }
p.is-style-lolee-hand {
	font-family: var(--wp--preset--font-family--hand);
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.2;
	color: #D63A50;
	margin-bottom: 0;
}
.lolee-hand--teal { color: #1F7F7B !important; }
.lolee-hand--leaf { color: #3F7A0E !important; }
.wp-block-image.is-style-lolee-framed img,
.wp-block-post-featured-image.is-style-lolee-framed img,
.wp-block-post-featured-image.is-style-lolee-framed {
	border-radius: 20px;
}
.wp-block-image.is-style-lolee-framed img,
.wp-block-post-featured-image.is-style-lolee-framed img { border: var(--lolee-line); box-sizing: border-box; }
.wp-block-image.is-style-lolee-circle img {
	border-radius: 999px;
	border: var(--lolee-line);
	background: #FFFFFF;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.wp-block-gallery.is-style-lolee-phones .wp-block-image img {
	border: var(--lolee-line);
	border-radius: 28px;
	box-shadow: var(--lolee-shadow-sm);
}

/* Placeholder boxes ("[Key art]") — replace with real images later */
.lolee-placeholder {
	background: rgba(255, 255, 255, .85);
	min-height: 200px;
	text-align: center;
	color: #4A5275;
	font-weight: 800;
}
.lolee-placeholder--art { min-height: 320px; }
.lolee-placeholder--photo { min-height: 200px; }

.lolee-meta, .lolee-meta a { color: #4A5275; font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.lolee-note { font-weight: 800; font-size: 15px; }

/* ---------- Header ---------- */
.lolee-header {
	background: var(--wp--preset--color--header);
	border-bottom: var(--lolee-line);
	position: relative;
	z-index: 20;
}
.lolee-header__inner {
	max-width: var(--lolee-wide);
	margin: 0 auto;
	padding: 14px var(--lolee-gutter);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px;
}
.lolee-header__brand { display: flex; line-height: 0; }
.lolee-header .lolee-logo--lg { height: 72px; width: auto; }
.lolee-header .lolee-logo--hm { height: 76px; width: auto; }
.lolee-header__nav { display: flex; justify-content: center; }
.lolee-header__nav .wp-block-navigation-item__content,
.lolee-header__links a {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 800;
	color: var(--lolee-ink);
}
.lolee-header__nav .wp-block-navigation-item__content:hover,
.lolee-header__links a:hover { background: rgba(11, 20, 64, .08); color: var(--lolee-ink); }
.lolee-header__nav .current-menu-item > .wp-block-navigation-item__content,
.lolee-header__nav [aria-current="page"] {
	background: #FFFFFF;
	box-shadow: inset 0 0 0 2px var(--lolee-ink);
}
.lolee-header__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
/* Phone menu button: WordPress shows it only below 600px wide; we only restyle it. */
.lolee-header .wp-block-navigation__responsive-container-open {
	width: 48px; height: 48px;
	border: var(--lolee-line); border-radius: 14px; background: #FFFFFF;
	align-items: center; justify-content: center;
}
@media (min-width: 600px) {
	.lolee-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none; }
}
.lolee-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 22px; }

/* ---------- Side toggle ---------- */
.lolee-toggle {
	display: flex;
	gap: 4px;
	padding: 5px;
	border: var(--lolee-line);
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: var(--lolee-shadow-sm);
	width: max-content;
}
.lolee-toggle__seg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 800;
	font-size: 15px;
	color: var(--lolee-ink);
	white-space: nowrap;
	transition: background-color .15s ease;
}
.lolee-toggle__seg:hover { background: rgba(11, 20, 64, .07); color: var(--lolee-ink); }
.lolee-toggle__seg--lg.is-active { background: #FEC802; }
.lolee-toggle__seg--hm.is-active { background: #B0F4F2; }
.lolee-toggle__seg.is-active:hover { color: var(--lolee-ink); }

@media (max-width: 960px) {
	.lolee-header__inner {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 12px 16px;
	}
	.lolee-header__nav { justify-content: flex-end; }
	.lolee-header__toggle { grid-column: 1 / -1; }
	.lolee-toggle { width: 100%; box-sizing: border-box; }
	.lolee-toggle__seg { flex: 1; padding: 0 10px; font-size: 14px; }
	.lolee-header .lolee-logo--lg { height: 56px; }
	.lolee-header .lolee-logo--hm { height: 58px; }
}

/* ---------- Footer ---------- */
.lolee-footer {
	background: var(--lolee-ink);
	color: #FFFFFF;
	margin-top: 0;
}
.lolee-footer a { color: #FFFFFF; text-decoration: none; font-weight: 700; }
.lolee-footer a:hover { color: #FEC802; text-decoration: underline; }
.lolee-footer--hm a:hover { color: #B0F4F2; }
.lolee-footer__inner {
	max-width: var(--lolee-wide);
	margin: 0 auto;
	padding: 64px var(--lolee-gutter) 36px;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 40px;
}
.lolee-footer__brand p { color: #C9CEE6; margin-top: 14px; max-width: 320px; }
.lolee-footer .lolee-logo--lg { width: 130px; height: auto; }
.lolee-footer .lolee-logo--hm { width: 170px; height: auto; }
.lolee-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lolee-footer__heading { font-weight: 800; color: #FEC802; margin: 0 0 8px; }
.lolee-footer--hm .lolee-footer__heading { color: #B0F4F2; }
.lolee-footer__contact p { margin: 0 0 14px; }
.lolee-footer__email { display: inline-flex; align-items: center; gap: 8px; }
.lolee-footer__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.lolee-footer__social a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
	border: 2px solid rgba(255, 255, 255, .5); border-radius: 999px;
}
.lolee-footer__legal {
	max-width: var(--lolee-wide);
	margin: 0 auto;
	padding: 20px var(--lolee-gutter) 32px;
	border-top: 1px solid rgba(255, 255, 255, .2);
	color: #C9CEE6;
	font-size: 14px;
}
.lolee-footer__legal p { margin: 0; }
.lolee-footer__legal a { margin-left: 12px; font-weight: 600; }
@media (max-width: 781px) {
	.lolee-footer__inner { grid-template-columns: 1fr; gap: 28px; padding-top: 44px; }
}

/* ---------- Sections & heroes ---------- */
.lolee-section {
	padding-top: clamp(48px, 7vw, 96px);
	padding-bottom: clamp(48px, 7vw, 96px);
}
.lolee-section > * + * { margin-block-start: clamp(40px, 5vw, 72px); }
.lolee-section-head { margin-bottom: 28px; }
.lolee-section-head h2 { margin: 0; }

.lolee-hero {
	position: relative;
	padding-top: clamp(40px, 6vw, 72px) !important;
	padding-bottom: clamp(56px, 7vw, 96px) !important;
	overflow: hidden;
}
.lolee-hero > * { position: relative; }
.lolee-hero--lg::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 6% 20%, #21B5FE 0 10px, transparent 11px),
		radial-gradient(circle at 45% 12%, #FE6375 0 7px, transparent 8px),
		radial-gradient(circle at 94% 86%, #8CD23C 0 12px, transparent 13px),
		radial-gradient(circle at 5% 88%, #FEC802 0 8px, transparent 9px),
		radial-gradient(circle at 52% 88%, #FEC802 0 6px, transparent 7px);
}
.lolee-hero--hm-pattern::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .45;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='640' viewBox='0 0 1440 640' fill='none' stroke='%230B1440' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M60 420l70-120 70 120z'/%3E%3Cpath d='M1210 110l50-86 50 86z'/%3E%3Cpath d='M1180 560l90-60 40 90'/%3E%3Cpath d='M640 60c30-30 60 30 90 0s60 30 90 0'/%3E%3Ccircle cx='140' cy='110' r='14' fill='%23FFC2CB' stroke='none'/%3E%3Ccircle cx='1330' cy='330' r='16' fill='%23FFE27A' stroke='none'/%3E%3Ccircle cx='720' cy='590' r='10' fill='%23D9CCF8' stroke='none'/%3E%3Cg fill='%230B1440' stroke='none'%3E%3Ccircle cx='1040' cy='80' r='3'/%3E%3Ccircle cx='1056' cy='80' r='3'/%3E%3Ccircle cx='1072' cy='80' r='3'/%3E%3Ccircle cx='1040' cy='96' r='3'/%3E%3Ccircle cx='1056' cy='96' r='3'/%3E%3Ccircle cx='1072' cy='96' r='3'/%3E%3Ccircle cx='300' cy='580' r='3'/%3E%3Ccircle cx='316' cy='580' r='3'/%3E%3Ccircle cx='332' cy='580' r='3'/%3E%3C/g%3E%3C/svg%3E");
	background-size: cover;
	background-position: center;
}
.lolee-hero--hm-pattern, .lolee-hero--hm { border-bottom: var(--lolee-line); }
.lolee-hero--center { text-align: center; }
.lolee-hero--center > * { margin-inline: auto; max-width: 900px; }
.lolee-hero-logo { max-width: 100%; }
/* The image block stores an inline width (480px); cap it so it never overflows narrow screens. */
.lolee-hero-logo img { width: min(480px, 100%) !important; max-width: 100%; height: auto; }
@media (max-width: 599px) {
	.lolee-hero-logo img { width: min(300px, 78vw) !important; }
}
.lolee-hero .wp-block-column:last-child .wp-block-image { display: flex; justify-content: center; margin: 0; }
.lolee-hero-badge img {
	width: min(380px, 80vw) !important;
	box-shadow: 0 10px 0 #0B1440;
	border-width: 4px;
}
.lolee-hero-wordmark img { width: min(520px, 88vw) !important; filter: drop-shadow(0 6px 0 rgba(11, 20, 64, .12)); }
.lolee-crosslink__logo--hm img { width: 220px; }

.lolee-page-hero {
	padding-top: clamp(40px, 6vw, 72px) !important;
	padding-bottom: clamp(32px, 4vw, 48px) !important;
	border-bottom: var(--lolee-line);
}
.lolee-page-hero .wp-block-post-title,
.lolee-page-hero h1 { margin-top: 8px; }
.lolee-page-body {
	padding-top: clamp(32px, 5vw, 64px);
	padding-bottom: clamp(48px, 7vw, 96px);
}

/* Featured game card */
.lolee-feature h2 { margin: 0; }
.lolee-feature .wp-block-columns { gap: clamp(24px, 4vw, 48px); margin: 0; }
.lolee-feature .lolee-placeholder--art { border-style: solid; border-radius: 28px; }

.lolee-teaser { gap: 24px; }
.lolee-teaser h2 { margin: 0; }

/* Cross-link bands */
.lolee-crosslink { gap: 32px 48px; }
.lolee-crosslink__text { flex: 1 1 360px; gap: 6px; }
.lolee-crosslink__text > * { margin: 0; }
.lolee-crosslink__logo { margin: 0; flex: 0 0 auto; }

/* Card grids from query loops */
.lolee-card-grid { gap: 28px !important; }
.lolee-post-card { display: flex; flex-direction: column; gap: 12px; height: 100%; box-sizing: border-box; }
.lolee-post-card > * { margin: 0 !important; }
.lolee-post-card .wp-block-post-title a { text-decoration: none; }
.lolee-post-card .wp-block-post-title a:hover { text-decoration: underline; }
.lolee-game-card .wp-block-post-title a { text-decoration: none; }
@media (max-width: 781px) {
	.lolee-card-grid.is-layout-grid { grid-template-columns: 1fr !important; }
}

/* Column cards need breathing room */
.wp-block-columns .wp-block-column.is-style-lolee-card,
.wp-block-columns .wp-block-column.is-style-lolee-panel { box-sizing: border-box; }
.wp-block-column.is-style-lolee-card > *:first-child,
.wp-block-column.is-style-lolee-panel > *:first-child { margin-top: 0; }

/* ---------- Plugin blocks: events ---------- */
.lolee-events { display: grid; gap: 28px; }
.lolee-events--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .lolee-events--grid { grid-template-columns: 1fr; } }
.lolee-event {
	background: #FFFFFF;
	border: var(--lolee-line);
	border-radius: 28px;
	box-shadow: var(--lolee-shadow);
	padding: 24px 28px;
	display: flex;
	gap: 22px;
}
.lolee-events--grid .lolee-event { flex-direction: column; }
.lolee-events--list .lolee-event { align-items: center; }
@media (max-width: 640px) { .lolee-events--list .lolee-event { flex-direction: column; align-items: flex-start; } }
.lolee-event__top { display: flex; gap: 18px; align-items: center; }
.lolee-event__date {
	flex: 0 0 auto;
	width: 92px; height: 100px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	border: var(--lolee-line); border-radius: 20px;
	background: #FFE27A;
	line-height: 1;
}
.lolee-event:nth-child(3n+2) .lolee-event__date { background: #FFC2CB; }
.lolee-event:nth-child(3n+3) .lolee-event__date { background: #B0F4F2; }
.lolee-event__month { font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.lolee-event__day { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 38px; margin-top: 4px; }
.lolee-event__body { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.lolee-event__title { margin: 0; font-size: clamp(20px, 2vw, 26px); }
.lolee-event__title a { text-decoration: none; }
.lolee-event__title a:hover { text-decoration: underline; }
.lolee-event__type {
	align-self: flex-start; padding: 3px 12px; border-radius: 999px;
	border: 2px solid var(--lolee-ink); background: #D9CCF8; font-weight: 800; font-size: 13px;
}
.lolee-event__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; color: #2A3358; font-size: 16px; margin: 0; padding: 0; list-style: none; }
.lolee-event__facts li { display: inline-flex; gap: 8px; align-items: center; }
.lolee-event__more { font-weight: 800; }
.lolee-empty {
	border: 3px dashed var(--lolee-ink); border-radius: 28px; padding: 32px;
	background: rgba(255, 255, 255, .7); font-weight: 700; text-align: center;
}
.lolee-event-details { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; padding: 0; margin: 16px 0 0; font-size: 18px; font-weight: 700; }
.lolee-event-details li { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Plugin blocks: videos ---------- */
.lolee-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 960px) { .lolee-videos { grid-template-columns: 1fr; } }
.lolee-video {
	border: var(--lolee-line);
	border-radius: 24px;
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: var(--lolee-shadow-sm);
}
.lolee-video .wp-embed-aspect-16-9, .lolee-video iframe { width: 100%; }
.lolee-video iframe { display: block; border: 0; }
.lolee-video__frame { aspect-ratio: 16 / 9; }
.lolee-video__frame iframe { height: 100%; }
.lolee-video__frame--tall { aspect-ratio: auto; display: flex; justify-content: center; background: #FFFFFF; }
.lolee-video__frame--tall iframe, .lolee-video__frame--tall blockquote { max-width: 100%; }
.lolee-video__link { display: block; padding: 14px 18px; font-weight: 800; }
.lolee-videos__more { margin-top: 28px; }

/* ---------- Plugin blocks: games ---------- */
.lolee-game-hero {
	background: #21B5FE;
	border-bottom: var(--lolee-line);
	padding: clamp(40px, 6vw, 72px) var(--lolee-gutter) clamp(48px, 7vw, 88px);
}
.lolee-game-hero__inner {
	max-width: var(--lolee-wide);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 56px);
	align-items: center;
}
@media (max-width: 860px) { .lolee-game-hero__inner { grid-template-columns: 1fr; } }
.lolee-game-hero__text { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.lolee-game-hero__text > * { margin: 0; }
.lolee-game-hero__back { font-weight: 800; text-decoration: none; }
.lolee-game-hero__title { font-size: var(--wp--preset--font-size--huge); line-height: 1; }
.lolee-game-hero__tagline { font-size: var(--wp--preset--font-size--large); }
.lolee-game-hero__art img, .lolee-game-hero__art .lolee-placeholder {
	width: 100%;
	border: var(--lolee-line);
	border-radius: 32px;
	box-shadow: 0 8px 0 #0B1440;
	box-sizing: border-box;
	display: flex; align-items: center; justify-content: center;
}
.lolee-game-hero__art img { display: block; aspect-ratio: 16 / 11; object-fit: cover; }
.lolee-store-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.lolee-store-buttons .wp-element-button { background: #FFFFFF; }
.lolee-store-buttons .wp-element-button.is-primary { background: var(--lolee-ink); color: #FFFFFF; }
.lolee-store-soon {
	display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px;
	border: 2px dashed var(--lolee-ink); border-radius: 999px;
	background: rgba(255, 255, 255, .75); font-weight: 800; font-size: 15px;
}
.lolee-game-details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	max-width: var(--lolee-wide);
	margin: clamp(40px, 5vw, 72px) auto 0;
}
@media (max-width: 781px) { .lolee-game-details { grid-template-columns: 1fr; } }
.lolee-game-details__facts, .lolee-game-details__support {
	border: var(--lolee-line); border-radius: 28px; padding: clamp(22px, 3vw, 36px);
}
.lolee-game-details__facts { background: #FFFFFF; }
.lolee-game-details__support { background: #B0F4F2; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.lolee-game-details h2 { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 8px; }
.lolee-game-details dl { margin: 0; }
.lolee-game-details dl div {
	display: flex; justify-content: space-between; gap: 16px;
	padding: 14px 0; border-bottom: 2px solid rgba(11, 20, 64, .12);
}
.lolee-game-details dt { font-weight: 800; }
.lolee-game-details dd { margin: 0; color: #2A3358; text-align: right; }
.lolee-game-details__support p { margin: 0; }

/* Editor-only helper */
.lolee-ssr-preview { pointer-events: none; }
.lolee-editor-hint { padding: 16px; border: 2px dashed #4A5275; border-radius: 16px; color: #4A5275; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
	.wp-element-button:hover, .wp-block-button__link:hover { transform: none; }
}

/* ==========================================================================
   v1.1 — Happy Meeples: contact form, services, Top 10s, longer menu
   ========================================================================== */

/* Longer Happy Meeples menu: switch to the ☰ button before links get cramped. */
@media (max-width: 1240px) {
	.lolee-header--hm .lolee-header__nav { justify-content: flex-end; }
	.lolee-header--hm .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.lolee-header--hm .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (min-width: 961px) and (max-width: 1240px) {
	.lolee-header--hm .lolee-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* Contact form (Jetpack form block) */
.lolee-form label,
.lolee-form .grunion-field-label { font-weight: 800; display: block; margin-bottom: 6px; }
.lolee-form input[type="text"],
.lolee-form input[type="email"],
.lolee-form input[type="tel"],
.lolee-form input[type="url"],
.lolee-form select,
.lolee-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: var(--lolee-line) !important;
	border-radius: 16px !important;
	padding: 12px 14px !important;
	font: inherit;
	font-size: 17px;
	color: var(--lolee-ink);
	background: #FFFFFF;
}
.lolee-form textarea { min-height: 160px; }
.lolee-form input:focus,
.lolee-form select:focus,
.lolee-form textarea:focus { outline: 3px solid #1466B8; outline-offset: 2px; }

/* Services */
.lolee-service-grid, .lolee-step-grid { gap: 28px !important; }
.lolee-service > * { margin-top: 0; }
.lolee-service h3 { margin-bottom: 10px; }
.lolee-step { position: relative; }
.lolee-step > * { margin-top: 0; }
p.lolee-step__num {
	width: 52px; height: 52px;
	display: flex; align-items: center; justify-content: center;
	border: var(--lolee-line); border-radius: 999px;
	background: var(--wp--preset--color--cta);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; font-size: 24px; line-height: 1;
	margin-bottom: 14px;
}

/* Top 10 hub cards */
.lolee-topten-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px;
}
.lolee-topten-card {
	display: flex; flex-direction: column;
	border: var(--lolee-line); border-radius: 28px;
	background: #FFFFFF; box-shadow: var(--lolee-shadow);
	overflow: hidden; text-decoration: none; color: var(--lolee-ink);
	transition: transform .12s ease, box-shadow .12s ease;
}
.lolee-topten-card:hover { transform: translateY(2px); box-shadow: var(--lolee-shadow-sm); color: var(--lolee-ink); }
.lolee-topten-card__media {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 16 / 10; background: #FFE27A; border-bottom: var(--lolee-line);
}
.lolee-topten-card:nth-child(3n+2) .lolee-topten-card__media { background: #FFC2CB; }
.lolee-topten-card:nth-child(3n+3) .lolee-topten-card__media { background: #B0F4F2; }
.lolee-topten-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lolee-topten-card__badge {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; font-size: 72px; line-height: 1;
	width: 120px; height: 120px; display: flex; align-items: center; justify-content: center;
	border: var(--lolee-line); border-radius: 999px; background: #FFFFFF;
}
.lolee-topten-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 24px; }
.lolee-topten-card__title { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 22px; line-height: 1.2; }
.lolee-topten-card__excerpt { color: #2A3358; font-size: 16px; }

/* Numbered Top 10 list inside a post */
ol.lolee-ranked { list-style: none; counter-reset: lolee-rank; padding: 0; margin-left: 0; }
ol.lolee-ranked > li {
	counter-increment: lolee-rank;
	position: relative;
	margin: 0 0 16px;
	padding: 16px 20px 16px 86px;
	min-height: 76px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 .35em;
	box-sizing: border-box;
	border: var(--lolee-line);
	border-radius: 24px;
	background: #FFFFFF;
	box-shadow: var(--lolee-shadow-sm);
}
ol.lolee-ranked > li::before {
	content: counter(lolee-rank);
	position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
	width: 50px; height: 50px;
	display: flex; align-items: center; justify-content: center;
	border: var(--lolee-line); border-radius: 999px;
	background: var(--wp--preset--color--cta);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; font-size: 22px; line-height: 1;
}

/* ==========================================================================
   v1.2 — Heal the Cell content: phone screenshots
   ========================================================================== */

/* Home page card: two overlapping phone screenshots */
.lolee-phone-duo {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 380px;
	padding: 8px 0 16px;
}
.lolee-phone-duo .wp-block-image { margin: 0 !important; }
.lolee-phone-duo .lolee-phone img {
	width: clamp(150px, 16vw, 210px) !important;
	height: auto;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	border: var(--lolee-line);
	border-radius: 26px;
	box-shadow: var(--lolee-shadow);
	background: #0B1440;
}
.lolee-phone-duo .lolee-phone--back { transform: rotate(-6deg) translate(18px, -6px); z-index: 1; }
.lolee-phone-duo .lolee-phone--front { transform: rotate(5deg) translate(-18px, 14px); z-index: 2; }

/* Game page header: show a portrait screenshot like a phone */
.lolee-game-hero__art--phone { display: flex; justify-content: center; }
.lolee-game-hero__art--phone img {
	width: min(300px, 72vw);
	aspect-ratio: 9 / 16;
	object-fit: cover;
	border-radius: 36px;
}

/* Gallery of phone screenshots: keep them phone-shaped */
/* WordPress sizes gallery items from this gap variable, so set the variable (not just gap). */
.wp-block-gallery.is-style-lolee-phones {
	--wp--style--unstable-gallery-gap: 20px;
	gap: 20px !important;
	max-width: 920px;
	margin-left: auto !important;
	margin-right: auto !important;
	justify-content: center;
}
.wp-block-gallery.is-style-lolee-phones figure.wp-block-image:not(#individual-image) {
	width: calc(25% - 15px) !important;
	flex-grow: 0 !important;
	margin: 0 !important;
}
.wp-block-gallery.is-style-lolee-phones .wp-block-image img { aspect-ratio: 9 / 16; object-fit: cover; width: 100%; height: auto; }
@media (max-width: 781px) {
	.wp-block-gallery.is-style-lolee-phones figure.wp-block-image:not(#individual-image) { width: calc(50% - 10px) !important; }
}

.lolee-all-ages { font-weight: 700; font-size: 18px; }
.lolee-all-ages > p { margin: 0; }

/* ==========================================================================
   v1.3 — Games list: big cards with artwork
   ========================================================================== */
.lolee-hero-stack { gap: 8px; }
.lolee-hero-stack > * { margin: 0; }
.lolee-game-list { display: flex; flex-direction: column; gap: 40px; list-style: none; padding: 0; margin: 0; }
.lolee-game-wide {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
	background: #21B5FE;
	box-sizing: border-box;
}
.lolee-game-wide.has-art { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 781px) { .lolee-game-wide.has-art { grid-template-columns: minmax(0, 1fr); } }
.lolee-game-wide__text { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.lolee-game-wide__text > * { margin: 0; }
.lolee-game-wide__title { font-size: var(--wp--preset--font-size--xx-large); line-height: 1.05; }
.lolee-game-wide__title a { text-decoration: none; }
.lolee-game-wide__title a:hover { text-decoration: underline; }
.lolee-game-wide__pitch { font-size: var(--wp--preset--font-size--large); line-height: 1.55; }
.lolee-game-card__art img { width: 100%; height: auto; border: var(--lolee-line); border-radius: 24px; display: block; }
@media (max-width: 781px) { .lolee-game-wide .lolee-phone-duo { min-height: 0; padding-top: 0; } }

/* v1.4 — header without the side toggle (Happy Meeples hidden) */
.lolee-header--no-toggle .lolee-header__inner { grid-template-columns: auto minmax(0, 1fr); }
.lolee-header--no-toggle .lolee-header__nav { justify-content: flex-end; }