/*
Theme Name: Essential Oil Distillery Blog
Author: Erwee Coetzee
Description: A rustic theme suitable for a blog about essential oil distillery.
Version: 3.8
*/

/* General styles */
body {
    font-family: 'Dancing Script', cursive;
    background-color: #ffffff;
    font-size: 20px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Dancing Script', cursive;
    color: #000000;
    font-size: 32px;
}

/* Mobile styles */
@media (max-width: 600px) {
    body {
        font-size: 16px;
    }
    
    h1, h2, h3 {
        font-size: 24px;
    }
    
    /* Adjust menu for smaller screens, make it vertical etc. */
    /* ... */
}

/* Tablet styles */
@media (min-width: 601px) and (max-width: 1024px) {
    body {
        font-size: 18px;
    }
    
    h1, h2, h3 {
        font-size: 28px;
    }
    
    /* Adjust menu for tablet screens, possibly adjust padding/margins etc. */
    /* ... */
}

body, header, footer, .header, .footer {
    margin-left: 150px;
    margin-right: 150px;
}

/* Adjustments for Masonry layout on smaller screens */
@media (max-width: 600px) {
    /* Assuming .post is the class for individual blog posts */
    .post {
        width: 100%; /* Ensure post takes full width on mobile */
    }
    
    .post img {
        width: 100%;
        height: auto; /* Ensure images are responsive and maintain their aspect ratio */
    }
    
    .post .title, /* Assuming .title is the class for post titles */
    .post .excerpt { /* Assuming .excerpt is the class for post excerpts */
        width: 100%;
        display: block; /* Stack title and excerpt vertically */
    }
}

@media (min-width: 601px) and (max-width: 1024px) {
    /* Similar adjustments can be made for tablet, if necessary */
    .post {
        width: 50%; /* Display two posts side by side on tablets */
    }
}

@media (max-width: 600px) {
    /* Target the main content container */
    #main-content {
        width: 100% !important;
        display: block !important;
    }
    
    /* Target post titles */
    #main-content h2 {
        width: 100% !important;
        display: block !important;
        float: none !important;
        clear: both !important;
    }
    
    /* Target post content */
    #main-content .entry {
        width: 100% !important;
        display: block !important;
        float: none !important;
    }
}

/* Minimalistic Responsive CSS */

/* Resetting and forcing stacking layout on mobile devices */
@media (max-width: 600px) {
    body, div, article, section, header, footer, aside, nav, form, 
    h1, h2, h3, h4, h5, h6, p, img, figure, figcaption,
    blockquote, ul, ol, li, dl, dt, dd, table, thead, tbody, tfoot, tr, th, td {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    
    img {
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Adjust margins for mobile devices */
@media (max-width: 768px) {
    body, header, footer, .header, .footer {
        margin-left: 25px;
        margin-right: 25px;
    }
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo {
    margin-right: 20px;
}

/* Remove bullet points from the menu items */
.main-navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.main-navigation li {
    list-style-type: none;
}

@media only screen and (max-width: 768px) {
    div, article, section, footer, aside, nav, form, h1, h2, h3, h4, h5, h6, p, img, figure, figcaption, blockquote, ul, ol, li, dl, dt, dd, table, thead, tbody, tfoot, tr, th, td {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    header {
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
}

@media only screen and (max-width: 768px) {
    .header-container {
        width: 100%;
        box-sizing: border-box;
        padding-left: 10px;  /* Reduced left padding */
        padding-right: 20px;
    }

    .header-container .site-logo img {
        max-width: 100%;
        height: auto;
    }
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
    #primary.content-area {
        margin-left: 5px;
        margin-right: 20px;
    }
}