@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@1,300&family=Montserrat:wght@300&family=Rouge+Script&display=swap');

:root {
    --header-hw-ratio: 0.12; /* change this to set the header size */
    --header-height: max(80px, calc(100vw * var(--header-hw-ratio)));
    --navbar-height: 40px;
    --header-total-height: calc(var(--header-height) + var(--navbar-height));
    --client-height: calc(100vh - var(--header-total-height));
    --font-cursive: 'Rouge Script', cursive;
}


/*******************************

        Global settings

********************************/
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    user-select: none;
}

html, body, .app-container {
    width: 100%;
    height: 100%;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    color: #ddd;
    background-color: #121615;

    /* hide scrollbars */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar { display: none; }
.app-container::-webkit-scrollbar { display: none; }

.app-container {
    display: none;
}

a { color: orange; }
a:hover { color: green; }
a:active { color: tomato; }
a:visited { color: #ccc; }

/********************************

             Header
    (logo, slider and navbar)

*********************************/

header {
    display: grid;
    grid-template-columns: calc(var(--header-height) * 0.8548) auto;
    grid-template-rows: var(--header-height);
}

.logo img {
    width: 100%;
    max-height: var(--header-height);
    object-fit: contain;
}

.slider {
    position: relative;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: var(--client-height);
    overflow: hidden;
}

header .slider {
    background-size: cover !important;
    height: var(--header-height) !important;
}

.slider-next, .slider-prev {
    position: absolute;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    top: 0;
    height: 100%;
    width: 10%;
    cursor: pointer;
    font-size: max(calc(var(--header-height) / 10), 20px);
    text-align: center;
}

.slider-next:hover, .slider-prev:hover {
    transition: 0.5s;
    background-color: #8886;
}

.slider-next { right: 0; }

.slider-prev { left: 0; }

.slides { display: none; }

.slide {
    width: 100%;
    height: var(--client-height);
    object-fit: contain;
}

header .slide {
    height: var(--header-height) !important;
    object-fit: cover !important;
}

.slide-view {
    display: none;
    position: absolute;
    top: 0;
    grid-template-columns: 50% 50%;
    height: var(--client-height);
}

header .slide-view {
    height: var(--header-height) !important;
}

.navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    min-height: var(--navbar-height);
}

nav { /* other properties managed in main.js */
    top: var(--header-total-height);
    left: 0;
}        

.navbar .hamburger {
    display: none;
    height: calc(var(--navbar-height) - 19px);
    padding: 6px 12px 0;
    cursor: pointer;
}

nav button {
    background: none;
    color: #aaa;
}

nav button:hover:not(.active) {
    color: orange;
    cursor: pointer;
}

nav .active {
    color: white;
}

.pt > .home::after { content: "Vista 360"; }
.pt > .about-us::after { content: "Sobre nós"; }
.pt > .products::after { content: "Produtos e Serviços"; }
.pt > .gallery::after { content: "Galeria"; }
.pt > .contacts::after { content: "Contactos"; }

.en > .home::after { content: "360 view"; }
.en > .about-us::after { content: "About us"; }
.en > .products::after { content: "Products and Services"; }
.en > .gallery::after { content: "Gallery"; }
.en > .contacts::after { content: "Contacts"; }

.fr > .home::after { content: "Vue 360"; }
.fr > .about-us::after { content: "Sur nous"; }
.fr > .products::after { content: "Produits et Services"; }
.fr > .gallery::after { content: "Galerie"; }
.fr > .contacts::after { content: "Contacts"; }

.langs {
    display: flex;
    flex-direction: row;
    gap: 10px;
    height: var(--navbar-height);
    padding-right: 10px;
    align-items: center;
}

.flag {
    height: calc(var(--navbar-height) - 25px);
    width: calc((var(--navbar-height) - 25px) * 1.4);
    opacity: 50%;
}

.langs .active {
    opacity: 100%;
    height: calc(var(--navbar-height) - 20px);
    width: calc((var(--navbar-height) - 20px) * 1.4);
}

.flag:hover:not(.active) {
    opacity: 100%;
    cursor: pointer;
}



/******************************

        Splash screen

*******************************/
.splash {
    position: absolute;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../imagens/entrada.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 2000;
}

.splash div {
    display: flex;
    flex-flow: column nowrap;
    background-color: #12161580;
    border-radius: 5%;
    text-align: center;
}

.splash hr {
    margin: 0 20%;
    border-top: 1px solid orange;
}

.splash p {
    margin: 1em 2em;
}

.splash .welcome {
    grid-area: 2 / 2;
}

.splash .enter {
    grid-area: 4 / 2;
    max-height: 4em;
}


/******************************

           Contents

*******************************/
.contents {
    position: relative;
    width: 100%;
    height: var(--client-height);
}

.content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.hide {
    transition: opacity 2s;
    opacity: 0%;
    z-index: 0;
}

.show {
    transition: opacity 2s;
    opacity: 100%;
    z-index: 1;
}



/********************************

             Ementa

*********************************/

.shelf {
/*    display: none; */
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -2000;
    background-color: #121615E0;
}

.page-overlay {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.menu-zoom-btn {
    display: inline-block;
    position: absolute;
    left: 10%;
    top: 0;
    width: 32px;
    height: 32px;
    background-color: transparent;
    cursor: pointer;
    z-index: 3;
}

.menu-close-btn {
    display: inline-block;
    position: absolute;
    left: calc(10% + 40px);
    top: 0;
    width: 32px;
    height: 32px;
    background-color: transparent;
    cursor: pointer;
    z-index: 3;
}

.zoomPage, .pinch-zoom-container {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.zoomPage .page-contents, .pinch-zoom-container {
    min-width: 100vw;
    min-height: calc(100vw * 1.41483);
}

.image-zoom {
    min-height: 100vh !important;
    background-color: #222D;
}

#book {
    position: absolute;
    --w: min(150vw, calc( 98vh * 1.4085 ));
    --h: calc(var(--w) * 0.71);
    width: var(--w);
    height: var(--h);
    top: calc((98vh - var(--h)) / 2 + 1vh);
    left: min(calc(100vw - var(--w)), calc((100vw - var(--w)) / 2));
}

.my-page {
    background-size: contain;
    border-radius: 0 10px 10px 0;
}

.my-page .page-contents {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.front-cover {
    background-image: url('../imagens/ementas/menu-cover-front.png');
    border-radius: 0;
}

.back-cover {
    background-image: url('../imagens/ementas/menu-cover-back.png');
    border-radius: 0;
}

.back-cover-inner {
    background-image: url('../imagens/ementas/menu-cover-inner.png');
    border-radius: 0;
}

.blank { background-color: #f5f5f5; border-radius: 10px 0 0 10px; }


.popup {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 0;
    background-color: #222222FA;
    height: 100%;
    width: 100%;
    z-index: 100;
}