/* General Resets and Mobile First Styles */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #f4f4f4;
}

#container {
    max-width: 100%; /* For mobile, allow full width */
    margin: 0 auto;
}

h1, h2, h3 {
    font-family: 'Georgia', serif;
    color: #2c3e50;
    text-align: center;
}

img {
    max-width: 100%; /* Ensures images scale down on smaller screens */
    height: auto;
    display: block; /* Prevents extra space below images */
}

/* Header Styles */
header {
    padding: 5px;
    font-family: Helvetica, sans-serif;
    color: #fff;
    text-align: center;
    text-shadow: 1px 2px 4px #000;
    background: rgba(12,12,18,1); /* Darker starting point for gradient */
    background: linear-gradient(180deg, rgba(12,12,18,1) 0%, rgba(50,60,70,1) 100%); /* Adjusted gradient */
    border-bottom: 2px dashed #888;
}

header .logo {
    max-width: 120px; /* Smaller logo for mobile */
    height: auto;
    margin: 10px auto 5px auto; /* Adjust margin for logo */
    display: block;
}

/* Navigation Styles (Mobile First) */
nav ul {
    font-family: Helvetica;
    margin: 0px;
    padding: 0px;
}

nav ul li {
    position: relative;
    list-style-type: none;
    width: 100%; /* Full width for mobile nav items */
}

nav ul li a {
    width: 100%;
    display: block;
    text-align: center;
    color: white;
    background: rgba(44,48,54,1); /* Darker background for nav links */
    background: linear-gradient(360deg, rgba(44,48,54,1) 0%, rgba(80,90,100,1) 100%); /* Adjusted gradient */
    text-decoration: none;
    padding: 12px;
    border-bottom: solid 1px #999;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

nav ul li a:hover,
nav ul li a:active,
nav ul li a:focus,
nav ul li a.thispage {
    background-color: rgba(88,99,108,1);
    color: rgba(255, 248, 210, 1);
}

/* Dropdown Menu (initially hidden for mobile, shown on hover/focus for larger screens) */
ul > li > ul {
    display: none; /* Hidden by default */
    position: static; /* Stacked for mobile */
    width: 100%; /* Full width for mobile dropdown items */
    background-color: rgba(0,0,0,.9); /* Darker background for dropdown */
}

ul > li > ul li a {
    padding-left: 30px; /* Indent dropdown items */
    border-top: solid 1px #666;
}

/* Column Layout (Mobile First - Single Column) */
#column-layout {
    display: flex;
    flex-direction: column; /* Stack columns vertically on mobile */
    padding: 10px;
    gap: 20px; /* Space between sections/articles */
}

section, aside, article {
    padding: 15px;
    background-color: #fff;
    border: solid 1px #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Footer Styles */
footer {
    padding: 10px;
    font-family: Helvetica, sans-serif;
    color: #fff;
    text-align: center;
    text-shadow: 1px 2px 4px #000;
    background: rgba(12,12,18,1);
    background: linear-gradient(180deg, rgba(12,12,18,1) 0%, rgba(50,60,70,1) 100%); /* Adjusted gradient */
    border-top: 2px dashed #888;
    margin-top: 20px;
}

footer p {
    margin: 5px 0;
}

footer a {
    color: white;
    text-decoration: none;
    padding: 1px 5px;
    display: inline-block; /* Keep them in line */
}

footer a:hover {
    color: antiquewhite;
}

/* Helper Classes */
.floatRight {
    float: right;
    margin: 0 0 15px 15px;
}

.floatLeft {
    float: left;
    margin: 0 15px 15px 0;
}

.callout {
    background-color: #e0f2f7;
    color: #333;
    width: 90%; /* Wider for mobile */
    margin: 15px auto;
    padding: 15px;
    border-left: 5px solid #007bff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 5px;
}

/* Form Styles */
form {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-top: 20px;
}

form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
}

form textarea {
    resize: vertical;
    min-height: 100px;
}

form button {
    background-color: #2c3e50;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease; /* Animation/Transition */
}

form button:hover {
    background-color: #1a242d;
}

/* Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden; /* For rounded corners to apply to borders */
}

table caption {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #2c3e50;
}

