* {
    margin: 0;               /* sets the margin 0 for all elements */
    padding: 0;              /* sets the padding 0 for all elements */
    box-sizing: border-box;  /* element size stays as decided, even after adding padding ecc. Prevents "overflowing" */
    /*scroll-behavior: smooth;*/
}

.main {
    background-color: #f0ddc3;
    padding-top: 7vh;
}

/* 
---------------------------
--------- HEADER ----------
---------------------------
 */
.header > * {
    flex-shrink: 0;  /* prevents items from shrinking below width */
}

.header {
    position: fixed;
    display: flex;
    width: 100%;
    height: 7vh;
    flex-direction: row;
    background-color: #447555;
    z-index: 101;
    
}

/*
---------Burger-Menu---------
*/
.burger > summary {
    position: relative;
    z-index: 300;
}

.burger[open] summary img {
    display: none;
}

.burger[open] > summary::after {
    padding: 3vh 0vh 0vh 1vh;
    content: "✕";
    color: black;
    font-size: 2rem;
}


.burger-menu-container {
    display: flex;
    justify-content: center;
    width: 20vw;
    overflow: hidden;
}

.burger-menu-item {
    width: 13vw;
    align-self: center;
}

.burger-menu {
    position: fixed;
    background-color:#f0ddc3;
    z-index: 150;
    width: 70vw;
    height: 100vh;
    top:0;
    transition: max-height 0.3s ease;
}

.burger-menu > ul {
    padding: 10vh 5vh 5vh 3vh;
    list-style: none;
    
}

.burger-menu > ul li {
    padding: 4vh 0vh 0vh 0vh;
    text-decoration: none;
    font-weight:bold;
    font-size: larger;
}

.burger-menu > ul > li  ul > li{
    padding: 2vh 0vh 0vh 0vh;
    font-weight:normal;
    font-style: italic;
    font-size: medium;
}

.burger-menu > ul  ul {
    list-style: none;
}

.burger-menu > ul li a {
    text-decoration: none;
    color: black;
}

.burger:not([open]) .burger-menu {
    display: none;    /* prevent full menu to appear even when closed on some browsers*/
}

