/* =========================================================
   IMM SUPPORT — reusable “mini Bootstrap” (SCOPED)
   Scope: .bootstrap-support
   Purpose: grid, utilities, cards, buttons, shared tokens
========================================================= */


/* =========================================================
   PAGE WIDTH HELPERS
========================================================= */

main {
  width: 100% !important;
  max-width: 1200px !important;
}

header,
#main-nav,
.dph-toggle-content,
#second-nav,
.page-container {
  max-width: 1200px !important;
}

.carousel-container,
#dph-searchtool {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto;
}


/* =========================================================
   DESIGN TOKENS
========================================================= */

.bootstrap-support {
  --bs-primary: #0d6efd;
  --bs-warning: #ffc107;

  --bs-body-color: #212529;
  --bs-body-bg: #fff;

  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;

  --bs-border-radius: 0.375rem;
  --bs-border-color: #dee2e6;

  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-border-width: 1px;
  --bs-card-border-color: rgba(0,0,0,.175);
  --bs-card-border-radius: 0.375rem;
  --bs-card-bg: #fff;
  --bs-card-color: inherit;

  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0,0,0,.075);
  --bs-box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0,0,0,.175);

  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.bootstrap-support,
.bootstrap-support * {
  box-sizing: border-box;
}


/* =========================================================
   CONTAINERS
========================================================= */

.bootstrap-support .container,
.bootstrap-support .container-fluid,
.bootstrap-support .container-xl {
  width: 100%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 12px;
  padding-left: 12px;
}


/* =========================================================
   GRID SYSTEM
========================================================= */

.bootstrap-support .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -12px;
  margin-left: -12px;
}

.bootstrap-support [class^="col"],
.bootstrap-support [class*=" col"] {
  position: relative;
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
}

.bootstrap-support .col { flex: 1 0 0%; }

.bootstrap-support .col-12 { flex:0 0 100%; max-width:100%; }
.bootstrap-support .col-10 { flex:0 0 83.333%; max-width:83.333%; }
.bootstrap-support .col-8  { flex:0 0 66.666%; max-width:66.666%; }
.bootstrap-support .col-6  { flex:0 0 50%; max-width:50%; }
.bootstrap-support .col-4  { flex:0 0 33.333%; max-width:33.333%; }
.bootstrap-support .col-3  { flex:0 0 25%; max-width:25%; }
.bootstrap-support .col-2  { flex:0 0 16.666%; max-width:16.666%; }


/* =========================================================
   RESPONSIVE GRID
========================================================= */

@media (min-width:576px){

  .bootstrap-support .col-sm-12{flex:0 0 100%;max-width:100%;}
  .bootstrap-support .col-sm-8{flex:0 0 66.666%;max-width:66.666%;}
  .bootstrap-support .col-sm-6{flex:0 0 50%;max-width:50%;}
  .bootstrap-support .col-sm-4{flex:0 0 33.333%;max-width:33.333%;}

}

@media (min-width:768px){

  .bootstrap-support .col-md-12{flex:0 0 100%;max-width:100%;}
  .bootstrap-support .col-md-8{flex:0 0 66.666%;max-width:66.666%;}
  .bootstrap-support .col-md-7{flex:0 0 58.333333%;max-width:58.333333%;}
  .bootstrap-support .col-md-6{flex:0 0 50%;max-width:50%;}
  .bootstrap-support .col-md-5{flex:0 0 41.666667%;max-width:41.666667%;}
  .bootstrap-support .col-md-4{flex:0 0 33.333%;max-width:33.333%;}
  .bootstrap-support .col-md-3{flex:0 0 25%;max-width:25%;}

}

@media (min-width:992px){

  .bootstrap-support .col-lg-12{flex:0 0 100%;max-width:100%;}
  .bootstrap-support .col-lg-8{flex:0 0 66.666%;max-width:66.666%;}
  .bootstrap-support .col-lg-7{flex:0 0 58.333333%;max-width:58.333333%;}
  .bootstrap-support .col-lg-5{flex:0 0 41.666667%;max-width:41.666667%;}
  .bootstrap-support .col-lg-4{flex:0 0 33.333%;max-width:33.333%;}
  .bootstrap-support .col-lg-3{flex:0 0 25%;max-width:25%;}

}


/* =========================================================
   GUTTERS
========================================================= */

.bootstrap-support .g-1 > * { padding:4px; }
.bootstrap-support .g-2 > * { padding:8px; }
.bootstrap-support .g-3 > * { padding:12px; }
.bootstrap-support .g-4 > * { padding:16px; }


/* =========================================================
   UTILITIES
========================================================= */

.bootstrap-support .d-flex{display:flex!important;}
.bootstrap-support .flex-column{flex-direction:column!important;}

.bootstrap-support .justify-content-between{justify-content:space-between!important;}
.bootstrap-support .align-items-center{align-items:center!important;}

