/*
Theme Name: OhioDAR Theme
Author: OhioDAR
Version: 1.0.0
Text Domain: ohiodar // Unique identifier for theme translation
*/

@charset "UTF-8";

/* Body */
body {
    font-family: source-sans-pro;
    background-color: #cf152d; /* Red body background */
    margin: 0; /* Remove default body margins */
    font-style: normal;
    font-weight: 200;
}

/* Container */
.container {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    background-color: #FFFFFF; /* White background for all content inside */
}

/* --- Common Header Bar Styles (for .hero, .alternate-site-header, and .site-header-default) --- */
/* These rules apply to all header types that contain your images */
.hero,
.alternate-site-header,
.site-header-default {
    background-color: #004990; /* Blue background for default inner header */
    padding: 10px 0; /* Padding for default inner header */
    display: flex; /* Ensure flexbox for layout */
    align-items: center; /* Vertically align items */
    justify-content: center; /* Center horizontally if only text */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    z-index: 100;
    position: relative;
}

.hero img {
    display: block; /* Remove extra space below image */
    height: auto; /* Maintain aspect ratio */
}


/* --- Alternate Header Styles (for Inner Pages) --- */
/* This header type is used with the 'Page with Alternate Header & Footer' template */
.alternate-site-header {
    background-color: #004990; /* Blue background for the alternate header */
    padding: 10px 0; /* Padding for the alternate header */
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically align items */
    justify-content: center; /* Space out logo and menu toggle */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

/* --- Default Inner Page Header Styles (.site-header-default) --- */
/* This header type is used for all other inner pages (Scenario 3 in header.php) */
.site-header-default {
    background-color: #004990; /* Blue background for default inner header */
    padding: 10px 0; /* Padding for default inner header */
    display: flex; /* Ensure flexbox for layout */
    align-items: center; /* Vertically align items */
    justify-content: center; /* Center horizontally if only text */
}

/* --- Top Navigation Bar Styles (for all menus: primary, alternate, and default inner) --- */
/* Applies to .topnav and .alternate-topnav which wrap the WordPress menu */
.topnav,
.alternate-topnav {
    overflow: hidden; /* Clear floats */
    background-color: #909090; /* Blue background for the navigation bar */
    display: flex; /* Use flexbox for horizontal menu items */
    justify-content: left; /* Center the menu items */
    align-items: center; /* Vertically align items */
    padding: 1px 0; /* Padding for the nav bar */
    position: relative; /* For positioning the hamburger icon on small screens */
    width: 100%; /* Ensure it spans the full width within the container */
    box-sizing: border-box; /* Include padding in the width calculation */
    flex-wrap: wrap;
    z-index: 1000;
    min-height: 50px;
}

.topnav ul,
.alternate-topnav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex; /* Make menu items display in a row */
    align-items: center; /* Vertically align menu items */
    flex-wrap: wrap;
    width: auto;
}

.topnav ul li a,
.alternate-topnav ul li a {
    display: block; /* Make the whole link clickable */
    color: #ffffff;
    text-align: center;
    padding: 10px 10px;
    text-decoration: none;
    font-size: 15px;
    white-space: nowrap; /* Prevent menu items from wrapping */
}

.topnav ul li a:hover,
.alternate-topnav ul li a:hover {
    background-color: #555; 
    color: #fbe305;
}

/* --- Hamburger Icon Styling --- */

/* Initially hide the icon on desktop */
.topnav .icon,
.alternate-topnav .icon {
    display: none; /* Hide by default on large screens */
    position: absolute; /* Allows positioning relative to its parent .topnav or .alternate-topnav */
    right: 20px; /* Adjust distance from the right edge */
    top: 50%; /* Center vertically relative to parent */
    transform: translateY(-50%); /* Adjust for true vertical centering */
    cursor: pointer; /* Indicate it's clickable */
    z-index: 1001; /* Ensure it's above other elements if menu is overlaid */
}
/* Style the Font Awesome bars icon itself */
.topnav .icon .fa-bars,
.alternate-topnav .icon .fa-bars {
    color: #fff; /* Make the icon white */
    font-size: 28px; /* Adjust size to make it more prominent */
    padding: 8px; /* Add some padding around the icon */
}

/* Add a hover effect for user feedback */
.topnav .icon:hover .fa-bars,
.alternate-topnav .icon:hover .fa-bars {
    color: #cf152d; /* Example: Change to red on hover */
}
/* Ensure social icons in menus (if applicable) are styled consistently */
.topnav .social-icon-link,
.alternate-topnav .social-icon-link {
    display: inline-flex; /* Use flex to center image */
    align-items: center; /* Vertically align image */
    justify-content: center; /* Horizontally align image */
    width: 30px; /* Desired icon size (container) */
    height: 30px; /* Desired icon size (container) */
    padding: 0; /* Remove any default padding from nav links */
    margin: 0 5px; /* Spacing between icons (adjust as needed) */
    box-sizing: border-box; /* Include padding/border in width/height */
    text-decoration: none; /* Remove underline */
    border-radius: 50%; /* Make them circular if you like */
    transition: background-color 0.3s ease;
}