th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
    color: #333;
    font-weight: bold;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background-color: #eef;
}

/* Tooltip Styles */
.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: help;
    border-bottom: 1px dotted #007bff; /* Optional: adds a visual cue */
}

.tooltip-text {
    visibility: hidden;
    width: 160px; /* Adjust width as needed */
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position the tooltip above the text */
    left: 50%;
    margin-left: -80px; /* Center the tooltip (half of width) */
    opacity: 0;
    transition: opacity 0.3s ease-in-out; /* Smooth fade-in/out */
    font-size: 0.9em;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Image Attribution Styles */
.attribution {
    font-size: 0.8em;
    text-align: right;
    color: #666;
    margin-top: 5px;
    margin-bottom: 15px;
}

.attribution a {
    color: #007bff;
    text-decoration: none;
}

.attribution a:hover {
    text-decoration: underline;
}


/* Media Queries */

/* Tablet Layout (min-width: 768px) */
@media screen and (min-width: 768px) {
    #container {
        max-width: 960px; /* Constrain main container width for tablets */
    }

    header .logo {
        max-width: 150px; /* Slightly larger logo */
    }

    nav ul {
        display: flex;
        flex-wrap: wrap; /* Allow nav items to wrap if needed */
        justify-content: center; /* Center nav items horizontally */
    }

    nav ul li {
        flex: 1; /* Distribute space among top-level nav items */
        max-width: 20%; /* Example: 5 items, each taking up to 20% */
        min-width: 120px; /* Ensure a minimum width for readability */
    }

    nav ul li a {
        padding: 10px 15px; /* Adjust padding */
        border-bottom: none; /* Remove bottom border for horizontal nav */
        border-right: solid 1px #999; /* Add right border */
    }

    nav ul li:last-child a {
        border-right: none; /* No right border on last item */
    }

    /* Dropdown Menu for Tablet/Desktop */
    ul > li > ul {
        display: none;
        position: absolute; /* Absolute positioning for dropdown */
        left: 0;
        z-index: 10; /* Ensure it's above other content */
        width: 100%; /* Make dropdown span full width of parent li */
        min-width: 150px; /* Minimum width for dropdown */
    }

    ul > li:hover > ul {
        display: block; /* Show dropdown on hover */
    }

    ul > li > ul li a {
        padding-left: 15px; /* Adjust padding for dropdown */
        text-align: left; /* Align dropdown text left */
        background-color: rgba(0,0,0,0.9); /* Darker background */
        color: rgba(219,228,238,1);
        border-top: none; /* Remove top border, will use border-bottom instead */
        border-bottom: solid 1px #444; /* Border between dropdown items */
        border-right: none; /* No right border for dropdown items */
    }

    ul > li > ul li:last-child a {
        border-bottom: none; /* No border on last dropdown item */
    }

    #column-layout {
        flex-direction: row; /* Two columns for tablet */
        flex-wrap: wrap; /* Allow wrapping */
        justify-content: space-between; /* Space out columns */
    }

    section, article, aside {
        flex: 1 1 calc(50% - 10px); /* Two columns, accounting for gap */
    }

    .callout {
        width: calc(100% - 30px); /* Adjust width to fit within a column better */
        margin: 15px auto;
    }

    .floatRight, .floatLeft {
        max-width: 45%; /* Adjust float image size for tablet */
        margin-bottom: 10px;
    }
}

/* Desktop Layout (min-width: 992px) */
@media screen and (min-width: 992px) {
    #container {
        max-width: 1200px; /* Wider container for desktop */
    }

    header .logo {
        max-width: 180px; /* Larger logo */
    }

    nav ul li {
        max-width: 150px; /* Fixed width for nav items on desktop if desired */
    }

    #column-layout {
        flex-direction: row;
        justify-content: space-between;
    }

    section, article {
        flex: 1 1 calc(33.333% - 14px); /* Three columns, accounting for gap */
    }

    aside {
        flex: 1 1 calc(33.333% - 14px); /* If you want aside to be a third column */
    }

    .callout {
        width: 100%; /* Allow callout to fill its parent column */
    }

    .floatRight, .floatLeft {
        max-width: 40%; /* Adjust float image size for desktop */
    }
}