/*
 * Theme Name: Htmlles 2024 
 * Description: Theme for the 2024 edition.
 * Author: Monica Rekas
 * Author URI: https:/monicarekas.com
 * Text Domain: htmlles-2024
*/

@font-face {
    font-family: "Abordage";
    src: url("../fonts/Abordage-Regular.ttf") format("truetype"),
        url("../fonts/Abordage-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Paragon";
    src: url("../fonts/Paragon-Regular_kerned.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "ParagonItalic";
    src: url("../fonts/Paragonitalic-Regular_kerned.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* utilities/container.css
 * ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡
 * Container
 * ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡
 */

.content-container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

@media (min-width: 768px) {

    .content-container {
        margin-right: 3rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1024px) {

    .content-container {
        margin-right: 4rem;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
        padding-top: 3.5rem;
    }
}

@media (min-width: 1280px) {

    .content-container {
        margin-right: 5rem;
    }
}

/* utilities/animation.css
 * ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡
 * Animation
 * ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡
 */

@keyframes marquee {
0%   {
    transform: translateX(-100%);
}

100% {
    transform: translateX(0%);
}
}

.animate-marquee {
animation: marquee 10s linear infinite;
}

.group:hover > .animate-marquee {
animation-play-state: paused;
}

@media (prefers-reduced-motion) {
.animate-marquee {
    animation: none;
}
}

/* utilities/wrapper.css
 * ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡
 * Wrapper
 * ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡
 */

.wrapper {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {

    .wrapper {
        margin-right: 3rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {

    .wrapper {
        margin-right: 4rem;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

@media (min-width: 1280px) {

    .wrapper {
        margin-right: 5rem;
    }
}

:root {
    --font-family-heading: "Abordage";
    --font-family-body: "Paragon";
}

body {
    background-size: cover;
    font-family: "Paragon";
    font-family: var(--font-family-body);
}

h1, h2, h3, h4  {
    font-family: "Abordage";
    font-family: var(--font-family-heading);
}

h5 {
    font-size: 1.25rem !important /* 20px */;
    line-height: 1.75rem/* 28px */;
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

h2:not(:first-child), h4 {
    margin-top: 1em !important;
}

p {
    margin: revert !important;
}

@media screen and (max-width: 398px) {
    nav {
        padding-top: 0.75rem;
    }
}

p:first-child {
    margin-top: 0 !important;
}

li {
    list-style-type: none;
    
}

.single-participant li::before {
    content: url('/2024/wp-content/themes/htmlles-2024/static/img/right-arrow.svg');
}

.single .content-container a {
    -webkit-text-decoration: underline !important;
    -webkit-text-decoration: underline !important;
    text-decoration: underline !important;
}

.single .content-container a:hover,
.archive .content-container a h3:hover
{
    color: #9b83ff;
}

/* Front page wrapper */

.front-page-wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 1024px) {

    .front-page-wrapper {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* Front Page grid layout */

.grid-child-1 { 
    grid-area: 1 / 1 / 2 / 2; 
}

.grid-child-2 {
    grid-area: 2 / 1 / 3 / 2;
}

.grid-child-3 { 
    grid-area: 3 / 1 / 4 / 2;
    justify-self: end;
    align-self: end;
}

@media screen and (min-width: 1024px) {
    .grid-child-2 {
        grid-area: 2 / 1 / 3 / 2;
    }
}

@media screen and (max-width: 1023px) {
    .parent-grid::before { content: ""; grid-area: 2 / 1 / 3 / 2; }
}

.illustration {
    width: 100%;
    height: 100%;
    position: absolute;
}

.outline-landing {
    fill: none;
    stroke: #000;
    transition-property: stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 250ms;
    z-index: 20;
    left: 2% !important; /* override parallax.js */
}

.outline-landing:hover {
    stroke: #fff;
    transition-property: stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 250ms;
}

.outline-landing:hover + .silhouette-landing {
    fill: #573e91;
    transition-property: fill;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 250ms;
}

.silhouette-landing {
    fill: #c7c7c6;
    transition-property: fill;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 250ms;
}

.force-rotate {
    transform: rotate(35deg) !important;
}

.parent-grid { 
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    height: calc(100dvh - 4.5rem);
    padding-top: 1rem;
    padding-bottom: 2rem;
    overflow: hidden;
    }

@media screen and (min-width: 1024px) {
    .parent-grid {
        padding-bottom: 4rem;
    }
}

/* .front-page-content-container {
    height: calc(100dvh - 4.5rem);
    overflow: hidden;
} */

@media screen and (min-width: 768px) {
    .parent-grid {
        height: calc(100dvh - 5.5rem); 
    }
}

@media screen and (min-width: 1024px) {
    .parent-grid {
        height: calc(100dvh - 6.5rem); 
    }
}

@media screen and (min-width: 1280px) {
    .parent-grid {
        height: calc(100dvh - 9.5rem); 
    }
}

/* Partners Page  */

.panel-grid-cell a {
    opacity: 0.8;
}

.panel-grid-cell a:hover {
    opacity: 1;
}

/* Alpinejs */

[x-cloak] { display: none !important; }

/* Event Archive */

.event-parent-mobile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 0;
    }

.event-parent-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 0px;
    padding: 1.25rem 0;
    border-bottom: 2px solid #9b83ff 
    }

.event-parent-grid:first-child {
    margin: 0;
    border-top: 2px solid #9b83ff; 
}

@media screen and (min-width: 768px){
    .event-parent-grid:nth-child(2):after {
        content: url('/2024/wp-content/themes/htmlles-2024/static/img/hand-outline.svg'); 
        grid-area: 1 / 3 / 2 / 4;
        width: 75%;
        align-self: center;
        margin-top: 20px;
    }

    .event-parent-grid:nth-child(4):before {
        content: "";    
        grid-area: 1 / 3 / 2 / 4;
    }

    .event-parent-grid:nth-child(4):after {
        content: "";    
        grid-area: 1 / 4 / 2 / 5;
    }

    .event-parent-grid:nth-child(5)::after {
        content: url('/2024/wp-content/themes/htmlles-2024/static/img/fortune-cookie-2.svg'); 
        grid-area: 1 / 3 / 2 / 4;
        width: 65%;
        align-self: center;
        justify-self: center;
    }
    
    .event-parent-grid:nth-child(6)::after {
        content: "";
        grid-area: 1 / 3 / 2 / 4;
    }

    .event-parent-grid:nth-child(7):after {
        content: url('/2024/wp-content/themes/htmlles-2024/static/img/cow.svg'); 
        grid-area: 1 / 5 / 2 / 6;
        width: 85%;
        align-self: center;
    }

    .event-parent-grid:nth-child(10)::after {
        content: url('/2024/wp-content/themes/htmlles-2024/static/img/hand-silhouette.svg'); 
        grid-area: 1 / 3 / 2 / 4;
        width: 75%;
        align-self: center;
    }
    
    .event-parent-grid:nth-child(11)::after {
        content: url('/2024/wp-content/themes/htmlles-2024/static/img/olive-branch-silhouette.svg'); 
        grid-area: 1 / 5 / 2 / 6;
        width: 65%;
        align-self: center;
        margin-top: 10px;
    }

    .event-parent-grid:nth-child(12):after {
        content: url('/2024/wp-content/themes/htmlles-2024/static/img/fish.svg'); 
        grid-area: 1 / 4 / 2 / 5;
        width: 65%;
        align-self: center;
    }

}

.date-day {
    transform: translateY(0.10em);
}