body.light {
    padding-top: 0px;
}

.passport {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  background-color: #F5F4EF
}

.passport-viewport {
  overflow: hidden;
  width: 100%;
}

.passport-track {
  display: flex;
  transition: transform 0.25s ease;
}

#region-name {
text-transform: uppercase;
padding-bottom: 2rem;
font-size: 1.75rem;
}

.stamp {
  flex: 0 0 calc(100% / 7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}

.stamp img {
  width: 80%;
  height: auto;
}

.nav {
  background: rgba(0, 0, 0, 0.3);
  color: #FFF;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 10px;
  cursor: pointer;
}

@media (max-width: 900px) {
  .stamp {
    flex: 0 0 calc(100% / 4);
  }
}

.passport span {
    font-size: 1rem;
    font-weight: bold;
}

.active-reg {
    color: #8D0405;
	fill: #8D0405;
}

.past-reg {
    color: #375562;
	fill: #375562;
}

.tbd-reg {
    color: #bcbec0;
	fill: #bcbec0;
}

/*Interactive Map*/

        .map-flex {
            display: flex;
            flex-direction: column;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Mobile-first: Stack vertically with custom order */
        #interactiveMap {
            order: 2;
            padding: 20px;
        }

        .right-column-wrapper {
            display: contents; /* This makes children participate in parent flex layout on mobile */
        }

        #mapDetails {
            order: 1;
            padding: 20px;
        }

        #mapDetails div, #mapDetails h3, #mapDetails p {
           padding: 0;
        }

        .menu-link {
            order: 3;
            padding: 20px;
        }

        /* Desktop: Side by side layout */
        @media (min-width: 768px) {
            .map-flex {
                flex-direction: row;
                align-items: center;
            }

            #interactiveMap {
                order: 1;
                flex: 0 0 50%;
                max-width: 50%;
            }

            .right-column-wrapper {
                display: flex; /* Becomes a flex container on desktop */
                flex-direction: column;
                order: 2;
                flex: 0 0 50%;
                max-width: 50%;
            }

            #mapDetails {
                order: 2;
                flex: 0 0 50%;
            }

        /*#mapDetails div, #mapDetails h3, #mapDetails p {
           padding: 0 0 2rem;
        }*/

            .menu-link {
                order: 3;
            }
        }

    [data-region] {
  transition: transform 0.2s ease, fill 0.2s ease, filter 0.3s ease;
  cursor: pointer;
}

[data-region].hovered {
  transform: translateY(-1.25px);
  filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.5));
}

[data-region].active {
  transform: translateY(-0.75px);
  filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.5));
  transition: filter 0.25s ease;
}

[data-region].tbd-reg.active {
  transform: 0;
  filter: none;
  transition: none;
}

[data-region].stamp.active-reg.hovered, [data-region].stamp.active-reg.active{
  background-color: rgb(241 90 64 / 5%);
  transform: translateY(-1.25px);
  filter: none;
}

/*[data-region].stamp.tbd-reg.hovered, [data-region].stamp.tbd-reg.active{
  background-color: rgb(67 151 139 / 5%);
  transform: translateY(-1.25px);
  filter: none;
}*/

[data-region].stamp.past-reg.hovered, [data-region].stamp.past-reg.active{
  background-color: rgb(55 85 98 / 5%);
  transform: translateY(-1.25px);
  filter: none;
}
  [data-region="veneto"] {
    fill: #8D0405
   }
/*Past Region
  [data-region="calabria"], [data-region="campaniaRegion"], [data-region="tuscany"], [data-region="piedmont"], [data-region="puglia"], [data-region="sicily"] {
    fill: #375562;
  }

  [data-region="sardinia"], [data-region="aostaValley"], [data-region="molise"], [data-region="lazio"], [data-region="abruzzo"], [data-region="umbria"], [data-region="marche"], [data-region="emilliaRomagna"], [data-region="liguria"], [data-region="lombardy"], [data-region="friuli"], [data-region="trentinoAltoAdige"] {
    fill: #BCBEC0;
  }

 /* [data-region="veneto"].active, [data-region="liguria"].active {
    fill: #bcbec0;
    transform: none;
    filter: none;
    transition: none;
   } */

[data-region].is-interactive.hovered {
  transform: translateY(-1.25px);
}


/*Travel Stamp*/
/*#travelStamp {
  transition: opacity 0.25s ease;
}

#travelStamp.is-visible {
  opacity: 1;
}*/

#travelStamp {
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

#travelStamp.is-visible {
  opacity: 1;
  transition: opacity 0.25s ease;
  pointer-events: auto;
}

#travelStamp:not(.is-visible) {
  opacity: 0;
}

#mapLegend .col {
  position: absolute;
  max-width: 180px;
  right: 0%;
  text-align: left;
  background-color:rgb(255 255 255 / 50%)
}

#mapLegend .d-flex.row {
  padding: 5px 0;
  justify-content: center;
}

#mapLegend .d-flex.row span {
    font-size: .8rem;
    margin: auto 0;
    font-weight: bold;
    text-shadow: 1px 1px rgb(124 123 123 / 33%);
}
    .box.active-reg {
        background-color: #8D0405;
        width: 25px;
        height: 25px;
    }
    .box.past-reg {
        background-color: #375562;
        width: 25px;
        height: 25px; 
    }
    .box.tbd-reg {
        background-color: #bcbec0;
        width: 25px;
        height: 25px;
    }
        @media (max-width: 768px) {
        #mapLegend .col {
            position: absolute;
            max-width: 120px;
            right: 10px;
            text-align: left;
            background-color: rgb(255 255 255 / 50%);
        }

        #mapLegend .d-flex.row span {
            font-size: .6rem;
            margin: auto 0;
            font-weight: bold;
            text-shadow: 1px 1px rgb(124 123 123 / 33%);
            padding: 0px 8px;
        }

        .box {
            padding: 0px 10px;
            height: 20px;
        }
       }

