/* Core Stuff */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* outline: 1px solid red; /* Highlights the boundary of each element */ */
}

body {
    font-size: 0.85rem;
    font-family: monospace;
    line-height: 1.7;
    color: #606d6e;
    background-color: #CCCCCC; /* Temporary test */
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}

h2 {
    font-size: 1rem;
}

h1,
h3,
h4,
h5,
h6 {
    color: #454B4D;
}

a {
    color: #1F8CD6;
    text-decoration: none;
}

a:hover {
    color: #175E91;
}

pre {
    background: #F0F0F0;
    margin: 1rem 0;
    border-radius: 2px;
}

blockquote {
    border-left: 10px solid #eee;
    margin: 0;
    padding: 0 2rem;
}

/* Utility Classes */
/* Override wrapper styles */
.wrapper {
    margin: 0 !important; /* Remove left and right margins */
    padding: 0 !important; /* Remove any padding */
    width: 100% !important; /* Ensure it spans the full browser width */
    max-width: 100% !important; /* Prevent narrowing */
}

/* Ensure no additional padding from .padding */
.padding {
    padding: 0 !important;
}

.left {
    float: left;
}

.right {
    float: right
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

/* Content Styling */
.header .padding {
    padding: 1rem 0;
}

.header {
    // background-color: #1F8DD6;
    background-color: #666666;
    color: #eee;
    width: 100%;
    padding: 1rem 0;
    margin: 0;
}

.header a {
    color: #fff;
}

.header .logo {
    text-align: center;          /* Center the text horizontally */
    width: 100%;                 /* Ensure it spans the full width of the header */
    margin: 0 auto;
    display: flex;              /* Ensure it behaves as a block element */    
    justify-content: space-between; 
    padding: 0 2rem;
    font-size: 2rem;
    align-items: center;
    text-transform: lowercase;
    text-align: center;
    letter-spacing: 0.3em;
    width: 100%;
    overflow: hidden;
    font-family: "Courier New", Courier, monospace; /* Use a teletype font */
    font-weight: bold;
}

.header .logo span {
    flex: 1; /* Distribute space evenly */
    text-align: center; /* Center individual letters */
    max-width: calc(100% / 10); /* Dynamically adjust based on letters */
}

.footer {
    background-color: #eee;
    font-size: 0.8em;
}

/* Menu Settings */
.main-nav ul {
    text-align: center;
    letter-spacing: -1em;
    margin: 0;
    padding: 0;
}

.main-nav ul li {
    display: inline-block;
    letter-spacing: normal;
}

.main-nav ul li a {
    position: relative;
    display: inline-block; /* Prevents stretching */
    color: #C0C0C0;  /* Grey text color */
    font-family: Courier, monospace;
    /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);*/  /* Add subtle drop shadow */
    padding: 0.3rem 0.8rem; /* Adjust spacing for better appearance */
    text-decoration: none; /* Remove underlines */
    font-weight: bold; /* Optional: Make the text bolder */
    font-size: 1.2rem;
    transition: outline 0.3s ease, color 0.3s ease; /* Smooth transitions */
}

.main-nav ul li a:hover {
    color: #fff; /* Optional: Change text color on hover */
}


/*Active dropdown nav item */
.main-nav ul li:hover > a {
    background-color: transparent;
}

.main-nav ul li.selected > a {
    position: relative;	
    display: inline-block;
    line-height: 0.1;
    background-color: transparent; /* Remove the white box */
    color: #C0C0C0; /* Optional: Change text color for selected item */
    border-left: 4px dashed #C0C0C0; /* Grey border on the left */
    border-right: 4px dashed #C0C0C0; /* Greyborder on the right */
    padding-left: 0.8rem; /* Adjust padding to account for the borders */
    padding-right: 0.8rem;
    text-decoration: none; /* Ensure no underline */
    transition: border 0.3s ease, color 0.3s ease; /* Smooth transitions */
}

/* Dropdown CSS */
.main-nav ul li {position: relative;}

.main-nav ul li ul {
    position: absolute;
    background-color: #1F8DD6;
    min-width: 100%;
    text-align: left;
    z-index: 999;

    display: none;
}
.main-nav ul li ul li {
    display: block;
}

/* Dropdown CSS */
.main-nav ul li ul ul {
    left: 100%;
    top: 0;
}

