/* DHS Forensic Handbook Styles */


/* =======================================
   DHS FH — Card Header Link
   ======================================= */

/* Remove underline from card header links - override global a styles */
.dhs-fh-card-header-link a {
    text-decoration: none !important;
    color: inherit !important;
}

/* All link states */
.dhs-fh-card-header-link a:link {
    text-decoration: none !important;
}

.dhs-fh-card-header-link a:visited {
    text-decoration: none !important;
}

.dhs-fh-card-header-link a:active {
    text-decoration: none !important;
}

/* Hover & Focus: ADD underline only on interaction */
.dhs-fh-card-header-link a:hover {
    text-decoration: underline !important;
}

.dhs-fh-card-header-link a:focus {
    text-decoration: underline !important;
}

/* =======================================
   DHS FH — Table of Contents
   ======================================= */

.dhs-fh-toc {
    background-color: #EFEEF0;
    padding: 1rem;
}

/* =======================================
   DHS FH — TOC Column Padding Reset
   ======================================= */

.dhs-fh-toc .aem-Grid,
.dhs-fh-toc .aem-GridColumn {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* =======================================
   DHS FH — Button Alignment
   ======================================= */
   
.cmp-button__list.dhs-fh-page-nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* =======================================
   DHS FH — Adjusting H2 sizing
   ======================================= */

.dhs-fh-page-nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* =======================================
   DHS FH — Adjusting H2 sizing
   ======================================= */

div.cmp-text[class*="dhs-fh-divider"] h2 {
  font-size: 2rem !important;
  line-height: 2.25rem !important;
}

/* =======================================
   DHS FH — Adjusting H3 sizing
   ======================================= */

div.cmp-text h3 {
  font-size: 1.5rem !important;
  line-height: 1.75rem !important;
}

/* =======================================
   DHS FH — Adjusting H4 sizing
   ======================================= */

div.cmp-text h4 {
  font-size: 1.25rem !important;
  line-height: 1.5rem !important;
}


/* =======================================
   DHS FH — Resources Download Button: hide arrow icon
   ======================================= */

a.cmp-text-cta.dhs-fh-btn-download .cmp-text-cta__font_icon {
    display: none !important;
}

a.cmp-text-cta.dhs-fh-btn-download::after {
    display: none !important;
}

a.cmp-text-cta.dhs-fh-btn-download .cmp-text-cta__text::after {
    display: none !important;
}


/* ===========================================
   SECONDARY BUTTON (apply class: dhs-fh-btn-secondary)
   =========================================== */

a.cmp-button.dhs-fh-btn-secondary,
a.cmp-button.dhs-fh-btn-secondary:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    padding: 0.9rem 1.6rem !important;
    box-sizing: border-box;

    font-weight: 800 !important;
    text-decoration: none !important;

    background-color: #ffffff !important;
    color: #005180 !important;

    border: 2px solid #005180 !important;
    border-radius: 0 !important;
}

