/* styles.css - External CSS file for styling the MySite.html webpage */
/* For the body and background */
body {
    font-family: "Times New Roman", Arial, sans-serif;
    background-image: url('Images/Varigated_Blue_Reverse_Radial.jpg'); /* Background radial */
    background-size: cover; /* Ensures the background image covers the entire viewport */
    background-position: center; /* Centers the background image */
    color: #f2f6ff;
    line-height: 1.6;
}

body, header, #hero, #contact, footer, .social-box-1, .social-box-2, .Youtube, .Spotify, .iHeartRadio,
h1, h2, h3, #index-page-nav {
    text-align: center; /* Centers the content within the section */
}

/*Style for navigation list items, adds spacing and padding for better readability*/
body, nav li, #index-page-nav {
    margin: 0;
    padding: 0;
}

/*Style for the header, adds padding to create space around the content and improve readability*/   
header {
    padding: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow for depth */
    background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent background for the header */
}

header, main, nav, #index-page-nav  {
    max-width: 1000px; /* Sets a maximum width to prevent it from stretching too wide on large screens */
}

header, #hero, #contact, #about, #podcasts {
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    margin-bottom: 20px;
}

ul {
    list-style-type: none; /* Removes default bullet points from the list */
}

h1, h2, h3, a, footer, .social-box-1, .social-box-2, .Youtube, .Spotify, .iHeartRadio {
    color: #ffffff; /* White color for headings */
}

/*Style for heading 1, 2, and 3*/
h1, h2, h3 {
    padding: 0px 15px; /* Adds padding to the left and right of headings for better spacing on smaller screens */
}

a {
    text-decoration: none; /* Removes the underline */
}

/*Style for links on hover*/
a:hover {
    color: #f6ff00;
    text-decoration: underline;
}

/*Style for links when they are focused (tabbing through the content links), adds an outline for better accessibility*/
a:focus-visible {
    outline: 2px solid #94ff97;
    outline-offset: 4px;
}

main, nav, header, section p {
    margin: 0 auto; /* Centers the navigation bar horizontally within the viewport */
}

/*Style for the main content area and sections*/
main {
    padding: 24px;
}

/*Style for sections and navigation list items*/
section { /* Adds spacing between sections for better readability */
    margin-bottom: 32px;
}

nav, nav ul, .about-layout, .podcast-grid, #index-page-nav {
    display: flex; /* Uses flexbox to layout navigation items in a row */ 
}

nav, #index-page-nav {
    align-items: center; /* Vertically centers the navigation items within the bar */
    justify-content: center; /* Aligns navigation items to the center of the bar */
}

/* Style for navigation unordered list and items */
nav { 
    gap: 15px; /* Adds space between navigation items for better readability */
    padding: 0 15px; /* Adds horizontal padding to the nav bar for better spacing on smaller screens */
} 

nav h3, nav ul {
    padding: 0;/* Removes any default padding from the h3 element for a cleaner look */
}

/* makes navigation links look like buttons with padding, border, rounded corners, and a semi-transparent background for a modern and clean appearance */
nav a {
    display: inline-block;
    padding: 10px 15px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.08);
}

#index-page-nav a {
    padding: 3px 6px;
    display: contents;
    border: none;
}

nav ul, .about-layout, .podcast-grid {
    flex-wrap: wrap; /* Allows navigation items to wrap to the next line on smaller screens */    
}

nav ul {
    gap: 16px; /* Adds space between navigation items for better readability */
    margin-left: 0; /* Pushes the navigation list to the right side of the navigation bar */
}

/*Style for the hero section, adds a semi-transparent background, border, padding, and rounded corners for a visually appealing look*/
#hero,
#contact,
#about,
#podcasts {
    background-color: rgba(255, 255, 255, 0.08); /* Semi-transparent background */
    padding: 40px 20px;
}

