/* 
 * Colors 
 */
:root {
    /* 🎞️ Film strip & navigation frame */
    --zenit-nav-filmstrip-frame: black;
    --zenit-nav-filmstrip-hole: beige;

    /* 💡 Typography & title */
    --zenit-nav-title-color: beige;
    --zenit-nav-title-underline-color: crimson;
    --zenit-nav-title-shadow-color: var(whitesmoke);

    /* 🔴 Darkroom glow (crimson radiance) */
    --zenit-nav-darkroom-glow-inner: rgba(220, 20, 60, 0.397);
    --zenit-nav-darkroom-glow-outer: rgba(220, 20, 60, 0.6);
    --zenit-nav-darkroom-glow-hover: crimson;
}

/* 
 * 🎞️ Full width navigation with film-strip like effect 
 */
header nav {
    justify-content: space-between;
    align-items: center;
    margin: auto;
    display: block;
    position: relative;
}

header nav h1 {
    text-align: center;
    margin: auto;
    padding: 2rem 6rem;
    margin-bottom: 2rem;
    font-family: "Courier New", Courier, monospace;
    font-size: 2.5rem;
    text-shadow: 0 0 5px var(--zenit-nav-title-shadow-color);
    text-decoration: var(--zenit-nav-title-underline-color) underline;
    background-color: var(--zenit-nav-filmstrip-frame);
    color: var(--zenit-nav-title-color);

    /* 🎬 film-strip frame */
    position: relative;
    border-top: 12px solid var(--zenit-nav-filmstrip-frame);
    border-bottom: 12px solid var(--zenit-nav-filmstrip-frame);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;

    /* 🔴 darkroom glow */
    box-shadow:
        0 0 15px 5px var(--zenit-nav-darkroom-glow-inner),
        0 0 30px 10px var(--zenit-nav-darkroom-glow-outer);
}

/* 🎞️ top sprocket holes */
header nav h1::before,
header nav h1::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 12px;
    background: repeating-linear-gradient(to right,
            var(--zenit-nav-filmstrip-hole) 0,
            var(--zenit-nav-filmstrip-hole) 12px,
            var(--zenit-nav-filmstrip-frame) 12px,
            var(--zenit-nav-filmstrip-frame) 28px);
}

header nav h1::before {
    /* sits above top border */
    top: 2px;
}

header nav h1::after {
    /* sits below bottom border */
    bottom: -2px;
}

/*
 * Login/Logout button styling and animation 
 */
header nav #login,
header nav #logout {
    position: absolute !important;
    top: 40px !important;
    right: 12px !important;
    display: inline-block !important;
    width: unset;
    /* slight initial rotation */
    transform: rotate(-3deg);
    /* smooth hover effects */
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

header nav #login:hover,
header nav #logout:hover {
    /* rotate opposite direction + a little zoom */
    transform: rotate(3deg) scale(1.05);
    /* crimson glow */
    box-shadow: 0 0 12px 4px var(--zenit-nav-darkroom-glow-hover);
}

/* 
 * Server name home nav link styling
 */
/* remove standard link styling, to inherit from nav h1 */
header nav h1 a,
header nav h1 a:visited {
    text-decoration: inherit;
    color: inherit;
    /* same beige as the h1 */
    display: inline-block;
    /* needed for transform scaling */
    transition:
        transform 0.25s ease,
        text-shadow 0.25s ease,
        box-shadow 0.25s ease;
}

/* Zoom and glow when hovered */
header nav h1 a:hover,
header nav h1 a:focus {
    transform: scale(1.07);
    text-shadow: 0 0 8px var(--zenit-nav-darkroom-glow-hover), 0 0 20px var(--zenit-nav-darkroom-glow-hover);
}

/* Slight pushdown and extra glow when clicked */
header nav h1 a:active {
    transform: scale(1.03) rotate(1deg);
    text-shadow: 0 0 20px var(--zenit-nav-darkroom-glow-hover), 0 0 35px var(--zenit-nav-darkroom-glow-hover);
}

/* 
 * Zenit internal services navigation 
 */
/* ==========================================================
 * 🎞️ Zenit Internal Navigation List
 * ========================================================== */

.zenit-internal-nav {
  list-style: none;
  padding: 2rem 3rem;
  margin: 2rem auto;
  background: var(--zenit-nav-filmstrip-frame);
  border: 4px solid var(--zenit-nav-filmstrip-frame);
  box-shadow:
    0 0 25px 8px var(--zenit-nav-darkroom-glow-inner),
    0 0 60px 20px var(--zenit-nav-darkroom-glow-outer);
  border-radius: 8px;
  font-family: "Courier New", Courier, monospace;
}

/* 🩶 Base list item style */
.zenit-internal-nav li {
  position: relative;
  margin: 0.8rem 0;
  padding-left: 2.5rem;
}

/* link appearance */
.zenit-internal-nav a {
  text-decoration: none;
  color: var(--zenit-nav-title-color);
  font-size: 1.1rem;
  display: inline-block;
  transition: transform 0.2s ease, text-shadow 0.2s ease;
}

/* glow + motion */
.zenit-internal-nav a:hover {
  transform: scale(1.05);
  text-shadow: 0 0 6px var(--zenit-nav-darkroom-glow-hover),
               0 0 18px var(--zenit-nav-darkroom-glow-hover);
}

/* click feedback */
.zenit-internal-nav a:active {
  transform: scale(0.97) rotate(-2deg);
}

/* ==========================================================
 * 🎬 Individual Service Icons (using idiomatic emojis)
 * ========================================================== */

.zenit-internal-nav li::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  text-align: center;
  font-size: 1.3rem;
  content: "🔗"; /* fallback icon */
}

/* 🎞️ Home / frontpage */
.zenit-internal-nav li.home::before        { content: "🏠"; }
/* 👤 User info */
.zenit-internal-nav li.userinfo::before    { content: "👤"; }
/* ⛈️ Deluge torrent (rain metaphor) */
.zenit-internal-nav li.deluge::before      { content: "🌧️"; }
/* 🔄 Syncthing */
.zenit-internal-nav li.syncthing::before   { content: "🔄"; }
/* 📰 Miniflux RSS */
.zenit-internal-nav li.miniflux::before    { content: "📰"; }
/* 📊 Grafana */
.zenit-internal-nav li.grafana::before     { content: "📈"; }
/* 🔥 Prometheus */
.zenit-internal-nav li.prometheus::before  { content: "🔥"; }

/* Hover animation for icons */
.zenit-internal-nav li:hover::before {
  transform: scale(1.2) rotate(-5deg);
  filter: drop-shadow(0 0 5px var(--zenit-nav-darkroom-glow-hover));
  transition: transform 0.2s ease, filter 0.2s ease;
}