/* General Body Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #f9f9f9;
}

/* Header Styles */
header.banner-header {
    background: white;
    padding: 10px 20px;
    text-align: center;
}

header img.banner {
    max-width: 60%; /* Scale banner to 60% of page width */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto; /* Center the banner */
}

#ad {
    margin: 20px auto;
    text-align: center;
    max-width: 350px; /* Adjusted width to 350px */
    padding: 10px;
    background-color: #fff; /* Subtle background */
    border: 1px solid #ddd; /* Border for separation */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow */
}

#ad .ad-image {
    max-width: 100%; /* Make the image fit within the container */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 10px; /* Space between image and text */
    display: block;
    margin: 0 auto; /* Center image */
}

#ad .ad-text {
    font-size: 0.9em; /* Slightly smaller text */
    color: #703a15; /* Match site's theme color */
    line-height: 1.4;
}

#ad .ad-text a {
    color: #703a15; /* Link color */
    text-decoration: none;
    font-weight: bold;
}

#ad .ad-text a:hover {
    text-decoration: underline; /* Underline on hover */
}



/* Navigation Styles */
nav ul#menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row; /* Horizontal layout for desktop */
    justify-content: center;
    gap: 30px; /* Spacing between navigation items */
}

nav ul#menu li {
    display: inline;
}

nav ul#menu li a {
    text-decoration: none;
    font-size: 1.1em;
    color: black; /* Black text color */
    font-weight: bold;
    transition: color 0.3s ease;
}

nav ul#menu li a:hover {
    color: #703a15; /* Hover effect */
}

/* Mobile Menu Styles */
.menu-toggle {
    display: none; /* Hidden by default */
}

@media screen and (max-width: 768px) {
    /* Show hamburger menu on smaller screens */
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        font-size: 2em;
        color: #703a15;
        cursor: pointer;
        position: absolute;
        top: 15px;
        right: 20px;
    }

    /* Hide the navigation menu by default */
    nav ul#menu {
        display: none;
        flex-direction: column; /* Vertical layout for mobile */
        background-color: #f9f9f9;
        position: absolute;
        top: 60px;
        right: 20px;
        width: 200px;
        padding: 10px;
        border: 1px solid #ddd;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Show menu when toggle is active */
    nav ul#menu.hidden {
        display: flex;
    }
}

/* Adjustments for Desktop and Mobile Views in Intro Section */

/* Desktop View */
@media screen and (min-width: 769px) {
    section#intro p {
        width: 60%; /* Text occupies 60% of the screen width */
        margin: 0 auto;
    }

    .intro-images {
        display: flex;
        justify-content: center; /* Center the images */
        gap: 15px; /* Space between images */
        width: 60%; /* Restrict to 60% of page width */
    }

    .intro-images .intro-image {
        width: calc(100% / 3 - 10px); /* Three equally spaced images */
        height: auto; /* Maintain aspect ratio */
    }
}

/* Mobile View */
@media screen and (max-width: 768px) {
    .intro-images img:first-child {
        display: block;
        width: 100%; /* Full width for the first image */
        height: auto;
    }

    .intro-images img:nth-child(2),
    .intro-images img:nth-child(3) {
        display: none; /* Hide the second and third images */
    }

    section#intro p {
        width: 100%; /* Full width for text on mobile */
    }
}
//* Default hidden menu for mobile */
nav ul#menu {
    display: none;
}

nav ul#menu.hidden {
    display: flex;
    flex-direction: column;
    background-color: white;
    position: absolute;
    top: 50px;
    right: 10px;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Intro Section */
section#intro {
    text-align: center;
    padding: 20px;
}

section#intro h1.main-headline {
    font-size: 2.5em; /* Larger font size */
    color: #703a15; /* Correct banner text color */
    margin-bottom: 20px;
}

.intro-images {
    display: flex;
    justify-content: center; /* Center the images */
    gap: 15px; /* Space between images */
    margin: 20px auto;
    width: 60%; /* Scale to fit 60% of the page width */
}

.intro-images .intro-image {
    height: auto; /* Prevent distortion */
    width: calc(100% / 3 - 10px); /* Divide available space into thirds */
    object-fit: cover; /* Maintain aspect ratio */
}

/* Gear Box Section */
.gear-box {
    background: #fff;
    padding: 20px;
    margin: 20px auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 1200px; /* Limit maximum width */
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between items */
    justify-content: space-between; /* Align items evenly */
}

.gear-box h2 {
    width: 100%;
    text-align: center;
    color: #703a15;
    margin-bottom: 20px;
}

