@charset "UTF-8";

/*
Theme Name: Borgata-Canova
Theme URI: 
Author: Mark Schönbächler Morphose Visuelle Kommunikation Basel
Author URI: https://morphose.ch/
Description: Theme für die Borgat-Canova-Seite
Requires at least: 5.3
Tested up to: 5.7
Requires PHP: 5.6
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: borgatacanova
Tags: 


*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap');

:root {
  --text-color: rgba(103,102,102,1);
  --white-back:  rgba(255,255,255,.85);
  --highlight-color:  rgba(255,230,142,1);
  --highlight-color-dark:  rgba(192,151,6,1);
  --highlight-color-transp:  rgba(255,230,142,.5);;

}

* {
    box-sizing: border-box;
}

html.slb_overlay {
    overflow: hidden;
}

body    {
    margin: 0;
}



p, a, h1, h2, h3, #logo, figcaption, li, .booking_form, td, label, select, textarea, input, button, .glsr-form-message, .glsr-field-error,  .glsr-review, cite  {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
    hyphens: auto;
}

a:hover {
    border-bottom: solid 1px var(--text-color);
}

.wp-block-booking-booking {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    margin: 1em;
}

ul {
    margin: 0;
    list-style: none;
}

h1 {
    font-size: 5.5rem;
    color: var(--highlight-color);
    grid-column-start: span 3;

}

p {
    margin-bottom: 1rem;
}

header {
    height: 4rem;
    width: 100%;
    background-color: var(--white-back);
    position: fixed;
    display: block;
    padding: 0rem 1rem 0 2.5rem;
    z-index: 9999;
}



.logo {   
    font-size: 1.1rem;
    color: var(--highlight-color-dark) ;
}

.home .logo {
    display: none;
}

.logo, nav, .toggle {
    position: absolute;

}

.logo, .toggle {
    top: 50%;
    transform: translatey(-50%); 
}


nav {
    right: 1rem;
    height: 100%;
}

nav a, .logo {
    text-decoration: none;
    border-bottom: none;
}
nav a:hover, .logo:hover {
    text-decoration: none;
    border-bottom: none;
}

nav .current_page_item a {
    color: var(--highlight-color-dark);
}

nav ul {
    text-align: right;
    margin: 0 0 0 0;
}

nav ul li {
    display: inline;
}

nav ul li {
    margin-right: 1rem;
}

nav ul li:last-child {
    margin-right: 0;
}


/* Mobile navigation */

/* Hamburger*/
.toggle {
    display: block;
    right: 0;
}

label.hamburger { 
   display: block;
   width: 2rem;
   height: 1.45rem; 
   /*position: absolute; 
   top: 0;
   right: 0;*/
}

input#hamburger {display:none}


.line { 
   position: absolute; 
   height: .25rem; 
   width: 2rem; 
   background: var(--highlight-color); 
   background: var(--text-color);
   border-radius: .25rem;
   display: block; 
   transition: 0.5s; 
   transform-origin: center; 
}

.line:nth-child(1) { top: 0; }
.line:nth-child(2) { top: .6rem; }
.line:nth-child(3) { top: 1.2rem; }

#hamburger:checked + .hamburger .line:nth-child(1){
   transform: translateY(.6rem) rotate(-45deg);
}

#hamburger:checked + .hamburger .line:nth-child(2){
   opacity:0;
}

#hamburger:checked + .hamburger .line:nth-child(3){
   transform: translateY(-.6rem) rotate(45deg);
}


.menu {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    height: 100%;
}


}

.menu ul {
  display: none;

}





.mast {
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    padding:  6rem 2rem 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-column-gap: 1rem;
    margin-bottom: 1rem;
}

.mast img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;

}




.intro {
    
    background: linear-gradient(to top, white, rgba(255,255,255,0.75));
    padding: 2rem 2rem 1rem;
    margin-top: calc(50vh - 6rem);
}


/**/

#inhalt .blocks-gallery-grid figcaption {
    color:  var(--text-color);
    padding: 0.5rem;
    background: rgba(255,255,255,0.8);
    display: none;
}

#inhalt .blocks-gallery-grid figure:hover figcaption {
    display: block; 
}

 .blocks-gallery-item {
    height: 22.2222vw;
}

 /*Simple Lightbox*/


body .featherlight .featherlight-content .caption {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    margin-top: 0.4rem;
}



.lang-selector {
    font-size: .75em;
    text-transform: uppercase;

}

.lang-selector li {
    margin-right: .5rem;
    background: #eee;
    border-radius: .15rem;
    padding: .5rem;

}

.lang-selector li a {
    padding: 0;
}

}

.lang-selector li.curr {
    background: #ccc;
}

.lang-selector li a {
    font-weight: 300;
}


/*booking form*/

#inhalt select {
    border: none;
    margin: 1em 0;
    font-size: 1rem;
    display: block;
    width: 100%;
}

.booking_form td {
    font-weight: 300;
}

#inhalt .booking_form td a {
    font-weight: 700;
    color:  var(--text-color);
}

#inhalt .calendar-links {
    background: #ccc;
}

#inhalt .block_hints {
    font-weight: 300;
    font-size: .8rem;
    margin: 1rem 0 2rem 0 !important;
    height:  auto;
}

#inhalt .block_hints > div {
    display: block;
    float: none;
}

#inhalt .block_hints > div > div:first-child {
    width:  1rem;
    height: 1rem;
}

#inhalt .block_text {
    line-height: 1rem;
    height: 1rem;
    padding: 0 1rem 0 1.25rem;
}

