/*
Theme Name: Draw So Cute Pastel
Theme URI: https://www.drawsocute.com/
Author: Draw So Cute
Author URI: https://www.drawsocute.com/
Description: Pastel Sketchbook redesign for Draw So Cute. Cream dotted-paper background, Fredoka headings, dashed-outline cards, washi-tape category tiles, automatic YouTube videos and Shorts, and a full-width layout with no sidebar. Existing post content (including white “Hi Cuties,” text written for the old dark background) stays readable.
Version: 1.0.8
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: drawsocute-pastel
Tags: one-column, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, blog
*/

/* -------------------------------------------------------------------------- */
/* Tokens & base                                                                */
/* -------------------------------------------------------------------------- */
:root {
	--paper: #fdf6ec;
	--pink: #f7a8c4;
	--pinkd: #e8789f;
	--mint: #a8e0cf;
	--mintd: #5fbfa5;
	--lav: #cdb9f0;
	--lemon: #fde9a0;
	--ink: #4a3b4f;
	--soft: #7b6b80;
	--card-border: #f3e6d8;
	--card-shadow: #efdfcf;
	--etsy: #f1641e;
	--etsy-dk: #b5420c;
	--focus: #5fbfa5;
	--content-width: 760px;
	--wrap: 1200px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
	margin: 0;
	background: var(--paper);
	background-image: radial-gradient(#ead9c6 1.2px, transparent 1.3px);
	background-size: 22px 22px;
	color: var(--ink);
	font-family: Nunito, "Segoe UI", sans-serif;
	font-size: 17px;
	line-height: 1.55;
	min-height: 100vh;
	overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
svg { fill: currentColor; }

h1, h2, h3, h4, h5, h6, .logo, .site-title {
	font-family: Fredoka, "Trebuchet MS", sans-serif;
	font-weight: 600;
	margin: 0;
	line-height: 1.15;
	color: var(--ink);
}

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 28px;
}

.screen-reader-text,
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}
.skip-link:focus {
	left: 16px;
	top: 16px;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 100000;
	padding: 10px 16px;
	background: var(--lemon);
	color: var(--ink);
	border-radius: 999px;
	font-family: Fredoka, sans-serif;
	font-weight: 600;
	outline: 3px solid var(--ink);
}

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------- */
/* Header                                                                       */
/* -------------------------------------------------------------------------- */
.site-header { position: relative; z-index: 20; padding: 18px 0; }

.hbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	background: #fff;
	border: 2.5px dashed var(--pink);
	border-radius: 28px;
	padding: 12px 22px;
	box-shadow: 0 6px 0 #f3e3d3;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
}
.brand img.ic {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 3px solid var(--mint);
	object-fit: cover;
}
.brand img.wm { height: 32px; width: auto; }
.brand .custom-logo { height: 40px; width: auto; }
.brand .site-title {
	font-size: 22px;
	color: var(--pinkd);
}

nav.main { order: 3; flex-basis: 100%; display: flex; justify-content: center; }
nav.main .menu,
nav.main ul {
	list-style: none;
	margin: 0;
	padding: 10px 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	border-top: 2px dashed #f6d3e0;
	width: 100%;
}
nav.main a {
	font-family: Fredoka, sans-serif;
	font-weight: 500;
	font-size: 16px;
	padding: 7px 12px;
	border-radius: 999px;
	display: inline-block;
}
nav.main a:hover,
nav.main a.on,
nav.main .current-menu-item > a,
nav.main .current_page_item > a,
nav.main .current-menu-ancestor > a {
	background: var(--lemon);
}

