/* cursor reference
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
*/

@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Poppins:ital,wght@0,400;0,700;1,700&family=Sour+Gummy&display=swap');

:root {
    --page-inner-margin: 20px;
    --white: #ffffff;
    --heading-color: #0B0096;
    --accent-color-1: #F30083;
    /*pink*/
    --accent-color-2: #F97600;
    /*orange*/
    --accent-color-3: #009ffa;
    /*blue*/
    --stroke-style: 3px solid #1502A0;
}

* {
    box-sizing: border-box;
    margin: 0px;
}

html {
    scroll-behavior: smooth;
    /*cursor: url('path-to-image.png'), grab;	*/
}

a{
    color:var(--heading-color);
    font-weight:bold;
    text-underline-offset:4px;
}

body {
    font-family: sans-serif;
    font-size: 1rem;
    font-size: 1.3rem;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-behaviour: smooth;
}

main {
    width: 100svw;
    min-height: 100svh;
    background-color: white;
    background: url("/mal-di-schiena/assets/fine-speckled-paper.webp");
    background-repeat: repeat-x repeat-y;
}

.landing {
    position: relative;
    width: 80%;
    max-width: 600px;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    margin: auto;
}

.big-button {
    background: white;
    background: #fffcf5;
    border: var(--stroke-style);
    color: var(--heading-color);
    border-radius: 7px;
    padding: 13px 25px;
    font-size: 28px;
    font-family: "Sour Gummy", sans-serif;
    text-transform: uppercase;
    margin: 0px auto auto auto;
    text-decoration: none;
}

.big-button:hover {
    background-color: #00C6FA;
    background-color: var(--accent-color-2);
    color: black;
}

#entry-title {
    padding-top: 4vh;
    margin-bottom:10px;
}


#skip-intro {
    font-family: "Sour Gummy";
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--heading-color);
    font-size: 1.4rem;
    margin-bottom: 10vh;
}

.left-align-inline-button {
    background: white;
    border: var(--stroke-style);
    border-radius: 7px;
    padding: 10px 20px;
    font-size: 20px;
    letter-spacing: 1px;
    font-family: "Sour Gummy", sans-serif;
    text-transform: uppercase;
    display: inline-block;
    margin: 0px 10px 0px 0px;
    text-decoration: none;
    color: var(--heading-color);
}

.left-align-inline-button:hover {
    background: var(--accent-color-2);
}

img {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: auto;
}

img#entry-title{
    max-width:350px;
}

figure {
    position: relative;
    margin: 0px;
    padding: 2.5vw 0px;
    /*margin-bottom: 0px !important;*/
}

figure img {
    display: block;
    width: 100%;
    position: relative;
    z-index: 0;
    margin-bottom: 10px !important;
}

.block-single-col figure img {
    max-width: 750px;
}

.three-column figure img {
    max-width: 200px;
}

/*
.figure-row {
    display: flex;
    gap: 2vw;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    max-width: 1000px;
    margin: 5vh auto;
    box-sizing: border-box;
    border: 3px solid #1502A0;
    background-color: white;
    margin: 0;
    padding: 2vw;
}*/


figure.full {
    /*max-width:200px;*/
    width: 100%;
    border: 3px solid #1502A0;
    box-sizing: border-box;
    margin: auto;
    text-align: center;
    background-color: white;
}

figure.half {
    /*
    width: calc(50% - 1vw);
    position: relative;
    margin-bottom: 0 !important;*/
    /* Overwrite internal block spacing */
    width: 50%; 
    max-width: 300px; 
    border: 3px solid #1502A0;
    background-color:white;
    padding: 10px;
}

figure.quarter {
    max-width: 25%;
}

figure.floatright {
    float: right;
    margin-left: 20px;
}

figure.floatleft {
    float: left;
    margin-right: 20px;
}

figcaption {
    position: absolute;
    bottom: 10px;
    z-index: 10;
    font-size: 12px;
    color: black;
    font-style: italic;
    text-decoration: none;
    font-weight: bold;
}

.half figcaption {
    bottom: 0px;
}

figcaption.floatleft {
    left: 1em;
}

figcaption.floatright {
    right: 1em;
}


#footer-logo {
    /*width:200px;
    height:160px;*/
    width: 200px;
    height: 140%;
    margin: auto;

    position: absolute;
    bottom: 2vh;
    /* Aligns at the bottom */
    left: 0;
    right: 0;
    /* Aligns horizontal center */
    margin-bottom: 0px;
    border: var(--stroke-style);
    /* Add box shadow here equivalent to footer */
}

