/* ====================================================

   Global

   ==================================================== */

/* This fixes all of the font that is being applied to the site. */
body {
  font-family: 'Rajdhani', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

p {
  font-family: 'Rajdhani', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  margin-bottom: 15px;
}

a {
  text-decoration: none;
  color: #286fa4;
  font-weight: 600;
}

strong,
b {
  font-weight: 700;
}

strong a, b a {
    font-weight: 700;
}

/* ====================================================
   USA Government Website
   ==================================================== */

.top-nav-bar {
    background-color: #000;
}

.top-nav-bar .top-nav-bar-top {
    background-color: #000;
}

/* Mobile Fixes */
@media (max-width: 575px) {
    .top-nav-bar .top-nav-bar-top {
        padding: 5px;
    }
    .top-nav-bar .top-nav-bar-top .usa-official-website.left .lnk-official-us-site {
        font-size: 11px;
    }
}

/* ====================================================
   Global Navigation
   ==================================================== */

.site-header .site-header__nav-link:hover, .site-header .site-header__nav-link.active {
    color: #ffc000;
    border-bottom-color: #ffc000;
}

/* Font fixes */
.site-header a.site-header__nav-link {
    font-family: 'Rajdhani', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

/* ====================================================
   Page Headers, Section Navigation
   ==================================================== */

/* Applies correct font to section and sub-page navigation */
#subpage-navbar, #subpage-navbar .section-nav-list li a, #subpage-navbar .section-subnav-list li a {
    font-family: 'Rajdhani', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Fixes padding issue for first item listed in sub-navigation */
.has-subnav li:first-child.active a {
    padding-left: 10.4px !important;
}

/* Fixes Breadcrumb - Font Size */
ol.breadcrumb.fbi-breadcrumb {
    font-size: 13px;
}

/* Fixes link for section navigation title */
h1.section-nav-title a {
    cursor: pointer;
    font-weight: 700;
}

h1.section-nav-title a:hover {
    text-decoration: underline;
}

ul.section-nav-list li a, ul.section-nav-list li ul.nav-more-dropdown a, li.nav-more-btn ul li > a, ul.section-subnav-list li a, ul.section-subnav-list li button.nav-more-toggle, ul.section-nav-list li button {
    font-size: 17px !important;
    font-weight: 600;
}

/* Mobile Fixes */
@media (max-width: 575px) {
    h1.section-nav-title a {
        font-size: 32px;
        line-height: 1.15 !important;
    }

    h1.section-nav-title {
        line-height: 1.15 !important;
        font-size: 32px !important;
    }

    /* Hides full breadcrumbs on mobile */
    .fbi-breadcrumb {
        display: none;
    }

    /* Makes breadcrumbs more visible on mobile */
    .fbi-breadcrumb-mobile-parent .mobile-parent-text {
        font-size: 13px;
    }
    
    .fbi-breadcrumb-mobile-parent .mobile-back-arrow {
        font-size: 17px;
    }

}


/* ====================================================
   Container Width Variables
   ==================================================== */

:root {
  --container-sm: 100%;
  --container-md: 100%;
  --container-lg: 100%;
  --container-xl: 100%;
  --container-xxl: 1320px;

  /* Main site max width */
  --container-max: var(--container-xl);
}

/* ====================================================
   Mosaic Grid - Container Width Fix
   ==================================================== */

@media (min-width: 1320px) {
    .col-count-1 .mosaic-grid-row,
    .toolbar-initialized .col-count-1 .mosaic-grid-row,
    .above-content-wrapper .mosaic-grid-row,
    .col-count-2, .col-count-3,
    :not(.template-layout) #content,
    #meta-tile-meta-above-content {
        padding-left: 10px;
        padding-right: 10px;
        max-width: var(--container-xxl);
        margin: 0 auto;
    }
}

.col-count-1 .mosaic-grid-row,
.above-content-wrapper .mosaic-grid-row,
.col-count-2,
.col-count-3,
:not(.template-layout) #content,
#meta-tile-meta-above-content {
    max-width: var(--container-xxl);
    padding-left: 10px;
    padding-right: 10px;
}

.col-count-1 .mosaic-grid-row:has(> div > .mosaic-fbigov\.theme\.video_hero-tile) {
    max-width: 100%;
    padding: 0;
}
.mosaic-grid-cell.mosaic-width-full:has(> .mosaic-fbigov\.theme\.video_hero-tile) {
    padding: 0;
}

