/* ---- General Body Styling ---- */
body {     
    color: #000; /* Black text color */
    font-family: "Roboto", serif; /* Font set to Roboto */
}  

/* ---- Set up site grid layout ---- */
.wrapper {     
    display: grid; /* Using CSS Grid for layout */
    grid-template-columns: 1fr 300px; /* Main content takes up most space, sidebar has a fixed 300px width */
    grid-template-rows: auto; /* Rows adjust automatically based on content height */
    grid-template-areas: 
        "header header" /* Header spans across both columns */
        "nav nav" /* Navigation spans across both columns */
        "main aside" /* Main content and sidebar are side by side */
        "footer footer"; /* Footer spans across both columns */
    grid-gap: 4px; /* Gap between grid items */
}

/* ---- Common styling for layout sections ---- */
header, nav, main, aside, footer {     
    padding: 20px; /* Padding for all sections */
    border-radius: 10px; /* Rounded corners for all sections */
}  

/* ---- Header Section ---- */
header {     
    grid-area: header; /* Defines the header area in the grid */
    background-color: #000000; /* Black background */
    color: #fff; /* White text */
    padding: 0px; /* No extra padding for header */
    height: 85px; /* Fixed height for header */
}  

/* ---- Navigation Section ---- */
nav {     
    grid-area: nav; /* Defines the navigation area in the grid */
    background-color: #000000; /* Black background */
    color: #fff; /* White text */
}

/* ---- Main Content Section ---- */
main {
    grid-area: main; /* Defines the main content area in the grid */
    background-color: #373737; /* Dark gray background */
    color: #fff; /* White text */
}

/* ---- Sidebar Section ---- */
aside {
    grid-area: aside; /* Defines the sidebar area in the grid */
    background-color: #373737; /* Dark gray background */
    color: #fff; /* White text */
}

/* ---- Footer Section ---- */
footer {
    grid-area: footer; /* Defines the footer area in the grid */
    background-color: #000000; /* Black background */
    color: #fff; /* White text */
    text-align: right; /* Right-align text in footer */
}

/* ---- Grid for front page images ---- */
.homeimages {     
    display: grid; /* Using CSS Grid for image layout */
    grid-template-columns: 250px 250px; /* Two columns of 250px each */
    grid-template-rows: auto; /* Row height adjusts automatically */
    grid-template-areas: 
        "trail enduro" /* Trail and Enduro images in first row */
        "dirtjump downhill"; /* Dirtjump and Downhill images in second row */
    grid-gap: 20px; /* 20px gap between images */
    width: 520px; /* Total width of the image grid */
    margin: auto; /* Center the grid horizontally */
    padding: 5px; /* Padding around the grid */
}

/* ---- Image Grid Areas ---- */
.trail {grid-area: trail;} 
.enduro {grid-area: enduro;} 
.dirtjump {grid-area: dirtjump;} 
.downhill {grid-area: downhill;} 

/* ---- General Box Styling ---- */
.box {     
    padding: 20px; /* Padding for boxes */
    border-radius: 10px; /* Rounded corners */
}  

/* ---- Heading Styling ---- */
h1, h2, h3 {     
    font-family: "Open+sans", serif; /* Set font to Open sans */
}  

/* ---- Specific styling for H1 ---- */
h1 {     
    font-size: 300%; /* Large font size for main heading */
    padding-left: 150px; /* Indentation to the left */
    margin: auto; /* Center the heading */
    position: relative; 
    top: 50%; /* Center the heading vertically */
    transform: translateY(-50%); /* Adjust position to vertically center */
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%);
}

/* ---- Image Styling with Rounded Corners ---- */
img.roundleft {
    border-top-left-radius: 10px; /* Rounded top-left corner */
    border-bottom-left-radius: 10px; /* Rounded bottom-left corner */
    box-shadow: 1px 0px 10px #000; /* Shadow on left side */
    float: left; /* Float image to the left */
}

.allround {
    border-radius: 10px; /* Rounded corners for images */
    box-shadow: 1px 0px 10px #000; /* Shadow on left side */
    float: left; /* Float image to the left */
}

/* ---- Center Text Styling ---- */
.centered {     
    text-align: center; /* Center align text */
}

/* ---- Hover Effects for Boxes ---- */
.hvrbox, .hvrbox * {
    box-sizing: border-box; /* Include padding and border in element's width and height */
}

.hvrbox {
    position: relative; /* Positioning context for the hover effect */
    display: inline-block; /* Inline-block display */
    overflow: hidden; /* Hide overflow */
    max-width: 250px; /* Max width for the box */
    border-radius: 20px; /* Rounded corners */
    height: 250px; /* Fixed height */
}

.hvrbox img {
    max-width: 100%; /* Ensure image fills the box width */
}

