/* BASE RESET & GLOBAL */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #313740; /* Dark background for the body */
    color: white; /* Default text color set to white */

    /* Enable Flexbox to control the order of direct child sections (header, main, footer) */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures footer is at the bottom of viewport if content is short */
}
a { text-decoration: none; }

/* The <main> tag holds the Carousel and Grid. We must apply flexbox here to order its children. */
main {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows main to take up remaining vertical space */
}

/* --- 0. UTILITIES (New Reusable Class for Centering Content) --- */

/** This reusable class controls the max-width and centering for all main content blocks */
.content-container {
    /* *** MODIFIED: Changed from 90% to 95% *** */
    max-width: 95%; 
    margin: 0 auto;
    width: 100%; 
}

/* --- 1. HEADER (Top Banner) --- */

/* The full-width container for the header background and border (Handles vertical spacing/height) */
#main-header-wrapper {
order: 0;
    /* width: 95%; <-- DELETE THIS LINE */
    width: 100%; /* Should take full width for the background */
    background-color: #313740; /* Night Blue Background */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    /* DESKTOP PADDING: Controls the vertical spacing of the header */
    padding: 23px 0; /* Change horizontal padding to 0 */
}

#main-header {
display: flex;
    
    /* ADD THE .content-container PROPERTIES HERE */
    max-width: 95%; /* Use the same max-width as the reusable class */
    margin: 0 auto; /* Center the element */
    width: 100%; /* Ensure it spans the full width up to max-width */
    
    gap: 30px;
    justify-content: flex-start; 
    flex-wrap: nowrap;
}

.site-title {
    color: #F2600C; 
    font-size: 1.8em;
    font-weight: bold;
    letter-spacing: 1px;
    transition: color 0.3s;
    /* Keeping white-space: nowrap is fine for the title */
    white-space: nowrap; 
}

/* Central buttons (Book a Lesson / Buy Me a Coffee) */
.header-center-buttons {
    display: flex;
    gap: 15px;
    
    
}

.header-btn {
    padding: 8px 15px;
    border: 1px solid white;
    border-radius: 4px;
    color: white;
    font-size: 0.9em;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    white-space: nowrap;
}

.booking-btn {
	border-color: white;
    color: white;
    transition: color 0.3s;
}
.booking-btn:hover {
    color: #F2600C;
}

.tip-btn {
    border-color: white;
    color: white;
    transition: color 0.3s;
}
.tip-btn:hover {
    color: #F2600C;
}

/* Social Icons */
.header-social-icons {
    padding: 8px 15px;
    border: 1px solid white;
    border-radius: 4px;
    color: white;
    font-size: 0.9em;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
	
}

.social-icon {
	border-color: #F2600C;
    color: white;
    font-size: 1.2em;
    transition: color 0.3s;
}

.social-icon:hover {
    color: #F2600C;
}

/* --- 2. CAROUSEL SECTION (Homepage Only) --- */
#carousel-section {
    /* Position 2 (Second element inside the <main> block, after the grid) */
    order: 2;
	max-width: 95%; 
    margin: auto 30px;
    padding: 30px 0;
    background-color: #313740; /* Night Blue Background */
}
/* *** Uses .content-container for max-width/centering (applied in HTML) *** */
.image-carousel-container {
    /* Styles for the Swiper wrapper */
}
/* Applying the 32:9 ratio to the actual Swiper container for half the 16:9 height */
.swiper.mySwiper {
    width: 100%;
    height: auto; /* Ensures aspect-ratio takes precedence */
    aspect-ratio: 30 / 9; /* New, much wider 32:9 ratio */
    overflow: hidden;
}
.swiper-slide {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    overflow: hidden;
    height: 100%; /* Height takes up the full container height */
    /* Flexbox to ensure centering and clipping */
    display: flex;
    justify-content: center;
    align-items: center;
}
.carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}


