/* Import the font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap');
/* Global styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Default font stack */
    background-color: #f5f5f5; /* Set the background color for the body */
    color: #333; /* Set the default text color */
}

/* Font face - Uncomment if you have custom fonts */
/*
@font-face {
    font-family: MyFont;
    src: url(DryTransferClarendonCrusty.otf);
}
*/

/*
color scheme:
White:
White #FFF
Light Grey #D6D6D6
Medium Grey #ADADAD
Dark Grey #7D7D7D
Black #000
Peach #FFCC99
Silvery #666699
Red #CC0000
*/
:root {
    --primary-color: #394d6d; /* Set your primary color */
    --secondary-color: #C0C0C0; /* Set your secondary color */
    --accent-color: #89764b; /* Set your accent color */
    --background-color: #000; /* Set your background color */
    --text-color: #333; /* Set your text color */
}

/* Header styles */
.top-nav__static-wrapper {
    background-color: var(--accent-color);
    padding: 5px;
    text-align: center;
    border: 2px solid var(--accent-color);
}

.header-container {
    display: flex;
    justify-content: center; /* Center the content */
    align-items: center;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 10px 15px;
    text-align: center;
    position: relative;
}

.TeamLogo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.TeamLogo img {
    width: 100px;
    height: auto;
}

/* Update the TeamName class */
.Name {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 20px; /* Space between the team logos and the name */
}

.TeamName {
    font-family: 'Cinzel', serif;
    font-size: 48px;
    font-weight: 700;
    color: var(--secondary-color);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.TeamSpons {
    font-size: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.TeamSpons img {
    max-width:30px;
    width: 40px;
    height: auto;
    margin-left: 5px;
}

.PowB {
    font-size: 10px; /* Small "Powered By" text */
    font-weight: bold;
    margin-bottom: 5px;
}

/* Hide the hamburger menu by default */
.hamburger {
    display: none;
    font-size: 30px;
    cursor: pointer;
}

.hamburger:hover{
    background-color: #555; /* Change to your desired hover color */
    color: var(--primary-color);
}

.Nav {
    background-color: var(--primary-color); /* Match the header background color */
}
/* Ensure the Nav ul takes up the full width */
.Nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
}

/* Ensure each Nav li takes up an equal amount of space */
.Nav li {
    flex-grow: 1;
    position: relative;
    display: flex;
    align-items: center;
}

/* Ensure the Nav a elements take up the full width and height of the li */
/* Ensure the Nav ul takes up the full width */
.Nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
}

/* Ensure each Nav li takes up an equal amount of space */
.Nav li {
    flex-grow: 1;
    position: relative;
    display: flex;
    align-items: center;
}

/* Ensure the Nav a elements take up the full width and height of the li */
.Nav a {
    color: var(--secondary-color);
    text-decoration: none;
    padding: 15px; /* Increase padding for larger click area */
    display: flex;
    justify-content: center; /* Center the text horizontally */
    align-items: center; /* Center the text vertically */
    text-align: center;
    width: 100%; /* Make the a tag take up the full width of the li */
    height: 100%; /* Ensure the height is consistent */
    box-sizing: border-box; /* Ensure padding is included in the element's total width and height */
    font-size: 16px; /* Set the desired font size */
    font-weight: bold; /* Make the text bold */
}

/* Dropdown button styling */
.Nav .dropdown {
    width: 100%; /* Ensure the dropdown div takes the full width of the li */
}

.Nav .dropdown button {
    background-color: var(--primary-color); /* Match the header background color */
    border: none; /* Remove border around buttons */
    outline: none; /* Remove outline on focus */
    color: var(--secondary-color); /* Change to your desired text color */
    text-decoration: none;
    padding: 15px; /* Match the padding of the nav a elements */
    display: flex;
    justify-content: center; /* Center the text horizontally */
    align-items: center; /* Center the text vertically */
    text-align: center;
    font-size: 16px; /* Set the desired font size */
    font-weight: bold; /* Make the text bold */
    transition: background-color 0.3s ease; /* Add smooth transition */
    width: 100%; /* Make the button take up the full width */
    height: 100%; /* Ensure the height is consistent */
    box-sizing: border-box; /* Ensure padding is included in the element's total width and height */
    cursor: pointer; /* Indicate that the button is interactive */
}

