/* Fonts and Variabls */

@font-face {
    font-family: 'StabilGrotesk';
    src: url('../Assets/Fonts/StabilGrotesk-Light.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'StabilGrotesk';
    src: url('../Assets/Fonts/StabilGrotesk-LightItalic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
}
@font-face {
    font-family: 'StabilGrotesk';
    src: url('../Assets/Fonts/StabilGrotesk-Regular.otf') format('opentype');
    font-weight: normal;
}
@font-face {
    font-family: 'StabilGrotesk';
    src: url('../Assets/Fonts/StabilGrotesk-Bold.otf') format('opentype');
    font-weight: bold;
}

@font-face {
    font-family: 'FraktionMono';
    src: url('../Assets/Fonts/PPFraktionMono-Regular.ttf') format('truetype');
    font-weight: normal;
}
@font-face {
    font-family: 'FraktionMono';
    src: url('../Assets/Fonts/PPFraktionMono-Bold.ttf') format('truetype');
    font-weight: bold;
}

:root{
  font-size: 16px;
  --SafeHomes: #ff0000;
  --SafeCommunity: #00ff00;
  --SafeEnvironment: #0000ff;

  --width-max:1200px;
  --margin-body-sides:2rem;

  --FontSize-Reg: clamp(1rem, 1.6vw, 1.125rem);
  --FontSize-Med: clamp(1rem, 1.8vw, 1.25rem);
  --FontSize-Lrg: clamp(1.125rem, 2.1vw, 1.5rem);
  --FontSize-XL: clamp(1.5rem, 2.5vw, 2rem);
  --FontSize-XXL: clamp(2.25rem, 3.5vw, 3rem);
  --FontSize-Dspl: clamp(2.625rem, 4vw, 3.5rem);

  --Spc-Mini:0.5rem;
  --Spc-Small:1rem;
  --Spc-Medium:2rem;
  --Spc-Large:3rem;

  --ArrowRight:polygon(0% 0%, 100% 50%, 0% 100%);
  --ArrowLeft:polygon(0% 50%, 100% 0%, 100% 100%);
  --ArrowUp:polygon(50% 0%, 100% 100%, 0% 100%);
  --ArrowDown:polygon(0% 0%, 100% 0%, 50% 100%);

  --BorderHeavy:3px;
  --BorderMedium:2px;
  --BorderLight:1px;

  --OffWhite:#F4F4F4;

  --Accent100:#255579;
  --Accent050:#163247;
    --Accent025:#0D1E2B;
}

[data-pillar="Safe Workplaces"],
[value="Safe Workplaces"]{
    --Accent100:#E94F37;
    --Accent050:#BF412D;
    --Accent025:#8F3022;
    --heroImage:url('../Assets/Images/pexels-fung0818-18568174.jpg')
}
[data-pillar="Safe Homes"],
[value="Safe Homes"]{
    --Accent100:#E56A22;
    --Accent050:#C55712;
    --Accent025:#A64500;
    --heroImage:url('../Assets/Images/pexels-shehab-al-qadhi-472755071-20858565.jpg')
}
[data-pillar="Safe Communities"],
[value="Safe Communities"]{
    --Accent100:#30C73C;
    --Accent050:#29A833;
    --Accent025:#1B7022;
    --heroImage:url('../Assets/Images/pexels-brett-sayles-937485.jpg')
}
[data-pillar="Safe Schools and Childcare"],
[value="Safe Schools and Childcare"]{
    --Accent100:#329AFB;
    --Accent050:#1875CC;
    --Accent025:#0057A8;
    --heroImage:url('../Assets/Images/pexels-oliver-hung-265548590-30281236.jpg')
}




/* Global Settings */

h1, h2, h3, h4{
  line-height: 110%;
  margin:0px 0px 0.25em 0px;
  letter-spacing: 2%;

  &:first-child{
    margin-top: 0px;
  }
  &:last-child{
    margin-bottom: 0px;
  }

}
h1{
  font-size: var(--FontSize-XXL);
  &.Display{
    font-size: var(--FontSize-Dspl);
  }
}
h2{
  font-size: var(--FontSize-XL);
}
h3{
  font-size: var(--FontSize-Lrg);
}
h4{
  font-size: var(--FontSize-Med);
  font-weight: 500;
}
p, a{
  font-size: var(--FontSize-Reg);
  letter-spacing: 2%;
  max-width: 600px;
  &.Display,
  .Display>&{
    font-size: var(--FontSize-Med);

    &>strong{
      font-size: 1.25em;
      font-weight: 600;
      color:var(--Accent100)
    }
  }

  margin:0.1em 0;

  &:first-child{
    margin-top: 0px;
  }
  &:last-child{
    margin-bottom: 0px;
  }

}
a{
  color:var(--Accent025);
  text-decoration:none;
}
a.btn{
  font-size: 1rem;
  font-weight: 700;
  background-color: var(--Accent100);
  color:#ffffff;
  padding: 0.5rem;
  display: inline-block;
}

body{
  font-family:StabilGrotesk;
  font-weight: 100;
  background-color: var(--OffWhite);
  margin: 0;
  padding:0 var(--margin-body-sides);
}

ul.gridList{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding:0px;
  gap:2rem;

  &>li{
    margin:0px;
    list-style-position: inside;
    list-style: none;
    margin:0;
  }
}

input{
  &.hiddenInput{
    display: none;
  }
}

main,
header,
footer{
    max-width:var(--width-max);
    margin:auto;
}

main>*{
  margin: 1rem auto;
}

footer{
    border-top:var(--BorderMedium) solid var(--Accent100);
    padding:1rem 0px;
    display:flex;
    justify-content:space-between;
}

header{
  background-color:var(--OffWhite);
  z-index:100;
  position:sticky;
  top:0px;

  &>.headerMain{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--Spc-Small);
    padding-bottom: var(--Spc-Small);
    border-bottom: 1px solid var(--Accent100);

    &>.navBtn{
      font-weight: bold;
      padding: 0.5rem 0.75rem;
      color:#ffffff;
      background-color: var(--Accent100);
    }

    &>.HeaderInfo{
      display: flex;
      align-items: center;
      color:var(--Accent100);
      font-size: clamp(1.5rem, 3vw, 2.25rem);
      & img.Logo{
        height: 1em;

        &.Logo-Mobile{
          display: none;
        }
      }

      & h1.site-title{
        font-size: 0.85em;
        line-height: 1;
        display:inline-flex;
        align-items: center;
        padding-left: var(--Spc-Mini);
        border-left: 1px solid currentColor;
        font-weight: bold;
        margin:0px;
        align-self: center;
      }
    }


  }

  &>nav.navbar{
    display: flex;
    justify-content: center;
    background-color: var(--Accent100);
    padding: 0.5rem 1rem;
    margin: var(--Spc-Small) auto 0;
    width: fit-content;
    max-width: 100%;

    &>.navItems{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.25rem 0;
      max-width: none;

      &>.navItem{
        position:relative;
        margin:0;
        padding: 0 0.625rem 0 0.75rem;
        color:#ffffff;
        font-weight: 500;
        text-align: center;

        &:first-child{
          padding-left: 0;
          &::before{
            display: none;
          }
        }

        &:last-child{
          padding-right: 0;
        }

        &::before{
          content:'';
          width:2px;
          position: absolute;
          left: -1px;
          top:0px;
          bottom: 0px;
          display:inline-block;
          background-color:#ffffff;
        }

        &.navItemActive{
          font-weight: 700;
        }
      }
    }
  }

  &>.PageTitle{
    /* Legacy: PageTitle now lives inside main, styling below */
  }

  

  &::before{
    content: '';
    position: absolute;
    z-index: -1;
    background-color: var(--OffWhite);
    width: 100vw;
    top:0px;
    bottom:0px;
    left: 50%;
    transform: translate(-50%, 0%);
  }
}



fieldset{
  padding:0px;
  margin:0px;
  border:none;
}

.rule{

  &.rule-vertical{
    height: 100%;
    width: 2px;
    background-color:currentColor;
  }
}

/* Containers */

.Container{

    &.FlexContainer{
        display:flex;

        &.FlexRow{
            flex-direction:row;
        }

        &.FlexCol{
            flex-direction:column;
        }
    }

    &.GridContainer{
      display: grid;
    }

    &.ContainerGap-Mini{
      gap:0.5rem;
    }
    &.ContainerGap-Small{
      gap:1rem;
    }
    &.ContainerGap-Medium{
      gap:2rem
    }
    &.ContainerGap-Large{
      gap:3rem
    }

    &.ContainerPad-Small{
      padding: 1rem;
    }
    &.ContainerPad-Medium{
      padding: 2rem;
    }
    &.ContainerPad-Large{
      padding: 3rem;
    }

    &.BorderContainer{
        --borderWeight:var(--BorderMedium);
        --borderColor:var(--Accent100);
        border:var(--borderWeight) solid var(--Accent100);


        &.BorderLeft{
          border-width:0px 0px 0px var(--BorderMedium);
        }
        &.BorderTop{
          border-width:var(--BorderMedium) 0px 0px 0px;
        }
        
    }

    &.BorderContainer-Left-medium{
        border:var(--BorderMedium) solid var(--Accent100);
    }
}

/* Pills */
ul.pillBox,
ul.pillBox li{
  list-style-position:inside;
  margin:0px;
  list-style:none;
}

ul.pillBox{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  padding:0px;
  gap:0.5rem;
}

li.pill{
  display:block;
  padding:0.1rem 0.25rem;
  border:1px solid red;
  font-family:'FraktionMono';
  font-size:0.75rem;
  font-weight:600;
}

/* Database */
#DatabaseContentLayout{
    display:grid;
    grid-template-columns:300px 1fr;

}

