/*
Theme Name:  RUEZALS
Theme URI:   https://ruezals.com
Description: RUEZALS child theme — built from Ani's HTML exports. Dark fantasy aesthetic for the REALM universe.
Author:      Ruezal Dhragoon
Template:    twentytwentyfive
Version:     1.0.0
Tags:        dark, fantasy, full-width
Text Domain: ruezals
*/

/* ============================================================
   DESIGN TOKENS — extracted from components.html
   ============================================================ */
:root {
  --color-void:       #0B0B0F;
  --color-deep:       #111118;
  --color-surface:    #1A1A24;
  --color-card:       #20202E;
  --color-gold:       #C8962A;
  --color-gold-light: #E8C56A;
  --color-teal:       #29C4C0;
  --color-teal-dim:   #1A8F8C;
  --color-text:       #E8E0D0;
  --color-muted:      #A09080;
  --color-white:      #FFFFFF;
  --font-heading: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Raleway', 'Source Sans Pro', sans-serif;
  --section-pad:  120px 0;
  --container:    1200px;
  --gutter:       clamp(1.5rem, 4vw, 3rem);
  --glow-gold:    0 0 20px rgba(200, 150, 42, 0.45);
  --glow-teal:    0 0 20px rgba(41, 196, 192, 0.35);
}

/* ============================================================
   GLOBAL BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--color-void);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-gold); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--color-gold-light); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.03em;
}

.glowing-headline {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 4rem);
  color: var(--color-white);
  text-shadow: var(--glow-gold);
  margin-bottom: 1.25rem;
}
.glowing-headline.gold {
  color: var(--color-gold-light);
  text-shadow: var(--glow-gold), 0 0 40px rgba(200, 150, 42, 0.25);
}

.subheadline {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: var(--color-text);
  opacity: 0.88;
  max-width: 680px;
  margin-bottom: 1rem;
}

.tagline {
  font-family: var(--font-heading);
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  color: var(--color-teal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.light-headline {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  color: var(--color-void);
  margin-bottom: 1.25rem;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--color-gold-light);
  text-align: center;
  margin-bottom: 3rem;
}

.divider-diamond {
  display: flex; align-items: center; gap: 1rem;
  margin: 2.5rem auto; width: fit-content;
}
.divider-diamond::before, .divider-diamond::after {
  content: ''; width: 60px; height: 1px;
  background: var(--color-teal); opacity: 0.5;
}
.divider-diamond span {
  width: 8px; height: 8px; background: var(--color-teal);
  transform: rotate(45deg); display: block;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
/* Base header — shared layout for ALL nav variants */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1.2rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  backdrop-filter: blur(12px);
}

/* Dark variant */
.site-header.dark-nav {
  background: rgba(11, 11, 15, 0.85);
  border-bottom: 1px solid rgba(200, 150, 42, 0.15);
}

/* Light variant */
.site-header.light-nav {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.site-header .site-logo img { height: 48px; width: auto; }
.main-nav { display: flex; gap: 2rem; list-style: none; }
.main-nav a, .main-nav span {
  font-family: var(--font-heading); font-size: 0.85rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text); transition: color 0.3s ease;
}
.main-nav a:hover { color: var(--color-gold-light); }
.site-header.light-nav .main-nav a { color: var(--color-void); }
.site-header.light-nav .main-nav a:hover { color: var(--color-gold); }

/* ============================================================
   HERO
   ============================================================ */