.gear-box .item {
    flex: 0 0 calc(50% - 20px); /* Two items per row */
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px; /* Add vertical spacing */
    background-color: #f9f9f9; /* Subtle background for item boxes */
    padding: 15px;
    border-radius: 5px;
    box-sizing: border-box; /* Include padding and borders in size */
}

.gear-box .item img.gear-image {
    max-width: 33%; /* Image occupies one-third of the item width */
    height: auto;
    border-radius: 5px;
}

.gear-box .item-content {
    flex: 1; /* Allow text to take up remaining space */
}

.gear-box .item-content h3 {
    font-size: 1.2em; /* Make titles prominent */
    color: #703a15;
    margin: 0 0 5px;
}

.gear-box .item-content p {
    font-size: 0.9em;
    color: #555;
    margin: 0;
}

.gear-box .item-content p .learn-more {
    color: #703a15;
    text-decoration: none;
    font-weight: bold;
}

.gear-box .item-content p .learn-more:hover {
    text-decoration: underline;
}

/* Mobile-Specific Styles */
@media screen and (max-width: 768px) {
    .gear-box {
        flex-direction: column; /* Stack items vertically */
        gap: 10px; /* Adjust spacing for mobile */
    }

    .gear-box .item {
        flex: 0 0 100%; /* Full width for each item */
        margin-bottom: 15px; /* Spacing between items */
    }

    .gear-box .item img.gear-image {
        max-width: 50%; /* Scale down images on mobile */
        margin-right: 10px;
    }

    .gear-box .item-content h3 {
        font-size: 1em; /* Adjust title size */
    }

    .gear-box .item-content p {
        font-size: 0.8em; /* Smaller text for descriptions */
    }
}
/* Blog Section */
#blog-section {
    background: #fff;
    padding: 20px;
    margin: 20px auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 60%; /* Matches gear-box width */
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

#blog-section h2 {
    width: 100%;
    text-align: center;
    color: #703a15;
    margin-bottom: 20px;
}

#blog-section .item {
    flex: 0 0 48%; /* Two items per row */
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
    text-align: center;
}

#blog-section .item img.gear-image {
    max-width: 33%;
    height: auto;
}

#blog-section .item-content h3 {
    font-size: 1.2em; /* Prominent titles */
    color: #703a15;
    margin: 0;
}

#blog-section .item-content p {
    font-size: 0.9em; /* Smaller text for link */
    color: #555;
    margin: 5px 0;
}

#blog-section .item-content p .learn-more {
    display: inline; /* Ensure link remains visible */
    color: #703a15;
    text-decoration: none;
    font-weight: bold;
}

#blog-section .item-content p .learn-more:hover {
    text-decoration: underline;
}


/* Footer Styles */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}
nav ul#menu {
    display: -webkit-box;
    display: flex; /* Fallback for other browsers */
}

nav ul#menu.hidden {
    display: none;
}

/* === Tutorials Page Specific Styles === */

/* Full-width header at the top */
.page-header {
    text-align: center;
    margin: 20px 0;
    padding: 10px;
    background-color: #f4f4f9; /* Optional: add a background color */
}

.page-header h1 {
    font-size: 24px;
    color: #703a15; /* Brown color for header text */
}

/* Tutorials Page Layout */
.tutorials-container {
    display: flex;
    justify-content: space-between; /* Ensure even spacing between the columns */
    align-items: flex-start; /* Align items at the top */
    padding: 20px;
    max-width: 60%; /* Restrict to 60% of the page width */
    margin: 0 auto; /* Center the entire container */
    box-sizing: border-box; /* Include padding in calculations */
}

.left-column {
    flex: 0 0 20%; /* Fix width to 20% of the container */
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    min-height: 100%; /* Match the height of the right column */
    box-sizing: border-box; /* Include padding and borders in width */
}

.right-column {
    flex: 0 0 78%; /* Fix width to 78%, adjusted for container gap */
    max-width: calc(78% - 10px); /* Subtract the total margin if applicable */
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between items in the right column */
    justify-content: flex-start;
    box-sizing: border-box; /* Include padding and borders in width */
}



/* Video Card Styles */
.video-card {
    width: 400px; /* Fixed width for each card */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 15px;
}

.video-thumbnail {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 10px;
}

.video-title {
    font-size: 18px;
    font-weight: bold;
    color: #007BFF;
    text-decoration: none;
    display: block;
    margin: 10px 0;
}