/* Drilldown */

/* .DrillDownFilter .DrillDownFilterMenuSection,
.DrillDownFilter .DrillDownFilterNav{
  display: flex;
  flex-wrap: no-wrap;
} */

.DrillDownFilterNav{
  color:#ffffff;
  background-color:var(--Accent100);
  display:flex;
  flex-wrap:nowrap;

  :not(.ShowNav)>&{
    display: none;
  }
}
.DrillDownFilterMenuSection{
  display:grid;
  grid-template-columns:1fr;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;

  &[data-level="1"]{
    gap:1rem;
  }

  &:not(.ActiveSection){
    display:none;
  }
}

.DrillDownFilter button{
  border-radius: 0px;
  background:none;
  border:none;
  text-align: left;
  display: block;

  padding: 1rem;


  .DrillDownFilterNav>&{
    color:#ffffff;
    flex-grow:0;

    &:last-child{
      flex-grow: 1;
    }

    &[data-level="2"]{
      background-color: var(--Accent100);
    }
    &[data-level="3"]{
      background-color: var(--Accent050);
    }
    &[data-level="4"]{
      background-color: var(--Accent025);
    }
  }


  .DrillDownFilterMenuSection>&{
    flex-grow:1
  }

  .DrillDownFilterMenuSection[data-level="1"]>&{
    background-color:var(--Accent100);
    text-align: center;
    color:#ffffff;
  }

  .DrillDownFilterMenuSection:not([data-level="1"])>&{
    border-left:var(--BorderMedium) solid var(--Accent100);
  }

}

