/* ============================================================
   Makker 2026 brand refresh — DRAFT
   ------------------------------------------------------------
   A first, deliberately small step towards the new (future22)
   identity: new logotype + dark blue header/nav with white text.
   Colours are sampled straight out of the 2026 logo mark.

   Everything lives in this one file, loaded LAST in <head>.
   Rollback = drop the <link> (tools/rebrand.py --revert).

   Note on specificity: the page body carries a legacy inline
   <style> block with `.navbar-makker-dark {background-color:#6b6b6b}`.
   Inline <style> in the body comes after this file in document
   order, so the selectors below are intentionally more specific
   than a single class. Do not "simplify" them.
   ============================================================ */

:root {
    --makker-navy:       #0a3d60;  /* header/nav band  — logo #0e6ba7 darkened */
    --makker-navy-deep:  #072d47;  /* dropdown panels */
    --makker-navy-hover: #125b8c;  /* hover / open state */
    --makker-cyan:       #36bcee;  /* accent — the light face of the logo mark */
    --makker-ink:        rgba(255, 255, 255, 0.92);
}

/* ---------- 1. The header band -------------------------------------- */

header {
    background-color: var(--makker-navy);
    margin-bottom: 20px;                 /* replaces the navbar's own margin */
    position: relative;
    z-index: 1030;                       /* open mobile menu must sit above the hero */
}

header .logo {
    padding: 16px 10px 16px 0;
}

/* max-height, never height: the theme gives .logo width:55%, so between 768
   and 992px the box is narrower than the lockup's natural width. A fixed
   height plus max-width:100% clamped the width and kept the height, which
   squashed the mark. Two max- constraints let the browser scale it down
   proportionally instead. */
header .logo img,
header .row.visible-xs img {
    width: auto;
    height: auto;
    max-height: 84px;                    /* new lockup is wider/shorter than the old one */
    max-width: 100%;
}

/* ...and below 1200px, drop the theme's width:55% so the box shrink-wraps the
   lockup instead of forcing it smaller. .logo is floated, so width:auto is
   shrink-to-fit. Left untouched at >=1200px, which is the approved layout. */
@media (min-width: 768px) and (max-width: 1199px) {
    header .logo {
        width: auto;
        margin-left: 0;                  /* the theme's -20px pulled it outside the
                                            container once it stopped being centred;
                                            0 restores the >=1200px offset from the nav */
    }
}

/* Phone + e-mail, previously blue-on-white and stranded mid-band.
   rebrand.py widens their column (col-4 -> col-7) and hides the empty
   col-3 next to it, so right-aligning lands them on the page edge. */
.makkerheadercontact {
    margin-top: 42px;
    text-align: right;
}

.makkerheadercontact p,
.makkerheadercontact a,
.makkerheadercontact phone a {
    color: var(--makker-ink);
    text-decoration: none;
}

.makkerheadercontact a:hover,
.makkerheadercontact a:focus {
    color: var(--makker-cyan);
    text-decoration: underline;
}

/* ---------- 2. The navigation bar ------------------------------------ */

nav.navbar.navbar-default.navbar-makker-dark {
    background-color: var(--makker-navy);
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    margin-bottom: 0;
}

nav.navbar.navbar-makker-dark .navbar-nav > li > a {
    color: var(--makker-ink);
    font-weight: 500;
    border-bottom: 3px solid transparent;   /* accent slot, always reserved */
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

nav.navbar.navbar-makker-dark .navbar-nav > li > a:hover,
nav.navbar.navbar-makker-dark .navbar-nav > li > a:focus,
nav.navbar.navbar-makker-dark .navbar-nav > li:hover > a,
nav.navbar.navbar-makker-dark .navbar-nav > li:focus-within > a {
    color: #fff;
    background-color: var(--makker-navy-hover);
    border-bottom-color: var(--makker-cyan);
}

/* Current section — the old nav gave no "you are here" signal at all.
   tools/rebrand.py stamps class="active" on the matching top-level <li>. */
nav.navbar.navbar-makker-dark .navbar-nav > li.active > a,
nav.navbar.navbar-makker-dark .navbar-nav > li.active > a:hover,
nav.navbar.navbar-makker-dark .navbar-nav > li.active > a:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.07);
    border-bottom-color: var(--makker-cyan);
}