.hero.full-bleed {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  background-size: cover; background-position: center;
  background-repeat: no-repeat; overflow: hidden;
}
.hero.dark-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(11,11,15,0.72) 0%, rgba(11,11,15,0.38) 60%, rgba(11,11,15,0.65) 100%);
}
.hero.light-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0.55) 100%);
}
.hero-content {
  position: relative; z-index: 2;
  padding: calc(var(--gutter) * 2) var(--gutter);
  max-width: 780px;
}
/* Page-specific hero backgrounds */
.hero.aeloria-intimate {
  background-image: url('assets/images/hero-aelorias-fire-intimate.jpg');
  background-position: center top;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.dark-section { background-color: var(--color-deep); padding: var(--section-pad); }
.dark-section.warm { background: linear-gradient(180deg, var(--color-deep) 0%, #1C1510 100%); }

/* ============================================================
   CARDS
   ============================================================ */
.card-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.realm-card {
  background: var(--color-card);
  border: 1px solid rgba(200,150,42,0.2);
  border-radius: 6px; padding: 2.5rem 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.realm-card:hover { transform: translateY(-4px); box-shadow: var(--glow-gold); }
.realm-card h3 {
  color: var(--color-gold-light); font-family: var(--font-heading);
  font-size: 1.1rem; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 1rem;
}
.realm-card p { color: var(--color-muted); font-size: 0.95rem; }

/* ============================================================
   PULL QUOTE — from components.html
   ============================================================ */
.realm-pullquote.teal {
  border-left: 4px solid #29C4C0;
  padding-left: 1.5rem;
  color: #C8962A;
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.5;
  max-width: 720px;
  margin: 3rem auto;
}
.realm-pullquote.teal footer {
  font-size: 0.9rem; color: var(--color-teal);
  font-style: normal; margin-top: 0.75rem; letter-spacing: 0.06em;
}
.realm-pullquote.gold {
  border-left: 4px solid var(--color-gold);
  color: var(--color-gold-light);
  text-shadow: var(--glow-gold);
}

/* ============================================================
   CTA BUTTON — from components.html
   ============================================================ */
.realm-cta.gold {
  background: linear-gradient(90deg, #C8962A, #E8C56A);
  color: #0B0B0F;
  padding: 14px 32px;
  border: none; border-radius: 4px;
  font-weight: 600; font-size: 1.1rem;
  cursor: pointer; transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(200, 150, 42, 0.4);
  display: inline-block; text-decoration: none;
  font-family: var(--font-heading); letter-spacing: 0.06em;
}
.realm-cta.gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(200, 150, 42, 0.5);
  color: #0B0B0F;
}
.realm-cta.teal {
  background: linear-gradient(90deg, var(--color-teal-dim), var(--color-teal));
  color: var(--color-void); padding: 12px 28px;
  border: none; border-radius: 4px; font-weight: 600; cursor: pointer;
  transition: all 0.3s ease;
}

/* ============================================================
   CLOSING VOICE — sacred gold section
   ============================================================ */
.closing-voice {
  background: linear-gradient(135deg, #0B0B0F 0%, #1A1208 50%, #0B0B0F 100%);
  padding: 100px var(--gutter); text-align: center;
  border-top: 1px solid rgba(200,150,42,0.3);
  border-bottom: 1px solid rgba(200,150,42,0.3);
}
.closing-voice p {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  color: var(--color-gold-light);
  text-shadow: var(--glow-gold);
  margin-bottom: 1rem; letter-spacing: 0.04em;
}
.closing-voice .cta-group {
  display: flex; gap: 1.5rem; justify-content: center;
  flex-wrap: wrap; margin-top: 3rem;
}

/* ============================================================
   ETHIER — immersive full-bleed
   ============================================================ */
.ethier.full-bleed.immersive {
  min-height: 80vh; display: flex;
  align-items: center; justify-content: center;
  text-align: center; background-attachment: fixed;
  background-size: cover; background-position: center;
  position: relative;
}
.ethier::before { content: ''; position: absolute; inset: 0; background: rgba(11,11,15,0.6); }
.ethier > * { position: relative; z-index: 2; }

/* ============================================================
   PRODUCT SHOWCASE — shop/etsy light variant
   ============================================================ */
.product-showcase.light-room { background: #F7F3EE; padding: var(--section-pad); }
.product-showcase .product-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.product-card {
  background: #FFFFFF; border-radius: 8px; overflow: hidden;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(200,150,42,0.2); }
.product-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product-card-body { padding: 1.25rem; }
.product-card h3 { font-family: var(--font-heading); font-size: 1rem; color: var(--color-void); margin-bottom: 0.5rem; }
.product-card .price { color: var(--color-gold); font-weight: 600; font-size: 1.05rem; }

/* ============================================================
   DOMAINS LIST
   ============================================================ */
.domains-list { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: center; list-style: none; padding: 0; }
.domains-list li { font-family: var(--font-heading); font-size: 0.9rem; letter-spacing: 0.08em; color: var(--color-teal); text-transform: uppercase; position: relative; }
.domains-list li:not(:last-child)::after { content: '·'; position: absolute; right: -1.1rem; color: var(--color-gold); }

/* ============================================================
   CONVERGENCE MARK
   ============================================================ */
.convergence-mark { width: 80px; height: auto; margin: 0 auto 2rem; opacity: 0.9; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer.dark-footer {
  background: var(--color-void);
  border-top: 1px solid rgba(200,150,42,0.2);
  padding: 4rem var(--gutter) 2rem;
  color: var(--color-muted); font-size: 0.9rem;
}
.site-footer .footer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 3rem; margin-bottom: 3rem;
}
.site-footer .footer-grid.footer-grid--two-centered {
  grid-template-columns: repeat(2, minmax(220px, 320px));
  justify-content: center;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.site-footer h4 {
  font-family: var(--font-heading); font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-gold); margin-bottom: 1rem;
}
.site-footer a { color: var(--color-muted); }
.site-footer a:hover { color: var(--color-gold-light); }
.site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 2rem; text-align: center; }
.site-footer.light-footer { background: #F0EBE3; border-top: 1px solid rgba(0,0,0,0.08); color: #666; }
.realm-footer .realm-footer-legal-links {
  margin: 0 0 1.25rem;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}
.realm-footer .realm-footer-legal-links a {
  color: var(--color-muted);
}
.realm-footer .realm-footer-legal-links a:hover {
  color: var(--color-gold-light);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .site-header.dark-nav, .site-header.light-nav { flex-direction: column; gap: 1rem; padding: 1rem var(--gutter); }
  .main-nav { gap: 1rem; flex-wrap: wrap; justify-content: center; }
  .hero-content { padding-top: 120px; }
  .card-grid { grid-template-columns: 1fr; }
  .closing-voice .cta-group { flex-direction: column; align-items: center; }
  .site-footer .footer-grid.footer-grid--two-centered { grid-template-columns: 1fr; max-width: 360px; }
}

/* ============================================================
   WORDPRESS OVERRIDES
   ============================================================ */

/* Kill all default WP block padding */
.wp-site-blocks {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Kill 1.2rem gap WP adds between all block elements */
:where(.wp-site-blocks) > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}
.is-layout-flow > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }

.wp-block-group.alignfull { max-width: 100% !important; }
.entry-content > * { max-width: var(--container); margin-left: auto; margin-right: auto; }
.entry-content > .alignfull { max-width: 100%; }

/* Kill site tagline sitewide */
.site-description { display: none !important; }

/* Hide empty footer widget headings until populated */
.site-footer .footer-grid h4:only-child { display: none; }

/* Suppress legacy WordPress theme-compat fallback markup (belt + suspenders) */
#header { display: none !important; }
#header + hr { display: none !important; }
#footer { display: none !important; }
#footer + hr { display: none !important; }
.site-info { display: none !important; }
[class*="powered-by"] { display: none !important; }

/* Logo size — enforce in nav */
.site-header .site-logo img {
    height: 48px !important;
    width: auto !important;
    max-width: none !important;
}

/* ============================================================
   THE REALM PAGE — per Trunk's master build instruction
   ============================================================ */

body.page-the-realm {
    background: #050a05;
}

/* HERO */
.hero-the-realm {
    position: relative;
    width: 100%;
    min-height: 600px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.hero-the-realm::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.65) 0%,
        rgba(10,0,20,0.45) 50%,
        rgba(0,0,0,0.65) 100%
    );
    z-index: 1;
}

.hero-the-realm .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 2rem 3rem 2rem;
}

.hero-the-realm h1 {
    font-family: 'Cinzel', serif;
    font-size: 3.5rem;
    color: #e8d5b0;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 0 30px rgba(180,100,255,0.5), 0 2px 6px rgba(0,0,0,0.95);
}

.hero-the-realm blockquote {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    color: #c8b8f0;
    font-style: italic;
    margin: 0 0 0.8rem 0;
    text-shadow: 0 1px 6px rgba(0,0,0,0.95);
    border: none;
    padding: 0;
}

.convergence-label {
    font-size: 0.85rem;
    color: #d4af7a;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0;
}

/* SECTION DIVIDER */
.section-divider {
    width: 100%;
    height: 80px;
    background-image: url('assets/images/footer_seperator.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0;
    box-sizing: border-box;
}

/* FOUR PILLARS HEADING */
.section-heading {
    text-align: center;
    font-family: 'Cinzel', serif;
    color: #d4af7a;
    font-size: 1.6rem;
    letter-spacing: 0.15em;
    padding: 2.5rem 0 1rem 0;
    background: #050a05;
    margin: 0;
}

/* FOUR PILLARS — individual image cards with text overlaid at bottom */
.four-pillars {
    background: #050a05;
    padding: 0;
}

.pillars-card-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.pillar-card {
    position: relative;
    overflow: hidden;
    min-height: 480px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.pillar-card .pillar-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.65) 55%, transparent 100%);
    padding: 2.5rem 1.2rem 1.5rem 1.2rem;
    text-align: center;
}

.pillar-text h3 {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: #d4af7a;
    margin: 0 0 0.3rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pillar-text h4 {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: #a89060;
    margin: 0 0 0.6rem 0;
    font-style: italic;
}

.pillar-text p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #c8b898;
    margin: 0;
}

@media (max-width: 768px) {
    .pillars-card-row { grid-template-columns: repeat(2, 1fr); }
    .pillar-card { min-height: 360px; }
}
@media (max-width: 480px) {
    .pillars-card-row { grid-template-columns: 1fr; }
    .pillar-card { min-height: 300px; }
}

/* ETHER BAR */
.ether-bar {
    position: relative;
    width: 100%;
    min-height: 380px;
    background-image: url('assets/images/ethier_Large.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

@media (max-width: 1919px) {
    .ether-bar {
        background-image: url('assets/images/ethier_medium.png');
        min-height: 320px;
    }
}

@media (max-width: 767px) {
    .ether-bar {
        background-image: url('assets/images/ethier_small.png');
        min-height: 260px;
    }
}

.ether-bar-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 3rem 2rem;
    max-width: 700px;
}

.ether-bar-content blockquote {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    color: #e8d5b0;
    margin: 0 0 1rem 0;
    font-style: italic;
    text-shadow: 0 0 20px rgba(255,220,150,0.7), 0 0 40px rgba(200,150,80,0.4), 0 2px 4px rgba(0,0,0,0.9);
    line-height: 1.3;
    border: none;
    padding: 0;
}

.ether-bar-content p {
    font-size: 1.1rem;
    color: #d4c4a0;
    margin: 0;
    line-height: 1.7;
    text-shadow: 0 1px 6px rgba(0,0,0,0.95), 0 0 20px rgba(0,0,0,0.8);
}

/* VAELOR */
.vaelor-section {
    position: relative;
    width: 100%;
    min-height: 500px;
    background-image: url('assets/images/dragon_pair.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vaelor-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.3) 0%,
        rgba(0,0,0,0.55) 40%,
        rgba(0,0,0,0.55) 60%,
        rgba(0,0,0,0.3) 100%
    );
    z-index: 1;
}

.vaelor-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 3rem 2rem;
    max-width: 700px;
}

.vaelor-content h2 {
    font-family: 'Cinzel', serif;
    font-size: 2.4rem;
    color: #e8d5b0;
    margin: 0 0 1rem 0;
    text-shadow: 0 0 30px rgba(255,200,80,0.6), 0 2px 6px rgba(0,0,0,0.95);
    letter-spacing: 0.08em;
}

.vaelor-content p {
    font-size: 1.1rem;
    color: #d4c4a0;
    line-height: 1.7;
    margin: 0 0 1rem 0;
    text-shadow: 0 1px 6px rgba(0,0,0,0.95);
}

.vaelor-tagline {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: #d4af7a !important;
    font-style: italic;
    text-shadow: 0 0 20px rgba(255,180,60,0.5), 0 1px 4px rgba(0,0,0,0.95) !important;
    letter-spacing: 0.05em;
}

/* ============================================================
   THE REALM — targeted spacing (no broad overrides)
   ============================================================ */
body.page-the-realm .hero-the-realm { margin: 0; }
body.page-the-realm .section-heading { margin: 0; }
body.page-the-realm .four-pillars { margin: 0; padding: 0 0 1.5rem 0; }

body.page-the-realm .ether-bar-content {
    padding: 3rem 2rem;
}

/* ============================================================
   LAZERITH & LAGOR — page-specific
   ============================================================ */
body.page-lazerith-lagor {
    background: #050a05;
}
body.page-lazerith-lagor .hero.full-bleed {
    background-position: center 30%;
}

/* ============================================================
   SHOP THE DAWN — light theme body offset for fixed header
   ============================================================ */
body.page-shop .hero.full-bleed,
body.page-aelorias-fire .hero.full-bleed {
    padding-top: 0;
}

/* ---- SHOP PAGE HERO: final tune (2026-05-26) ---- */
body.page-shop .hero.light-hero::before {
    background: rgba(255, 255, 255, 0.15);
}
body.page-shop .hero-content.shop-hero-panel {
    text-align: center;
    width: min(92vw, 1170px); /* ~50% wider than prior 780px panel */
    max-width: 1170px;
    margin: 300px auto 0;
    background: rgba(255, 255, 255, 0.15);
    padding: 2rem 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(1px);
}
body.page-shop .shop-family-friendly {
    font-weight: 800;
    letter-spacing: 0.02em;
}
body.page-shop .shop-hero-cta-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 200px;
    margin: 1.25rem 0 0.75rem;
}
body.page-shop .shop-realm-btn {
    white-space: nowrap;
}
@media (max-width: 900px) {
    body.page-shop .hero-content.shop-hero-panel {
        margin-top: 120px;
        width: min(94vw, 760px);
        padding: 1.5rem 1.25rem;
    }
    body.page-shop .shop-hero-cta-row {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ============================================================
   ETSY SHOP SYSTEM
   Product cards, teaser strip, footer CTA
   2026-05-25
   ============================================================ */

/* ---- SHARED: Etsy CTA Button ---- */
.btn-etsy {
    display: inline-block;
    background: var(--color-gold);
    color: #0a0a0a;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.65em 1.4em;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
}
.btn-etsy:hover {
    background: #f0c040;
    transform: translateY(-1px);
}
.btn-etsy--large { font-size: 1rem; padding: 0.8em 2em; }
.btn-etsy--footer { font-size: 0.8rem; margin-top: 0.75rem; }

/* ============================================================
   APP LAB (Hidden Dev)
   ============================================================ */
body.page-template-page-templates-app-lab {
    background: var(--color-void);
}
.app-lab-hero {
    min-height: 72vh;
}
.app-lab-panel {
    background: rgba(11, 11, 15, 0.62);
    border: 1px solid rgba(200, 150, 42, 0.35);
    max-width: 900px;
    padding: 2rem 2.25rem;
}
.app-lab-main {
    padding-top: 3rem;
}
.app-lab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}
.app-lab-card {
    background: #111114;
    border: 1px solid rgba(200, 150, 42, 0.2);
    padding: 1.25rem;
}
.app-lab-card ul {
    margin: 0.75rem 0 0;
    padding-left: 1.1rem;
}
.app-lab-card li {
    margin-bottom: 0.5rem;
    color: var(--color-muted);
}
.app-lab-note {
    margin-top: 0.9rem;
    font-size: 0.9rem;
    color: var(--color-teal);
}
.app-lab-pre {
    background: #09090c;
    border: 1px solid rgba(200, 150, 42, 0.2);
    padding: 0.8rem;
    white-space: pre-wrap;
    color: #d8d8d8;
    font-size: 0.92rem;
}
.app-lab-legal {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(200, 150, 42, 0.2);
    background: rgba(9, 9, 12, 0.75);
}
.app-lab-legal h3 {
    margin-top: 0;
    color: var(--color-gold);
    font-family: var(--font-heading);
}

/* ---- SHOP PAGE: Showcase Section ---- */
.shop-showcase {
    padding: 80px 0 100px;
    background: var(--color-void);
}
.section-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}
.shop-intro {
    color: var(--color-muted);
    text-align: center;
    margin: 0 auto 50px;
    max-width: 600px;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* ---- SHOP PAGE: Product Grid ---- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 36px;
}

/* ---- SHOP PAGE: Product Card ---- */
.product-card {
    background: #111114;
    border: 1px solid rgba(212,175,55,0.15);
    overflow: hidden;
    transition: border-color 0.25s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    border-color: rgba(212,175,55,0.5);
    transform: translateY(-4px);
}
.product-card__image-link { display: block; text-decoration: none; }
.product-card__image-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #0a0a0a;
}
.product-card__img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.4s ease;
}
.product-card:hover .product-card__img { transform: scale(1.04); }
.product-card__badge {
    position: absolute; top: 12px; right: 12px;
    background: var(--color-teal);
    color: #fff;
    font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 3px 8px;
}
.product-card__body {
    padding: 20px 22px 22px;
    display: flex; flex-direction: column; flex: 1;
}
.product-card__title {
    font-family: var(--font-heading);
    color: var(--color-gold);
    font-size: 1.05rem;
    margin: 0 0 4px; line-height: 1.3;
}
.product-card__subtitle {
    color: var(--color-teal);
    font-size: 0.75rem; letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 12px; opacity: 0.9;
}
.product-card__desc {
    color: var(--color-muted);
    font-size: 0.88rem; line-height: 1.6;
    margin: 0 0 18px; flex: 1;
}
.product-card__footer {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 12px; margin-top: auto;
}
.product-card__price {
    font-family: var(--font-heading);
    color: var(--color-gold);
    font-size: 1.2rem; font-weight: 700;
}
.shop-visit-all { text-align: center; margin-top: 56px; }

