* {
    box-sizing: border-box;
}

body {
    font-family: catamaran, Helvetica, Tahoma, Geneva, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #ffa619;
}

.background-div {
    background: transparent;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url('/images/hongkong-salsa.png') repeat; /* Tile the background image */
    background-size: 500px; /* Adjust the size as needed */ 
    background-attachment: fixed; /* Keep the background image fixed */
    z-index: -1;
}

.background-div:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(255, 165, 0, 0.95); /* Orange color with 50% opacity */ 
    z-index: -1; /* Behind content */ 
}

body a {
    color: #ffa619;
}

.content-above-navigation {
    /* Styles for content above navigation bar */
    /* Ensure it has some height to make the navigation sticky */
    /* height: 140px; */
}

.content-above-navigation img {
    padding-top: 15px;
    padding-bottom: 10px;
    height: 150px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.hks-banner {
    position: relative;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top: 0;
    height:530px;
    z-index: 1;
    overflow: hidden; 
}

.hks-banner img {
    height: 530px;
   /* display: block;
    margin-left: auto;
    margin-right: auto; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top: 0;
    z-index: 0;
    overflow: hidden;
 
}

@media screen and (max-width: 600px) {
    .hks-banner {
        height: 265px; /* Set the reduced height for hks-banner */
    }
    .hks-banner img {
        height: 265px; /* Set the reduced height for hks-banner img */
    }
    .hks-title {
        font-size: 30px !important;
    }
}

.hks-header {
    background: #ffffff;
    padding-top: 5px;
    padding-bottom: 20px;
    padding-left: 10px;
    text-align: center;
}

.hks-title {
    text-align: center;
    position: relative;
    z-index: 2;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 60px;
}

.hks-bodytext {
    color: #605c72;
    margin-bottom: 0;
}

.hks-updated {
    color: #ffa619;
    margin-bottom: 0;
    font-weight: bold;
}

/* Initial styling for the top bar */
.top-bar {
    position: sticky;
    top: 0;
    z-index: 1001;
    display: flex;
    /* justify-content: space-between; */
    justify-content: center;
    align-items: center;
    background-color: #ffa619; /* Optional background color */
    padding: 10px;
    height: 170px;
    transition: all 0.3s ease-in-out;
}

.top-bar img{
   position: absolute; left: 50%; transform: translateX(-50%); 
}

.top-bar .top-links {
    margin-left: auto;
    position: relative;
}

.top-logo {
    height: 150px; /* Initial logo size */
    /* width: 150px; */
    transition: all 0.3s ease-in-out; /* Smooth shrinking */
}

.top-links {
    display: flex;
    flex-direction: column;
    gap: 3px; /* Space between links */
}