.bootstrap-support .w-100{width:100%!important;}
.bootstrap-support .mt-auto{margin-top:auto!important;}

.bootstrap-support .text-white{color:#fff!important;}
.bootstrap-support .text-left{text-align:left!important;}
.bootstrap-support .text-right{text-align:right!important;}

.bootstrap-support .float-right{float:right!important;}

.bootstrap-support .shadow-sm{box-shadow:var(--bs-box-shadow-sm)!important;}
.bootstrap-support .shadow{box-shadow:var(--bs-box-shadow)!important;}
.bootstrap-support .shadow-lg{box-shadow:var(--bs-box-shadow-lg)!important;}


/* =========================================================
   SPACING UTILITIES
========================================================= */

.bootstrap-support .p-0{padding:0!important;}
.bootstrap-support .p-4{padding:1.5rem!important;}

.bootstrap-support .mt-1{margin-top:.25rem!important;}
.bootstrap-support .mt-3{margin-top:1rem!important;}

.bootstrap-support .mb-1{margin-bottom:.25rem!important;}
.bootstrap-support .mb-2{margin-bottom:.5rem!important;}
.bootstrap-support .mb-4{margin-bottom:1.5rem!important;}


/* =========================================================
   CARDS
========================================================= */

.bootstrap-support .card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
  word-wrap:break-word;
  background-color:var(--bs-card-bg);
  color:var(--bs-card-color);
  background-clip:border-box;
  border:var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius:var(--bs-card-border-radius);
}

.bootstrap-support .card-body{
  flex:1 1 auto;
  padding:var(--bs-card-spacer-y) var(--bs-card-spacer-x);
}

.bootstrap-support .card-title{
  margin:0 0 var(--bs-card-title-spacer-y) 0;
  font-weight:600;
  line-height:1.2;
}

.bootstrap-support .card-img-top{
  width:100%;
  border-top-left-radius:calc(var(--bs-card-border-radius) - 1px);
  border-top-right-radius:calc(var(--bs-card-border-radius) - 1px);
}


/* =========================================================
   BUTTONS
========================================================= */

.bootstrap-support .btn{
  display:inline-block;
  font-weight:600;
  line-height:1.5;
  text-align:center;
  text-decoration:none;
  vertical-align:middle;
  cursor:pointer;
  user-select:none;
  border:1px solid transparent;
  padding:0.375rem 0.75rem;
  font-size:0.9rem;
  border-radius:var(--bs-border-radius);
  color:#fff;
  background-color:var(--bs-primary);
  border-color:var(--bs-primary);
  transition:color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.bootstrap-support .btn:hover{filter:brightness(.9);}
.bootstrap-support .btn:focus{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25);}
.bootstrap-support .btn.disabled,
.bootstrap-support .btn:disabled{opacity:.65;pointer-events:none;}

.bootstrap-support .btn-sm{padding:.25rem .5rem;font-size:.8rem;border-radius:.25rem;}
.bootstrap-support .btn-lg{padding:.5rem 1rem;font-size:1rem;border-radius:.5rem;}

.bootstrap-support .btn-block{display:block;width:100%;}
.bootstrap-support .btn.w-100{display:block;width:100%;}


/* =========================================================
   ACCORDION
========================================================= */

.bootstrap-support .single-accordion{
  width:100%;
  margin-top:5px;
  padding:0;
}

.bootstrap-support .toggle-button{
  display:block;
  width:100%;
  padding:15px 20px;
  background:#d32f2f;
  color:#fff;
  font-size:1.1em;
  font-weight:bold;
  text-align:left;
  border:none;
  border-radius:5px;
  cursor:pointer;
  transition:background-color .3s ease;
}

.bootstrap-support .toggle-button:hover,
.bootstrap-support .toggle-button.active{background:#9a2222;}

.bootstrap-support .toggle-button::after{
  content:"+";
  float:right;
}

.bootstrap-support .toggle-button.active::after{
  content:"−";
}

.bootstrap-support .accordion-content{
  width:100%;
  max-height:0;
  overflow:hidden;
  padding:0 20px;
  border-left:3px solid transparent;
  transition:max-height .5s ease,border-left .3s ease;
}

.bootstrap-support .accordion-content.open{
  max-height:2000px;
  padding-top:10px;
  padding-bottom:3px;
  border-left:3px solid #061c60;
}


/* =========================================================
   MODAL
========================================================= */

body.modal-open{overflow:hidden;}

#resourceModal.modal{
  position:fixed;
  inset:0;
  z-index:1055;
  display:none;
  width:100%;
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
}

#resourceModal.modal.show{display:block;}

#resourceModal .modal-dialog{
  position:relative;
  width:auto;
  margin:1.75rem auto;
  pointer-events:none;
}

#resourceModal .modal-dialog.modal-lg{
  max-width:800px;
}