/* ---- HOME PAGE: Etsy Teaser Strip ---- */
.etsy-teaser {
    background: #0d0d10;
    border-top: 1px solid rgba(212,175,55,0.15);
    border-bottom: 1px solid rgba(212,175,55,0.15);
    padding: 70px 0;
}
.etsy-teaser__inner {
    display: flex; align-items: center; gap: 60px;
    max-width: 1000px; margin: 0 auto; padding: 0 32px;
}
.etsy-teaser__text { flex: 1; }
.etsy-teaser__label {
    color: var(--color-teal);
    font-size: 0.75rem; letter-spacing: 0.18em;
    text-transform: uppercase;
    display: block; margin-bottom: 12px; opacity: 0.9;
}
.etsy-teaser__title {
    font-family: var(--font-heading);
    color: var(--color-gold);
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin: 0 0 14px; line-height: 1.25;
}
.etsy-teaser__desc {
    color: var(--color-muted);
    font-size: 1rem; line-height: 1.7;
    margin: 0 0 24px;
}
.etsy-teaser__product { flex: 0 0 auto; text-align: center; }
.etsy-teaser__img {
    width: 240px; height: 240px;
    object-fit: cover; display: block;
    border: 1px solid rgba(212,175,55,0.2);
    transition: border-color 0.25s ease;
}
.etsy-teaser__img:hover { border-color: rgba(212,175,55,0.6); }
.etsy-teaser__price-tag {
    margin-top: 10px;
    display: flex; justify-content: space-between;
    align-items: center; gap: 8px;
}
.etsy-teaser__product-name {
    color: var(--color-muted);
    font-size: 0.8rem;
}
.etsy-teaser__price {
    font-family: var(--font-heading);
    color: var(--color-gold);
    font-size: 1rem; font-weight: 700;
}

