/*
  EMBERCRYPT v2 - custom Valmor dark-fantasy theme
  Palette: ash/coal + gold + ember accents
*/

:root{
  --bg0:#050506;
  --bg1:#0b0b0e;
  --panel0:rgba(12,12,14,.88);
  --panel1:rgba(18,18,22,.86);
  --stroke:rgba(214,178,94,.22);
  --stroke2:rgba(214,178,94,.38);
  --gold:#d6b25e;
  --gold2:#f0d08a;
  --ember:#b6422a;
  --text:#e7dfcc;
  --muted:#b8ad97;
  --shadow:0 18px 40px rgba(0,0,0,.55);
  --radius:14px;
}

/* background: ash + subtle ember */
html, body{ height:100%; }
body{
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(214,178,94,.18), transparent 55%),
    radial-gradient(900px 600px at 12% 15%, rgba(182,66,42,.14), transparent 60%),
    radial-gradient(900px 700px at 90% 25%, rgba(182,66,42,.10), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 45%, #050507);
  color: var(--text);
}

/* ash/noise overlay */
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* page container */
#page{
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  position: relative;
  padding-bottom: 28px;
}

/* kill old absolute countdown behavior if still present */
#countdown-box{ position: static !important; transform:none !important; left:auto !important; top:auto !important; width:auto !important; }

/* header */
#site-header{
  margin-top: 18px;
  border-radius: calc(var(--radius) + 4px);
  border:1px solid rgba(214,178,94,.18);
  background:
    radial-gradient(800px 260px at 50% 0%, rgba(214,178,94,.10), transparent 60%),
    linear-gradient(180deg, rgba(20,20,24,.78), rgba(10,10,12,.72));
  box-shadow: var(--shadow);
  overflow:hidden;
}

#site-header .hdr-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 14px 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 220px;
}

.brand .sigil{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(214,178,94,.35);
  background:
    radial-gradient(22px 22px at 30% 30%, rgba(240,208,138,.35), transparent 65%),
    linear-gradient(180deg, rgba(28,28,34,.95), rgba(10,10,12,.92));
  box-shadow: 0 10px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  display:grid;
  place-items:center;
  color: var(--gold2);
  font-weight: 900;
  letter-spacing:.5px;
  text-shadow: 0 0 10px rgba(214,178,94,.20);
}

.brand .title{
  line-height:1.05;
}
.brand .title .name{
  font-size: 22px;
  letter-spacing: 6px;
  font-weight: 900;
  color: var(--gold2);
  text-transform: uppercase;
}
.brand .title .tag{
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(231,223,204,.75);
  text-transform: uppercase;
  margin-top: 4px;
}

/* top nav */
.nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 9px 12px;
  border-radius: 999px;
  text-decoration:none;
  color: rgba(231,223,204,.92);
  border: 1px solid rgba(214,178,94,.18);
  background: linear-gradient(180deg, rgba(16,16,18,.65), rgba(10,10,12,.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.nav a:hover{ border-color: rgba(214,178,94,.40); color: #fff2d4; }

.hdr-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  min-width: 240px;
}

.hdr-cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration:none;
  color:#fff4d9;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-size: 12px;
  border: 1px solid rgba(214,178,94,.28);
  background:
    radial-gradient(120px 80px at 50% 0%, rgba(214,178,94,.16), transparent 60%),
    linear-gradient(180deg, rgba(24,24,28,.78), rgba(10,10,12,.70));
}
.hdr-cta a:hover{ border-color: rgba(214,178,94,.55); box-shadow: 0 0 0 1px rgba(214,178,94,.12), 0 14px 26px rgba(0,0,0,.35); }
.hdr-cta a.primary{
  border-color: rgba(214,178,94,.65);
  background:
    radial-gradient(180px 120px at 50% 0%, rgba(214,178,94,.26), transparent 60%),
    radial-gradient(180px 120px at 50% 110%, rgba(182,66,42,.18), transparent 65%),
    linear-gradient(180deg, rgba(34,26,16,.86), rgba(12,10,9,.78));
}

/* hero / countdown */
#hero{
  margin-top: 14px;
  border-radius: calc(var(--radius) + 6px);
  border:1px solid rgba(214,178,94,.16);
  background:
    radial-gradient(720px 240px at 50% 0%, rgba(214,178,94,.12), transparent 65%),
    linear-gradient(180deg, rgba(12,12,14,.82), rgba(8,8,10,.78));
  box-shadow: var(--shadow);
  overflow:hidden;
}
#hero .hero-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 14px 18px;
}

