/* Stylesheet for chandller bmx website. Aimed to create a visually appealing site for new riders
 (often younger kids) to be on and easily navigate and read, but also for older users to not have
 bright colors and large pages to scroll through. BMX red (#e74c3c) used throughout all pages
 to pop against the white background and black, bold text. All pages have generally the same 
 layout, with sidebars on the left, main content for each specific page on the right, all falling underneath
 the hero image selected for each individual page */
 body { margin: 0;     
        font-family: Arial, sans-serif;
        font-weight: bold; /* Bold font for contrast against white background */
        line-height: 2;
        color: #181717;
        background-color: #f4f4f4;}

/* 2. Responsive Container (Max 1200px). 40px adds space above and below the 
content so it doesn't look squeezed againsted hero section, and auto centers it 
for all screen sizes. max-width 1200px because i didn't want the text to stretch 
apart so much on a massive screen and turn out hard to read */
.container { width: 90%;
             max-width: 1200px;
            margin: 40px auto;
            display: flex;
            gap: 30px;}

/* Styles for header. black background to contrast white text */
header { background: black; 
         color: white;
         padding: 1rem 0; }

/* Styles to make size of company logo small enough to fit in 
navigation bar without pushing links around */
.logo-img { display: block;
            max-height: 180px; /* shrinking the logo to fit and not push links around */
            width: auto;
            padding: 5px 0; }

/* Styles for a call to action button. included on hero image to encourage
users to be immediately drawn to sign up after noticing an image of the track */  
.cta-button { display: inline-block;
               margin-top: 20px;
               padding: 12px 25px;
               background-color: #e74c3c; /* BMX Red */
               color: white;
               font-size: 1.2em;
               font-weight: bold;
               font-style: italic;
               text-decoration: none;
               border-radius: 5px; /* to make button have rounded edges */} 

/* Hover effect on call to action buttonto provide interactivity for users */
.cta-button:hover { background-color: #0000ff; /* blue on hover */
 }

/* Overall styles for h3 headings. mainly in the sidebars on all pages; kept colors and bold
font but reduced size to not dominate and be perceived as new content alongside content
in main elements */
h3 { font-weight: bold;
     font-size: 1em; 
     color: #e74c3c; /* BMX Red */ }

/* Styles for navigation bar */
nav { display: flex;
      justify-content: space-between; /* wanted to push logos to the left, nav links to the right, and fill the middle with empty space for better visibility */
       align-items: center; 
       padding: 0 20px; } /* added padding to keep the navigation links from being smashed on the right side of the screen */

/* Overall styles for navigation links. removed bullet points, flex display to have links
be side to side in a row; 20px of added gap space b/w each nav link to reduce confusion */
.nav-links { list-style: none;
             display: flex;
             gap: 20px; 
             padding: 0;}

/* Styles for links within nav-links box. White text for contrast and no text decoration
to reduce clutter */
.nav-links a { color: #fff; 
               font-size: 1.1em;
                text-decoration: none;
                font-weight: bold;}

/* 4. Styles for hero class selector. i wanted the images used in any page to cover the entire box
not too much vertical for users to need to scroll down to see any website information; 400px because I 
wanted to keep everything necessary upon page loading. Wanted to use flexbox to keep content on top of 
image contained and dead center horizontally and vertically; center alignment for content within 
hero section */
.hero, .hero2, .hero3 { background-size: cover; 
                        background-position: center;
                        height: 400px; 
                        display: flex; 
                        align-items: center; 
                        justify-content: center;
                        text-align: center;
                        border-bottom: 5px solid #e74c3c; }

/* Styles for home page hero image. Only difference between hero images used
is url. linear gradient added to all */
.hero { background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
         url('chandler.png'); }
.hero2 { background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
         url('track'); }
.hero3 { background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('newriders'); }        

/* Styles for headings on all hero sections to make text pop with image 
in the background. italic font, white font color with a shadow to 
to be visible for users */
.hero h1, .hero2 h1, .hero3 h1 { font-size: 3.5em;
                                margin: 0;
                                color: white;
                                font-style: italic; 
                                text-shadow: 2px 2px 4px black; }
        
/*Styles for h2 heading within hero images to be smaller than
h1 below, but still distinguishale from background image. Only have 2 hero
images included because there is no h2 on hero2 image within track schedule page */
.hero h2, .hero3 h2 { font-size: 1.8em;
           margin: 0;
           color: white;
           text-shadow: 2px 2px 4px black; }

/* Styles forlogo container; spacing out the two logos*/
.logo, .usabmx { margin-right: 15px; }

/* Styles for wrapper to have white background to contrast with 
body. box shadow creates good separation from footer */
#wrapper { background-color: #ffffff;
           box-shadow: 0 0 10px black; }

           

/* Styles for main content area; only wanted this content to take up 3 parts availbale for flex 
space */
main { flex: 3; }

/* Styles for h2 heading within main elements. 2px border bottom to separate the heading 
in red from the text below.  */
main h2 { color: #e74c3c; /* BMX Red */ 
          border-bottom: 2px solid #ccc;
          padding-bottom: 14px; }

main p { font-size: 1.1em;
        margin-bottom: 20px; }

/* Styles for sidebar that contain track status, address, and schedule times. background
color was originally set to ccc to match border bottom but turned out too dark, update for a 
lighter shade to reduce the impact but still contain the content within. */ 
.sidebar { flex: 1;
           background: #f9f9f9;
           padding: 20px;
           border-radius: 8px;
           border-left: 5px solid #e74c3c; 
           height: fit-content; }

/* Styles for list within sidebar. padding to keep everything lined up */
.sidebar ul { padding-left: 20px; }

/* Styles for hover pseudo class. when users hover over navigation links the text is displayed
in same BMX red as headings and is underlined to further distinguish form other links and 
provide more perceived interactitvity */
.nav-links a:hover { color: #e74c3c;
                    text-decoration: underline; }

/*Styles for birthday promo on home page. Solid red borders top and bottom to match them but
differ slightly from bmx red. used cta button to link straight to emailing info@chandlerbmx */
.promo { background-color: #f4f4f4;
         padding: 20px;
         text-align: center;
         border-top: 4px solid #ff0000; 
         border-bottom: 4px solid #ff0000; }

/* Styles for both tables within website to keep with continuity. Tables take full width and 
borders collapse to keep table tight. white background so as not to relate table information
with info within sidebars to the left*/
table { width: 100%;
        margin-top: 20px;
        border-collapse: collapse;
        background-color: #fff;}

/* Styles for table headings and data. 10 padding keeps table from getting too large and separating;
solid gray (ddd) border to keep table in form and text separate. centered text would 
be too much side-to-side scanning, used left align to push against table borders */
th, td { padding: 10px;
         border: 3px solid #ddd;
         text-align: left; }

/* Added styles for table headings only to make table headings separate from data
within cells */
th { background-color: #222; 
     color: white; }

/* Added styles for form on new rider sign up page. Learned that I could add styles for
select, input, and textareas on form. Didnt like the default display of form that pushed 
text area to the right of the labels, so i adjusted the display settings of each to keep 
label areas separate and to the right of the labels; knocked the width down to 80%
to not have a massive text area stretched to the edge of the screen  */ 
.form-group { margin-bottom: 20px;
              text-align: left; }

.form-group input, .form-group select, .form-group textarea { display: block;
                                                              width: 80%;
                                                              padding: 10px;
                                                              border: 1px solid #ccc;}

/*Added styles for footer to center align at bottom of the page with added padding; 
reduced font size but kept large enough to be visible */
footer { width: 100%;
         text-align: center;
         padding: 20px 0; 
         font-size: .8em; }


/* 5. Mobile responsiveness media query placed at the bottom
of stylesheet. changes the layout for screens on tablets or phones; column flex-direction
to stack navigation when viewed on small screens; margin and alignment for nav links
to add spacing between when they are stacked; reduced logo size from 180px to 40px when screen is 
small to reduce overall size of navigation and to not let logo dominate the page and 
navigation area on smaller screens  */
@media (max-width: 768px) {
        nav { flex-direction: column;
            }
        .nav-links { margin-top: 1rem;
                    flex-direction: column;
                    text-align: center;
                    gap: 10px; }
        .logo-img { max-height: 40px;
                    margin: 0 auto; }
        }