/* ---- FOOTER: Etsy Column ---- */
.footer-col--etsy .footer-etsy-desc {
    font-size: 0.82rem;
    color: var(--color-muted);
    margin: 0 0 4px; line-height: 1.5;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    .etsy-teaser__inner {
        flex-direction: column; gap: 36px; text-align: center;
    }
    .etsy-teaser__price-tag { justify-content: center; }
    .etsy-teaser__img { width: 200px; height: 200px; }
    .product-grid { grid-template-columns: 1fr; max-width: 420px; }
    .product-card__footer { flex-direction: column; align-items: flex-start; }
}

/* End ETSY SHOP SYSTEM */

/* ============================================================
   THE REALM — scoped page wrapper overrides
   ============================================================ */
.realm-page-custom .hero-the-realm {
    background-position: center 120px !important;
}

.realm-page-custom .ether-bar {
    background-position: center 150px !important;
    min-height: 460px !important;
}

.realm-page-custom .ether-bar .ether-bar-content {
    background: rgba(5, 40, 24, 0.42) !important;
    border: 1px solid rgba(212, 175, 122, 0.30) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35) !important;
    max-width: 640px !important;
    padding: 2.5rem 1.75rem !important;
    transform: translateY(65px) !important;
}

.realm-page-custom .realm-spaced-divider {
    padding-top: 75px !important;
    padding-bottom: 100px !important;
    height: 80px !important;
    box-sizing: content-box !important;
    background-color: #050a05 !important;
}

