/* ==========================================================================
   1NAVWAR Portal.css Stylesheet for AFPIMS Navy 2 Theme
   Modified to support 1NAVWAR Standard Style
   Optimized by Larry Collette, NIWC-Atlantic

   Last update: 2026.08.18 12:57PM EST

   CHANGE LOG:
   2026.08.18 - Duplicated NIWC palette to NAVWAR naming convention; marked NIWC as legacy
   2026.08.18 - Fixed 100vh mobile nav bug, centered mobile logo, adjusted footer grid, and corrected mobile card display
   2026.08.18 - Appended overrides to optimize skin.css issues (base64 bloat & specificity)
   2026.08.18 - Fixed mobile breakpoint media queries & 100vw overflow bug
   2026.08.18 - Cleaned stylesheet to core site theme; isolated custom dynamic form styles
   2026.08.18 - Removed unused Chakra Petch CSS classes and commented font rules
   2026.03.11 - Removed Chakra Petch font, font is not universally used
   2025.11.17 - Added Chakra Petch font-family to navbar to adjust changes to navy.mil 
   2023.10.19 - Tweaked Header-Banner for full screen bg color 
   2023.08.23 - Fixed the 3 cards module to show text on mobile view 
   2023.06.22 - Hide Parallax BG Image on Mobile View, Fixed PaneFooterBG Image to local 
   2023.06.21 - Hide Tag Line 
   2023.06.08.b - Correct h3 font size 
   2023.05.26 - Added Static "bg-panel-gray" Class 
   ========================================================================== */


/* Reset skin.css to default bootstrap.css */
body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;
   font-weight: 500;
}

/* Changes the default Navy Theme font family Roboto Slab to Roboto */
body h1, body h2, body h3, body h4, body h5, body h6, div h3 {
   font-family: Roboto, serif;
   font-weight: 700;
}

/* fix h3 font-size */
body h3 {
   font-size: 1.75rem;
}

.breadcrumbs-container .page-indicator-white h1 {
   font-family: Roboto, serif;
   font-weight: 700;
}

#jumbotron-video {
  top: 0;
  right: 0;
  overflow: hidden; 
  width: 100%;
}

/* Fix Main Nav Drop Down Item Link Color */
.bg-dark a {
   color: #FFFFFF;
   text-decoration: none;
}

.header-banner {
  background-color: #333333;
  position: relative; 
  overflow: hidden; 
  height: 600px;
  padding-bottom: 25px;
}

#logo-overlay {
  z-index: 99999;
  position: absolute;
  width: 50%;
  left: 45%;
  top: 50%;
  transform: translateY(-50%);
}

.header-banner img {
  position: absolute;
  width: 100%;
  margin: auto;
  top: -100%;
  left: 0;
  right: 0;
  bottom: -100%;
}

img.banner-align-bottom {
  top: -100%; 
  bottom: 0;
}

img.banner-align-top {
  top: 0; 
  bottom: -100%;
}

.campaign-panel-title {
   font-family: "Roboto Flex", Roboto, serif;
   font-weight: 700;
   text-shadow: 1px 1px #333333;
}

.campaign-panel-body {
   font-family: "Roboto Flex", Roboto, serif;
   font-weight: 100;
   text-shadow: 1px 1px #333333;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Tablet & Mobile Screens (< 992px) */
@media (max-width: 991px) {
  .header-banner {
    width: 100%;
    height: 200px;
    margin: auto;
  }

  #jumbotron-area,
  #FrontPage-TagLine {
    overflow: hidden; 
    display: none; 
  }

  #logo-overlay {
    z-index: 99999;
    position: absolute;
    width: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
  }
}

/* Mobile Screens (< 768px) */ 
@media only screen and (max-width: 767px) {
  .card h2, 
  .card p {
      display: block; 
  }
}

/* ==========================================================================
   NAVWAR Palette Utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   NEW NAMING CONVENTION (Standard for new development)
   -------------------------------------------------------------------------- */
