/*
Theme Name: Sugarplum Diaries (Block)
Theme URI: https://example.com/sugarplum-diaries
Author: Kayla
Author URI: https://example.com
Description: A candy-colored, Y2K-nostalgic personal blog theme, built as a full site editing (block) theme. Dashed borders, a Comic Sans banner, gradient nav pills, and a sidebar built from Search, Calendar, and Navigation blocks. Inspired by early-2000s Xanga/Blogspot layouts. Fully editable in the Site Editor.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sugarplum-diaries-block
*/

/* Most colors/fonts/spacing are controlled from theme.json + the Site
   Editor. This file only holds the decorative details block settings
   can't express: dashed borders, layered shadows, gradients, and the
   small CSS animation. */

body {
	background-image:
		radial-gradient(circle, #ffffff 1.5px, transparent 1.6px),
		radial-gradient(circle, #ffffff 1px, transparent 1.1px);
	background-size: 42px 42px, 26px 26px;
	background-position: 0 0, 21px 13px;
}

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

/* ===== Banner (site header) ===== */
.banner {
	background: linear-gradient(135deg, var(--wp--preset--color--lavender) 0%, var(--wp--preset--color--pink) 45%, var(--wp--preset--color--sky) 100%) !important;
	box-shadow: 0 3px 10px rgba(90, 72, 112, 0.25);
	position: relative;
	overflow: hidden;
}
.banner::before, .banner::after {
	content: "✦";
	position: absolute;
	color: rgba(255,255,255,0.8);
	font-size: 22px;
	text-shadow: 0 1px 1px rgba(90,72,112,0.2);
}
.banner::before { top: 18px; left: 8%; }
.banner::after { bottom: 14px; right: 10%; font-size: 16px; }

.banner .wp-block-site-title,
.banner .wp-block-site-title a {
	text-shadow: 2px 2px 0 var(--wp--preset--color--pink-deep), 4px 4px 6px rgba(90,72,112,0.35);
	letter-spacing: 1px;
	text-decoration: none;
}
.banner .wp-block-site-title a::before { content: "✿ "; }
.banner .wp-block-site-title a::after { content: " ✿"; }

.banner .wp-block-site-tagline {
	font-family: var(--wp--preset--font-family--trebuchet);
	font-style: italic;
	font-size: 13px;
	color: var(--wp--preset--color--purple-dark);
	background: rgba(255,255,255,0.6);
	display: inline-block;
	padding: 3px 14px;
	border-radius: 12px;
	margin-top: 8px;
}
.banner .wp-block-site-tagline::before { content: "~*~ "; }
.banner .wp-block-site-tagline::after { content: " ~*~"; }

/* ===== Nav ===== */
.nav {
	background: var(--wp--preset--color--purple-dark) !important;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
}
.nav .wp-block-navigation-item a,
.nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--trebuchet);
	font-weight: bold;
	font-size: 11px !important;
	color: #40325a !important;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 6px 16px !important;
	border-radius: 14px;
	background: linear-gradient(to bottom, #ffffff 0%, var(--wp--preset--color--pink) 55%, var(--wp--preset--color--pink-deep) 100%);
	border: 1px solid #ffffff;
	box-shadow: 0 2px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8);
}
.nav .wp-block-navigation-item a:hover {
	background: linear-gradient(to bottom, #ffffff 0%, var(--wp--preset--color--mint) 55%, var(--wp--preset--color--mint-deep) 100%);
	text-decoration: none;
}

/* ===== Post boxes ===== */
.post {
	background: var(--wp--preset--color--cream) !important;

	box-shadow: 0px 3px 0 rgba(201, 169, 236, 0.5), 0 4px 10px rgba(90,72,112,0.12);
}
.post .wp-block-post-title,
.post .wp-block-post-title a {
	font-size: clamp(17px, 4vw, 30px);
	white-space: nowrap;
	margin: 0 0 4px; text-decoration: none;

}
.post .wp-block-post-title a:hover { color: var(--wp--preset--color--pink-deep); }

.post-meta {
	font-size: 10.5px;
	color: #000000;
}
.post-meta .star { color: var(--wp--preset--color--gold); }

.post-footer .wp-block-post-comments-link a,
.comments-pill {
	background: var(--wp--preset--color--lavender-deep) !important;
	border: 1px solid var(--wp--preset--color--lavender-deep);
	border-radius: 10px;
	padding: 2px 10px !important;
	font-weight: bold;
	font-size: 10.5px;
	text-decoration: none !important;
	color: var(--wp--preset--color--pink-deep) !important;
}
.readmore, .wp-block-read-more { font-weight: bold; font-size: 10.5px; }

/* ===== Pagination ===== */
.pagination .page-numbers,
.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers span,
.wp-block-query-pagination-previous-link,
.wp-block-query-pagination-next-link {
	display: inline-block;
	margin: 0 3px;
	padding: 4px 10px;
	border-radius: 8px;
	background: var(--wp--preset--color--lavender);
	border: 1px solid var(--wp--preset--color--lavender-deep);
	text-decoration: none;
	color: var(--wp--preset--color--purple-dark);
	font-family: var(--wp--preset--font-family--trebuchet);
	font-weight: bold;
	font-size: 11px;
}
.wp-block-query-pagination-numbers .current {
	background: var(--wp--preset--color--pink-deep);
	color: #fff;
	border-color: var(--wp--preset--color--pink-deep);
}

/* ===== Sidebar widgets ===== */
.side-col .widget {
	background: var(--wp--preset--color--cream) !important;
	box-shadow: 2px 2px 0 rgba(201,169,236,0.4), 0 3px 8px rgba(90,72,112,0.1);
	overflow: hidden;
	border: 1px solid #e9def7 !important;
}

.side-col .overflow {
	background: var(--wp--preset--color--cream) !important;
	box-shadow: 2px 2px 0 rgba(201,169,236,0.4), 0 3px 8px rgba(90,72,112,0.1);
	overflow: visible;
	border: 1px solid #e9def7 !important;
}

.side-col .widget-title {
	font-family: var(--wp--preset--font-family--trebuchet);
	font-weight: bold;
	font-size: 12.5px !important;
	color: #ffffff !important;
	background: linear-gradient(to right, var(--wp--preset--color--pink-deep), var(--wp--preset--color--lavender-deep)) !important;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.15);
}
.side-col .widget.mint .widget-title { background: linear-gradient(to right, var(--wp--preset--color--mint-deep), var(--wp--preset--color--sky-deep)) !important; }
.side-col .widget.gold .widget-title { background: linear-gradient(to right, #ffcf6b, var(--wp--preset--color--pink-deep)) !important; }

.side-col .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--lavender-deep) !important;
	font-family: Verdana, sans-serif;
	font-size: 11px !important;
}
.side-col .wp-block-search__button {
	border: 1px solid var(--wp--preset--color--pink-deep) !important;
	background: linear-gradient(to bottom, #fff, var(--wp--preset--color--pink)) !important;
	font-weight: bold;
	font-size: 11px !important;
	color: var(--wp--preset--color--purple-dark) !important;
}

.about-photo {
	width: 54px;
	height: 54px;
	background: linear-gradient(135deg, var(--wp--preset--color--pink), var(--wp--preset--color--sky));
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--wp--preset--color--lavender-deep), 2px 2px 4px rgba(0,0,0,0.2);
	border-radius: 8px;
	transform: rotate(-4deg);
	float: left;
	margin: 0 10px 6px 0;
	overflow: hidden;
}