.topnav .social-icon-link img,
.alternate-topnav .social-icon-link img {
    display: block; /* Ensure image behaves as a block */
    max-width: 100%; /* Make sure PNG scales within its container */
    height: auto; /* Maintain aspect ratio */
}

.topnav .social-icon-link.facebook-icon:hover,
.alternate-topnav .social-icon-link.facebook-icon:hover {
    background-color: #3b5998; /* Facebook blue */
}

.topnav .social-icon-link.youtube-icon:hover,
.alternate-topnav .social-icon-link.youtube-icon:hover {
    background-color: #ff0000; /* YouTube red */
}
/* --- Adjustments for the main content wrapper to prevent overlap (ADD THIS NEW SECTION) --- */
main {
    /* If your header is fixed at the top, you need to add padding to the body or main element */
    /* Adjust this value based on the actual height of your header/nav in desktop view */
    padding-top: 60px; /* Example: A good starting point, adjust as needed */
}

.container.page-content-wrapper { /* This seems to be your main content container */
    /* Add some general top padding to the content within the container, in addition to the 'main' padding */
    padding-top: 20px; /* This is padding *inside* the white container */
}
/* --- Responsive Menu Adjustments --- */

/* TABLET-SIZED SCREENS (e.g., 769px to 992px) */
/* In this range, the menu should still be visible, but might adjust spacing or font sizes. */
/* The hamburger icon should remain hidden. */
@media (min-width: 769px) and (max-width: 992px) {
    /* Keep the main navigation visible */
    .topnav .main-nav,
    .alternate-topnav .alternate-nav {
        display: flex; /* Ensure it's still flex to keep items horizontal */
        flex-wrap: wrap; /* Allow items to wrap within the same line if needed */
        justify-content: center; /* Center your menu items if space allows */
        width: 100%; /* Take full width of the container */
    }

    /* Ensure hamburger icon remains hidden */
    .topnav .icon,
    .alternate-topnav .icon {
        display: none;
    }

    /* You might want to adjust padding or font-size for menu items here to prevent cutoff */
    .topnav ul li a,
    .alternate-topnav ul li a {
        padding: 8px 8px; /* Slightly reduce padding for narrower screens */
        font-size: 14px; /* Slightly reduce font size */
    }
}


/* SMARTPHONE-SIZED SCREENS (e.g., up to 768px) */
/* This is where the full menu hides and the hamburger icon appears. */
@media (max-width: 768px) { /* Changed to 768px to catch smaller tablets and smartphones */

    /* Hide the full menu and show the hamburger icon */
    .topnav .main-nav,
    .alternate-topnav .alternate-nav {
        display: none; /* Hide the horizontal menu items */
    }

    .topnav .icon,
    .alternate-topnav .icon {
        display: block; /* Show the hamburger icon */
        right: 10px; /* Adjust position for very small screens if desired */
        font-size: 26px; /* Adjust size */
    }

    /* Style for when the menu is opened (the 'responsive' class is added by script.js) */
    .topnav.responsive,
    .alternate-topnav.responsive {
        position: relative;
        display: flex;
        flex-direction: column; /* Stack items vertically */
        width: 100%;
        background-color: #004990; /* Keep the menu background consistent or change it */
    }
/* Target the main content area and add top padding/margin only when the menu is active/collapsed */
    /* This depends on your specific HTML structure and how the menu overlays */
    /* This targets the <main> element *after* a responsive topnav or alternate-topnav */
    .topnav.responsive + main,
    .alternate-topnav.responsive + main {
        padding-top: 200px; /* Adjust based on the actual height of your *opened* mobile menu */
    }
    /* Adjust the main menu container when responsive */
    .topnav.responsive .main-nav,
    .alternate-topnav.responsive .alternate-nav {
        display: flex;
        flex-direction: column; /* Stack them vertically */
        width: 100%;
        text-align: center; /* Center menu items */
        position: static;
        background-color: #004990;
        padding-top: 50px; /* Add space below header if icon is absolutely positioned there */
        padding-bottom: 10px;
    }

    /* Style individual menu items in responsive mode */
    .topnav.responsive .main-nav li,
    .alternate-topnav.responsive .alternate-nav li {
        width: 100%;
        margin: 5px 0;
        padding: 5px 0;
    }

    .topnav.responsive .main-nav li a,
    .alternate-topnav.responsive .alternate-nav li a {
        color: white;
        padding: 10px 15px;
        display: block;
        text-decoration: none;
    }

    .topnav.responsive .main-nav li a:hover,
    .alternate-topnav.responsive .alternate-nav li a:hover {
        background-color: #cf152d;
        color: white;
    }
}
/* Ensure original menu items still have their styling */
.topnav ul li a,
.alternate-topnav ul li a {
    /* Keep your existing padding, color, etc. for regular menu items */
    color: #ffffff; /* Example: ensure your main nav links are white */
}
/* --- Footer Styles --- */
.site-footer {
    background-color: #004990; /* Blue background color */
    color: #fff; /* White text color for readability */
    padding-top: 30px; /* Keep top padding for overall footer */
    padding-bottom: 0; /* Will manage overall bottom padding via .site-info now */
}

