/* component */
/* components define individual site elements */
@layer component {



  /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  /* icons */
    
  @font-face {
    font-family: 'FAO';
    src: url('../fonts/FAO.eot');
    src: url('../fonts/FAO.eot') format('embedded-opentype'),
        url('../fonts/FAO.woff2') format('woff2'),
        url('../fonts/FAO.woff') format('woff'),
        url('../fonts/FAO.ttf') format('truetype'),
        url('../fonts/FAO.svg') format('svg');
  }

  /* base class */
  .icon,
  .nav-icon > a {
    flex-shrink: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .icon {
    display: inline-block;
  }

  .icon::before,
  .nav-icon > a::before {
    font: normal normal normal 1em/1 'FAO';
    line-height: 1;
  }

  /* nav icons should default to "large" size */
  .nav-icon > a::before {
    font-size: 1.5em;
  }

  /*utilities*/

  /* size examples - relative units */
  .nav-icon-sm > a::before,
  .icon-sm::before {
    font-size: 0.8em;
  }

  .nav-icon-med > a::before,
  .icon-med::before {
    font-size: 1em;
  }

  .nav-icon-lg > a::before,
  .icon-lg::before {
    font-size: 1.5em;
  }

  /* size examples - absolute units */
  .nav-icon-16 > a::before,
  .icon-16::before {
    font-size: 16px;
  }

  .nav-icon-32 > a::before,
  .icon-32::before {
    font-size: 32px;
  }

  /* rotate the icon infinitely */
  .icon-is-spinning {
    animation: icon-spin 1s infinite linear;
  }

  @keyframes icon-spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* transform */
  .icon-rotate-90 { transform: rotate(90deg); }
  .icon-rotate-180 { transform: rotate(180deg); }
  .icon-rotate-270 { transform: rotate(270deg); }
  .icon-flip-y { transform: scaleY(-1); }
  .icon-flip-x { transform: scaleX(-1); }


  /* icons */
  .nav-icon-IG > a::before,
  .icon-icon-IG::before ,
  .nav-icon-ig > a::before,
  .icon-icon-ig::before {
    content: "\ea01";
  }

  .nav-icon-annual-report > a::before,
  .icon-icon-annual-report::before {
    content: "\ea02";
  }

  .nav-icon-climatechange > a::before,
  .icon-icon-climatechange::before {
    content: "\ea07";
  }

  .nav-icon-close-circle > a::before,
  .icon-icon-close-circle::before {
    content: "\ea09";
  }

  .nav-icon-copy > a::before,
  .icon-icon-copy::before {
    content: "\ea0a";
  }

  .nav-icon-email > a::before,
  .icon-icon-email::before {
    content: "\ea0c";
  }

  .nav-icon-expand > a::before,
  .icon-icon-expand::before {
    content: "\ea0d";
  }

  .nav-icon-faq > a::before,
  .icon-icon-faq::before {
    content: "\ea0e";
  }

  .nav-icon-interactive > a::before,
  .icon-icon-interactive::before {
    content: "\ea10";
  }

  .nav-icon-leg > a::before,
  .icon-icon-leg::before {
    content: "\ea11";
  }

  .nav-icon-linkedin > a::before,
  .icon-icon-linkedin::before {
    content: "\ea12";
  }

  .nav-icon-mediaalert > a::before,
  .icon-icon-mediaalert::before {
    content: "\ea13";
  }

  .nav-icon-mediarelease > a::before,
  .icon-icon-mediarelease::before {
    content: "\ea14";
  }

  .nav-icon-mediastatement > a::before,
  .icon-icon-mediastatement::before {
    content: "\ea15";
  }

  .nav-icon-news > a::before,
  .icon-icon-news::before {
    content: "\ea18";
  }

  .nav-icon-newsletter > a::before,
  .icon-icon-newsletter::before {
    content: "\ea19";
  }

  .nav-icon-newsletters > a::before,
  .icon-icon-newsletters::before {
    content: "\ea1a";
  }

  .nav-icon-officer > a::before,
  .icon-icon-officer::before {
    content: "\ea1b";
  }

  .nav-icon-page > a::before,
  .icon-icon-page::before {
    content: "\ea1c";
  }

  .nav-icon-photos > a::before,
  .icon-icon-photos::before {
    content: "\ea1d";
  }

  .nav-icon-presentations > a::before,
  .icon-icon-presentations::before {
    content: "\ea1e";
  }

  .nav-icon-reportarchive > a::before,
  .icon-icon-reportarchive::before {
    content: "\ea1f";
  }

  .nav-icon-reset > a::before,
  .icon-icon-reset::before {
    content: "\ea20";
  }

  .nav-icon-search > a::before,
  .icon-icon-search::before {
    content: "\ea21";
  }

  .nav-icon-share > a::before,
  .icon-icon-share::before {
    content: "\ea22";
  }

  .nav-icon-sort > a::before,
  .icon-icon-sort::before {
    content: "\ea23";
  }

  .nav-icon-team > a::before,
  .icon-icon-team::before {
    content: "\ea24";
  }

  .nav-icon-videos > a::before,
  .icon-icon-videos::before {
    content: "\ea25";
  }

  .nav-icon-x > a::before,
  .icon-icon-x::before,
  .nav-icon-X > a::before,
  .icon-icon-X::before,
  .nav-icon-twitter > a::before,
  .icon-icon-twitter::before {
    content: "\ea26";
  }

  .nav-newsletter-icon > a::before,
  .icon-newsletter-icon::before {
    content: "\ea27";
  }


  .nav-icon-arrow > a::before,
  .icon-icon-arrow::before {
    content: "\ea03";
  }

  .nav-icon-careers > a::before,
  .icon-icon-careers::before {
    content: "\ea04";
  }

  .nav-icon-cite > a::before,
  .icon-icon-cite::before {
    content: "\ea06";
  }


  .nav-icon-close > a::before,
  .icon-icon-close::before {
    content: "\ea08";
  }

  .nav-icon-info > a::before,
  .icon-icon-info::before {
    content: "\ea0f";
  }

  .nav-icon-menu > a::before,
  .icon-icon-menu::before {
    content: "\ea16";
  }

  .nav-icon-download > a::before,
  .icon-icon-download::before {
    content: "\ea0b";
  }


  .nav-icon-cipi > a::before,
  .icon-icon-cipi::before {
    content: "\ea05";
  }

  .nav-icon-module > a::before,
  .icon-icon-module::before {
    content: "\ea17";
  }



  /* topic icons */
  .nav-icon-rapports-annuel > a::before,
  .icon-topics-rapports-annuel::before,
  .nav-icon-annual-reports > a::before,
  .icon-topics-annual-reports::before {
    content: "\ea28";
  }

  .nav-icon-budget > a::before,
  .icon-topics-budget::before,
  .nav-icon-budgets > a::before,
  .icon-topics-budgets::before {
    content: "\ea29";
  }

  .nav-icon-climat-et-environment > a::before,
  .icon-topics-climat-et-environment::before,
  .nav-icon-climate-and-environment > a::before,
  .icon-topics-climate-and-environment::before {
    content: "\ea30";
  }

  .nav-icon-covid-19 > a::before,
  .icon-topics-covid-19::before {
    content: "\ea2a";
  }

  .nav-icon-demographics > a::before,
  .icon-topics-demographics::before {
    content: "\ea2b";
  }

  .nav-icon-economie > a::before,
  .icon-topics-economie::before,
  .nav-icon-economy > a::before,
  .icon-topics-economy::before {
    content: "\ea2c";
  }

  .nav-icon-education-et-garde-d-enfants > a::before,
  .icon-topics-education-et-garde-d-enfants::before,
  .nav-icon-education-and-childcare > a::before,
  .icon-topics-education-and-childcare::before {
    content: "\ea2d";
  }

  .nav-icon-emploi-et-marche-du-travail > a::before,
  .icon-topics-emploi-et-marche-du-travail::before,
  .nav-icon-employment-and-labour-markets > a::before,
  .icon-topics-employment-and-labour-markets::before {
    content: "\ea2e";
  }

  .nav-icon-energie-et-richesses-naturelles > a::before,
  .icon-topics-energie-et-richesses-naturelles::before,
  .nav-icon-energy-and-natural-resources > a::before,
  .icon-topics-energy-and-natural-resources::before {
    content: "\ea2f";
  }


  .nav-icon-budget-des-depenses > a::before,
  .icon-topics-budget-des-depenses::before ,
  .nav-icon-expenditure-estimates > a::before,
  .icon-topics-expenditure-estimates::before {
    content: "\ea31";
  }

  .nav-icon-les-depenses-du-gouvernement > a::before,
  .icon-topics-les-depenses-du-gouvernement::before ,
  .nav-icon-government-spending > a::before,
  .icon-topics-government-spending::before {
    content: "\ea32";
  }

  .nav-icon-soins-de-sante > a::before,
  .icon-topics-soins-de-sante::before,
  .nav-icon-health-care > a::before,
  .icon-topics-health-care::before {
    content: "\ea33";
  }

  .nav-icon-infrastructures-et-transports > a::before,
  .icon-topics-infrastructures-et-transports::before ,
  .nav-icon-infrastructure-and-transportation > a::before,
  .icon-topics-infrastructure-and-transportation::before {
    content: "\ea34";
  }

  .nav-icon-autre > a::before,
  .icon-topics-autre::before,
  .nav-icon-other > a::before,
  .icon-topics-other::before {
    content: "\ea35";
  }

  .nav-icon-problemes-sociaux > a::before,
  .icon-topics-problemes-sociaux::before,
  .nav-icon-social-programs > a::before,
  .icon-topics-social-programs::before {
    content: "\ea36";
  }

  .nav-icon-impots-et-autres-revenus > a::before,
  .icon-topics-impots-et-autres-revenus::before,
  .nav-icon-taxes-and-other-revenue > a::before,
  .icon-topics-taxes-and-other-revenue::before {
    content: "\ea37";
  }


  .nav-icon-cout-des-politiques > a::before,
  .icon-topics-cout-des-politiques::before,
  .nav-icon-policy-costing > a::before,
  .icon-topics-policy-costing::before {
    content: "\ea38";
  }












  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* every layout inspired */
  .stack {
    display: flex;
    flex-direction: column;
  }

  :is(.flow, .shallow-flow, .stack-flow) > * + * {
    margin-block-start: 1em;
  }
  
  .deep-flow * + * {
    margin-block-start: 1em;
  }

  /* pile applied on wrapper, all direct children are placed in same area 
    "piled" on top of each other */
  .pile {
    display: grid;
  }
  .pile > * {
    grid-area: 1/1/2/2;
  }


  /* box applies a border and padding to an element */
  .box {
    border: var(--hr-width) solid var(--accent-color);
    padding: 1rem;
    border-radius: 0.5rem;
  }
  /* light box */
  .box-light {
    background-color: var(--accent-light);
    color: var(--text-light-color);
    padding: 1rem;
    border-radius: 0.5rem;
  }

  .box-dark {
    background-color: var(--accent-dark);
    color: var(--text-dark-color);
    padding: 1rem;
    border-radius: 0.5rem;
  }


  .cluster {
    display: flex;
    flex-wrap: wrap;
  }

  .row {
    display: flex;
    flex-wrap: nowrap;
  }


  .grid-auto-fit {
    --min-width: 10rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax( var(--min-width,10rem), 1fr));
  }
  .grid-auto-fill {
    --min-width: 10rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax( var(--min-width,10rem), 1fr));
  }
  .grid-columns {
    --columns: 2;
    display: grid;
    grid-template-columns: repeat( var(--columns,2), 1fr);
  }
  
  

  .switcher {
    display: flex;
    flex-wrap: wrap;
    --min-total-width: 40rem;
    /* --margin: 1rem; */
    --modifier: calc( var(--min-total-width) - 100%);
    /* margin: calc(var(--margin) * -1); */
  }
  
  .switcher > * {
    flex-grow: 1;
    flex-basis: calc(var(--modifier) * 999);
    /* margin: var(--margin); */
  }
  
  .reel {}

  .grid {
    --min-cell-size: 10rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax( var(--min-cell-size), 1fr));
  }



  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  hr        { border-top: var(--hr-width) solid var(--accent-color); }
  hr.white  { border-top: var(--hr-width) solid var(--accent-white); }
  hr.light  { border-top: var(--hr-width) solid var(--accent-light); }
  hr.medium { border-top: var(--hr-width) solid var(--accent-medium); }
  hr.accent { border-top: var(--hr-width) solid var(--accent-color); }
  hr.dark   { border-top: var(--hr-width) solid var(--accent-dark); }
  hr.black  { border-top: var(--hr-width) solid var(--accent-black); }




  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* buttons */

  :is(
    .button,
    .button-white,
    .button-light,
    .button-medium,
    .button-accent,
    .button-dark,
    .button-black
  ) {
    padding: 0.5em 1em;
    border-radius: 0.25rem;
    border: var(--hr-width) solid var(--button-bg);
    background-color: var(--button-bg);
    color: var(--button-color);
    text-decoration: none;
  }
  :is(.button,.button-white,.button-light,.button-medium,.button-accent,.button-dark,.button-black):is(:hover, :focus-visible) {
    border: var(--hr-width) solid var(--button-focus-bg);
    background-color: var(--button-focus-bg);
    color: var(--button-focus-color);
    text-decoration: none;
  }
  :is(.button,.button-white,.button-light,.button-medium,.button-accent,.button-dark,.button-black):active {
    border: var(--hr-width) solid var(--button-active-bg);
    background-color: var(--button-active-bg);
    color: var(--button-active-color);
    text-decoration: none;
  }

  .button-white {
    --button-bg: var(--text-bg);
    --button-color: var(--accent-color);
    --button-focus-bg: var(--accent-color);
    --button-focus-color: var(--text-dark-color);
    --button-active-bg: var(--accent-dark);
    --button-active-color: var(--text-dark-color);
    border-color: var(--accent-color);
  }

  .button-light {
    --button-bg: var(--accent-light);
    --button-color: var(--button-light-color);
    --button-focus-bg: var(--button-light-focus-bg);
    --button-focus-color: var(--button-light-focus-color);
    --button-active-bg: var(--button-light-active-bg);
    --button-active-color: var(--button-light-active-color);
    border-color: var(--button-color);
  }

  .button-medium {
    --button-bg: var(--accent-medium);
    --button-color: var(--text-color);
    --button-focus-bg: var(--button-light-focus-bg);
    --button-focus-color: var(--button-light-focus-color);
    --button-active-bg: var(--button-light-active-bg);
    --button-active-color: var(--button-light-active-color);
  }

  .button-dark {
    --button-bg: var(--button-dark-bg);
    --button-color: var(--button-dark-color);
    --button-focus-bg: var(--button-dark-focus-bg);
    --button-focus-color: var(--button-dark-focus-color);
    --button-active-bg: var(--button-dark-active-bg);
    --button-active-color: var(--button-dark-active-color);
  }
  .button-black {
    --button-bg: var(--text-color);
    --button-color: var(--text-dark-color);
    --button-focus-bg: var(--accent-color);
    --button-focus-color: var(--text-dark-color);
    --button-active-bg: var(--accent-color);
    --button-active-color: var(--accent-dark);
  }



  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* TABBED SECTIONS */
  .tabbed-sections {
    display: grid;
    grid-template-columns: repeat(99,auto) 1fr; 
    gap:0;
  }
  .tabbed-sections [tabindex] {
    grid-row: 1 / 2;
    /* keep each tab's text on one line */
    min-width: max-content;
    /* indicate interaction */
    cursor: pointer;
  }
  .tabbed-sections section {
    /* hide until focused */
    display: none;
    /* sections should take up the entire width of the container */
    grid-column: 1 / -1;
  }
  .tabbed-sections [tabindex][aria-selected] + section,
  .tabbed-sections [tabindex]:focus + section,
  .tabbed-sections section:focus-within,
  .tabbed-sections section:has( :focus) {
    /* display text when appropriately focused */
    display: block;
  }
  


  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* list item */