#hero .hero-left{
  display:flex;
  align-items:center;
  gap:12px;
  color: rgba(231,223,204,.85);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 800;
  font-size: 12px;
}

#hero .timer{
  font-family: 'Courier New', Courier, monospace;
  font-size: 34px;
  font-weight: 900;
  color: var(--gold2);
  text-shadow: 0 0 18px rgba(214,178,94,.22);
}

#hero .hero-meta{
  color: rgba(231,223,204,.75);
  font-size: 12px;
}

#hero .hero-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration:none;
  color: #fff4d9;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid rgba(214,178,94,.55);
  background:
    radial-gradient(160px 120px at 50% 0%, rgba(214,178,94,.22), transparent 60%),
    radial-gradient(160px 120px at 50% 110%, rgba(182,66,42,.18), transparent 65%),
    linear-gradient(180deg, rgba(34,26,16,.90), rgba(12,10,9,.84));
}
#hero .hero-actions a:hover{ border-color: rgba(240,208,138,.75); }

/* grid */
#layout-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 260px 1fr 300px;
  gap: 18px;
  align-items:start;
}

/* panels */
#menu_left, #menu_right, #content_text{
  border-radius: var(--radius);
  border:1px solid rgba(214,178,94,.14);
  background:
    radial-gradient(520px 280px at 50% 0%, rgba(214,178,94,.08), transparent 70%),
    linear-gradient(180deg, var(--panel0), var(--panel1));
  box-shadow: var(--shadow);
}

#menu_left, #menu_right{ padding: 12px 10px; }
#content_text{ padding: 14px 16px; min-width:0; }

/* section headers (replace old png labels) */
#menu_left #menu-label,
#menu_right #menu-label{
  height: auto;
  margin: 10px 6px 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid rgba(214,178,94,.20);
  background:
    radial-gradient(220px 120px at 25% 0%, rgba(214,178,94,.12), transparent 60%),
    linear-gradient(180deg, rgba(22,22,26,.76), rgba(10,10,12,.70));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* hide legacy icon/text sprites */
#menu_left #menu-label > div,
#menu_right #menu-label > div{ display:none !important; }

/* inject our header text based on surrounding structure: keep minimal */
#menu_left #menu-label::after,
#menu_right #menu-label::after{
  content: "Section";
  color: rgba(240,208,138,.92);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
}

/* We’ll override section titles via inline data-attrs in layout.php */
#menu_left #menu-label[data-title]::after,
#menu_right #menu-label[data-title]::after{ content: attr(data-title); }

/* links */
#menu_links ul{ list-style:none; margin:0; padding:0; }
#menu_links li{ margin: 7px 6px; }
#menu_links a{
  display:block;
  padding: 9px 10px 9px 34px;
  border-radius: 12px;
  border: 1px solid rgba(214,178,94,.14);
  text-decoration:none;
  color: rgba(231,223,204,.92);
  background: linear-gradient(180deg, rgba(16,16,18,.60), rgba(10,10,12,.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  font-weight: 700;
}
#menu_links a:hover{ border-color: rgba(214,178,94,.42); color:#fff2d4; }

#menu_links a::before{
  content:"✦";
  position:absolute;
  margin-left:-20px;
  color: rgba(240,208,138,.88);
  text-shadow: 0 0 10px rgba(214,178,94,.18);
}