.map-controls {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 2.5rem;
    bottom: 5rem;
    max-width: 1.75rem;
}

@media (max-width: 500px) { 
.map-controls {
    bottom: 2rem;
    max-width: 1.75rem;
  }
}
#zoomIn, #zoomOut {
    border: 1px solid #58595B;
    color: #000;
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}

/* Global */

@media (max-width:500px) {
  #main-content {
    margin-top: -100px;
  }
}
.container {
    margin-top: 0;
}

/* Background Colours */

.skb-beige {
    background-color: #F9DBBC;
}

.skb-blue {
    background-color: #375562;
}

.skb-orange {
    background-color: #F15A40;
}

.skb-teal {
    background-color: #43978B;
}

.skb-gray {
    background-color: #F5F4EF;
}

/*Text Colours*/
.skb-beige-txt {
    color: #F9DBBC;
}

.skb-blue-txt {
    color: #375562;
}

/* Padding */

.pd-top {
    padding: 2rem 0 0;
}

.pd-bot {
    padding: 0 0 2rem;
}

.pd-right {
    padding-right: 2rem;
}

.pd-left {
    padding-left: 2rem;
}

.pd-x {
    padding: 0 2rem;
}

.pd-y {
    padding: 2rem 0;
}

.pd-all {
    padding: 2rem;
}

/* Button */

.link-btn {
    border: none;
    padding: 10px 50px;
    font-weight: 600;
    text-decoration: none !important;
    text-transform: uppercase;
    border-radius: .25rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}

.link-btn.is-visible {
  opacity: 1;
  visibility: visible;
}

.link-btn:hover {
    text-decoration: none !important;
    color: var(--teal) !important;
    background-color: #FFF !important;
}

.link-btn2 {
    border: none;
    padding: 10px 50px;
    font-weight: 600;
    text-decoration: none !important;
    text-transform: uppercase;
    border-radius: .25rem;
}

.link-btn2:hover {
    text-decoration: none !important;
    color: var(--teal) !important;
    background-color: #FFF !important;
}

.menu-link-btn {
    border: none;
    padding: 10px 50px;
    font-weight: 600;
    text-decoration: none !important;
    text-transform: uppercase;
    border-radius: .25rem;
}

.menu-link-btn:hover {
    text-decoration: none !important;
    color: var(--teal) !important;
    background-color: #FFF !important;
}

/* Images */

video.regionPage {
    max-width: 600px;
    min-height: 360px;
    width: 100%;
    /*padding-right: 5rem;*/
    background-color: transparent;
    object-fit: cover;
}

video.regionPageVert {
    max-height: 360px;
    margin: auto;
    width: 100%;
    height: auto;
    background-color: #000;
    padding: 0;
    object-fit: contain;
}



img.chefPhoto {
max-height: 600px;
width: auto;
}

@media (max-width: 500px) { 
  .mobile-text-center {
    text-align: center;
   }
  img.chefPhoto {
    max-height: 360px;
   }
  video.regionPage {
    margin: auto;
    min-height: 360px;
    width: 100%;
    background-color: transparent;
    padding: 0;
    object-fit: cover;
  }
video.regionPageVert {
    margin: auto;
    width: 100%;
    height: auto;
    background-color: transparent;
    padding: 0;
    object-fit: contain;
}

.video.is-playing {
  background: #000;
}

.pd-vid {
padding: 0px !important;
}
  .chef-section-image {
  order: 1;
  }
  .chef-section-text {
  order: 2;
 } 
  .mobile-pd-top {
  padding-top: 2rem;
  }
  .stamp {
    flex: 0 0 calc(100% / 2);
  }
  .passport img, .nav {
    touch-action: manipulation;
    -ms-touch-action: manipulation; /* IE/Edge */
  }
}
/*Interactive Map*/



.travel-stamp {
    max-width: 33%;
}

.italyMap {
    max-height: 75vh;
  touch-action: none; /* disables browser gestures */
  cursor: grab;
}

#italyMap {
    touch-action: none;
    cursor: grab;
}

#italyMap:active, #italyMap.dragging {
  cursor: grabbing;
}

#mapDetails {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* Hero Video*/

.hero-video {
    position: relative;
    aspect-ratio: 21 / 9; /* desktop ratio */
    /*max-height: calc(100vh - 110px);*/
    width: 100%;
    overflow: hidden;
    /*min-height: 600px;*/
}

@media (max-width: 700px) {
    .hero-video {
        aspect-ratio: 9 / 16;
    }
}

#heroVideo {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vid-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    display: none;
}

#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}

h3.highlight {
  color: red;           /* Change text color */
  font-weight: bold;    /* Make the text bold */
  text-decoration: underline; 
}

#region-excerpt {
    font-size: 1rem;
    font-style: italic;
    padding: .5rem 0;
    font-family: Poppins, sans-serif;
}

/*Overlay additions*/
.container.hero-overlay {
top: 75%;
padding-left: 5rem;
}

@media (max-width: 700px) {
.container.hero-overlay {
top: 75%;
padding-left: 0;
   }
}

.hero-disclaimer {
font-size: 1rem;
padding-top: 1rem;
}