@media (max-width: 767px) {
    .realm-page-custom .hero-the-realm {
        background-position: center 70px !important;
    }

    .realm-page-custom .ether-bar {
        background-position: center 80px !important;
    }
}

/* ============================================================
   ABOUT THE MYTHOS — Convergence Mark placement
   ============================================================ */
body.page-about-the-mythos .convergence-mark {
    display: block;
    width: 162px !important;
    max-width: 42vw;
    margin: 2.25rem auto 0.9rem !important;
}

@media (max-width: 767px) {
    body.page-about-the-mythos .convergence-mark {
        width: 144px !important;
        max-width: 52vw;
        margin-top: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }
}

/* ============================================================
   RUEZALS REALM - DARK FANTASY VISUAL PASS v1
   ============================================================ */
:root{
  --obsidian:#0B0B0F;
  --obsidian-2:#13131B;
  --emerald:#0E4D30;
  --emerald-deep:#0A3422;
  --gold:#C8962A;
  --gold-bright:#E8B746;
  --gold-soft:#A87E22;
  --teal:#29C4C0;
  --teal-soft:#1A8B89;
  --purple:#6B46FF;
  --crimson:#FF0000;
  --parchment:#F2E6C9;
  --bone:#E8DDC0;
  --whisper:rgba(232,221,192,0.55);
  --font-display:'Cinzel',serif;
  --font-body:'Cormorant Garamond',Georgia,serif;
  --font-ui:'Inter',sans-serif;
}

