/* ==========================================================================
   AAI Portal facelift v1
   --------------------------------------------------------------------------
   Upload as a CRM Web File alongside theme-v2.6.css, with a HIGHER
   adx_displayorder so it is emitted AFTER the theme. Html.ContentStyles
   orders by site map path offset, then adx_displayorder ascending
   (Adxstudio.Xrm/Web/Mvc/Html/StyleExtensions.cs:353).

   Nothing in theme-v2.6.css is edited. Rollback is deactivating this record.

   Scope: typeface, utility bar colour, nav link treatment, logo scale.
   Everything here is deliberately additive and override-only.

   Contents
     1. Fonts
     2. Utility bar
     3. Primary nav links
     4. Logo (desktop)
     5. Footer
     6. Mobile
     7. Headings
   ========================================================================== */


/* 1. Fonts ----------------------------------------------------------------
   TT Norms Pro replaces Proxima Nova.

   The three "proximanova-*" families below are ALIASES, not a mistake. Every
   font-family declaration in theme-v2.6.css names one of them, and @font-face
   is last-one-wins per family/weight/style, so redeclaring them here repoints
   all 13 existing rules without editing that file. The names are wrong now;
   renaming them is v2 work, because it means touching every rule in a file
   that has known parse errors.

   "Prelo-Medium" is aliased too. theme-v2.6.css:249 asks for it in
   .footer-tagline strong but no @font-face ever existed, so it has been
   silently falling back to Helvetica. This fixes that.

   Use "TT Norms Pro" for anything new.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "TT Norms Pro";
    src: url("/tt-norms-pro-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TT Norms Pro";
    src: url("/tt-norms-pro-medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TT Norms Pro";
    src: url("/tt-norms-pro-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Aliases onto the legacy family names. */
