/* ==================== SITE HEADER, ISLAND MENUS, FOOTER (Oct 2026) ====================
   Markup: MasterPage2.master + App_Code/BLL/SiteNav.cs (menu items, footer links).
   Behaviour: hg-site.js. Desktop: the island menus open on hover (or the caret / keyboard focus)
   as full-width panels; the logo row scrolls away and the menu row stays pinned.
   Phones and small tablets (<= 860px): logo bar + burger; the menu opens search-first, and each
   island label links to its hub while the caret beside it expands the accordion.
   Everything is prefixed hgx- so Bootstrap and hgmasterstylesheet.css never collide. */

:root {
    --hgx-ink: #3f3a2d;
    --hgx-brown: #584e38;
    --hgx-muted: #756a53;     /* small text: 4.6:1 on sand, 5.2:1 on cream (was #8a7d62) */
    --hgx-cream: #fffdf3;
    --hgx-sand: #f6efd9;
    --hgx-gold: #a8874d;      /* rules, borders and icons only - 3.3:1 is too light for text */
    --hgx-gold-text: #80673b; /* same hue for eyebrows and labels: 4.7:1 on sand, 5.3:1 on cream */
    --hgx-line: #e4d9bb;
    --hgx-red: #882427;
    --hgx-blue: #256aa0;      /* links: 4.6:1 even on the old #f0e7c0 panels (was #2a7ab8) */
    --hgx-serif: 'Fraunces', Georgia, serif;
    --hgx-sans: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --hgx-top: 68px;     /* height of the logo row (desktop); the header sticks at -this */
    --hgx-pinned: 49px;  /* what stays pinned: the menu row (desktop) or the logo bar (phones) */
}

/* in-page anchors land below the pinned menu row */
html {
    scroll-padding-top: calc(var(--hgx-pinned) + 14px);
}

/* Sitewide link colour. Bootstrap's #337ab7 is 4.0:1 on sand and 3.7:1 on the old #f0e7c0
   panels; this file loads after Bootstrap, so plain links take this instead (classed links and
   Bootstrap's darker hover keep their own colours). */
a {
    color: var(--hgx-blue);
}

/* Bootstrap's light-blue .btn-info has white text at 2.1:1. Opt-in darker version, used on
   the Search Filters button (SearchResults.aspx). */
.btn-info.hgx-btn-info,
.btn-info.hgx-btn-info:focus {
    background-color: #1f7e9a;
    border-color: #1a6d86;
    color: #fff;
}

    .btn-info.hgx-btn-info:hover,
    .btn-info.hgx-btn-info:active,
    .btn-info.hgx-btn-info:active:focus {
        background-color: #186a82;
        border-color: #145a6e;
        color: #fff;
    }

/* ---------------------------------------------------------------- header */

.hgx-hd {
    position: -webkit-sticky;
    position: sticky;
    top: calc(-1 * var(--hgx-top));
    z-index: 1020;
    margin: 0 -15px;  /* full bleed inside .container-fluid */
    background: rgba(255, 253, 243, .97);
    border-bottom: 1px solid var(--hgx-line);
    font-family: var(--hgx-sans);
    color: var(--hgx-ink);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

    .hgx-hd a:hover {
        text-decoration: none;
    }

/* the form's first submit button swallows a stray Enter (ImageButton, returns false) */
.hgx-enter {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.hgx-top {
    max-width: 1180px;
    height: var(--hgx-top);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 8px 20px 0;
}

.hgx-logo img {
    display: block;
    height: 52px;
    width: auto;
}

.hgx-tag {
    flex: 1;
    min-width: 0;
    font-family: var(--hgx-serif);
    font-size: 19px;
    line-height: 1.2;
    color: var(--hgx-brown);
}

    .hgx-tag span {
        display: inline-block;
        margin-left: 10px;
        font: 600 11px/1 var(--hgx-sans);
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--hgx-gold-text);
        border: 1px solid #e2cf9f;
        border-radius: 20px;
        padding: 5px 10px;
        vertical-align: 3px;
    }

.hgx-account {
    text-align: right;
    font-size: 13px;
    line-height: 1.35;
    color: var(--hgx-muted);
}

    .hgx-account a {
        color: var(--hgx-brown);
    }

        .hgx-account a:hover {
            color: var(--hgx-blue);
        }

    .hgx-account .hgx-saved {
        font-size: 14px;
        font-weight: 600;
        color: var(--hgx-red);
    }

    .hgx-account .glyphicon,
    .hgx-mfav .glyphicon {
        top: 2px;
        margin-right: 3px;
    }

.hgx-mfav {
    display: none;
    font-size: 15px;
    white-space: nowrap;
}

    .hgx-mfav a {
        color: var(--hgx-red);
    }

.hgx-burger {
    display: none;
}

/* ---------------------------------------------------------------- menu row */

.hgx-nav {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 12px;
    display: flex;
    align-items: center;
}

.hgx-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2px;
}

.hgx-item {
    position: static;
}

