/*
Theme Name: Custom Theme - Nando
Author: Daniele Verzolini
Author URI: http://www.danieleverzolini.com/
Description: Responsive HTML5 theme
Version: 2.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

:root {
    --size-1: 1rem;
    --size-2: 1.25rem;
    --size-3: 3rem;

    /* WP Variables Overrides */
    --wp--style--block-gap: var(--size-1);
    --wp--preset--color--black: #000;
    --wp--preset--color--white: #f2f2f2;
}

@media only screen and (max-width: 800px) {
    :root {
        --size-3: 1.5rem;
    }
}

/* ================= CSS RESET ================= */
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. Remove default margin */
html,
body {
    margin: 0;
}

/* 5. Improve media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}
/* 6. Inherit fonts for form controls */
input,
button,
textarea,
select {
    font: inherit;
}

/* ================= STYLES ================= */

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--size-1);
    line-height: 1.5;
    color: var(--black);
    background-color: var(--wp--preset--color--white);
    -webkit-font-smoothing: antialiased;
}

p {
    max-width: 40rem;
}

.text-regular {
    font-size: inherit;
    margin: unset;
}

h1,
.title,
.logo {
    font-family: inherit;
    font-size: var(--size-2);
    text-transform: capitalize;
    margin-top: 0;
}

.logo {
    margin: 0;
}

h1,
h2,
h3,
h4 {
    font-weight: inherit;
}

a {
    text-decoration: none;
    color: unset;
}

a:hover {
    opacity: 1;
    transition: 0.3s ease;
}

nav li a {
    opacity: 0.5;
}

header ul,
nav ul,
nav li {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* ================= 2 COLUMNS LAYOUT ================= */

html, body{
	height:100%;
}

aside {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: auto;
    z-index: 99;
    background-color: var(--wp--preset--color--white);
}

main {
    margin-left: 33vw;
}

.is-home-main {
    margin-top: 0 !important;
	height:100%;
}

@media screen and (max-width: 800px) {
    aside {
        position: fixed !important;
        top: 0;
        right: 0;
        bottom: auto;
    }

    main {
        margin-left: 0;
        margin-top: 4rem;
    }

}

/* ================= NAV MENU ================= */

.site-header {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: var(--size-2);
    padding: var(--size-3);
}

.menu-list > ul {
    /* Style Desktop Links */
    list-style: none;
    padding: 0;
    display: flex;
    gap: var(--size-1);
}

/* Hide Checkbox toggle */
#menu-button {
    opacity: 0;
    position: absolute;
}

/* Hide label on desktop */
.menu-label {
    display: none;
}

@media screen and (max-width: 800px) {
	
    .logo {
        font-size: var(--size-1) !important;
    }
	
    .site-header {
        position: relative;
        top: 0;
        flex-direction: row;
        align-items: end;
        justify-content: space-between;
    }

    /* Stop page scroll on menu opened */
    body:has(#menu-button:checked) {
        overflow: hidden;
    }

    #menu-button:checked ~ .menu-list {
		flex-direction: column;
        /* nav scrollable se troppo grande */
        max-height: 100vh;
        overflow-y: auto;
        /* Animate IN */
        visibility: visible;
        opacity: 1;
        transition: opacity 0.4s ease;
    }

    /* Show menu label on mobile */
    .menu-label {
        display: block;
    }

    /* Style Mobile Menu */
    .menu-list {
        position: fixed;
        top: 4rem;
        left: 0;
        right: 0;
        bottom: 0;
        padding: var(--size-3);
        background-color: var(--wp--preset--color--white);
        /* Animate OUT */
        visibility: hidden;
        opacity: 0;
    }

    /* Style Mobile Menu */
    .menu-list > ul {
        flex-direction: column;
    }

    nav ul li {
        font-size: var(--size-2);
    }
}

/* ================= LIGHTBOX PLUGIN OVERRIDE ================= */
.slb_viewer_overlay,
#slb_viewer_wrap .slb_theme_slb_baseline .slb_container {
    background-color: var(--wp--preset--color--white) !important;
}

.slb_details {
    display: none;
}

.slb_container,
#slb_viewer_wrap .slb_theme_slb_baseline .slb_viewer_layout {
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0;
}

/* ================= WORDPRESS BLOCKS OVERRIDE ================= */
.wp-element-caption {
    color: var(--wp--preset--color--black) !important;
    position: relative !important;
    background: none !important;
    text-align: unset !important;
}

.current_page_item,
.current_page_item a,
.current-menu-item,
.current-menu-item a {
    position: relative;
    opacity: 1;
}

.current_page_item::before,
.current-menu-item::before {
    content: "";
    display: inline-block;
    width: 0.25em;
    height: 0.25em;
    background-color: var(--wp--preset--color--black);
    position: absolute;
    border-radius: 100%;
    top: 25%;
    left: -1em;
    margin: 0.25em;
    line-height: 1em;
}

/* ================= UTILITY CLASS ================= */
.flex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.gap-2 {
    gap: var(--size-3);
}
.flex-column {
    flex-direction: column;
}
.align-self-end {
    align-self: end;
}

.p-1 {
    padding: var(--size-1);
}
.p-2 {
    padding: var(--size-3);
}

.pt-2 {
    padding-top: var(--size-3);
}
.pb-2 {
    padding-bottom: var(--size-3);
}

.mt-5 {
    margin-top: 4rem;
}