.burger-menu summary {
    list-style: none;
    padding-right: 2vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.burger-menu summary::after {
    content: ">";
    font-size: 1.4em;
    font-weight: bold;
    transition: transform 0.3s;
    float: right;
}    

.burger-menu details[open] > summary::after {
    transform: rotate(90deg);
}

h3[id] {
    scroll-margin-top: 10vh;
}
h2[id] {
    scroll-margin-top: 10vh;
}


.book-button {
    display: flex;               /* make the button a flex container */
    justify-content: center;     /* horizontal centering */
    align-items: center;         /* vertical centering */
    text-decoration: none;
    height: 100%;                /* fill header height if needed */
    font-size: 1em;
    padding-left: 6vw;
    padding-right: 6vw;
    color: white;
    border-left: 1px solid black;
    border-right: 1px solid black;
    
}


.info-header {
    display: flex;
    margin-left: auto; 
    align-items: flex-start;
    padding-top: 1vh;
    padding-right: 2vw;
}

/*
---------Contact-dropdown---------
*/
.contact {
    position: relative; 
}

.contact-button {
    width: 7vw;
    margin-right: 3vw;
}

.contact summary {
    list-style: none;
}

.contact p {
    position: absolute;
    background-color: #f0ddc3;
    left: 50%;               
    transform: translateX(-50%);
    padding: 2vh 2vh 2vh 2vh;
    border-radius: 20px;
    line-height: 1.6;
}

.contact a {
    text-decoration: underline;
    color: black;
}

.flags {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.8vh;
}

.flag {
    width: 6vw;
    height: auto;
    border-radius: 20px;
}

/*
-----------INDEX-GALLERY----------
*/


.gallery-logo {
    display: flex;
    z-index: 10;                  /* same as people-amount */
    position: absolute;
    top: 2vh;                       /* adjust as needed */
    right: 2vh;
    opacity: 1;
}

.gallery-logo img {
    width: 25vw;                   /* adjust size similar to room icons */
    height: auto;
    border-radius: 10px;           /* match your design style */

}


/*
--------INDEX TEXT--------
*/

.benvenuti h2,
.vivere-il-borgo h2,
.ratings h2 {
    text-align: center;
    margin-bottom: 1vh;
}

.benvenuti ,
.vivere-il-borgo,
.ratings {


    line-height: 1.6;

    padding-left: 3vw;
    padding-right: 3vw;
    padding-top: 2vh;
    padding-bottom: 2vh;
}

.benvenuti p,
.vivere-il-borgo p,
.ratings p {
    text-align: center;
}

/*
--------RATING CONTAINER-------
*/
.rating-container {
    display: flex;
    justify-content: center;
    gap: 10vw;
    margin-top: 4vh;
    margin-bottom: 5vh;
}
.rating-container a {   /* a is inline by default!! */
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rating-block {
    display:flex;
    flex-direction: column;
}

.rating-logo {
    width: 15vh;      /* fixed box width */
    height: 15vh;     /* fixed box height */
    object-fit: cover; /* scales image to fit inside box without distortion */
    margin-bottom: 3vh;
}

.rating-value-google {
    margin-top: 2vh;
    width: 18vh;
}


.rating-value-booking {
    width: 7vh;
}

/* 
----------------------
------FOOTER---------
------------------------
*/
.footer {
    background-color: #447555;
    display: flex;
    flex-direction: column;
}

.contact-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4vh;
}

.contact-footer a {
    color: black;
}

.telephone-footer,
.email-footer,
.position-footer {
    display: flex;
    flex-direction: row;
    gap: 2vh;
    justify-content: center;
    align-items: center;
    margin-top: 4vh;
}
.position-footer a {
    color:black;
}

.phone-icon {
    width: 7vh;
}

.email-icon {
    width: 5vh;
}

.position-icon {
    width: 7vh;
}

.logo-footer-container {
    display: flex;
    justify-content: center;
    margin-top: 7vh;
    margin-bottom: 7vh;
}

.logo-footer-img {
    width: 15vh;
    border-radius: 10px;
}

.copyright{
    margin-bottom: 2vh;
    text-align: center;
}

.privacy-policy {
    margin-bottom: 2vh;
    text-align: center;
}

.privacy-policy a,                  /* text should never ever be blue or purple (for all states) */
.privacy-policy a:visited,
.privacy-policy a:hover,
.privacy-policy a:active {
  color: black;
}

.privacy-policy a:hover {
  text-decoration: underline;
}

.impressum {
    margin-bottom: 5vh;
    text-align: center;
}

.impressum a,                  /* text should never ever be blue or purple (for all states) */
.impressum a:visited,
.impressum a:hover,
.impressum a:active {
  color: black;
}

.impressum a:hover {
  text-decoration: underline;
}



/*
------------------------------------------------------------------
-----------------ROOMS-FILE---------------------------------------
------------------------------------------------------------------
*/

.main-rooms {
    background-color: #f0ddc3;
    padding-top: 9vh;
}

.main-rooms h2 {
    text-align: center;
    margin-top: 4vh;
    margin-bottom: 1vh;
}


.main-rooms p {
    padding: 0vh 3vh 8vh 3vh ;   /* top, right, bottom, left*/
    text-align: center;
    line-height: 1.6;
}


/*
------------------INFORMATION-BLOCK------------------------
*/
.main-rooms .important-infos {
    margin: 0vh 0vh 2.5vh 1.5vh;
    text-decoration: underline;

}

.main-rooms .info-list {
    padding-left: 9vw;
    margin: 2vh 2vh 2vh 0vh
}

.info-list li {
    padding-bottom: 3vh;
}


/*
------------------ROOM-GALLERY-INTERFACE------------------------
*/

.room-interface {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 12vh;
}
.room-interface h3 {
    text-align: center;
    margin-bottom: 2vh;
}

.gallery {
    display: flex;               /* horizontal row of images */
    overflow-x: auto;            /* scrollable on x-axis */
    overflow-y: hidden;
    scroll-snap-type:x mandatory; /* snap per image */
    gap: 2vw;
    scroll-behavior: smooth;
}

.gallery-image {
    display: inline-block;
    flex: 0 0 100%;
    position: relative;         /* arrows position relative to image */
    scroll-snap-align: start;   /* each image snaps at start */
    padding: 1vh 1vh 1vh 1vh;

}

.gallery-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
    border-radius: 20px;
}

