/* =========================================================
   Wolverhampton Midweek Federation
   Joomla 4 Cassiopeia custom styling
   Recreation of original WlvsMW2 / Artisteer template
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

body {
    margin: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(183, 169, 105, 0.07) 0,
            rgba(255, 255, 255, 0.20) 250px
        ) no-repeat,
        url("../images/page.png"),
        linear-gradient(
            to bottom,
            #cdc398 0,
            #fdfdfc 250px
        ) no-repeat;

    background-attachment: fixed, fixed, fixed;

    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #111;
}


/* =========================================================
   CASSIOPEIA HEADER RESET
   ========================================================= */

.container-header {
    background: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
    color: #303030;

    padding: 0;
}


/* Main header wrapper */

.container-header > .grid-child {
    display: block;

    width: 1100px;
    max-width: calc(100% - 20px);

    margin: 0 auto;
    padding: 0;
}


/* =========================================================
   BRAND / HEADER
   ========================================================= */

.container-header .navbar-brand {
    position: relative;

    display: block;

    width: 1100px;
    max-width: 100%;

    height: 125px;

    margin: 0 auto;
    padding: 0;

    background-image: url("../images/header.png");
    background-repeat: no-repeat;
    background-position: center top;

    box-sizing: border-box;
}


/* Cassiopeia brand anchor */

.container-header .navbar-brand .brand-logo {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    text-decoration: none !important;
}


/* Remove original Cassiopeia SVG logo */

.container-header .navbar-brand .brand-logo img,
.container-header .navbar-brand .brand-logo img.logo {
    display: none !important;
}


/* =========================================================
   PIGEON
   ========================================================= */

.container-header .navbar-brand::before {
    content: "";

    position: absolute;
    z-index: 2;

    left: 0;
    top: 0;

    width: 136px;
    height: 124px;

    background-image: url("../images/object627351764.png");
    background-repeat: no-repeat;
    background-position: left top;

    pointer-events: none;
}


/* =========================================================
   MAIN FEDERATION TITLE
   ========================================================= */

.container-header .navbar-brand .brand-logo::before {
    content: "THE WOLVERHAMPTON FEDERATION";

    position: absolute;
    z-index: 3;

    left: 120px;
    top: 26px;

    width: 850px;

    margin: 0;
    padding: 0;

    font-family: "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

    font-size: 30px !important;
    font-weight: bold;
    line-height: 1;

    letter-spacing: 2px;

    color: #303030 !important;

    white-space: nowrap;

    text-decoration: none;
}


/* =========================================================
   SUBTITLE
   ========================================================= */

.container-header .navbar-brand .brand-logo::after {
    content: "OF MIDWEEK FLYING CLUBS";

    position: absolute;
    z-index: 3;

    left: 220px;
    top: 67px;

    width: 650px;

    margin: 0;
    padding: 0;

    font-family: "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

    font-size: 21px !important;
    font-weight: normal;
    line-height: 1;

    letter-spacing: 1px;

    color: #303030 !important;

    white-space: nowrap;

    text-decoration: none;
}


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

