/* ==========================================================
   ### PAGE / CONTENT WIDTH ###
   Reserved for site-wide width rules.
   Current width rules are located with their components.
   ========================================================== */


/* ================= PAGE / CONTENT WIDTH END =============== */


/* ==========================================================
   ### HEADER ###
   ========================================================== */


/* ----------------------------------------------------------
   Below-Top Position
   Centres content placed in the below-top module position.
   ---------------------------------------------------------- */

.container-below-top {
    display: flex;
    justify-content: center;
    width: 100%;
}

.container-below-top > * {
    width: 100%;
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ------------------ Below-Top Position End ---------------- */


/* ======================= HEADER END ======================= */

/* ==========================================================
   ### BANNER POSITION ###
   Full-width banner area.
   Banner images scale fluidly with the available width.
   ========================================================== */

.container-banner {
    width: 100%;
    background: var(--color-header-bg);
}
/* max - sizing to 1600 px in banner .....  
/* .container-banner {
    --frame-max: 40px;

    padding-top: min(
        max(0px, calc((100vw - var(--banner-width)) / 2)),
        var(--frame-max)
    );

    padding-bottom: min(
        max(0px, calc((100vw - var(--banner-width)) / 2)),
        var(--frame-max)
    );
} */


/* --- Remove Cassiopeia banner sizing / spacing --- */

.container-banner .banner-overlay,
.container-banner .overlay,
.container-banner .overlay > div {
    width: 100%;

    height: auto;
    min-height: 0;

    margin: 0;
    padding: 0;

    background: var(--color-header-bg);
}

.container-banner .banner-overlay .overlay {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    height: auto;
    padding: 0;

    text-align: center;
}


/* --- Banner image --- */

.container-banner img {
    display: block;

    width: 100%;
    max-width: none;
    height: auto;

    margin: 0;
}

/* ==================== BANNER POSITION END ==================== */


/* ==========================================================
   ### GLOBAL CONTENT COLOURS ###
   Base frontend text and heading colours.
   ========================================================== */

body {
    color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-title);
}

/* ================= GLOBAL CONTENT COLOURS END ============= */


/* ==========================================================
   ### CASSIOPEIA GRID / CONTENT SPACING OVERRIDES ###
   Removes Cassiopeia grid gaps and component top spacing.

   The header pseudo-element currently creates the explicit
   page-background separator beneath the header/menu.
   ========================================================== */


/*
   Earlier experiment retained for reference:

   Removing only horizontal column gaps left the vertical
   separation in place.

   .site-grid,
   body.wrapper-fluid .site-grid {
       column-gap: 0;
       grid-column-gap: 0;
   }
*/

.site-grid, 
body.wrapper-fluid .site-grid {
    gap: 0;
}

.blog-items {
    margin: 0;
    grid-gap: 0;  
}

.container-component > :first-child,
.container-component > * + * {
    margin-top: 0;
}

.container-header::after {
    content: "";
    display: block;
    /* height: 1.5rem; */
    background: var(--body-bg);
}
/* cassiopeia copied rule ::: */
.container-header {
    z-index: 10;
    background-color: var(--cassiopeia-color-primary);
    background-image: none;
    /* background-image: linear-gradient(178deg, var(--cassiopeia-color-primary) 0%, var(--cassiopeia-color-hover) 100%);  */
}   

/* ----------------------------------------------------------
   Top Writing / Logo Script
   ---------------------------------------------------------- */

.topwriting {
    width: min(100%, var(--header-max-width));
    margin: 0 auto;
}

.topwriting img {
    display: block;

    width: min(450px, 76%);
    height: auto;

    margin-top: 17px;
    margin-bottom: 8px;
    margin-left: 10%;
}

@media (max-width: 900px) {

    .topwriting img {
        width: min(450px, 88%);

        margin-left: auto;
        margin-right: auto;
    }
}
#osmap {
    max-width: 1025px;
    margin: 0 auto;
    padding : 0 32px;
}

/* ----------------------------------------------------------
   Invisible Links for the odd occasion
   ---------------------------------------------------------- */

.u-LinkPlain {
    color: inherit;
    text-decoration: none;
}

.u-LinkPlain:hover,
.u-LinkPlain:focus,
.u-LinkPlain:active,
.u-LinkPlain:visited {
    color: inherit;
    text-decoration: none;
}