/* Hover effect for dropdown buttons and nav links */
.Nav .dropdown button:hover,
.Nav a:hover {
    background-color: #555; /* Change to your desired hover color */
    color: var(--primary-color);
}

/* Dropdown menu styles */
.dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    top: 100%; /* Position the dropdown below the nav item */
    width: 100%;
    background-color: #333; /* Change to your desired background color */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: #fff;
    padding: 12px 16px;
    display: block;
}

/* Show the dropdown content on hover */
.Nav li:hover .dropdown-content {
    display: block;
}

.main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
}

.Spons {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.ssponsor {
    width: 100%;
    height: 60px; /* Set a fixed height for the box */
    position: relative;
    display: flex; /* Flexbox to align the image inside */
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
}

.ssponsor img {
    max-width: 100%; /* Image will not exceed the container's width */
    max-height: 100%; /* Image will not exceed the container's height */
    object-fit: contain; /* Scale the image to fit inside the box without cropping */
}

/* Show the first sponsor in both sections by default */
.hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    width: 100%;
    height: 200px; /* Adjust height to be thin */
    position: relative;
    overflow: hidden;
}

.sponsor-container .gsponsor:first-child,
.Spons .ssponsor:first-child {
    display: block;
}

.sponsor-container {
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
    position: relative; /* Use relative positioning if necessary */
    overflow: hidden; /* Hide any overflowing content */
}

.gsponsor img {
    width: 100%; /* Make the image fill the full width */
    height: 100%; /* Make the image fill the full height */
    object-fit: cover; /* Ensure the image covers the entire container, might crop */
}

#next-game {
    text-align: center;
    margin: 20px auto;
    padding: 10px;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border-radius: 8px;
    max-width: 400px;
}

.hero-section img {
    width: 100%;
    height: auto;
}

.schedule-section {
    margin-bottom: 20px;
}

.schedule-section h2 {
    background-color: var(--primary-color);
    color: white;
    padding: 10px;
    text-align: center;
}

.content-section {
    display: flex;
    justify-content: space-between;
}

.left-column, .center-column, .right-column {
    width: 32%;
}

.left-column h2, .center-column h2, .right-column h2 {
    background-color: var(--primary-color);
    color: white;
    padding: 10px;
    text-align: center;
    margin-top: 0;
}

.left-column div, .center-column div, .right-column div {
    padding: 10px;
    background-color: white;
    margin-bottom: 10px;
}

.left-column div, .center-column div, .right-column div {
    padding: 10px;
    background-color: white;
    margin-bottom: 10px;
}

footer {
    background-color: var(--primary-color);
    color: white;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
}

#calendar-container {
    margin-top: 10px;
    text-align: center;
}

#calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

#calendar-header button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 5px;
    cursor: pointer;
    font-size: 14px;
}

#calendar-header button:hover {
    background-color: var(--secondary-color);
}

#color-key {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
}

.key {
    margin: 0 5px;
    padding: 3px 6px;
    border-radius: 3px;
    color: white;
    font-weight: bold;
    font-size: 12px;
}

.key.home {
    background-color: #28a745; /* Green for Home */
}

.key.away {
    background-color: #dc3545; /* Red for Away */
}

.key.practice {
    background-color: #007bff; /* Blue for Practice */
}

#calendar {
    width: 100%;
    border-collapse: collapse;
}

#calendar th {
    border: 1px solid #ddd;
    padding: 4px;
    text-align: center;
    vertical-align: top;
    background-color: var(--primary-color);
    color: white;
    box-sizing: border-box;
    font-size: 12px;
}

