/*
  File: styles.css
  Author: [Your Name]
  Date: [Current Date]
  Description: Fully responsive styles for the Forward Fitness Club website, following the course material.
*/

/* --- MOBILE-FIRST STYLES --- */

/* CSS Reset */
body, header, nav, main, footer, img, h1, h2, ul {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Style for body and default font */
body {
    background-color: #f2f2f2;
    font-family: 'Roboto Slab', serif;
}

/* Style for header and title */
header {
    background-color: #000;
    height: 190px;
    text-align: center;
}

header h1 {
    font-family: 'Francois One', sans-serif;
    font-size: 2.5em;
    color: #fff;
    padding: 1em 0;
}

/* Style for navigation (Mobile View: vertical stack, always visible) */
nav {
    padding: 1em;
    background-color: #1e1e1e;
}

nav ul {
    list-style-type: none;
    text-align: center;
}

nav li {
    display: block; /* Stack links vertically */
    padding: 0.5em 0;
}

nav a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-family: 'Francois One', sans-serif;
    font-size: 1.5em;
    padding: 0.5em;
    border-radius: 10px;
}

nav a:hover {
    background-color: #008000;
    color: #000;
}

/* Style for main content */
main {
    padding: 2em;
    background-color: #fff;
}

/* Style for hero image */
#hero img {
    width: 100%;
    height: auto;
    display: block;
}

.tel-link {
    background-color: #008000;
    padding: 1em;
    width: 80%;
    text-align: center;
    margin: 1em auto;
    border-radius: 15px;
}

.tel-link a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.5em;
}

.map iframe {
    width: 100%;
    height: 450px;
    border: 0;
}

/* Style for footer */
footer {
    padding: 2em;
    text-align: center;
    background-color: #1e1e1e;
    color: #fff;
}

footer p {
    margin: 0.5em 0;
}

footer a {
    color: #fff;
    text-decoration: none;
}


/* --- MEDIA QUERY FOR TABLET AND DESKTOP VIEWPORTS --- */
@media (min-width: 600px) {
    /* Make navigation horizontal on larger screens */
    nav li {
        display: inline-block;
        border: none;
        margin: 0 1%;
    }

    /* Adjust padding for horizontal layout */
    nav a {
        padding: 0.5em 1em;
    }

    /* Style for main content area to have some margins */
    main {
        padding: 2em;
        margin: 0 2%;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
}