/* ============================================================
   THEMES
   ============================================================ */

/* SHIRE */
:root {
  --bg-outer:      #7a6030;
  --window-bg:     #f5ead0;
  --window-border: #9a7838;
  --nav-bg:        #5a3e18;
  --nav-text:      #f0e4c0;
  --nav-hover-bg:  #3a2608;
  --nav-hover:     #fff4d0;
  --drop-bg:       #f5ead0;
  --drop-text:     #4a2e08;
  --drop-border:   #9a7838;
  --content-area:  #b8945a;
  --sb1-bg:        #c07828;
  --sb2-bg:        #8a5218;
  --sb3-bg:        #5a3610;
  --sb-text:       #f8ecd8;
  --divider-color: #c09040;
  --theme-bar-bg:  #5a3e18;
  --tbtn-border:   #c09040;
  --tbtn-text:     #f0e4c0;
  --tbtn-hover-bg: #3a2608;
  --glow:          rgba(160,120,40,0.3);
}

/* ROHAN */
[data-theme="rohan"] {
  --bg-outer:      #0d2118;
  --window-bg:     #f0ead8;
  --window-border: #c8a840;
  --nav-bg:        #0d2118;
  --nav-text:      #e8dfc0;
  --nav-hover-bg:  #1e3828;
  --nav-hover:     #fff8d8;
  --drop-bg:       #f0ead8;
  --drop-text:     #2a3818;
  --drop-border:   #c8a840;
  --content-area:  #1a3020;
  --sb1-bg:        #2a4028;
  --sb2-bg:        #1a3018;
  --sb3-bg:        #102010;
  --sb-text:       #e8dfc0;
  --divider-color: #c8a840;
  --theme-bar-bg:  #0d2118;
  --tbtn-border:   #c8a840;
  --tbtn-text:     #e8dfc0;
  --tbtn-hover-bg: #1e3828;
  --glow:          rgba(200,168,64,0.3);
}

/* GONDOR */
[data-theme="gondor"] {
  --bg-outer:      #1e3a5c;
  --window-bg:     #eef3f8;
  --window-border: #6090c0;
  --nav-bg:        #1e3a5c;
  --nav-text:      #d8ecf8;
  --nav-hover-bg:  #2e4e70;
  --nav-hover:     #ffffff;
  --drop-bg:       #eef3f8;
  --drop-text:     #1a3050;
  --drop-border:   #6090c0;
  --content-area:  #2e4e70;
  --sb1-bg:        #3a6090;
  --sb2-bg:        #2a4870;
  --sb3-bg:        #1a3050;
  --sb-text:       #d8ecf8;
  --divider-color: #80b0d8;
  --theme-bar-bg:  #1e3a5c;
  --tbtn-border:   #6090c0;
  --tbtn-text:     #d8ecf8;
  --tbtn-hover-bg: #2e4e70;
  --glow:          rgba(96,144,192,0.3);
}

/* RIVENDELL */
[data-theme="rivendell"] {
  --bg-outer:      #1a4858;
  --window-bg:     #eaf5f8;
  --window-border: #c0a040;
  --nav-bg:        #1a4858;
  --nav-text:      #e8f8ff;
  --nav-hover-bg:  #206070;
  --nav-hover:     #ffffff;
  --drop-bg:       #eaf5f8;
  --drop-text:     #0e3040;
  --drop-border:   #c0a040;
  --content-area:  #206878;
  --sb1-bg:        #2a7888;
  --sb2-bg:        #1a5868;
  --sb3-bg:        #0e3d4e;
  --sb-text:       #e8f8ff;
  --divider-color: #c0a040;
  --theme-bar-bg:  #1a4858;
  --tbtn-border:   #c0a040;
  --tbtn-text:     #e8f8ff;
  --tbtn-hover-bg: #206070;
  --glow:          rgba(192,160,64,0.35);
}

/* MORDOR */
[data-theme="mordor"] {
  --bg-outer:      #0d0101;
  --window-bg:     #1e0a0a;
  --window-border: #7a1010;
  --nav-bg:        #280a0a;
  --nav-text:      #cc3020;
  --nav-hover-bg:  #3a1010;
  --nav-hover:     #ff5040;
  --drop-bg:       #200808;
  --drop-text:     #cc3020;
  --drop-border:   #7a1010;
  --content-area:  #1a0606;
  --sb1-bg:        #3a0c0c;
  --sb2-bg:        #280808;
  --sb3-bg:        #1a0505;
  --sb-text:       #cc3020;
  --divider-color: #8a1818;
  --theme-bar-bg:  #280a0a;
  --tbtn-border:   #7a1010;
  --tbtn-text:     #cc3020;
  --tbtn-hover-bg: #3a1010;
  --glow:          rgba(180,30,20,0.45);
}

/* Cursors sätts via JavaScript för att undvika cascade-problem */

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--bg-outer);
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 16px;
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 13px;
  transition: background-color 0.35s;
  position: relative;
}

html {
  position: relative;
}

html::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('img/bg/bg.webp');
  background-repeat: repeat;
  background-size: auto;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

/* Mordor texture overlay */
body[data-theme="mordor"]::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: repeating-linear-gradient(
    -55deg,
    transparent 0px, transparent 4px,
    rgba(80,8,8,0.12) 4px, rgba(80,8,8,0.12) 5px
  );
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   WINDOW
   ============================================================ */
