/* General Styling */
body {
    font-family: Liberation Serif, serif;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100vh;
    background: #fafafa;
}

/* Header Container */
header {
  grid-row: 1;
  background-image: url('images/forest.jpg');
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  padding: 3rem 0;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Larger and darker shadow */
  z-index: 1; /* Ensure it appears on top of other elements */
}

/* Header Title Styling */
header h1 {
  font-family: Moderne Fraktur;
  font-size: 5rem;
  margin: 0;
  line-height: 1.2;

  /* Dual-layer shadow: Black close to text, white farther out */
  text-shadow: 
    0 0 5px black,  /* Inner black glow */
    0 0 10px white; /* Outer white glow */
  
  -webkit-text-stroke: 1px black; /* Solid black stroke around the text */
}

/* Header Link Styling */
.header-link {
  text-decoration: none;
  color: inherit;
}


/* Layout */
.layout {
    display: grid;
    grid-template-columns: 12% 1fr; /* Reduce sidebar width from 20% to 15% */
    grid-template-rows: 1fr;
    height: 100%; /* Full height of the remaining space */
}

/* Sidebar */
.sidebar {
  background: linear-gradient(to right, #f5f5f5, #e0e0e0); /* Soft gray tones */
  padding: 1rem;
  margin-top: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 4px 0 12px rgba(0, 0, 0, 0.2); /* Combined vertical and horizontal shadows */
  overflow-y: auto;
  border-right: 1px solid #d3d3d3; /* Optional: A subtle border for definition */
  position: relative; /* Ensures shadow isn't clipped */
  z-index: 0; /* Prevents stacking issues with other elements */
}

.sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center links horizontally */
    gap: 1rem; /* Add space between links */
}

.sidebar-list li {
    margin-bottom: 0.5rem;
}

.sidebar-list a {
  text-decoration: none;
  color: #333333; /* Neutral dark gray for a modern look */
  font-weight: 600; /* Slightly less bold for a cleaner design */
  transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth transitions for hover effects */
}

.sidebar-list a:hover {
  text-decoration: none; /* Keep it clean and modern */
  color: darkred; /* Slightly lighter gray for hover effect */
  
}

/* Main Content */
main {
    background: white; /* White background for main content */
    padding: 2rem;
    overflow-y: auto;
}

/* Navigation Buttons */
.navigation {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 buttons in a row */
    gap: 1rem;
    justify-items: center;
}

.nav-btn {
    display: block;
    padding: 1rem 2rem;
    background: #c0c0c0; /* Gray */
    color: #333;
    text-decoration: none;
    text-align: center;
    font-size: 1.2rem;
    border: 2px solid #333;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-btn:hover {
    background: #333;
    color: white;
}

/* Font Face */

@font-face {
    font-family: "Moderne Fraktur";
    src: url("../fonts/ModerneFraktur.ttf");
  }






  @font-face {
    font-family: "Liberation Serif";
    src: url("../fonts/LiberationSerif-Regular.ttf");
  }

  @font-face {
    font-family: "Liberation Serif";
    src: url("../fonts/LiberationSerif-Bold.ttf");
    font-weight: bold;
  }

  @font-face {
    font-family: "Liberation Serif";
    src: url("../fonts/LiberationSerif-Italic.ttf");
    font-style: italic;
  }

  @font-face {
    font-family: "Liberation Serif";
    src: url("../fonts/LiberationSerif-BoldItalic.ttf");
    font-weight: bold;
    font-style: italic;
  }

  @font-face {
    font-family: "Liberation Sans";
    src: url("../fonts/LiberationSans-Regular.ttf");
  }

  @font-face {
    font-family: "Liberation Sans";
    src: url("../fonts/LiberationSans-Bold.ttf");
    font-weight: bold;
  }

  @font-face {
    font-family: "Liberation Sans";
    src: url("../fonts/LiberationSans-Italic.ttf");
    font-style: italic;
  }

  @font-face {
    font-family: "Liberation Sans";
    src: url("../fonts/LiberationSans-BoldItalic.ttf");
    font-weight: bold;
    font-style: italic;
  }

  .tagline {
    text-align: center;
    font-size: 1.7rem;
    font-style: italic;
    margin-top: 3rem; 
    margin-bottom: 3rem; /* Space below tagline */
    color: #5a4033; /* Match sidebar link color */
}







.center-text {text-align: center;
  font-size: 1.2rem;
  margin-top: 2rem;
}



/* Form Styling */
.nation-form {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background: #f5f5f5; /* Soft gray background */
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 600px; /* Prevents the form from stretching too wide */
  margin: 0 auto; /* Centers the form */
}