#menu_links a{ position:relative; }

/* quick actions block */
.quick-actions{
  margin: 12px 6px 6px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(214,178,94,.18);
  background:
    radial-gradient(260px 160px at 30% 0%, rgba(214,178,94,.10), transparent 60%),
    linear-gradient(180deg, rgba(12,12,14,.60), rgba(8,8,10,.58));
}
.quick-actions .qa-title{
  color: rgba(240,208,138,.95);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  margin-bottom: 10px;
}
.quick-actions a{
  display:block;
  text-decoration:none;
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 12px;
  color: #fff2d4;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  border: 1px solid rgba(214,178,94,.24);
  background:
    radial-gradient(180px 120px at 50% 0%, rgba(214,178,94,.18), transparent 60%),
    linear-gradient(180deg, rgba(22,22,26,.70), rgba(10,10,12,.62));
}
.quick-actions a:hover{ border-color: rgba(240,208,138,.65); }
.quick-actions .qa-tip{
  margin-top: 10px;
  color: rgba(231,223,204,.72);
  font-size: 12px;
  line-height: 1.35;
}

/* content typography */
#content_text h1, #content_text h2, #content_text h3{
  color: #fff1d1;
  letter-spacing: 1px;
}
#content_text a{ color: var(--gold2); }
#content_text a:hover{ color: #fff3da; }

/* tables: make them readable */
table{
  border-collapse: collapse;
}
table td, table th{
  border: 1px solid rgba(214,178,94,.12);
}

/* responsive */
@media (max-width: 1100px){
  #layout-grid{ grid-template-columns: 260px 1fr; }
  #menu_right{ grid-column: 1 / -1; }
}
@media (max-width: 780px){
  #page{ width: calc(100% - 22px); }
  #layout-grid{ grid-template-columns: 1fr; }
  #menu_left, #menu_right{ padding: 10px 8px; }
  #hero .hero-inner{ flex-direction: column; align-items:flex-start; }
  .hdr-inner{ flex-direction: column; align-items: stretch; }
  .hdr-cta{ justify-content:flex-start; }
}



/* === HOTFIX: remove link prefix icon in left menu === */
#menu_left a::before,
#menu_left a::after,
#menu_left ul li a::before,
#menu_left ul li a::after,
.leftQuickBtn::before,
.leftQuickBtn::after{
  content: none !important;
  display: none !important;
}

/* === HOTFIX: stop menu jump on hover (keep geometry stable) === */
#menu_left a,
.leftQuickBtn{
  display:block;
  box-sizing:border-box;
  border: 1px solid rgba(214,178,94,.18); /* always present */
  padding: 9px 12px !important;
  line-height: 18px;
  min-height: 36px;
  margin: 6px 8px !important;
  transform: none !important;
  font-weight: 700; /* keep constant */
}
#menu_left a:hover,
.leftQuickBtn:hover{
  border-color: rgba(214,178,94,.45);
}

/* prevent layout shift due to scrollbar */
html { scrollbar-gutter: stable; }

/* === HERO: center countdown block and avoid overlap === */
#hero{
  margin-top: 16px;
}
#hero .hero-inner{
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 18px 18px 16px;
}
#hero .hero-actions{
  margin-top: 10px;
}
#hero .timer{
  font-size: 44px;
  letter-spacing: 1px;
}

/* === HEADER: use SVG sigil instead of plain text === */
.brand .sigil{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: url('../_img/valmor_sigil.svg') center/contain no-repeat;
  color: transparent;
  text-indent: -9999px;
}

/* === LOGO (SVG sigil) === */
.brand .sigil .sigil-img{
  width: 28px;
  height: 28px;
  display:block;
  filter: drop-shadow(0 0 10px rgba(214,178,94,.20));
  opacity: .98;
}