/* Apply border-box sizing so padding and borders stay within set dimensions */
* {
  box-sizing: border-box;
}

/* Reusable colors for the site's green-and-gold theme */
:root {
  /* Green shades used for backgrounds and buttons */
  --green-black: #030a07;
  --green-deep: #07150e;
  --green-dark: #0b2116;
  --green: #123824;
  --green-light: #24563a;

  /* Gold shades used for text, borders, and highlights */
  --gold-dark: #6f4518;
  --gold: #b77927;
  --gold-bright: #dda84a;
  --gold-highlight: #f2cf7a;

  /* General-purpose text and background colors */
  --parchment: #e8d6aa;
  --text-muted: #b9ad91;
  --black: #010403;

  /* Transparent colors used for borders and overlays */
  --gold-border: rgba(183, 121, 39, 0.75);
  --dark-overlay: rgba(2, 9, 6, 0.82);
}

/* Remove default browser spacing and allow full-page layouts */
html,
body {
  margin: 0;
  min-height: 100%;
}

/* Main page appearance and structure */
body {
  /* Use a vertical flex layout so the footer stays below the content */
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  /* Default text styling */
  color: var(--parchment);
  font-family: Georgia, "Times New Roman", serif;

  /*
     * Main page background:
     * A dark transparent gradient is placed over the background image
     * to keep page content readable.
     */
  background:
    linear-gradient(rgba(3, 10, 7, 0.35), rgba(2, 8, 5, 0.65)),
    url("../images/background.png");

  /* Fallback color displayed if the image cannot load */
  background-color: var(--green-black);

  /* Keep the background image centered and covering the viewport */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Main content expands to fill the available vertical space */
main {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* =========================
   Header
   ========================= */

header {
  /* Place the logo and navigation on opposite sides */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 5%;

  /* Dark green header gradient */
  background: linear-gradient(
    180deg,
    rgba(11, 33, 22, 0.97),
    rgba(3, 12, 8, 0.97)
  );

  /* Gold divider and shadow beneath the header */
  border-bottom: 1px solid var(--gold);
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.65);
}

/* Prevent images from overflowing their containers */
img {
  max-width: 100%;
}

/* Header logo sizing */
.site-logo {
  display: block;
  width: auto;
  height: 90px;
  object-fit: contain;
}

/* =========================
   Navigation
   ========================= */

nav {
  /* Arrange links in a row and wrap them when space is limited */
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* Default navigation link appearance */
nav a {
  color: var(--gold-bright);
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 2px 3px var(--black);

  /* Smoothly animate hover changes */
  transition:
    color 0.2s ease,
    text-shadow 0.2s ease;
}

/* Highlight navigation links when the pointer is over them */
nav a:hover {
  color: var(--gold-highlight);
  text-shadow:
    0 0 8px rgba(221, 168, 74, 0.7),
    0 2px 3px var(--black);
}

/* =========================
   Hero banner
   ========================= */

.hero {
  /* Expand the hero and center its content horizontally and vertically */
  flex: 1;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 650px;
  padding: 1rem 1.5rem;
  text-align: center;

  /*
     * Place a dark gradient over the banner image
     * to improve text visibility.
     */
  background:
    linear-gradient(rgba(2, 8, 5, 0.35), rgba(3, 12, 8, 0.88)),
    url("../images/banner.jpg");

  background-size: cover;
  background-position: center;
}

/* Limit the width of the content inside the hero */
.hero-content {
  max-width: 800px;
  padding: 2rem;
}

/* Main hero heading */
.hero h1 {
  margin: 0 0 1rem;
  color: var(--gold-highlight);
  font-size: xxx-large;

  /* Add depth and a subtle gold glow */
  text-shadow:
    0 3px 5px var(--black),
    0 0 20px rgba(183, 121, 39, 0.2);
}

/* Main branding image displayed in the hero */
.hero-image {
  display: block;
  width: min(900px);
  max-width: 100%;
  height: auto;
  margin: 0 auto 1.5rem;
}

/* Hero description text */
.hero p {
  color: var(--parchment);
  font-size: 1.25rem;
  line-height: 1.7;
  text-shadow: 0 2px 5px var(--black);
}

/* Container for the hero call-to-action buttons */
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

/* =========================
   Buttons
   ========================= */

/* Default gold button */
.button {
  display: inline-block;
  padding: 0.9rem 1.5rem;

  color: var(--green-black);
  font-weight: bold;
  text-decoration: none;

  /* Gold gradient gives the button a metallic appearance */
  background: linear-gradient(
    180deg,
    var(--gold-highlight),
    var(--gold-bright)
  );

  border: 1px solid var(--gold-highlight);
  border-radius: 4px;

  /* Inner highlight and outer shadow create depth */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 10px rgba(0, 0, 0, 0.4);

  /* Smooth hover animation */
  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* Brighten and raise buttons slightly on hover */
.button:hover {
  color: var(--green-black);

  background: linear-gradient(180deg, #f8dc91, var(--gold-highlight));

  box-shadow:
    0 0 12px rgba(221, 168, 74, 0.45),
    0 5px 12px rgba(0, 0, 0, 0.45);

  transform: translateY(-2px);
}

/* Alternate dark-green button style */
.button-secondary {
  color: var(--gold-highlight);

  background: linear-gradient(180deg, var(--green), var(--green-dark));

  border-color: var(--gold);
}

/* Password Recovery Link */
.recovery-link {
  color: var(--gold-bright);
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 2px 3px var(--black);

  /* Smoothly animate hover changes */
  transition:
    color 0.2s ease,
    text-shadow 0.2s ease;
}

.recovery-link:hover {
  color: var(--gold-highlight);
  text-shadow:
    0 0 8px rgba(221, 168, 74, 0.7),
    0 2px 3px var(--black);
}

/* =========================
   Server news
   ========================= */

.hero-news {
  width: 100%;
  padding: 4rem 1.5rem;
  text-align: center;

  /* Dark gradient separates the news area from the hero */
  background: linear-gradient(180deg, var(--green-deep), var(--green-black));

  border-top: 1px solid var(--gold-border);
}

/* News section heading */
.hero-news h2 {
  margin: 0 0 2rem;
  color: var(--gold-highlight);

  /* Scale the heading based on the viewport width */
  font-size: clamp(2rem, 5vw, 3.5rem);

  text-shadow:
    0 3px 8px var(--black),
    0 0 15px rgba(183, 121, 39, 0.2);
}

/* Center the news content and limit its maximum width */
.news-container {
  width: min(1100px, 100%);
  margin: 0 auto;
}

/* Individual news article card */
.news-card {
  padding: 2rem;
  text-align: left;

  /* Green panel background with a subtle diagonal gradient */
  background: linear-gradient(
    135deg,
    rgba(18, 56, 36, 0.92),
    rgba(5, 18, 12, 0.97)
  );

  border: 1px solid var(--gold-border);
  border-radius: 4px;

  /* Add a small inner highlight and a deep outer shadow */
  box-shadow:
    inset 0 1px 0 rgba(242, 207, 122, 0.08),
    0 8px 25px rgba(0, 0, 0, 0.55);
}

/* News article title */
.news-card h3 {
  margin: 0.5rem 0 1rem;
  color: var(--gold-highlight);
  font-size: 1.6rem;
}

/* News article body text */
.news-card p {
  color: var(--parchment);
  line-height: 1.7;
}

/* News publication date */
.news-date {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Optional link displayed inside a news article */
.news-link {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--gold-bright);
  font-weight: bold;
  text-decoration: none;
}

/* Brighten news links when hovered */
.news-link:hover {
  color: var(--gold-highlight);
}

/* Registration page styling */

.register-page {
  display: flex;

  justify-content: center;

  align-items: center;

  padding: 5rem 2rem;
}

.register-card {
  width: min(700px, 100%);

  padding: 2.5rem;

  background: linear-gradient(
    135deg,
    rgba(18, 56, 36, 0.95),
    rgba(5, 18, 12, 0.98)
  );

  border: 1px solid var(--gold-border);

  border-radius: 6px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.register-card form {
  display: flex;

  flex-direction: column;

  gap: 1rem;
}

.register-card label {
  color: var(--gold-highlight);

  font-weight: bold;
}

.register-card input {
  padding: 0.9rem;

  font-size: 1rem;

  color: white;

  background: rgba(0, 0, 0, 0.35);

  border: 1px solid var(--gold-border);

  border-radius: 4px;
}

.register-card input:focus {
  outline: none;

  border-color: var(--gold-highlight);

  box-shadow: 0 0 10px rgba(242, 207, 122, 0.35);
}

.register-card button {
  padding: 1rem;
}

/* Recovery page styling */
.recovery-page {
  display: flex;

  justify-content: center;

  align-items: center;

  padding: 5rem 2rem;
}

.recovery-card {
  width: min(700px, 100%);

  padding: 2.5rem;

  background: linear-gradient(
    135deg,
    rgba(18, 56, 36, 0.95),
    rgba(5, 18, 12, 0.98)
  );

  border: 1px solid var(--gold-border);

  border-radius: 6px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.recovery-card form {
  display: flex;

  flex-direction: column;

  gap: 1rem;
}

.recovery-card label {
  color: var(--gold-highlight);

  font-weight: bold;
}

.recovery-card input {
  padding: 0.9rem;

  font-size: 1rem;

  color: white;

  background: rgba(0, 0, 0, 0.35);

  border: 1px solid var(--gold-border);

  border-radius: 4px;
}

.recovery-card input:focus {
  outline: none;

  border-color: var(--gold-highlight);

  box-shadow: 0 0 10px rgba(242, 207, 122, 0.35);
}

.recovery-card button {
  padding: 1rem;
}

/* Turnstile container styling */
.turnstile-container {
  margin: 0.5rem 0;
  width: 100%;
}

/* =========================
   Footer
   ========================= */

footer {
  padding: 1.25rem;
  text-align: center;
  color: var(--text-muted);

  /* Continue the site's dark-green background theme */
  background: linear-gradient(180deg, var(--green-deep), var(--green-black));

  /* Gold divider above the footer */
  border-top: 1px solid var(--gold-border);
}