/*
Theme Name: Pixel Moons
Theme URI: https://example.com/pixel-moons
Author: Pixel Moons
Author URI: https://example.com
Description: A dark celestial fantasy WordPress theme created for Pixel Moons. Mystical, feminine, cinematic, WooCommerce-ready, and responsive.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: pixel-moons
Tags: dark, e-commerce, blog, custom-logo, custom-menu, featured-images, full-width-template, responsive-layout
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root{
  --pm-bg:#07040c;
  --pm-bg-soft:#100817;
  --pm-panel:#140b1d;
  --pm-purple:#7e3bb3;
  --pm-purple-2:#b360ff;
  --pm-gold:#e7bf72;
  --pm-gold-soft:#f7dfaa;
  --pm-ivory:#f5ede5;
  --pm-muted:#b9aabd;
  --pm-border:rgba(231,191,114,.34);
  --pm-shadow:0 18px 60px rgba(0,0,0,.45);
  --pm-radius:18px;
  --pm-max:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 75% 8%, rgba(111,46,157,.2), transparent 32%),
    radial-gradient(circle at 10% 35%, rgba(87,23,125,.16), transparent 28%),
    linear-gradient(180deg, #09050d 0%, #060309 100%);
  color:var(--pm-ivory);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.65;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}

.pm-wrap{width:min(calc(100% - 32px), var(--pm-max));margin-inline:auto}
.pm-section{padding:88px 0}
.pm-eyebrow{
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.74rem;
  color:var(--pm-gold);
}
.pm-title{
  font-family: Georgia, "Times New Roman", serif;
  font-weight:500;
  letter-spacing:.05em;
  line-height:1.05;
  margin:.35rem 0 1rem;
}
.pm-title-xl{font-size:clamp(3rem,8vw,7.2rem)}
.pm-title-lg{font-size:clamp(2.2rem,5vw,4.6rem)}
.pm-muted{color:var(--pm-muted)}

.pm-button,
.wp-element-button,
button,
input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  border:1px solid var(--pm-gold);
  color:var(--pm-gold-soft);
  background:rgba(231,191,114,.06);
  padding:.9rem 1.25rem;
  min-height:48px;
  border-radius:999px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.78rem;
  transition:.25s ease;
}
.pm-button:hover,
.wp-element-button:hover,
button:hover,
input[type="submit"]:hover{
  background:var(--pm-gold);
  color:#150b1d;
  transform:translateY(-2px);
  box-shadow:0 10px 34px rgba(231,191,114,.2);
}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(18px);
  background:rgba(6,3,9,.72);
  border-bottom:1px solid rgba(231,191,114,.14);
}
.admin-bar .site-header{top:32px}
.header-inner{
  min-height:88px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}
.site-branding img{width:118px;display:block}
.site-title{
  font-family:Georgia, "Times New Roman", serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--pm-gold-soft);
}
.main-nav ul,
.header-actions,
.footer-nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap:24px;
  margin:0;
  padding:0;
}
.main-nav a,.footer-nav a{
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#e7dbe6;
}
.main-nav a:hover,.footer-nav a:hover{color:var(--pm-gold)}
.header-actions{justify-content:flex-end;font-size:.9rem}
.mobile-menu-toggle{display:none}

.hero{
  position:relative;
  min-height:760px;
  display:grid;
  align-items:center;
  overflow:hidden;
  border-bottom:1px solid rgba(231,191,114,.15);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(6,3,10,.8), rgba(6,3,10,.3) 45%, rgba(6,3,10,.72)),
    radial-gradient(circle at 70% 35%, rgba(173,70,255,.28), transparent 22%),
    radial-gradient(circle at 69% 34%, rgba(255,204,113,.18), transparent 9%),
    linear-gradient(180deg, rgba(34,11,48,.85), rgba(5,2,9,.98));
}
.hero::after{
  content:"";
  position:absolute;
  width:44vw;height:44vw;
  min-width:360px;min-height:360px;
  border:2px solid rgba(245,216,153,.55);
  border-radius:50%;
  right:4vw;
  top:10%;
  box-shadow:
    0 0 0 18px rgba(133,63,189,.08),
    0 0 90px rgba(173,70,255,.2),
    inset 0 0 80px rgba(255,213,125,.08);
  opacity:.75;
}
.hero .pm-wrap{position:relative;z-index:2}
.hero-content{max-width:720px;padding:96px 0}
.hero-logo{width:min(260px,52vw);margin:0 0 22px}
.hero-copy{font-size:clamp(1rem,1.5vw,1.28rem);max-width:650px;color:#d8cadb}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

.world-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.world-card,
.product-card,
.post-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--pm-border);
  background:linear-gradient(180deg,rgba(28,14,39,.9),rgba(11,6,17,.95));
  border-radius:var(--pm-radius);
  box-shadow:var(--pm-shadow);
}
.world-card{
  min-height:390px;
  padding:28px;
  display:flex;
  align-items:flex-end;
}
.world-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 60% 25%, rgba(179,96,255,.28), transparent 28%),
    linear-gradient(180deg, rgba(122,54,165,.13), rgba(4,2,7,.9));
}
.world-card::after{
  content:"☾";
  position:absolute;
  right:22px;
  top:16px;
  color:var(--pm-gold);
  font-size:3.2rem;
  opacity:.8;
}
.world-card > *{position:relative;z-index:2}
.world-card h3{font-family:Georgia,serif;font-size:1.65rem;margin:.25rem 0}
.world-card p{margin:0;color:var(--pm-muted)}

.feature-split{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:34px;
  align-items:stretch;
}
.feature-copy{
  border:1px solid var(--pm-border);
  border-radius:var(--pm-radius);
  padding:48px;
  background:linear-gradient(180deg,#120919,#09050d);
}
.feature-art{
  min-height:520px;
  border:1px solid var(--pm-border);
  border-radius:var(--pm-radius);
  background:
    radial-gradient(circle at 70% 28%, rgba(190,100,255,.34), transparent 25%),
    radial-gradient(circle at 58% 62%, rgba(231,191,114,.12), transparent 18%),
    linear-gradient(135deg,#1b0c26 0%,#0b0710 58%,#2b113d 100%);
  position:relative;
  overflow:hidden;
}
.feature-art::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:70%;
  height:42%;
  border:1px solid rgba(231,191,114,.4);
  border-radius:45% 45% 30% 30% / 38% 38% 24% 24%;
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}
.feature-art::after{
  content:"✦  ☾  ✦";
  position:absolute;
  inset:auto 0 56px;
  text-align:center;
  color:var(--pm-gold);
  letter-spacing:.5em;
  font-size:2rem;
}

.pm-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product-card{padding:12px}
.product-card .thumb{
  aspect-ratio:4/3;
  border-radius:12px;
  background:
    radial-gradient(circle at 70% 30%, rgba(173,70,255,.34), transparent 22%),
    linear-gradient(135deg,#34164c,#100817);
}
.product-card h3{font-family:Georgia,serif;font-weight:500;margin:14px 6px 4px}
.product-card p{margin:0 6px 10px;color:var(--pm-muted);font-size:.9rem}

.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post-card .post-art{
  aspect-ratio:16/9;
  background:
    linear-gradient(135deg,rgba(99,40,139,.8),rgba(6,3,10,.2)),
    radial-gradient(circle at 70% 40%,rgba(231,191,114,.3),transparent 20%);
}
.post-card .post-body{padding:22px}
.post-card h3{font-family:Georgia,serif;font-size:1.35rem;margin:.2rem 0 .45rem}

.site-footer{
  border-top:1px solid rgba(231,191,114,.2);
  background:#050308;
  padding:64px 0 30px;
}
.footer-top{
  display:grid;
  grid-template-columns:1fr auto;
  gap:30px;
  align-items:end;
}
.footer-brand img{width:150px}
.footer-note{
  font-family:Georgia,serif;
  color:var(--pm-gold-soft);
  font-size:1.1rem;
  font-style:italic;
}
.footer-bottom{
  margin-top:42px;
  padding-top:22px;
  border-top:1px solid rgba(231,191,114,.12);
  color:#9f90a1;
  font-size:.78rem;
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.entry-content,
.page-content,
.single-content{
  width:min(calc(100% - 32px), 920px);
  margin:0 auto;
  padding:72px 0;
}
.entry-content h1,.entry-content h2,.entry-content h3,
.page-content h1,.page-content h2,.page-content h3{
  font-family:Georgia,serif;
  color:var(--pm-gold-soft);
}
.entry-content a,.page-content a{color:var(--pm-gold)}

.woocommerce ul.products li.product,
.woocommerce div.product{
  color:var(--pm-ivory);
}
.woocommerce ul.products li.product{
  border:1px solid var(--pm-border);
  border-radius:var(--pm-radius);
  padding:14px;
  background:#100817;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color:var(--pm-gold);
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background:transparent;
  color:var(--pm-gold-soft);
  border:1px solid var(--pm-gold);
  border-radius:999px;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  background:var(--pm-gold);
  color:#130919;
}

@media (max-width: 980px){
  .header-inner{grid-template-columns:auto 1fr auto}
  .main-nav{display:none}
  .mobile-menu-toggle{display:inline-flex}
  .hero{min-height:650px}
  .hero::after{right:-12vw;top:16%}
  .world-grid,.pm-grid-4{grid-template-columns:repeat(2,1fr)}
  .feature-split{grid-template-columns:1fr}
  .journal-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 680px){
  .pm-section{padding:62px 0}
  .site-branding img{width:92px}
  .header-actions a:not(.cart-link){display:none}
  .hero{min-height:620px}
  .hero::after{width:92vw;height:92vw;right:-38vw;top:10%}
  .hero-content{padding:72px 0}
  .world-grid,.pm-grid-4,.journal-grid{grid-template-columns:1fr}
  .world-card{min-height:300px}
  .feature-copy{padding:30px}
  .footer-top{grid-template-columns:1fr}
  .footer-nav ul{flex-wrap:wrap}
}