/* Active on Hover */
.main-nav li:hover > ul {
    display: block;
}

/* Child Indicator */
.main-nav .has-children > a {
    padding-right: 30px;
}
.main-nav .has-children > a:after {
    font-family: FontAwesome;
    content: '\f107';
    position: absolute;
    display: inline-block;
    right: 8px;
    top: 0;
}

.main-nav .has-children .has-children > a:after {
    content: '\f105';
}

.blog {
    margin: 0 auto;               /* Center the blog container */
    max-width: 1200px;            /* Match the width of blog entries */
    padding: 0 1rem;              /* Add consistent padding */
    box-sizing: border-box;       /* Include padding in the total width */
    /* border: 3px solid red;        /* Debugging border for .blog */ */
}

.blog > .wrapper {
    padding: 0;                   /* Remove unnecessary padding */
    margin: 0 auto;               /* Center the content */
    max-width: 1200px;            /* Match the blog entries width */
    box-sizing: border-box;       /* Include padding in width */
}

.blog-post {
    margin: 0 auto 1rem;               /* Center the blog post horizontally */
    padding: 0.7rem 1rem 1rem;              /* Add padding on the left and right */
    max-width: 100%;             /* Limit the width for better readability */
    box-sizing: border-box;       /* Ensure padding is included in the total width */
    background-color: #fff;       /* Optional: Add a white background for contrast */
    border-radius: 0px;           /* Optional: Add rounded corners for a clean look */
    /* border: 3px solid green;      /* Debugging border for blog-post */ */
}

@media (max-width: 768px) {
    .blog-post {
        padding: 0.5rem 1rem;          /* Reduce padding on smaller screens */
        max-width: 98%;          /* Allow the content to take full width */
    }
}

/* Center images and set max width */
.blog-post img {
    display: block;             /* Makes the image a block element for centering */
    margin: 0 auto;             /* Centers the image horizontally */
    max-width: 25%;             /* Limits the image to 25% of the container's width */
    height: auto;               /* Maintains the aspect ratio */
}

/* Optional: Add some spacing */
.blog-post img {
    margin-bottom: 20px;        /* Adds spacing below the image */
}

/* Style the top media image */

/* Reset and ensure no margin or padding around the wrapper */
.full-width-image-wrapper {
    margin: 0 !important;       /* Reset all margins */
    padding: 0 !important;      /* Reset all padding */
    width: 100%;               /* Full viewport width */
    max-width: 100%;           /* Prevent narrowing */
    position: relative;         /* Ensure proper alignment */
    left: 0 !important;         /* Align to the left edge */
    right: 0 !important;        /* Align to the right edge */
    overflow: hidden;           /* Prevent overflow */
    /* border: 3px solid red;      Temporary border for debugging */
}

.full-width-image {
    display: block;             /* Ensures the image behaves as a block element */
    width: 100%;               /* Full viewport width */
    height: auto;               /* Maintains aspect ratio */
    margin: 0;                  /* Resets margins */
    padding: 0;                 /* Resets padding */
    /* border: 3px solid blue;      Temporary border for debugging */
}

.page-media {
    margin: 0;
    padding: 0;
}

.page-media .wrapper {
    margin: 0 !important;       /* Remove left/right margins */
    padding: 0 !important;      /* Remove padding */
    width: 100% !important;    /* Force full width */
    max-width: 100% !important; /* Prevent narrowing */
}

.blog h1 {
    margin: 0;                    /* Remove any default margins */
    padding: 0;                   /* Ensure no extra padding */
    text-align: left;             /* Align text to the left */
    box-sizing: border-box;       /* Include padding in width */
    border: 3px solid blue;       /* Debugging border for .blog h1 */
}

.wrapper.padding {
    padding: 0;                  /* Remove extra padding */
}

/* Adjust the logo on smaller screens */
@media (max-width: 768px) {
    .header .logo {
        display: flex;
        justify-content: space-between; /* Ensure spacing between letters */
        padding: 0 1rem; /* Reduce padding for smaller screens */
        font-size: 1.2rem; /* Adjust font size for readability */
    }

    .header .logo span {
        flex: 1; /* Spread letters evenly across available space */
        text-align: center; /* Center each letter */
    }
}

.blog-post-thumbnail {
    text-align: center;
    margin-bottom: 1rem;
}

.blog-post-thumbnail img.post-thumbnail {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}