.gallery-image .gallery-menu {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 92%;
    z-index: 100;
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
}


.gallery-menu span {
    transform: scaleY(8);
    color: rgb(255, 255, 255);
}

.people-amount {
    display: flex;
    z-index: 10;
    position: absolute;
    bottom: 8%;
    left: 5%;
    color: rgb(0, 0, 0);
    background-color: white;
    padding: 0.2vh 0.4vh 0.2vh 0.4vh;

}

.people-amount > img {
    width: 4vw;
    height: auto;
    margin-right: 2vw;
}

.square-meters {
    position: absolute;
    z-index: 10;
    bottom: 2%;
    left: 5%;
    color: rgb(0, 0, 0);
    background-color: white;
    padding: 0.3vh 0.4vh 0vh 0.4vh;

}
.square-meters > img {
    width: 4vw;
    margin-right: 1vw;;
}

/*
------------------ROOM-DETAILS------------------------
*/

.room-summary {
    list-style: none;
    padding: 1vh 1vh 1vh 1vh;
}
.room-summary::after {
    content: ">";
    position: absolute;
    font-size: 1.2em;
    font-weight: bold;
    right: 2vw;
    transition: transform 0.3s;
}

details[open] .room-summary::after {
    transform: rotate(90deg);
}

.room-interface > details {
    border-bottom: 1px solid black;
}


.room-features {
    list-style: none;
    padding-left: 0;
    margin: 2vh 0;
}

.room-features li {
    position: relative;
    padding-left: 10vw;
    margin-bottom: 1.2vh;
    line-height: 1.4;
}

.room-features li.yes::before {
    content: "✔";
    position: absolute;
    left: 2vh;
    color: green;
    font-weight: bold;
}

.room-features li.no::before {
    content: "✖";
    position: absolute;
    left: 2vh;
    color: darkred;
    font-weight: bold;
}


/*
------------------------------------------------------------------
-----------------FAQ-FILE---------------------------------------
------------------------------------------------------------------
*/

.main-faq {
    background-color: #f0ddc3;
    padding-top: 9vh;
    padding-bottom: 7vh;
}

.main-faq h2 {
    text-align: center;
    margin-top: 4vh;
    margin-bottom: 4vh;
}

.faq h3 {
    margin-bottom: 2vh;
    margin-top: 2vh;
}

.faq-summary {
    display: flex;                       /* makes element a container */
    align-items: center;                 /* aligns children vertically center */
    justify-content: space-between;      /* divides text and arrow (first child left, last child right, max space in between) */

    list-style: none;
    cursor: pointer;
    padding-right: 2vw;
}

.faq-item p {
    font-style: italic;
}

.faq-item {
    padding: 1vh 1vh 1vh 1vh;
    margin-bottom: 2vh;
    border: 1px solid grey;
    border-radius: 8px;
}

.faq {
    padding: 1vh 1vh 1vh 1vh;
    
}

.faq-item p {
    padding-top: 1vh;
}

.faq-summary::after {
    content: ">";
    font-size: 1.2em;
    font-weight: bold;
    right: 7vw;
    transition: transform 0.3s;
}

details[open] .faq-summary::after {
    transform: rotate(90deg);
}



/*
------------------------------------------------------------------
-----------------PRICES-FILE---------------------------------------
------------------------------------------------------------------
*/

.main-prices h2 {
    text-align: center;
    margin-top: 2vh;
    margin-bottom: 1vh;
}

.main-prices {
    background-color: #f0ddc3;
    padding-top: 9vh;
}
.main-prices p {
    padding: 0vh 3vh 2vh 3vh ;   /* top, right, bottom, left*/
    text-align: center;
    line-height: 1.6;
}

.main-prices .separator {
    position: absolute;
    justify-content: center;
    border-top: 2px solid #447555;
    width: 15%;
    left: 50%;
    transform: translateX(-50%);
}

.main-prices h3 {
    text-align: center;
    
}

.top-h3 {
    margin-top: 15vh;
}

.season-dates {
    display: block;
    text-align: center;
    font-size: small;
}

.animal-container {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 2vw;
    padding: 0vh 2vw 14vh 2vw;
}

