/* Reset Styles */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* 'height: auto' lets the page expand as Disqus gets longer */
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden; /* This is the horizontal scrollbar's funeral */
    background: lightsteelblue;
}

/* Apply border-box to EVERYTHING so margins/padding never break your width again */
*, *:before, *:after {
    box-sizing: inherit;
}

* {
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto !important;
    display: block;
    /* This ensures your sticky header has 'permission' to stay visible */
    overflow: visible !important; 
}

/* Header Styles */
header {
    background: #142D66; /* Background color of the header */
    display: flex; /* Use flexbox layout */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center children vertically */
    position: sticky; /* Sticks the header to the top of the viewport */
    top: 0; /* Positioning from the top */
    max-height: 90px; /* Maximum height of the header */
    padding: 20px; /* Padding inside the header */
    margin: 0 auto; /* Centers header horizontally */
    text-align: right; /* Aligns text to the right */
    z-index: 100;
}

/* Navigation Styles */
nav {
    display: flex; /* Flexbox layout for navigation */
    float: left; /* Allow floating behavior */
    gap: 16px; /* Space between navigation items */
    max-height: 50px; /* Limit navigation height */
    position: absolute; /* Position navigation absolutely */
    text-align: center; /* Center text in navigation */
}

a:hover {
    text-decoration: underline; /* Underline links on hover */    
}

/* Menu Button Styles */
.menu_btns {
    background: cornflowerblue; /* Background color of buttons */
    border: 2px solid blue; /* Blue border around buttons */
    border-radius: 5px; /* Rounds the corners of buttons */
    color: whitesmoke; /* Text color inside buttons */
    font-family: 'Courier New', monospace; /* Specifies font family for menu buttons */
    font-size: 12px; /* Font size for button text */
    font-weight: bold; /* Makes button text bold */
    letter-spacing: 1px; /* Spacing between letters */
    padding: 8px 10px; /* Padding around the button text */
    text-decoration: none; /* Removes underline from button links */
}

/* Site Name Styles */
.site_name {
    color: whitesmoke; /* Light color for site name */
    font-family: 'Brush Script MT', cursive; /* Cursive font for site name */
    font-size: 60px; /* Large font size for site name */
    text-align: right; /* Align site name to the right */
}

.site_name a {
    color: whitesmoke; /* Keep site name color */
    text-decoration: none; /* Remove underline from links */
}

.site_name:hover a {
    text-decoration: none; /* Remove underline on hover */
}

/* Base Styles */
.blog_page { /* overall blog page container to center feed box */
    display: flex;
    align-items: center; /* Centers vertically */
    height: 100vh; /* Full viewport height */
    width: 100vw;
    background-color: lightsteelblue; /* Light blue background for the body */
    font-family: 'Arial', sans-serif; /* Basic sans-serif font */
    justify-content: center; /* Centers horizontally */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

/* Post Container Styles */
.post_container {
    align-self: center;
    background: #dbecfb; /* Background color (very light green) for posts */
    border: 2px solid #007BFF; /* Blue border for the container */
    color: #142D66; /* Text color for boxes */
    display: flex; /* Use flexbox layout */
    flex-direction: column; /* Stack children vertically */
    margin: 0; /* Adds margin around container */
    min-height: none;
    max-height: 80vh; /* Maximum height of the container */
    max-width: 75vw; /* Maximum width of the container */
    overflow: auto; /* Allows container to be scrollable */
    overflow-x: auto; /* Prevent horizontal scrolling */
    padding: 25px 10px; /* Padding inside the boxes */
    position: relative; /* Context for absolutely positioned children */
}

.feed_title {
    color: navy;
    margin-bottom: 10px;
    font-family: "Copperplate Gothic", display;
    font-weight: 900;
    text-align:center;
    text-decoration: underline;
}

/* Post Box Styles */
.post_boxes {
    background-color: #d6dcd5; /* Background color for post boxes */
    border: 2px solid #007BFF; /* Border for post boxes */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect for depth */
    box-sizing: border-box;
    display: flex; 
    flex-direction: column;
    margin: 20px auto; /* Margin around post boxes */
    min-height: 200px auto;
    max-height: none;
    padding: 15px; /* Padding inside post boxes */
    position: relative; /* Context for absolutely positioned children */
    width: 80%; /* Specifies width of parent container to take up */
}

.blog_post{
    display: flex;
    flex-direction: column;
    font-family: "Lucida Console", monospace;
    font-size: 16px;
    justify-content: center;
}

.post_title {
    color: #007BFF; /* Blue color for the headings */
    font-family: "Copperplate Gothic", display;
    font-size: 24px; /* Font size for headings */
    margin-bottom: 10px; /* Space below the title */
    text-align: center; /* Center the heading text */
}

.post_info {
    font-size: 12px;
    margin: 0;
    margin-bottom: 10px;
    padding: 0;
    text-align: right; 
}

.post_date {
    font-weight: 600;
}

.post_time {
    font-weight: 600;
}

.post_body {
    font-size: 16px;
    line-height: 1.75;
    text-align: justify;
}

.post_body, .post_body * {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.post_body code {
    color: dodgerblue;
    font-weight: 600;
    white-space: nowrap;
}

/* List Styles within Post Body */
.post_body ol,
.post_body ul {
    margin: 0; /* Remove default margin */
    padding-left: 50px; /* Indent the list */
    text-align: justify;
}

.post_body li {
    margin-bottom: 5px; /* Space between list items */
}

.post_footer {
    align-self: flex-end; /* aligns footer block to end of post body */
    text-align: right;    /* aligns text inside the footer */
    width: 100%;
}

/* 1. THE OUTER SECTION (Replaces blog_page logic) */
.disqus_section_wrapper {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    
    /* This creates the space OUTSIDE your box (the yard) */
    padding: 80px 0; 
    margin: 0;
    clear: both;
    overflow: visible;
}

/* 2. THE INNER BOX (Your disqus_container) */
.disqus_container {
    /* Size */
    width: calc(80vw - 25px); 
    max-width: 95%; /* Safety gap for mobile screens */
    margin: 0 auto; /* Centers the box in the wrapper */
    
    /* Layout and Positioning */
    display: block !important;
    height: auto !important;
    position: relative;
    box-sizing: border-box; /* Essential: keeps padding/borders inside the width */
    
    /* --- ADD YOUR CUSTOM STYLES HERE --- */
    animation: fadeInUp 3s ease-out 0.8s both;
    background: #dbecfb; /* Background color (very light green) for posts */
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    border: 2px solid #007BFF; /* Blue border for the container */
    border-radius: 10px;
    opacity: 0;
    padding: 40px; /* Space INSIDE the box for the comments */
}

/* 3. THE ENGINE */
#disqus_thread {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    /* Adding a tiny 'hold' at the start can also help */
    10% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}