.footer-center {
    width: 100%;
    height: 100%;
    position: relative;
}

.nav-icon {
    /*width:40px;*/
    /* Useful for line-style arrows */
    width: 18px;
    /* Useful for block-style arrows */
}

.chapter-title .nav-icon {
    display: block;
    margin-top: 10vh;
    /*var(--page-inner-margin);  */
    width: 80px;
    opacity: 0.8;
}

.chapter-title img {
    width: 80%;
    max-width: 480px;
    animation: grow 0.6s ease-out;
    -webkit-animation: grow 0.6s ease-out;
    -moz-animation: grow 0.6s ease-out;
    -o-animation: grow 0.6s ease-out;
    -ms-animation: grow 0.6s ease-out;
}


.cover {
    min-height: calc(100svh - 70px);
    display: flex;
    align-content: center;
    align-items: center;
    overflow: hidden;
    flex-direction: row;

}

/*
.cover.chapter-intro{
    background-color:white;
}*/

.inner-page {
    width: 100%;
    max-width: 1000px;
    flex-direction: column;
    margin: 5vh auto;
    padding: 40px;
    overflow: hidden;
    transition: opacity 2;
    padding-bottom: 110px;
}

/* Applies to .inner-page followed by another .inner-page */
.inner-page:has(+ .inner-page) {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Applies to .inner-page preceded by another .inner-page */
.inner-page + .inner-page {
    margin-top: 0;
    padding-top: 0;
}





.chapter-title {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    align-content: center;
}

.block-single-col {
    width: 100%;
}

.block-three-col {
    display: flex;
    flex-direction: column;
    column-gap: 2em;
}

.block-flex {
    width: 100%;
    display: flex;
    flex-direction: row;
    column-gap: 2em;
}

.block-flex-img-col {}

.block-centered {
    text-align: center;
    pointer-events: auto;
}


.three-column {
    width: 100%;
}


.block-flow-col {
    width: 100%;
    /* Ensures it takes full available width within its parent */
    box-sizing: border-box;
    /* Include padding/border in width calculation */

    /* Default for mobile: Single column */
    column-count: 1;
    column-gap: 2em;
    /* Gap between columns, even if only one */

    /* Optional: Add a column rule (vertical line between columns) */
    /* column-rule: 1px solid #ccc; */

    /* Optional: Control how content breaks within columns */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        /* Headings within this block should span all columns */
        column-span: all;
        /* Add margin-bottom here to ensure space after spanning headings */
        margin-bottom: var(--page-inner-margin);
    }

    p {
        /* Avoid breaking paragraphs across column boundaries */
        break-inside: avoid;
    }

    figure {
        /* Avoid breaking figures across column boundaries */
        break-inside: avoid;
        column-span: all;
        /* Make figures span all columns, if desired */
    }
}






.fadein {
    transition-delay: 600ms;
    transition: opacity 1s;
}



.block *:not(:last-child) {
    /*margin-top:0px;*/
    margin-bottom: var(--page-inner-margin);
}


.block {
    margin-bottom: 30px;
}


.f1,
.f2,
.f3 {
    font-weight: 750;
    letter-spacing: 0.8px;
}

.f1 {
    color: var(--accent-color-1);
}

.f2 {
    color: var(--accent-color-2);
}

.f3 {
    color: var(--accent-color-3);
}


.f1 a:hover {
    color: #E30066;
}

.f2 a:hover {
    color: #F94700;
}

.f3 a:hover {
    color: #007AFA;
}

a {
    cursor: pointer;
}


/* Navigation Elements - See also footer-style.css*/

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;

    transition: color 0.2s ease-in-out;
    cursor: pointer;
}

.nav-text {
    font-size: 0.75rem;
    line-height: 1rem;
}

