/* Author: Jonpaul Betro; Date: 20241212 */
/* Update of Original Portal CSS by Jason Brown; Date: 20220823 */
/* DMA Tested Staging Environment; Date: 20250110 */
/* Updated Articles Mobile CSS and Mobile Header; Date: 20250219 */

/* Navigation Bar Styles */
.nav.nav-main {
    height: auto !important;
    padding: 0px !important;
    position: relative !important;
    z-index: 9999 !important;
    background-color: #000 !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
}

/* Header Container */
.skin-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 80px !important;
    background-color: #fff !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    position: relative;
}

/* Logo Section */
.skin-logo {
    width: 155px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    position: relative;
    z-index: 10;
}

.skin-logo img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Title Section */
.skin-title {
    display: flex !important;
    align-items: center !important;
    flex-grow: 1 !important;
    height: 55px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    text-align: left;
    margin-left: 10px;
}

.skin-title .title-text:after {
    content: 'RECOVER AND OVERCOME' !important;
    visibility: visible !important;
    position: absolute !important;
    top: 5px !important;
    left: 20px !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 22px !important;
    color: #333 !important;
    font-weight: 500 !important;
    border-left: 1px solid #333 !important;
    padding-left: 15px !important;
    text-shadow: 1px 1px 2px #333 !important;
}

/* Social and Search Container */
.skin-header-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 15px !important;
    height: 45px !important;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
}

.social.hidden-xs {
    display: block !important;
    width: 235px !important;
    height: 45px !important;
    line-height: 45px !important;
    text-align: right !important;
}

