/* ==================================================
   DHR Page Typography Defaults
   Apply `.dhr-page-style` to the top-level container on redesigned pages
   ================================================== */

/* ===========================
   Headings – refined rhythm
   =========================== */

.dhr-page-style h1,
.dhr-page-style h2,
.dhr-page-style h3,
.dhr-page-style h4,
.dhr-page-style h5,
.dhr-page-style h6 {
  color: #002277;
}

/* Large, expressive headings */
.dhr-page-style h1 {
  line-height: 1.25;
}

.dhr-page-style h2 {
  line-height: 1.3;
}

/* Structural headings */
.dhr-page-style h3 {
  line-height: 1.35;
}

.dhr-page-style h4 {
  line-height: 1.4;
}

/* Small / label-style headings */
.dhr-page-style h5,
.dhr-page-style h6 {
  line-height: 1.45;
}


/* Body text */
.dhr-page-style p,
.dhr-page-style li {
  color: #222222;
}

/* Text link styles */
.dhr-page-style a {
  color: #002277;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.dhr-page-style a:hover,
.dhr-page-style a:focus {
  color: #0097FF;
}

.cmp-agency-header__header img.cmp-agency-header__logo {
  height: 48px !important;
  width: auto !important;
  max-width: 100%;
  display: block;
}

/* ===========================
   Dark background text context
   Usage: add .dhr-theme-dark to a section/container
   =========================== */

.dhr-theme-dark h1,
.dhr-theme-dark h2,
.dhr-theme-dark h3,
.dhr-theme-dark h4,
.dhr-theme-dark h5,
.dhr-theme-dark h6 {
  color: #ffffff;
}

.dhr-theme-dark p,
.dhr-theme-dark li {
  color: #f2f2f2;
}

/* Links on dark */
.dhr-theme-dark a {
  color: #cfd8ff; /* light, accessible blue */
}

.dhr-theme-dark a:hover,
.dhr-theme-dark a:focus-visible {
  color: #ffffff;
}

/* Page Title (AEM Core Title component)
   Scoped to redesigned pages to override global `.title .cmp-title__text` styles */
.dhr-page-style .title .cmp-title__text {
  color: #002277;
  line-height: 1.15; /* better for large H1 titles */
}

/* If the page title is rendered as a link, keep styling consistent */
.dhr-page-style .title .cmp-title__text a {
  color: inherit;
  text-decoration: none;
}

.dhr-page-style .title .cmp-title__text a:hover,
.dhr-page-style .title .cmp-title__text a:focus {
  text-decoration: underline;
  color: #0097FF;
}



/* ===========================
   Colored Background Blocks
   =========================== */


.dhr-bg-light {
  background-color: #f7f5f1;
  padding: 1rem;
  margin: 1rem;
}

.dhr-bg-bright-blue {
  background-color: #0097ff;
  padding: 1rem;
  margin: 1rem;
}

.dhr-bg-dark {
  background-color: #002277;
  padding: 1rem;
  margin: 1rem;
}

/* ===========================
   Tile Buttons – AEM Grid Override
   Wrapper: 
   - "dhr-tile-row" (base)
   Buttons: add class "dhr-btn--tile"
   =========================== */

/* Layout wrapper */
.dhr-tile-row > .aem-Grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  justify-content: center;
  align-items: stretch;

  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Remove AEM clearfix interference */
.dhr-tile-row > .aem-Grid::before,
.dhr-tile-row > .aem-Grid::after {
  content: none !important;
  display: none !important;
}

/* Grid columns */
.dhr-tile-row > .aem-Grid > .aem-GridColumn {
  float: none !important;
  width: auto !important;

  flex: 1 1 220px;
  max-width: 320px;
  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Normalize button wrapper */
.dhr-tile-row .cmp-button.dhr-btn--tile {
  width: 100%;
  margin: 0 !important;
}

/* ===========================
   BUTTON BASE
   =========================== */

.dhr-tile-row .cmp-button.dhr-btn--tile,
.dhr-tile-row .dhr-btn--tile .cmp-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  width: 100%;
  max-width: 100%;
  min-height: 56px;

  padding: 0.9rem 1.6rem;
  margin: 0;
  box-sizing: border-box;

  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;

  border-radius: 0;
  white-space: nowrap;
  cursor: pointer;
}

/* ===========================
   DEFAULT (DARK BACKGROUND)
   =========================== */

.dhr-tile-row .cmp-button.dhr-btn--tile,
.dhr-tile-row .dhr-btn--tile .cmp-button__link {
  background-color: #ffffff;
  color: #002277;
  border: 2px solid #ffffff;
}

/* Hover */
.dhr-tile-row .cmp-button.dhr-btn--tile:hover,
.dhr-tile-row .cmp-button.dhr-btn--tile:focus,
.dhr-tile-row .dhr-btn--tile .cmp-button__link:hover,
.dhr-tile-row .dhr-btn--tile .cmp-button__link:focus {
  background-color: #f7f5f1;
  color: #002277;
  border-color: #f7f5f1;
  outline: none;
}



/* ===========================
   MOBILE
   =========================== */

@media (max-width: 520px) {
  .dhr-tile-row > .aem-Grid {
    justify-content: stretch;
  }

  .dhr-tile-row > .aem-Grid > .aem-GridColumn {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .dhr-tile-row .cmp-button.dhr-btn--tile,
  .dhr-tile-row .dhr-btn--tile .cmp-button__link {
    white-space: normal;
  }
}

/* =======================================
   TEXT HIGHLIGHTS  
   ======================================= */

/* Shared highlight behavior */
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-highlight-blue,
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-highlight-green-light,
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-highlight-yellow,
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-highlight-blue-alt,
.dhr-text-highlight-blue :is(h1,h2,h3,h4,h5,h6,p,li,a),
.dhr-text-highlight-green-light :is(h1,h2,h3,h4,h5,h6,p,li,a),
.dhr-text-highlight-yellow :is(h1,h2,h3,h4,h5,h6,p,li,a),
.dhr-text-highlight-blue-alt :is(h1,h2,h3,h4,h5,h6,p,li,a) {
  display: inline;
  padding: 0 0.16em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 1;
}

/* BLUE — light */
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-highlight-blue,
.dhr-text-highlight-blue :is(h1,h2,h3,h4,h5,h6,p,li,a) {
  background-image: linear-gradient(
    transparent 60%,
    #AADDFF 60%
  );
}

/* GREEN — light */
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-highlight-green-light,
.dhr-text-highlight-green-light :is(h1,h2,h3,h4,h5,h6,p,li,a) {
  background-image: linear-gradient(
    transparent 60%,
    #66DDB3 60%
  );
}

/* YELLOW */
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-highlight-yellow,
.dhr-text-highlight-yellow :is(h1,h2,h3,h4,h5,h6,p,li,a) {
  background-image: linear-gradient(
    transparent 60%,
    #FFD95C 60%
  );
}

/* BLUE — alt */
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-highlight-blue-alt,
.dhr-text-highlight-blue-alt :is(h1,h2,h3,h4,h5,h6,p,li,a) {
  background-image: linear-gradient(
    transparent 60%,
    #B8C2FF 60%
  );
}



/* =======================================
   TEXT BACKGROUNDS — complete system
   ======================================= */

/* Shared behavior */
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-bg-blue,
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-bg-green,
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-bg-green-light,
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-bg-yellow,
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-bg-blue-alt,
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-bg-blue-strong,
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-bg-navy,
.dhr-text-bg-blue :is(h1,h2,h3,h4,h5,h6,p,li,a),
.dhr-text-bg-green :is(h1,h2,h3,h4,h5,h6,p,li,a),
.dhr-text-bg-green-light :is(h1,h2,h3,h4,h5,h6,p,li,a),
.dhr-text-bg-yellow :is(h1,h2,h3,h4,h5,h6,p,li,a),
.dhr-text-bg-blue-alt :is(h1,h2,h3,h4,h5,h6,p,li,a),
.dhr-text-bg-blue-strong :is(h1,h2,h3,h4,h5,h6,p,li,a),
.dhr-text-bg-navy :is(h1,h2,h3,h4,h5,h6,p,li,a) {
  display: inline;
  padding: 0.02em 0.14em;
  line-height: 1.2;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* BLUE — light */
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-bg-blue,
.dhr-text-bg-blue :is(h1,h2,h3,h4,h5,h6,p,li,a) {
  background-color: #AADDFF;
  color: #002277;
}

/* GREEN — mid-tone (matches highlight) */
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-bg-green-light,
.dhr-text-bg-green-light :is(h1,h2,h3,h4,h5,h6,p,li,a) {
  background-color: #66DDB3;
  color: #002277;
}

/* GREEN — saturated */
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-bg-green,
.dhr-text-bg-green :is(h1,h2,h3,h4,h5,h6,p,li,a) {
  background-color: #00AA77;
  color: #002277;
}

/* YELLOW — saturated */
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-bg-yellow,
.dhr-text-bg-yellow :is(h1,h2,h3,h4,h5,h6,p,li,a) {
  background-color: #FFBB11;
  color: #002277;
}

/* BLUE — compliance (blue-purple mid-tone) */
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-bg-blue-alt,
.dhr-text-bg-blue-alt :is(h1,h2,h3,h4,h5,h6,p,li,a) {
  background-color: #B8C2FF;
  color: #002277;
}

/* BLUE — strong */
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-bg-blue-strong,
.dhr-text-bg-blue-strong :is(h1,h2,h3,h4,h5,h6,p,li,a) {
  background-color: #0097FF;
  color: #FFFFFF;
}

/* NAVY — strong */
:is(h1,h2,h3,h4,h5,h6,p,li,a).dhr-text-bg-navy,
.dhr-text-bg-navy :is(h1,h2,h3,h4,h5,h6,p,li,a) {
  background-color: #002277;
  color: #FFFFFF;
}

/* =========================================================
   ICON BADGES (Text components only)
   Refined spacing + alignment
   ========================================================= */

/* Base badge behavior */
.dhr-icon-badge {
  --dhr-badge-size: 1.75rem;
  --dhr-icon-size: 1rem;

  position: relative;
  padding-left: 2.4rem; /* more intentional space */
}

/* Small (TOC) */
.dhr-icon-sm {
  --dhr-badge-size: 1.45rem;
  --dhr-icon-size: 0.85rem;
  padding-left: 2.2rem;
}

/* Large (section headings) */
.dhr-icon-lg {
  --dhr-badge-size: 1.75rem;
  --dhr-icon-size: 1.2rem;
  padding-left: 2.4rem;
}

/* Normalize calendar icon at large size to match scale icon */
.dhr-icon-lg.dhr-icon-calendar::before {
  background-size: 1.05rem; /* slightly smaller than default 1.2rem */
}

/* Badge */
.dhr-icon-badge::before {
  content: "";
  position: absolute;
  left: 0;
  width: var(--dhr-badge-size);
  height: var(--dhr-badge-size);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--dhr-icon-size);
  border-radius: 50%;
  border: 1px solid #B0B0B0;
}

/* Icon mappings */
.dhr-icon-badge.dhr-icon-plus::before {
  background-image: url("/content/dam/soi/en/web/dhr/images/icons/plus.svg");
}

.dhr-icon-badge.dhr-icon-calendar::before {
  background-image: url("/content/dam/soi/en/web/dhr/images/icons/calendar.svg");
}

.dhr-icon-badge.dhr-icon-arrow-path::before {
  background-image: url("/content/dam/soi/en/web/dhr/images/icons/arrow-path.svg");
}

.dhr-icon-badge.dhr-icon-magnifying-glass::before {
  background-image: url("/content/dam/soi/en/web/dhr/images/icons/magnifying-glass.svg");
}

.dhr-icon-badge.dhr-icon-document-text::before {
  background-image: url("/content/dam/soi/en/web/dhr/images/icons/document-text.svg");
}

.dhr-icon-badge.dhr-icon-scale::before {
  background-image: url("/content/dam/soi/en/web/dhr/images/icons/scale.svg");
}

.dhr-icon-badge.dhr-icon-house::before {
  background-image: url("/content/dam/soi/en/web/dhr/images/icons/house.svg");
}

/* ===========================
   DHR SIDE NAV – Refined
   Scoped to: .dhr-sidenav
   =========================== */

/* Layout */
.dhr-sidenav {
  margin-right: 1rem;
}

/* Title (top label) */
.dhr-sidenav .cmp-navigation__title,
.dhr-sidenav .cmp-navigation__title a {
  margin: 0 0 0.75rem 0;
  font-weight: 700;
  color: #002277;
  text-decoration: none;
}

/* Reset list */
.dhr-sidenav .cmp-navigation__group {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Dividers on the LI */
.dhr-sidenav .cmp-navigation__item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(176, 176, 176, 0.55);
}

.dhr-sidenav .cmp-navigation__item:last-child {
  border-bottom: 0;
}

/* Row wrapper (holds link + chevron button) — this controls vertical rhythm */
.dhr-sidenav .cmp-navigation__item > .cmp-navigation__title {
  display: flex;               /* matches core behavior */
  align-items: center;
  justify-content: space-between;

  padding: 0.4rem 0 !important; /* tighten rhythm (overrides core) */
  margin: 0 !important;
  min-height: 0 !important;
}

/* Hover tint on the whole row */
.dhr-sidenav .cmp-navigation__item > .cmp-navigation__title:hover,
.dhr-sidenav .cmp-navigation__item > .cmp-navigation__title:focus-within {
  background: rgba(16, 0, 85, 0.04);
}

/* Link: keep it calm + consistent across states */
.dhr-sidenav .cmp-navigation__item-link,
.dhr-sidenav .cmp-navigation__item-link:visited,
.dhr-sidenav .cmp-navigation__item-link:active {
  display: block;
  padding: 0 !important;       /* wrapper provides spacing */
  line-height: 1.25 !important;
  font-weight: 600;
  color: #002277 !important;
  text-decoration: none !important;
}

/* Underline on hover/focus (paired with tint above) */
.dhr-sidenav .cmp-navigation__item-link:hover,
.dhr-sidenav .cmp-navigation__item-link:focus {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Visible keyboard focus */
.dhr-sidenav .cmp-navigation__item-link:focus {
  outline: 2px solid rgba(102, 137, 255, 0.9);
  outline-offset: 2px;
}

/* Active/current page */
.dhr-sidenav .cmp-navigation__item--active {
  border-left: 0;
  padding-left: 0;
}

.dhr-sidenav .cmp-navigation__item--active > .cmp-navigation__title {
  border-left: 3px solid #002277;
  background: rgba(16, 0, 85, 0.04);
  padding-left: 0.5rem !important;
}

.dhr-sidenav .cmp-navigation__item--active > .cmp-navigation__title .cmp-navigation__item-link {
  font-weight: 700;
}

/* Mobile: keep the contained block behavior */
@media (max-width: 768px) {
  .dhr-sidenav {
    margin: 0.75rem 0 1rem 0;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(176,176,176,0.55);
    border-radius: 8px;
    background: #fff;
  }

  /* Slightly larger tap target on mobile */
  .dhr-sidenav .cmp-navigation__item > .cmp-navigation__title {
    padding: 0.55rem 0 !important;
  }
}



/* =======================================
   INTRO PARAGRAPH
   (apply class: dhr-intro)
   ======================================= */

.dhr-intro p {
  font-size: 1.35rem;
  line-height: 1.6;
  color: #222222;
  max-width: 60rem;
  margin-bottom: 1.5rem;
}

/* Links inside intro */
.dhr-intro p a {
  color: #002277;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.dhr-intro p a:hover,
.dhr-intro p a:focus {
  color: #0097FF;
}



/* =========================================
   DHR Nav Row (simple card: text + button)
   ========================================= */


.dhr-nav-row {
  position: relative;
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 0.75rem;
  background: #ffffff;
  border: 2px solid #002277;   /* default border */
  border-radius: 4px;
  margin-block: 0 1.25rem;
  text-align: left;
}

/* Hover: border only */
.dhr-nav-row:hover {
  border-color: #0097FF;
  background: #ffffff;
}

/* Keyboard focus: match hover for accessibility */
.dhr-nav-row:focus-visible {
  border-color: #0097FF;
  outline: 0;
}



/* ===========================
   DHR Nav Row – Image as Background
   Add class: dhr-nav-row dhr-nav-row--bg
   =========================== */

.dhr-nav-row.dhr-nav-row--bg {
  position: relative;
  overflow: hidden;          /* ensures background image doesn't spill */
}

/* Background image wrapper (AEM Image component) */
.dhr-nav-row.dhr-nav-row--bg .cmp-image {
  position: absolute;
  inset: 0;                  /* top/right/bottom/left = 0 */
  margin: 0 !important;
  z-index: 0;
}

/* The actual <img> should fill the card */
.dhr-nav-row.dhr-nav-row--bg .cmp-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* key "background-like" behavior */
  display: block;
}

/* Optional overlay for readability */
.dhr-nav-row.dhr-nav-row--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 0, 85, 0.25);  /* subtle navy overlay */
  z-index: 1;
}

/* Foreground content sits above image + overlay */
.dhr-nav-row.dhr-nav-row--bg > *:not(.cmp-image) {
  position: relative;
  z-index: 2;
}

/* If your nav row text needs to switch to white on image */
.dhr-nav-row.dhr-nav-row--bg,
.dhr-nav-row.dhr-nav-row--bg h2,
.dhr-nav-row.dhr-nav-row--bg h3,
.dhr-nav-row.dhr-nav-row--bg p,
.dhr-nav-row.dhr-nav-row--bg a {
  color: #ffffff;
}

/* Optional: make buttons readable on top of photo */
.dhr-nav-row.dhr-nav-row--bg .cmp-button__link {
  background: rgba(255,255,255,0.92);
  color: #002277;
  border-color: rgba(255,255,255,0.92);
}






/* -----------------------------------------
   ALIGNMENT FIXES (AEM grid + button layout)
   ----------------------------------------- */

.dhr-nav-row .aem-GridColumn {
  text-align: left;
}

/* Button link: stop AEM centering + remove its own border */
.dhr-nav-row .cmp-button__link {
  margin-left: 0 !important;
  margin-right: auto !important;

  justify-content: flex-start !important;
  text-align: left !important;

  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Visible focus for the actual link (keyboard users) */
.dhr-nav-row .cmp-button__link:focus-visible {
  outline: 2px solid #0097FF !important;
  outline-offset: 2px !important;
}

/* Safety: prevent nested nav-row borders */
.dhr-nav-row .dhr-nav-row {
  border: 0 !important;
}




/* -----------------------------------------
   ALIGNMENT FIXES (AEM grid + button layout)
   ----------------------------------------- */

/* AEM column controls sometimes carry centering. Set the column baseline left. */
.dhr-nav-row .aem-GridColumn {
  text-align: left;
}

/* Button link: stop AEM "center me" behavior */
.dhr-nav-row .cmp-button__link {
  margin-left: 0 !important;
  margin-right: auto !important;

  justify-content: flex-start !important;
  text-align: left !important;

  /* remove inner borders so the card border is the only border */
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Optional: make keyboard focus visible on the actual link too (helps a11y) */
.dhr-nav-row .cmp-button__link:focus-visible {
  outline: 2px solid #0097FF !important;
  outline-offset: 2px !important;
}


/* -----------------------------------------
   SAFETY: Prevent accidental nested nav-row borders
   ----------------------------------------- */
.dhr-nav-row .dhr-nav-row::before {
  content: none !important;
}


/* ===========================
   DHR FAQ – Continuous Card
   Scoped to: .dhr-faq
   =========================== */

.dhr-faq .cmp-accordion {
  margin: 1.5rem 0;
}

/* Card container */
.dhr-faq .cmp-accordion__item {
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px #002277;
  margin: 0 0 1rem 0;
  overflow: hidden;

  border: 0 !important; /* kills defaults without breaking hover */
}

/* Nuke any core pseudo separators */
.dhr-faq .cmp-accordion__item::before,
.dhr-faq .cmp-accordion__item::after {
  display: none !important;
}

/* Question row (button) */
.dhr-faq .cmp-accordion__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 1.25rem 1.25rem;
  background: transparent;
  border: 0;

  text-align: left;
  cursor: pointer;
}

/* Question text */
.dhr-faq .cmp-accordion__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: #002277;
}

/* Divider appears ONLY when expanded */
.dhr-faq .cmp-accordion__item[data-cmp-expanded] .cmp-accordion__button {
  border-bottom: 1px solid rgba(16, 0, 85, 0.15);
}

/* Answer panel */
.dhr-faq .cmp-accordion__panel {
  padding: 0.75rem 1.25rem 1.25rem 1.25rem;
  background: transparent;
  border: 0 !important;
}

/* Kill default gray bar on expanded panels */
.dhr-faq .cmp-accordion__panel--expanded {
  border-bottom: 0 !important;
}

/* Answer text */
.dhr-faq .cmp-accordion__panel p {
  margin: 0;
  color: #222222;
  line-height: 1.55;
}

/* Hover = outline cue only (works now) */
.dhr-faq .cmp-accordion__item:hover {
  box-shadow: inset 0 0 0 2px #0097FF;
}

/* Keyboard focus (accessibility) */
.dhr-faq .cmp-accordion__button:focus-visible {
  outline: 3px solid #1CA6DF;
  outline-offset: 3px;
  border-radius: 6px;
}

/* Chevron spacing */
.dhr-faq .cmp-accordion__icon {
  flex: 0 0 auto;
  margin-left: 1rem;
}

/* Expand / Collapse All links */
.dhr-faq a {
  color: #002277;
  font-weight: 600;
}

.dhr-faq a:hover {
  text-decoration: underline;
}

/* =======================================
   DOCUMENT CARD (base utility)
   Apply class: dhr-doc-card
   Works for single docs or groups
   ======================================= */

.dhr-doc-card {
  background: #ffffff;
  border: 1px solid #AADDFF;
  border-radius: 4px;
  padding: 0.85rem 1rem;
  box-shadow: 0 1px 2px rgba(16, 0, 85, 0.08);
  box-sizing: border-box;
}

/* Links inside the doc card */
.dhr-doc-card a {
  color: #002277;
  font-weight: 600;
  text-decoration: none;
}

.dhr-doc-card a:hover,
.dhr-doc-card a:focus {
  color: #0097FF;
  text-decoration: underline !important;
  text-underline-offset: 0.15em;
}


/* =======================================
   LINK GROUPS (apply class: dhr-link-groups)
   For: Guidance, Related Topics, Resources
   ======================================= */

.cmp-container.dhr-link-groups {
  border-top: 2px solid #AADDFF;
  padding-top: 1.5rem;
  margin-top: 2.5rem;
  box-sizing: border-box;
}

/* Headings: navy + light-blue highlight band */
.cmp-container.dhr-link-groups h2,
.cmp-container.dhr-link-groups h3 {
  display: inline;
  color: #002277;
}

/* List reset + bullet killers (native + theme pseudo-bullets) */
.cmp-container.dhr-link-groups ul,
.cmp-container.dhr-link-groups ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 1rem 0 2rem !important;
}

