/*
Theme Name: Hilltop Games
Theme URI: https://hilltop-games.com
Author: Hilltop Games LLC
Description: Custom block theme for Hilltop Games — sunset-lit, family-friendly game studio site with WooCommerce support.
Version: 1.0.4
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: hilltop-games
*/

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
	background:
		radial-gradient(1200px 520px at 50% -120px, rgba(214,112,46,.22), transparent 70%),
		radial-gradient(900px 600px at 85% 10%, rgba(87,60,85,.35), transparent 70%),
		var(--wp--preset--color--night);
	-webkit-font-smoothing: antialiased;
}
::selection { background: var(--wp--preset--color--gold); color: #1A0F08; }
:where(.wp-site-blocks) > main { margin-block-start: 0; }
a { text-underline-offset: .18em; }
img { max-width: 100%; height: auto; }

/* ---------- Header ---------- */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; } }
@media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } }
.hg-header {
	background: rgba(11,13,26,.82);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(243,183,69,.14);
}
.hg-header .wp-block-site-logo img { border-radius: 50%; box-shadow: 0 0 0 2px rgba(243,183,69,.35), 0 0 18px rgba(214,112,46,.35); }
.hg-header .wp-block-site-title a { text-decoration: none; letter-spacing: .01em; }
.hg-header .wp-block-navigation a { text-decoration: none; color: var(--wp--preset--color--cream); opacity: .88; transition: color .15s, opacity .15s; }
.hg-header .wp-block-navigation a:hover,
.hg-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--gold); opacity: 1; }
.hg-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--night-2) !important; color: var(--wp--preset--color--cream) !important; }
.hg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a { font-size: 1.35rem; }
.hg-header .wc-block-mini-cart__button { color: var(--wp--preset--color--cream); }
.hg-shop-btn .wp-block-button__link { padding: .55rem 1.3rem; box-shadow: 0 6px 20px rgba(214,112,46,.35); }
@media (max-width: 600px) {
	.hg-header .wp-block-site-title { font-size: 1.15rem !important; white-space: nowrap; }
	.hg-header .wp-block-site-logo img { width: 38px !important; }
	.wp-block-buttons.hg-shop-btn { display: none !important; }
}

/* ---------- Buttons ---------- */
.wp-element-button, .wp-block-button__link { background: var(--wp--preset--gradient--sunset); color: #1A0F08; }
.wp-block-button__link:hover { background: var(--wp--preset--color--gold); color: #1A0F08; }
.wp-element-button, .wp-block-button__link { transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(214,112,46,.35); }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--cream);
	border: 1.5px solid rgba(243,183,69,.55);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold); box-shadow: none; }

/* ---------- Type helpers ---------- */
.hg-eyebrow {
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 600;
	color: var(--wp--preset--color--gold);
	margin-bottom: .4rem !important;
}
.hg-lead { font-size: 1.2rem; color: var(--wp--preset--color--muted); max-width: 680px; margin-left: auto; margin-right: auto; }
.hg-muted { color: var(--wp--preset--color--muted); }
.hg-center { text-align: center; }
.hg-center .wp-block-buttons { justify-content: center; }
.hg-gold { color: var(--wp--preset--color--gold); }

/* ---------- Sections ---------- */
.hg-section { padding-top: var(--wp--preset--spacing--60) !important; padding-bottom: var(--wp--preset--spacing--60) !important; }
.hg-section-tight { padding-top: var(--wp--preset--spacing--50) !important; padding-bottom: var(--wp--preset--spacing--50) !important; }
.hg-alt { background: linear-gradient(180deg, rgba(20,19,42,.0), rgba(20,19,42,.85) 18%, rgba(20,19,42,.85) 82%, rgba(20,19,42,0)); }
.hg-section > h2.wp-block-heading { margin-top: 0; }

