/* ==============================
   0) Global Reset & Basic Setup
   ============================== */
html, body, h1, h2, h3, p, a, li, ul, ol, table, th, td, form, fieldset, legend, img {
    margin: 0;
    padding: 0;
    font-family: monospace; /* global font style */
}

a {
    color: red !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

/* ==========================
   1) Floating Menu
   ========================== */
/*
   Position the floating menu lower 
   so it doesn't overlap the title.
   Adjust 'top' as needed.
*/
.floating-menu {
    position: fixed;
    top: 1px; /* Move menu down to avoid overlapping the header */
    width: 100%;
    background-color: #333;
    color: #FFF;
    z-index: 1000;
    padding: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.floating-menu > ul {
    list-style-type: none;
    display: flex;
    gap: 10px; /* small gap between top-level menu items */
}

.floating-menu > ul > li {
    position: relative;
}

.floating-menu > ul > li > a {
    display: block;
    padding: 3px 6px; /* tighter menu item spacing */
    color: red !important;
    font-weight: bold !important;
    font-size: 14px; /* adjust as desired */
}

.floating-menu li ul {
    display: none;
    position: absolute;
    background-color: #444;
    top: 100%;
    left: 0;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.floating-menu li:hover ul {
    display: block;
}

.floating-menu li ul li {
    margin: 0;
    position: relative;
}

.floating-menu li ul li a {
    display: block;
    padding: 5px 10px;
    color: red !important;
    font-weight: bold !important;
}

.floating-menu li ul li ul {
    display: none;
    position: absolute;
    background-color: #555;
    top: 0;
    left: 100%;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.floating-menu li ul li:hover ul {
    display: block;
}

/* ==============================
   2) Main Content & Header Area
   ============================== */
/* Increase top padding so site title & subtitle 
   are fully visible before the floating menu. */
.content {
    padding-top: 200px; /* adjust as needed */
    margin: 0 auto;
    max-width: 1200px; /* optional max width */
}

header {
    text-align: center;
    margin: 0 auto;
    padding: 20px 20px 0 20px;
    max-width: 1200px;
}

header h1, header h2 {
    margin: 0.5em 0;
}

header img {
    max-width: 33%;
    height: auto;
    /* aspect-ratio: 1/1 if you want the logo to be square; remove if undesired */
}

@media screen and (max-width: 768px) {
    header img {
        max-width: 50%;
    }
}

@media screen and (max-width: 480px) {
    header img {
        max-width: 75%;
    }
}

/* ==============================
   3) Table & Ratio-Box for Photos/Videos
   ============================== */
/* Table-based layout for photo & video columns */
.attachment-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    background-color: black;
    table-layout: fixed; /* Ensures columns respect assigned widths */
}

.attachment-table th,
.attachment-table td {
    vertical-align: top;
    padding: 6px;
    text-align: center;
    background-color: black;
    color: white;
}

/* 50/50 columns on larger screens */
.photo-cell {
    width: 50%;
}
.video-cell {
    width: 50%;
}

/* On small screens, stack columns vertically */
@media screen and (max-width: 768px) {
    .attachment-table th,
    .attachment-table td {
        display: block;
        width: 100%;
    }
}

/* The ratio-box ensures consistent aspect ratio for images/iframes */
.ratio-box {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 ratio -> 9/16 = 0.5625 => 56.25% */
    height: 0;
    margin: 0 auto;
}

.ratio-box img,
.ratio-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* no cropping for images */
    border: none;
}

/* Prevent tiny videos on very small screens by setting a min-height */
@media screen and (max-width: 480px) {
    .ratio-box {
        min-height: 220px; /* pick a comfortable minimum */
    }
}

/* ==============================
   4) Lightbox for enlarged images
   ============================== */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none; /* hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.lightbox.active {
    display: flex; /* show when active */
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border: 5px solid white;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 30px;
    cursor: pointer;
}

/* ==============================
   5) PDF link below the table
   ============================== */
.pdf-link {
    margin-top: 8px;
    display: block;
    color: red;
}

/* ==============================
   6) Dark Green Forms with Red Text
   ============================== */
/* Style text inputs, file inputs, password/email fields, textareas, selects, and buttons */
form input[type="text"],
form input[type="password"],
form input[type="email"],
form input[type="file"],
form input[type="search"],
form select,
form textarea,
form button {
    background-color: #006400; /* dark green */
    color: red;               /* red text */
    border: 2px solid red;    /* red border */
    padding: 6px 10px;        /* spacing */
    font-size: 14px;
    font-family: monospace;
}

/* Checkboxes & Radios (modern browsers only) */
form input[type="checkbox"],
form input[type="radio"] {
    accent-color: #006400; /* or red, if you prefer */
}

/* Hover & focus states */
form input[type="text"]:hover,
form input[type="password"]:hover,
form input[type="email"]:hover,
form input[type="file"]:hover,
form input[type="search"]:hover,
form select:hover,
form textarea:hover,
form button:hover {
    background-color: #008000; /* a lighter green on hover */
    cursor: pointer;
}

form input:focus,
form select:focus,
form textarea:focus {
    outline: 2px solid red; /* accessibility highlight */
}

form button:hover {
    background-color: #228B22; /* slightly different shade for button hover */
}