/* v37 patch: theme + hover safety
   - Support theme class on html OR body
   - Add minimal dropdown open rules as safety net
*/

:root{--accent:#ff2a2a;--text:rgba(255,255,255,.92);--muted:rgba(255,255,255,.74);--panel:rgba(0,0,0,.58);--border:rgba(255,255,255,.12);--radius:16px;--gap:clamp(10px,2vw,18px);--pad:clamp(12px,2.5vw,22px);--h1:clamp(1.55rem,2.5vw,2.3rem);--h2:clamp(1.1rem,1.6vw,1.35rem);--p:clamp(.98rem,1.2vw,1.05rem)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:#05050a url("../img/Home/DraconGaming3.jpg") center top/cover no-repeat;min-height:100vh}
@media(max-width:820px){body{background-attachment:scroll}}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 70% 15%, rgba(255,60,0,.14), transparent 55%),linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.88));z-index:0}
#body{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}

/* Header above content */
#menu{position:sticky;top:0;z-index:3000;overflow:visible}
#navMenu{overflow:visible}

/* Theme vars: allow html.theme-light OR body.theme-light */
html.theme-light, body.theme-light{
  --text: rgba(10,10,10,.92);
  --muted: rgba(10,10,10,.62);
  --panel: rgba(255,255,255,.70);
  --border: rgba(10,10,10,.14);
}
html.theme-light body::before, body.theme-light::before{
  background:radial-gradient(circle at 70% 15%, rgba(255,60,0,.10), transparent 55%),linear-gradient(to bottom, rgba(255,255,255,.40), rgba(255,255,255,.80));
}

/* Main container */
#main{width:min(1200px,96%);margin:0 auto;padding:var(--pad) var(--pad) calc(var(--pad)*2)}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:var(--pad)}
.panel.card{transition:transform 120ms ease,border-color 120ms ease,background 120ms ease}
.panel.card:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18)}

/* News */
.news-card{max-width:1180px;margin:12px auto 0}
.news-grid{display:grid;grid-template-columns:1.55fr .85fr;gap:14px;align-items:start}
@media(max-width:980px){.news-grid{grid-template-columns:1fr}}
.announcement-feed{display:flex;flex-direction:column;gap:10px}

/* RSS */
.rss-card{padding:12px 12px 10px}
.rss-header{padding:2px 4px 10px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:10px}
.rss-title{font-weight:1100}
.rss-sub{opacity:.7;font-weight:800;font-size:.86rem;margin-top:2px}
.rss-list{display:flex;flex-direction:column;gap:10px}
.rss-item{display:block;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.28);transition:transform 140ms ease,background 140ms ease,border-color 140ms ease;text-decoration:none;color:var(--text)}
.rss-item:hover{transform:translateY(-1px);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.rss-item-top{display:flex;gap:10px;align-items:center;margin-bottom:4px}
.rss-source{opacity:.78;font-weight:1000;font-size:.82rem}
.rss-date{margin-left:auto;opacity:.68;font-weight:900;font-size:.82rem}
.rss-headline{font-weight:1000;line-height:1.25}
.rss-footer{padding:10px 4px 2px;border-top:1px solid rgba(255,255,255,.12);margin-top:10px}
.rss-refresh{opacity:.85;font-weight:1000}

/* Footer */
.footer{margin-top:auto;padding:18px var(--pad);background:rgba(0,0,0,.55);border-top:1px solid rgba(255,255,255,.10)}
html.theme-light .footer, body.theme-light .footer{background:rgba(255,255,255,.75)}
.footer-inner{width:min(1200px,96%);margin:0 auto;display:flex;gap:10px;align-items:center;justify-content:center;color:var(--muted)}
.footer a{color:var(--text);text-decoration:none}
.footer a:hover{color:inherit}
.footer-nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.sep{opacity:.6}

/* Safety net for dropdowns (in case nav-hover.css fails to load)
   Will not style them fully, but will OPEN them on hover. */
#containerul > li{position:relative}
#containerul > li > ul{z-index:5000}
#containerul > li:hover > ul,
#containerul > li:focus-within > ul{display:block}

html, body{overflow-x:hidden}