/*Style for the hero section, makes it slightly more opaque and adds a thicker border for emphasis*/   
#hero {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); /* Adds a subtle shadow for depth */
    background-color: rgba(255, 255, 255, 0.1); /* Slightly more opaque for the hero section */
    border: 4px solid rgba(255, 255, 255, 0.3);
}

#hero img {
    max-width: 200px;
    width: 100%;
    height: auto;
    display: block;
    margin: 16px auto;
    border-radius: 12px;
    border: 3px solid rgba(255, 255, 255, 0.35);
}
#about,
#contact,
#podcasts {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow for depth */
    transition: box-shadow 0.3s ease; /* Smooth transition for the shadow effect on hover */
}

#about:hover,
#contact:hover,
#podcasts:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); /* Increases shadow on hover for a more interactive feel */
}

footer {
    padding: 32px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 48px;
    color: rgba(255, 255, 255, 0.7);
}

section p {
    max-width: 70ch;
}

.about-layout {
    align-items: flex-start;
    gap: 16px;
}

.about-image-1,
.about-image-2 {
    flex: 0 1 220px;
    max-width: 100px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.about-image-1 img,
.about-image-2 img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.about-layout p {
    flex: 1 1 320px;
}

.social-box-1,
.social-box-2 {
    width: 35%; /* Sets the width of each social box to 35% of the parent container */
    height: auto; /* Allows the height to adjust based on content */
    display: inline-block; /* Allows the social boxes to sit side by side */
    padding: 20px; /* Adds padding inside the social boxes for better spacing of content */
    border-radius: 12px; /* Rounds the corners of the social boxes for a softer look */
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    margin-bottom: 9px; /* Adds bottom spacing between the two social boxes */
    margin-left: 10px; /* Adds left spacing to separate the social boxes from other content */
    text-decoration: none;
}

/* Style for the podcast grid layout, creates a responsive grid with three columns and spacing between the podcast boxes */
.podcast-grid {
    gap: 10px; /* Adds space between the podcast boxes for better readability */
    justify-content: space-between; /* Distributes space evenly between the podcast boxes */
    padding: 0px; /* Removes default padding from the podcast grid for a cleaner look */
    margin-bottom: 0px; /* Removes default bottom margin from the podcast grid for a cleaner look */
}

/* Style for individual podcast boxes, adds padding, border, rounded corners, and a 
semi-transparent background for a modern and clean appearance */
.Youtube,
.Spotify,
.iHeartRadio {
    width: 25%; /* Sets the width of each social box to 25% of the parent container */
    height: auto; /* Allows the height to adjust based on content */
    border-radius: 11px; /* Rounds the corners of the social boxes for a softer look */
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

.youtube-img, .rss-img {
    margin-bottom: 10px; /* Adds bottom spacing between the image and the link */
    max-width: 80px;
    width: 100%;
    max-height: 80px;
    display: block;
    margin: 16px auto;
}

.youtube-img img, .rss-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

@media (max-width: 900px) {
    .about-image-1,
    .about-image-2 {
        flex-basis: 100px;
        max-width: 75px;
    }

    .Youtube,
    .Spotify,
    .iHeartRadio {
        width: calc(30% - 10px);
    }

    .youtube-img,
    .rss-img {
        max-width: 72px;
        max-height: 72px;
    }
    nav a {
        padding: 5px 10px;
    }
}

@media (max-width: 600px) {
    .about-layout {
        justify-content: center;
    }
    
    .about-image-2 {
        display: none; /* Hides the second image on smaller screens for better layout */
    }

    .about-image-1 {
        flex: 0 0 50px;
        max-width: 50px;
    }

    .about-layout p { 
        flex-basis: 100%;
    }

    .podcast-grid {
        justify-content: center;
        gap: 12px;
    }

    .Youtube,
    .Spotify,
    .iHeartRadio {
        width: min(280px, 100%);
    }

    .youtube-img,
    .rss-img {
        max-width: 64px;
        max-height: 64px;
    }
    nav a {
        padding: 3px 7px;
    }
}