/* Hover / focus */
a.cmp-button.dhs-fh-btn-secondary:hover,
a.cmp-button.dhs-fh-btn-secondary:focus,
a.cmp-button.dhs-fh-btn-secondary:active {
    background-color: #005180 !important;
    border-color: #005180 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

/* Focus */
a.cmp-button.dhs-fh-btn-secondary:focus-visible {
    outline: 2px solid #0097FF !important;
    outline-offset: 2px;
}


/* =======================================
   DHS FH — Callout Box Icons
   ======================================= */

.dhs-fh-callout-clock,
.dhs-fh-callout-statute,
.dhs-fh-callout-keynote {
    position: relative !important;
    padding-left: 3.5rem !important;
}

.dhs-fh-callout-clock::before,
.dhs-fh-callout-statute::before,
.dhs-fh-callout-keynote::before {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    line-height: 1;
}

.dhs-fh-callout-clock::before { content: "⏱"; }
.dhs-fh-callout-statute::before { content: "§"; }
.dhs-fh-callout-keynote::before { content: "★"; }

/* =======================================
   DHS FH — Section Title Styles
   ======================================= */

/* Shared section behavior */
.dhs-fh-section-ust,
.dhs-fh-section-ngri,
.dhs-fh-section-svp,
.dhs-fh-section-resources,
.dhs-fh-section-responsibilities,
.dhs-fh-section-locations,
.dhs-fh-section-overview {
    border: none !important;
    padding: 1rem !important;
}

/* Shared text behavior — child elements */
.dhs-fh-section-ust *,
.dhs-fh-section-ngri *,
.dhs-fh-section-svp *,
.dhs-fh-section-resources *,
.dhs-fh-section-responsibilities *,
.dhs-fh-section-locations *,
.dhs-fh-section-overview * {
    color: #FFFFFF !important;
    padding-left: 1rem !important;
}

/* Shared text behavior — when class is on cmp-text directly */
.dhs-fh-section-ust.cmp-text,
.dhs-fh-section-ngri.cmp-text,
.dhs-fh-section-svp.cmp-text,
.dhs-fh-section-resources.cmp-text,
.dhs-fh-section-responsibilities.cmp-text,
.dhs-fh-section-locations.cmp-text,
.dhs-fh-section-overview.cmp-text {
    color: #FFFFFF !important;
}

.dhs-fh-section-ust.cmp-text *,
.dhs-fh-section-ngri.cmp-text *,
.dhs-fh-section-svp.cmp-text *,
.dhs-fh-section-resources.cmp-text *,
.dhs-fh-section-responsibilities.cmp-text *,
.dhs-fh-section-locations.cmp-text *,
.dhs-fh-section-overview.cmp-text * {
    color: #FFFFFF !important;
}

/* UST — Orange */
.dhs-fh-section-ust {
    background-color: #E97131 !important;
}

/* NGRI — Purple */
.dhs-fh-section-ngri {
    background-color: #89259E !important;
}

/* SVP — Yellow (dark text for contrast) */
.dhs-fh-section-svp {
    background-color: #FBB839 !important;
}
.dhs-fh-section-svp *,
.dhs-fh-section-svp.cmp-text,
.dhs-fh-section-svp.cmp-text * {
    color: #000000 !important;
}

/* Resources — Green */
.dhs-fh-section-resources {
    background-color: #177A50 !important;
}

/* Responsibilities — Slate */
.dhs-fh-section-responsibilities {
    background-color: #44546A !important;
}

/* Locations — Blue */
.dhs-fh-section-locations {
    background-color: #0D70C8 !important;
}

/* Overview — Navy */
.dhs-fh-section-overview {
    background-color: #010A78 !important;
}



/* =======================================
   DHS FH — Line Accents by Section
   Applies to: h2, h3, h4, h5, h6, p
   Usage: add class to individual elements
   ======================================= */

/* UST — Orange */
.dhs-fh-divider-ust {
    border-top: 3px solid #E97131 !important;
    padding-top: 0.75rem !important;
    margin-top: 1rem;
}

/* NGRI — Purple */
.dhs-fh-divider-ngri {
    border-top: 3px solid #89259E !important;
    padding-top: 0.75rem !important;
    margin-top: 1rem;
}

/* SVP — Yellow */
.dhs-fh-divider-svp {
    border-top: 3px solid #FBB839 !important;
    padding-top: 0.75rem !important;
    margin-top: 1rem;
}

/* Resources — Green */
.dhs-fh-divider-resources {
    border-top: 3px solid #177A50 !important;
    padding-top: 0.75rem !important;
    margin-top: 1rem;
}

/* Responsibilities — Slate */
.dhs-fh-divider-responsibilities {
    border-top: 3px solid #44546A !important;
    padding-top: 0.75rem !important;
    margin-top: 1rem;
}

/* Locations — Blue */
.dhs-fh-divider-locations {
    border-top: 3px solid #0D70C8 !important;
    padding-top: 0.75rem !important;
    margin-top: 1rem;
}

/* Overview — Navy */
.dhs-fh-divider-overview {
    border-top: 3px solid #010A78 !important;
    padding-top: 0.75rem !important;
    margin-top: 1rem;
}


/* =======================================
   DHS FH — Hero Container with Image Overlay
   ======================================= */
div.cmp-container.dhs-fh-hero:not(.cmp-container__mobile) {
    position: relative;
    background-image: url('/content/dam/soi/en/web/dhsforensics/images/images-by-section/homepage/fh-cover.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    min-height: 300px !important;
    display: flex !important;
    align-items: center !important;
    padding: 1.5rem 2rem !important;
}

/* Dark overlay */
/*div.cmp-container.dhs-fh-hero:not(.cmp-container__mobile)::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 0;
}
*/
/* Ensure text sits above overlay */
div.cmp-container.dhs-fh-hero:not(.cmp-container__mobile) * {
    position: relative;
    z-index: 1;
    color: #FFFFFF !important;
}

/* Tablet */
@media (max-width: 1024px) {
    div.cmp-container.dhs-fh-hero:not(.cmp-container__mobile) {
        min-height: 220px !important;
        padding: 1rem 2rem !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    div.cmp-container.dhs-fh-hero:not(.cmp-container__mobile) {
        min-height: 160px !important;
        background-position: center top !important;
        padding: 1rem !important;
    }
}


/* =======================================
   DHS FH — Text Color Utilities
   ======================================= */

.dhs-fh-text-slate,
.dhs-fh-text-slate p,
.dhs-fh-text-slate em,
.dhs-fh-text-slate * {
    color: #44546A !important;
}


/* =======================================
   Agency Logo Sizing
   ======================================= */
.cmp-agency-header__logo {
    height: 2.875rem;
    width: auto;
}

@media (max-width: 600px) {
  .cmp-agency-header__logo {
    height: 1.8rem;
  }
}

/******************Weglot***********************************/

/*Restrict form width to remain within parent container 
   - form set to cover full width of pg. (used for translation purposes)*/
.guideContainerNode {
    max-width: 100%;
}
/*WeGlot Keyboard Focus*/
.wg-drop.wg-mouse-click>div:focus 
{ 
    outline: 3px solid #1CA6DF; 
}

/**********************************************************/

/* Removes width restraints on text components */
.cmp-text {
    max-width: 100%;
}

/* Centers Text in Container */
.text-center {
    text-align: center !important;
}

/* Set attributes for color bar above H1 title text */
.title .cmp-title h1::before {
    width: 5.9375rem;
    content: " ";
    height: .375rem;
    position: absolute;
    top: 0;
    left: 0;
}

/* Set color of bar above H1 Title here */
.title h1::before {
    background-color: #003E62;
    /* Uncomment the code below to remove the bar above the h1 title */
    display: none;
}

/* Set Agency Footer Color */
.cmp-agency-footer {
    background-color: #005180;
}

/* Set Global Footer Color */
.cmp-global-footer {
    background: #003E62;
}

/* Set color of border for event date icon */
.cmp-news-feed__event-date {
    border: 1px solid #C3371E;
}

/* Set color of background for month portion of event date icon */
.cmp-news-feed__event-date__month {
    background: #C3371E;
}

/* Set color of background for year portion of event date icon */
.cmp-news-feed__event-date__year {
    background: #C3371E;
}

.guideContainerNode .mobileLayout {
    display: none !important;
}

.afCheckBoxItem {
    width: 100%;
}

.guideWidgetLabel.right label,
.guideWidgetLabel.left label {
    line-height: 24px;
}

.guideContainerNode .red {
    color: #E21121;
}

.guideContainerNode .bold {
    font-weight: bold;
}

@media only screen and (min-width : 200px) {}

@media only screen and (min-width : 320px) {}

@media only screen and (max-width : 768px) {
    .afToolbarButton .guidebutton button .iconButton-icon {
        display: none!important;
    }
    .afToolbarButton .guidebutton button .iconButton-label {
        display: block!important;
    }
    .afToolbarButton .guidebutton button.submit {
        margin-right: 0!important;
    }
}

@media only screen and (min-width : 769px) {}

/* Agency Logo Sizing MQ */
@media (min-width: 1101px) .cmp-agency-header__logo {
    height: 4.25rem;
}

@media only screen and (min-width : 1200px) {}

@media only screen and (min-width : 1600px) {}