/*
Theme Name: Mailas
Description: mailas
Theme URI: https://andreamantegazza.it
Author: AM Dev
Version: 1.0
*/

/* 
-------------------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');

@font-face {
    font-family: 'HelveticaNowDisplay';
    src: url('assets/fonts/HelveticaNowDisplay-Md.eot');
    src: url('assets/fonts/HelveticaNowDisplay-Md.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/HelveticaNowDisplay-Md.woff2') format('woff2'),
        url('assets/fonts/HelveticaNowDisplay-Md.woff') format('woff'),
        url('assets/fonts/HelveticaNowDisplay-Md.ttf') format('truetype'),
        url('assets/fonts/HelveticaNowDisplay-Md.svg#HelveticaNowDisplay-Md') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'IBMPlexMono';
    src: url('assets/fonts/IBMPlexMono.eot');
    src: url('assets/fonts/IBMPlexMono.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/IBMPlexMono.woff2') format('woff2'),
        url('assets/fonts/IBMPlexMono.woff') format('woff'),
        url('assets/fonts/IBMPlexMono.ttf') format('truetype'),
        url('assets/fonts/IBMPlexMono.svg#IBMPlexMono') format('svg');
    font-weight: normal;
    font-style: normal;
}





:root {
    --size-body: 0.9vw;
    --line-body: 1.1em; 
    
    --size-medium: 1.4vw;
    --line-medium: 1.2em;
    
    --size-large: 3vw;
    --line-large: 1.2em;
    
    --size-monospace: 0.8vw;
    --line-monospace: 1.2em;
    
    
    
    --color-milk: #EDEEEE;
    --color-dark: #151515;
    --color-red: #AA0000;
}

html{
    overflow-y: auto;
}
body {
    font-size: var(--size-body);
    line-height: var(--line-body);
    font-family: "Inter", sans-serif;
    /*font-family: 'HelveticaNowDisplay', helvetica;*/
}

/* We like off-black for text. */
body, select, input, textarea {color: #000;}

a {color: #000;}
a:hover {color: #000;}

::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;}

a:link {-webkit-tap-highlight-color: #fcd700;}

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }


/* C O D E
-------------------------------------------------------------------------------*/

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

/* PASS
-------------------------------------------------------------------------------*/
.pass {
    background-color: var(--color-dark);
}
.pass .entry {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    width: 100%;
    padding: 20px;
}
.pass .entry .pass-wrapper {
    background-color: var(--color-red);
    border-radius: 2.5vw;
    width: 24vw;
    padding: 1.1vw;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.pass .entry .pass-wrapper .pass-title {
    color: #fff;
    text-align: center;
    padding-bottom: 0.7em;
    font-size: var(--size-medium);
    line-height: var(--line-medium);
}
.pass .entry .pass-wrapper .inner-pass {
    background-color: #fff;
    border-radius: 2vw;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pass .entry .pass-wrapper .inner-pass .travel-data {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px;
}
.pass .entry .pass-wrapper .inner-pass .travel-data .departure .airport {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: var(--size-large);
    line-height: var(--line-large);
    color: var(--color-red);
}
.pass .entry .pass-wrapper .inner-pass .travel-data .arrival {
    text-align: right;
}
.pass .entry .pass-wrapper .inner-pass .travel-data .arrival .airport {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: var(--size-large);
    line-height: var(--line-large);
    color: var(--color-red);
}
.pass .entry .pass-wrapper .inner-pass .travel-data .location {
    color: var(--color-red);
}

.pass .entry .pass-wrapper .inner-pass .separartor-wrapper {
    padding: 20px;
}


.pass .entry .pass-wrapper .inner-pass .locations-info {
    padding: 0 20px;
    font-family: 'IBMPlexMono';
    font-size: var(--size-monospace);
    line-height: var(--line-monospace);
    text-transform: uppercase;
}

.pass .entry .pass-wrapper .inner-pass .locations-info .monospace {
    font-family: "Inter", sans-serif;
    margin-top: 1em;
    text-transform: initial;
    color: blue;
    font-size: var(--size-body);
    line-height: var(--line-body);
}
.pass .entry .pass-wrapper .inner-pass .locations-info .space-bottom {
    margin-bottom: 1em;
}



/**/
.pass .entry .pass-wrapper .inner-pass .info-traveler {
    margin-top: auto;
    border-top: 3px solid;
    border-image: repeating-linear-gradient(to right, var(--color-red) 0, var(--color-red) 0.5vw, /* lunghezza tratto */ transparent 0.3vw, transparent 0.8vw /* lunghezza tratto + spazio */) 1;
    padding: 20px;
    height: 12vw;
    position: relative;
}
.pass .entry .pass-wrapper .inner-pass .info-traveler .flight-data {
    font-family: 'IBMPlexMono';
    font-size: var(--size-monospace);
    line-height: var(--line-monospace);
    text-transform: uppercase;
    margin-bottom: 1em;
}
.pass .entry .pass-wrapper .inner-pass .info-traveler .flight-data .monospace {
    font-family: "Inter", sans-serif;
    margin-top: 1em;
    text-transform: initial;
    color: blue;
    font-size: var(--size-body);
    line-height: var(--line-body);
}


.pass .entry .pass-wrapper .inner-pass .info-traveler:before {
    content: '';
    display: block;
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    border-radius: 3em;
    background-color: var(--color-red);
    top: calc(-0.75em - 1px);
    left: -0.75em;
}
.pass .entry .pass-wrapper .inner-pass .info-traveler:after {
    content: '';
    display: block;
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    border-radius: 3em;
    background-color: var(--color-red);
    top: calc(-0.75em - 1px);
    right: -0.75em;
}



@media screen and (max-width: 960px) {
    
    :root {
        --size-body: 4vw;
        --line-body: 1.1em; 

        --size-medium: 5vw;
        --line-medium: 1.2em;

        --size-large: 11vw;
        --line-large: 1.2em;

        --size-monospace: 3.5vw;
        --line-monospace: 1.2em;
    }

    
    .pass {
        background-color: var(--color-red);
    }
    .pass .entry {
        padding: 0;
    }
    
    
    .pass .entry .pass-wrapper {
        border-radius: 0;
        width: 100%;
        padding: 20px;
        padding-top: 15px;
    }
    
    .pass .entry .pass-wrapper .inner-pass {
        border-radius: 8vw;
    }
    .pass .entry .pass-wrapper .inner-pass .travel-data {
        padding-bottom: 0;
    }
    .pass .entry .pass-wrapper .inner-pass .info-traveler {
        border-image: repeating-linear-gradient(to right, var(--color-red) 0, var(--color-red) 3vw, /* lunghezza tratto */ transparent 2vw, transparent 5vw /* lunghezza tratto + spazio */) 1;
        padding: 20px;
        height: initial;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .pass .entry .pass-wrapper .inner-pass .info-traveler .passenger {
        width: 100%;
    }
    .pass .entry .pass-wrapper .inner-pass .info-traveler .flight {
        width: 50%;
    }
    .pass .entry .pass-wrapper .inner-pass .info-traveler .gate {
        width: 50%;
    }
    
    
    
}