/* ======================
   Global
====================== */
* {
    box-sizing: border-box;
}

body {
    background-image: url("RoadBridge.png");
    background-color: #CDCDCD;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: clamp(0.75rem, 1vw, 1rem);
    max-width: 100%;
    margin: 0;
}

/* ======================
   Container & Center
====================== */
#centre {
    border-bottom: 0;
    border-top: 0;
    color: #000;
    padding: clamp(1rem, 2vw, 2em);
}

#container {
    background: linear-gradient(to bottom right, rgba(218, 147, 69, 1), white);
    margin: 0 auto;
    width: min(90%, 64rem);
    min-height: min(90vh, 74rem);
    position: relative;
    border: 0.25rem solid;
    border-radius: 2.5rem;
    overflow: hidden;
}

/* ======================
   Top bar and Menu Container
====================== */
#top {
    background-color: #000;
    height: auto; /* Allow height to grow with wrapping */
    padding: 0.25em 0; /* Vertical spacing */
}

/* ======================
   Menu (flexbox with wrapping and spacing)
====================== */
.menutop {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem; /* spacing between items */
    font-size: clamp(0.9rem, 1vw, 1em);
    list-style: none;
    margin: 0;
    padding: 0;
}

.menutop li {
    display: flex;
    align-items: center;
    padding: 0.5em 1rem;
    /* Remove borders for cleaner wrap; use gap instead */
    border-right: none;
}

.menutop li:not(:last-child) {
    /* Optional: add subtle separator using right border or skip if gap is enough */
    /* border-right: 1px solid #fff; */
}

.menutop a,
.dropbtn {
    color: #fafafa;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    white-space: nowrap; /* Prevent line breaks inside menu items */
}

.menutop a:hover {
    color: #ff0;
}

/* ======================
   Dropdown Menu
====================== */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: black;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2);
    margin: 0;
    z-index: 1000;
}

.dropdown-content a {
    color: white;
    padding: 0.3rem 0.5rem;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* ======================
   Header
====================== */
#header {
    /*background-image: url("taa.png");
    background-repeat: no-repeat;
    background-position: center 60%; /* shift image slightly down 
    background-size: clamp(300px, 50%, 660px) clamp(50px, 10vh, 80px);*/
    background-color: transparent;
   
    font-size: clamp(1.5rem, 3vw, 2rem);
    height: auto;
    /*padding: clamp(1rem, 3vh, 2rem) 1vw;*/
    margin: 0;
}

/* ======================
   Footer
====================== */
#footer {
    margin: 0 auto;
    padding-top: 0;
    margin-top: 0;
    position: relative;
    bottom: 0;
    width: min(95%, 60rem);
}

#pied {
    border: 2px solid #fafafa;
    padding: 0.5rem;
    text-align: left;
    margin-left: 1rem;
    margin-right: 2%;
    position: absolute;
    bottom: 0;
}

/* ======================
   Gallery
====================== */
.gallery a {
    border-color: #000;
}

.gallery img {
    border-radius: 0.6rem;
    border: 0.125rem solid #021a40;
}

/* ======================
   Headings & Paragraphs
====================== */
#centre h1 {
    overflow-wrap: break-word;
    word-break: break-word;
    margin: 0 0 0.5rem 0;
    max-width: 100%;
}

h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
h2 { font-size: clamp(1.2rem, 3vw, 1.6rem); margin: 0.8rem 0.5rem 0.3rem 0; }
h3 { font-size: clamp(1rem, 2.5vw, 1.1rem); margin: 0.8rem 0.5rem 0.3rem 0; }
h4 { font-size: clamp(0.9rem, 2vw, 1rem); margin: 0.7rem 0.5rem 0.3rem 0; }
h5 { font-size: clamp(0.8rem, 1.5vw, 0.9rem); margin: 0.6rem 0.5rem 0.2rem 0; }

p { margin: 0.2rem 0.5rem 0.5rem 0; }
tr { font-size: clamp(0.9rem, 1.5vw, 1rem); }

hr {
    border: 0;
    color: #000;
    background-color: #000;
    height: 0.125rem;
}

/* ======================
   Responsive Grid Gallery
====================== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;              /* space between images */
    justify-items: center;   /* center images inside each grid cell */
    max-width: 1000px;       /* optional max width of gallery */
    margin: 0 auto;          /* center gallery on page */
}

.gallery-grid img {
    width: 100%;            /* image fills its grid cell */
    height: auto;           /* maintain aspect ratio */
    max-width: 320px;       /* optional max size for large screens */
    border: 3px solid black;
    border-radius: 0.6rem;
    display: inline-block;
    box-sizing: border-box;
}