/* =========================
GLOBAL RESET
========================= */
/*
The universal selector (*) removes default browser spacing.
This helps ensure consistency across Chrome, Safari, and Firefox.
box-sizing: border-box makes layout sizing more predictable and easier to control.
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================
GLOBAL PAGE STYLES
========================= */
/*
These are the base styles for the entire website.
We keep them simple so Bootstrap can handle most layout and spacing work.
*/
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f5e8e8;
    color: #222;
}

/*
Bootstrap already uses .container, but this reinforces spacing consistency.
It helps center content and prevents it from stretching too wide.
*/
.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

/* =========================
HEADER STYLING
========================= */
/*
The header is the first thing users see.
We center everything to create a clean and focused introduction.
*/
header {
    text-align: center;
}

/*
The main heading should stand out as the most important text.
We increase font size and add spacing below for clarity.
*/
header h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}

/*
Supporting text explains the purpose of the page.
Spacing keeps it from feeling crowded.
*/
header p {
    margin-bottom: 10px;
}

/* =========================
NAVBAR CUSTOMIZATION
========================= */
/*
Bootstrap handles most navbar behavior.
We only add small enhancements like font weight and hover color.
*/
.navbar-brand {
    font-weight: bold;
    font-size: 1.3rem;
}

/*
Hover effects give users visual feedback when interacting with links.
The !important ensures Bootstrap does not override the color change.
*/
.nav-link:hover {
    color: #00ff88 !important;
}

/* =========================
PODCAST SECTION
========================= */
/*
This section is visually emphasized with a dark background.
It helps draw attention to featured content.
*/
#Podcast {
    background: #111;
    color: #fff;
    padding: 40px 20px;
    border-radius: 10px;
}

/*
Cards inside the podcast section are styled to match the dark theme.
Removing borders creates a cleaner, modern look.
*/
#Podcast .card {
    background: #1e1e1e;
    border: none;
    color: #fff;
}

/*
Hover effect makes cards feel interactive.
The slight scale increase draws attention without being distracting.
*/
#Podcast .card:hover {
    transform: scale(1.02);
    transition: 0.3s ease;
}

/* =========================
EPISODE GALLERY
========================= */
/*
This section displays multiple episodes in a grid layout.
Spacing helps prevent the design from feeling crowded.
*/
#Gallery {
    margin-top: 40px;
}

/*
Cards are styled for consistency and readability.
Rounded corners give a softer, modern appearance.
*/
#Gallery .card {
    border-radius: 10px;
}

/*
Hover effect lifts the card slightly.
This makes each item feel clickable and interactive.
*/
#Gallery .card:hover {
    transform: translateY(-5px);
    transition: 0.3s ease;
}

/* =========================
LOCATION & CONTACT SECTIONS
========================= */
/*
These sections are new additions.
We add spacing so they feel separate from other content.
*/
#Location,
#Contact {
    margin-top: 40px;
}

/* =========================
FORM STYLING
========================= */
/*
Forms are important for user interaction.
We rely on Bootstrap styling but keep spacing consistent.
*/
form {
    margin-top: 20px;
}

/*
Inputs should be easy to read and interact with.
We slightly increase spacing between form elements.
*/
.form-control {
    margin-bottom: 10px;
}

/* =========================
BUTTON STYLING
========================= */
/*
Buttons guide user actions like submitting forms or playing episodes.
We keep styling simple and consistent with Bootstrap.
*/
.btn {
    border-radius: 5px;
}

/*
Hover effect gives feedback when users interact with buttons.
Lower opacity creates a subtle but noticeable change.
*/
.btn:hover {
    opacity: 0.9;
}

/* =========================
FOOTER
========================= */
/*
The footer contains closing information and should not distract from content.
We keep it minimal and clean.
*/
footer {
    margin-top: 40px;
}

/*
Footer text is smaller to distinguish it from main content.
This improves visual hierarchy.
*/
footer p {
    font-size: 0.9rem;
}

/* =========================
RESPONSIVE DESIGN
========================= */
/*
Media queries adjust styles for smaller screens like phones and tablets.
Bootstrap already handles responsiveness, but this improves readability further.
*/
@media (max-width: 768px) {

    /*
    Reduce heading size so it fits better on small screens.
    */
    header h1 {
        font-size: 2rem;
    }

    /*
    Adjust paragraph size for better readability on mobile devices.
    */
    header p {
        font-size: 1rem;
    }

}