.video-title:hover {
    color: #0056b3;
}

.video-description {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
}

/* === Mobile Styles (Tutorials Page) === */
@media screen and (max-width: 768px) {
    .tutorials-container {
        flex-direction: column; /* Stack columns vertically */
        gap: 20px; /* Add spacing between stacked columns */
    }

    .left-column,
    .right-column {
        width: 100%; /* Full width for both columns */
    }

    .video-card {
        width: 100%; /* Video cards take full width */
    }

    .page-header h1 {
        font-size: 20px; /* Slightly smaller header text for mobile */
        padding: 10px;
    }
}

/* === End of Tutorials Page Specific Styles === */

/* === Fstoppers RSS Feed Section === */
.rss-feed-section {
    background-color: #f9f9f9;
    padding: 20px;
    margin: 20px 0;
}

.rss-feed-section h2 {
    text-align: center;
    color: #703a15;
    margin-bottom: 20px;
}

.rss-articles-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
}

.rss-article {
    width: calc(25% - 20px);
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    padding: 10px;
}

.rss-article-thumbnail {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.rss-article-title {
    font-size: 16px;
    font-weight: bold;
    color: #703a15;
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
}

.rss-article-title:hover {
    text-decoration: underline;
}

.rss-article-description {
    font-size: 14px;
    color: #555;
    margin: 0;
}

/* Mobile Styles for RSS Feed */
@media screen and (max-width: 768px) {
    .rss-article {
        width: 100%;
    }
}
/* === End of Fstoppers RSS Feed Section === */

/* Updated Section: Latest Coffee and Photography talk Videos */
#latest-videos {
    margin: 40px auto;
    padding: 20px;
    max-width: 1200px; /* Matches the gear-box width */
    width: 100%; /* Ensure responsiveness */
    text-align: center; /* Center-align content inside the section */
}

#latest-videos .section-header {
    color: #5a3e1b; /* Standard brown color */
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.8em;
    font-weight: bold;
}

#latest-videos .video-container {
    display: flex;
    justify-content: center; /* Centers the two boxes horizontally */
    gap: 20px;
    max-width: 100%; /* Ensures it aligns with the parent width */
}

#latest-videos .video-card img {
    max-width: 100%; /* Ensures the image scales to fit the container width */
    height: auto; /* Maintains the natural aspect ratio */
    display: block;
    border-bottom: 1px solid #ddd;
    border-radius: 8px; /* Matches the card's rounded corners */
}

#latest-videos .video-card img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid #ddd;
}

#latest-videos .video-card h3 {
    margin: 10px;
    font-size: 1.2em;
}

#latest-videos .video-card a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

/* Remote RSS Feeds appearance */
#rss-sections {
    margin: 20px auto;
    text-align: center;
}

#rss-sections h2 {
    color: #8B4513; /* Matches the site's brown theme */
    font-size: 1.8em;
    margin-bottom: 20px;
}

/* Styles for article boxes shared across all sections */
.article-box {
    display: inline-block;
    width: calc(50% - 20px); /* Two boxes side by side with margins */
    margin: 10px;
    vertical-align: top;
    text-align: center;
    box-sizing: border-box;
}

.article-box img {
    max-width: 100%; /* Ensures the image scales within its container */
    height: auto;    /* Maintains aspect ratio */
    width: 300px;    /* Explicit width for consistent sizing */
    border-radius: 5px;
}

/* Titles within article boxes */
.article-title {
    display: block;
    margin-top: 10px;
    font-size: 1.1em;
    color: #333;
    text-decoration: none;
}

.article-title:hover {
    text-decoration: underline;
    color: #8B4513; /* Matches the site's brown theme */
}

/* Ensure the section content is centered on the page */
#fstoppers-section, #petapixel-section {
    margin: 20px auto;
    text-align: center;
    max-width: 800px; /* Adjust based on site design for centering */
}

/* Specific header color for each section */
#fstoppers-section h2, #petapixel-section h2 {
    color: #8B4513; /* Matches the site's brown theme */
}

/* Amazon Cameras Section */
#amazon-section {
    margin: 20px auto;
    text-align: center;
    max-width: 1000px; /* Align width with other sections */
}

#amazon-section h2 {
    color: #8B4513; /* Match the site's theme */
    font-size: 1.8em;
    margin-bottom: 20px;
}

#amazon-section .rss-content {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next row */
    justify-content: center; /* Center align rows */
    gap: 20px; /* Spacing between items */
}

