/*
Theme Name: Camp DebuggIT
Theme URI: https://campdebuggit.com
Author: Judith Rohatiner
Description: A custom WordPress theme for Camp DebuggIT corporate retreats.
Version: 1.1
Text Domain: campdebuggit
*/

/* Base Styles */
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}
/* Container: Removed overflow hidden so dropdowns can escape */
.container {
    width: 80%;
    margin: auto;
    padding: 20px 0;
}
hr { border: 0; height: 1px; background: #ddd; margin: 40px 0; }

/* Header & Footer */
header {
    background-color: #000000 !important;
    color: #fff;
    padding: 20px 0;
    text-align: center;
    position: relative;
    z-index: 9999; 
}

footer {
    background-color: #000000 !important;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}
/* header, footer { background-color: #000000; color: #fff; text-align: center; padding: 20px 0; } */
header nav ul { list-style: none; padding: 0; }
header nav ul li { display: inline; margin: 0 15px; }
header nav ul li a { color: #fff; text-decoration: none; font-weight: bold; }
/* footer { margin-top: 40px; background-color: #000000; } */

/* Carousel Styles */
.carousel-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto 30px auto;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.carousel-slide { display: none; }
.carousel-slide.active { display: block; }

.carousel-slide img {
    width: 100%;
    height: 500px; /* Fixed height for consistency */
    object-fit: cover;
    display: block;
}

.carousel-prev, .carousel-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 24px;
    transition: 0.3s ease;
    border-radius: 0 3px 3px 0;
    background-color: rgba(0,0,0,0.4);
    border: none;
}

.carousel-next { right: 0; border-radius: 3px 0 0 3px; }
.carousel-prev:hover, .carousel-next:hover { background-color: rgba(0,0,0,0.8); }

/* Main Navigation Container */
.main-nav-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.main-nav-container li {
    position: relative;
    margin: 0 15px;
}

.main-nav-container a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 5px;
}

.main-nav-container a:hover {
    color: #a8dadc; /* A soft highlight color */
}

/* Dropdown Menu Hidden State */
.main-nav-container ul ul,
.main-nav-container ul .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #000000;
    flex-direction: column;
    min-width: 220px;
    z-index: 999;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    padding: 0;
}

/* Show Dropdown on Hover */
.main-nav-container li:hover > ul,
.main-nav-container li:hover > .sub-menu {
    display: flex;
}

.main-nav-container ul ul li,
.main-nav-container ul .sub-menu li {
    margin: 0;
    border-bottom: 1px solid #2c3e50;
    width: 100%;
}
/* Allow Dropdown to Overflow the Header Container */
header .container {
    overflow: visible !important;
}

/* Ensure Header has a high stacking order */
header {
    position: relative;
    z-index: 1000;
}
/* Bulletproof Horizontal Footer Layout using CSS Grid */
.footer-widgets-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Forces exactly 4 equal columns side-by-side */
    gap: 30px; /* Creates perfectly even space between your columns */
    margin-bottom: 30px;
    text-align: left;
    width: 100%;
}

.footer-column {
    min-width: 0; /* Prevents long text or links from breaking the grid */
    margin: 0; /* Removes old flexbox margins so Grid handles the spacing */
}

.footer-widget h4.widget-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #a8dadc;
}

.footer-divider {
    border-color: #4a5d6f;
    margin: 20px 0;
}

/* Make sure it still stacks nicely on mobile phones */
@media (max-width: 768px) {
    .footer-widgets-container {
        grid-template-columns: 1fr; /* Stacks vertically only on small screens */
    }
}