*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Remove background-image from body, move it to ::before */
body {
    position: relative;
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
    overflow-x: hidden;
    /* avoid horizontal scroll */
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: 1fr auto;
    background-color: #e6f0e6;
}


/* Ensure all page content sits above overlay and background */
body * {
    position: relative;
    z-index: 1;
}


.container {
    max-width: 60em;
    /* 960px if 1em = 16px */
    width: 100%;
    margin: 0 auto;
    padding: 1em;
}

header {
    position: relative;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
    background-image: url('news-4927976_1949.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    /* Let height be content-based */
    display: block;
    /* NOT flex */
    padding: 2rem 1rem;
    /* Some spacing around the content */
}

header::before {
    content: "";
    position: absolute;
    inset: 0;
    /* shorthand for top: 0; right: 0; bottom: 0; left: 0 */
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 0;
    pointer-events: none;
}

header * {
    position: relative;
    z-index: 1;
}

/* Navigation using grid with fractional units */
nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Default: 2 columns for mobile */
    gap: 0.75rem;
    max-width: 960px;
    /* Ensures layout doesn't overflow */
    margin: 0 auto;
    /* Center it */
    width: 100%;
    /* Let it fill horizontally */
    align-items: start;
    /* Prevent boxes from stretching vertically */
}

@media (min-width: 600px) and (max-width: 899px) {
    nav {
        grid-template-columns: repeat(3, 1fr);
        /* 3 columns for tablet screens */
    }
}

@media (min-width: 900px) {
    nav {
        grid-template-columns: repeat(4, 1fr);
        /* 4 columns for desktop and larger */
    }
}

nav p {
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;
    border: 1px solid #000000;
    border-radius: 0.35em;
    background-color: #e7f6ff;
    width: 100%;
    height: auto;
}

/* main {} */

/* article {} */

section {
    position: relative;
    /* needed for pseudo-element positioning */
    margin-bottom: 0.5rem;
    text-align: left;
    display: block;
    padding: 1rem;
    width: 100%;
    border-bottom: 0.125rem solid #050805;
}

/* aside {} */

footer {
    font-family: Georgia, 'Times New Roman', Times, serif;
    padding: 1.25rem 0;
    width: 100%;
    color: grey;
    background: linear-gradient(135deg,
            rgba(231, 246, 255, 0.3) 0%,
            rgba(30, 88, 255, 0.25) 20%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(61, 151, 56, 0.2) 75%,
            rgba(0, 0, 0, 0.1) 100%);
    text-align: center;
}

/* div {} */

/* span {} */

/* Text................................................. */
h1 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #000000;
    font-size: clamp(2.5rem, 8vw, 4rem);
    /* increased min and vw */
    margin-top: 0.5em;
    margin-bottom: 0.33em;
    word-break: break-word;
    text-align: center;
    padding: 0 1rem;
    /* Prevents text from touching screen edges */
}

h2 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: clamp(1.1rem, 2.5vw, 1.75rem);
    color: #000000;
}

h3 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: clamp(1rem, 2vw, 1.5rem);
}

h4 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: clamp(0.95rem, 1.8vw, 1.25rem);
    color: #000000;
}

h5 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
}

h6 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: clamp(0.75rem, 1.2vw, 0.95rem);
}

p {
    font-size: clamp(0.75rem, 1.8vw, 0.95rem);
}

em {
    font-size: clamp(0.75rem, 1.2vw, 0.95rem);
}

.container {
    width: 90%;
    max-width: 1140px;
    /* Prevents ultra-wide stretch */
    margin: 0 auto;
    /* Center horizontally */
    padding: 1rem;
    /* Optional spacing inside */
    box-sizing: border-box;
}

.button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.responsive-hr {
    border: none;
    height: 0.25rem;
    /* roughly 8px if 1rem = 16px */
    background-color: #002855;
    margin: 1rem 0;
    /* optional spacing */
}

.responsive-hr-thin {
    border: none;
    height: 0.125rem;
    /* half thickness */
    background-color: #002855;
    margin: 1rem 0;
}

.page-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.spacer {
    flex-grow: 1;
}



/* Buttons................................................. */
.find-button {
    background-color: #1e58ff;
    /* High contrast green */
    color: #ffffff;
    padding: 0.75em 2em;
    font-size: 1rem;
    border: none;
    border-radius: 9999em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.find-button:hover {
    background-color: #e7f6ff;
    color: #000000;
    /* Slightly darker green */
}

.list-button {
    background-color: #3d9738;
    /* High contrast green */
    color: #ffffff;
    padding: 0.75em 3em;
    font-size: 1rem;
    border: none;
    border-radius: 9999em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.list-button:hover {
    background-color: lightgreen;
    color: #000000;
    /* Slightly darker green */
}

.category-button {
    background-color: #3B3B3B;
    font-family: Helvetica, Arial, sans-serif;
    /* font-weight: bold; */
    color: #ffffff;
    margin: 0.25rem;
    /* 4px → 0.25rem */
    padding: 0.25rem;
    /* 4px → 0.25rem */
    border: 1px solid;
    border-radius: 0.5em;
    /* 4px → 0.25rem */
    cursor: pointer;
    align-items: baseline;
}

.category-button:hover {
    background-color: whitesmoke;
    font-weight: bold;
    color: #000000;
    transition: 0.2s;
}

.return-main-button {
    background-color: lightgreen;
    font-weight: bold;
    color: #000000;
    padding: 0.35rem;
    border: 1px solid;
    border-radius: 9999em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.return-main-button:hover {
    background-color: #ffffff;
    /* Slightly darker green */
}

.heading-tag {
    font-weight: bold;
    color: #ffffff;
    background-color: #3B3B3B;
    display: inline-block;
    padding: 0.625rem 1.5rem;
    /* 10px 48px → 0.625rem 3rem */
    border: 1px solid;
    border-radius: 0.25em;
}

.flashing-text {
    animation: flash 2s infinite;
}

/* Define the flashing keyframes */
@keyframes flash {

    0%,
    100% {
        color: #1e58ff;
    }

    50% {
        color: #e7f6ff;
    }
}