/* ===================================
   RESPONSIVE DESIGN (Broad Overview)
   =================================== */

body { /* Global styles for the entire page */
    font-family: sans-serif;
    color: #474961; /* Dark iron color for text */
    background: linear-gradient(
    to bottom right, rgb(216, 214, 213), rgb(255, 255, 255), rgb(48, 47, 47)) no-repeat; /* Subtle gradient background */
    text-align: center; /* Center all text by default. Can be overriden with specific styles*/
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

.header-container { /* Default Styles for the header section - Top area (Title, Subtitle, Motto, Buttons and Logo) */
    width: 100%;
    font-family: 'Bruno Ace SC', sans-serif;
    border-bottom:#636569 7px dotted;
    margin: 0 auto; /* 0 centers the header vertically and auto centers it horizontally*/
    padding: 0; /* This 0 removes the default padding, to control spacing with our own padding in the header-content */
}

.header-content { /* Container for the content inside the header */
    display: flex; /* Flex helps to align items side by side and control spacing */
    flex-direction: row; /* Default layout is side by side (logo on left, text and buttons on right <Best Practice vs Mobile Column>) */
    align-items: center; /* Vertically center items within the header */
    justify-content: space-between; /* Define space between items to push them apart */
    gap: 10px; /* Space between items, can be adjusted as needed */
}

.top-buttons {
    display: flex; /* Use flex to align buttons horizontally */ /* Verify if it is necessary */
    flex: 1; /* This allows the buttons to take up remaining space and push the logo to the left */
    justify-content: center; /* Center buttons horizontally within their container */
    align-items: center; 
}

.logo-rw {
    width: 180px;
    height: auto; /* Maintain aspect ratio of the logo <Explain> */
}

.logo-container {
    display: flex;
    flex: 1; /* This allows the logo container to take up space and push the buttons to the right */
    justify-content: center;
}

.header-text {
    text-align: center; /* Center text within the header text container */
}

#brand {
    margin: 0;
    padding-top: 25px;
    padding-bottom: 15px;
}

#sub-header {
    margin: 0;
    font-size: 1.8rem; /* Slightly smaller than the main header to create a visual hierarchy -Text Size-*/
}

#motto {
    margin-top: 0;
    padding-top: 15px;
    margin-bottom: 20px;
    font-size: 1.7rem; /* Slightly smaller than the sub-header to create a visual hierarchy -Text Size-*/
}

h1 {
    color: #000000;
    letter-spacing: 2px;
    font-size: 3rem; /* Main header size */
}

.media-container {
    height: 100vh; /* Full viewport height to ensure the video takes up the entire screen <Pending Scale> */
}

.main-video {
    width: 50%; /* Set the video to take up half the width of its container */
    height: auto; /* Maintain aspect ratio of the video */
    margin: 20px auto;
    border: 5px solid #636569; /* Dark iron border */
    border-radius: 10px;
}

/* =====================================
   RESPONSIVE DESIGN (MOBILE & TABLETS)
   ===================================== */
@media (max-width: 900px) {
/* 1. Change layout from side-by-side to a vertical stack */
    .header-content {
        flex-direction: column; 
        padding: 20px; /* Use a safe mobile padding */
        gap: 1px; /* Reduce gap for smaller screens */
    }

    /* 2. Re-center the items since they are now stacked */
    .logo-container, .top-buttons {
        justify-content: center; /* Center both the logo and buttons horizontally */ /* Verify if it is necessary */
    }

    /* 3. Scale down the typography so it fits nicely on a phone screen */
    #brand {
        font-size: 2.2rem;
        padding-top: 5px;
    }

    #sub-header {
        font-size: 1.3rem;
    }

    #motto {
        font-size: 1.1rem;
    }

    /* 4. Make the logo slightly smaller */
    .logo-rw {
        width: 140px; 
    }

    /* 5. Ensure the video player shrinks to fit the phone screen too */
    .main-video {
        width: 90%;
        max-width: 90%; /* Ensure the video doesn't exceed the screen width */
    }
}