#calendar td {
    border: 1px solid #ddd;
    padding: 2px;
    text-align: left;
    vertical-align: top;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    height: 80px; /* Reduced height for the cells */
    width: calc(100% / 7); /* Ensure the cells are equally wide */
    font-size: 12px; /* Smaller font size */
}

#calendar td div {
    margin-top: 3px;
    padding: 3px;
    border-radius: 3px;
    font-size: 10px; /* Smaller font size */
    max-height: 70px; /* Max height for the event div */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Show ellipsis for overflow text */
    white-space: nowrap; /* Prevent text from wrapping */
    position: absolute;
    width: calc(100% - 6px); /* Ensure the div fits within the cell */
    left: 3px; /* Center the div within the cell */
    box-sizing: border-box;
    cursor: pointer; /* Indicate that the box is interactive */
}

#calendar td div.home {
    background-color: #28a745; /* Green for Home */
}

#calendar td div.away {
    background-color: #dc3545; /* Red for Away */
}

#calendar td div.practice {
    background-color: #007bff; /* Blue for Practice */
}

.popup {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    overflow: hidden;
    width: 250px; /* Smaller width for the popup */
}

.popup-content {
    padding: 10px;
    position: relative;
    font-size: 12px; /* Smaller font size */
}

.popup .close {
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
    font-size: 14px; /* Smaller font size */
}

/* Sponsor Section */
.sponsors-section {
    padding: 20px;
}

.sponsors-section h2 {
    font-size: 24px;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 20px;
}

.gold-sponsors, .silver-sponsors, .bronze-sponsors {
    margin-bottom: 30px;
}

.sponsor-images {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.sponsor-images a {
    margin: 10px;
}

.sponsor-images img {
    width: 100%;
    object-fit: contain; /* Ensure the image fits within the container */
}

/* Gold sponsors - 1 sponsor spans the full width */
.gold-sponsors .sponsor-images a {
    flex: 0 0 100%; /* Full width */
}

.gold-sponsors .sponsor-images img {
    width: 100%; /* Makes the image span the width of its container */
    max-width: 600px; /* Prevents the image from becoming excessively wide */
    height: auto; /* Keeps the aspect ratio intact */
    object-fit: contain; /* Ensures the image doesn't stretch */
    margin: 0 auto; /* Centers the image if it's smaller than the container */
    display: block; /* Ensures no inline spacing issues */
    border-radius: 5px; /* Optional: adds slight rounding to the corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow */
}

/* Silver sponsors - 3 sponsors wide */
.silver-sponsors .sponsor-images a {
    flex: 0 0 33.33%; /* Each sponsor takes up 1/3 of the width */
    max-width: calc(33.33% - 20px); /* Adjust width considering margin */
    
}

.silver-sponsors .sponsor-images img {
    max-width: 100%;
    height: auto;
    border-radius: 5px; /* Optional: adds slight rounding to the corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow */
}

.bronze-sponsors .sponsor-images a {
    flex: 0 0 16.66%; /* 6 sponsors per row */
    max-width: calc(16.66% - 20px); /* Adjust width considering margin */
    margin-bottom: 10px; /* Add some margin below */
    
}

.bronze-sponsors .sponsor-images img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 5px; /* Optional: adds slight rounding to the corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow */
}

.transactions img{
    max-height: 50px;
}

.headlines img{
    max-height: 50px;
}

.hero-content img{
    max-height: 70px;
}

.videos {
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center vertically (optional if the container has height) */
    align-items: center; /* Center horizontally */
    text-align: center; /* Center the text inside the div */
    margin: 0 auto; /* Optional: Center the entire .videos container within a larger container */
}

.videos iframe {
    max-width: 100%; /* Ensure the iframe doesn't overflow the container */
    border-radius: 8px; /* Optional: Add rounded corners */
}

.videos h3,
.videos a {
    margin-top: 10px; /* Add spacing between the elements */
}