/* ---------- Hero ---------- */
.hg-hero {
	position: relative; text-align: center; overflow: hidden;
	padding-top: clamp(2.5rem, 6vw, 5rem) !important; padding-bottom: clamp(3rem, 7vw, 6rem) !important;
	background:
		radial-gradient(700px 340px at 50% 38%, rgba(243,183,69,.20), transparent 70%),
		radial-gradient(1100px 500px at 50% 110%, rgba(87,60,85,.55), transparent 70%);
}
.hg-hero h1 { margin: .4rem auto .6rem; max-width: 900px; }
.hg-hero .hg-lead { margin-bottom: 1.8rem; }
.hg-hero .wp-block-buttons { justify-content: center; }
.hg-hero-logo { margin: 0 auto !important; max-width: 560px; }
.hg-hero-logo img { filter: drop-shadow(0 18px 36px rgba(0,0,0,.5)); animation: hg-float 7s ease-in-out infinite; }
@keyframes hg-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .hg-hero-logo img { animation: none; } }

/* Game page hero (art + text) */
.hg-game-hero { padding-top: clamp(2rem, 5vw, 4rem) !important; padding-bottom: clamp(2rem, 5vw, 4rem) !important; }
.hg-game-hero .wp-block-columns { align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.hg-game-hero h1 { margin-top: .2rem; }

/* ---------- Cards ---------- */
.hg-cards { gap: 1.5rem !important; }
.hg-cards > .wp-block-column { display: flex; }
.hg-card {
	flex: 1; display: flex; flex-direction: column;
	background: linear-gradient(180deg, var(--wp--preset--color--night-3), var(--wp--preset--color--night-2));
	border: 1px solid rgba(243,183,69,.16); border-radius: 20px; overflow: hidden;
	padding: 0 !important;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hg-card:hover { transform: translateY(-4px); border-color: rgba(243,183,69,.45); box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(243,183,69,.08); }
.hg-card > .wp-block-image { margin: 0 !important; }
.hg-card > .wp-block-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.hg-card-body { padding: 1.3rem 1.4rem 1.5rem !important; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.hg-card-body > * { margin: 0 !important; }
.hg-card-body h3 { font-size: 1.35rem; }
.hg-card-body .wp-block-buttons { margin-top: auto !important; padding-top: .4rem; }
.hg-card-body p:not(.hg-status) { color: var(--wp--preset--color--muted); font-size: .98rem; }

/* Placeholder art for games without key art yet */
.hg-placeholder { aspect-ratio: 16 / 10; display: grid; place-items: center; text-align: center; padding: 1.2rem !important; margin: 0 !important; position: relative; }
.hg-placeholder p { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.6rem; line-height: 1.1; color: #fff; text-shadow: 0 3px 16px rgba(0,0,0,.45); margin: 0; }
.hg-ph-christmas { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.25) 0 2px, transparent 3px) 0 0/38px 38px, radial-gradient(circle at 70% 60%, rgba(255,255,255,.18) 0 1.5px, transparent 2.5px) 0 0/52px 52px, linear-gradient(160deg, #1E5B4A 0%, #12324A 55%, #7A1E2C 100%); }
.hg-ph-pirate { background: radial-gradient(500px 200px at 50% 115%, rgba(243,183,69,.45), transparent 70%), linear-gradient(180deg, #1B2A4A 0%, #23466B 55%, #0F2235 100%); }
.hg-ph-tools { background: linear-gradient(140deg, #573C55 0%, #2A2550 60%, #14132A 100%); }

/* Status badges */
.hg-status {
	display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
	font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: .78rem;
	letter-spacing: .08em; text-transform: uppercase;
	padding: .3rem .75rem; border-radius: 999px;
	background: rgba(243,183,69,.12); color: var(--wp--preset--color--gold); border: 1px solid rgba(243,183,69,.3);
}
.hg-status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.hg-status.is-live { background: rgba(127,176,105,.14); color: #9FD486; border-color: rgba(127,176,105,.4); }
.hg-status.is-live::before { box-shadow: 0 0 0 0 rgba(159,212,134,.6); animation: hg-pulse 2s infinite; }
.hg-status.is-dev { background: rgba(185,174,194,.1); color: var(--wp--preset--color--muted); border-color: rgba(185,174,194,.3); }
@keyframes hg-pulse { 0% { box-shadow: 0 0 0 0 rgba(159,212,134,.55); } 70% { box-shadow: 0 0 0 8px rgba(159,212,134,0); } 100% { box-shadow: 0 0 0 0 rgba(159,212,134,0); } }

/* ---------- Features ---------- */
.hg-features { gap: 1.25rem !important; }
.hg-feature {
	height: 100%;
	background: rgba(30,27,54,.6); border: 1px solid rgba(243,183,69,.12); border-radius: 16px;
	padding: 1.3rem 1.4rem !important;
}
.hg-feature h3 { margin: 0 0 .4rem; font-size: 1.15rem; color: var(--wp--preset--color--gold); }
.hg-feature p { margin: 0; color: var(--wp--preset--color--muted); font-size: .98rem; }

/* ---------- Art / gallery ---------- */
.hg-art img { border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.5); border: 1px solid rgba(243,183,69,.18); }
.hg-gallery { gap: 1rem !important; }
.hg-gallery .wp-block-image { margin: 0; }
.hg-gallery img { border-radius: 14px; aspect-ratio: 16/9; object-fit: cover; width: 100%; border: 1px solid rgba(243,183,69,.12); }

/* ---------- CTA bands ---------- */
.hg-cta {
	position: relative; border-radius: 24px; text-align: center;
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem) !important;
	background:
		radial-gradient(600px 240px at 50% 0%, rgba(243,183,69,.18), transparent 70%),
		linear-gradient(180deg, var(--wp--preset--color--night-3), var(--wp--preset--color--night-2));
	border: 1px solid rgba(243,183,69,.25);
}
.hg-cta h2 { margin-top: 0; }
.hg-cta .wp-block-buttons { justify-content: center; }
.hg-cta-discord { background: radial-gradient(600px 240px at 50% 0%, rgba(88,101,242,.28), transparent 70%), linear-gradient(180deg, var(--wp--preset--color--night-3), var(--wp--preset--color--night-2)); border-color: rgba(88,101,242,.4); }
.hg-discord-icon { margin: 0 auto 1rem !important; width: 84px; }
.hg-discord-icon img { border-radius: 50%; }

/* ---------- Steps / promise ---------- */
.hg-steps { counter-reset: hgstep; gap: 1.25rem !important; }
.hg-step { counter-increment: hgstep; position: relative; padding-top: 3.4rem !important; }
.hg-step::before {
	content: counter(hgstep); position: absolute; top: 1.2rem; left: 1.4rem;
	width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center;
	background: var(--wp--preset--gradient--sunset); color: #1A0F08;
	font-family: var(--wp--preset--font-family--display); font-weight: 700;
}
.hg-promise { border-left: 4px solid var(--wp--preset--color--gold); padding: 1.2rem 1.5rem !important; background: rgba(243,183,69,.07); border-radius: 0 14px 14px 0; }
.hg-promise > * { margin-top: 0; }

/* Lists */
.hg-checks { list-style: none; padding-left: 0 !important; }
.hg-checks li { position: relative; padding-left: 1.8rem; margin-bottom: .55rem; }
.hg-checks li::before { content: "✦"; position: absolute; left: 0; color: var(--wp--preset--color--gold); }

/* FAQ */
.wp-block-details { background: rgba(30,27,54,.6); border: 1px solid rgba(243,183,69,.12); border-radius: 14px; padding: 1rem 1.25rem; }
.wp-block-details + .wp-block-details { margin-top: .75rem; }
.wp-block-details summary { font-family: var(--wp--preset--font-family--display); font-weight: 600; cursor: pointer; }
.wp-block-details[open] summary { color: var(--wp--preset--color--gold); margin-bottom: .5rem; }

/* ---------- Footer ---------- */
.hg-footer { border-top: 1px solid rgba(243,183,69,.14); background: rgba(8,9,18,.7); }
.hg-footer h4 { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--gold); margin: 0 0 .8rem; }
.hg-footer ul { list-style: none; padding: 0; margin: 0; }
.hg-footer li { margin: .35rem 0; }
.hg-footer a { color: var(--wp--preset--color--muted); text-decoration: none; }
.hg-footer a:hover { color: var(--wp--preset--color--gold); }
.hg-footer-logo img { width: 200px; }
.hg-footer-bottom { border-top: 1px solid rgba(255,255,255,.06); color: #8A8198; font-size: .85rem; }

/* ---------- Page title template ---------- */
.hg-page-head { text-align: center; padding-top: var(--wp--preset--spacing--50) !important; padding-bottom: var(--wp--preset--spacing--30) !important; }

/* ---------- Posts ---------- */
.hg-post-card { background: var(--wp--preset--color--night-2); border: 1px solid rgba(243,183,69,.14); border-radius: 18px; overflow: hidden; height: 100%; }
.hg-post-card .wp-block-post-featured-image { margin: 0; }
.hg-post-card .wp-block-post-featured-image img { aspect-ratio: 16/9; object-fit: cover; }
.hg-post-card .hg-card-body h2 { font-size: 1.25rem; }
.hg-post-card .hg-card-body h2 a { color: var(--wp--preset--color--cream); text-decoration: none; }

/* ---------- WooCommerce ---------- */
.woocommerce, .wc-block-components-product-name, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { color: var(--wp--preset--color--cream); }
.wc-block-components-product-price, .woocommerce .price, .wp-block-woocommerce-product-price { color: var(--wp--preset--color--gold) !important; font-family: var(--wp--preset--font-family--display); font-weight: 600; }
.woocommerce ul.products li.product, .wc-block-product, .wp-block-post.product {
	background: var(--wp--preset--color--night-2); border: 1px solid rgba(243,183,69,.14); border-radius: 18px; padding: 0 0 1.2rem; overflow: hidden;
}
.wc-block-product .wc-block-components-product-image, .wp-block-post.product .wc-block-components-product-image { margin-bottom: .8rem; }
.woocommerce a.button, .woocommerce button.button, .wc-block-components-button:not(.is-link), .wp-block-button.wc-block-components-product-button .wp-block-button__link {
	background: var(--wp--preset--gradient--sunset) !important; color: #1A0F08 !important; border-radius: 999px !important; border: 0 !important;
	font-family: var(--wp--preset--font-family--display); font-weight: 600;
}
.woocommerce-message, .woocommerce-info, .wc-block-components-notice-banner { background: var(--wp--preset--color--night-2) !important; color: var(--wp--preset--color--cream) !important; border-color: var(--wp--preset--color--gold) !important; }
.wc-block-components-text-input input, .wc-block-components-select select, .woocommerce input.input-text, .woocommerce textarea, .woocommerce select {
	background: var(--wp--preset--color--night-3) !important; color: var(--wp--preset--color--cream) !important; border-color: rgba(243,183,69,.25) !important;
}
.wc-block-components-text-input label { color: var(--wp--preset--color--muted) !important; }
.woocommerce-tabs, .wc-tabs li a { color: var(--wp--preset--color--cream); }
.wp-block-woocommerce-product-image-gallery img, .woocommerce-product-gallery img { border-radius: 16px; }
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents { background: var(--wp--preset--color--night-2); color: var(--wp--preset--color--cream); }

/* ---------- Mobile ---------- */
@media (max-width: 781px) {
	.hg-cards > .wp-block-column, .hg-features > .wp-block-column { flex-basis: 100% !important; }
	.hg-hero-logo { max-width: 92%; }
	.hg-footer .wp-block-columns { gap: 1.5rem; }
}

/* Wide sections: let direct children use the full wide width */
.alignfull > .alignwide.is-layout-constrained > :where(:not(.alignleft):not(.alignright)) { max-width: none; }
.alignfull > .alignwide > .hg-cta { max-width: 980px; margin-left: auto !important; margin-right: auto !important; }
.alignfull > .alignwide > .hg-lead { max-width: 680px; }
.hg-game-hero .hg-art { text-align: center; }
.hg-game-hero .hg-art img { max-height: 520px; width: auto; object-fit: contain; }
.hg-game-hero .hg-placeholder { border-radius: 18px; border: 1px solid rgba(243,183,69,.18); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.hg-game-hero .hg-placeholder p { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }

.woocommerce-ordering select, .wc-block-sort-select__select, .wc-block-catalog-sorting select { background: var(--wp--preset--color--night-3); color: var(--wp--preset--color--cream); border: 1px solid rgba(243,183,69,.25); border-radius: 10px; padding: .35rem .6rem; }
.woocommerce-breadcrumb, .wc-block-breadcrumbs { color: var(--wp--preset--color--muted); font-size: .9rem; }