#resourceModal .modal-content{
  display:flex;
  flex-direction:column;
  pointer-events:auto;
  background:#fff;
  border:1px solid rgba(0,0,0,.2);
  border-radius:.375rem;
  box-shadow:0 .5rem 1rem rgba(0,0,0,.15);
  max-height:90vh;
  overflow-y:auto;
}

.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:1050;
  background:#000;
}

.modal-backdrop.show{opacity:.5;}


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

@media (max-width:576px){

  #resourceModal .modal-dialog{
    margin:.75rem;
  }

  #resourceModal .modal-dialog.modal-lg{
    max-width:calc(100% - 1.5rem);
  }

}


/* =========================================================
   SMALL GLOBAL UTILITIES
========================================================= */

.bg-dark-primary{
  background:#002454;
  color:#fff;
}

.utility-links>li a{
  font-size:.85rem!important;
}

/* =========================================================
   ACCORDION HEADER BUTTON OVERRIDES
   Prevent default .btn blue background in accordion headers
========================================================= */

.bootstrap-support .vaccine-accordion-header .btn,
.bootstrap-support .card-header.vaccine-accordion-header .btn,
.bootstrap-support .vaccine-accordion-header .btn.btn-block,
.bootstrap-support .questions-accordion-header .btn,
.bootstrap-support .card-header.questions-accordion-header .btn,
.bootstrap-support .questions-accordion-header .btn.btn-block {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

.bootstrap-support .vaccine-accordion-header .btn:hover,
.bootstrap-support .vaccine-accordion-header .btn:focus,
.bootstrap-support .vaccine-accordion-header .btn:active,
.bootstrap-support .questions-accordion-header .btn:hover,
.bootstrap-support .questions-accordion-header .btn:focus,
.bootstrap-support .questions-accordion-header .btn:active {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}


/* =========================================================
   SECTION BUTTON NORMALIZATION
   Removes default blue button styling inside content sections
========================================================= */

.bootstrap-support .priority-populations-section .btn,
.bootstrap-support .vaccines-preventable-section .btn {
  background-color: transparent;
  border-color: transparent;
}

.bootstrap-support .priority-populations-section .btn:hover,
.bootstrap-support .priority-populations-section .btn:focus,
.bootstrap-support .priority-populations-section .btn:active,
.bootstrap-support .vaccines-preventable-section .btn:hover,
.bootstrap-support .vaccines-preventable-section .btn:focus,
.bootstrap-support .vaccines-preventable-section .btn:active {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}


/* =========================================================
   ACCORDION TITLE ALIGNMENT HELPERS
========================================================= */

.bootstrap-support .accordion-title-wrap {
  display: flex;
  align-items: center;
  text-align: left;
  height: 100%;
}

.bootstrap-support .accordion-title-wrap h3 {
  width: 100%;
  margin: 0;
  text-align: left;
}

.bootstrap-support .grid-center {
  display: flex;
  align-items: center;
  text-align: left;
}

/* =========================================================
   Priority circles responsive layout
========================================================= */
@media (min-width:768px){
  .bootstrap-support .col-md-12{flex:0 0 100%;max-width:100%;}
  .bootstrap-support .col-md-8{flex:0 0 66.666%;max-width:66.666%;}
  .bootstrap-support .col-md-7{flex:0 0 58.333333%;max-width:58.333333%;}
  .bootstrap-support .col-md-6{flex:0 0 50%;max-width:50%;}
  .bootstrap-support .col-md-5{flex:0 0 41.666667%;max-width:41.666667%;}
  .bootstrap-support .col-md-4{flex:0 0 33.333%;max-width:33.333%;}
  .bootstrap-support .col-md-3{flex:0 0 25%;max-width:25%;}

}

@media (min-width:992px){
  .bootstrap-support .col-lg-12{flex:0 0 100%;max-width:100%;}
  .bootstrap-support .col-lg-8{flex:0 0 66.666%;max-width:66.666%;}
  .bootstrap-support .col-lg-7{flex:0 0 58.333333%;max-width:58.333333%;}
  .bootstrap-support .col-lg-5{flex:0 0 41.666667%;max-width:41.666667%;}
  .bootstrap-support .col-lg-4{flex:0 0 33.333%;max-width:33.333%;}
  .bootstrap-support .col-lg-3{flex:0 0 25%;max-width:25%;}

}

@media (max-width: 768px) {
  .bootstrap-support .priority-circles-row > .col-lg-4.col-md-4.col-sm-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 480px) {
  .bootstrap-support .priority-circles-row > .col-lg-4.col-md-4.col-sm-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Bootstrap-style collapse behavior */
.bootstrap-support .collapse {
  display: none;
}

.bootstrap-support .collapse.show {
  display: block;
}

.collapseSection i {
  transition: transform 0.2s ease;
}

button[aria-expanded="true"] .collapseSection i::before {
  content: "\f068"; /* minus */
}

button[aria-expanded="false"] .collapseSection i::before {
  content: "\2b"; /* plus */
}