/* Section Title */
.section-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #5a4033; /* Beige-brown tone */
  text-align: center;
}

/* Labels */
.nation-form label, legend {
  font-weight: bold;
  color: #333;
}

/* Input Fields */
.nation-form input[type="text"],
.nation-form textarea,
.nation-form select {
    padding: 0.5rem;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    background: #fff;
    font-size: 1rem;
}

/* Error Message */
.error-message {
  color: red;
  font-size: 0.9rem;
}


/* Flag Section */
.flag-section {
  padding: 1rem;
  border: 1px solid #d3d3d3;
  border-radius: 4px;
  background: #fafafa;
  margin-bottom: 0.5rem; /* Reduce space below the entire flag section */

}

/* Flag Options Vertical Spacing */
.flag-options label {
  display: block; /* Makes options stack vertically */
  margin-bottom: 0.5rem; /* Adds spacing between options */
}

.flag-links {
  font-size: 0.9rem;
  margin-top: 0.5rem; /* Reduce space above flag links */
}

.flag-links a {
  color: #5a4033;
  text-decoration: underline;
}

/* Submit Button */
.submit-btn {
  padding: 0.75rem 1.5rem;
  background: #c0c0c0;
  color: #333;
  border: 2px solid #333;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.submit-btn:hover {
  background: #333;
  color: white;
}

/* File Upload Button */
#flag-upload {
  margin-top: 1rem; /* Adds spacing above the upload button */
}

/* Error Borders */
.error-border {
  border: 1px solid red;
}

/* Error Message */
.error-message {
  color: red;
  font-size: 0.9rem;
  margin-top: 0.3rem;
}





.profile-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.nation-details {
  line-height: 1.6;
  font-size: 1rem;
  color: #333;
}

.nation-flag {
  max-width: 200px;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Adjust the custom flag URL textbox to take full width */
#flag-url {
  width: 100%; /* Make the textbox take up the full width of its container */
  box-sizing: border-box; /* Include padding and border in the element's width */
}






/* ========================== DELETION STYLES ====================== /*

/* Center Delete Button in the Page */
.delete-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}

/* Delete Button Styling */
.delete-btn {
  padding: 1rem 2.5rem; /* Bigger button */
  font-size: 1.5rem; /* Larger font size */
  color: white; /* Text color */
  background-color: #d32f2f; /* Red background for deletion */
  border: none;
  border-radius: 8px; /* Smooth edges */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease; /* Add hover effects */
  font-family: "Liberation Serif", serif; /* Match the theme font */
}

/* Hover Effect for Delete Button */
.delete-btn:hover {
  background-color: #b71c1c; /* Darker red on hover */
  transform: scale(1.05); /* Slightly enlarge the button */
}


/* ========================== PROFILE STYLES ====================== /*

/* Quotation Box */
.nation-motto {
  font-style: italic;
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 1rem;
  color: #333;
}

/* Infobox */
.infobox {
  float: right;
  margin-left: 1rem;
  text-align: left;
  width: 200px;
}

.infobox img.nation-flag {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.infobox-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.infobox-table td {
  padding: 0.5rem;
  border: 1px solid #ddd;
}

/* Dynamic Text Section */
.dynamic-text {
  margin-top: 2rem;
  line-height: 1.6;
  color: #333;
  font-size: 1rem;
}


/* Nation Name */
.nation-name {
  font-size: 1.8rem;
  text-align: center;
  font-weight: bold;
  margin-bottom: 0.5rem;
}



/* ========================== INFORMATION STYLES ====================== /*

/* Wrapped image with caption */
.infobox {
  float: right;
  margin-left: 1rem;
  text-align: center;
  width: 250px; /* Adjust as necessary */
}

.infobox img {
  max-width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.infobox figcaption {
  font-size: 0.9rem;
  color: #555;
  text-align: center;
}


/* Table Styling */
.stats-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0; /* Add spacing around the table */
  font-size: 1rem;
  text-align: left;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
}

/* Header Row Styling */
.stats-table thead th {
  background-color: #5a4033; /* Beige-brown tone */
  color: white;
  padding: 0.75rem;
  border: 1px solid #ddd;
  text-align: center;
}

/* Body Row Styling */
.stats-table tbody td {
  padding: 0.75rem;
  border: 1px solid #ddd;
}

/* Alternate Row Coloring for Readability */
.stats-table tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

/* Center-align numbers in columns */
.stats-table tbody td:nth-child(2),
.stats-table tbody td:nth-child(3) {
  text-align: center;
}

/* Hover Effect for Rows */
.stats-table tbody tr:hover {
  background-color: #eee;
}