.DrillDownFilterNav>button.DrillDownFilterResetBtn{
 background-color: var(--Accent025);
 position: relative;
 align-self: stretch;
}
.DrillDownFilterNav>button.DrillDownFilterResetBtn::before{
  content:'';
  display: block;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);

  width:0.5rem;
  aspect-ratio: 1/1;
  background-color: currentColor;
  clip-path:var(--ArrowLeft);

}

/* Check Nested */

.CheckGroup:has(>.CheckGroupHead input.visToggle:not(:checked)) > .CheckNested,
.CheckGroup:not(:has(>.CheckGroupHead>label>input.filterValue:checked)) > .CheckNested{
  display:none;
}

.CheckGroup{
  display:flex;
  display:webkit-flex;
  flex-direction:Column;
}

.CheckGroup>.CheckGroupHead{
  display:flex;
  flex-grow:1;
  align-items:stretch;

  &>label:has(>input.filterValue){
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap:var(--Spc-Mini);

    &::before{
      content:'';
      display:inline-block;
      flex-shrink: 0;
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      border:1px solid var(--Accent100)
    }
  }
  &>label:has(>input.filterValue:checked){
    &::before{
      background-color:var(--Accent050);
    }
  }




  .CheckGroupL1>&:not(:has(>label>input.filterValue:checked)){
    outline: 1px solid var(--Accent100)
  }
  .CheckGroupL1>&:has(>label>input.filterValue:checked){
    background-color:var(--Accent100);
    color:#FFFFFF;
  }


  .CheckGroupL2>&>label:has(input.filterValue){
    border-left: var(--BorderHeavy) solid var(--Accent100);
  }
  .CheckGroupL2>&:has(>label>input.filterValue:checked){
    /* background-color:var(--Accent025);
    color:#FFFFFF; */
  }

  .CheckGroupL3>&{
    border-left: var(--BorderLight) solid var(--Accent100);
  }


  &:not(:has(label>input.filterValue:checked))>.visToggleLabel{
    display: none;
  }
  &>.visToggleLabel{
    display: block;
    align-self: stretch;
    padding: var(--Spc-Mini);
    background-color: var(--Accent050);
    display: flex;
    align-items: center;
    justify-content: center;
    color:#ffffff;

    &::before{
      content:'';
      display: block;
      width:0.5rem;
      height:0.5rem;
      background-color:currentColor;
      clip-path:var(--ArrowRight);
      transform:rotate(0deg);
      transition:transform 0.25s;
    }
    &:has(input:checked)::before{
      transform:rotate(90deg);
    }

  }
}

