/* ==========================================================================
   Ember Weaver theme override — built on HTML5UP "Read Only"
   Midnight + midnight-purple, stars & nebulae, high-contrast lavender text.
   Loaded AFTER assets/css/main.css.
   ========================================================================== */

:root{
  --ew-ink:#f6e9ff;         /* strongest text */
  --ew-ink-soft:#cfa9e6;    /* muted text */
  --ew-accent:#a300cc;
  --ew-accent-soft:#c047de;
  --ew-panel:rgba(38,4,61,.60);
  --ew-panel-2:rgba(20,2,34,.72);
  --ew-border:rgba(235,156,255,.28);
  --ew-glow:rgba(163,0,204,.45);
}

/* ---- global text on midnight ---- */
body{
  background-color:#18002a !important;
  background-image:
    radial-gradient(1100px 700px at 15% -10%, rgba(163,0,204,.55) 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 20%, rgba(120,40,180,.45) 0%, transparent 55%),
    radial-gradient(1000px 700px at 50% 120%, rgba(60,10,110,.6) 0%, transparent 60%) !important;
  background-attachment:fixed !important;
  color:var(--ew-ink-soft) !important;
}

/* nebulae + stars overlay above everything behind content */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 20% 15%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 40%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 25%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 85% 30%, rgba(255,235,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 10% 75%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(2px 2px at 45% 85%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 80%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 10%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 30% 62%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 80% 45%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 40%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 66% 72%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 30%, rgba(255,255,255,.75) 50%, transparent 51%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(500px 300px at 18% 25%, rgba(163,0,204,.22) 0%, transparent 70%),
    radial-gradient(600px 350px at 80% 55%, rgba(120,30,200,.20) 0%, transparent 70%),
    radial-gradient(450px 280px at 50% 92%, rgba(255,80,200,.12) 0%, transparent 70%);
}

/* ---- keep content above the star layers ---- */
#wrapper, #titleBar{position:relative;z-index:1}
#header{z-index:2}

/* ---- Read Only sidebar: midnight purple panel ---- */
#header{
  background:
    radial-gradient(500px 300px at 20% 10%, rgba(163,0,204,.35) 0%, transparent 65%),
    radial-gradient(400px 400px at 90% 100%, rgba(120,30,200,.30) 0%, transparent 65%),
    linear-gradient(180deg, #1d0033 0%, #120021 100%) !important;
  color:#d9b4ec !important;
  border-left:1px solid var(--ew-border);
}
#header h1, #header h1 a, #header h2, #header h3, #header #logo{color:#f6e9ff !important}
#header header p{color:#cfa9e6 !important}

/* nav links */
#nav ul li a{
  color:#cfa9e6 !important;
}
#nav ul li a.active, #nav ul li a:hover{
  color:#f6e9ff !important;
  background:rgba(163,0,204,.22) !important;
}
#nav ul li a .icon:before{color:#eb9cff !important}

/* social icons in header */
#header .icons a{color:#cfa9e6 !important;border-color:transparent !important}
#header .icons a:hover{color:#f6e9ff !important}

/* avatar in sidebar: give it the EW violet ring */
#header .image.avatar{
  border-color:rgba(235,156,255,.45) !important;
  box-shadow:0 0 0 3px rgba(163,0,204,.5);
}

/* ---- main column: dark panels on the cosmic bg ---- */
#wrapper{background:transparent !important}
#main > section{border-top:solid 6px rgba(163,0,204,.25)}
#main .container{background:transparent}

#main section > .container{color:var(--ew-ink-soft)}
#main h2, #main h3, #main h4{color:#f6e9ff !important}

