/*
Theme Name: Diva Riding Society of Canada
Theme URI: https://example.com/diva-riding-society
Author: Florence Kong
Author URI: https://example.com
Description: A custom WordPress theme for the Diva Riding Society of Canada, featuring a purple and black color scheme with a dynamic header.
Version: 2.0
Requires at least: 5.0
Tested up to: 6.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diva-riding-society
/
body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
color: #333;
}
/ Custom styles for the logo to ensure it scales well and fits the design /
.header-logo {
max-height: 80px; / Larger for the masthead /
width: auto;
border-radius: 9999px;
object-fit: contain;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); / Add a shadow for better visibility */
}

/* New wrapper for the entire header with background image and no rounded bottom /
.header-image-wrapper {
background-size: cover;
background-position: center;
position: relative; / Needed for absolute positioning of background/overlay /
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); / Shadow for the whole header */
}

/* Parallax effect for the header background image */
.parallax-bg {
background-attachment: fixed;
}

/* Removed background-image and ::before from .masthead, now handled by .header-image-wrapper /
.masthead {
position: relative; / Keep relative for its content */
}

/* Ensure sticky nav has correct z-index to appear above content /
.sticky-nav {
top: 0;
z-index: 100; / Keeping a high z-index for the sticky nav */
}

/* Custom CSS to handle dropdown transitions and behavior */
.dropdown-menu {
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
opacity: 0;
transform: translateY(-10px);
visibility: hidden;
pointer-events: none;
}

.dropdown:hover .dropdown-menu {
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
}
/* Mobile menu specific styles /
.mobile-menu-button {
/ Style for the button to open/close the mobile menu /
cursor: pointer;
}
.mobile-menu {
/ Styles for the mobile menu container /
}
.mobile-menu.hidden {
display: none;
}
.mobile-dropdown-toggle {
/ Style for the mobile dropdown toggle links /
display: flex;
justify-content: space-between;
align-items: center;
}
.mobile-dropdown-menu {
/ Style for the mobile dropdown submenu /
display: none;
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
overflow: hidden;
}
.mobile-dropdown-menu.open {
display: block;
max-height: 500px; / Adjust as needed */
opacity: 1;
}

/* Styles for a basic, centered main content area */
.main-content {
min-height: 60vh;
padding: 3rem 1rem;
}