/*
Theme Name: Strega Serafina
Theme URI: https://example.com/strega-serafina
Author: You
Description: Mystical, parchment-textured theme with wax-seal CTAs and alchemical gold highlights for the Strega Serafina brand.
Version: 1.0.0
Tags: blog, one-column, custom-colors, custom-logo
Text Domain: strega-serafina
*/

/* ====== CSS VARIABLES (Brand Palette) ====== */
:root{
  --burgundy:#701945; /* wax / blood / ritual */
  --olive:#556B2F;    /* herbs / earth */
  --gold:#CDA434;     /* antique gold */
  --navy:#191970;     /* midnight */
  --charcoal:#36454F; /* text / UI */
  --ivory:#FFFFF0;    /* parchment */
  --ivory-ink:#F7F3E2;
  --shadow:rgba(0,0,0,.22);
}

/* ====== Base Reset / Typography ====== */
html{box-sizing:border-box;scroll-behavior:smooth}
*,*:before,*:after{box-sizing:inherit}
body{
  margin:0; color:var(--charcoal); background:var(--ivory);
  font: 17px/1.7 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

h1,h2,h3,h4,h5,h6,.brand{
  font-family: "Cormorant Garamond", ui-serif, Georgia, Times, serif;
  letter-spacing:.02em;
}

img{max-width:100%;height:auto}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.section{padding:72px 0}

/* ====== Parchment & Cosmic Textures (CSS-only) ====== */
.parchment{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(205,164,52,.06), transparent 60%),
    radial-gradient(800px 400px at 90% 20%, rgba(112,25,69,.035), transparent 60%),
    radial-gradient(900px 600px at 50% 100%, rgba(85,107,47,.05), transparent 60%),
    linear-gradient(0deg, var(--ivory), var(--ivory-ink));
}