/*Ownership and Coaching Section*/
.card {
    display: flex;
    align-items: flex-start;
}
  
.cms-image {
    width: 250px;
    height: auto;
    margin-right: 20px;
}
  
.cms-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
  
.cms-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Video Page Styles */
.video-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.video-featured {
    margin-bottom: 30px;
    text-align: center;
}

.video-featured iframe {
    width: 100%;
    max-width: 800px;
    height: 450px;
    border: none;
    margin: 0 auto;
    display: block;
    border-radius: 8px;
}

.video-featured h2 {
    font-size: 24px;
    color: var(--primary-color);
    margin: 20px 0;
}

.video-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.video-item {
    flex: 0 0 calc(33.33% - 20px);
    max-width: calc(33.33% - 20px);
    margin-bottom: 20px;
    text-align: center;
}

.video-item iframe {
    width: 100%;
    height: 200px;
    border: none;
    border-radius: 8px;
}

.video-item h3 {
    font-size: 18px;
    color: var(--text-color);
    margin-top: 10px;
}

/* News Page Styles*/
.news-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Layout for Main Content and Sidebar */
.news-main-content {
    display: flex;
    gap: 20px;
}

.left-column .social {
    display: flex;
    justify-content: space-around; /* Space the icons evenly */
    align-items: center; /* Vertically align icons */
    gap: 10px; /* Optional: Add spacing between icons */
}

.left-column .social img {
    width: 80px; /* Adjust size to fit your design */
    height: 80px;
    object-fit: contain; /* Maintain the aspect ratio */
    background: transparent; /* Ensure the background is transparent */
    border: none; /* Remove any border */
}
/* Main Articles Section */
.news-articles {
    flex: 3;
}