/* Text Colors */
.text-navwar-red        { color: #B71234; }
.text-navwar-blue       { color: #002F5F; }
.text-navwar-gold       { color: #FDC82F; }
/* Note: Corrected to 'color' from legacy 'background-color' for text classes */
.text-navwar-light-blue { color: #739ABC; }
.text-navwar-light-gray { color: #BCBDBC; }
.text-navwar-dark-gray  { color: #4D4F53; }

/* Background Colors */
.bg-navwar-red          { background-color: #B71234; }
.bg-navwar-blue         { background-color: #002F5F; }
.bg-navwar-gold         { background-color: #FDC82F; }
.bg-navwar-light-blue   { background-color: #739ABC; }
.bg-navwar-light-gray   { background-color: #BCBDBC; }
.bg-navwar-dark-gray    { background-color: #4D4F53; }

/* --------------------------------------------------------------------------
   LEGACY NAMING CONVENTION (Do not use for new development)
   Maintained to prevent breaking existing sites.
   -------------------------------------------------------------------------- */
/* Text Colors */
.text-niwc-red       { color: #B71234; }
.text-niwc-blue      { color: #002F5F; }
.text-niwc-gold      { color: #FDC82F; }
.text-niwc-light-blue{ background-color: #739ABC; }
.text-niwc-light-gray{ background-color: #BCBDBC; }
.text-niwc-dark-gray { background-color: #4D4F53; }

/* Background Colors */
.bg-niwc-red        { background-color: #B71234; }
.bg-niwc-blue       { background-color: #002F5F; }
.bg-niwc-gold       { background-color: #FDC82F; }
.bg-niwc-light-blue { background-color: #739ABC; }
.bg-niwc-light-gray { background-color: #BCBDBC; }
.bg-niwc-dark-gray  { background-color: #4D4F53; }

/* General utility */
.bg-panel-gray      { background-color: #3d3c3c; }


/* ==========================================================================
   Footer Styling
   ========================================================================== */

/* Hides blank space in between footer and DoN Seal */
div.col-md.footer-links,
div.foot-info-container {
   visibility: hidden;
   display: none;
}

/* Fixes Padding bug with FooterPane */
#dnn_FooterPane {
   padding-left: 0;
   padding-right: 0;
}

#footer-bar {
   margin: 0;
   width: 100%;
   height: auto;
   color: #FFFFFF;
   background-size: cover;
   background-color: #3E6A8F;
   line-height: 1.5;
   font-family: Roboto, serif;
   font-weight: 400;
   font-size: 11pt;
}

#footer-bar a {
   color: #CCCCCC;
}

.footer-title {
   color: #FFFFFF;
   border-bottom: 2px solid #B71234;
   text-shadow: 1px 1px #333333;
}

/* ==========================================================================
   SKIN.CSS OPTIMIZATION OVERRIDES
   The following rules address specificity, performance, and structure issues 
   identified in the generated core skin.css file.
   ========================================================================== */

/* 1. Performance: Remove Heavy Base64 Inlined Image 
   This removes the render-blocking 85vw base64 image bloat from the mobile nav 
   to improve load times. Replace 'url(/path/to/optimized-image.png)' if a 
   background is still required. */
#mobile-nav-wrap .bg {
    background-image: none !important;
}

/* 2. Specificity & Overrides:
   Address the brittle, deeply-nested chaining and overuse of !important in skin.css.
   Use high-specificity flattening where possible to ensure clean overrides without 
   creating an !important arms race. */
.DNNInfo_SiteMap ul li a {
    box-shadow: none !important; /* Overrides the forced shadows from skin.css */
    border: none !important; 
}

/* 3. Mobile Nav 100vh Bug Fix 
   Uses dynamic viewport height (dvh) for modern mobile browsers to prevent 
   clipping behind dynamic address bars, with a fallback for older browsers. */
.mobile-nav-open #mobile-nav-wrap {
    height: 100vh !important; /* Fallback for unsupported browsers */
    height: 100dvh !important;
}

/* 4. Footer Grid Viewport Constraints Fix
   Overrides the hardcoded '35vw 50vw' grid layout on mobile to utilize a more 
   fluid and flexible fractional layout to prevent awkward wrapping. */
@media (max-width: 991.98px) {
    .foot-info-container {
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
    }
}