/* ====================================================
   Main Navigation - Container Fixes
   ==================================================== */

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, div.container.site-header__top-inner {
        max-width: var(--container-xxl);
        
    }
}

/* Container width for main navigation */
@media (min-width: 1320px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    #mainHeader div.container.site-header__top-inner {
        max-width: var(--container-xxl);
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* ====================================================
   Subpage-Navbar Containers
   ==================================================== */

#subpage-navbar div.container {
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  #subpage-navbar div.container {
    max-width: var(--container-sm);
  }
}

@media (min-width: 768px) {
  #subpage-navbar div.container {
    max-width: var(--container-md);
  }
}

@media (min-width: 992px) {
  #subpage-navbar div.container {
    max-width: var(--container-lg);
  }
}

@media (min-width: 1200px) {
  #subpage-navbar div.container {
    max-width: var(--container-max);
  }
}

@media (min-width: 1320px) {
  #subpage-navbar div.container {
    max-width: var(--container-xxl);
  }
}

/* ====================================================
   Footer Fixes
   ==================================================== */

.site-footer div.container {
    padding-right: 10px;
    padding-left: 10px;
    margin: 0 auto;
    max-width: var(--container-xxl);
}

.site-footer .footer-links a {
    font-family: 'Rajdhani', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 18px;
}




/* ====================================================
   Mobile View Fixes
   ==================================================== */

/* 575px and lower */
@media (max-width: 575px) {
    ul.section-nav-list li a, ul.section-nav-list li ul.nav-more-dropdown a, li.nav-more-btn ul li > a, ul.section-subnav-list li a, ul.section-subnav-list li button.nav-more-toggle, ul.section-nav-list li button {
        font-size: 14px !important;
        font-weight: 600;
    }
    
    .mosaic-tile h1 {
        margin-bottom: 0;
    }
    
    p.sub-heading {
        font-family: 'Rajdhani', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
        font-size: 26px;
        font-weight: 500;
        line-height: 30px;
    }
    
    /* Featured Content Tile */
    .featured-content-backgroundimage .info-text h3 {
        font-size: 26px !important;
    }
    
    .cover-outer-container .cover-image-container.cover-container .cover-image-background .mosaic-grid-row .cover-image-content h2 {
        font-size: 22px;
    }
    
}

/* ====================================================
   Offcanvas Mobile Menu Fixes
   ==================================================== */

/* Font fixes */
.site-header .navbar-nav .nav-link {
  font-family: 'Rajdhani', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 20px;
}

/* Link hover fixes */
.site-header .navbar-nav .nav-link:hover {
  text-decoration: underline;
}

/* Scrollable offcanvas with hidden scrollbar */
#siteOffcanvas {
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hide scrollbar in Chrome, Safari, and modern Edge */
#siteOffcanvas::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Prevent the page behind the menu from scrolling */
html:has(#siteOffcanvas.show),
body:has(#siteOffcanvas.show) {
  overflow: hidden;
}

/* Default sticky header layer */
#mainHeader.site-header.sticky-top {
  z-index: 1020;
}

/*
   Because the offcanvas lives inside the header,
   the entire header must be lifted above the backdrop
   while the offcanvas is open.
*/
#mainHeader.site-header.sticky-top:has(#siteOffcanvas.show),
#mainHeader.site-header.sticky-top:has(#siteOffcanvas.showing) {
  z-index: 1050 !important;
}

/* Backdrop should sit above the page, but below the offcanvas */
.offcanvas-backdrop {
  z-index: 1040 !important;
}

/* Offcanvas menu should sit above the backdrop */
#siteOffcanvas.offcanvas,
#siteOffcanvas.offcanvas.show,
#siteOffcanvas.offcanvas.showing {
  z-index: 1055 !important;
  pointer-events: auto;
}

/*
   Let clicks on the visible header pass through to the backdrop.
   This allows clicking the header area to close the offcanvas.
*/
body:has(#siteOffcanvas.show) #mainHeader {
  pointer-events: none;
}