.cosmic{
  color:#e9e7da;
  background:
    radial-gradient(1000px 600px at 20% -10%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(800px 500px at 80% 10%, rgba(255,255,255,.06), transparent 60%),
    repeating-radial-gradient(circle at 10% 20%, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    var(--navy);
}

/* ====== Gold Text / Lines (subtle foil) ====== */
.gold{
  background: linear-gradient(135deg, #b9972f, #f1d27a 35%, #b2831a 60%, #e0c164 85%, #a7790e);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 0 rgba(0,0,0,0);
}
.gold-line{ height:1px; background:linear-gradient(90deg, transparent, #e0c164, transparent); border:0 }

/* ====== Header / Nav ====== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,240,.9);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{font-weight:700;font-size:28px}
.brand .small{font-size:.8em;opacity:.85}

.menu-toggle{display:none;background:none;border:0;font-size:28px}

.primary-menu{display:flex;gap:22px;align-items:center}
.primary-menu a{color:var(--charcoal);text-decoration:none;font-weight:600}
.primary-menu a:hover{color:var(--burgundy)}

@media (max-width:900px){
  .menu-toggle{display:block}
  .primary-menu{display:none;flex-direction:column;align-items:flex-start;padding:12px 0}
  .primary-menu.is-open{display:flex}
}

/* ====== Hero ====== */
.hero{padding:120px 0 96px}
.hero .title{font-size:54px;line-height:1.05;margin:0 0 12px}
.hero .kicker{font-size:18px;letter-spacing:.18em;text-transform:uppercase;color:#f1d27a}
.hero .lede{max-width:680px;margin-top:14px;color:#ece7d6}

/* ====== Wax-Seal Buttons ====== */
.btn{display:inline-block;padding:14px 22px;border-radius:12px;border:2px solid var(--gold);
  background: radial-gradient(120% 160% at 30% 30%, #8c244f, var(--burgundy));
  color:#fff; text-decoration:none; font-weight:700; letter-spacing:.02em;
  box-shadow: 0 6px 16px rgba(112,25,69,.35), inset 0 2px 0 rgba(255,255,255,.08);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;}
.btn:hover{transform: translateY(-1px); filter:brightness(1.06)}
.btn:active{transform: translateY(1px)}

.btn-outline{background:transparent;color:var(--burgundy);border-color:var(--burgundy)}

/* ====== Cards / Offerings ====== */
.grid{display:grid;gap:28px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}}

.card{background:var(--ivory);border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:24px;box-shadow:0 10px 24px rgba(0,0,0,.08)}
.card.parchment{box-shadow:0 6px 22px rgba(0,0,0,.12) inset, 0 10px 26px rgba(0,0,0,.06)}
.card h3{margin-top:0;font-size:24px}
.card .icon{width:38px;height:38px;display:inline-block;margin-bottom:8px}

/* ====== Section Ornaments ====== */
.ornate{position:relative}
.ornate:before,.ornate:after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:22px;
  border:2px solid rgba(205,164,52,.55); mix-blend-mode:multiply; filter: drop-shadow(0 2px 0 rgba(0,0,0,.04))
}
.olive-border{border:2px solid rgba(85,107,47,.25); border-radius:18px}

/* ====== Footer ====== */
.site-footer{background:var(--navy); color:#e9e7da}
.site-footer a{color:#f1d27a}

/* ===== TEXTURED BACKGROUNDS ===== */
:root{ --gold:#CDA434; --burgundy:#701945; --navy:#191970; --charcoal:#36454F; --ivory:#FFFFF0; --olive:#556B2F; }

/* Parchment base */
body.parchment{
  background: var(--ivory) url('assets/parchment.png') center/1200px auto repeat;
}

/* Cosmic hero */
.cosmic{
  color:#EEEAE0;
  background:
    radial-gradient(1000px 600px at 20% -10%, rgba(255,255,255,.08), transparent 60%),
    url('assets/cosmic_navy.png') center/cover no-repeat,
    var(--navy);
  position: relative;
}
.cosmic:after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(80% 60% at 50% 20%, transparent, rgba(0,0,0,.25));
  pointer-events:none;
}

/* ===== GOLD FOIL TEXT/ELEMENTS ===== */
.gold-foil{
  background-image: url('assets/gold_foil.jpg');
  background-size: cover; background-position: center;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 .01px rgba(0,0,0,0);
}
.gold-line{ height:1px; border:0; background:
  linear-gradient(90deg, transparent, rgba(241,210,122,.9), transparent); }

/* ===== HERO TYPOGRAPHY ===== */
.hero .kicker{
  font-size: 14px; letter-spacing: .28em; text-transform: uppercase; 
  color: rgba(241,210,122,.95); margin-bottom: 10px;
  display:inline-block; position:relative; padding-left: 26px;
}
.hero .kicker:before{
  content:"✶"; position:absolute; left:0; top:-2px; font-size:16px; color: rgba(241,210,122,.95);
}
.hero .title{ font-size: clamp(38px, 6vw, 68px); line-height: 1.05; margin: 0 0 14px; }
.hero .lede{ max-width: 720px; color:#EDE9DB; text-shadow: 0 1px 0 rgba(0,0,0,.25); }

/* ===== WAX SEAL BUTTONS ===== */
.btn{
  display:inline-block; padding:14px 22px; border-radius:14px;
  background: radial-gradient(140% 180% at 30% 28%, #8c244f, var(--burgundy));
  color:#fff; text-decoration:none; font-weight:700; letter-spacing:.02em;
  border:2px solid rgba(205,164,52,.85);
  box-shadow: 0 10px 24px rgba(112,25,69,.35), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{ transform: translateY(-1px); filter:brightness(1.06) }
.btn:active{ transform: translateY(1px) }

.btn.btn-outline{
  background:transparent; color:#EEEAE0;
  border-color: rgba(241,210,122,.9);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.btn.btn-outline:hover{ color:#fff; filter:brightness(1.1) }

/* ===== GRIMOIRE CARDS ===== */
.card.grimoire{
  background: rgba(255,255,240,.92) url('assets/parchment.png') center/1100px repeat;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.05);
  position: relative;
  box-shadow: 0 10px 26px rgba(0,0,0,.08), inset 0 2px 18px rgba(0,0,0,.04);
  padding: 24px 24px 26px;
}
.card.grimoire:before{
  content:""; position:absolute; left:-1px; top:-1px; width:80px; height:80px;
  background: url('assets/corner_filigree.svg') no-repeat 0 0 / 100% 100%;
  opacity:.85; pointer-events:none;
}
.card.grimoire:after{
  content:""; position:absolute; right:-1px; bottom:-1px; width:80px; height:80px;
  transform: scale(-1,-1);
  background: url('assets/corner_filigree.svg') no-repeat 0 0 / 100% 100%;
  opacity:.85; pointer-events:none;
}
.card .icon{
  width:40px; height:40px; display:inline-block; margin-bottom:10px;
  background: rgba(205,164,52,.9);
  mask-size: contain; mask-position: center; mask-repeat:no-repeat;
  -webkit-mask-size: contain; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat;
}

/* ===== OLIVE HERBAL BORDER (Section wrapper) ===== */
.olive-border{
  border: 2px solid rgba(85,107,47,.28); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

/* ===== FOOTER SEAL ===== */
.site-footer{
  background: var(--navy) url('assets/cosmic_navy.png') center/cover no-repeat;
  color:#EDE9DB;
  border-top: 1px solid rgba(241,210,122,.35);
  position:relative;
}
.site-footer a{ color:#F1D27A }
.site-footer:before,.site-footer:after{
  content:""; position:absolute; width:90px; height:90px; opacity:.7;
  background:url('assets/corner_filigree.svg') no-repeat center/contain;
}
.site-footer:before{ left:12px; top:12px }
.site-footer:after{ right:12px; bottom:12px; transform:scale(-1,-1) }