.hgx-link {
    display: inline-block;
    padding: 12px 14px 13px;
    font-weight: 600;
    font-size: 15.5px;
    line-height: 20px;
    color: var(--hgx-ink);
    border-bottom: 3px solid transparent;
}

    .hgx-link:hover,
    .hgx-link:focus,
    .hgx-item:hover > .hgx-link,
    .hgx-item:focus-within > .hgx-link,
    .hgx-item.open > .hgx-link {
        color: var(--hgx-brown);
        border-bottom-color: var(--hgx-gold);
        text-decoration: none;
    }

.hgx-caret {
    display: none;
}

/* navbar search: same controls and autocomplete (hg-autocomplete.js) as before */
.hgx-search {
    margin-left: auto;
    flex: 0 1 270px;
    min-width: 170px;
}

    .hgx-search .form-group {
        position: relative; /* anchor for .hg-ac-panel */
        display: flex;
        margin: 0;
    }

    .hgx-search .search-box-rsp {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        height: 34px;
        border: 1px solid var(--hgx-line);
        border-radius: 18px 0 0 18px;
        box-shadow: none;
        background: #fff;
        font-size: 14px;
        padding: 6px 14px;
    }

        .hgx-search .search-box-rsp:focus {
            border-color: var(--hgx-gold);
            box-shadow: 0 0 0 2px rgba(168, 135, 77, .18);
        }

    .hgx-search .search-go-btn {
        height: 34px;
        margin: 0;
        padding: 0 14px;
        border: 0;
        border-radius: 0 18px 18px 0;
        background: var(--hgx-red);
        color: #fff;
        font-weight: 600;
        font-size: 14px;
    }

        .hgx-search .search-go-btn:hover,
        .hgx-search .search-go-btn:focus {
            background: #6f1c1f;
            color: #fff;
        }

/* ---------------------------------------------------------------- mega panels (desktop) */

.hgx-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fffdf6;
    border-top: 1px solid var(--hgx-line);
    border-bottom: 1px solid var(--hgx-line);
    box-shadow: 0 18px 30px -18px rgba(60, 45, 15, .35);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility 0s .16s;
}

/* a short delay so a pointer crossing the menu row doesn't flash panels open */
.hgx-item:hover > .hgx-mega,
.hgx-item:focus-within > .hgx-mega,
.hgx-item.open > .hgx-mega {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: .12s, .12s, 0s;
}

.hgx-item.open > .hgx-mega {
    transition-delay: 0s;
}

/* Escape closes a hovered panel until the pointer leaves the item */
.hgx-item.hgx-shut > .hgx-mega {
    opacity: 0;
    visibility: hidden;
}

.hgx-mega-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 20px 26px;
    display: flex;
    gap: 28px;
}

.hgx-feature {
    flex: 0 0 270px;
    min-height: 210px;
    border-radius: 10px;
    background-color: #c9d6d4;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    color: #fff;
}

    .hgx-feature::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .7));
    }

    .hgx-feature:hover,
    .hgx-feature:focus {
        color: #fff;
    }

.hgx-feature-label {
    position: relative;
    padding: 14px 16px;
    font-family: var(--hgx-serif);
    font-size: 21px;
    line-height: 1.2;
}

    .hgx-feature-label b {
        display: block;
        margin-top: 4px;
        font: 500 12.5px/1.4 var(--hgx-sans);
        opacity: .92;
    }

.hgx-feature:hover .hgx-feature-label {
    text-decoration: underline;
}

.hgx-cols {
    flex: 1;
    display: grid;
    grid-template-columns: 1.15fr 1fr .95fr;
    gap: 26px;
}

.hgx-mega-small .hgx-cols {
    grid-template-columns: 1fr;
}

.hgx-mega-small .hgx-col ul {
    -webkit-columns: 3;
    columns: 3;
    -webkit-column-gap: 40px;
    column-gap: 40px;
}

.hgx-h {
    margin: 2px 0 12px;
    font: 700 11px/1 var(--hgx-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hgx-gold-text);
}

.hgx-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hgx-col li {
    margin: 0;
}

.hgx-col a {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--hgx-ink);
}

    .hgx-col a:hover,
    .hgx-col a:focus {
        color: var(--hgx-blue);
    }

.hgx-count {
    color: var(--hgx-muted);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.hgx-region {
    margin: 8px 0 1px !important;
    font-size: 12px;
    font-style: italic;
    color: var(--hgx-muted);
}

    .hgx-region:first-child {
        margin-top: 0 !important;
    }

.hgx-hub-link a {
    margin-top: 4px;
    font-weight: 600;
    color: var(--hgx-blue);
}

.hgx-tools a {
    font-size: 14px;
    color: #5c5340;
}

/* ---------------------------------------------------------------- footer */

.hgx-ft {
    margin: 40px -15px 0;
    padding: 48px 20px 26px;
    background: #2b2720;
    color: #cfc6b0;
    font-family: var(--hgx-sans);
}

.hgx-ft-grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 26px;
}

.hgx-ft-h {
    margin: 0 0 10px;
    font-family: var(--hgx-serif);
    font-size: 20px;
    color: #fff;
}

