/**
 * L'Incertain-Cohérent
 *
 * @package incertain_coherent
 * @author  Stéphane Cousot
 *
 * Theme Name: L'Incertain-Cohérent Theme
 * Theme URI: 
 * Description:  WordPress theme for the <a href="https://incertain-coherent.net/">L'Incertain-Cohérent</a> project.
 * Version: 0.1
 * Author: ubaa.stef
 * Author URI: http://www.ubaa.net/
 *
 * This theme is licensed under a Creative Commons Attribution License
 * http://creativecommons.org/licenses/by/3.0/
 */



 :root
 {
    --ic-margin-bottom: 40px; 
    --ic-grid-min-size: 60px;
    --ic-grid-cell-padding: 10px;
    --ic-grid-gap: 3px;
 }


/* body.post-type-archive-incertain_coherent header.site,
body.post-type-archive-incertain_coherent footer.site,
body.tax-incertain_coherent_book header.site,
body.tax-incertain_coherent_book footer.site,
body.tax-incertain_coherent_chapter header.site,
body.tax-incertain_coherent_chapter footer.site,
body.single-incertain_coherent header.site,
body.single-incertain_coherent footer.site */
body[class*="incertain_coherent"] header.site
{
    opacity: 0.1;
    filter: blur(1.2px);
}