.news-articles h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.news-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.news-item {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    flex: 1 1 calc(50% - 20px); /* Two articles per row */
    max-width: calc(50% - 20px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.news-item img {
    width: 100%;
    height: auto;
}

.news-item h3 {
    font-size: 18px;
    padding: 10px;
}

.news-item p {
    font-size: 14px;
    padding: 0 10px 10px;
}

.news-item .read-more {
    display: block;
    text-align: center;
    background-color: var(--primary-color);
    color: white;
    padding: 10px;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
}

/* Sidebar */
.news-sidebar {
    flex: 1;
    padding: 20px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.news-sidebar h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

.news-sidebar ul {
    list-style: none;
    padding: 0;
}

.news-sidebar ul li {
    margin-bottom: 10px;
}

.news-sidebar ul li a {
    color: var(--primary-color);
    text-decoration: none;
}

/* Responsive breakpoints */
/* Medium screens (tablets, 768px and below) */
@media (max-width: 768px) {
    /* Reduce padding for smaller screens */
    .header-container {
        padding: 10px;
        flex-direction: column; /* Stack the header items */
        text-align: center;
        align-items: center;
        flex-direction: row; /* Ensure row layout even on smaller screens */
    }

    /*.TeamLogo.left-logo, .TeamLogo.right-logo {
        display: block; /* Show both logos 
        max-width: 40px;
        margin-right: 70px; /* Adjust the margin for smaller screens 
    }*/

    .TeamLogo img {
        width: 120px; /* Further reduce logo size */
    }

    .TeamName {
        font-size: 28px; /* Reduce font size for the team name */
    }

    .TeamSpons img {
        max-width: 20px; /* Further shrink sponsor logos */
    }

    .Name {
        margin: 0 10px; /* Adjust margin for smaller screens */
    }

    /* Adjust the nav links */
    .Nav ul {
        display: none; /* Hide the menu initially */
        flex-direction: column; /* Stack the links vertically */
        width: 100%; /* Full width */
        position: absolute;
        top: 60px;
        left: 0;
        background-color: #333;
        z-index: 1000;
    }

    .Nav a:hover, .dropbtn:hover {
        background-color: #575757;
    }

    .Nav ul.active {
        display: flex; /* Show the menu when active */
    }

    .Nav li {
        margin: 0;
        text-align: center;
        width: 100%;
        padding: 10px 0;
    }

    .Nav a, .dropbtn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px;
    }

    .hamburger {
        display: block; /* Show hamburger on small screens */
        margin-left: 10px;
        margin-right: 10px;
        color: white;
    }

    .dropdown-content {
        position: relative; /* Allow dropdowns to work with vertical layout */
        width: 100%;
        box-shadow: none;
    }

    /* Hero and sponsor sections */
    .hero {
        height: 100px; /* Adjust hero height for smaller screens */
    }
    
    /* Adjust content sections */
    .content-section {
        flex-direction: column; /* Stack the columns vertically */
    }

    .left-column, .center-column, .right-column {
        width: 100%; /* Full width for each column */
        margin-bottom: 20px; /* Add space between columns */
    }

    /* Adjust calendar cells for smaller screens */
    #calendar td {
        height: 60px; /* Smaller cells */
        font-size: 10px; /* Smaller font size */
    }

    #calendar td div {
        max-height: 50px; /* Limit the height of events */
    }

    .silver-sponsors .sponsor-images a {
        flex: 0 0 50%; /* 2 sponsors per row on smaller screens */
        max-width: calc(50% - 20px);
    }

    .bronze-sponsors .sponsor-images a {
        flex: 0 0 33.33%; /* 3 sponsors per row on smaller screens */
        max-width: calc(33.33% - 20px);
    }

    .cms-image {
        width: 200px; /* Adjust width for images */
        height: auto;
        margin-right: 15px; /* Reduce margin */
    }

    .cms-image img {
        width: 100%;
        height: auto;
        object-fit: contain; /* Ensure image scaling */
    }

    .cms-text {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center; /* Center text for medium screens */
        text-align: center;
    }

    .card {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center align content */
    }
    
    /* Video Page Styles */
    .video-item {
        flex: 0 0 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

/* Small screens (mobile, 480px and below) */
@media (max-width: 480px) {
    .header-container {
        padding: 5px;
    }

    .TeamLogo img {
        max-width: 100px; /* Further reduce logo size */
    }

    .TeamName {
        font-size: 30px; /* Further reduce font size for the team name */
    }

    .TeamSpons img {
        max-width: 30px; /* Further shrink sponsor logos */
    }

    .Name {
        margin: 0 5px; /* Further adjust margin for very small screens */
    }

    .Nav ul {
        display: none; /* Hidden by default */
        flex-direction: column;
    }
    
    .Nav ul.active {
        display: flex; /* Shown when 'active' is applied */
    }

    .Nav a {
        font-size: 14px; /* Smaller font for navigation */
    }

    .ssponsor {
        height: 30px; /* Set a fixed height for the box */
    }

    .hero {
        height: 80px; /* Smaller hero section */
    }

    .content-section {
        flex-direction: column; /* Stack columns on mobile */
    }

    /* Adjust columns for mobile */
    .left-column, .center-column, .right-column {
        width: 100%;
        margin-bottom: 10px; 
    }

    /* Calendar adjustments for mobile */
    #calendar td {
        height: 50px; /* Smaller cells */
        font-size: 8px; /* Smaller font size */
    }

    #calendar td div {
        max-height: 40px; /* Limit event height */
    }

    .popup {
        width: 200px; /* Reduce popup size */
    }

    .cms-image {
        width: 150px; /* Adjust width for small screens */
        margin-right: 10px; /* Reduce margin */
    }

    .cms-image img {
        width: 100%;
        height: auto;
        object-fit: contain; /* Ensure image scaling */
    }

    .cms-text {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center; /* Center text for small screens */
        text-align: center;
        font-size: 14px; /* Reduce text size */
    }

    .card {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center align content */
        padding: 10px; /* Add padding for spacing */
    }

    /* Video Page Styles */
    .video-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}