/*
Theme Name: Monja Theme
Description: Tema per il sito di Camping Monja
*/

:root {
    --space-unit: 1rem;
    --radius: calc(var(--space-unit) * 0.5);
    --page-container-width: 1800px;

    --h1-font-size: 5rem;
    --h1-line-height: 5.5rem;
    --h1-font-weight: 100;
    
    --h2-font-size: 3rem;
    --h2-line-height: 3rem;
    --h2-font-weight: 400;
    
    --h3-font-size: 2rem;
    --h3-line-height: 2rem;
    --h3-font-weight: 400;

    --p-font-size: 1rem;

    --color-background: var(--wp--preset--color--green-background);
    --color-black: var(--wp--preset--color--text-black-green);
    --color-accent: var(--wp--preset--color--green);
    --color-accent-darker: var(--wp--preset--color--green-dark);
    --color-accent-lighter: var(--wp--preset--color--green-light);
}

.secondary-style {
    --color-background: var(--wp--preset--color--blue-background);
    --color-black: var(--wp--preset--color--text-black-blue);
    --color-accent: var(--wp--preset--color--blue);
    --color-accent-darker: var(--wp--preset--color--blue-dark);
    --color-accent-lighter: var(--wp--preset--color--blue-light);
}

@media screen and (max-width: 1440px) {
    :root {

        --h1-font-size: 3rem;
        --h1-line-height: 3.5rem;
        
        --h2-font-size: 2rem;
        --h2-line-height: 2rem;
        
        --h3-font-size: 1.5rem;
        --h3-line-height: 1.5rem;
    }
}

::selection {
    background: var(--color-accent);
    color: var(--wp--preset--color--white);
}

body {
    background: var(--color-background);
}

body.stop-scroll {
    overflow: hidden;
    padding-right: 1rem;
}

/* TYPOGRAPHY */

h1, h2, h3, h4,
.h1-style, .h2-style, .h3-style, .h4-style {
    font-family: var(--wp--preset--font-family--merchant);
    color: var(--color-accent);
    text-wrap: balance;
}

h1, .h1-style { 
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    font-weight: var(--h1-font-weight);
}

h2, .h2-style {
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
    line-height: var(--h2-line-height);
}

h3, .h3-style {
    font-size: var(--h3-font-size);
    font-weight: var(--h3-font-weight);
    line-height: var(--h3-line-height);
}

p, a, ul, ol, li, button, input {
    line-height: 1.5rem;
}

b, strong {
    font-weight: 800;
}

i, em {
    font-style: italic;
}

ul, ol {
    margin-left: 2rem;
}

p.emphasys {
    font-size: 2em;
    line-height: 1.2em;
}

@media screen and (max-width: 1440px) {
    p.emphasys {
        font-size: 1.65rem;
    }
}

a {
    color: var(--color-accent);
}

/* BUTTON STYLES */

button, input, select {
    font-family: var(--wp--preset--font-family--dm-sans);
    font-size: var(--p-font-size);
}

select {
    cursor: pointer;
}

button,
.button-style, 
.wp-element-button,
.wp-block-button__link {
    border: unset;
    padding: var(--space-unit);
    background: var(--color-accent);
    border-radius: var(--radius);
    color: var(--wp--preset--color--white);
    text-decoration: none;
    display: inline-flex;
    outline-offset: -1px;
}

button:hover, 
.button-style:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
    outline: 1px solid var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-lighter);
    cursor: pointer;
}


.white-style button, button.white-style,
.white-style .button-style, .button-style.white-style,
.white-style .wp-element-button, .wp-element-button.white-style,
.white-style .wp-block-button__link, .wp-block-button__link.white-style {
    background: unset;
    outline: 1px solid var(--wp--preset--color--white);
}


.white-style button:hover, button.white-style:hover,
.white-style .button-style:hover, .button-style.white-style:hover,
.white-style .wp-element-button:hover, .wp-element-button.white-style:hover,
.white-style .wp-block-button__link:hover, .wp-block-button__link.white-style:hover {
    background: var(--wp--preset--color--white);
    outline: 1px solid var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
}

button.button-small, .button-style.button-small,
.button-small > .wp-element-button, .button-small > .wp-block-button__link {
    padding: calc(var(--space-unit) / 2);
}


.error {
    width: 600px;
    height: 300px;
    border: solid red 1px;
    margin: 20px;
    background-color: lightpink;
    color: red;
    font-size: 36px;
}

/* PAGE LAYOUT */

/* Hides the background logos overflow that previously made the navbar scroll on mobile */
.wp-site-blocks {
    overflow: hidden;
}

.page-top-padding {
    padding-top: calc(var(--space-unit) * 10);
}

.container > *, .entry-content > * {
    max-width: var(--page-container-width);
    margin-inline: auto;
    padding-inline: var(--space-unit);
}

.container > .content-wide, .entry-content > .content-wide {
    max-width: 100vw;
}

.container > .content-full, .entry-content > .content-full {
    max-width: 100vw;
    padding-inline: unset;
}

@media screen and (max-width: 1024px) {
    .page-top-padding {
        padding-top: calc(var(--space-unit) * 6);
    }
}


/* UTILITY */

.hidden {
    display: none;
}

.center-inline {
    margin-inline: auto;
}

.center-block {
    margin-block: auto;
}