body.page-home,
body.page-the-realm,
body.page-aelorias-fire,
body.page-lazerith-lagor,
body.page-about-the-mythos {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(14,77,48,0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(41,196,192,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(200,150,42,0.05) 0%, transparent 70%),
    var(--obsidian) !important;
  color: var(--bone);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.page-home .dark-section,
body.page-the-realm .dark-section,
body.page-aelorias-fire .dark-section,
body.page-lazerith-lagor .dark-section,
body.page-about-the-mythos .dark-section,
body.page-home .etsy-teaser {
  background: transparent !important;
}

.codex-heading,
h2.section-heading,
.section-title {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: clamp(13px, 1.7vw, 18px) !important;
  letter-spacing: .32em !important;
  text-transform: uppercase !important;
  color: var(--gold-bright) !important;
  text-align: center !important;
  margin: 64px 0 28px !important;
  position: relative;
}

.codex-heading::before, .codex-heading::after,
h2.section-heading::before, h2.section-heading::after,
.section-title::before, .section-title::after {
  content: "\2726";
  color: var(--gold-soft);
  margin: 0 18px;
  font-size: 11px;
}

.runic-divider{
  text-align: center;
  margin: 38px auto 32px;
  letter-spacing: 1.5em;
  color: var(--gold-soft);
  font-size: 12px;
  opacity: .7;
}

.gold-rule{
  display: block;
  width: min(60%, 720px);
  height: 1px;
  margin: 32px auto;
  background: linear-gradient(90deg,
    transparent,
    var(--gold) 30%,
    var(--gold-bright) 50%,
    var(--gold) 70%,
    transparent);
  opacity: .55;
  border: none;
}

.hero .glowing-headline,
.hero h1,
.hero-the-realm h1 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: clamp(32px, 5vw, 56px) !important;
  letter-spacing: .04em !important;
  color: var(--gold-bright) !important;
  text-shadow:
    0 0 22px rgba(200,150,42,.25),
    0 0 60px rgba(200,150,42,.08),
    0 2px 8px rgba(0,0,0,.85) !important;
  margin-bottom: 14px !important;
}

.hero .subheadline,
.hero p,
.hero-the-realm blockquote {
  font-family: var(--font-body) !important;
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--whisper);
  max-width: 680px;
  margin: 0 auto 10px;
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
}

