/*================================================================
  1️⃣  Font‑faces (unchanged – just keep the same files)
================================================================*/
@font-face {
    font-family: 'ProximaNovaRegular';
    src: url('/Content/fonts/proximanova-regular-webfont.eot');
    src: url('/Content/fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/Content/fonts/proximanova-regular-webfont.woff') format('woff'), url('/Content/fonts/proximanova-regular-webfont.ttf') format('truetype'), url('/Content/fonts/proximanova-regular-webfont.svg#ProximaNovaRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ProximaNovaBold';
    src: url('/Content/fonts/proximanova-bold-webfont.eot');
    src: url('/Content/fonts/proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'), url('/Content/fonts/proximanova-bold-webfont.woff') format('woff'), url('/Content/fonts/proximanova-bold-webfont.ttf') format('truetype'), url('/Content/fonts/proximanova-bold-webfont.svg#ProximaNovaBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ProximaNovaExtrabold';
    src: url('/Content/fonts/proximanova-extrabold-webfont.eot');
    src: url('/Content/fonts/proximanova-extrabold-webfont.eot?#iefix') format('embedded-opentype'), url('/Content/fonts/proximanova-extrabold-webfont.woff') format('woff'), url('/Content/fonts/proximanova-extrabold-webfont.ttf') format('truetype'), url('/Content/fonts/proximanova-extrabold-webfont.svg#ProximaNovaExtrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*================================================================
  2️⃣  CSS‑variables (Bootstrap overrides)
================================================================*/
:root {
    /* Typography */
    --bs-body-font-family: "ProximaNovaRegular", Arial, Helvetica, Tahoma, sans-serif;
    --bs-headings-font-family: "ProximaNovaBold", Arial, Helvetica, Tahoma, sans-serif;
    /* Colours – keep the original palette */
    --bs-primary-rgb: 0, 123, 255; /* fallback Bootstrap primary */
    --bs-primary: #007bff;
    --bs-secondary: #6c757d;
}

/*================================================================
  3️⃣  Global body & background
================================================================*/
body {
    background-color: #f6f6f6;
    font-family: var(--bs-body-font-family);
    padding-top: 0;
    padding-bottom: 5px;
}

/* Striped background for ≥ md (same as original media query) */
@media (min-width: 768px) {
    body {
        background: url("/Images/bk_stripe.gif") no-repeat center top #f6f6f6;
    }
}

/*================================================================
  4️⃣  Headings
================================================================*/
h1,
h2,
h3,
h4 {
    font-family: var(--bs-headings-font-family);
    text-shadow: 0 1px 1px #fff;
}

/*================================================================
  5️⃣  Navbar / page header (replaces #page-header, #primary‑nav‑bar)
================================================================*/
/* Wrapper – sets a max‑width like the old 983 px */
#page-header {
    max-width: 983px;
    margin: 0 auto;
    height: 60px;
    position: relative;
}

/* Logo – retains the hidden‑text technique */
.company-logo-wrapper {
    position: absolute;
    left: 150px; /* same offset as original */
    top: 10px;
    width: 175px;
    height: 60px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: url("/Images/ngc-logo-175.png") no-repeat left top;
    background-size: 175px 60px;
}

/* Retina‑ready logo (same rule set as before) */
@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi) {
    .company-logo-wrapper {
        background-image: url("/Images/ngc-logo-175.png");
    }
}

.company-logo {    
    height: 100%;
    height: 60px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: url("/Images/ngc-logo-175.png") no-repeat left bottom;
    background-size: 175px 60px;
    /* iPad Retina Display. Or other tablet High Def image replacement */
}

@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi) {
    .company-logo {
        background-image: url("/Images/ngc-logo-175.png");
    }
}

/* Bootstrap navbar – use `navbar-expand-lg` for the same breakpoint
   as the original 992 px media query */
#primary-nav-bar {
    height: 75px;
}

    /* Brand text – larger size on desktop */
    #primary-nav-bar .navbar-brand {
        font-size: 1.8rem; /* matches 1.8em */
    }

/* Align the container a little lower (mirrors original margin‑top) */
#primary-nav-bar-container {
    margin-top: 13px;
}

/*================================================================
  6️⃣  Buttons (kept, but now inherit Bootstrap’s utilities)
================================================================*/
.btn,
button,
input[type="button"],
input[type="submit"] {
    font-family: "ProximaNovaBold", Arial, Helvetica, Tahoma, sans-serif;
    font-weight: normal;
}

/*================================================================
  7️⃣  Form validation messages (same classes)
================================================================*/
span.field-validation-error,
span.required,
.validation-summary-errors {
    color: red;
}

/*================================================================
  8️⃣  Footer (replaces #main‑footer)
================================================================*/
#main-footer {
    color: #5e676d;
    padding: 1.5rem 0;
}

    #main-footer .container {
        border-top: 1px solid #babfc3;
    }

        #main-footer .container ul {
            padding-top: 1.5rem;
        }

#main-footer-company-info .column {
    margin-top: .5rem 0;
    margin-bottom: .5em;
}

/* -------------------------------------------------
   Custom background utility (bg‑custom)
   ------------------------------------------------- */

/* 1️⃣ Define the colour – change the hex to your brand colour */
:root {
    --bs-custom-bg: #0d2c54; /* example: Northrop Grumman blue */
}

/* 2️⃣ The utility class */
.bg-custom {
    background-color: #0d2c54;
}

/* 3️⃣ Helper for readable text on a dark background */
.text-on-custom {
    color: #fff !important; /* white text */
}

/* 4️⃣ Optional: light‑mode version (if you need a lighter shade) */
.bg-custom-light {
    background-color: #e6edf5 !important; /* a soft pastel */
    color: #0d2c54 !important; /* dark text for contrast */
}

/*================================================================
  9️⃣  Card‑style panels (Bootstrap 5 no longer has .panel)
================================================================*/
/* `panel-primary` → `.card border-primary` */
.panel-primary > .panel-body > .panel-default > .panel-heading {
    color: #555; /* same as original rule */
}

/* Header for any generic panel – use `.card-header` */
.panel .panel-title {
    display: inline-block;
    font-weight: bold;
}

/* Default panel header gradient – mapped to a custom utility */
.panel-default > .panel-heading {
    background: linear-gradient(to bottom, #eaeaeb 0%, #c8cdd0 100%);
    border-bottom: none;
}

/*================================================================
 10️⃣  Page‑header utility (replaces .page-header)
================================================================*/
.page-header {
    margin-top: 0 !important;
}

    .page-header > h1,
    .page-header > h2,
    .page-header > h3,
    .page-header > h4 {
        color: #354753;
        margin-top: 0 !important;
        font-size: 2rem;
    }

/*================================================================
 11️⃣  Misc helpers (kept from original)
================================================================*/
.btn-panel-heading {
    margin-top: -9px;
}

/* Panel nesting colour fix (kept for legacy markup) */
.panel-primary > .panel-body > .panel-default > .panel-heading {
    color: #555;
}