/* Keep the actual offcanvas menu and everything inside it clickable */
body:has(#siteOffcanvas.show) #siteOffcanvas,
body:has(#siteOffcanvas.show) #siteOffcanvas * {
  pointer-events: auto;
}

/*
   Optional visual treatment:
   Makes the regular header look like it is sitting under the overlay.
   Remove this block if you do not want the header dimmed.
*/
body:has(#siteOffcanvas.show) #mainHeader .site-header__top,
body:has(#siteOffcanvas.show) #mainHeader .site-header__nav {
  opacity: 0.45;
}

.castle-toolbar-container-side {
    z-index: 2;
}

/* ====================================================

   castle Fixes

   ==================================================== */


.castle-modal-wrapper .modal-dialog {
    max-width: 1000px;
}

.black-body-background .plone-modal-dialog {
    width: 100%;
}

.castle-toolbar-container .castle-toolbar-container-top {
    z-index: 1021;
}



/* ====================================================

   Header Fixes

   ==================================================== */

h1, .h1 {
    font-size: 36px;
}

h2, .h2 {
    font-size: 30px;
}

h3 {
    font-size: 22px;
}

/* ====================================================

   Site Footer

   ==================================================== */

.site-footer {
    padding: 0 12px;
}

/* ====================================================

   Story Pages Fixes

   ==================================================== */

/* Video Backgrounds for Story Pages */

.mosaic-grid-row-fullwidth {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: -10px !important;
    max-width: calc(100% + 20px) !important;
    width: calc(100% + 20px) !important;
}

/* ====================================================

   Homepage Fixes

   ==================================================== */

/* Carousel of Tweets */
.tweet-slide .tweet-body {
    font-size: 18px;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: normal;
}

.tweet-date {
    font-size: 14px;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: normal;
}

.tweet-x-view-label, .tweet-name, .tweet-handle, .about-video-label {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* 575px and lower */
@media (max-width: 575px) {
    .tweet-slide .tweet-body {
        font-size: 15px;
    }
    
    .tweet-date {
        font-size: 12px;
    }
    
    .quick-link-card {
        padding: 10px 5px;
    }
    
    /* Fixes padding issues with the entire page on mobile */
    .col-count-1 .mosaic-grid-row:has(> div > .mosaic-fbigov\.theme\.video_hero-tile) {
        max-width: var(--container-xxl);
        padding: 12px 12px;
    }
}



/* Fixes right padding issue with wanted scroller */
.wanted-scroll-track, .quick-link-scroll-track {
    margin-right: -15px;
}

/* ====================================================
   
   Query Filters

   ==================================================== */

.queryfilter-container .filter-fields label {
    display: block;
}

/* ====================================================
   
   Mobile View Fixes

   ==================================================== */

/* 575px and lower */
@media (max-width: 575px) {
    ul.section-nav-list li a, ul.section-nav-list li ul.nav-more-dropdown a, li.nav-more-btn ul li > a, ul.section-subnav-list li a, ul.section-subnav-list li button.nav-more-toggle, ul.section-nav-list li button {
        font-size: 14px !important;
        font-weight: 600;
    }
    
    .mosaic-tile h1 {
        margin-bottom: 0;
    }
    
    p.sub-heading {
        font-family: 'Rajdhani', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
        font-size: 26px;
        font-weight: 500;
        line-height: 30px;
    }
    
    /* Featured Content Tile */
    .featured-content-backgroundimage .info-text h3 {
        font-size: 26px !important;
    }
    
    
    /* Cover Image */
    .cover-outer-container .cover-image-container.cover-container .cover-image-background .mosaic-grid-row .cover-image-content h2 {
        font-size: 22px;
    }
    
    .cover-image-content {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .cover-image-container {
        height: 100% !important;
    }
    
    /* Gallery */
    .gallerydark-default-container-images, .gallerylight-default-container-images {
        height: 250px;
    }
    
    .gallerydark-default-container-image, .gallerylight-default-container-image {
        height: 250px;
    }
    
}.row.main-content.portal-column-two-container.main-content-portal-column-two-container.col-count-2 {
    max-width: 100%;
}

video#hero-video {
 z-index: 1 !important;
}

/* ================ */
/* Castle Overrides */
/* ================ */
.mosaic-modal.fade.in:not(.show) {
  opacity: unset;
}

.castle-toolbar-container .castle-toolbar-container-side {
  z-index: 1046;
}

.castle-toolbar-container .castle-toolbar-container-top {
  z-index: 1047;
}

body.template-edit .above-content-wrapper.mosaic-blur {
    position: relative;
}

/* fix modals, inputs */
.castle-btn-dropdown-messagesopened ul .castle-status-message-item {
    color: #334155;
}

div.plone-modal-content {
    margin: auto;
}

div.mosaic-overlay div.plone-modal-body textarea {
  display: block;
}