/* Keyboard users can now open the dropdowns; before this it was hover-only.
   Mirrors the theme's `.nav li:hover .dropdown-menu {display:inline-block}`. */
nav.navbar.navbar-makker-dark .nav li:focus-within > .dropdown-menu {
    display: inline-block;
}

/* ---------- 3. Dropdown panels --------------------------------------- */

nav.navbar.navbar-makker-dark .dropdown-menu {
    background-color: var(--makker-navy-deep);
    border: 0;
    border-top: 3px solid var(--makker-cyan);
    border-radius: 0;
    margin-top: 0;
    padding: 6px 0;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30);
}

nav.navbar.navbar-makker-dark .dropdown-menu > li > a {
    color: rgba(255, 255, 255, 0.85);
    padding: 8px 22px;
    background-image: none;              /* theme paints a blue gradient on hover */
}

nav.navbar.navbar-makker-dark .dropdown-menu > li > a:hover,
nav.navbar.navbar-makker-dark .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: var(--makker-navy-hover);
    background-image: none;
}

/* ---------- 4. Mobile ------------------------------------------------- */

@media (max-width: 767px) {

    header .logo img,
    header .row.visible-xs img {
        max-height: 52px;
    }

    nav.navbar.navbar-makker-dark .navbar-toggle {
        border-color: rgba(255, 255, 255, 0.5);
    }

    nav.navbar.navbar-makker-dark .navbar-toggle:hover,
    nav.navbar.navbar-makker-dark .navbar-toggle:focus {
        background-color: var(--makker-navy-hover);
    }

    nav.navbar.navbar-makker-dark .navbar-nav > li > a {
        border-bottom: 0;
        border-left: 3px solid transparent;
        padding: 11px 15px;
    }

    nav.navbar.navbar-makker-dark .navbar-nav > li.active > a,
    nav.navbar.navbar-makker-dark .navbar-nav > li > a:hover,
    nav.navbar.navbar-makker-dark .navbar-nav > li > a:focus {
        border-left-color: var(--makker-cyan);
    }

    /* Bootstrap caps the open menu at 340px and scrolls inside it. With the
       sub-pages now listed that turns into a cramped nested scroller - let
       the menu push the page down instead. */
    nav.navbar.navbar-makker-dark .navbar-collapse {
        max-height: none;
        overflow: visible;
        clear: both;                     /* start below the floated toggle */
    }

    /* The sub-pages were unreachable on touch: the theme only opens the
       dropdowns on :hover, and there is no data-toggle="dropdown" on the
       parent links. Show the whole tree inline instead of hiding it. */
    nav.navbar.navbar-makker-dark .navbar-collapse .dropdown-menu {
        display: block;
        position: static;
        float: none;
        width: auto;
        padding: 0 0 8px;
        border: 0;
        box-shadow: none;
        background-color: transparent;
    }

    nav.navbar.navbar-makker-dark .navbar-collapse .dropdown-menu > li > a {
        padding: 7px 15px 7px 34px;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.72);
    }
}

/* ---------- 5. Footer, so the page is bracketed in the same colour ---- */
/* The footer colour is an inline style attribute in shared/footer.cfm and
   in every mirrored page, so !important is the only way to reach it from
   a stylesheet. Remove this block to keep the footer grey. */

footer[style],
footer[style] .breadcrumb[style] {
    background-color: var(--makker-navy) !important;
}

footer .breadcrumb > li,
footer .breadcrumb > li > a {
    color: var(--makker-ink);
}

footer .breadcrumb > li > a:hover,
footer .breadcrumb > li > a:focus {
    color: var(--makker-cyan);
}