.hero .tagline,
.hero-the-realm .convergence-label {
  font-family: var(--font-display) !important;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--gold);
  text-transform: uppercase;
  margin-top: 18px;
}

.eyebrow{
  font-family: var(--font-display) !important;
  font-weight: 500;
  letter-spacing: .42em;
  font-size: 11px;
  color: var(--teal);
  text-transform: uppercase;
  margin-bottom: 18px;
  text-align: center;
}

.codex-card,
.pillar-card,
.tier,
body.page-aelorias-fire .aeloria-aspect-card {
  background-color: rgba(11,11,15,.85);
  border: 1px solid rgba(200,150,42,.28) !important;
  border-radius: 3px !important;
  position: relative;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.codex-card:not(.pillar-card),
.tier {
  background: linear-gradient(180deg,
    rgba(14,77,48,.32) 0%,
    rgba(11,11,15,.85) 100%);
  padding: 32px 26px 28px;
}

.codex-card:hover,
.pillar-card:hover,
.tier:hover,
body.page-aelorias-fire .aeloria-aspect-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold) !important;
  box-shadow: 0 14px 50px -10px rgba(200,150,42,.18) !important;
}

.codex-card.featured,
.tier.featured,
.pillar-card.featured {
  border-color: var(--gold) !important;
  box-shadow:
    0 0 0 1px rgba(200,150,42,.4) inset,
    0 12px 48px -12px rgba(200,150,42,.25) !important;
}

.codex-card.featured::before,
.tier.featured::before,
.pillar-card.featured::before {
  content: "MOST CHOSEN";
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--obsidian);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: .3em;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 2px;
  z-index: 3;
}

.codex-card h3,
.pillar-card h3,
.tier-name {
  font-family: var(--font-display) !important;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--gold-bright) !important;
  font-size: 16px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 6px;
}

.codex-card .role,
.pillar-card h4,
.tier-role {
  text-align: center;
  font-style: italic;
  color: var(--whisper) !important;
  font-size: 14px;
  margin-bottom: 24px;
  letter-spacing: .02em;
}

.codex-shell {
  background: linear-gradient(180deg,
    rgba(10,52,34,.55) 0%,
    rgba(11,11,15,.4) 100%) !important;
  border: 1px solid rgba(200,150,42,.35) !important;
  border-radius: 3px;
  padding: 32px 28px;
  position: relative;
}