/* Map */

/* Map Selector */
.mapContainer{
    width: 100%;
    max-width: 780px;
}

.mapSelect{
  border:none;
  display:grid;
  width:100%;
  grid-auto-flow: dense !important;
  grid-template-columns: repeat(11, 1fr);
  gap: 0.25rem;
}

.stateBox{
  --ColorMain: var(--Accent100);
  --BorderWeight:1px;
  font-size:0.7rem;
  font-weight:700;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio: 1 / 1;
  padding: 0;
  cursor: pointer;
  grid-row-start:var(--RowStart);
  transition: transform 150ms ease, color 150ms ease, box-shadow 150ms ease;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
  & > input{
    display:none;
  }

  &:has(>input:checked){
    color:#ffffff;
  }
  
  .mapContainer:has(>label>input:not(:checked))>.mapSelect>&{
    grid-row-start:auto !important;
    padding:0rem 1rem;
  }

  &::before{
    content:attr(data-abbreviation);
    display:block;
    position:relative;
    z-index:1;
  }

  &:hover::before,
  &:has(>input:checked){
    /* font-weight:1000; */
  }

  &::after{
   content:'';
    display:block;
    position:absolute;
    inset:2px;
    border:var(--BorderWeight) solid var(--ColorMain);
    background-color: transparent;
    transition: background-color 150ms ease, border-width 150ms ease, inset 150ms ease;
    z-index:0;
  }
  &:has(>input:checked)::after{
    background-color:var(--ColorMain);
  }
  &:hover{
    transform: translateY(-2px);
    color: var(--ColorMain);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  }
  &:hover::after{
    background-color: color-mix(in srgb, var(--ColorMain) 12%, transparent);
    border-width: 2px;
  }
  &:has(>input:checked):hover{
    transform: translateY(-2px);
    color: #ffffff;
  }
  &:has(>input:checked):hover::after{
    background-color: var(--ColorMain);
    border-width: 2px;
  }
}

#map-title{

    & h2{
        margin:0;
    }
}