.link-list { list-style: none !important; }
.link-list li {
	padding: 4px 0 4px 20px;
	border-bottom: 1px dotted #e2d5f4;
	list-style: none;
}
.link-list li:last-child { border-bottom: none; }
.link-list li::before {
	content: "♥";
	color: var(--wp--preset--color--pink-deep);
	margin-right: 6px;
	margin-left: -20px;
	width: 14px;
	display: inline-block;
}

.badge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.badge {
	height: 34px;
	border-radius: 3px;
	border: 1px solid rgba(0,0,0,0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px !important;
	font-weight: bold;
	color: #fff !important;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
	text-align: center;
	line-height: 1.1;
	margin: 0 !important;
}
.badge.b1 { background: linear-gradient(to bottom, var(--wp--preset--color--pink), var(--wp--preset--color--pink-deep)); }
.badge.b2 { background: linear-gradient(to bottom, var(--wp--preset--color--mint), var(--wp--preset--color--mint-deep)); }
.badge.b3 { background: linear-gradient(to bottom, var(--wp--preset--color--sky), var(--wp--preset--color--sky-deep)); }
.badge.b4 { background: linear-gradient(to bottom, var(--wp--preset--color--lavender), var(--wp--preset--color--lavender-deep)); }

/* Calendar block */
.side-col .wp-block-calendar table { width: 100%; border-collapse: collapse; font-size: 10px; text-align: center; }
.side-col .wp-block-calendar th { background: var(--wp--preset--color--lavender); padding: 3px 0; color: var(--wp--preset--color--purple-dark); }
.side-col .wp-block-calendar td { padding: 4px 0; color: #8a7aa1; }
.side-col .wp-block-calendar #today { background: var(--wp--preset--color--pink-deep); color: #fff; border-radius: 50%; font-weight: bold; }
.side-col .wp-block-calendar caption { font-size: 10.5px; color: var(--wp--preset--color--purple-dark); font-weight: bold; }

.counter {
	font-family: "Courier New", monospace;
	background: #2b2140;
	color: var(--wp--preset--color--mint-deep);
	letter-spacing: 3px;
	padding: 6px 10px;
	border-radius: 4px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.counter-label { text-align: center; font-size: 9.5px !important; color: #8a7aa1; }

.now-playing { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.now-playing .eq { display: flex; gap: 2px; align-items: flex-end; height: 16px; flex-shrink: 0; }
.now-playing .eq span { width: 3px; background: var(--wp--preset--color--pink-deep); animation: sugarplum-bounce 0.9s infinite ease-in-out alternate; display: block; }
.now-playing .eq span:nth-child(1) { height: 6px; animation-delay: 0s; }
.now-playing .eq span:nth-child(2) { height: 14px; animation-delay: 0.15s; }
.now-playing .eq span:nth-child(3) { height: 9px; animation-delay: 0.3s; }
.now-playing .eq span:nth-child(4) { height: 16px; animation-delay: 0.45s; }
@keyframes sugarplum-bounce { from { transform: scaleY(0.4); } to { transform: scaleY(1); } }

/* ===== Comments ===== */
.wp-block-comments .comments-title,
.wp-block-comments .wp-block-comment-template { font-family: var(--wp--preset--font-family--trebuchet); }
.wp-block-comments { background: var(--wp--preset--color--cream); border-radius: 10px; padding: 16px 20px; }
.wp-block-comment-template li { border-bottom: 1px dotted #d9cdec; padding: 10px 0; list-style: none; }
.wp-block-comments-pagination a { font-size: 10.5px; }
.wp-block-post-comments-form input[type=text],
.wp-block-post-comments-form input[type=email],
.wp-block-post-comments-form input[type=url],
.wp-block-post-comments-form textarea {
	border: 1px solid var(--wp--preset--color--lavender-deep) !important;
	border-radius: 6px !important;
	font-family: Verdana, sans-serif;
	font-size: 11px !important;
}
.wp-block-post-comments-form button, .wp-block-post-comments-form input[type=submit] {
	border: 1px solid var(--wp--preset--color--pink-deep) !important;
	background: linear-gradient(to bottom, #fff, var(--wp--preset--color--lavender-deep)) !important;
	border-radius: 6px !important;
	font-weight: bold;
	color: var(--wp--preset--color--purple-dark) !important;
}

/* ===== Footer ===== */
.site-footer {
	text-align: center;
	font-size: 10.5px;
	color: #8a7aa1;
}
.footer-badge-row span {
	background: var(--wp--preset--color--lavender);
	border: 1px solid var(--wp--preset--color--lavender-deep);
	border-radius: 4px;
	padding: 2px 8px;
	font-size: 9.5px;
	display: inline-block;
}

@media (max-width: 700px) {
	.wrap-columns { flex-direction: column !important; }
	.wp-block-site-title, .wp-block-site-title a { font-size: 32px !important; }
}