.codex-shell::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(200,150,42,.12);
  pointer-events: none;
  border-radius: 2px;
}

.policy-panel {
  background: rgba(11,11,15,.55) !important;
  border: 1px solid rgba(200,150,42,.22) !important;
  border-left: 2px solid var(--gold) !important;
  padding: 22px 22px 20px;
  border-radius: 2px;
}

.policy-panel h4,
.policy-panel .tagline {
  font-family: var(--font-display) !important;
  color: var(--gold-bright) !important;
  font-size: 11px !important;
  letter-spacing: .32em !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.policy-panel p { font-size: 15px; color: var(--bone); margin-bottom: 8px; }
.policy-panel .hot { color: var(--gold-bright); font-family: var(--font-display); font-weight: 500; font-size: 14px; }
.policy-panel .cold { color: var(--whisper); font-style: italic; font-size: 14px; }

.btn-gold, .realm-cta.gold {
  display: inline-block;
  background: var(--gold) !important;
  color: var(--obsidian) !important;
  font-family: var(--font-display) !important;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .8em 1.8em;
  border: none;
  border-radius: 2px;
  text-decoration: none;
  transition: background .25s, transform .2s, box-shadow .25s;
}

.btn-gold:hover, .realm-cta.gold:hover {
  background: var(--gold-bright) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -8px rgba(200,150,42,.45);
}

.btn-teal, .realm-cta.teal {
  display: inline-block;
  background: transparent !important;
  color: var(--teal) !important;
  border: 1px solid var(--teal) !important;
  font-family: var(--font-display) !important;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .75em 1.6em;
  border-radius: 2px;
  text-decoration: none;
  transition: background .2s, color .2s;
}

.btn-teal:hover, .realm-cta.teal:hover { background: var(--teal) !important; color: var(--obsidian) !important; }

.site-header.dark-nav {
  background: rgba(11,11,15,.92) !important;
  border-bottom: 1px solid rgba(200,150,42,.25) !important;
  backdrop-filter: blur(8px);
  padding: 1rem 2rem;
}

.main-nav a {
  font-family: var(--font-display) !important;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  padding: 6px 0;
  margin: 0 18px;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}

.main-nav a:hover,
.main-nav a[aria-current="page"],
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
  color: var(--gold-bright) !important;
  border-bottom-color: var(--gold);
}

.site-header .site-logo img { height: 48px !important; width: auto !important; }

.footer-mark, .site-footer .footer-bottom {
  text-align: center;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid rgba(200,150,42,.2);
}

.footer-mark .mark, .footer-copyright {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .32em;
  color: var(--gold-bright);
  font-size: 13px;
}

.footer-mark .line, .footer-legal {
  color: var(--whisper);
  font-style: italic;
  font-size: 13px;
  margin-top: 6px;
}

.site-footer .runic {
  color: var(--gold-soft);
  letter-spacing: 1em;
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
}

.site-footer.ruezals-legal-footer .footer-bottom::before {
  content: "RUEZALS REALM \00B7  DHRAGOON TRANSLATOR\2122";
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--gold-bright);
  font-size: 12px;
  margin-bottom: 10px;
  text-align: center;
}

body.page-shop,
body.page-shop-the-dawn {
  background: #F6F5FA !important;
}

body.page-shop .product-card,
body.page-shop-the-dawn .product-card {
  background: #fffaf0 !important;
  border: 1px solid rgba(200,150,42,.35) !important;
  border-radius: 3px !important;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

body.page-shop .product-card:hover,
body.page-shop-the-dawn .product-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold) !important;
  box-shadow: 0 14px 40px -12px rgba(200,150,42,.22);
}

body.page-shop .section-title,
body.page-shop-the-dawn .section-title {
  font-family: var(--font-display) !important;
}

.mythos-mark-shell {
  display: inline-block;
  padding: 18px;
  margin: 0 auto 2rem;
}

body.page-about-the-mythos .convergence-mark {
  width: 188px !important;
}

@media (max-width: 900px) {
  .main-nav {
    gap: .85rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .main-nav a {
    margin: 0 8px;
    font-size: 10px;
    letter-spacing: .14em;
  }

  .runic-divider {
    letter-spacing: .65em;
  }
}

@media (max-width: 640px) {
  .codex-heading,
  h2.section-heading,
  .section-title {
    letter-spacing: .18em !important;
  }

  .codex-heading::before, .codex-heading::after,
  h2.section-heading::before, h2.section-heading::after,
  .section-title::before, .section-title::after {
    margin: 0 8px;
  }

  .policy-panel,
  .codex-shell {
    padding: 22px 18px;
  }
}