.top-link {
    text-align: center;
    padding: 5px 10px;
    text-decoration: none;
    color: white;
    /* background: linear-gradient(35.5deg, #d86d00 0%, #d86d00 2%, #ffa619 65%, #ffa619 100%); */
    background: linear-gradient(65.5deg, #ffa619 0%, #ffa619 25%, #d86d00 90%, #d86d00 100%);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 5px; /* Optional for rounded corners */
    font-size: 16px;
    transition: all 0.3s ease-in-out;  /* Smooth transition for style changes */
}

.top-bar .link-container {
    margin-left:auto;
    display: flex; gap: 5px; /* Adjust gap as needed */ 
}

.top-links a:hover { 
    color: #e03313; /* Hover color */
}

.top-links a:visited { 
    color: #FFF; /* Hover color */
}

.top-links a:active { 
    color: #FFF; /* Hover color */
}

.top-title {
    font-size: 40px;
    font-weight: bold;
    color: #e56412;
    display: none;
}

.top-link.current {
    /* background-color: #f5f5f5; */
    /* border: 2px solid rgba(255, 255, 255, 0.5); */
    /* border: 2px solid; */
    /* border-image: linear-gradient(45deg, #ffcece, #ea9090) 1; */
    position: relative; /* To allow absolute positioning of the arrow */ 
    display: inline-block; /* So the arrow can be positioned relative to this container */
}

.triangle-arrow { 
    position: absolute; 
    left: -18px; /* Adjust as needed to position the arrow outside the container */ 
    top: 50%; 
    transform: translateY(-50%); /* Center vertically */ 
    width: 0; 
    height: 0; 
    border-top: 6px solid transparent; 
    border-bottom: 6px solid transparent; 
    border-left: 10px solid #fff; /* Arrow color */ 
}

/* Shrink behavior when scrolling */

.top-bar.shrink {
    background: linear-gradient(35.5deg, #ffa619 0%, #ffa619 45%, #d86d00 90%, #d86d00 100%);
    height: 100px;
    transition: all 0.3s ease-in-out;
}

.top-bar.shrink .top-title{
    display: contents;
    transition: all 0.3s ease-in-out;
}

.top-bar.shrink .top-logo {
    height: 80px; /* Shrink logo */
    /* width: 50px; */
    margin-left: 10px;
}

.top-bar.shrink .top-links {
    /* flex-direction: row; /* Change to row layout */
    gap: 2px; /* Space between links in row layout */
}

.top-bar.shrink .top-links a:hover { 
    color: #e03313; /* Hover color */
}

.top-bar.shrink .top-links a:visited { 
    color: #FFF; /* Hover color */
}

.top-bar.shrink .top-links a:active { 
    color: #FFF; /* Hover color */
}

.top-bar.shrink .top-link {
    background: none; /* Remove background gradient */
    color: white; /* Optional text color change */
    padding: 5px 10px; /* Adjust padding */
}



.days-navigation {
    background-color: #d86d00;
    padding: 10px 0;
    text-align: center;
    /* Sticky code */
    width: 100%;
    z-index: 999;
    position: sticky;
    top: 100px; /* Adjust based on height of the top bar when shrunk */
}

.days-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.days-navigation ul li {
    display: inline;
    margin-right: 1%;
}

.days-navigation ul li a {
    color: #fff;
    text-decoration: none;
    padding: 0.3% 1%;
    border-radius: 5px;
}

.days-navigation ul li a:hover {
    background-color: #ffa619;
    /* transform: scale(1.1); */
}

.events-grid {
    /*
    display: grid;
    grid-template-columns: repeat(1, minmax(300px, 1fr));
    gap: 0 20px;
    */
}

.section {
    /* margin-bottom: 40px;  Add space between sections */
    /* background-color: #d86d00; */
    background: linear-gradient(35.5deg, #d86d00 0%, #d86d00 2%, #ffa619 65%, #ffa619 100%);
    padding-left: 10px;
    color: white;
    grid-column: 1 / -1; /* This will span the full width of the grid */
    scroll-margin-top: 137px; /* Adjust as needed */
    display: flex;
    flex-direction: column;
}

/* carousell */
.weekday-div {
    display: flex;
    overflow-x: scroll;
    width: 100%;
}
.weekday-div > .event-shell:only-child {
    /* flex: 0 0 50%;  Adjusted width for single inner div */
}

.event-shell {
    flex: 0 0 350px; /* Width of each inner div */
    /* margin: 0px;  Optional spacing between divs */
}
/* carousell end */

.no-events{
    /*
    border-radius: 20px;
    margin: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    */
    background-color: #FFFFFF;
    padding: 20px 12px 20px 12px;
}
.no-events-text {
    font-size: 14px;
    line-height: 1.2;
    margin: 0;
    color: #383838;
}
.no-events-text a, 
.no-events-text a:visited, 
.no-events-text a:hover, 
.no-events-text a:active { 
    color: #d86d00; 
    text-decoration: none; /* Optional: Remove underline */ 
}

.event {
    display: flex;
    flex: 0 0 1fr;
    flex-direction: column;
    position: relative;
    
    border-radius: 20px;
    margin: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    
}

.event div {
    width: 100%;
}

.regular {
    /* Regular event styles */
    background-color: #f5f5f5;
    border: 2px solid #363636;
}

.special {
    /* Special event styles */
    background-color: #f5f5f5;
    border: 2px solid #ff0000;
}

.event.special::before {
    content: "SPECIAL NON-WEEKLY EVENT";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto; /* Adjusted to fit text */
    white-space: nowrap; /* Prevent text wrapping */
    padding: 0 7px; /* Optional padding for better appearance */
    height: 16px;
    background-color: red; /* Changed color to blue for better visibility */
    color: white; /* Text color */
    font-size: 10px; /* Small but readable font size */
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 600;
    text-align: center; /* Center the text */
    z-index: 10; /* Ensure the box appears above other content */
}
    
.event.regular::before {
    content: "REGULAR WEEKLY EVENT";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto; /* Adjusted to fit text */
    white-space: nowrap; /* Prevent text wrapping */
    padding: 0 7px; /* Optional padding for better appearance */
    height: 16px;
    background-color: #363636; /* Changed color to blue for better visibility */
    color: white; /* Text color */
    font-size: 10px; /* Small but readable font size */
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 600;
    text-align: center; /* Center the text */
    z-index: 10; /* Ensure the box appears above other content */
}

.event-poster {
    position: relative;
    display:inline-block;
    text-align: center;
    font-size: small;
    padding: 0;
    margin: 0;
    z-index: 1;
}

.event-poster img {
    max-width: 100%;
    height: auto;
    border-radius: 18px 18px 0 0;
    display: block;
    padding: 0;
    margin: 0;
}

.event-details {
    padding: 0 10px 0 10px;
}

.event-name {
    font-size: 18px;
    margin: 4px 0 0 0;
    padding: 0;
    font-weight: bold;
    line-height: 1;
}

.event-date-time {
    font-size: 12px;
    margin: 0;
    color: dimgrey;
    font-weight: bold;
}

/* location icon */
.event-location {
    margin-top: 4px;
    display: flex; 
    align-items: flex-start;
}
.event-location i { 
    margin-right: 10px; 
    margin-top: 0; /* Adjust as needed to align with text */ 
    color: red;
}
.event-location-text {
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    line-height: 1.2;
}
/* location icon end */

/* event entry icon */
.event-entry {
    margin-top: 6px;
    display: flex; 
    align-items: flex-start;
}
.event-entry i { 
    margin-right: 12px; 
    margin-top: 0; /* Adjust as needed to align with text */ 
    color: red;
}
.event-entry-text {
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    line-height: 1.2;
}
/* event entry end */

.event-data {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 10px;
}

.event-venue {
    font-size: 14px;
    /* padding-right: 10px; */
    margin-top: 0;
    margin-bottom: 0;
}

.event-address {
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 0;
}

.event-entry-fee {
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 0;
}

.music-ratio {
    margin-bottom: -9px;
    position: relative;   
}

.event .music-ratio {
    width: 90%;
}

.music-ratio-wrapper {
    margin-top: 20px;
}

.music-ratio-wrapper::before {
    content: "Music Mix";
    position: absolute;
    left: 10px;
    transform: translateY(-15px);
    width: auto; /* Adjusted to fit text */
    white-space: nowrap; /* Prevent text wrapping */
    padding: 0 10px; /* Optional padding for better appearance */
    height: 16px;
    background-color: #000000; /* Changed color to blue for better visibility */
    color: white; /* Text color */
    font-size: 10px; /* Small but readable font size */
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 600;
    text-align: center; /* Center the text */
    z-index: 10; /* Ensure the box appears above other content */
}
.music-bar {
    display: inline-block;
    height: 20px;
}

.text-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: black;
    text-align: right;
    padding-right: 2px;
    line-height: 19px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.8rem; /* Adjust font size as needed */
    border: 1px solid #000000;
}

.event-blurb {
    font-size: 12px;
    line-height: 1.2;
}

.organiser-info {
    display: flex; 
    flex-direction: column; 
    color: dimgrey;
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.organiser-row { 
    display: flex; 
}

.organiser-row .label { 
    width: 20px;
    flex-shrink: 0;
    margin-top: 3px;
    color: red;
}

.organiser-contact {
    font-weight: normal;
    line-height: 1.2;
}

.organiser-contact a {
    color: #000000;
}
.hks-footer {
    padding: 10px;
    color: #ffffff;
    background-color:  #000;
}

.hks-footertext {
    margin-bottom: 0;
    text-align: center;
}

/* lightbox code start */

:root {
    /* --image-url: url('event1.jpg'); */
    --image-url: none;
}

.lightbox-content img {
    max-width: 90%;
    max-height: 90%;
    display: block;
    margin: 0 auto;
}

.open-lightbox {
    display: block;
}

.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

.lightbox-content {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    font-size: 30px;
    text-decoration: none;
    cursor: pointer;
    z-index: 99999; /* Set a high z-index value */
}

.close:hover {
    color: #ccc;
}

.lightbox:target {
    display: block;
}

.lightbox:target .lightbox-content img {
    content: var(--image-url);
}

/* lightbox code end */

/* mobile formatting */
@media (max-width: 600px) {
   
/* carousell */
.weekday-div > .event-shell:only-child {
    flex: 0 0 100%; /* Adjusted width for single inner div */
}

.event-shell {
    flex: 0 0 300px; /* Width of each inner div */
    /* margin: 0px;  Optional spacing between divs */
}
/* carousell end */
    .top-bar.shrink .top-title{
    display: none;
    transition: all 0.3s ease-in-out;
}
    
   
    
}
@media only screen and (max-width: 77.6mm) {  
 .top-links {
        gap: 2px;
    }

    .top-link {
        font-size: 12px;
        padding: 2px 5px;
    }
    
    .top-bar.shrink .top-links {
        gap: 2px; /* Space between links in row layout */
    }

    .top-bar.shrink .top-link {
        padding: 2px 5px; /* Adjust padding */
    }
    
    .top-bar.shrink .triangle-arrow { 
    position: absolute; 
    top: -16px; /* Adjust as needed to position the arrow outside the container */ 
    left: 50%; 
    transform: translateX(-50%); /* Center vertically */ 
    width: 0; 
    height: 0; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-top: 10px solid #fff; /* Arrow color */ 
    }
    
}
/* Styles for screens between 600px and 870px */ 
@media (min-width: 601px) and (max-width: 870px) {
    

}
@media (max-width: 870px) {
    .top-bar.shrink .top-title{
    display: none;
    transition: all 0.3s ease-in-out;
    }
    
    .top-bar.shrink img{
        position: unset; 
        left: unset; 
        transform: unset; 
    }
    
    .top-bar.shrink {
        justify-content: space-between;
    }
    
    .top-bar.shrink .top-links {
        margin-left: unset;
        position: unset;
    }
    
    .top-bar .link-container {
    flex-direction: column;
    }
    .top-bar.shrink .link-container {
    flex-direction: unset;
    }
    
     .top-links {
        gap: 2px;
    }

    .top-link {
        font-size: 12px;
        padding: 2px 5px;
    }
    
    .top-bar.shrink .top-links {
        gap: 2px; /* Space between links in row layout */
    }

    .top-bar.shrink .top-link {
        padding: 2px 5px; /* Adjust padding */
    }
    
    .top-bar.shrink .triangle-arrow { 
    position: absolute; 
    top: -16px; /* Adjust as needed to position the arrow outside the container */ 
    left: 50%; 
    transform: translateX(-50%); /* Center vertically */ 
    width: 0; 
    height: 0; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-top: 10px solid #fff; /* Arrow color */ 
    }
    
}