#inhalt .booking_form .form-group .controls select, #inhalt .booking_form select, .booking_form textarea, #inhalt .booking_form input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

#inhalt .booking_form select {
    width: 3em;
}

.wpbc_structure_form p {
    font-size: .8rem;
    font-weight: 300;
}

.wpdev-form-control-wrap {
    font-size: 1rem;
    font-weight: 700;
}

/*Site Reviews*/

#inhalt .glsr {
    padding: 2rem;
}

#inhalt .glsr-form, #inhalt .glsr-reviews {
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 1rem;
}

#inhalt .glsr-form  .glsr-field .glsr-input, #inhalt .glsr-form  .glsr-field .glsr-textarea {
    font-weight: 300;
    font-size: 1rem;
}

#inhalt .glsr-form .glsr-field .glsr-label span {
    font-weight: 300;
    font-size: 0.8rem;
}

#inhalt .glsr-form .glsr-field .glsr-label {
    margin: 0 0 0.5rem 0;
}


.glsr-field {
    grid-column-start: 2;
}

.glsr-field-rating {
    grid-column-start: 1;
        justify-self: center;
}

.glsr-form-message, .glsr-field-error {
 font-size: 0.8rem;
 margin-top: 0.25em;
}
.glsr-field-error {
float: right;
}

button {
    border: none;
    padding: .5em;
}

 .glsr-review span {
    font-size: 0.8rem;
    font-weight: 300;

 }

 .map {
    border:  none !important;
 }

/*.wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 1rem;
    padding: 1rem 2rem;
}

.wp-block-group__inner-container h2 {
    grid-column-start: span 3;
    margin: 0 0 1rem 0;
    padding-left: 2rem;
}*/

.gastkommentare .wp-block-group__inner-container {
    column-count: 3;
    padding-top: 1em;

}




.wp-block-columns {
    padding: 1rem; 
}

.wp-block-column:not(:first-child) {
    margin-left: 0em;
}

.wp-block-quote {
    background-color: var(--highlight-color-transp);
    margin: 0rem 1rem 2rem;
    padding: 1rem;
    break-inside: avoid;
}

.wp-block-quote cite {
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 300;
}
.gastkommentare-t {
    margin-left: 4rem;
}

/* Media Queries  480px 750px 960px*/



@media only screen and (min-width: 961px) {
   .toggle {
    display: none;
  }
  .menu ul {
    display:  block;
  }
  .wp-block-group__inner-container {
        grid-template-columns: repeat(3, 1fr);
    }
    
}



 @media only screen and (max-width: 960px) {
    .mast, #inhalt .glsr-form, #inhalt .glsr-reviews {
        grid-template-columns: 1fr 1fr;
    }

    .wp-block-group__inner-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .gastkommentare .wp-block-group__inner-container {
    column-count: 2;
}

    .menu {
    width: max(33.3333vw , 18rem );
    transform: none;  
    align-items: stretch;
    background: rgba(255, 255, 255, 0.95);
    margin-right: -1rem;
    margin-top: 4rem;
    display: none;
    }

    .menu.active {
        display: grid;
        height: calc(100vh - 4rem);
    }   

   .menu ul {
        display: none;
        padding: 0;
        
    }
    .menu.active ul {
        display: block;
    }

    nav {
        transform: none;
    }

    nav ul {
        text-align: left;
        margin: 0;
    
    }

    nav ul li {
        display: block;
        min-height: 3rem;
        padding: 0;
        width: 100%;
        margin: 0;
    }

    nav ul li:last-child {
        margin-bottom: 0;
    }
    nav a {
        display: block;
        width: 100%;
        height: 100%;
        padding: 1rem 2rem;
    }
    .lang.curr {
    }

    nav a:hover {
        background-color: rgba(255,255,255,.5);
    }

    .lang-selector {
  }

    .lang-selector li {
        text-align: center;
        width:  3rem;
        margin: 0;
        padding: 1rem .5rem;
    }


    .glsr-field, .glsr-field-rating, .glsr-form-message {
    grid-column-start: 1;
}


}




@media only screen and (max-width: 750px) {
    #inhalt .blocks-gallery-item {
    width: calc(50% - 1em);
           height: 33.333333vw;
    margin-right: 1em;
}
 #inhalt .blocks-gallery-item:nth-of-type(2n) {
   margin-right: 0;
}


    .mast, #inhalt .glsr-form, #inhalt .glsr-reviews, .wp-block-group__inner-container {
        padding:  1rem 0 0;
        grid-template-columns: 1fr;
        grid-column-gap: unset;
    }

        .gastkommentare .wp-block-group__inner-container {
    column-count: 1;
}

    .wp-block-group__inner-container h2 {
        grid-column-start: unset;
    }

    .mast {
        padding-top: 5rem;
    }
    h1 {
        margin-left: 1rem;
    }

    .intro {
        padding: 1rem;
    }
}

@media only screen and (max-width: 480px) {

h1 {
    font-size: 4.5rem;
}

html {
    font-size: 0.8em;
}

nav ul li {
    font-size: 1.5rem;
}

nav a {
    padding: 1.5rem;
}

.menu {
    width: 100vw;
    margin-top: 4rem;
}

.menu li {
    height: 4.5rem;
}

#inhalt .blocks-gallery-item {
    width: 100%;
    margin-right: 0;
    height: 66.6666667vw;
}
#inhalt .blocks-gallery-grid figcaption {
    display: block;
}

 .lang-selector li {
        width:  4.5rem;
        padding: 1.5rem 1rem;
    }

}