/* =========================================================
   Brooklyn Smallbore Rifle Club
   Cassiopeia custom styling
   ========================================================= */


/* ---------------------------------------------------------
   HEADER
   White header so the BSRC masthead blends into the page.
   --------------------------------------------------------- */

.container-header {
    background-color: #ffffff;
    background-image: none;
    box-shadow: none;
}


/* ---------------------------------------------------------
   LOGO / MASTHEAD
   --------------------------------------------------------- */

.container-header .navbar-brand img {
    max-width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   MAIN NAVIGATION
   --------------------------------------------------------- */

.container-header .mod-menu {
    color: #17366b;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
    color: #17366b;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus {
    color: #0056b3;
}


/* Dropdown indicators */
.container-header .metismenu.mod-menu .mm-toggler {
    color: #17366b;
}


/* ---------------------------------------------------------
   DESKTOP NAVIGATION AREA
   --------------------------------------------------------- */

.container-header .container-nav {
    align-items: center;
}


/* ---------------------------------------------------------
   DESKTOP SEARCH
   Small and aligned towards the right.
   --------------------------------------------------------- */

.container-header .container-search {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: -0.25rem;
    margin-left: 0;
}

.container-header .container-search input {
    width: 135px;
    max-width: 135px;
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
}


/* ---------------------------------------------------------
   PAGE BACKGROUND
   --------------------------------------------------------- */

body,
.site-grid,
.grid-child {
    background-color: #ffffff;
}


/* =========================================================
   MOBILE / TABLET
   Cassiopeia switches to the collapsible menu below 992px.
   ========================================================= */

@media (max-width: 991.98px) {

    /* Keep the header compact */
    .container-header {
        padding-bottom: 0;
    }


    /* Masthead */
    .container-header .navbar-brand {
        margin-right: 0;
        padding-bottom: 0.25rem;
    }

    .container-header .navbar-brand img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }


    /* -----------------------------------------------------
       MOBILE NAVIGATION ROW

       Navbar takes the full width so the expanded menu has
       plenty of room.

       Search is positioned at the right of the same row.
       ----------------------------------------------------- */

    .container-header .container-nav {
        position: relative;
        display: block;
        width: 100%;
        padding-top: 0.35rem;
        padding-bottom: 0.65rem;
    }


    /* Navbar / hamburger */
    .container-header nav.navbar {
        width: 100%;
        margin: 0;
        padding: 0;
    }


    /* Hamburger button */
    .container-header .navbar-toggler {
        display: block;
        visibility: visible;
        opacity: 1;
        color: #17366b;
        background-color: #ffffff;
        border: 1px solid #17366b;
        border-radius: 0.25rem;
        width: 48px;
        height: 42px;
        padding: 0.3rem 0.55rem;
        margin: 0;
    }

    .container-header .navbar-toggler:hover,
    .container-header .navbar-toggler:focus {
        color: #0056b3;
        border-color: #0056b3;
    }

    .container-header .navbar-toggler .icon-menu {
        color: #17366b;
    }


    /* Search sits on the same row as hamburger */
    .container-header .container-search {
        position: absolute;
        top: 0.35rem;
        right: 0;
        width: auto;
        margin: 0;
        display: block;
    }

    .container-header .container-search input {
        width: 145px;
        max-width: 42vw;
        font-size: 0.9rem;
        padding: 0.35rem 0.55rem;
    }


    /* -----------------------------------------------------
       EXPANDED MOBILE MENU
       ----------------------------------------------------- */

    .container-header .navbar-collapse {
        width: 100%;
        margin-top: 0.5rem;
    }

    .container-header .metismenu.mod-menu {
        width: 100%;
        background-color: #ffffff;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .container-header .metismenu.mod-menu > li {
        width: 100%;
    }

    .container-header .metismenu.mod-menu > li > a,
    .container-header .metismenu.mod-menu > li > span {
        color: #17366b;
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }


    /* Dropdowns inside mobile menu */
    .container-header .metismenu.mod-menu .mm-collapse {
        background-color: #ffffff;
    }


    /* -----------------------------------------------------
       MOBILE CONTENT SPACING
       Reduce the oversized gap beneath the header.
       ----------------------------------------------------- */

    .site-grid {
        margin-top: 0;
    }

    main {
        margin-top: 0.5rem;
    }


    /* Large headings are a little more restrained on phones */
    h1,
    .page-header h1,
    .item-page h1 {
        font-size: clamp(2rem, 8vw, 2.8rem);
        line-height: 1.12;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .container-header .container-search input {
        width: 135px;
        max-width: 44vw;
    }

    .container-header .navbar-toggler {
        width: 46px;
        height: 40px;
    }

    h1,
    .page-header h1,
    .item-page h1 {
        font-size: 2rem;
    }
}