@import url('https://fonts.googleapis.com/css?family=Cantarell:700&display=swap'); /* Modernized Font Import */

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

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

body {
    font: 10pt sans-serif;
    color: #EFF2FB;
    background: #006600;
    font-weight: normal;
}

p {
    line-height: 1.6; /* Adjusted line-height */
    margin: 0 0 1em 0; /* Adjusted margin for bottom spacing */
}

a, a:visited, a:active, a:link {
    color: #FFFFFF;
    text-decoration: none;
}

a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

/* --- Headings --- */
h1 {
    font-size: 225%;
    text-decoration: none;
    background: #000000;
    color: #FFFFFF;
    margin: 0 0 0.5em 0; /* Added bottom margin */
    padding: 1.2em 0 1.2em 9%; /* Original padding might need review for responsiveness */
    font-weight: normal;
    text-align: center;
}

h1:hover {
    text-decoration: underline;
}

h2 {
    font: 10pt Verdana, Helvetica, sans-serif; /* Consider changing pt to em for h2 if needed, e.g., 1.5em */
    font-weight: normal;
    padding: 0.3em 1em 0.15em 1em;
    margin: 0 0 0.5em 0; /* Added bottom margin */
}

h3 {
    font: 10pt Courier New, serif;
    font-weight: normal;
    text-align: justify;
    padding: 0 1em 0 1em;
    margin: 0 0 0.5em 0; /* Added bottom margin */
}

/* --- Header Styles --- */
#header.group {
    background-color: #0b0c0c;
    width: 100%;
    padding: 0.2em 0;
}

#header-wrapper {
    max-width: 860px;
    margin: 0 auto;
    font-size: 200%;
}

#header-wrapper a.logo img {
    vertical-align: middle;
    border: none;
}

#header-wrapper span { /* Site Title Area */
    font-family: 'Cantarell', Arial, sans-serif;
}

#header-wrapper ul { /* Navigation List */
    font-family: 'Cantarell', Arial, sans-serif;
    font-size: 80%;
    display: inline;
}

#header-wrapper li { /* Navigation Item */
    display: inline;
    list-style-type: none;
    margin: 0 0.8em;
}

/* --- Page Structure --- */
div#page {
    background: #006600;
    /* height:auto; DEPRECATED - use min-height if needed, auto is default for height */
    min-height: calc(100vh - 100px); /* Example: ensure it's at least viewport height minus header/footer */
    margin: 3em auto;
    text-align: center;
    /* alignment-baseline: middle; DEPRECATED and not standard */
    max-width: 100%; /* Ensure page can shrink */
}

/* --- Legacy/Unsorted Styles (Review if still needed) --- */
div#links { /* This seems like an old navigation structure, possibly unused now */
    font-size: 14px;
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    background-color: #000000;
    text-align: center;
}
div#links a {
    display: block;
    padding: 9px 0 9px 0;
    margin: 0;
    text-decoration: none;
    text-align: center;
}
div#links a:hover {
    text-decoration:underline;
}

div#page.content { /* .content class on div#page - is this used? */
    margin-bottom: -2000px; /* Old clearfix hack? */
    font-weight: normal;
    padding-bottom: 2000px; /* Old clearfix hack? */
}
div#page span { /* Generic span inside page - too broad? */
    margin: 0 auto;
    text-align: center;
}
div.content { /* Generic .content div - is this used? */
    /* height:100%; DEPRECATED - can cause issues */
    margin-bottom: 0px;
}

table#propic { /* Used for what? Related to old profile pages? */
    display: table;
    width: 70%;
    border: none;
    font: 10pt Verdana, Helvetica, sans-serif;
    font-weight: normal;
    text-align: justify;
    margin: 1em auto; /* Added margin for spacing if used */
}

img#top { /* Generic ID - used where? */
    margin-top: 1em;
}
img.front { /* Generic class - used where? */
    padding: 0.5em 1.5em 0.5em 1.5em;
}


/* --- Styles for index.php --- */
.index-title { /* This is an h2 */
    text-align: center;
    width: 100%;
    /* font-size can be inherited or specified if h2 base needs override */
}

.profiles-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

.profile-item {
    text-align: center;
    width: 150px; /* This acts as max-width due to flex item behavior */
}

.profile-item a { /* Link wrapping content in profile item */
    text-decoration: none;
    color: inherit;
    display: block; /* Make the whole area clickable if desired */
}

.profile-item img { /* Profile image in the grid item */
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ccc;
    max-width: 100%;
    margin-bottom: 0.5em; /* Space between image and name */
}

.profile-image-fallback {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5em auto; /* Centered and space below */
    border: 2px solid #ccc;
    max-width: 100%;
}

/* --- Styles for view_profile.php --- */
.profile-main-image {
    max-width: 150px;
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    border: 1px solid #ccc;
}

.profile-gallery-image {
    max-width: 180px;
    max-height: 180px;
    width: 100%;
    height: auto;
    margin: 5px;
    border: 1px solid #ccc;
    display: inline-block;
    vertical-align: top;
}

/* --- Styles for pics.php --- */
.pics-list-container {
    padding: 20px;
    text-align: left; /* Overrides div#page text-align:center */
}

.gallery-list {
    list-style-type: disc;
    padding-left: 40px;
    margin-top: 1em;
    margin-bottom: 1em;
}
.gallery-list li {
    margin-bottom: 0.5em;
}

/* --- Styles for view_gallery.php --- */
.gallery-container {
    text-align: center;
    padding: 10px 0;
}

.gallery-image-item {
    max-width: 200px;
    max-height: 200px;
    width: 100%;
    height: auto;
    margin: 10px;
    border: 1px solid #ccc;
    display: inline-block;
    vertical-align: top;
}

/* --- Responsive Design --- */
@media (max-width: 767px) {
    /* Page Structure */
    div#page {
        margin: 1em auto;
        padding: 10px;
    }

    /* Header */
    #header-wrapper {
        font-size: 150%;
        text-align: center;
    }
    #header-wrapper span {
        display: block;
        margin-bottom: 10px;
    }
    #header-wrapper ul {
        display: block;
        padding-left: 0;
    }
    #header-wrapper li {
        display: block;
        margin: 0.5em 0;
    }
    /* #header-wrapper a.logo img { /* No specific change yet */ } */

    /* Headings */
    h1 {
        font-size: 180%;
        padding: 0.8em 5%;
    }
    h2 {
        font-size: 1.2em; /* Approx 14pt-15pt if base is 10pt for body */
    }
    /* .index-title adjustments can be added if h2 general is not enough */

    /* index.php - Profile Grid */
    .profiles-grid {
        gap: 10px;
        padding: 10px;
    }
    .profile-item {
        width: 45%; /* Two items per row */
    }
}

@media (max-width: 480px) { /* Very small mobile */
    /* index.php - Profile Grid */
    .profile-item {
        width: 90%; /* One item per row */
    }
}