/*
Theme Name: Starlight Fun
Theme URI: https://starlightfun.com
Author: Starlight Fun
Description: A deep-navy, starfield block theme for the Starlight Fun shipyard, arcade and lab: a featured product carousel, PayPal/Venmo-ready product slots, and page patterns for Games, Apps, About and FAQ.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.9
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: starlight-fun
*/

/* ---------- Starfield background ---------- */
body {
	background-color: #0A1633;
	background-image:
		radial-gradient(1px 1px at 20px 30px, #ffffffcc 50%, transparent 51%),
		radial-gradient(1px 1px at 140px 90px, #ffffff88 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 90px 170px, #ffffffdd 50%, transparent 51%),
		radial-gradient(1px 1px at 210px 220px, #ffffff77 50%, transparent 51%),
		radial-gradient(1px 1px at 60px 250px, #ffffff99 50%, transparent 51%),
		radial-gradient(1px 1px at 37px 113px, #ffffff66 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 173px 31px, #FFE7A8cc 50%, transparent 51%),
		radial-gradient(1px 1px at 250px 140px, #ffffff88 50%, transparent 51%);
	background-size: 280px 280px;
}

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

:where(a, button):focus-visible { outline: 3px solid #5ED3C3; outline-offset: 2px; }

/* ---------- Announcement bar ---------- */
.sf-announce {
	background: #FFC24B; color: #1A1300; text-align: center;
	font-size: 15px; font-weight: 500; padding: 10px 24px; margin: 0;
}
.sf-announce p { margin: 0; }
.sf-announce a { color: #1A1300; font-weight: 700; text-decoration: underline; }
.sf-announce a:hover { color: #1A1300; }

/* ---------- Header ---------- */
.sf-header { border-bottom: 1px solid #24366A; }
.sf-header-inner {
	max-width: 1200px; margin: 0 auto; padding: 16px 24px;
	display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between;
}
.sf-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #EEF1FA; }
.sf-logo:hover { color: #EEF1FA; }
.sf-logo svg { flex: 0 0 auto; }
.sf-logo-text { display: flex; flex-direction: column; gap: 2px; }
.sf-word {
	font-family: "Chakra Petch", system-ui, sans-serif; font-weight: 700; font-style: italic;
	letter-spacing: 0.03em; line-height: 1; font-size: 26px; color: #EEF1FA;
}
.sf-word span { color: #FFC24B; }
.sf-tagline { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; color: #5ED3C3; }
.sf-nav a { color: #EEF1FA; text-decoration: none; font-weight: 500; padding: 10px 12px; }
.sf-nav a:hover { color: #FFC24B; }
.sf-nav .wp-block-navigation__responsive-container.is-menu-open { background: #0A1633; color: #EEF1FA; }

/* ---------- Shared bits ---------- */
.sf-eyebrow {
	font-family: "Chakra Petch", system-ui, sans-serif; font-size: 14px; font-weight: 600;
	letter-spacing: 0.16em; color: #5ED3C3; margin-bottom: 0;
}
.sf-section { padding-top: 56px; padding-bottom: 56px; }
.sf-muted, .sf-meta { color: #A7B0CC; }
.sf-card {
	background: #13224A; border: 1px solid #24366A; border-radius: 20px; padding: 28px;
	height: 100%; box-sizing: border-box;
}
.sf-card > * + * { margin-top: 1rem; }
.sf-card-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: #A7B0CC; margin: 0; }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; color: #FFC24B; border: 1px solid #FFC24B;
}

/* ---------- Product carousel ---------- */
.sf-carousel {
	background: #13224A; border: 1px solid #24366A; border-radius: 20px; padding: 24px;
	position: relative;
}
.sf-slide + .sf-slide { margin-top: 40px; padding-top: 40px; border-top: 1px solid #24366A; }
.sf-carousel.is-enhanced .sf-slide + .sf-slide { margin-top: 0; padding-top: 0; border-top: 0; }
.sf-carousel.is-enhanced .sf-slide[hidden] { display: none; }
.sf-slide .wp-block-columns { gap: 32px; align-items: center; margin-bottom: 0; }
.sf-photo { margin: 0; }
.sf-photo img {
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; display: block;
	background: #0D1A3C;
}
.sf-badge {
	display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
	color: #0A1633; background: #5ED3C3; padding: 6px 10px; border-radius: 6px; margin: 0;
}
.sf-name { margin-top: 0.75rem; }
.sf-slide p.sf-desc { font-size: 18px; color: #D3D8EA; }
.sf-meta { font-size: 14px; }
.sf-price {
	font-family: "Chakra Petch", system-ui, sans-serif; font-size: 34px; font-weight: 700;
	color: #FFC24B; margin: 0.5rem 0;
}
.sf-paypal { max-width: 380px; }
.sf-paypal-placeholder {
	border: 2px dashed #3D5291; border-radius: 10px; padding: 14px 16px;
	color: #A7B0CC; font-size: 14px;
}
.sf-controls { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.sf-thumbs { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 12px; }
.sf-arrow {
	flex: 0 0 48px; width: 48px; height: 48px; border-radius: 999px; cursor: pointer;
	border: 1px solid #3D5291; background: #0A1633; color: #EEF1FA;
	display: flex; align-items: center; justify-content: center;
}
.sf-arrow:hover { border-color: #FFC24B; color: #FFC24B; }
.sf-thumb {
	display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
	background: #0D1A3C; color: #EEF1FA; border: 2px solid #24366A; border-radius: 14px;
	padding: 10px; font: inherit; min-width: 0; min-height: 48px;
}
.sf-thumb[aria-current="true"] { border-color: #FFC24B; }
.sf-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: 0 0 56px; }
.sf-thumb-text { display: flex; flex-direction: column; min-width: 0; }
.sf-thumb-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-thumb-price { color: #FFC24B; font-weight: 700; font-size: 14px; }
@media (max-width: 640px) {
	.sf-carousel { padding: 16px; }
	.sf-thumb { justify-content: center; }
	.sf-thumb-text { display: none; }
	.sf-thumb img { width: 48px; height: 48px; flex-basis: 48px; }
}

/* ---------- Trust strip ---------- */
.sf-trust {
	background: #0D1A3CCC; border-top: 1px solid #24366A; border-bottom: 1px solid #24366A;
	padding-top: 28px; padding-bottom: 28px;
}
.sf-trust h3 { font-family: "DM Sans", system-ui, sans-serif; font-size: 17px; margin: 0 0 4px; }
.sf-trust p { color: #A7B0CC; font-size: 15px; margin: 0; }

/* ---------- FAQ ---------- */
.wp-block-details {
	background: #13224A; border: 1px solid #24366A; border-radius: 14px; padding: 16px 20px;
}
.wp-block-details summary { font-weight: 700; cursor: pointer; }
.wp-block-details[open] summary { margin-bottom: 8px; }

/* ---------- Embeds (Scratch games) ---------- */
.sf-embed { position: relative; width: 100%; max-width: 640px; aspect-ratio: 485 / 402; }
.sf-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }

/* ---------- Footer ---------- */
.sf-footer { background: #071030E6; border-top: 1px solid #24366A; margin-top: 0; }
.sf-footer-inner {
	max-width: 1200px; margin: 0 auto; padding: 40px 24px 16px;
	display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between;
}
.sf-footer-inner p { color: #A7B0CC; font-size: 15px; max-width: 380px; margin: 8px 0 0; }
.sf-footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; }
.sf-footer nav a { padding: 10px 0; }
.sf-legal { max-width: 1200px; margin: 0 auto; padding: 0 24px 32px; color: #A7B0CC; font-size: 13px; }
.sf-legal p { margin: 0; }