.nav-icon {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.nav-icon:hover {
    transform: scale(1.4);
    transition: transform 0.2s ease-in-out;
}











/* * * * * * 

Text element styling

*/

h1,
h2,
.toc {
    font-family: "Poppins";
    font-weight: bold;
    text-transform: uppercase;
    color: var(--heading-color);
    line-height: 1.15em;
    margin-top: var(--page-inner-margin);
}

.toc {
    margin: auto;
    text-align: center;
    font-size: 1.5rem;
    list-style-type: none;
}

.toc a {
    text-decoration: none;
    color: inherit;
}

h1.landing {}

p {
    font-family: "Afacad Flux";
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.1em;
}

/* This initial setting is necessary in order for the text to animate upon being scrolled into view. */
.text-entry-anim p {
    opacity: 0;
}

.citation::before {
    /*content: " ";*/
}

/* Should be similar to .figcaption */
.citation {
    color: black;
    font-style: italic;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
}


.chapter-title .chapter-icon {
    opacity: 0;
    margin-top: 20px;
    animation: appear 0.2s 0.5s forwards, bounce 0.8s 1s forwards;
    animation-iteration-count: 1;
}

.chapter-title .chapter-icon:hover {
    animation: appear 0.2s 0.5s forwards, bounce 0.8s 1s forwards;
    /* Re-apply animations on hover */
}

/* Chapter icons (not within .chapter-title) animate only on hover */
.chapter-icon:not(.chapter-title .chapter-icon):hover {
    opacity: 1;
    /* Ensure visibility on hover */
    animation: bounce 0.8s ease-in-out forwards;
}


/* Chapter icons use similar animations to nav icons but are a bit larger
and are "filled icon" style. They also include a starting animation 
(appear on delay), which requires initally setting their opacity to 0. */
.chapter-icon {
    font-size: 1.5rem;
    color: var(--accent-color-1);
    background-color: white;
    border: 3px solid var(--accent-color-1);
    padding: 7px 6px;
    border-radius: 100%;
    display: inline-block;
    /*transition: transform 0.2s ease-in-out;*/
}



/*************++++++++++++++++++***************/
/* This CSS is exclusively used on the GLOSSARY page */
/* See also some desktop/tablet restyling below */
/*************++++++++++++++++++***************/
.entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    margin: auto;
    margin-bottom: 1.5rem;
    width: 100%;
}

.entry h2, .entry p {
    width: 100%;
}

.entry h2 {
    margin:0;
    text-align:left;
    font-size:1.3rem;
    margin-bottom: 0.25rem;
}

/************* END GLOSSARY CSS ***************/













/* For tablets and desktops */
@media only screen and (min-width: 660px) {

    figcaption {
        bottom: 10px;
    }

    .block-three-col {
        flex-direction: row;

    }

    .three-column {
        width: calc(100% / 3);
    }

    figure.full {
        /*max-width:calc(100% - (var(--page-inner-margin) * 2));*/
    }

    .block-flow-col {
        column-count: 3;
    }
    
    .entry {
        display: flex;
        flex-direction:row;
        align-items: center;
        text-align: left;
        margin: auto;
        margin-bottom: 1.5rem;
        width: 100%;
    }

    .entry h2 {
        width: 25%;
        margin-right: 5%;
    }

    .entry p {
        width: 70%;
    }

}

/* Special adjustments for tablets only */
@media only screen and (min-width: 660px) and (max-width:880px) {
    p {
        /*font-size:1.2em;*/
    }

    .block-flow-col {
        column-count: 2;
    }
}






/* ANIMATIONS */

/* Used primarily by small headings */
.slide-right {
    animation-delay: 350ms;
    animation: 500ms slide-right;
}

@keyframes slide-right {
    from {
        margin-left: -10%;
        width: 100%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}

/*
.text-entry-anim *{
  animation: appear 250ms;
  -webkit-animation: appear 250ms;
  -moz-animation: appear 250ms;
  -o-animation: appear 250ms;
  -ms-animation: appear 250ms;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  animation-delay: calc(250ms + var(--animation-order) * 120ms);   
}*/

.text-entry-anim.is-visible * {
    animation: appear 250ms;
    /* Your existing animation name and duration */
    -webkit-animation: appear 250ms;
    -moz-animation: appear 250ms;
    -o-animation: appear 250ms;
    -ms-animation: appear 250ms;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-delay: calc(250ms + var(--animation-order) * 120ms);
}

@keyframes grow {
    0% {
        transform: scale(0, 0);
    }

    100% {
        transform: scale(1, 1);
    }
}



@keyframes appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes bounce {
    0% {
        transform: translateY(0);
        /* Start at the original position */
    }

    30% {
        transform: translateY(-7px);
        /* First bounce up */
    }

    60% {
        transform: translateY(2px);
        /* First bounce down */
    }

    80% {
        transform: translateY(-3px);
        /* Second bounce up (smaller) */
    }

    100% {
        transform: translateY(0);
        /* Back to the original position */
    }
}