/* ************************************************************************** */
/*                *********************************************************** */
/* CIPI template  *********************************************************** */
/*                *********************************************************** */
/* ************************************************************************** */

/* All these styles rely on the whole of the report being inside a div with 
* class "cipi". This allows us to rely on reuse styles and only modify as 
* needed for this report.  
*/

/* The containing div should not affect the expected sizing */
div.cipi {
margin: 0;
padding: 0;
}


/* lists ************************************* */
/* The spacing between the li bullet and the li text is 12px, the spacing 
* between the li bullet and the edge to the left is 6px, this extra 6px margin 
* centers the bullet visually. 
*/
div.cipi ul,ol { margin-left: 6px; }
/* Only needed for top-level lists (inner lists should remain shifted left) */
div.cipi :is(ul,ol,table) ul,ol { margin-left: 0; }
div.cipi li { margin-top: 10px; }


/* headings ********************************** */
div.cipi :is(h1,h3,h5) { color: rgb(15,96,213); } /* --fao-blue-rgb */
div.cipi :is(h4,h6)    { color: black; }

/* Graphical section headings */
div.cipi h2 {
background-position: center;
border-bottom: 5px solid rgb(15,96,213); /* --fao-blue-rgb */
color: black;
margin: 80px 0 24px 0;
}

/* This creates a black-to-transparent gradient scaled to the height of the 
* element  */
div.cipi h2 > span {
background-image: linear-gradient(to top,rgba(0,0,0,0.5),transparent); 
min-height: 200px;
display: grid;
}

div.cipi h2 > span > span {
display: block;
align-self: end;
padding: 0 0 10px 10px;
text-shadow: 0px 0px 4px black;
}

div.cipi h2.no-bg-image > span {
background-image: none;
}
div.cipi h2.no-bg-image > span >span {
text-shadow: none;
}



/* links ************************************* */
div.cipi a {
color: rgb(15,96,213); /* --fao-blue-rgb */
text-decoration: none;
}
div.cipi a:hover, div.cipi a:focus-visible {
color: rgb(15,96,213); /* --fao-blue-rgb */
text-decoration: underline;
}






/* Highlighted-sections ********************** */

/* highlighted sections are inset slightly, have a shaded background, different 
* text colors, and headings / paragraph spacing is tighter. */
div.cipi .highlighted-section {
background-color: rgb(240,240,240); /* default highlight color */
padding: 20px; /* equal padding looks better on web */
margin: 24px 0;
}

div.cipi .highlighted-section.bg-light-blue { background-color: rgb(241,246,253); /* --fao-light-blue-4-rgb */ color: black; }
div.cipi .highlighted-section.bg-dark-blue  { background-color: rgb( 26, 43, 74); /* --fao-dark-blue-rgb */    color: white; }

/* highlighted section headings */
div.cipi .highlighted-section :is(h1,h2,h3,h4,h5,h6) {
margin-bottom: 5px; /* tighter spacing than default */
}
div.cipi .highlighted-section.bg-dark-blue :is(h1,h2,h3,h4,h5,h6,a,a:hover) {
color: rgb(147,187,247);
}
/* this is different from the rest */
div.cipi .highlighted-section h4 { 
color: black; 
margin-bottom: 15px; 
}





/* tables and charts ************************* */

div.cipi div.report-chart {
background-color: rgb(241,246,253); 
padding: 10px 20px; /* padding to inset chart*/
}

/* caption styles */
div.cipi :is(div.report-chart,table.report-table) .title {
  padding: 0;
  margin: 0;
  border: none; /* remove default chart border */
}

div.cipi :is(div.report-chart,table.report-table) :is(.source,.note){
font-weight:bold;  
}

div.cipi :is(div.report-chart,table.report-table) .source {
border:none; /* remove default chart border */
padding-bottom: 10px;
}

/* alternate row colors */
div.cipi table.report-table tr:nth-child(odd) {
  background-color: rgb(215,228,250); /* --fao-light-blue-3-rgb */
}






/* inside the title, treat the span'd text differently */
div.cipi :is(.report-chart,.report-table) .title span {
display: block; /*forces the rest of the text in p.title to the next line */
color: rgb(15,96,213); /* --fao-blue-rgb */
font-size: 14px;
}



/* float ************************************* */
/* I don't think this is used anywhere, as it is just as easy to set an inline 
* style as calling a class. */
.float-right{
float:right;
width:50%;
}





/* images ************************************ */

img.full-page, img.half-page{
object-fit: cover;
border: 12px solid rgb(241,246,253); /* --fao-light-blue-4-rgb */
margin-bottom: 24px;
width: 100%;
box-sizing: border-box;  
}

img.full-page{ aspect-ratio: 2; }

img.half-page{ aspect-ratio: 3; }



/* formula images ************************************** */
img.formula {
margin: 24px auto;
display: block;
/*width: 100%; /* width:100% will enlarge smaller images*/
max-width: 100%;
object-fit: scale-down;
}
sub,sup { font-size: 0.75em; }


/* references ****************************************** */

.references {
list-style: none; /*remove bullets*/
padding: 0; /*rensure the list is flush with left*/
}
.references li {
padding-left: 6ch; /* pushes all text to the right*/
text-indent: -6ch; /* pulls back the first line only*/
margin-top: 20px;
}


/* table of contents ****************************************** */
ul.table-of-contents,
ul.table-of-contents ul{
list-style: none;
padding: 0;
}

ul.table-of-contents > li{
margin-top: 15px;
font-size: 18px;
}

ul.table-of-contents ul li{
margin-top: 0.5em;
font-size: 12px;
line-height: normal;
}


