/* =======================================
   GLOBAL RESET AND LAYOUT
   ======================================= */

/* Remove default browser margins/padding on html/body */
html, body, body {
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove margin/padding from the first div inside body (if any) */
body > div:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove margin/padding from footer (if present above header, rare) */
footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =======================================
   ARTICLE/CONTENT AREA
   ======================================= */

/* Remove border, box-shadow, and background color from article containers */
.container {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    /* Set maximum width for main content area */
    max-width: 760px;  /* Adjust as desired */
    margin-left: auto;
    margin-right: auto;
}

/* Add space above each article */
.item-page,
.article, .article-content, .content, .contentpane {
    margin-top: 16px !important;
}

/* =======================================
   HEADER/BANNER AREA
   ======================================= */

/* Make the header full width, black, and remove spacing below */
.header {
    background: #000 !important;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-top: 20px;   /* Adjust as needed */
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove width constraint from the container inside header */
.header .container {
    max-width: 100vw;
    width: 100vw;
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto;
    background: transparent !important;
}

/* Remove margin/padding from header-inner */
.header-inner {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Center the logo inside the header */
.header .site-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Optional, for vertical alignment */
    width: 100%;
    margin: 0 auto;
    text-align: center; /* Fallback for non-flex browsers */
}

/* Center the logo image */
.header img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Center the logo link if using .brand.pull-left */
.header .brand.pull-left {
    float: none !important;
    display: block;
    text-align: center;
    margin: 0 auto;
}

.header .brand.pull-left img {
    display: inline-block;
    margin: 0 auto;
    float: none !important;
}

/* Create a narrow black band below the menus and above the articles */
.navigation {
    padding-bottom: 16px !important;   /* Adds space inside the black background */
    margin-bottom: 0 !important;       /* Ensure no conflicting margin */
    height: auto !important;            /* Let height expand with padding */
    background: #000 !important;
}


/* =======================================
   NAVIGATION/MENU BAR
   ======================================= */

/* Make the navigation bar full width with a black background */
.navigation {
    background: #000 !important;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    z-index: 100;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Constrain the inner containers (menu) to fixed max-width and center them */
.navigation .navbar,
.navigation .maximenuckh {
    max-width: 760px; /* or your preferred width */
    width: 100%;
    margin: 0 auto;
    background: transparent !important;
    padding-left: 0;
    padding-right: 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =======================================
   MISCELLANEOUS
   ======================================= */

/* Eliminate the navigation buttons at the bottom of each article */
ul.pager.pagenav {
    display: none !important;
}