/*
Theme Name: Paco (Classic)
Author: Gabriel Bazdragan
Description: Custom WordPress theme
Version: 1.1
*/

@layer theme {
    :root {
        --p-margin-bottom: calc(var(--spacing) * 7);
    }
}

body {
    /* font-family: 'Inter', sans-serif; */
    line-height: 1.5;
    color: var(--color-text-primary);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* h1, h2, h3 {
    font-family: 'Playfair Display', serif;
} */

h1 {
    font-size: var(--text-2xl); /* 1.875rem (30px) */
    line-height: var(--text-2xl--line-height); /* calc(2.25 / 1.875) */
    margin-top: 0; /* calc(var(--text-4xl) * 1.5); */
    margin-bottom: calc(var(--text-2xl) * 1.25);

    @media (width >= 80rem) {
        font-size: var(--text-4xl); /* 1.875rem (30px) */
        line-height: var(--text-4xl--line-height); /* calc(2.25 / 1.875) */
        margin-top: 0; /* calc(var(--text-4xl) * 1.5); */
        margin-bottom: calc(var(--text-4xl) * 1.25);
    }
}

h2 {
    font-size: var(--text-xl); /* 1.5rem (24px) */ 
    line-height: var(--text-xl--line-height); /* calc(2 / 1.5) */
    margin-top: 0; /* calc(var(--text-xl) * 1.5); */
    margin-bottom: calc(var(--text-xl) * 1.25);

    @media (width >= 80rem) {
        font-size: var(--text-3xl); /* 1.5rem (24px) */ 
        line-height: var(--text-3l--line-height); /* calc(2 / 1.5) */
        margin-top: 0; /* calc(var(--text-3xl) * 1.5); */
        margin-bottom: calc(var(--text-3xl) * 1.25);
    }
}

.title-mobile {
    width: 70vw;
}

.storycontent p {
    margin-top: 0;
    margin-bottom: var(--p-margin-bottom);
}

nav ul {
    list-style: none;
    padding-inline-start: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;


    @media (width >= 80rem) {
        gap: 1.5rem;
    }
}

nav.menu-main-container-desktop {
    display: flex;
    align-items: center;
}

nav.menu-main-container-mobile {
    height: 50%;
}

nav ul.main-menu-list-mobile {
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    font-size: var(--text-2xl); /* 1.875rem (30px) */
    line-height: var(--text-2xl--line-height); /* calc(2.25 / 1.875) */
}

/* nav ul li {
    align-self: center;
} */

nav ul li a {
    text-decoration: none;
    color: var(--color-text-secondary);
    font-weight: 400;
}

nav ul.main-menu-list-desktop {
    @media (width < 64rem) {
        display: none;
    }
}

.current-menu-item a {
    font-weight: 800;
}


.current-menu-item a:after {
    @media (width < 64rem) {
        content: '';
        position:absolute;
        margin: 0 4px;
        height:32px;
        width:32px;
        background-size: 32px 32px;
        background-image: url("/wp-content/themes/paco-classic/dist/compass-white.svg");
        background-repeat: no-repeat;
    }
}

.wp-block-image .alignleft {
    margin: 0 0 calc(var(--spacing) * 5) 0;

    @media (width > 40rem) {
        margin-left: calc(var(--spacing) * -5);
        margin-right: calc(var(--spacing) * 5);
    }

    @media (width >= 48rem) {
        margin-left: calc(var(--spacing) * -15);
        margin-right: calc(var(--spacing) * 15);
    }

    @media (width >= 64rem) {
        margin-left: calc(var(--spacing) * -20);
        margin-right: calc(var(--spacing) * 20);
        margin-bottom: calc(var(--spacing) * 10);
    }

    @media (width >= 96rem) {
        margin-left: calc(var(--spacing) * -44);
        margin-right: calc(var(--spacing) * 44);
        margin-bottom: calc(var(--spacing) * 20);
    }
}

.wp-block-image .alignright {
    margin: 0 0 calc(var(--spacing) * 5) 0;

    @media (width >= 40rem) {
        margin-left: calc(var(--spacing) * 5);
        margin-right: calc(var(--spacing) * -5);
    }

    @media (width >= 48rem) {
        margin-left: calc(var(--spacing) * 15);
        margin-right: calc(var(--spacing) * -15);
        margin-bottom: calc(var(--spacing) * 5);
    }

    @media (width >= 64rem) {
        margin-left: calc(var(--spacing) * 20);
        margin-right: calc(var(--spacing) * -20);
        margin-bottom: calc(var(--spacing) * 10);
    }

    @media (width >= 96rem) {
        margin-left: calc(var(--spacing) * 44);
        margin-right: calc(var(--spacing) * -44);
        margin-bottom: calc(var(--spacing) * 20);
    }
}

.wp-block-separator {
    margin: calc(var(--p-margin-bottom) + var(--spacing)) 0;
    /* margin: 0; */
    clear: both;

    @media (width >= 48rem) {
        margin: calc(var(--spacing) * 20) 0;
    }

    @media (width >= 64rem) {
        margin: calc(var(--spacing) * 26) 0;
    }

    @media (width >= 96rem) {
        margin: calc(var(--spacing) * 36) 0;
    }
}

ul.wp-block-list {
    padding-inline-start: 0;
    text-align: left;
}

.motto {
    font-family: var(--font-special);
    font-style: italic;
}

:root :where(.wp-block-separator.is-style-dots):before {
    /* content: url("/wp-content/themes/paco-classic/dist/compass.svg") / '🧭'; */

    content: "";
    display:block;
    margin: 0 auto;
    height:45px;
    width:45px;
    background-size: 45px 45px;
    background-image: url("/wp-content/themes/paco-classic/dist/compass.svg");
    background-repeat: no-repeat;

    padding-left: 0;
}