/* State Explorer */
main.StateExplorerContent{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

main.StateExplorerContent > *{
  margin-left: 0;
  margin-right: 0;
  width: auto;
  align-self: stretch;
}

.StateMapSection{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: -1rem;
}

.StateMapPrompt{
  text-align: center;
  max-width: none;
  font-size: var(--FontSize-Med);
  color: #000;
  margin: 0;
}

.StateMapPrompt-Selection{
  color: var(--Accent100);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.StateMap-Reset{
  padding: 0.4rem 0.9rem;
  background-color: var(--Accent100);
  color: #fff;
  border: none;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.StateMap-Reset:hover{
  background-color: var(--Accent050);
}

.CaseStudiesMeta{
  border-top: 1px solid rgba(0,0,0,0.1);
  padding-top: 0.75rem;
}

.CaseStudiesCount{
  margin: 0;
  font-weight: 700;
  color: #000;
  max-width: none;
}

.CaseStudiesCount-Num,
.CaseStudiesCount-State{
  color: var(--Accent100);
}

.CaseStudiesCount-State{
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#CaseStudies{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.CaseStudyItem{
  list-style: none;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 3px solid var(--Accent100);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin: 0;
}

.CaseStudyItem .CaseStudyInfo{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.CaseStudyFlag{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-color: var(--Accent100);
  color: #ffffff;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  max-width: 100%;
  flex-wrap: wrap;
}

.CaseStudyFlag-State{
  text-transform: uppercase;
}

.CaseStudyFlag-Arrow{
  opacity: 0.75;
  font-size: 0.9em;
}

.CaseStudyFlag-Pillar{
  text-transform: none;
  font-weight: 600;
}

.CaseStudyItem .CaseStudyTitle{
  margin: 0;
  font-size: var(--FontSize-Med);
  font-weight: 700;
  text-wrap: balance;
}

.CaseStudyDescription{
  margin: 0;
  max-width: none;
}

.CaseStudyTaxonomy{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.72);
  line-height: 1.35;
}

.CaseStudyTaxonomy-Recc,
.CaseStudyTaxonomy-PType{
  font-weight: 600;
}

.CaseStudyTaxonomy-Arrow{
  color: var(--Accent100);
  font-weight: 700;
}

.CaseStudyItem .Sources{
  display: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 0.5rem;
  margin-top: 0.25rem;
}

.CaseStudyAlsoIn{
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.65);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 0.5rem;
  margin-top: 0.25rem;
}

.CaseStudyAlsoIn-Label{
  font-weight: 700;
  color: var(--Accent100);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  margin-right: 0.25rem;
}

.SourcesLabel{
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--Accent100);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.SourcesLinks{
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc outside;
}

.SourcesLinks > li{
  margin-bottom: 0.25rem;
  list-style: disc outside;
  text-wrap: pretty;
  overflow-wrap: normal;
  word-break: normal;
}

.SourcesLinks > li::marker{
  color: var(--Accent100);
}

.SourcesLinks a{
  color: var(--Accent100);
  text-decoration: underline;
  max-width: none;
}


.ExpandRuleBox:has(>label>input:not(:checked)) .ContentArea > .MoreInfo{
  display:none !important;
}



/* Epanding Rule */
.ExpandRuleBox{
    display:flex;
    gap:0.5rem;

    &.RuleTop{
      flex-direction: column;

      &>label.FlagIn{
        width: 100%;
        border-top:var(--BorderMedium) solid var(--Accent100);
      }

      &>label{
        flex-direction: row;
      }

    }

    &>label{
      display: flex;
      justify-content: start;

      &:has(input:checked){
        justify-content: end;
      }

      &>.RuleFlag{
        aspect-ratio: 1/1;
        background-color:var(--Accent100);
        display: block;
        padding: 0.25rem; 

        &::before{
          content:'';
          display: block;
          width: 0.5rem;
          aspect-ratio: 1/1;
          background-color:currentColor;
          clip-path: var(--ArrowDown);
        }
      }
    }

    &.RuleTop:not(:has(>label>input:checked)){
      max-width: 100px;
    }

    &.CollapseHidden:not(:has(>label>input:checked))>.ContentArea{
      display: none;
    }
}

.ExpandRuleBox>label:has(input:checked)> .RuleFlag::before{
  clip-path: var(--ArrowUp);
}

/* Action Card */
.ActionCard{
  list-style: none;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 3px solid var(--Accent100);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

  &>p{
    padding: 0;
    margin: 0;
  }

  &> .PolicyLeverFlag{
    align-self: flex-start;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem;
    background-color: var(--Accent100);
    color: #ffffff;
    border: none;
  }

  & .ActionExamples{
    font-family: inherit;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.75rem 0 0;
    font-size: inherit;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    &>p{
      font-size: 0.75rem;
      font-weight: 700;
      margin: 0;
      color: var(--Accent100);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
  }
}

.ActionExamplesList{
  margin: 0;
}

.ActionExamplesLabel{
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--Accent100);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.ActionExamplesLinks{
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc outside;

  & > li{
    margin-bottom: 0.25rem;
    list-style: disc outside;
    text-wrap: balance;

    &::marker{
      color: var(--Accent100);
    }
  }

  & a{
    color: var(--Accent100);
    text-decoration: underline;
    max-width: none;
  }
}

/* Explore */

/* Implementation Guide drill-down */
main.ExploreContent{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

main.ExploreContent > .ExploreLevel,
main.ExploreContent > .ExploreNav{
  margin-left: 0;
  margin-right: 0;
  width: auto;
  align-self: stretch;
}

.ExploreNav{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: -0.75rem;
  margin-bottom: -0.75rem;
}

.ExploreBreadcrumb{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  color: var(--Accent100);
  font-size: var(--FontSize-Reg);
}

.ExploreBreadcrumbItem{
  background: none;
  border: none;
  color: var(--Accent100);
  cursor: pointer;
  padding: 0;
  font: inherit;
  text-decoration: underline;
}

.ExploreBreadcrumbSep{
  color: var(--Accent100);
}

.ExploreBreadcrumbCurrent{
  font-weight: 700;
  color: var(--Accent100);
}

.ExploreIntro{
  text-align: center;
  max-width: 85ch;
  margin: -2rem auto 0;
}

.ExplorePrompt{
  font-size: var(--FontSize-Lrg);
  font-weight: 600;
  color: var(--Accent100);
  margin: 0;
  max-width: none;
  text-align: center;
}

.ExploreLevel{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: explore-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ExploreLevel.is-exiting{
  animation: explore-out 160ms ease-in both;
}

@keyframes explore-in{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}

@keyframes explore-out{
  from{ opacity: 1; transform: translateY(0); }
  to{ opacity: 0; transform: translateY(-10px); }
}

.ExploreButtonGrid{
  --gap: 1rem;
  --cols: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

.ExploreButtonGrid > .ExploreDrillBtn{
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  max-width: 100%;
}

@media (max-width: 800px){
  .ExploreButtonGrid{
    --cols: 2 !important;
  }
}

@media (max-width: 480px){
  .ExploreButtonGrid{
    --cols: 1 !important;
  }
}

.ExploreButtonGrid--pillars{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  width: 100%;
  max-width: 900px;
  align-self: center;
}

@media (max-width: 600px){
  .ExploreButtonGrid--pillars{
    grid-template-columns: 1fr;
  }
}

.ExploreDrillBtn--pillar{
  min-height: 12rem;
  font-size: var(--FontSize-Lrg);
  padding: 2rem 1.5rem;
  background-image: var(--heroImage);
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.ExploreDrillBtn{
  padding: 1.5rem 1rem;
  background-color: var(--Accent100);
  color: #ffffff;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--FontSize-Med);
  font-weight: 700;
  text-align: center;
  min-height: 6rem;
  line-height: 1.2;
  text-wrap: balance;
  transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
  animation: explore-btn-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(60ms * var(--i, 0));
}

.ExploreDrillBtn:hover{
  background-color: var(--Accent050);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.ExploreDrillBtn:active{
  transform: translateY(0);
  box-shadow: none;
}

@keyframes explore-btn-in{
  from{ opacity: 0; transform: translateY(10px) scale(0.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .ExploreLevel,
  .ExploreLevel.is-exiting,
  .ExploreDrillBtn{
    animation: none !important;
  }
  .ExploreDrillBtn{
    transition: background-color 150ms ease;
  }
  .ExploreDrillBtn:hover{
    transform: none;
    box-shadow: none;
  }
}

.ExploreActionList{
  list-style: none;
}

/* Legacy accordion styling (kept for reference) */
.ExploreElement{
  & input{
    display: none;
  }
}

.TaxonomySection{

  &.ExplorePillarHead{


    &>.TaxItems{
      display: grid;
      grid-template-columns: auto 1fr 1fr;
      grid-template-areas: "Btn Info Img";
      background-color: var(--Accent100);
      color:#ffffff;

      &>button{
        grid-area: Btn;
      }
      &>.Info{
        grid-area: Info;
        padding: 1rem;
      }
      &>.ImageBlock{
        grid-area: Img;
      }
    }
  }
  
  &[data-taxonomy="Recommendation"]>.TaxItems,
  &[data-taxonomy="Policy Type"]>.TaxItems{
    display: flex;
  }

  &[data-taxonomy="Recommendation"]>.TaxItems{
    background-color: var(--Accent025);
    color:#ffffff;
  }


  .TaxonomySection:not(:has(>.TaxItems label>input:checked))>&
  {
    display: none;
  }

}

.ExploreSectionToggle{
  background-color: var(--Accent050);
  border:none;
  flex-shrink: 0;
  position: relative;
  display: block;
  color:#ffffff;
  padding: 0.5rem;
  &:hover{
    background-color: var(--Accent025);
  }

  &::before{
    content:'';
    display: block;
    width: 0.5rem;
    aspect-ratio: 1/1;
    background-color: currentColor;
    clip-path: var(--ArrowUp);

  }

  .TaxItems:not(:has(label>input:checked))>&{
    display: none;
  }
}

.ExploreSectionContent{
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.ExploreElement .TaxonomyItem:not(.ActionCard){
  padding: 1rem;
  border-left:var(--BorderHeavy) solid var(--Accent100);

  .ExploreSectionContent:has(.TaxonomyItem>input:checked)>&:not(:has(input:checked)){
  display: none;
  }

  &:not(:has(input:checked)) p{
    display: none;
  }

  &:has(input:checked){
    flex-grow:1;
  }
}



/* Agenda Page */

:root{
  --header-h: 3rem;
}

.PageTitle > h1{
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  margin: 0.5rem 0px;
}

/* Center the page title */
main > .PageTitle > h1{
  text-align: center;
}

/* Sticky banners: each replaces the previous as you scroll */
.PillarGroup > .PillarTitleCard{
  position: sticky;
  top: var(--header-h);
  z-index: 90;
}

#Signitories > .SignitoriesHeader{
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  background-color: var(--OffWhite);
  margin: 0;
  padding: 0.5rem 0;
}

#PillarsOverview{
  margin-top: 4rem;
  margin-bottom: 0;
  gap: 0;
}

#SignitoriesSection{
  gap: 0;
  margin-top: 0;
}
#SignitoriesSection > hr{
  margin: 0;
}
#Signitories hgroup .btn{
  margin-top: 1rem;
}
#Signitories > h4{
  margin-top: 1rem;
}

#Introduction{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;

  &>*{
    grid-column: span 2;
  }

  &>#Intro-Large{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
}

.PillarGroup{
  display: grid;
  gap:1rem;
  grid-template-columns: 1fr 1fr;
  padding-bottom: 4rem;

  & .PillarTitleCard{
    grid-column:span 2;
    margin-right: -1rem;
    margin-left: -1rem;
  }

  & .Description{
    grid-column:span 2;
  }

  & .ReccsGroup{
    grid-column:span 2;
    margin-top: -0.3125rem;
  }

  & .Description>p:not(:first-child){
    display: none;
  }
}

.StatsSection{ display: none; }

#Introduction p,
#SignitoriesSection p,
.PillarGroup .Description p,
.PillarGroup .ReccsGroupIntro{
  max-width: none;
}

.PillarTitleCard{
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: var(--Accent100);
  color:#ffffff;

  & h2{
    font-size: 2.5rem;
    margin: 0.5em
  }
}

.ReccsList li{
  padding:0px 12px;
  border-left:var(--BorderHeavy) solid var(--Accent100);
}

.ImageBlock{
  display: block;
  height: 100%;
  background-color: var(--Accent100);
  background-image: var(--heroImage);
  background-blend-mode: luminosity;
  background-position: center;
  background-size: cover;
}

ul.signitoryList{
  padding: 0px;
  list-style: none;
  list-style-position: inside;

  /* display: flex;
  flex-wrap: wrap; */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap:0.5rem;
  
  &>li{
    list-style-position: inside;
    font-size: 1em;
    padding:0.5rem;
    font-weight: 500;
    background-color: #ffffff;
  }
}

.statBlock{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap:1rem;
  padding: 0.75rem 0;
  align-items: center;
  margin-bottom: 1.5rem;

  &>p{
    margin:0px;
    font-weight: 700;
  }

  &>.statNum{
    font-size: 2.5rem;
    text-align: right;
    white-space: nowrap;
    position: relative;

    &::before{
      content:'';
      position: absolute;
      aspect-ratio: 1/1;
      left: 100%;
      transform: translate(-50%, 0%);
      top:-10px;
      bottom: -10px;
      background-color:var(--Accent100);
      z-index:-1;
      opacity: 20%;
    }
  }

  &>.statTxt{
    font-size: 1.25rem;
  }
}

/* Screen Size 1300px */
@media screen and (max-width:1300px) {
  :root{
    --width-max:100%;
    --margin-body-sides:1rem;
  }

  header{
    padding-top: var(--Spc-Small);

    &>.headerMain{
      position: relative;

      & .HeaderInfo{

        & .Logo{
          &.Logo-Desktop{
            display: none;
          }
          &.Logo-Mobile{
            display: block !important;
          }
        }



      }

    }

    &>nav.navbar>.navItems{
      flex-wrap: wrap;
      gap: 0.25rem 0.5rem;
    }
  }

}

/* Screen Size 700px */
@media screen and (max-width:700px) {
  :root{
    --width-max:100%;
  }

  header{

    &>.headerMain{
      grid-template-columns: 1fr auto;
      gap: var(--Spc-Mini);
      align-items: center;

      &>.navBtn{
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
        white-space: nowrap;
        justify-self: end;
        align-self: center;
      }
    }
  }

  ul.gridList{
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  main > .PageTitle > h1{
    font-size: var(--FontSize-XL);
  }

  #Introduction{
    grid-template-columns: 1fr;
  }

  .PillarGroup{
    grid-template-columns: 1fr;

    & .PillarTitleCard{
      margin-left: -0.5rem;
      margin-right: -0.5rem;
    }
  }

  header > nav.navbar{
    width: 100%;
    max-width: 100%;
    padding: 0.4rem 0.75rem;
  }

  header > nav.navbar > .navItems{
    flex-direction: column !important;
    gap: 0.3rem 0 !important;
  }

  header > nav.navbar > .navItems > .navItem{
    padding: 0 !important;
  }

  header > nav.navbar > .navItems > .navItem::before{
    display: none !important;
  }

  .ExploreElement{


    &>.TaxonomySection.ExplorePillarHead>.TaxItems{
      grid-template-columns: auto 1fr;
      grid-template-rows: 4rem auto;
      grid-template-areas:
        "Img Img"
        "Btn Info"
      ;

    }
    & .TaxonomySection[data-taxonomy="Recommendation"]>.TaxItems>.ExploreSectionContent,
    & .TaxonomySection[data-taxonomy="Policy Type"]>.TaxItems>.ExploreSectionContent{
      grid-template-columns: 1fr;
      grid-auto-flow: row;

      &>.TaxonomyItem{
        border-width: var(--BorderMedium) 0px 0px 0px;
        border-style: solid;
        border-color: var(--Accent100);
      }
    }
  }


  }