/* Google Fonts are assumed to be loaded in your default.html:
   Bodoni Moda for headers, Playfair Display for body and links */

body {
    /*font-family: 'Playfair Display', serif;*/
    font-family: 'Arial';
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #f8f8f8;
    color: #222;
}

header {
    background-color: #000000;
    color: white;
    padding: 1.5em 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header h1 {
    /*font-family: 'Bodoni Moda', serif;*/
    font-family: 'Arial';
    font-weight: 400; /* lighter weight for title */
    font-size: 2em;
    margin: 0 0 0.5em 0;
    text-align: center;
}

header nav {
    /*font-family: 'Playfair Display', serif;*/
    font-family: 'Arial';
    display: flex;
    gap: 1em;
}

header nav a {
    text-decoration: none;
    color: white;
    font-weight: 400;
    padding: 0.4em 0.8em;
    transition: background-color 0.3s ease;
}

header nav a:hover,
header nav a.active {
    background-color: #A9A9A9;
    border-radius: 4px;
}

/* Only homepage text styling */
.homepage-text {
    background-color: #fff;   /* white background */
    max-width: 900px;         /* limit width */
    margin: 2em auto;         /* center horizontally and vertical spacing */
    padding: 2em;             /* padding around text */
    border-radius: 8px;       /* optional: rounded corners like main pages */
    text-align: center;       /* optional: center the text */
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    -family: 'Bodoni Moda', serif;
    -weight: 400;
    color: #000; /* or #222 if you prefer dark gray */
}

/* Image container */
.image-container {
    display: flex;
    justify-content: center;
    margin: 2em 0;
    gap: 20px;
}

.image-container img {
    max-width: 25%;
    height: auto;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
    animation: fadeIn 1.5s ease forwards;
}

/* Buttons */
.button-container,
.button-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 2em;
}

.button-container a,
.button {
    display: inline-block;
    padding: 1em 2em;
    font-size: 1.1em;
    /*font-family: 'Playfair Display', serif;*/
    font-family: 'Arial';
    font-weight: 400;
    background-color: #000000;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.button-container a:hover,
.button:hover {
    background-color: #A9A9A9;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Markdown body */
.markdown-body {
    text-align: center;
    /*font-family: 'Playfair Display', serif;*/
      font-family: 'Arial';
}

/*
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6,
*/
.markdown-body ul,
.markdown-body ol {
  text-align: left;
}
/* Select dropdown */
select {
    font-size: 1.1em;
    padding: 0.4em;
    margin-bottom: 1em;
    max-width: 350px;
}

.page-nav {
  display: flex;
  justify-content: center; /* center the buttons */
  gap: 1em;                 /* space between Back and Forward */
  margin-top: 2em;
}

.page-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font-size: 1em;
}

.page-link:hover {
  text-decoration: underline;
}



/* Tables */
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-align: center;
}

th {
    background-color: #FFFFFF;
}

/* Make parent container positioned so submenu can sit under it */
.dropdown {
  position: relative;
  display: inline-block; /* makes the parent width = link width */
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;              /* directly below link */
  left: 50%;              /* middle of parent */
  transform: translateX(-50%); /* shift back by half */
  background: #fff;
  min-width: 200px;       /* or adjust to taste */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 1000;
  flex-direction: column;
  padding: 0.25em 0;
}



/* Each submenu link */
.dropdown-content a {
  display: block;
  padding: 0.5em 1em;
  color: #000;
  text-decoration: none;
  /*font-family: 'Playfair Display', serif;*/
   font-family: 'Arial';
}

.dropdown-content a:hover {
  background-color: #f2f2f2;
}

/* Show submenu when hovering over the parent */
.dropdown:hover .dropdown-content {
  display: flex;
}

/* Responsive */
@media (max-width: 768px) {
    .image-container {
        flex-direction: column;
        align-items: center;
    }

    .image-container img {
        max-width: 90%;
    }

    .button-container,
    .button-grid {
        flex-direction: column;
        gap: 10px;
        padding: 0 1rem; /* Add padding to prevent edge overflow */
    }

    .button-container a,
    .button {
        /* Remove width: 100% and use max-width instead */
        max-width: 280px; /* Reasonable max width for mobile buttons */
        width: auto; /* Let content determine width */
        font-size: 1em;
        padding: 0.8em 1.5em; /* Adjusted padding */
        margin: 0 auto; /* Center the buttons */
        text-align: center;
        box-sizing: border-box; /* Ensure padding is included in width */
    }

    /* Ensure the homepage text container is responsive too */
    .homepage-text {
        margin: 1em; /* Reduce margin on mobile */
        padding: 1.5em; /* Reduce padding on mobile */
        max-width: calc(100% - 2em); /* Ensure it doesn't overflow */
    }

    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    header {
        text-align: center;
    }

    header nav {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    header nav a {
        display: block;
        width: 100%;
        max-width: 250px;
        padding: 10px;
        text-align: center;
    }
}