.animal-text {
    font-size: small;
}

/*
------------------PRICES-TABLES------------------------
*/

.prices-table {
    border-collapse: collapse; /* mandatory */
    margin: 1vh 1vh 1vh 1vh;
    width: 95%;
}

.prices-table, .prices-table th, .prices-table td {
    border: 1px solid black;
    padding: 1vh;
    text-align: center;
}

.prices-table th.corner {
    border-top: 0;
    border-left: 0;
}


/*
------------------------------------------------------------------
-----------------VACATION-FILE---------------------------------------
------------------------------------------------------------------
*/

.main-vacation {
    background-color: #f0ddc3;
    padding-top: 9vh;
}

.main-vacation h2 {
    text-align: center;
    margin-bottom: 1vh;
}

.vacation-text {
    line-height: 1.6;
    
    text-align: center;

    padding-left: 3vw;
    padding-right: 3vw;
    padding-top: 2vh;
    padding-bottom: 2vh;

}

.image-block {
    margin-top: 4vh;
}

.image-block img {
    display: block;
    height: auto;
    width: 90vw ;
    margin: 1vh auto;
    border-radius: 20px;
}

.image-block figcaption {
    text-align: center;
    margin-top: 0.5vh;
    padding-bottom: 7vh;
    font-size: 0.7rem;
    color: #666;

}


/*
------------------------------------------------------------------
-----------------Booking-FILE---------------------------------------
------------------------------------------------------------------
*/

.main-booking {
    background-color:#f0ddc3;
    padding-top: 9vh;
    padding-bottom: 40vh;
}

.booking-text {
    display: block;  /* otherwise margin/padding don't work vertically */
    margin: 5vh 2vh 7vh 2vh;
    text-align: center;
    line-height: 1.4;
}

.booking-link-img {
    display: flex;
    justify-content: center;
}

.booking-link-img img {
    width: 40vw;
}


/*
------------------------------------------------------------------
-----------------impressum-FILE; privacy-FILE---------------------------------------
------------------------------------------------------------------
*/

.main-impressum, .main-privacy {
    background-color: #f0ddc3;
    padding-top: 9vh;
}

.main-impressum h2, .main-privacy h2 {
    text-align: center;
    padding: 2vh 1vh 5vh 1vh;
}

.main-impressum h3, .main-privacy h3 {
    padding: 0vh 1vh 1vh 2vh;
}

.main-impressum p, .main-privacy p {
    padding: 0vh 2vh 5vh 2vh;
}

.main-impressum span, .main-privacy span {
    display: block;
    padding: 5vh 1vh 0vh 1vh;
    text-align: right;
}

.main-privacy ul {
    padding: 0vh 2vh 5vh 5vh;
}


/*
------------------------------------------------------------------
-----------------DESKTOP / TABLET WARNING--------------------------
------------------------------------------------------------------
*/

.desktop-warning {
    display: none;
    position: fixed;
    inset: 0;
    background: rgb(0, 0, 0);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    gap: 100px;;
}

.desktop-warning-box {
    background: #f0ddc3;
    padding: 4vh 4vw;
    max-width: 420px;
    text-align: center;
    border-radius: 16px;
    line-height: 1.6;
    width: 400px;
    height: 250px;

}

.desktop-warning-box h2 {
    margin-bottom: 2vh;
}

@media (min-width: 768px) {
    .desktop-warning {
        display: flex;
    }

    body {
        overflow: hidden;
    }
}

/*
------------------------------------------------------------------
-----------------LANDSCAPE-WARNING--------------------------
------------------------------------------------------------------
*/


.landscape-warning {
    display: none;
    position: fixed;
    inset: 0;
    background: rgb(0, 0, 0);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    gap: 8vw;
}

.landscape-warning-box {
    background: #f0ddc3;
    padding: 4vh 4vw;
    max-width: 420px;
    text-align: center;
    border-radius: 25px;
    line-height: 1.6;
    width: 40vw;
    height: 50vh;
}

.landscape-warning-box h2 {
    margin-bottom: 4vh;
}

/* Show only on MOBILE when in LANDSCAPE */
@media (max-width: 767px) and (orientation: landscape) {
    .landscape-warning {
        display: flex;
    }

    body {
        overflow: hidden;
    }
}