@font-face {
    font-family: "proximanova-regular";
    src: url("/tt-norms-pro-regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "proximanova-semibold";
    src: url("/tt-norms-pro-medium.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "proximanova-bold";
    src: url("/tt-norms-pro-bold.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Prelo-Medium";
    src: url("/tt-norms-pro-medium.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* 2. Utility bar ----------------------------------------------------------
   Was #EBEBEB with #5B6770 text. Now night-700 with white text, matching the
   secondary bar on autosinnovate.org.

   theme-v2.6.css already sets the links to uppercase 14px bold with
   `color: inherit`, so recolouring the bar recolours the links with it.
   Selectors below match the theme's own specificity and win on source order.
   -------------------------------------------------------------------------- */

header nav.utility-bar {
    background: #30417C;
    color: #FFFFFF;
}

header nav.utility-bar ul li a:hover {
    color: #CDD4D9;
    text-decoration: none;
}

/* The search control is a two-state PNG sprite (/search-strip.png) sized for
   the old light bar. Which half shows is ambiguous: theme-v2.6.css sets
   50% 0% and then immediately overrides it to 50% 100% at the same
   specificity, a leftover from the abandoned body.header-fixed work. Rather
   than depend on that, use an inline white SVG so the icon is correct on the
   dark bar regardless. */
header nav.utility-bar ul li.utility-bar-search a {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E");
    background-position: 50% 50%;
    background-size: 16px 16px;
}


/* 3. Primary nav links ----------------------------------------------------
   Kit values: 14px / weight 500 / letter-spacing .025em / uppercase / black.
   The theme already sets uppercase and the padding, so only colour, family,
   weight and tracking change here.

   The accent moves from the old teal (#0097A9) to tech-600 (#006AFF), the
   logo's base colour. Flagged in the implementation doc for sign-off.
   -------------------------------------------------------------------------- */

.navbar-default .navbar-nav > li > a {
    font-family: "TT Norms Pro", sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.025em;
    color: #000000;
}

    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > .open > a {
        color: #596E84;
    }

        .navbar-default .navbar-nav > .open > a,
        .navbar-default .navbar-nav > .open > a:focus,
        .navbar-default .navbar-nav > .open > a:hover {
            border-bottom-color: #006AFF !important;
        }

.dropdown-menu > li > a,
.dropdown-menu > li > a:hover {
    font-family: "TT Norms Pro", sans-serif;
    font-weight: 400;
    color: #000000;
}

    .dropdown-menu > li > a:hover {
        color: #006AFF;
    }


/* 4. Logo (desktop) -------------------------------------------------------
   The logo stays where the template puts it: left, in .navbar-header. Only its
   scale and vertical alignment are corrected.

   Unstyled it rendered at its natural 340x80, which is what threw the header
   off. The nav links are 74px tall (theme-v2.6.css padding-top 30 +
   line-height 18 + padding-bottom 26), so a 40px logo with 17px of padding
   totals the same 74px and sits on the same optical line as the nav.

   .navbar-header carries an inline style="height: auto; margin-bottom: 20px"
   in the template, which is why the margin reset needs !important.

   992px matches the breakpoint theme-v2.6.css already uses.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {

    /* One flex row: logo, then nav. Bootstrap floats .navbar-header left and
       lets .navbar-collapse flow beside it, but ul.weblinks is a flex
       container and so establishes its own formatting context: instead of
       flowing around the float it must sit clear of it, and any forced full
       width pushes the whole nav onto a second row. Making the container an
       explicit flex row removes the float interaction entirely. */
    .header-top > .container {
        display: flex;
        align-items: center;
    }

    .header-top .navbar-header {
        float: none;
        flex: 0 0 auto;
        margin-bottom: 0 !important;
    }

    .header-top .navbar-brand {
        float: none;
        height: auto;
        padding: 17px 0;
    }

        /* The snippet wraps its anchor in a <p>. */
        .header-top .navbar-brand p {
            margin: 0;
        }

        .header-top .navbar-brand img {
            display: block;
            width: auto;
            height: 40px;
        }

    /* The nav takes the rest of the row. Change justify-content on
       ul.weblinks to `center` if the links should sit centred in that space
       rather than ranged right. */
    .header-top #navbar {
        float: none;
        flex: 1 1 auto;
        width: auto;
        padding-left: 0;
        padding-right: 0;
    }

    .header-top .menu-bar {
        float: none;
        width: 100%;
    }

    .header-top ul.weblinks {
        display: flex;
        float: none;
        width: 100%;
        align-items: center;
        justify-content: flex-end;
    }

        .header-top ul.weblinks > li {
            float: none;
        }

        /* The new design has no dividers between nav items. */
        .header-top ul.weblinks > li.divider-vertical {
            display: none;
        }
}


/* 5. Footer ---------------------------------------------------------------
   theme-v2.6.css:194 sets .footer { background: #000; color: #fff }, so the
   footer needs the KNOCKOUT logo. The standard mark has a black wordmark and
   would leave a floating sunburst on black.

   Sized to match the header logo. The Footer snippet wraps it in a <p>, whose
   bottom margin would otherwise push the copyright line away.
   -------------------------------------------------------------------------- */

.footer .footer-bottom img {
    display: block;
    width: auto;
    height: 40px;
}

.footer .footer-bottom p {
    margin-bottom: 10px;
}


/* 6. Mobile ---------------------------------------------------------------
   Below 992px the Bootstrap collapse behaviour is untouched. Only the logo
   in the existing .navbar-header is resized.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .header-top .navbar-header .visible-xs-block img,
    .header-top .navbar-header .navbar-brand img {
        display: block;
        width: auto;
        height: 32px;
    }
}

/* 7. Headings -------------------------------------------------------------
   Two-tier blue hierarchy, replacing the orange section headings.

   Page heading: night-700, the same dark blue as the utility bar.
   theme-v2.6.css:146 sets `h1, h2 { color: #3498DB }` with no !important and
   the same specificity, so source order alone wins.

   Section headings: tech-700. theme-v2.6.css:164 sets
   `.content-box-heading { color: #EF6A00 !important }`, so !important is
   forced here. Equal specificity plus later source order beats it.

   .content-box-heading is authored in CRM content, not in the portal source,
   so the class may sit on the heading element itself or wrap one. Both are
   covered below rather than guessing.

   Contrast on white, AA needs 4.5:1 normal / 3:1 large:
     #3498DB 3.15:1   #EF6A00 3.12:1   <- both fail at section-heading size
     #30417C 9.66:1   #005FD4 5.85:1   <- replacements
   tech-600 #006AFF was the other candidate at 4.66:1. tech-700 is used
   instead: the section headings render around 17px bold, which is below the
   18.66px bold threshold for "large text", so they need the full 4.5:1 and
   4.66:1 leaves no margin.
   -------------------------------------------------------------------------- */

h1,
h2 {
    color: #30417C;
}

.content-box-heading,
.content-box-heading h1,
.content-box-heading h2,
.content-box-heading h3,
.content-box-heading h4 {
    color: #005FD4 !important;
}