.hvrbox .hvrbox-layer_bottom {
    display: block; /* Show bottom layer */
}

.hvrbox .hvrbox-layer_top {
    opacity: 0; /* Make top layer invisible by default */
    position: absolute; /* Position the top layer absolutely */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    color: #fff; /* White text */
    padding: 15px; /* Padding for text */
    transition: all 0.4s ease-in-out; /* Smooth transition effect */
}

/* Show top layer when hovering or when active */
.hvrbox:hover .hvrbox-layer_top, .hvrbox.active .hvrbox-layer_top {
    opacity: 1; /* Make top layer visible */
}

/* ---- Text Styling for Hover Boxes ---- */
.hvrbox .hvrbox-text {
    text-align: center; /* Center align text */
    font-size: 18px; /* Text size */
    position: absolute; /* Absolute positioning */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Exact centering */
}

/* ---- Mobile Text Styling for Hover Boxes ---- */
.hvrbox .hvrbox-text_mobile {
    font-size: 15px; /* Smaller text on mobile */
    border-top: 1px solid rgba(179, 179, 179, 0.7); /* Border for mobile text */
    margin-top: 5px; /* Space above mobile text */
    padding-top: 2px; /* Padding above mobile text */
    display: none; /* Hidden by default */
}

/* Show mobile text when box is active */
.hvrbox.active .hvrbox-text_mobile {
    display: block;
}

/* ---- Hidden Box Styling ---- */
#hidden {     
    display: none; /* Hidden by default */
}

/* ---- Poem Type Styling ---- */
.biketype {     
    font-size: 150%; /* Larger font size */
    font-weight: bold; /* Bold font */
    padding-right: 15px; /* Padding to the right */
}

/* ---- Info Box Styling ---- */
.info {     
    border-style: solid; /* Solid border */
    border-width: 1px; /* 1px width border */
    background-color: #000000; /* Black background */
    border-color: #373737; /* Dark gray border */
    padding: 10px; /* Padding inside info box */
    width: 85%; /* Width of the info box */
}

/* ---- Show/Hide Box Styling ---- */
.showhide {     
    color: #fff; /* White text */
    background-color: #000; /* Black background */
    font-style: italic; /* Italic font style */
    padding: 2px; /* Padding inside the box */
    padding-left: 5px;
    padding-right: 5px;
}

/* Hover effect for showhide box */
.showhide:hover {     
    color: #000; /* Change text color to black */
    background-color: #ffffff; /* Change background to white */
}

/* ---- Link Formatting ---- */
a:link {color:#b1afff;} /* Light blue for unvisited links */
a:visited {color:#907cac;} /* Dark blue for visited links */
a:hover {color:#80788b;} /* Super light blue when hovered */

/* ---- Top Navigation Links Styling ---- */
nav a {
    text-decoration: none; /* Remove underline from links */
}

nav a:link, nav a:visited {
    color: #fff; /* White text for navigation links */
}

nav a:hover {
    color: #907cac; /* Light blue on hover */
}

/* ---- Dropdown Menu Styling ---- */
.dropdown-content {
    border-style: solid; /* Solid border for dropdown */
}

.littlearrow {
    font-size: 75%; /* Smaller arrow size */
}

/* Dropdown button styling */
.dropbtn {
    color: #4b7070; /* Text color for dropdown button */
    padding: 16px; /* Padding inside the button */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
}

/* Container for dropdown menu */
.dropdown {     
    position: relative; /* Position relative for the dropdown content */
    display: inline-block; /* Inline-block display */
}

/* Hidden dropdown content */
.dropdown-content {     
    display: none; /* Hidden by default */
    position: absolute; /* Positioning the dropdown content */
    background-color: #373737; /* Dark gray background */
    min-width: 160px; /* Minimum width for dropdown */
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2); /* Box shadow for dropdown */
    z-index: 1; /* Ensure dropdown is above other elements */
}

/* Links inside the dropdown */
.dropdown-content a {     
    color: black; /* Black text for links */
    padding: 12px 16px; /* Padding inside each link */
    text-decoration: none; /* Remove underline */
    display: block; /* Display as block */
}

/* Hover effect for dropdown links */
.dropdown-content a:hover {     
    background-color: #000; /* Black background on hover */
}

/* Show dropdown content on hover */
.dropdown:hover .dropdown-content {     
    display: block; /* Display the dropdown when hovered */
}

/* Change background color of the dropdown button when hovered */
.dropdown:hover .dropbtn {     
    background-color: #000; /* Change button background to black on hover */
}

/* ---- Google Form Styling ---- */
iframe {     
    width: 85%; /* Set width of iframe */
    height: 754px; /* Set height of iframe */
    margin: auto; /* Center iframe horizontally */
    border: 0; /* Remove border around iframe */
}