.soc { display: flex; gap: 8px; margin-left: auto; }
.soc a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	flex-shrink: 0;
}
.soc a svg { width: 22px; height: 22px; display: block; }
.soc .yt { background: #ff6b8f; }
.soc .ig { background: #b48be8; }
.soc .fb { background: #6fb7e8; }
.soc a:hover { transform: translateY(-1px); }

.burger {
	display: none;
	margin-left: auto;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--lemon);
	place-items: center;
	border: 0;
	cursor: pointer;
	color: var(--ink);
	padding: 0;
}
.burger svg { display: block; }

/* -------------------------------------------------------------------------- */
/* Buttons                                                                      */
/* -------------------------------------------------------------------------- */
.btns { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
	font-family: Fredoka, sans-serif;
	font-weight: 600;
	font-size: 19px;
	padding: 15px 28px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 2.5px solid var(--ink);
	box-shadow: 4px 4px 0 var(--ink);
	background: #fff;
	color: var(--ink);
	line-height: 1;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn.pk { background: var(--pink); }
.btn.mt { background: #fff; }
.btn.etsy {
	background: var(--etsy);
	color: #fff;
	border-color: var(--etsy-dk);
	box-shadow: 4px 4px 0 var(--etsy-dk);
}
.btn.etsy:hover { box-shadow: 5px 5px 0 var(--etsy-dk); color: #fff; }
.btn svg { width: 26px; height: 26px; flex-shrink: 0; }

/* -------------------------------------------------------------------------- */
/* Front page: hero                                                             */
/* -------------------------------------------------------------------------- */
.hero { position: relative; padding: 24px 0 36px; }
.hero .grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 30px;
	align-items: center;
}
.tag {
	display: inline-block;
	font-family: Fredoka, sans-serif;
	font-weight: 500;
	background: var(--mint);
	color: #245a4c;
	padding: 6px 16px;
	border-radius: 999px;
	transform: rotate(-2deg);
	font-size: 15px;
	letter-spacing: .5px;
}
.hero h1 { font-size: 64px; line-height: 1.05; margin: 18px 0 18px; color: var(--ink); }
.hero h1 .u { position: relative; color: var(--pinkd); white-space: nowrap; }
.hero h1 .u svg { position: absolute; left: 0; bottom: -12px; width: 100%; height: 18px; }
.hero p.lead { font-size: 20px; color: var(--soft); max-width: 520px; margin: 0; }

.stage { position: relative; height: 340px; overflow: hidden; }
.blob {
	position: absolute;
	inset: 30px 10px 10px 30px;
	background: #ffe1ec;
	border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%;
}
.blob2 {
	position: absolute;
	width: 210px;
	height: 210px;
	right: 0;
	top: 0;
	background: #d9f3ea;
	border-radius: 50%;
}
.stage img { position: absolute; filter: drop-shadow(0 8px 0 rgba(74, 59, 79, .08)); width: auto; max-width: none; }
.s-girl { height: 310px; left: 38%; bottom: 6px; }
.s-bear { height: 150px; left: 2%; bottom: 16px; transform: rotate(-6deg); }
.s-ice { height: 130px; right: 0; bottom: 28px; transform: rotate(7deg); }
.s-rain { height: 102px; left: 0; top: 8px; transform: none; }

.dood { position: absolute; fill: currentColor; display: block; }
.dood svg { width: 100%; height: 100%; display: block; }
.d2 { width: 26px; height: 26px; color: var(--pinkd); top: 100px; right: 6%; }
.d3 { width: 22px; height: 22px; color: var(--mintd); bottom: 20px; left: 44%; }
.d4 { width: 30px; height: 30px; color: var(--lav); top: 10px; left: -10px; }

/* -------------------------------------------------------------------------- */
/* Front page sections                                                          */
/* -------------------------------------------------------------------------- */
.home-section,
section.home-section { padding: 46px 0; }

.sh {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 26px;
}
.sh h2 { font-size: 40px; display: flex; align-items: center; gap: 12px; }
.sh h2 i { display: inline-flex; width: 30px; height: 30px; flex-shrink: 0; }
.sh h2 i svg { width: 100%; height: 100%; fill: currentColor; }
.sh a.more {
	font-family: Fredoka, sans-serif;
	font-weight: 500;
	color: var(--pinkd);
	border-bottom: 2px dashed var(--pink);
	white-space: nowrap;
}
.sh a.more:hover { color: var(--ink); }

/* Category washi cards */
.cats { display: grid; grid-template-columns: repeat(7, 1fr); gap: 18px; }
.cat {
	background: #fff;
	border-radius: 22px;
	padding: 14px 12px 16px;
	text-align: center;
	position: relative;
	box-shadow: 0 5px 0 var(--card-shadow);
	border: 2px solid var(--card-border);
	color: var(--ink);
}
.cat:nth-child(odd) { transform: rotate(-1.5deg); }
.cat:nth-child(even) { transform: rotate(1.5deg); }
.cat:hover { transform: rotate(0deg) translateY(-4px); }
.cat::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	width: 60px;
	height: 20px;
	margin-left: -30px;
	background: rgba(168, 224, 207, .75);
	transform: rotate(-4deg);
	border-radius: 3px;
}
.cat:nth-child(3n+2)::before { background: rgba(247, 168, 196, .7); }
.cat:nth-child(3n)::before { background: rgba(205, 185, 240, .75); }
.cat .im {
	height: 120px;
	display: grid;
	place-items: center;
	border-radius: 16px;
	background: #fff7fa;
	margin-bottom: 10px;
	overflow: hidden;
}
.cat .im img { max-height: 108px; width: auto; max-width: 100%; }
.cat h3 { font-size: 18px; }
.cat span { font-size: 13px; color: var(--soft); display: block; line-height: 1.3; margin-top: 3px; }

/* Videos */
.vids { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.vid {
	background: #fff;
	border-radius: 22px;
	padding: 10px;
	box-shadow: 0 5px 0 var(--card-shadow);
	border: 2px solid var(--card-border);
	color: var(--ink);
}
.vid:hover { transform: translateY(-3px); }
.vid .th { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; background: #f3e6d8; }
.vid .th img { width: 100%; height: 100%; object-fit: cover; }
.vid .th b {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	display: grid;
	place-items: center;
	color: var(--pinkd);
}
.vid .th b svg { width: 22px; height: 22px; }
.vid h3 { font-size: 17px; font-weight: 500; line-height: 1.3; padding: 10px 6px 4px; font-family: Fredoka, sans-serif; }

/* Shorts band */
.band {
	background: #fff;
	border-top: 3px dashed var(--mint);
	border-bottom: 3px dashed var(--mint);
}
.shorts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.short {
	border-radius: 20px;
	overflow: hidden;
	position: relative;
	aspect-ratio: 9/16;
	border: 3px solid #fff;
	box-shadow: 0 0 0 2.5px var(--pink);
	background: #4a3b4f;
}
.short img { width: 100%; height: 100%; object-fit: cover; }
.short span {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30px 10px 10px;
	background: linear-gradient(transparent, rgba(60, 30, 60, .75));
	color: #fff;
	font-family: Fredoka, sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.25;
}

/* Coloring pages */
.color { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cp {
	background: #fff;
	border-radius: 6px;
	padding: 14px 14px 18px;
	box-shadow: 0 8px 18px rgba(120, 90, 60, .12);
	text-align: center;
	color: var(--ink);
}
.cp:nth-child(1) { transform: rotate(-2deg); }
.cp:nth-child(2) { transform: rotate(1.5deg); }
.cp:nth-child(3) { transform: rotate(-1deg); }
.cp:nth-child(4) { transform: rotate(2deg); }
.cp:hover { transform: rotate(0deg) translateY(-4px); }
.cp .pg {
	height: 220px;
	display: grid;
	place-items: center;
	background: repeating-linear-gradient(#fff 0 27px, #eef3fb 27px 28px);
	border-radius: 4px;
	overflow: hidden;
}
.cp .pg img { max-height: 200px; width: auto; max-width: 100%; object-fit: contain; }
.cp h3 { font-size: 16px; font-weight: 500; margin-top: 12px; line-height: 1.3; font-family: Fredoka, sans-serif; }
.cp .dl {
	display: inline-block;
	margin-top: 10px;
	font-family: Fredoka, sans-serif;
	font-weight: 500;
	font-size: 14px;
	background: var(--mint);
	padding: 5px 14px;
	border-radius: 999px;
	color: #245a4c;
}

/* Holiday book */
.book {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 46px;
	align-items: center;
	background: #ffe9f1;
	border-radius: 36px;
	padding: 44px 50px;
	position: relative;
	border: 3px dashed var(--pink);
}
.book .cover { position: relative; }
.book .cover img {
	border-radius: 14px;
	box-shadow: 10px 12px 0 var(--mint);
	transform: rotate(-3deg);
	width: 100%;
}
.book .new {
	position: absolute;
	top: -16px;
	right: -16px;
	background: #f7c948;
	font-family: Fredoka, sans-serif;
	font-weight: 600;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	transform: rotate(12deg);
	font-size: 18px;
	color: var(--ink);
}
.book h2 { font-size: 44px; line-height: 1.1; }
.book .kick { font-family: Fredoka, sans-serif; color: var(--pinkd); font-weight: 500; font-size: 18px; margin-bottom: 8px; }
.book ul { list-style: none; padding: 0; margin: 18px 0 26px; display: flex; gap: 10px; flex-wrap: wrap; }
.book li { background: #fff; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 15px; }
.book .prev { display: flex; gap: 14px; margin-top: 22px; }
.book .prev img {
	width: 150px;
	border-radius: 10px;
	border: 4px solid #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
}

/* App coming soon */
.app {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	background: #e9f7f2;
	border-radius: 36px;
	padding: 44px 50px;
	border: 3px dashed var(--mintd);
}
.app h2 { font-size: 42px; line-height: 1.1; margin: 12px 0; }
.soon {
	display: inline-block;
	background: var(--lav);
	color: #3d2a66;
	font-family: Fredoka, sans-serif;
	font-weight: 600;
	padding: 6px 16px;
	border-radius: 999px;
}
.app p { color: var(--soft); font-size: 18px; margin: 0; }
.stores { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.store {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 2px solid #cfe7df;
	border-radius: 16px;
	padding: 10px 18px;
	opacity: .9;
	color: var(--ink);
}
.store small { display: block; font-size: 12px; color: var(--soft); line-height: 1; }
.store b { font-family: Fredoka, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.1; }
.store svg { width: 22px; height: 22px; flex-shrink: 0; }

.phone {
	justify-self: center;
	width: 270px;
	height: 470px;
	border-radius: 44px;
	background: #fff;
	border: 10px solid var(--ink);
	position: relative;
	overflow: hidden;
	box-shadow: 12px 12px 0 var(--pink);
}
.phone .scr {
	position: absolute;
	inset: 0;
	background: linear-gradient(#fff4f8, #eaf8f3);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px 16px;
}
.phone .scr img.ic {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	border: 4px solid #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
}
.phone .scr img.wm { width: 200px; margin: 14px 0 10px; }
.phone .scr .row { display: flex; gap: 6px; align-items: flex-end; margin-top: auto; }
.phone .scr .row img { height: 120px; width: auto; max-width: none; }

/* Latest posts / archive cards */
.posts,
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.post-card,
.post {
	background: #fff;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 5px 0 var(--card-shadow);
	border: 2px solid var(--card-border);
	color: var(--ink);
	display: flex;
	flex-direction: column;
}
.post-card:hover,
.post:hover { transform: translateY(-3px); }
.post-card .im,
.post .im {
	aspect-ratio: 16/9;
	overflow: hidden;
	background: #fff3f7;
	position: relative;
}
.post-card .im img,
.post .im img { width: 100%; height: 100%; object-fit: cover; }
.post-card .im .ph,
.post .im .ph {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	background: linear-gradient(160deg, #ffe1ec, #d9f3ea);
	color: var(--pinkd);
}
.post-card .im .ph svg,
.post .im .ph svg { width: 48px; height: 48px; }
.post-card h3,
.post h3 {
	font-size: 18px;
	font-weight: 500;
	padding: 14px 16px 8px;
	line-height: 1.3;
	font-family: Fredoka, sans-serif;
}
.post-card .meta { padding: 0 16px 16px; font-size: 13px; color: var(--soft); }

/* -------------------------------------------------------------------------- */
/* Ad slots (render only when a widget is present)                              */
/* -------------------------------------------------------------------------- */
.dsc-ad-slot {
	margin: 8px auto 28px;
	max-width: var(--wrap);
	padding: 18px 20px;
	background: rgba(255, 255, 255, .7);
	border: 2px dashed var(--lav);
	border-radius: 22px;
	text-align: center;
}
.dsc-ad-slot::before {
	content: "Advertisement";
	display: block;
	font-family: Fredoka, sans-serif;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--soft);
	margin-bottom: 8px;
}
.dsc-ad-slot.dsc-ad-in-post,
.dsc-ad-slot.dsc-ad-end-post {
	margin: 28px auto;
	max-width: 100%;
}
.dsc-ad-slot .widget { margin: 0; }

/* -------------------------------------------------------------------------- */
/* Footer                                                                       */
/* -------------------------------------------------------------------------- */
.site-footer {
	margin-top: 40px;
	background: #fff;
	border-top: 3px dashed var(--pink);
	padding: 40px 0 30px;
	text-align: center;
}
.site-footer .fwm { width: 300px; margin: 0 auto 14px; }
.site-footer nav,
.site-footer .footer-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	font-family: Fredoka, sans-serif;
	font-weight: 500;
	margin: 16px 0;
}
.site-footer nav ul,
.site-footer .footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
}
.site-footer nav a:hover { color: var(--pinkd); }
.site-footer .soc { justify-content: center; margin: 0 auto; }
.site-footer .legal {
	margin-top: 20px;
	background: #e8789f;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	padding: 12px 22px;
	border-radius: 999px;
	display: inline-block;
	max-width: 100%;
	line-height: 1.4;
}
.site-footer .legal a { color: #fff; text-decoration: underline; }

/* -------------------------------------------------------------------------- */
/* Interior pages: titles, content column                                       */
/* -------------------------------------------------------------------------- */
.page-hero {
	padding: 28px 0 10px;
	text-align: center;
}
.page-hero h1 { font-size: 42px; margin-bottom: 8px; }
.page-hero .meta,
.page-hero .archive-desc {
	color: var(--soft);
	max-width: 640px;
	margin: 8px auto 0;
}
.page-hero .meta a { color: var(--pinkd); }

.content-wrap {
	max-width: calc(var(--content-width) + 80px);
	margin: 0 auto;
	padding: 0 28px 48px;
}
.content-wrap.content-wide { max-width: 1100px; }

.entry-card,
.comments-area,
.search-panel {
	background: #fff;
	border: 2.5px dashed var(--pink);
	border-radius: 28px;
	padding: 36px 40px;
	box-shadow: 0 6px 0 #f3e3d3;
}

.entry-header { margin-bottom: 22px; }
.entry-header h1 { font-size: 38px; line-height: 1.15; }
.entry-header .meta { margin-top: 10px; color: var(--soft); font-size: 15px; }
.entry-header .meta a { color: var(--pinkd); }

/* Entry content: typography + existing Classic-editor HTML */
.entry-content {
	font-size: 18px;
	line-height: 1.7;
	color: var(--ink);
	overflow-wrap: break-word;
}
.entry-content > *:first-child { margin-top: 0; }
.entry-content p,
.entry-content ul,
.entry-content ol { margin: 0 0 1.1em; }
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
	margin: 1.4em 0 .5em;
}
.entry-content h2 { font-size: 30px; }
.entry-content h3 { font-size: 24px; }
.entry-content h4 { font-size: 20px; }
.entry-content a {
	color: var(--pinkd);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.entry-content a:hover { color: var(--ink); }
.entry-content img { margin: 0 auto; border-radius: 8px; }
.entry-content figure { margin: 1.2em 0; }
.entry-content blockquote {
	margin: 1.2em 0;
	padding: 8px 0 8px 20px;
	border-left: 4px solid var(--pink);
	color: var(--soft);
	font-style: italic;
}
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content hr {
	border: 0;
	border-top: 2.5px dashed var(--pink);
	margin: 2em 0;
}

/* Tables (weekly recap 2-col YouTube thumbs, coloring-book previews) */
.entry-content table {
	width: 100%;
	max-width: 100%;
	border-collapse: separate;
	margin: 1.2em 0;
}
.entry-content td,
.entry-content th {
	vertical-align: top;
}
.entry-content td img { width: 100%; height: auto; border-radius: 12px; }

/* Embedded video / iframe */
.entry-content iframe,
.entry-content video,
.entry-content .wp-block-embed__wrapper iframe {
	max-width: 100%;
}
.entry-content .wp-block-embed,
.entry-content embed,
.entry-content iframe[src*="youtube"],
.entry-content iframe[src*="youtu"] {
	width: 100%;
	aspect-ratio: 16/9;
	height: auto;
	border: 0;
	border-radius: 16px;
}

/* White / very-light inline text written for the old dark green background.
   Do not target <a> — the Etsy button uses color:#ffffff on orange. */
.entry-content :is(strong, em, span, i, b, h1, h2, h3, h4, h5, h6, p, li, td, th)[style*="color:#fff"],
.entry-content :is(strong, em, span, i, b, h1, h2, h3, h4, h5, h6, p, li, td, th)[style*="color: #fff"],
.entry-content :is(strong, em, span, i, b, h1, h2, h3, h4, h5, h6, p, li, td, th)[style*="color:#FFF"],
.entry-content :is(strong, em, span, i, b, h1, h2, h3, h4, h5, h6, p, li, td, th)[style*="color: #FFF"],
.entry-content :is(strong, em, span, i, b, h1, h2, h3, h4, h5, h6, p, li, td, th)[style*="color:white"],
.entry-content :is(strong, em, span, i, b, h1, h2, h3, h4, h5, h6, p, li, td, th)[style*="color: white"],
.entry-content :is(strong, em, span, i, b, h1, h2, h3, h4, h5, h6, p, li, td, th)[style*="color:#ccffff"],
.entry-content :is(strong, em, span, i, b, h1, h2, h3, h4, h5, h6, p, li, td, th)[style*="color: #ccffff"],
.entry-content :is(strong, em, span, i, b, h1, h2, h3, h4, h5, h6, p, li, td, th)[style*="color:#CCFFFF"],
.entry-content :is(strong, em, span, i, b, h1, h2, h3, h4, h5, h6, p, li, td, th)[style*="color: #CCFFFF"],
.entry-content :is(strong, em, span, i, b, h1, h2, h3, h4, h5, h6, p, li, td, th)[style*="color:#CCFFFF"],
.entry-content strong[style*="#ffffff"],
.entry-content em[style*="#ffffff"],
.entry-content span[style*="#ffffff"],
.entry-content i[style*="#ffffff"],
.entry-content b[style*="#ffffff"] {
	color: var(--ink) !important;
}

/* Yellow body text from the Games landing page (was on a dark background). */
.entry-content :is(strong, em, span, i, b, h1, h2, h3, h4, h5, h6, p)[style*="color:#ffff00"],
.entry-content :is(strong, em, span, i, b, h1, h2, h3, h4, h5, h6, p)[style*="color: #ffff00"],
.entry-content :is(strong, em, span, i, b, h1, h2, h3, h4, h5, h6, p)[style*="color:#FFFF00"],
.entry-content :is(strong, em, span, i, b, h1, h2, h3, h4, h5, h6, p)[style*="color: #FFFF00"] {
	color: #7a5a00 !important;
}

/* -------------------------------------------------------------------------- */
/* Virtue / Kadence gallery markup used on landing pages                        */
/* -------------------------------------------------------------------------- */
.kad-wp-gallery,
.kad-light-wp-gallery {
	display: grid !important;
	gap: 16px;
	margin: 24px 0;
	float: none;
	width: 100%;
}
.kad-wp-gallery.kt-gallery-column-1 { grid-template-columns: 1fr; }
.kad-wp-gallery.kt-gallery-column-2 { grid-template-columns: repeat(2, 1fr); }
.kad-wp-gallery.kt-gallery-column-3 { grid-template-columns: repeat(3, 1fr); }
.kad-wp-gallery.kt-gallery-column-4 { grid-template-columns: repeat(4, 1fr); }
.kad-wp-gallery.kt-gallery-column-5 { grid-template-columns: repeat(5, 1fr); }
.kad-wp-gallery .rowtight,
.entry-content .rowtight { display: contents; }
.kad-wp-gallery .g_item,
.kad-wp-gallery [class*="tcol-"] {
	float: none !important;
	width: auto !important;
	padding: 0 !important;
	margin: 0;
	clear: none !important;
}
.kad-wp-gallery .grid_item,
.kad-wp-gallery .gallery_item { height: auto; }
.kad-wp-gallery img {
	width: 100%;
	height: auto;
	border-radius: 16px;
	border: 2px solid var(--card-border);
	box-shadow: 0 4px 0 var(--card-shadow);
	background: #fff;
}
.kad-wp-gallery a { display: block; text-decoration: none; }

/* Default WP galleries */
.entry-content .gallery {
	display: grid;
	gap: 14px;
	margin: 1.4em 0;
}
.entry-content .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.entry-content .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.entry-content .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.entry-content .gallery-item { margin: 0; }
.entry-content .gallery-icon img { width: 100%; border-radius: 12px; }

/* Alignment helpers from Classic editor / Virtue */
.alignleft { float: left; margin: 0 1.2em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.2em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 14px; color: var(--soft); margin-top: 6px; text-align: center; }
.clear, .clearfix::after { clear: both; content: ""; display: table; }

/* -------------------------------------------------------------------------- */
/* Archive / search / 404                                                       */
/* -------------------------------------------------------------------------- */
.archive-wrap { padding: 10px 0 60px; }

.pagination,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 36px 0 10px;
	font-family: Fredoka, sans-serif;
	font-weight: 500;
}
.pagination a,
.pagination span,
.nav-links a,
.nav-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	background: #fff;
	border: 2px solid var(--card-border);
	border-radius: 999px;
	color: var(--ink);
}
.pagination .current,
.nav-links .current {
	background: var(--pink);
	border-color: var(--ink);
}
.pagination a:hover,
.nav-links a:hover { background: var(--lemon); }

.search-panel { max-width: 560px; margin: 0 auto 28px; }
.search-form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.search-form label { flex: 1 1 180px; }
.search-form .search-field {
	width: 100%;
	border: 2.5px solid var(--ink);
	border-radius: 999px;
	padding: 12px 18px;
	font-family: Nunito, sans-serif;
	font-size: 16px;
	background: #fff;
	color: var(--ink);
}
.search-form .search-submit { flex: 0 0 auto; }

.empty-state {
	text-align: center;
	padding: 40px 20px;
	background: #fff;
	border: 2.5px dashed var(--mint);
	border-radius: 28px;
}
.empty-state h2 { font-size: 32px; margin-bottom: 10px; }
.empty-state p { color: var(--soft); margin-bottom: 20px; }

.not-found { text-align: center; padding: 40px 0 80px; }
.not-found h1 { font-size: 56px; margin-bottom: 10px; }
.not-found p { color: var(--soft); font-size: 18px; margin-bottom: 24px; }

/* Comments */
.comments-area { margin-top: 28px; }
.comments-area .comment-reply-title,
.comments-area .comments-title {
	font-size: 26px;
	margin-bottom: 16px;
}
.comment-list { list-style: none; margin: 0 0 24px; padding: 0; }
.comment-list .children { list-style: none; margin: 16px 0 0 24px; padding: 0; }
.comment-body { padding: 14px 0; border-top: 2px dashed #f6d3e0; }
.comment-meta { font-size: 14px; color: var(--soft); margin-bottom: 8px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	border: 2px solid var(--card-border);
	border-radius: 14px;
	padding: 10px 14px;
	font-family: Nunito, sans-serif;
	font-size: 16px;
	background: #fff;
	color: var(--ink);
}
.comment-form textarea { min-height: 140px; }
.comment-form .form-submit { margin-top: 12px; }
.comment-form .submit { cursor: pointer; }

/* Widgets (general) */
.widget { margin-bottom: 16px; }
.widget-title { font-size: 16px; margin-bottom: 8px; }

/* -------------------------------------------------------------------------- */
/* Responsive                                                                   */
/* -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	nav.main { display: none; flex-basis: 100%; }
	nav.main.is-open {
		display: flex;
		order: 5;
	}
	nav.main.is-open .menu,
	nav.main.is-open ul {
		flex-direction: column;
		align-items: stretch;
		border-top: 2px dashed #f6d3e0;
		padding-top: 10px;
	}
	nav.main.is-open a { display: block; text-align: center; padding: 10px 12px; }
	.burger { display: grid; }
	.cats { grid-template-columns: repeat(4, 1fr); }
	.shorts { grid-template-columns: repeat(3, 1fr); }
	.posts,
	.card-grid { grid-template-columns: repeat(3, 1fr); }
	.kad-wp-gallery.kt-gallery-column-4,
	.kad-wp-gallery.kt-gallery-column-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
	.posts,
	.card-grid { grid-template-columns: repeat(2, 1fr); }
	.vids { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
	body { font-size: 16px; }
	.wrap,
	.content-wrap { padding-left: 16px; padding-right: 16px; }
	.hbar { padding: 8px 12px; gap: 10px; border-radius: 22px; }
	.hbar .brand img.wm { height: 20px; }
	.hbar .brand img.ic { width: 38px; height: 38px; }
	.hbar .soc { display: none; }

	.hero { padding: 16px 0 30px; }
	.hero .grid { grid-template-columns: 1fr; }
	.hero h1 { font-size: 40px; }
	.hero p.lead { font-size: 17px; }
	.stage { height: 230px; order: -1; }
	.s-girl { height: 215px; left: 36%; }
	.s-bear { height: 105px; }
	.s-ice { height: 90px; }
	.s-rain { height: 68px; left: 0; top: 2px; transform: none; }
	.btn { font-size: 17px; padding: 13px 22px; }
	.btns .btn { flex: 1 1 100%; justify-content: center; white-space: nowrap; }

	.home-section,
	section.home-section { padding: 30px 0; }
	.sh { flex-wrap: wrap; gap: 6px; }
	.sh h2 { font-size: 28px; flex-basis: 100%; }
	.sh h2 i { width: 22px; height: 22px; }

	.cats {
		display: flex;
		overflow-x: auto;
		gap: 14px;
		padding: 12px 16px 10px;
		margin: 0 -16px;
		-webkit-overflow-scrolling: touch;
	}
	.cat { flex: 0 0 140px; }

	.vids { grid-template-columns: 1fr 1fr; gap: 14px; }
	.vid { padding: 7px; border-radius: 18px; }
	.vid h3 { font-size: 14px; padding: 8px 4px 2px; }
	.vid .th b { width: 34px; height: 34px; }

	.shorts {
		display: flex;
		overflow-x: auto;
		margin: 0 -16px;
		padding: 4px 16px 10px;
		-webkit-overflow-scrolling: touch;
	}
	.short { flex: 0 0 140px; }

	.color { grid-template-columns: 1fr 1fr; gap: 16px; }
	.cp .pg { height: 150px; }
	.cp .pg img { max-height: 135px; }
	.cp h3 { font-size: 14px; }

	.book { grid-template-columns: 1fr; padding: 28px 20px; gap: 26px; border-radius: 28px; }
	.book .cover { max-width: 250px; margin: 0 auto; }
	.book h2 { font-size: 32px; }
	.book .prev img { width: 46%; }

	.app { grid-template-columns: 1fr; padding: 28px 20px; border-radius: 28px; }
	.app h2 { font-size: 32px; }
	.phone { width: 190px; height: 300px; border-width: 8px; }
	.phone .scr { padding: 18px 12px; }
	.phone .scr img.ic { width: 60px; height: 60px; }
	.phone .scr img.wm { width: 165px; }
	.phone .scr .row img { height: 80px; }

	.posts,
	.card-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
	.post-card h3,
	.post h3 { font-size: 15px; padding: 10px 12px 6px; }
	.post-card .meta { padding: 0 12px 12px; }

	.page-hero h1,
	.entry-header h1 { font-size: 30px; }
	.entry-card,
	.comments-area { padding: 22px 18px; border-radius: 22px; }

	.kad-wp-gallery.kt-gallery-column-2,
	.kad-wp-gallery.kt-gallery-column-3,
	.kad-wp-gallery.kt-gallery-column-4,
	.kad-wp-gallery.kt-gallery-column-5,
	.entry-content .gallery-columns-3,
	.entry-content .gallery-columns-4 { grid-template-columns: repeat(2, 1fr); }

	/* Stack classic 2-col tables on small screens */
	.entry-content table,
	.entry-content tbody,
	.entry-content tr,
	.entry-content td,
	.entry-content th {
		display: block;
		width: 100% !important;
	}
	.entry-content td { padding: 8px 0; }

	.site-footer .fwm { width: 230px; }
	.site-footer .legal { border-radius: 22px; font-size: 14px; }
	.not-found h1 { font-size: 40px; }
}

/* Prevent horizontal scroll on a 390px phone */
@media (max-width: 420px) {
	.wrap,
	.content-wrap { padding-left: 14px; padding-right: 14px; }
	.hero h1 { font-size: 34px; }
	.hero h1 .u { white-space: normal; }
	.book .prev { flex-wrap: wrap; }
	.book .prev img { width: 47%; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.cat, .vid, .cp, .post-card, .post, .btn, .short { transition: none; }
	.cat:hover, .vid:hover, .cp:hover, .post-card:hover, .post:hover, .btn:hover { transform: none; }
}