.container-header .container-nav {
    display: block;

    position: relative;

    width: 1100px;
    max-width: 100%;

    min-height: 40px;

    margin: 0 auto;
    padding: 4px;

    border: 1px solid #555;
    border-radius: 2px;

    background:
        linear-gradient(
            to bottom,
            #505050 0%,
            #3f3f3f 20%,
            #303030 55%,
            #292929 80%,
            #393939 100%
        );

    box-sizing: border-box;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   MAIN MENU
   ========================================================= */

.container-header .mod-menu {
    display: flex;

    justify-content: center;
    align-items: center;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* Top-level menu items */

.container-header .mod-menu > li,
.container-header .mod-menu > .metismenu-item {
    position: relative;

    margin: 0 5px;
    padding: 0;
}


/* =========================================================
   TOP LEVEL MENU BUTTONS
   ========================================================= */

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > .mod-menu__heading,
.container-header .mod-menu > .metismenu-item > a {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 110px;
    min-height: 32px;

    margin: 0;
    padding: 0 20px;

    border: 1px solid #38a8d0;
    border-radius: 2px;

    background:
        linear-gradient(
            to bottom,
            #61c7e8 0%,
            #4dbade 100%
        );

    color: #202020;

    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

    font-size: 16px;
    font-weight: normal;

    line-height: 30px;

    letter-spacing: 1px;

    text-transform: uppercase;
    text-decoration: none !important;

    box-sizing: border-box;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    cursor: pointer;
}


/* =========================================================
   ACTIVE / CURRENT MENU ITEM
   ========================================================= */

.container-header .mod-menu > li.current > a,
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > .metismenu-item.current > a,
.container-header .mod-menu > .metismenu-item.active > a {
    background:
        linear-gradient(
            to bottom,
            #199bce 0%,
            #1088c0 100%
        );

    border-color: #0f7fac;

    color: #e8f6fc;
}


/* =========================================================
   MENU HOVER
   ========================================================= */

.container-header .mod-menu > li:hover > a,
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > .metismenu-item:hover > a,
.container-header .mod-menu > .metismenu-item > a:hover {
    background:
        linear-gradient(
            to bottom,
            #d0d0d0 0%,
            #b9b9b9 100%
        );

    border-color: #8b8b8b;

    color: #222;
}


/* =========================================================
   DROPDOWN PARENT
   ABOUT + ARROW AS ONE VISUAL BUTTON
   ========================================================= */

.container-header .mod-menu > .metismenu-item {
    display: flex;
    align-items: stretch;
}


/* About link half */

.container-header .mod-menu > .metismenu-item > a {
    border-radius: 2px 0 0 2px;
    border-right: 0;

    min-width: 100px;
}


/* Arrow half */

.container-header .mod-menu > .metismenu-item > button,
.container-header .mod-menu button.mm-toggler,
.container-header .mod-menu button.mm-collapsed {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 32px !important;
    min-width: 32px !important;
    min-height: 32px;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #38a8d0 !important;
    border-left: 0 !important;
    border-radius: 0 2px 2px 0 !important;

    background:
        linear-gradient(
            to bottom,
            #61c7e8 0%,
            #4dbade 100%
        ) !important;

    color: #202020 !important;

    line-height: 30px;

    box-sizing: border-box;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;

    cursor: pointer;
}


/* Active dropdown parent */

.container-header .mod-menu > .metismenu-item.current > button,
.container-header .mod-menu > .metismenu-item.active > button {
    background:
        linear-gradient(
            to bottom,
            #199bce 0%,
            #1088c0 100%
        ) !important;

    border-color: #0f7fac !important;

    color: #e8f6fc !important;
}


/* Hover both halves together */

.container-header .mod-menu > .metismenu-item:hover > a,
.container-header .mod-menu > .metismenu-item:hover > button {
    background:
        linear-gradient(
            to bottom,
            #d0d0d0 0%,
            #b9b9b9 100%
        ) !important;

    border-color: #8b8b8b !important;

    color: #222 !important;
}


/* =========================================================
   DROPDOWN MENU
   ========================================================= */

.container-header .mod-menu .metismenu-item > ul,
.container-header .mod-menu ul.mod-menu__sub {
    position: absolute;

    z-index: 1000;

    top: 100%;
    left: 0;

    min-width: 175px;

    margin: 2px 0 0;
    padding: 4px;

    border: 1px solid #999;
    border-radius: 2px;

    background: rgba(225, 225, 225, 0.98);

    box-shadow:
        0 3px 7px rgba(0, 0, 0, 0.25);

    list-style: none;
}


/* Dropdown list items */

.container-header .mod-menu .metismenu-item > ul li,
.container-header .mod-menu ul.mod-menu__sub li {
    margin: 0;
    padding: 0;
}


/* Dropdown links */

.container-header .mod-menu .metismenu-item > ul a,
.container-header .mod-menu ul.mod-menu__sub a {
    display: block;

    min-width: 160px;

    margin: 0;
    padding: 8px 16px;

    background: transparent;

    border: 0;

    color: #303030;

    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

    font-size: 12px;
    font-weight: normal;

    line-height: 1.3;

    letter-spacing: 1px;

    text-transform: none;
    text-decoration: none;

    white-space: nowrap;

    box-sizing: border-box;
}


/* Dropdown hover */

.container-header .mod-menu .metismenu-item > ul a:hover,
.container-header .mod-menu ul.mod-menu__sub a:hover {
    background: #bfbfbf;

    color: #000;
}


/* =========================================================
   MAIN SITE GRID
   ========================================================= */

.site-grid {
    width: 1100px;
    max-width: calc(100% - 20px);

    margin: 10px auto 0;

    padding: 0;
}


/* Remove excessive Cassiopeia spacing */

main {
    padding-top: 0;
}


/* =========================================================
   COMPONENT / CONTENT AREA
   ========================================================= */

.container-component {
    margin: 0;
    padding: 15px;
}


/* =========================================================
   ARTICLE
   ========================================================= */

.item-page,
.com-content-article,
.com-content-article__body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

    font-size: 16px;
    line-height: 1.15;

    color: #111;
}


/* Article title */

.page-header h1,
.com-content-article h1,
.item-page h1 {
    margin: 10px 0 24px;

    padding: 0;

    color: #0e6086;

    font-family: "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

    font-size: 26px;
    font-weight: normal;

    line-height: 1.2;

    letter-spacing: 2px;
}


/* Paragraphs */

.com-content-article p,
.item-page p {
    margin: 0 0 12px;
}


/* Links */

.com-content-article a,
.item-page a {
    color: #0e6086;
}


/* =========================================================
   FRONT-END EDIT BUTTON
   ========================================================= */

.icons,
.com-content-article__edit {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1150px) {

    .container-header > .grid-child,
    .site-grid {
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
    }

    .container-header .navbar-brand,
    .container-header .container-nav {
        width: 100%;
        max-width: 100%;
    }
}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 800px) {

    .container-header .navbar-brand {
        min-height: 125px;
        height: 125px;
    }


    .container-header .navbar-brand::before {
        width: 110px;
        height: 100px;

        background-size: contain;
    }


    .container-header .navbar-brand .brand-logo::before {
        left: 105px;
        top: 25px;

        width: calc(100% - 115px);

        font-size: 22px !important;

        white-space: normal;
    }


    .container-header .navbar-brand .brand-logo::after {
        left: 135px;
        top: 68px;

        width: calc(100% - 145px);

        font-size: 15px !important;

        white-space: normal;
    }


    .container-header .container-nav {
        padding: 5px;
    }


    .container-header .mod-menu {
        justify-content: flex-start;
    }


    .container-header .mod-menu > li,
    .container-header .mod-menu > .metismenu-item {
        margin: 2px;
    }


    .container-header .mod-menu > li > a,
    .container-header .mod-menu > .metismenu-item > a {
        min-width: auto;

        padding-left: 14px;
        padding-right: 14px;

        font-size: 14px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .container-header .navbar-brand {
        height: 110px;
        min-height: 110px;
    }


    .container-header .navbar-brand::before {
        width: 85px;
        height: 85px;

        left: 0;
        top: 8px;
    }


    .container-header .navbar-brand .brand-logo::before {
        left: 85px;
        top: 24px;

        width: calc(100% - 95px);

        font-size: 17px !important;

        letter-spacing: 1px;
    }


    .container-header .navbar-brand .brand-logo::after {
        left: 100px;
        top: 62px;

        width: calc(100% - 110px);

        font-size: 12px !important;
    }


    .container-component {
        padding-left: 8px;
        padding-right: 8px;
    }
}