/* Styling for the top image section in the footer */
.footer-top-section {
    padding-bottom: 20px; /* Space below the top image section */
}

.footer-top-image-widget {
    text-align: center; /* Center the image and any content within this widget area */
}

/* Remove white box/border around image specifically in the footer top image widget */
.footer-top-image-widget img,
.footer-top-image-widget figure {
    border: none;
    padding: 0;
    margin: 0 auto;
    background-color: transparent;
}

.footer-top-image-widget img {
    max-width: 100%;
    height: auto;
    display: block;
    padding-bottom: 10px;
}


/* Styling for the widget columns (text columns) */
.footer-widgets-wrap {
    padding-bottom: 0px; /* Ensure no padding below this wrapper */
}

/* Aggressively remove bottom margin from Bootstrap row within footer widgets */
.footer-widgets-wrap .row {
    margin-bottom: 0;
}

/* Ensure no bottom margin on the very last element within any footer widget */
.site-footer .footer-widget *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* General styling for widget titles and content */
.site-footer .footer-widget-title {
    color: #fff;
    font-size: 1.2em;
    margin-bottom: 15px; /* Keep space below widget titles */
    text-align: center;
}

.site-footer .footer-widget {
    margin-bottom: 10px; /* Space between widgets if multiple are in one column */
    text-align: center;
}

/* Ensure paragraph text within footer widgets is white and has no default bottom margin */
.site-footer .footer-widget p,
.site-footer .footer-copyright p {
    color: #fff;
    margin-bottom: 5px; /* Explicitly remove default paragraph bottom margin */
}

/* General link styling in the footer */
.site-footer a {
    color: #f8f9fa;
    text-decoration: none;
}

.site-footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Styling for the copyright area at the bottom */
.site-info {
    text-align: center;
    padding-top: 0px; /* Force no top padding */
    margin-top: 0px; /* Force no top margin */
    padding-bottom: 20px; /* Add desired space below the copyright text itself */
}

.site-info p {
    margin: 0; /* Ensures the paragraph inside has no default top/bottom margins */
    font-size: 0.9em;
}

/* Ensure containers inside the footer are transparent and don't add extra space */
.site-footer .container {
    background-color: transparent;
    color: #fff;
    padding-top: 0;
    padding-bottom: 10px;
}

/* Responsive adjustments for columns if needed */
@media (max-width: 767px) {
    .site-footer .footer-widget.col-md-6 {
        width: 100%;
    }
}

/* IMPORTANT: This rule targets default WordPress image block styling */
figure.wp-block-image {
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
}

figure.wp-block-image img {
    border: none;
    padding: 0;
}
/* Centering for the Inner Pages Footer widgets */
.inner-pages-footer-wrap {
    text-align: center; /* Ensures text and inline elements are centered */
}

/* Target the widget container itself for block-level centering if it has a max-width */
.inner-pages-footer-wrap .widget {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px; /* Adjust this value if your widget content needs more or less width */
}

/* Specifically target images and figures within the inner pages footer widgets */
.inner-pages-footer-wrap img {
    display: block; /* Ensure it's a block element to apply auto margins */
    margin-left: auto;
    margin-right: auto;
    /* Optional: If you want the image to be a specific max-width within the widget */
    max-width: 100%; /* Ensure image doesn't overflow its widget container */
    height: auto;
}

.inner-pages-footer-wrap figure {
    margin-left: auto;
    margin-right: auto;
    display: block; /* Ensure figure is a block element for auto margins */
    /* Optional: If figures inside this footer should also have a max-width */
    max-width: 100%; /* Adjust or remove if figures should be wider */
}

/* If there's a caption, ensure it's also centered */
.inner-pages-footer-wrap figcaption {
    text-align: center;
}