#amazon-section .article-box {
    width: calc(33.33% - 20px); /* Three items per row, adjust for margin */
    max-width: 300px; /* Keep consistent with Fstoppers box size */
    margin: 10px;
    text-align: center;
    vertical-align: top;
    box-sizing: border-box;
}

#amazon-section .article-box img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Link Text */
#amazon-section .article-title {
    display: block;
    margin-top: 10px;
    font-size: 0.9em; /* Smaller link text */
    font-weight: bold;
    color: #333;
    text-decoration: none;
}

#amazon-section .article-title:hover {
    text-decoration: underline;
    color: #8B4513; /* Match the site's theme */
}

/* Description Text */
#amazon-section .article-description {
    font-size: 0.8em; /* Smaller description text */
    color: #666; /* Subtle color to differentiate */
    margin-top: 5px;
    line-height: 1.2em; /* Slightly tighter line spacing */
}

/* Section Separators */
.section-separator {
    border: none;
    border-top: 1px solid #8B4513; /* Matches the site's brown theme */
    margin: 40px auto; /* Adds vertical spacing */
    width: 80%; /* Limits the width for subtle styling */
    opacity: 0.5; /* Makes it understated */
}
/* Featured Blog Post Section */
#featured-blog {
    margin: 40px auto;
    padding: 20px;
    max-width: 800px; /* Align with other sections */
    text-align: center;
    background-color: #f9f9f9; /* Subtle background color */
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

#featured-blog .section-header {
    font-size: 1.8em;
    color: #703a15;
    margin-bottom: 20px;
}

.featured-blog-container {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

.blog-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.blog-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.blog-title a {
    font-size: 1.4em;
    color: #333;
    text-decoration: none;
}

.blog-title a:hover {
    color: #703a15;
    text-decoration: underline;
}

.blog-excerpt {
    font-size: 1em;
    color: #555;
    line-height: 1.6em;
}

.blog-excerpt .read-more {
    color: #703a15;
    text-decoration: none;
    font-weight: bold;
}

.blog-excerpt .read-more:hover {
    text-decoration: underline;
}


.google-form-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.google-form-container h2 {
    color: #703a15;
    font-size: 1.8em;
    margin-bottom: 10px;
}

.google-form-container p {
    font-size: 1em;
    color: #555;
    margin-bottom: 20px;
}

.google-form-container iframe {
    border: none; /* No border for cleaner appearance */
    width: 100%; /* Full width */
    max-width: 800px; /* Limit iframe width */
}

/* Styling for Multiple Blogs Section */
#multiple-blogs {
    margin: 40px auto;
    padding: 20px;
    max-width: 800px; /* Matches the 60% width of the page */
    width: 60%; /* Ensure consistency with other sections */
    text-align: center;
    background-color: #f9f9f9; /* Subtle background */
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

#multiple-blogs .section-header {
    font-size: 1.8em;
    color: #703a15;
    margin-bottom: 20px;
}

.multiple-blogs-container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap for multi-column layout */
    gap: 20px; /* Spacing between items */
    justify-content: space-between; /* Align items evenly across rows */
}

.blog-item {
    background-color: #fff; /* White background for contrast */
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    flex: 0 0 calc(50% - 20px); /* Each item takes up 50% width minus the gap */
    box-sizing: border-box; /* Include padding and borders in size */
    text-align: center;
    overflow: hidden; /* Ensures images don’t spill outside the container */
}

.blog-item img,
.blog-item .blog-image {
    max-width: 100%; /* Ensure image scales to fit within the container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure block-level behavior */
    margin: 0 auto 10px; /* Center and add spacing below the image */
    border-radius: 8px; /* Rounded corners to match container */
    object-fit: cover; /* Prevent distortion */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for images */
}

.blog-item h3.blog-title {
    font-size: 1.4em;
    margin-bottom: 10px;
}

.blog-item h3.blog-title a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

.blog-item h3.blog-title a:hover {
    color: #703a15;
    text-decoration: underline;
}

.blog-excerpt {
    font-size: 1em;
    color: #555;
    line-height: 1.6;
}

.blog-excerpt .read-more {
    color: #703a15;
    text-decoration: none;
    font-weight: bold;
}

.blog-excerpt .read-more:hover {
    text-decoration: underline;
}

/* Mobile Styles for Multiple Blogs Section */
@media screen and (max-width: 768px) {
    #multiple-blogs {
        width: 90%; /* Slightly wider for smaller screens */
    }

    .blog-item {
        flex: 0 0 100%; /* Full width for each item on mobile */
    }
}