/* --- 3. CONTENT GRID (index.html only) --- */
#content-grid {
    /* Position 2 (Third element) */
    order: 1;
	max-width: 95%; 
    margin: auto 30px;
    padding: 30px 0;
	
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

    
}

.grid-card {
    background-color: #4a515c;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    color: white;
}

.grid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.card-image {
    height: 200px;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.grid-card:hover .card-image img {
    transform: scale(1.05);
}

.card-text {
    padding: 20px;
}

.card-text h3 {
    margin-top: 0;
    color: #F2600C;
    font-size: 1.4em;
}

.card-text p {
    font-size: 0.95em;
    line-height: 1.4;
}

/* --- 4. Content Pages (about.html, ski.html, travel.html) --- */
.page-content {
    flex-grow: 1;
    padding: 5%  5% ;
    display: flex;
    justify-content: center;
}

.content-wrapper {
    /* DELETE THIS: The fixed 900px width is what causes the misalignment with the 95% header */
    /* max-width: 900px; */ 
    
    /* MODIFIED: Keep 95% width and let margin: 0 auto handle centering */
    max-width: 95%; 
    margin: 0 auto; 
    
    padding: 5% 5%;
    background-color: #4a515c;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    line-height: 1.6;
}

.back-link {
    display: inline-block;
    color: #F2600C;
    margin-bottom: 25px;
    font-size: 1em;
    transition: color 0.3s;
}

.back-link i {
    margin-right: 8px;
}

.content-wrapper h1 {
    color: #F2600C;
    font-size: 2.5em;
    margin-top: 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.content-wrapper h2 {
    color: #fff;
    font-size: 1.6em;
    margin-top: 30px;
    margin-bottom: 15px;
}

.certification-list {
    list-style: none;
    padding-left: 0;
}

.certification-list li {
    margin-bottom: 10px;
    font-size: 1.1em;
}

.certification-list li i {
    color: #F2600C;
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

/* --- 5. FOOTER (Footer) --- */
footer {
    order: 4;
    background-color: #1a1e23;
    color: #998DA6;
    text-align: center;
    padding: 15px 5%;
    font-size: 0.85em;
}


/* --- Responsive Layout --- */
@media (max-width: 992px) {

    /* Carousel Adjustments for Mobile - REVERTED TO 40VH */
    /* *** NOTE: .image-carousel-container now only needs max-height */
    .image-carousel-container {
        max-height: 40vh;
    }

    /* Header Adjustments */
    #main-header-wrapper {
        
		
    }

    #main-header {
        /* On mobile, we stack the title/socials on top, buttons below */
		max-width : 95%;
        flex-wrap: wrap;
        justify-content: center; /* Center everything */
        gap: 15px; /* Vertical gap between rows */
        padding: 0;
    }

    .site-title {
        /* Title takes full width of its row or shares with icons */
        text-align: center;
        margin-bottom: 5px;
		width: 100%;
    }

    /* Make buttons visible on mobile! (This was the desired feature) */
    .header-center-buttons {
        width: 45%;
		 justify-content: center; /* Center everything */
      
    }

    /* Grid Stacking Fix */
    #content-grid {
        grid-template-columns: 1fr !important; /* Force stacking on mobile */
        gap: 40px;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    /* Content Pages Adjustments */
    .content-wrapper {
        padding: 20px;
    }

    .content-wrapper h1 {
        font-size: 2em;
    }

}
/* Style for the specific location link */
.location-link {
    color: white; /* orange*/
    font-weight: bold;
    text-decoration: none; /* Removes the standard underline */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
    border-bottom: 2px solid transparent; /* Hidden underline for hover effect */
}

/* Hover effect */
.location-link:hover {
    color:  #F2600C; /* white */
    border-bottom: 2px solid  #F2600C; /* Adds a colorful underline on hover */
}

/* Add a little space between the icon and text */
.location-link i {
    margin-right: 5px;
}