/* body.post-type-archive-incertain_coherent header.site:hover,
body.post-type-archive-incertain_coherent footer.site:hover,
body.tax-incertain_coherent_book header.site:hover,
body.tax-incertain_coherent_book footer.site:hover,
body.tax-incertain_coherent_chapter header.site:hover,
body.tax-incertain_coherent_chapter footer.site:hover,
body.single-incertain_coherent header.site:hover,
body.single-incertain_coherent footer.site:hover */
body[class*="incertain_coherent"] header.site:hover
{
    opacity: 1.0;
    filter: blur(0) drop-shadow(0px 0px 13px #e3e3e3);
}

header.ic-page a
{
    color: black;
    display: inline-block;
}

header.ic-page .map
{
    display: flex;
}

header.ic-page .map a
{
    width: 24px;
    height: 24px;
    color: transparent;
    margin: 3px;
    border: 1px solid gray;
    border-radius: 3px;
}

header.ic-page .map a:hover
{
    opacity: 1 !important;
}

header.ic-page a.disabled
{
    opacity: 0.2;
}
header.ic-page a.book
{
    font-size: 160%;
}
header.ic-page a.chapter
{
    font-size: 130%;
}

/* header.ic-page .books,
header.ic-page .chapters
{
    display: flex;
    gap: 20px;
} */

header.ic-page .iteration
{
    border: 1px solid rgba(0, 3, 255, 0.3);
    border-radius: 3px;
    /* display: inline-block;
    padding: 3px; */
}


/* home */
body.home h2 {
    margin-bottom: 20px;
}

main.summary h3,
main.summary h4 {
    margin: 0px;
}

main.summary ul.pages {
    margin-top: 3px;
    /* margin-bottom: 17px; */
}

/* main.summary .book ul:last-child {
    margin-bottom: 50px;
} */


main.ic-page nav.crumbs
{
    display: grid;
    grid-template-areas: "tab" "chapter";
    grid-auto-columns: max-content;
    grid-column-gap: 20px;
}

main.ic-page nav.crumbs a.book
{
    grid-area: tab;
}

main.ic-page nav.crumbs .chapters
{
    grid-area: chapter;
    grid-column-start: 1;
    /*grid-column-end: span 20;  20 arbritrary number of colummns / number of books */
    display: flex;
    gap: 20px;
}

main.ic-page nav.crumbs .chapters.disabled
{
    display: none;
}



main.ic-page
{
    position: absolute;
    z-index: 1;
    top: var(--margin);
    left: 0;
    right: 0;
    /* height: calc(100% - 120px); */

    display: flex;
    flex-direction: column;
    row-gap: var(--margin);
    backdrop-filter: blur(2.2px);
    background-color: rgba(245, 245, 245, 0.5);
}

main.ic-page.full
{
    bottom: var(--ic-margin-bottom);
}

main.ic-page article
{
    flex-grow: 1;
    display: grid;
    column-gap: var(--ic-grid-gap);
    row-gap: var(--ic-grid-gap);
    grid-template-columns: var(--ic-grid-min-size) auto var(--ic-grid-min-size);
    grid-template-rows: var(--ic-grid-min-size) auto var(--ic-grid-min-size);
    height: calc(100% - (var(--margin)*4));
    /* background-color: aqua; */
}

main.ic-page article .page
{
    /* margin-top: 30px; */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    /* gap: 20px; */

    /* width: 1200px;
    margin: auto; */
}

/* main.ic-page article .page div.middle
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    align-items: center;
} */

main.ic-page article .page-navigation,
main.ic-page article .page-content-container
{
    padding: var(--ic-grid-cell-padding);
    background-color: rgba(245, 245, 245, 0.8);
    backdrop-filter: blur(7.7px);
    overflow-y: scroll;
    overflow-x: hidden;
}

main.ic-page article .page-content-container
{
    border: 1px solid gray;
    border-radius: 3px;
    padding: calc(var(--ic-grid-cell-padding) * 2);
}

main.ic-page article .page-content-container strong
{
    font-family: "Johnston100 W03 Medium", sans-serif;
}

main.ic-page article .page-content p:first-child,
main.ic-page article .page-navigation p:first-child
{
    margin-top: 0;
}
main.ic-page article .page-content p:last-child,
main.ic-page article .page-navigation p:last-child
{
    margin-bottom: 0;
}

main.ic-page article .page-navigation
{
    border: 1px solid lightgray;
    border-radius: 3px;
    overflow: hidden;
    /* height: calc(var(--ic-grid-min-size) - (var(--ic-grid-cell-padding)*2));
    width: calc(var(--ic-grid-min-size) - (var(--ic-grid-cell-padding)*2));
    place-self: center; */
}

main.ic-page article .page-navigation .related
{
    /* font-family: "Johnston100 W03 Hairline", sans-serif; */
    overflow: hidden;
    height: 100%;
    opacity: 0.2;
}

/* .related
{
    border: 1px solid #e2e2e2;
    overflow: hidden;
    padding: 10px;
    cursor: pointer;
    max-height: 100px;
    max-width: 100px;
}*/

main.ic-page article .page-navigation .related p
{
    /* transform: scale(0.7); */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

main.ic-page article .page-navigation .related:hover
{
    cursor: pointer;
    opacity: 1.0;
}

main.ic-page article .page-navigation .related:hover::after
{
  width: calc(var(--ic-grid-min-size) - (var(--ic-grid-cell-padding)*1.5));
  height: calc(var(--ic-grid-min-size) - (var(--ic-grid-cell-padding)*1.5));
  display: flex;
  font-size: 36px;
  font-family: monospace;
  border-radius: 60px;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(1.2px);
  background-color: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0px 0px 7px lightgray);
}

main.ic-page article .page-navigation-top .related:hover::after
{
  content: "‹";
  transform: translate(-50%, -50%) rotate(90deg);
}

main.ic-page article .page-navigation-left .related:hover::after
{
  content: "‹";
}

main.ic-page article .page-navigation-right .related:hover::after
{
  content: "›";
}

main.ic-page article .page-navigation-bottom .related:hover::after
{
  content: "›";
  transform: translate(-50%, -50%) rotate(90deg);
}



/* 
    --------------------------------------------------------------------------------------------------------------------
    FRESQUE
    --------------------------------------------------------------------------------------------------------------------
*/

#fresque
{
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 200px;
    bottom: var(--ic-margin-bottom);
}

#fresque svg text
{
    /* https://www.onlinewebfonts.com/fonts/johnston100 */
    font-family: "Johnston100 W03 Hairline", sans-serif;
    font-family: "Johnston100 W03 Medium", sans-serif;
    font-family: "Johnston100 W03 Regular", sans-serif;
    font-family: "Johnston100 W03 Light", sans-serif;
    font-size: 75px;
    font-weight: normal;
    fill: black;
}

#fresque svg #titles text
{
    font-family: monospace;
    font-size: 1em;
    fill: lightgrey;
}

#fresque svg rect
{
    stroke-width: 0.1px;
}

/* #fresque svg {
    background-color: chocolate;
} */