/* Global Styles */
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

:root {
 --main-bg-color: #000;
 --main-text-color: white;
 --neumorphism-light: rgba(255, 255, 255, 0.2);
 --neumorphism-dark: rgba(0, 0, 0, 0.7);
 --glow-color-red: red;
}

/* Ensure full viewport height and black background */
html, body {
 font-family: 'Fjalla One', sans-serif;
 margin: 0;
 padding: 0;
 background-color: var(--main-bg-color);
 color: var(--main-text-color);
 text-transform: uppercase;
 font-weight: normal;
 height: 100%;
 width: 100%;
}

/* =========================
 MAIN NAVBAR (CENTERED)
 ========================= */
.navbar {
 display: flex;
 flex-wrap: wrap;
 justify-content: center; /* center HOME → MORE */
 align-items: center;
 background-color: #000000;
 padding: 15px 20px;
 width: 100%;
 min-height: 70px;
 position: relative;
 z-index: 9;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Buttons (navbar + more) */
.navbar a,
.more-button,
.more-links a {
 display: inline-block;
 padding: 15px 25px;
 margin: 8px;
 text-decoration: none;
 color: var(--main-text-color);
 font-weight: normal;
 font-size: 16px;
 letter-spacing: 2px;
 background-color: var(--main-bg-color);
 border-radius: 10px;
 transition: all 0.3s ease-in-out;
 box-shadow: -10px -10px 20px var(--neumorphism-light),
 10px 10px 20px var(--neumorphism-dark);
 white-space: nowrap; /* keep labels on one line */
 border: none;
 cursor: pointer;
}

.navbar a:hover,
.more-button:hover,
.more-links a:hover {
 animation: glowRedBlack 3s infinite;
}

/* =========================
 MORE LINKS (GRID, CENTERED)
 ========================= */

/* Hidden by default */
.more-links {
 display: none;
 background-color: var(--main-bg-color);
 padding: 20px 10px 30px;
 border-radius: 10px;
 width: min(1600px, 100%); /* max width, but responsive */
 margin: 20px auto 0; /* center the whole block */
 box-sizing: border-box;
 gap: 16px 24px; /* row/column spacing */
}

/* When the JS adds .active or .visible, show as grid */
.more-links.active,
.more-links.visible {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 justify-items: center; /* center each button in its column */
 align-items: center;
}

/* =========================
 GLOW EFFECT
 ========================= */
@keyframes glowRedBlack {
 0%, 100% {
 box-shadow:
 0 0 15px 5px var(--glow-color-red),
 0 0 30px 10px var(--glow-color-red),
 0 0 45px 15px var(--glow-color-red);
 }
 50% {
 box-shadow:
 0 0 15px 5px var(--main-bg-color),
 0 0 30px 10px var(--main-bg-color),
 0 0 45px 15px var(--main-bg-color);
 }
}

/* Prevent navbar items from shrinking weirdly */
.navbar > * {
 flex-shrink: 0;
}

/* =========================
 MOBILE
 ========================= */
@media (max-width: 768px) {
 .navbar {
 flex-direction: column;
 padding: 10px;
 }

 .navbar a,
 .more-button,
 .more-links a {
 padding: 12px 18px;
 font-size: 14px;
 margin: 6px;
 }

 .more-links {
 width: 100%;
 border-radius: 0;
 }
}
/* =========================================================
 OVERRIDES – UNIFY NAVBAR BACKGROUND WITH HEADER
 ========================================================= */

.navbar {
 background-color: #000 !important;
 background-image: none !important;
}

/* extra safety: navbar right after banner + scrolling banner */
.banner + .scrolling-banner + .navbar {
 background-color: #000 !important;
}