/* CIPI BACKGROUNDER TIMELINE FIGURE ********************************** */
/* Only used on CIPI Backgrounder */
.cipi .timeline {
float:right;
width:25%;
margin-left:12px;
font-size: 12px;
line-height:normal;
font-weight: bold;
}
/* title */
.cipi .timeline > span {
display: block;
font-size: 20px;
color: rgb(15, 96,213);
border-top: 2px solid currentcolor;
}

/* all lists */
.cipi .timeline ul {
list-style: none;
list-style-position: inside;
margin:0;
padding:0;
}

/* all list items */
.cipi .timeline ul li {
margin:0;
padding:0;
}

/* dates */
.cipi .timeline > ul > li {
position: relative;
}
.cipi .timeline > ul > li::before {
position: absolute;
content:'';
top: 0.75em;
left: 0;
right: 5.5ch;
bottom: -12px;
border: 0px solid gray;
border-width: 1px 0 0 1px;
}
.cipi .timeline > ul > li::after {
position: absolute;
content:'';
height:10px;
width:10px;
border-radius:50%;
top: 5px;
left: -4px;
background-color:gray;
}
.cipi .timeline > ul > li > span {
display: inline-block;
float: right;
color: gray;
border: 1px solid gray;
padding: 0 0.5ch;
line-height: 1.5;
}

/* reports */
.cipi .timeline > ul > li > ul > li {
list-style: none;
text-align: left;
display: block;
box-sizing: content-box;
min-height: 75px;
padding: 2em 0 0 12px;
font-size: 11px;
}
.cipi .timeline > ul > li > ul > li + li {
margin-top: 12px;
padding-top: 0;
}
/* report covers */
.cipi .timeline > ul > li > ul > li > img {
vertical-align: top;
margin-right: 6px;
height: 70px !important;
border: 1px solid #555;
float: left;
}




/* CIPI BUILDINGS ********************************** */
/* Only used in CIPI Buildings */

/* These flex classes are designed to allow for two divs to be shown 
* side-by-side unless the browser window is narrow enough that either of the 
* divs would be too small. In that case, the two divs are place above-below
* and expand to fill the full width. 
*/

.flex-50-50, 
.flex-35-65,
.flex-65-35,
.flex-75-25 { display: flex; flex-wrap: wrap; gap:12px; margin:24px 0; }

.flex-50-50 > *, 
.flex-35-65 > *,
.flex-65-35 > *,
.flex-75-25 > * { flex-grow:1; flex-shrink:1; }

.flex-50-50 > * > *:first-child, 
.flex-35-65 > * > *:first-child,
.flex-65-35 > * > *:first-child,
.flex-75-25 > * > *:first-child { margin-top:0;  }

.flex-50-50 img, 
.flex-35-65 img,
.flex-65-35 img,
.flex-75-25 img { display:block; margin:0 auto; }

.flex-50-50 > * {
min-width:300px; /* minimum width per column */
width: calc(50% - 6px); /*column width minus half gap*/
}

.flex-35-65 > *:nth-child(1),
.flex-65-35 > *:nth-child(2){
min-width:200px; /* minimum width per column */
width: calc(35% - 6px); /* desired column widths */
}

.flex-35-65 > *:nth-child(2),
.flex-65-35 > *:nth-child(1){
min-width:300px; /* minimum width per column */
width: calc(65% - 6px); /* desired column widths */
}

.flex-25-75 > *:nth-child(1),
.flex-75-25 > *:nth-child(2){
min-width:150px; /* minimum width per column */
width: calc(25% - 6px); /* desired column widths */
}

.flex-25-75 > *:nth-child(2),
.flex-75-25 > *:nth-child(1){
min-width:300px; /* minimum width per column */
width: calc(75% - 6px); /* desired column widths */
}






/* CIPI PORTAL ******************************* */

/* ABOUT */
.cipi details {
border-radius: 4px;
margin: 0 0 24px 0;
/* box-shadow: 0 0 3px 0 black; */
padding: 12px;
}
.cipi summary { 
font-size: 24px;
font-weight: bold;
}
.cipi summary:hover { cursor: pointer; }

.cipi details hr {
border-top: 2px solid rgb( 15, 96,213);
margin: 12px 0;
}
.cipi details[open] {
padding-bottom:6px;
}


/* REPORT GRID */
div.cipi ul.portal-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr; /*keep all rows the same height*/
align-items: start; /*elements don't stretch to fill row height*/
margin: 24px auto;
gap: 48px 24px;
max-width: 1000px;
list-style: none;
padding:0;
}

@media only screen and (max-width: 768px) {
div.cipi ul.portal-grid {
  grid-template-columns: repeat(2, 1fr);
}
}

@media only screen and (max-width: 550px) {
div.cipi ul.portal-grid {
  grid-template-columns: repeat(1, 1fr);
}
}

div.cipi ul.portal-grid img,
div.cipi ul.portal-grid .placeholder{
display: block;
box-sizing: border-box;
width: 100% !important;
aspect-ratio: 140 / 180; /*calculates height based on width*/
object-fit: cover;
border: 1px solid #ddd;
margin-bottom: 12px;
}

div.cipi ul.portal-grid .placeholder{
display:flex;
justify-content: center;
align-items: center;
text-align:center;
font-size: 1.25em;
line-height:normal;
background: #f4f4f4;
color: #ccc;
}

div.cipi ul.portal-grid img:hover,
div.cipi ul.portal-grid img:focus-visible{
border-color: #0f60d5;
}

/* select link that is a direct child of li that is direct child of ul.report-grid */
div.cipi ul.portal-grid > li > a {
font-size: 1.3em;
line-height: normal; 
}

div.cipi ul.portal-grid ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}

div.cipi ul.portal-grid li {
/* tighten up the spacing for each reports link list */
margin-top: 0;
}

/* end CIPI template  ******************************************************* */