#window {
  width: 860px;
  max-width: 100%;
  background: var(--window-bg);
  border: 2px solid var(--window-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35), 0 0 24px var(--glow);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  position: relative;
  z-index: 1;
}

/* ============================================================
   NAV
   ============================================================ */
#nav-row {
  display: flex;
  background: var(--nav-bg);
  border-bottom: 2px solid var(--window-border);
  transition: background 0.3s, border-color 0.3s;
}

.nav-item {
  position: relative;
  flex: 1;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.nav-item:last-child { border-right: none; }
.nav-item:nth-child(even) > button { background: rgba(0,0,0,0.15); }
.nav-item:nth-child(odd)  > button { background: rgba(255,255,255,0.04); }

.nav-item > button {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--nav-text);
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.04em;
  padding: 12px 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-item > button:hover,
.nav-item.open > button {
  background: var(--nav-hover-bg);
  color: var(--nav-hover);
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 150px;
  background: var(--drop-bg);
  border: 1px solid var(--drop-border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  z-index: 999;
  box-shadow: 3px 6px 18px rgba(0,0,0,0.2);
  overflow: hidden;
  animation: fd 0.12s ease;
}
.nav-item.open .dropdown { display: block; }

@keyframes fd {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}

.dropdown a {
  display: block;
  padding: 7px 14px;
  color: var(--drop-text);
  text-decoration: none;
  font-size: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background 0.12s, padding-left 0.12s, color 0.12s;
}
.dropdown a:last-child { border-bottom: none; }
.dropdown a:hover {
  background: var(--nav-bg);
  color: var(--nav-text);
  padding-left: 20px;
}

/* ============================================================
   BODY AREA
   ============================================================ */
#body-area {
  display: grid;
  grid-template-columns: 1fr 180px;
}

/* ============================================================
   LEFT: content area + parchment box
   ============================================================ */
#content-area {
  background: var(--content-area);
  padding: 16px;
  border-right: 2px solid var(--window-border);
  transition: background 0.3s, border-color 0.3s;
}

#parchment {
  background-color: #f5e8c8;
  background-image: url('img/textures/parchment.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  background-attachment: local;
  border: 2px solid #b8903a;
  border-radius: 8px;
  height: 460px;
  overflow-y: auto;
  padding: 22px 26px;
  color: #3d2706;
  line-height: 1.7;
  box-shadow: inset 0 0 30px rgba(139,105,20,0.1), 0 2px 8px rgba(0,0,0,0.2);
  scrollbar-width: thin;
  scrollbar-color: #a08030 #e8d9a8;
  position: relative;
}

#parchment::-webkit-scrollbar { width: 8px; }
#parchment::-webkit-scrollbar-track { background: #e8d9a8; border-radius: 4px; }
#parchment::-webkit-scrollbar-thumb { background: #a08030; border-radius: 4px; }

#parchment h1 {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: #5c3a08;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #c8a84b;
}
#parchment h2 {
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  color: #6b4410;
  margin: 16px 0 5px;
}
#parchment p { margin-bottom: 10px; }

/* ============================================================
   RIGHT: sidebar
   ============================================================ */
#sidebar {
  display: flex;
  flex-direction: column;
}

.s-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 16px 10px;
  text-align: center;
  transition: filter 0.2s;
  position: relative;
}
.s-box:nth-child(1) { background: var(--sb1-bg); }
.s-box:nth-child(3) { background: var(--sb2-bg); }
.s-box:nth-child(5) { background: var(--sb3-bg); }
.s-box:hover { filter: brightness(1.15); }

.s-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  pointer-events: none;
}
.s-box:nth-child(1)::before { background-image: url('img/textures/parchment2.webp'); }
.s-box:nth-child(3)::before { background-image: url('img/textures/parchment2.webp'); }
.s-box:nth-child(5)::before { background-image: url('img/textures/parchment4.webp'); }

.s-box .icon,
.s-box p { position: relative; z-index: 1; }

.s-box .icon {
  font-size: 1.5rem;
  animation: sg 3.5s ease-in-out infinite;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}
@keyframes sg {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.1); filter: drop-shadow(0 0 7px rgba(255,255,255,0.4)); }
}

.s-box p {
  color: var(--sb-text);
  font-size: 11px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Decorative SVG divider */
.s-divider {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  background: linear-gradient(to right, var(--sb1-bg), var(--sb2-bg));
  color: var(--divider-color);
  overflow: visible;
  transition: color 0.3s;
}
.s-divider:last-of-type {
  background: linear-gradient(to right, var(--sb2-bg), var(--sb3-bg));
}
.s-divider svg {
  width: 100%;
  height: 18px;
  display: block;
}

/* ============================================================
   THEME BAR
   ============================================================ */
#theme-bar {
  background: var(--theme-bar-bg);
  border-top: 2px solid var(--window-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  flex-wrap: wrap;
  transition: background 0.3s, border-color 0.3s;
}

.tbtn {
  background: transparent;
  border: 1px solid var(--tbtn-border);
  color: var(--tbtn-text);
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.tbtn:hover {
  background: var(--tbtn-hover-bg);
  color: var(--nav-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.tbtn.on {
  background: var(--tbtn-hover-bg);
  color: var(--nav-hover);
  box-shadow: 0 0 10px var(--glow), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* NASA */
#apod-preview {
  display: none;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

/* NASA */