.hgx-ft-col a {
    display: block;
    padding: 3px 0;
    font-size: 14px;
    color: #cfc6b0;
}

    .hgx-ft-col a:hover,
    .hgx-ft-col a:focus {
        color: #fff;
    }

    .hgx-ft-col a.hgx-ft-hub {
        color: #fff;
        font-weight: 600;
    }

.hgx-ft-base {
    max-width: 1180px;
    margin: 34px auto 0;
    padding-top: 18px;
    border-top: 1px solid #4a4336;
    font-size: 13.5px;
    text-align: center;
}

    .hgx-ft-base a {
        color: #e8dfc8;
    }

        .hgx-ft-base a:hover {
            color: #fff;
        }

.hgx-ft-copy {
    margin-top: 10px;
    color: #998f77; /* 4.6:1 on the footer */
}

.hgx-ft-logos {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

    .hgx-ft-logos .hgx-hvcb {
        height: 56px;
        width: auto;
        padding: 5px 10px;
        border-radius: 6px;
        background: #fffdf3;
    }

/* ---------------------------------------------------------------- tablet */

@media (max-width: 1060px) {
    .hgx-feature {
        display: none;
    }

    .hgx-link {
        padding-left: 11px;
        padding-right: 11px;
    }

    .hgx-mega-small .hgx-col ul {
        -webkit-columns: 2;
        columns: 2;
    }
}

/* ---------------------------------------------------------------- phones: burger + accordion */

@media (max-width: 860px) {
    :root {
        --hgx-pinned: 59px;
    }

    .hgx-hd {
        top: 0;
    }

    .hgx-top {
        height: auto;
        min-height: 58px;
        gap: 12px;
        padding: 8px 6px 8px 14px;
    }

    .hgx-logo img {
        height: 40px;
    }

    .hgx-tag {
        font-size: 15px;
    }

        .hgx-tag span {
            display: none;
        }

    .hgx-account {
        display: none;
    }

    .hgx-mfav {
        display: block;
        margin-left: auto;
    }

    .hgx-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 46px;
        height: 44px;
        padding: 0 10px;
        border: 0;
        background: none;
        cursor: pointer;
    }

        .hgx-burger span {
            display: block;
            height: 2px;
            background: var(--hgx-brown);
            border-radius: 2px;
            transition: transform .15s, opacity .15s;
        }

        .hgx-burger[aria-expanded='true'] span:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }

        .hgx-burger[aria-expanded='true'] span:nth-child(2) {
            opacity: 0;
        }

        .hgx-burger[aria-expanded='true'] span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

    .hgx-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        max-height: calc(100vh - 58px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 0 14px;
        border-top: 1px solid var(--hgx-line);
    }

        .hgx-nav.open {
            display: flex;
        }

    /* search first in the open menu */
    .hgx-search {
        order: -1;
        flex: none;
        margin: 0;
        padding: 12px 14px;
        border-bottom: 1px solid var(--hgx-line);
    }

        .hgx-search .search-box-rsp {
            height: 44px;
            font-size: 16px; /* 16px+ stops iOS zooming the page on focus */
        }

        .hgx-search .search-go-btn {
            height: 44px;
            padding: 0 18px;
            font-size: 16px;
        }

    .hgx-list {
        flex-direction: column;
        gap: 0;
    }

    .hgx-item {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid var(--hgx-line);
    }

    .hgx-link {
        flex: 1;
        padding: 14px 18px;
        font-size: 17px;
        border: 0;
    }

    .hgx-caret {
        display: block;
        position: relative;
        width: 60px;
        border: 0;
        border-left: 1px solid var(--hgx-line);
        background: none;
        cursor: pointer;
    }

        .hgx-caret::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 9px;
            height: 9px;
            border-right: 2px solid var(--hgx-brown);
            border-bottom: 2px solid var(--hgx-brown);
            transform: translate(-50%, -70%) rotate(45deg);
            transition: transform .15s;
        }

    .hgx-item.open .hgx-caret::after {
        transform: translate(-50%, -30%) rotate(-135deg);
    }

    .hgx-mega {
        position: static;
        flex-basis: 100%;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        background: var(--hgx-sand);
        transition: none;
    }

    .hgx-item:hover > .hgx-mega,
    .hgx-item:focus-within > .hgx-mega {
        display: none;
    }

    .hgx-item.open > .hgx-mega {
        display: block;
    }

    .hgx-mega-inner {
        display: block;
        padding: 6px 18px 16px;
    }

    .hgx-cols {
        display: block;
    }

    .hgx-col {
        margin-top: 12px;
    }

    .hgx-mega-small .hgx-col ul {
        -webkit-columns: 1;
        columns: 1;
    }

    .hgx-col a {
        padding: 8px 0;
        font-size: 16px;
    }

    .hgx-ft {
        padding: 36px 18px 24px;
    }

    .hgx-ft-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 18px;
    }

    .hgx-ft-col a {
        padding: 5px 0;
    }
}

@media (max-width: 480px) {
    .hgx-tag {
        display: none;
    }
}