/* 
  .item-image a:has( > img) {
    display: block;
    border: none;
  }

  .item-image a > img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    border: 1px solid var(--text-gray);
  } */
/* 
  .item-image a:is(:hover,:focus-visible) > img {
    outline: calc(2 * var(--hr-width)) solid var(--accent-color);
    outline-offset: calc(-2 * var(--hr-width));
  }

  .item-image a:is(:hover, :focus-visible) {
    outline: calc(2 * var(--hr-width)) solid var(--accent-color);
    outline-offset: calc(-2 * var(--hr-width));
  } */

  .item-image a {
    border-radius: 0.5rem; 
    overflow: clip; 
    border: var(--hr-width, 1px) solid transparent;
  }
  .item-image a:is(:hover,:focus-visible) {
    border-color: white;
    outline: calc(var(--hr-width, 1px) * 2) solid var(--accent-color, currentColor);
    /* outline-offset: var(--hr-width, 1px); */
    box-shadow: 0 0 0.5rem 0 #88888888;
  }
  





  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* GALLERY WRAPPERS */
  /* gallery wrappers expect  */

  .gallery a img{
    display: block;
    border: 1px solid var(--text-grey);
    border-radius: 0.5rem;
    overflow: hidden;
  }

  .gallery a img:is(:hover,:focus-visible) {
    outline: calc(2* var(--hr-width)) solid var(--accent-color);
    outline-offset: calc(-2* var(--hr-width));
  }


  /* gallery grid: all items same size (square), images cropped to fit (cover) */
  .gallery-grid {
    --col-width: 10rem;
    --row-height: 10rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--col-width,10rem), 1fr));
    grid-auto-rows: var(--row-height,10rem);
    /* display: flex; */
    /* flex-wrap: wrap; */
    gap: 0.5rem;
  }

  :is(.gallery-grid,.gallery-cluster) > * {
    padding: 0.5rem;
    border-radius: 0.5rem;
    overflow: clip;
    border: var(--hr-width) solid var(--text-gray);
  }

  :is(.gallery-grid,.gallery-cluster) > a:is(:hover, :focus-visible) {
    border-color: var(--accent-color);
  }

  .gallery-grid a img {
    object-fit: cover;
    height: 100%;
    width: 100%;
  }


  /* gallery cluster: all items same height variable widths */
  .gallery-cluster {
    --row-height: 10rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .gallery-cluster > * {
    height: var(--row-height,10rem);
  }

  .gallery-cluster > * > img {
    height: var(--row-height,10rem);
    object-fit: contain;
    display:block;
    height: 100%;
    width: 100%;
  }



  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* disclosure accordian */
  details > summary {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    padding: 0.5rem 1rem;
    
    color: var(--accent-color); 
    font-weight: bold; 
    cursor: pointer;
  }
  details > summary:is(:hover, :focus-visible) {
    color: var(--button-light-focus-color);
    background-color: var(--button-light-focus-bg);
  }

  /* custom marker */
  details > summary                         { list-style: none; }
  details > summary::-webkit-details-marker { display: none; }
  details > summary::after                  { content: "+"; }
  details[open] > summary::after            { content: "-"; }
  
  details[open] > summary {
    background-color: var(--button-dark-bg);
    color: var(--button-focus-color); 
  }
  details[open] { 
    background-color: var(--accent-light); 
  }

  details > summary:is(:hover, :focus-visible) {
    color: var(--button-light-focus-color);
    background-color: var(--button-light-focus-bg);
  }

  /* content spacing */
  details > p {
    margin-inline: 1rem;
  }
  details > * + p {
    margin-block: 0.5rem;
  }





  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* highlight active/current term in sidebar  */
  /* make sure we dont' highlight when aria-current is on main site nav */
  a.active, a[aria-current]:not(:is(#secondary-navigation *, #primary-navigation *)) {
    background-color: var(--button-focus-bg);
    color: var(--button-focus-color);
  }




  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* dialog lightbox */





  :has( > .show-lightbox) {
    position: relative;
  }

  .lightbox,
  .chart-lightbox,
  .video-lightbox {
    padding:0;
    border:0;
    margin:auto;
  }

  dialog::backdrop{
    background-color: var(--text-bg);
    /* opacity: 0.9; */
  }

  .show-lightbox,
  .close-lightbox{
    position: absolute;
    top: calc(2 * var(--hr-width));
    right: calc(2 * var(--hr-width));
    /* right:0; */
    border-color: transparent;
    line-height: 0;
    padding: 0.5em;
    font-size: 0.8rem;
  }  

  /* hide buttons when not needed */
  .show-lightbox, .close-lightbox {
    display: none;
  }
  
  @media (min-width: 50rem){
    :not(.lightbox) .show-lightbox {
      display: block;
    }
  }
  .lightbox .show-lightbox {
    display: none;
  }

  .lightbox .close-lightbox {
    display: block;
  }

  .lightbox .report-chart,
  .lightbox .report-cover {
    position: relative;
    display:flex;
    flex-direction:column;
    height: 90vh;
    margin:0;
  }
  .lightbox img,
  .lightbox video {
    object-fit: contain;
    flex: 1;
    overflow: hidden;
    /* declare a minimum height for when alt table is taller than window */
    min-height: 10rem;
  }

  /* hide title outside dialog */
  .report-cover h2 {
    display: none;
  }
  /* show title in dialog */
  .lightbox h2 {
    display: block;
  }
  /* make room for close button */
  .lightbox h2,
  .lightbox .title span {
    width: calc(100% - 2.5rem);
  }


  




  
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* navigation menus */









  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* search filter */

  .search-filter {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    font-size: 0.8rem;
    /* margin-top: 1rem; */
  }

  .search-filter > * {
    flex: 0 1 fit-content;
  }

  .search-filter > *,
  .search-filter :is(input,select,button) {
    min-width: 0px;
    width: 100%;
  }

  .search-filter label {
    /* font-weight: bold; */
    font-size: 0.8em;
  }

  .search-filter :is(select,button) {
    padding: 0.5em 1em;
    line-height: normal;
  }


  /* highlight search filters that aren't default (ie the user has selected something) */
  .search-filter div:has( option[selected])  {
    /* background-color: var(--accent-light); */
  }
  .search-filter div:has( option[selected]) label {
    font-weight: bold;
  }
  .search-filter select:has(option[selected]) {
    border-color: var(--accent-color);
    /* background-color: var(--accent-light); */
    font-weight: bold;
    /* color: var(--text-color); */
  }






  /* reset button */
  .search-filter-reset-button {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    padding: 0.5em 1em;
    border: var(--hr-width) solid var(--button-bg);
    border-radius: 0.25rem;
    background-color: var(--button-bg);
    color: var(--button-color);
  }
  .search-filter-reset-button:is(:hover, :focus-visible) {
    border: var(--hr-width) solid var(--button-focus-bg);
    background-color: var(--button-focus-bg);
    color: var(--button-focus-color);
  }
  .search-filter-reset-button:active {
    border: var(--hr-width) solid var(--button-active-bg);
    background-color: var(--button-active-bg);
    color: var(--button-active-color);
  }
  .search-filter-reset-button::after {
    font: normal normal normal 1.5em/1 'FAO';
    flex-shrink: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    content: "\ea20";
  }



  /* when wide enough, allow filters to be horizontal */
  @media (min-width: 50rem) {
    .search-filter {
      flex-direction: row;
    }
    
  }

  /* on touch device, maintain minimum size */
  @media (pointer: coarse) {
    .search-filter :is(input,select,button) {
      min-width: 44px;
      min-height: 44px;
    }
  }





  /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  /* list items */

  .post-list, .item-list {
    display: grid;
    gap: 1rem;
  }

  .list-item {
    --featured-image-size: min(10rem,30vw);
    display: grid;
    gap: 1rem;
    grid-template-columns: var(--featured-image-size,10rem) 1fr;
    /* grid-template-rows: auto auto auto 1fr; */
    /* grid-template-areas: 
    "featuredimage itemtype"
    "featuredimage itemtitle"
    "featuredimage itemdate"
    "featuredimage itemexcerpt"; */
    align-items: start;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: var(--accent-light);
  }
  .list-item > div > * + * {
    margin-top: 0.5rem;
  }
  /* specific styling for list-item types */
  /* .list-item-communication{
    grid-template-columns: 8rem 1fr;
  } */
  /* .list-item > * {
    grid-column: 2;
  } */
  /* .item-image   { grid-area: featuredimage; }
  .item-type    { grid-area: itemtype; }
  .item-title   { grid-area: itemtitle; }
  .item-date    { grid-area: itemdate; }
  .item-excerpt { grid-area: itemexcerpt; } */


  .item-image a {
    display: block;
    border-radius: 0.5rem;
    border: 1px solid var(--text-gray);
    overflow: hidden;
    /* min-height: 7.5rem; */
    max-height: 13rem;
    height:100%;
    /* aspect-ratio: 1; */
  }
  .item-image img {
    background-color: white;
    object-fit: cover;
    min-height:100%;
    /* border-radius: 0.5rem; */
  }
  .item-image a:is(:hover, :focus-visible){
    text-decoration: none;
  }

  /* if item-image is empty/missing show appropriate icon placeholder */
  .item-image a:empty {
    display: grid;
    place-content: center;
    /* height: 100%; */
    /* aspect-ratio: 8.5/11; */
    /* aspect-ratio: 1; */
    min-height: var(--featured-image-size);
    background-color: var(--text-bg);
  }
  .item-image a:empty::before {
    /* give explicit color to the icon */
    color: var(--link-icon-color);
    font: normal normal normal 1em/1 'FAO';
    display: block;
    flex-shrink: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\ea1c";
    font-size: 3rem;    
  }
  :is(.list-item-report,          .list-item-rapport)                .item-image a:empty::before { content: "\ea1c"; }
  :is(.list-item-media-advisory,  .list-item-avis-aux-medias)        .item-image a:empty::before { content: "\ea13"; }
  :is(.list-item-media-release,   .list-item-communiques-de-presse)  .item-image a:empty::before { content: "\ea14"; }
  :is(.list-item-media-statement, .list-item-declaration-aux-medias) .item-image a:empty::before { content: "\ea15"; }
  :is(.list-item-newsletter) .item-image a:empty::before {content: "\ea19";}

  .item-type { 
    font-size: 0.8rem; 
    text-transform: uppercase;
    border-left: 0.5rem solid var(--accent-color);
    padding-left: 0.5rem;
    color: var(--text-gray);
  }
  .item-title {
    font-weight: bold;
  }
  .item-date { 
    font-size: 0.8rem;
  }
  /* force de-capitalization for French */
  html[lang^="fr" i] .item-date { 
    text-transform: lowercase;
  }

  /* specific list-item types */

  .list-item-report .item-image { aspect-ratio: 8.5/11; }
  .list-item-attachment .item-image { aspect-ratio: 1; }
  .list-item-newsletter .item-image { aspect-ratio: 4/3; }
  .list-item-presentation .item-image { aspect-ratio: 4/3; }
  .list-item-video .item-image { aspect-ratio: unset; }


  /* .list-item-video */
  .item-image:has(video) {
    /* display: block; */
    /* border-radius: 0.5rem; */
    /* border: 1px solid var(--text-gray); */
    /* overflow: hidden; */
    /* min-height: 7.5rem; */
    /* max-height: 13rem; */
    /* height: 100%; */
  }
  .item-image video {
    /* background-color: white; */
    /* object-fit: cover; */
    min-height: 100%;
    /* border-radius: 0.5rem; */
  }

  /* hide excerpt unless window is wide enough */
  .item-excerpt {
    display: none;
  }
  @media (min-width: 50rem) {
    .item-excerpt {
      display: block;
    }
  }







  /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  /* pagination */
  .page-numbers {
    /* display: grid; */
    /* grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr)); */
    display:flex;
    gap: 1rem;
    justify-content: center;
    list-style-type: none;
    padding: 0;
    margin-block: 1rem;
  }




}