/* section headers: lighter than body text */
header.major h2{color:#ffffff !important;text-shadow:0 0 18px rgba(235,156,255,.25)}
header.major p{color:#f6e9ff !important}

/* generic headings */
h2, h3, h4, h5{color:#f6e9ff}
p{color:var(--ew-ink-soft)}

/* feature icons list (Things I Can Do) */
.feature-icons li{color:var(--ew-ink-soft)}
.feature-icons li .icon:before{color:var(--ew-accent-soft) !important}

/* features (accomplishments) cards */
.features article{border-color:rgba(235,156,255,.22) !important}
.features article .inner p{color:var(--ew-ink-soft)}

/* strong/bold — brighter than body text on midnight */
strong, b{color:#ffffff;font-weight:700}

/* ---- buttons: EW purple primary, muted default ---- */
.button.primary,
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary{
  background:linear-gradient(120deg,var(--ew-accent),var(--ew-accent-soft)) !important;
  color:#fff !important;
  box-shadow:0 8px 22px var(--ew-glow) !important;
}
.button, input[type="submit"], input[type="reset"], input[type="button"]{
  background:var(--ew-panel) !important;
  border-color:var(--ew-border) !important;
  color:#f6e9ff !important;
}
.button:hover, .button.primary:hover{transform:translateY(-2px)}

/* Patreon button override class */
.button.patreon{
  background:#ff424d !important;
  background-image:linear-gradient(120deg,#ff424d,#ff6670) !important;
  color:#fff !important;
  box-shadow:0 8px 22px rgba(255,66,77,.45) !important;
}
/* Discord button override class */
.button.discord{
  background:#5865F2 !important;
  background-image:linear-gradient(120deg,#5865F2,#7289da) !important;
  color:#fff !important;
  box-shadow:0 8px 22px rgba(88,101,242,.45) !important;
}
.button.discord .icon:before{margin-right:.4em;color:#fff !important}

/* ---- forms (contact) on dark ---- */
input[type="text"], input[type="email"], input[type="password"],
select, textarea{
  background:rgba(20,2,34,.6) !important;
  border-color:var(--ew-border) !important;
  color:#f6e9ff !important;
}
input::placeholder, textarea::placeholder{color:#a87fbe !important}

/* ---- footer ---- */
#footer{background:rgba(18,2,30,.6) !important;color:#a87fbe !important;border-top:1px solid var(--ew-border)}
#footer .copyright{color:#a87fbe !important}
#footer .copyright a{color:#cfa9e6 !important}

/* hamburger title bar on mobile: midnight purple */
#titleBar{
  background:linear-gradient(90deg, #1d0033, #120021) !important;
  box-shadow:0 1px 6px rgba(0,0,0,.5);
}
#titleBar .title{color:#f6e9ff !important}
#titleBar .toggle{border-color:var(--ew-border)}
#titleBar .toggle:before{color:#eb9cff !important}

/* links */
a{color:#e3b7f0}
a:hover{color:#f6e9ff !important}

/* ==========================================================================
   Age gate modal (midnight, matches theme)
   ========================================================================== */
.ew-agegate{
  position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(10,2,18,.86);backdrop-filter:blur(6px);
}
.ew-agegate.hidden{display:none}
.ew-agegate .box{
  max-width:440px;width:100%;background:#26043d;border:1px solid rgba(235,156,255,.4);border-radius:14px;
  padding:38px 34px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.7);
}
.ew-agegate h2{color:#f6e9ff;font-size:1.6rem;margin-bottom:6px}
.ew-agegate .subtle{color:#cfa9e6;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;font-family:"Lato",sans-serif;margin-bottom:12px}
.ew-agegate p{color:#e6ccff;font-size:.98rem;margin-bottom:24px;line-height:1.6}
.ew-agegate .btns{display:flex;flex-direction:column;gap:12px}
.ew-agegate .ew-btn{
  display:block;width:100%;margin:0;padding:15px 20px;box-sizing:border-box;
  border-radius:7px;border:0;cursor:pointer;text-align:center;
  font-family:"Lato",sans-serif;font-size:1rem;font-weight:700;letter-spacing:.02em;line-height:1.3;
  color:#fff;background:linear-gradient(120deg,#a300cc,#c047de);
  box-shadow:0 8px 22px rgba(163,0,204,.4);
  -webkit-appearance:none;appearance:none;
}
.ew-agegate .ew-btn:hover{filter:brightness(1.08)}
.ew-agegate .ew-btn.ew-btn-leave{
  color:#cfa9e6;background:transparent;border:1px solid rgba(235,156,255,.4);box-shadow:none;
}
.ew-agegate .ew-btn.ew-btn-leave:hover{background:rgba(163,0,204,.15);filter:none}
.ew-agegate small{display:block;margin-top:18px;color:#b48ccb;font-size:.76rem;line-height:1.5}
.ew-agegate .msg{display:none;margin-top:12px;color:#ff8a8a;font-size:.86rem}
.ew-agegate .msg.show{display:block}