/* layer specific styles override general components/layouts */
/* body element should have classes that match the query request 
   eg: /en/about/our-team should give the body the classes "en about our-team" */
@layer page-specific {  
  
   /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* fao-on.org/news */
  /* 13 Jan 2025: moved to temp.css */
  /* inelegant solution since going forward we won't have post-entry wrap */
  /* .post-entry { margin-top: 1rem; }  */
  /* .post-entry > *  {
    margin-block-start: 1rem;
  } */
  

  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* fao-on.org/about/our-team */
  /* fao-on.org/about/faqs */

  /* remove margine between disclosures */
  body:is(.faqs, .our-team, .our-team) :is(details, .our-team-meet-the-officer) + :is(details, .our-team-meet-the-officer) {
    margin-block: 0;
    border-top: var(--hr-width) solid var(--accent-color);
  }

  body.our-team details summary,
  body.our-team .our-team-meet-the-officer {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
  }

  /* un-bold title */
  body.our-team details summary span:nth-of-type(2) {
    font-weight: normal;
  }

  /* non-standard active state */
  body.faqs details[open] summary:not(:hover,:focus-visible) ,
  body.our-team details[open] summary:not(:hover,:focus-visible) {
    background-color: var(--accent-light);
    color: var(--text-light-color);
  }

  /* style link like disclosure */
  body.our-team .our-team-meet-the-officer {
    color: var(--accent-color); 
    padding: 0.5rem 1rem;
    font-weight: bold; 
  }
  body.our-team .our-team-meet-the-officer:is(:hover,:focus-visible) {
    background-color: var(--button-light-focus-bg);
    color: var(--button-light-focus-color); 
    text-decoration: none;
  }

  


  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* fao-on.org/about/meet-the-officer */
  body.meet-the-officer .officer-image {
    float: left;
    border-radius: 0.5rem;
    width: clamp(2rem, 50%, 15rem);
    margin: 1rem;
    margin-left: 0;
    object-fit: cover;
    object-position: top;
    aspect-ratio: 8.5/11;
  }

  


  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* fao-on.org/about */
  body.about .box {
    border-style: dashed;
  }



  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* fao-on.org/about/careers */
  body.careers .careers-list {
    list-style: none;
  }

  body.careers .careers-list li + li {
    margin-top: 1em;
  }



  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* fao-on.org/reports */
  .disclosure {

  }


  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* fao-on.org/ (home.php) */
  .homepage {
    display: block;
  }

  .homepage__text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    margin-block: 2rem;
    /* padding-bottom: 2rem; */
    /* border-bottom: var(--hr-width) solid var(--accent-color); */
  }
  .homepage__text :is(h1){ 
    color: var(--accent-color);
    font-weight: bold;
    line-height: 1.1;
    font-size: clamp(2.5rem, 2.1455rem + 1.4545vw, 3.3rem);
    max-width: 60rem;
    margin-inline: auto;
  }
  .homepage__text :is(p){ 
    margin-inline: auto;
    max-width: 58ch;
    font-size: clamp(0.9rem, 0.8557rem + 0.1818vw, 1rem);
  }
  .homepage__text .meet-the-fao { 
    display: flex;
    color: var(--accent-color);
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
     font-weight: bold;
    text-decoration: none;
  }
  .meet-the-fao a {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    font-size: clamp(0.9rem, 0.8557rem + 0.1818vw, 1rem);
    border: none;
  }
  .homepage__text i { 
    font-size: 1.5rem;
  }


  /*latest reports */
  .homepage__report-display{
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
    margin-block: 2rem;
    /* padding-block: 2rem; */
    /* border-top: var(--hr-width) solid var(--accent-color); */
  }

  .homepage__report-images { 
    /* sidebar divider */
    padding-left: 2rem;
    border-left: var(--hr-width) solid var(--accent-color);
   }
  
  .homepage__report-images p { 
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    /* margin-bottom: 1em; */
    padding-block: 0.5rem;
  }


  .homepage__report-images ol {
    list-style: none;
    display: flex;
    gap: 1rem;
    max-width: 100%;
    overflow-x: auto;
  }

  .homepage__report-images ol li{
    flex: 0 1 270px;
    min-width: 130px;
    /* compensate */
    padding: calc(var(--hr-width, 1px) * 2);
    /* overflow: clip; */
  }



  .homepage__report-images a {
    display: grid;
    align-items: center;
    justify-content: center;
    aspect-ratio: 8.5/11;

    border-radius: 0.5rem; 
    overflow: clip; 
    border: var(--hr-width, 1px) solid var(--text-gray);
  }
  .homepage__report-images 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;
  }

  .homepage__report-images li{
    /* necesary for scaling the inner text */
    container-type: inline-size;
  }

  .homepage__report-images a:not(:has(img)) {
    /* scale the text to the item size */
    font-size: clamp(1rem,3cqw,3rem);
    background-color: var(--accent-light);
    color: var(--text-color);
    line-height: 1;
    overflow: hidden;
    padding: 1em;
  }
  .homepage__report-images a:not(:has(img)):is(:hover,:focus-visible) {
    /* border-color: red; */
    text-decoration: none;
    background-color: var(--accent-color);
    color: var(--text-dark-color);
  }

  .homepage__report-images a img {
    object-fit: cover;
    height:100%;
    width:100%;
  }


  /* homepage sidebar */

  .homepage__report-sidebar {
    display: flex; 
    flex-direction: column; 
    /* gap: 1rem; */
  }
  .homepage__report-sidebar p { 
    font-family: 'Open Sans', sans-serif; 
    font-weight: bold; 
    text-transform: uppercase; 
    /* margin-bottom: 1em; */
    padding: 0.5rem;
  }
  .homepage__report-sidebar > details { 
    /* border-bottom: 2px solid var(--accent-color); */
  }
  .homepage__report-sidebar > details > summary{
    /* display: grid;
    grid-template-columns: 1fr auto; */
    /* list-style: none; */
    /* max-width: 250px; */
    /* display: flex; */
    /* justify-content: space-between; */
    /* margin: 0 10px 1rem 1rem; */
    /* padding: 0.5rem 1rem; */

    /* color: var(--accent-color);  */
    /* font-weight: bold;  */
    /* cursor: pointer; */
  }
  .homepage__report-sidebar > details > summary:is(:hover, :focus-visible) {
    /* color: var(--button-light-focus-color); */
    /* background-color: var(--button-light-focus-bg); */
  }
  .homepage__report-sidebar > details > summary::-webkit-details-marker {
    /* display: none;  */
  }

  .homepage__report-sidebar > details > summary::after { 
    /* content: "+"; */
  }


  /* open details styling */
  .homepage__report-sidebar > details[open] > summary::after { 
    /* content: "-";  */
  }
  .homepage__report-sidebar > details[open] > summary {
    /* background-color: var(--button-dark-bg); */
    /* color: var(--button-focus-color);  */
    /* font-weight: bold;  */
    /* cursor: pointer;  */
    /* margin-bottom: 0;  */
    /* padding: .5rem 0; */
  }
  .homepage__report-sidebar > details[open] { 
    /* background-color: var(--button-light-focus-bg);  */
    /* color: var(--button-light-focus-color);   */
  }
  .homepage__report-sidebar ul {
    background-color: var(--accent-light);
    list-style: none;
  }
  .homepage__report-sidebar ul li { 
    /* padding: .5rem 1rem;  */
  }
  .homepage__report-sidebar ul li a {
    text-decoration: none; 
    display: flex; 
    align-items: center; 
    font-size: 0.8rem; 
    font-weight: bold; 
    /* margin-left: .5rem;  */
    gap: .5em;
    padding: 0.5rem 1rem;
  }
  /* bold the icon */
  .homepage__report-sidebar ul li a::before{ 
    /* font-weight: bold; */
    font-size: 1.5em;
  }

  /* hover styling */
  .homepage__report-sidebar ul li:hover { 
    background-color: var(--button-bg); 
  }
  .homepage__report-sidebar ul li:hover a { 
    color: var(--text-bg);
  }
  


  /* homepage subscribe */
  .homepage__subscribe {
    /* display: flex; */
    /* flex-direction: column; */
    align-items: center;
    /* margin-inline: auto; */
    display: grid;
    /* grid-template-columns: auto auto; */
    justify-items: center;
    justify-content: center;
    gap: 1rem;
    
    padding: 3rem;
    
    background-color: var(--accent-color);
    color: var(--text-dark-color);
    /* font-weight: bold; */
  }


  .homepage__subscribe h2 { 
    /* font-size: 1.2rem;  */
    font-weight: bold;
    grid-column: 1 / -1;
    /* font-size: large; */
    font-size: 1.75rem;
    /* text-align: center; */
  }
  .homepage__subscribe p {
    /* font-size: clamp(0.9rem, 0.8557rem + 0.1818vw, 1rem);  */
    text-align: center;
    text-wrap: balance;
  }

  .homepage__subscribe a { 
    font-weight: bold;
    font-size: large;
  }

  .homepage__subscribe a:not(:hover, :focus-visible) { 
    background-color: var(--accent-light); 
    color: var(--text-color);
  }
  

  /* media query for width less than 770px */
  @media (max-width: 50rem) {
    .homepage__report-display { 
      padding: 0;
      grid-template-columns: 1fr;
      grid-template-rows:  auto auto ;
      overflow-x: clip;
    }

    .homepage__report-display p { 
      padding-block: 0.5rem;
      padding-left: 1rem;
    }
    
    .homepage__report-images {
      padding: 0;
      margin: 0;
      border-left: none;
      max-width: 100%;
      overflow-x: auto;
    }
    .homepage__report-images ol { 
      overflow-x: auto;
      /* width: calc(100% + 10rem); */
      padding-block: 0.5rem;
      padding-left: 1rem;
    }
    .homepage__report-images ol li { 
      min-width: 14rem;
      /* min-width: 60vw; */
    }
    .homepage__report-images ol li img{ 
      object-fit: cover;
     }

    .homepage__report-sidebar > details > summary { 
      max-width: 100%;
    }
    /* list styling */
    .homepage__report-sidebar ul { 
      /* max-height: 60vh; */
      /* overflow-y: auto; */
    }
    /* hover styling */
    .homepage__report-sidebar ul li:hover { 
      /* background-color: var(--button-bg); */
     }
    .homepage__report-sidebar ul li:hover a { 
      /* color: var(--button-light-focus-color); */
    }


    .homepage__subscribe form { 
      flex-direction: column;
       gap: 1rem;
    }
    .homepage__subscribe input {
      width: 100%;
    }
  }
  


  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* fao-on.org/communications */

  /* add some hover styles to item-image a */
  body.en.communication .item-image a:is(:hover, :focus-visible), body.fr.communication .item-image a:is(:hover, :focus-visible) {
    /* add same outline as report images */
    outline: calc(2* var(--hr-width)) solid var(--accent-color);
    outline-offset: calc(-2* var(--hr-width));
  }

  /* disable the mobile-only media inquiries if we are above 770px */
  /* temporary bug-fix: remove the customize-support class since thats only targeted when logged in */
  body.en.communication main.archive .media-inquiries-mobile, body.fr.communication main.archive .media-inquiries-mobile{
    display: none;
  }

  /* style left nav specifically for this page */

  .media-inquiries {
    /* we have a caption, then one p tag with breaks */
    display: flex;
    flex-direction: column;
    gap: .5rem;
    /* add some margin to the top */
    margin-top: 1rem;
    font-size: 0.8rem;
  }

  aside .media-inquiries {
    /* needs a little extra padding in the sidebar */
    margin-left: 1rem;
  }

  .media-inquiries hr {
    margin-block: 1rem;
  }

  .media-inquiries > p:first-of-type {
    font-weight: bold;
    /* font-size: .8rem; */
  }

  .media-inquiries a:hover, .media-inquiries a:focus-visible {
    /* treat them like a nav link */
    color: var(--link-focus-color);
    text-decoration: underline;
    /* overrite background-color to none */
    background-color: transparent;
  }

  
}