/* Search Bar */
.desktop-search {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 35px !important;
    width: 250px !important;
    margin: 0 15px !important;
    padding: 0 !important;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

.skin-search-input {
    height: 30px !important;
    width: calc(100% - 35px) !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding: 5px !important;
    margin-right: 5px !important;
    box-sizing: border-box !important;
    width: calc(100% - 40px);
}

.skin-search-go {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    width: 30px !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    text-align: center !important;
}

/* Hide search bars on mobile */
@media screen and (max-width: 768px) {
    .desktop-search, .skin-search {
        display: none !important;
    }
}

/* Hide the right header section on mobile */
@media screen and (max-width: 768px) {
    .skin-header-right {
        display: none !important;
    }
}

/* Dropdown Menu */
.otnav li {
    width: 16% !important;
    text-align: center !important;
    position: relative !important;
    list-style: none !important;
    display: inline-block !important;
}

/* -- Updated: all links are bold by default -- */
.otnav li a {
    color: #fff !important;
    background-color: #000 !important;
    padding: 10px 15px !important;
    text-decoration: none !important;
    transition: color 0.3s ease, background-color 0.3s ease !important;
    font-weight: bold !important; /* <--- This ensures no jitter on hover */
}

.otnav li a:hover,
.otnav li.active a {
    color: #F4D445 !important;
    background-color: transparent !important;
    /* font-weight: bold !important;  // It's already bold, so no need to re-apply */
}

/* Dropdown Menu Adjustments */
.otnav ul ul {
    position: absolute !important;
    top: 100% !important;
    left: 25% !important;
    width: 50% !important;
    background-color: #fff !important;
    border: none !important;
    z-index: 9999 !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

.otnav ul ul li {
    width: 100% !important;
}

.otnav ul ul li a {
    color: #000 !important;
    background-color: transparent !important;
    padding: 10px 15px !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: color 0.3s ease !important;
    text-align: left !important;
    /* If you want sub-menu items bold as well, add font-weight: bold !important here too */
}

.otnav ul ul li a:hover {
    color: #F4D445 !important;
    background-color: transparent !important;
    font-weight: bold !important;
}

/* Remove Skin Footer Elements */
div.skin-footer-top,
div.skin-footer-seal,
div.skin-footer-bottom {
    display: none !important; /* Hide footer elements */
}

/* Mobile-specific styles for better responsiveness */
@media screen and (max-width: 768px) {
    .skin-header {
        display: flex !important;
        flex-wrap: nowrap !important; /* Prevent wrapping */
        justify-content: space-between !important; /* Space out toggle and logo */
        align-items: center !important;
        height: auto !important;
        padding: 15px !important;
        background-color: #fff !important;
        text-align: left !important;
    }

    .skin-logo {
        order: 2; /* Move the logo to the right */
        margin-right: 10px !important; /* Add space between the logo and the toggle */
        flex: 0 0 auto; /* Prevent logo from expanding */
    }

    .skin-title {
        order: 3; /* Move the title to the right of the logo */
        font-size: 18px !important;
        color: #333 !important;
        font-weight: bold !important;
        text-align: left !important;
    }

    button.navbar-toggle {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important; /* Keep toggle on the left */
        z-index: 20 !important;
        background-color: #000 !important;
        color: #fff !important;
        border: none !important;
    }

    .navbar-toggle .icon-bar {
        background-color: #fff !important; /* White bars for better contrast */
    }

    .navbar-collapse {
        background-color: #fff !important;
        padding: 10px 0 !important;
    }

    .navbar-collapse .otnav {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .otnav li {
        display: block !important; /* Make each link take a full row */
        width: 100% !important; /* Full width */
        text-align: left !important; /* Align text to the left */
        padding: 10px 15px !important; /* Adjust padding for better spacing */
    }

    .navbar-collapse .otnav li a {
        color: #000 !important;
        padding: 10px 15px !important;
        text-decoration: none !important;
        display: block !important;
        transition: color 0.3s ease, background-color 0.3s ease !important;
    }

    .navbar-collapse .otnav li a:hover {
        background-color: #f4f4f4 !important; /* Light grey hover effect */
    }

    .navbar-collapse.collapse:not(.in) .otnav {
        display: none !important; /* Hide dropdown when not toggled */
    }

    .navbar-collapse.in .otnav {
        display: block !important; /* Show dropdown when toggled */
    }

    .extra-search-icon {
        display: none !important;
    }
    
    /* Remove margin for mobile on article body */
    .adetail.blog .article-body > div.body,
    .adetail.news .article-body > div.body,
    .adetail.transcript .article-body > div.body,
    .adetail.speeches .article-body > div.body,
    .adetail.bio .article-body > div.body,
    .adetail.factsheet .article-body > div.body {
        margin: 0 !important; /* Remove the 32px margin for mobile */
    }

    /* Disable padding for .containers-v2.boxed on mobile */
    .containers-v2.boxed {
      padding: 0 !important; /* Disable padding for mobile */
    }

    /* Center align title for .info.col-md-10.col-sm-9.col-xs-8 on mobile */
    .info.col-md-10.col-sm-9.col-xs-8 {
        text-align: center !important;  /* Centers the text */
        width: 100% !important;         /* Ensures the container takes up full width */
        margin: 0 auto !important;      /* Centers the container if needed */
    }

    .info.col-md-10.col-sm-9.col-xs-8 .title {
        font-size: 14px !important;      /* Ensures proper font size */
    }
}

/* Prevents header overlap */
#dnn_ctl03_header_banner_container {
    position: relative;
    z-index: 1;
}

/* Fix footer Quick Links wrapping */
footer.footer .quick-links a {
    display: block !important;
    margin-bottom: 5px !important;
}

.skin-footer {
    background-color: #000 !important;
    color: #fff !important;
    text-align: center !important;
    padding: 20px !important;
    position: relative;
    z-index: 1;
}

/* Global Footer Styles */
footer.footer,
footer.footer .skin-footer {
    background-color: #000 !important;  /* Black background */
    color: #fff !important;             /* White text */
    text-align: center !important;
    padding: 20px !important;
    position: relative;
    z-index: 1;
    clear: both !important;
}

/* Footer Quick Links Styling */
footer.footer .quick-links a {
    color: #fff !important; /* White links in the footer */
    text-decoration: none !important;
    margin-bottom: 5px !important; /* Maintain spacing */
    display: block !important; /* Stack vertically */
}

/* ------------------------------------------------------------------
   ADDED OVERRIDE FOR DESKTOP NAV HEIGHT
   ------------------------------------------------------------------ */
@media screen and (min-width: 769px) {
    .nav.nav-main {
        height: 40px !important;
        line-height: 40px !important;
    }
    /* Force link height to match the nav bar exactly */
    .otnav li a {
        /* Make the link a flex container for perfect vertical centering */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        height: 40px !important;
        line-height: normal !important;  /* Avoid bolding shifts */
        /* Remove top/bottom padding so total stays 40px tall */
        padding: 0 15px !important;
    }
	/* Navigation Bar */
	.nav.nav-main {
		padding-left: 10px !important; /* Adjust as needed */
    }

    /* Override 16% width on desktop */
    .otnav li {
        width: auto !important;
    }

    /* ADD SPACING BETWEEN LINKS ON DESKTOP ONLY */
    }
    .otnav li:not(:last-child) {
		margin-right: 25px !important;  /* Adjust spacing as desired */
    }
}

/* Desktop: limit footer width to 1170px, center it */
@media screen and (min-width: 992px) {
  footer.footer {
    max-width: 1170px !important;  /* NEW or UPDATED */
    margin: 0 auto !important;     /* NEW or UPDATED */
  }
}

#fb-root.fb_reset {
  display: none !important;
}

.wrapper {
  max-width: 100%;
}