.cmp-container.dhr-link-groups li::marker { content: "" !important; }
.cmp-container.dhr-link-groups li::before {
  content: none !important;
  display: none !important;
}

/* Card items */
.cmp-container.dhr-link-groups li {
  background: #fff;
  border: 1px solid #AADDFF;
  border-radius: 4px;
  padding: 0.85rem 1rem;
  margin: 0.75rem 0;
  box-shadow: 0 1px 2px rgba(16, 0, 85, 0.08);
  box-sizing: border-box;
}

/* Links */
.cmp-container.dhr-link-groups a {
  color: #002277;
  text-decoration: none;
  font-weight: 600;
}

.cmp-container.dhr-link-groups a:hover,
.cmp-container.dhr-link-groups a:focus {
  color: #0097FF;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Optional description copy inside items */
.cmp-container.dhr-link-groups li p {
  margin: 0.35rem 0 0;
  color: #222;
  font-weight: 400;
}




/* =======================================
   Process Card
   (apply class: dhr-process-card)
   Tactile, document-like module
   Section-card rhythm (tighter)
   ======================================= */

.cmp-container.dhr-process-card {
  background: #ffffff;
  border: 2px solid #00AA77;   /* green from palette */
  border-radius: 4px;

  /* tighter spacing to match section-card rhythm */
  padding: 1.25rem 1.25rem;
  margin: 1.25rem 1rem;

  box-sizing: border-box;

}

/* ---------------------------------------
   INTERNAL SPACING NORMALIZATION
   (AEM text + columns)
   --------------------------------------- */

/* Prevent stacked margins from first/last children */
.cmp-container.dhr-process-card > :first-child {
  margin-top: 0;
}

.cmp-container.dhr-process-card > :last-child {
  margin-bottom: 0;
}

/* Column Control: reduce excessive vertical spacing */
.cmp-container.dhr-process-card .aem-Grid {
  margin-top: 0;
  margin-bottom: 0;
}

/* Column Control: tighten column gaps slightly */
.cmp-container.dhr-process-card .aem-GridColumn {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Optional: tighten text blocks inside columns */
.cmp-container.dhr-process-card p:last-child,
.cmp-container.dhr-process-card ul:last-child,
.cmp-container.dhr-process-card ol:last-child {
  margin-bottom: 0;
}



/* =======================================
   Section Callout – Small
   Aligned with page content (not centered)
   ======================================= */

.cmp-container.dhr-section-small {
  border: 2px solid #002277;
  border-radius: 6px;
  background: #ffffff;

  padding: 1.5rem 1.25rem;
  width: 100%;
  max-width: 960px;
  margin: 1rem 0;

  box-sizing: border-box;
}

/* Button spacing */
.cmp-container.dhr-section-small .dhr-cta-btn {
  display: inline-block;
  margin-top: 1.5rem;
}

/* Mobile */
@media (max-width: 768px) {
  .cmp-container.dhr-section-small {
    max-width: none;
    margin: 2rem 0;
  }
}



/* =======================================
   CTA – Highlight Variant
   (apply class: dhr-cta-highlight)
   ======================================= */

.cmp-container.dhr-cta-highlight {
  border-left: 2px solid #002277;
  background: #ffffff;

  margin-top: 1rem;
  padding: 1.75rem 1.5rem;
  box-sizing: border-box;

  text-align: left;
}

/* Title inside CTA
   Highlight is now controlled separately via text classes */
.cmp-container.dhr-cta-highlight h1,
.cmp-container.dhr-cta-highlight h2,
.cmp-container.dhr-cta-highlight h3 {
  display: inline;
  line-height: 1.25;
  color: #002277;
}

/* Optional spacing after the title */
.cmp-container.dhr-cta-highlight h1 + *,
.cmp-container.dhr-cta-highlight h2 + *,
.cmp-container.dhr-cta-highlight h3 + * {
  margin-top: 1rem;
}




/* =======================================
   Section Card
   (apply class: dhr-section-card)
   ======================================= */

.cmp-container.dhr-section-card {
  background: #ffffff;
  border: 2px solid #002277;
  border-radius: 4px;
  padding: 1rem;
  margin: 1.5rem 1rem;
  box-sizing: border-box;
}

/* =======================================
   Secondary Section Card
   (apply class: dhr-section-card-secondary)
   ======================================= */

.cmp-container.dhr-section-card-secondary {
  background: #ffffff;
  border-left: 2px solid #AADDFF;
  margin: .5rem;
  box-sizing: border-box;
}



/* =======================================
   TOC
   (apply class: dhr-toc)
   ======================================= */


.cmp-container.dhr-toc {
  border: 0px solid #002277;
  background-color: #f7f5f1;       
  border-radius: 4px;
  padding: 1rem 0;
}

.cmp-container.dhr-toc ol {
  margin: 0;
  padding-left: 1.5rem;            /* adjusts number indentation */
}

.cmp-container.dhr-toc li {
  margin: 0.35rem 0;
}

.cmp-container.dhr-toc a {
  display: inline !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: #002277 !important;       
  text-decoration: none !important;
  font-weight: 500;
}

.cmp-container.dhr-toc a:hover,
.cmp-container.dhr-toc a:focus {
  color: #0097FF !important;
}

/* =======================================
   TOC – Alternate (Rights / Informational)
   (apply class: dhr-toc-alt)
   ======================================= */

.cmp-container.dhr-toc-alt {
  
  border-radius: 0;
  padding: 0.75rem 0 0.75rem 1.25rem;
  box-sizing: border-box;
}

/* List spacing */
.cmp-container.dhr-toc-alt ol {
  margin: 0;
  padding-left: 1.25rem;
}

.cmp-container.dhr-toc-alt li {
  margin: 0.35rem 0;
}

/* Links */
.cmp-container.dhr-toc-alt a {
  display: inline;
  background: none;
  border: 0;
  padding: 0;

  color: #002277;
  text-decoration: none;
  font-weight: 500;
}

.cmp-container.dhr-toc-alt a:hover,
.cmp-container.dhr-toc-alt a:focus {
  color: #0097FF;
}

.cmp-container.dhr-toc-alt h2,
.cmp-container.dhr-toc-alt h3 {
  display: inline;
  background: linear-gradient(
    transparent 60%,
    #AADDFF 60%
  );
}



/* =======================================
   PRIMARY BUTTON (apply class: dhr-button)
   ======================================= */

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

  padding: 0.9rem 1.6rem !important;   /* EXACT match */
  box-sizing: border-box;

  font-weight: 800 !important;         /* match secondary */
  text-decoration: none !important;

  background-color: #002277 !important;
  color: #FFFFFF !important;

  border: 2px solid #002277 !important; /* MATCH thickness */
  border-radius: 0 !important;
}

/* Hover / focus */
a.cmp-button.dhr-button:hover,
a.cmp-button.dhr-button:focus,
a.cmp-button.dhr-button:active {
  background-color: #001a5c !important;
  border-color: #001a5c !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}

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

/* =======================================
   SECONDARY BUTTON (apply class: dhr-button-secondary)
   Outline style using placeholder palette
   ======================================= */

/* Covers both common AEM markups */
.cmp-button.dhr-button-secondary,
.cmp-button.dhr-button-secondary .cmp-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.9rem 1.6rem;
  font-weight: 800;
  text-decoration: none;

  background-color: transparent;
  color: #002277;              /* navy text */
  border: 2px solid #002277;   /* navy outline */
  border-radius: 0;
}

/* Hover / focus: subtle fill */
.cmp-button.dhr-button-secondary:hover,
.cmp-button.dhr-button-secondary:focus,
.cmp-button.dhr-button-secondary .cmp-button__link:hover,
.cmp-button.dhr-button-secondary .cmp-button__link:focus {
  background-color: #f7f5f1;   /* off-white */
  color: #002277;
  border-color: #002277;
  text-decoration: none;
}


/* =========================================
   Text-link Button (AEM-safe)
   ========================================= */

/* Covers both common AEM markups (same pattern as secondary) */
.cmp-button.dhr-button-text,
.cmp-button.dhr-button-text .cmp-button__link {
  display: inline;              /* behave like text */
  padding: 0;                   /* no button padding */
  margin: 0;

  background-color: transparent;
  color: #002277;

  border: 0;                    /* remove outline */
  border-radius: 0;
  box-shadow: none;

  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: #0097FF;
}

/* Hover / focus: keep link feel, improve affordance */
.cmp-button.dhr-button-text:hover,
.cmp-button.dhr-button-text:focus,
.cmp-button.dhr-button-text .cmp-button__link:hover,
.cmp-button.dhr-button-text .cmp-button__link:focus,
.cmp-button.dhr-button-text .cmp-button__link:focus-visible {
  background-color: transparent;
  color: #002277;

  border: 0;
  box-shadow: none;

  text-decoration-color: #002277;  /* subtle shift */
}


/* =========================================
   DHR Nav Row — alignment patch (nav-row only)
   Does NOT change visual button styling
   ========================================= */

/* Force everything inside card to align left, including grid wrappers */
.dhr-nav-row,
.dhr-nav-row .aem-Grid,
.dhr-nav-row .aem-GridColumn,
.dhr-nav-row .button {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* If the button link is being centered via auto margins or flex, override */
.dhr-nav-row .cmp-button__link {
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
}

/* If the button is a text-link style, keep it left-aligned */
.dhr-nav-row .cmp-button.dhr-button-text,
.dhr-nav-row .cmp-button.dhr-button-text .cmp-button__link {
  text-align: left !important;
}



/* =========================================
   DHR Dividers (plain, pink, green)
   Apply class: dhr-divider
   ========================================= */

.cmp-container.dhr-divider {
  border-top: 2px solid #E0E0E0;
  margin: 1rem 0;
  padding: 0;
}


.cmp-container.dhr-divider-pink {
  border-top: 3px solid #EE6699;
  margin: .5rem 0;
  padding: 0;
}


.cmp-container.dhr-divider-green {
  border-top: 3px solid #00AA77;
  margin: .5rem 0;
  padding: 0;
}

.cmp-container.dhr-divider-blue {
  border-top: 3px solid #AADDFF;
  margin: .5rem 0;
  padding: 0;
}

.dhr-icon-calendar::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 0.5rem;
  background-image: url("/content/dam/soi/en/web/dhr/images/icons/Calendar.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
}



.dhr-title {
    color: green;
}


.cmp-agency-header__logo {
    height: 2.875rem;
    width: auto;
}

/* 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) {}