/* 
CSS simsav
Created in 2025-12-01.
Tested in Firefox 
Requires CSS Colour Module Level 5
*/

/* imports cinzel and poppins fonts */
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
    /* default fonts */
    --font-primary:poppins, sans-serif;
    --font-secondary:'dela gothic one', serif;

    /* text-colours */
    --text-primary:white;
    --text-secondary:black;

    /* backgrounds */
    --bg-primary:white;
    --bg-secondary:black;

    /* generic colours */
    --colour-white:hsl(0 0% 100%/1);
    --colour-black:hsl(0 0% 0%/1);
    --colour-grey:hsl(0 0% 50%/1);

    /* custom colours */
    --colour-1: hsl(45 76% 93%/1);   /* #EFE7DD */
    --colour-2: hsl(10 26% 34%/1);   /* #562915 */
    --colour-3: hsl(48 100% 78%/1);  /* #FFBF52 */
    --colour-4: hsl(40 100% 93%/1);  /* #FFEAD6 */
    --colour-5: hsl(0 70% 44%/1);    /* #9b2226 */
    --colour-6: hsl(135 32% 23%/1);  /* #31433E */

    /* sosmed gradient */
    --instagram-gradient: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    --whatsapp-colour: 	hsl(142 70% 49%/1);
}
/* selects all elements */
*,*::before,*::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--font-primary);
    scroll-behavior: smooth;
    overscroll-behavior: none;
}
/* navigation bar */
.header{
    background:hsl(from var(--colour-white) h s l /.8);
    position: fixed;
    left:0;
    right:0;
    z-index: 9997;
}
.nav{
    max-width: min(90rem,100%);
    margin: 0 auto;
    padding:.6rem 1.6rem;

    display: flex;
    justify-content: space-between;
    align-items: center;

    position: relative;
}
.nav__ul{
    display: flex;
    list-style: none;
}
.nav__li{
    display: flex;
    padding:.8rem 2rem;
}
.nav__li .nav__a{
    color: currentColor;
    text-decoration: none;
    transition: .15s ease-in-out;
    position: relative;
}
.nav__a::before{
    content: '';
    position: absolute;
    bottom:0;
    left:0;
    width: 0;
    height: 2px;
    border-radius: 1rem;
    background:black;

    transition: width .3s ease;
}
.nav__a:hover::before{
    width: 100%;
}
.nav__logo img{
    width: 100px;
}
/* the sidebar -- must be not visible in pc! */
.nav #sidebar,
.open-sidebar,
.close-sidebar,
.sidebar-overlay{
    display: none;
}

/* main content */
/* .main *{
    translate: 0 1rem;
    transition: all .6s ease;
}
.main *.view{
    translate: 0;
} */

.main{
    display: flex;
    flex-direction: column;   
}
.background{
    background: linear-gradient(
        135deg,
        hsl(from var(--colour-5)h s calc(l + 30)/.6)26%,
        hsl(from var(--colour-4)h s l/1)66%
    );
}
.main .section__title{
    font-family: var(--font-secondary);
    font-weight: 400;
    position: relative;
    text-align: center;
    font-size: clamp(1.5rem,5vw,2rem);
    margin-bottom: 4rem;
    text-shadow: 0 0 30px var(--colour-4);
}
.main .section__title::before{
    content:'';
    position: absolute;
    bottom: -.6rem;
    left:50%;
    translate: -50%;
    width:5rem;
    height: 3px;
    border-radius: 1rem;
    background: black;/*<---Replace This !! */
}
.main .section__parent{
    padding:3rem 1.5rem 5rem;

    width: min(88rem,100%);
    margin: 0 auto;
}
.main section{
    scroll-margin-top: 40px;
}
.flex-only{
    display: flex;
}
.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* hero */
.hero{
    position: relative;
    min-height: 100dvh;
    padding: 1rem;

    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    flex-direction: column;

    gap:3rem;
    color:var(--text-primary);
}
.hero::after{
    content: '';
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        var(--colour-1) 0%,
        var(--colour-2) 45%
    );
    z-index: -1;
}
.hero__captions{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column-reverse;
}
.hero__captions .hero__heading{
    font-size: clamp(2rem,5vw,4.5rem);
    font-weight: 600;
    font-family: var(--font-secondary);
    text-shadow: 0 0 30px hsl(from var(--colour-1) h s l/.6);

    
    background: linear-gradient(
            45deg, 
        var(--colour-5)5%,
        var(--colour-4)50%
    );
    background-clip: text;
    color:transparent;
}
.hero__captions .hero__paragraph{
    font-size:clamp(1.2rem,3.5vw,2.5rem);
    font-weight: 400;
    font-family: var(--font-secondary);
    text-shadow: 0 0 30px hsl(from var(--colour-white) h s l/.7);
    color:var(--text-primary);
}

.hero__tags{
    position: relative;
    
    display: flex;
    justify-content: center;
    align-items: center;
    gap:clamp(1rem,4vw,2rem);
    flex-wrap: wrap;
}
.hero__tags .hero__tag{
    border:2px solid hsl(from var(--colour-white)h s l/.4);
    border-radius: 2rem;
    
    background-clip: padding-box;
    box-shadow: 0 0 30px hsl(from var(--colour-2)h s l/1);
    color:var(--text-primary);
    text-shadow: 0 0 2rem var(--colour-black);
    padding:1rem;

    display: flex;
    align-items: center;
    gap:1rem;

    transition: .2s ease;
}
.hero__tag svg{
    width:2rem;
   height:2rem;
    fill:currentColor;
}
.hero__tag a{
    color: currentColor;
    text-decoration: none;
}
.hero__tag:hover{
    scale:1.1;
    translate: 0 -.24rem;
    box-shadow: 0 1rem 30px var(--colour-3);

}

.hero__countdown{
    box-shadow: 0 12px 60px hsl(from var(--colour-white) h s l/.4);
    border:2px solid hsl(from var(--colour-white) h s l /.37);
    border-radius: 1rem;
    padding:clamp(1rem,2vw,3rem);
    width:min(28rem,100%);

    display: flex;
    flex-direction: column;
    gap:.5rem;
}
.hero__countdown-title{
    font-size:1.5rem;
    font-weight: 700;
}
.hero__countdown .hero__countdown-title{
    text-align: center;
    color: currentColor;
}
.hero__countdown .hero__time{
    display: flex;
    gap:1rem;
}
.hero__time .hero__time-unit{
    background: linear-gradient(
        170deg,
        hsl(from var(--colour-2)h s l/.6),
        hsl(from var(--colour-4)h s l/.3)
    );
    border:2px solid hsl(from var(--colour-white) h s l/.4);

    padding:1rem;
    border-radius: 1rem;

    display: flex;
    align-items: center;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
}
.hero__time-unit .hero__time-number{
    font-size:1.5rem;
    font-weight: 600;
}

/* About */
.about .decorations img{
    width:5rem
}
.about .decorations-alt img{
    width:23rem;
}
.about .about__content{
    gap:3rem;
}
.about .about__img{
    background: hsl(from var(--colour-white)h s l/.7);
    box-shadow: 0 10px 30px hsl(from var(--colour-black) h s l/.3);
    border-radius: 1rem;
    padding:1rem;
    flex: 0 0 auto;
}
.about__img img{
    width: min(36rem,100%);
    height: auto;
}
.about__captions{
    display: flex;
    flex-direction: column;
    gap:1rem;
}
.about__captions .about__paragraph{
    line-height: 1.6;
    font-size: 1.1rem;
}

.whats-on__cards{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap:1rem;
    grid-template-areas: 
    "card-1 card-1"
    "card-2 card-3"
    "card-4 card-5";
    max-width: min(70rem,100%);
    margin: 0 auto;
}
.whats-on__card{
    padding:3rem;
    box-shadow: 0 10px 30px hsl(from var(--colour-black) h s l/.2);
    border-radius: 1em;
    background: linear-gradient(
        135deg,
        var(--colour-4)25%,
        var(--colour-5)250%
    );

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    text-align: center;
    gap:1.5rem;
}
.whats-on__card h3{
    font-size:clamp(1.2rem,3vw,2rem);
}
.whats-on__card svg{
    width: clamp(4rem,9vw,6rem);
    height: auto;
    fill: var(--colour-2);
}
.whats-on__card .decorations{
    position: absolute;
    width: 4rem;
    height: auto;
}
.d1{
    top:-5%;
    left:-5%;
}
.d2-alt{
    top:2%;
    right:-5%
}
.d2{
    bottom:-3%;
    right:-5%;
}
.d1-alt{
    bottom: -3%;
    left: -5%;
}

/* teaser */

.teaser__content svg{
    width:7rem;
   height:7rem;
    fill: var(--colour-2);
    opacity: .7;
}

/* faq */
.faq__content{
    display: flex;
    gap:.5rem;
    flex-direction: column;
}
.faq__title{
    user-select: none;
    cursor: pointer;
}
.faq__expanded{
    padding:1rem;
    background: hsl(from var(-sour-white)h s l/.6);
    border-radius: 1rem;
    box-shadow: 0 0 30px hsl(from var(--colour-2)h s l/.5);
}
.faq__details-content{
    margin-top:1rem;
}

/* event rewind */
.event-rewind__cards{
    display: flex;
    gap:1rem;
    flex-wrap: wrap;
}
.event-rewind__card{
    flex:1 1 min(34rem,100%);
    padding:clamp(1.3rem,8vw,3rem);
    border-radius: .8rem;
    box-shadow: 0 0 30px hsl(from var(--colour-black)h s l/.25);
    background:linear-gradient(
        270deg
        hsl(from var(--colour-5)h s l/1)-210%,
        hsl(from var(--colour-4)h s l/1)25%
    );
}
.event-rewind__card-title{
    text-align: center;
}
.event-rewind__card-title h3{
    font-size: clamp(2.1rem,5vw,2.5rem);
    font-family: var(--font-secondary);
    margin-bottom:1rem;
}
.event-rewind__card-img{
    display: flex;
    flex-direction: column;
    gap:2rem;
}
.event-rewind__card-img img{
    width:100%;
    border-radius: .6rem;
}

/* contact us */
.contact-us{
    position: relative;
}
.contact-us .decoration{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/assets/img/decorations/wayang_people.png) left/19% no-repeat;
    transform: scaleX(-1);
    opacity: .7;
}
.contact-us__card{
    border:2px solid hsl(from var(--whatsapp-colour)h s calc(l + 10)/.6);
    border-radius:2.5rem;
    padding:1rem;
    background:var(--whatsapp-colour);
    box-shadow:0 0 2rem hsl(from var(--whatsapp-colour)h s l/.6);

    transition: all .3s ease;
}
.contact-us__card .contact-us__link{
    color:var(--text-primary);
    text-decoration: none;
    align-items: center;
}
.contact-us__link svg{
    fill: var(--text-primary);
    width: 2.5rem;
}
.contact-us__card:hover{
    scale:1.05;
    translate: 0 -.4rem;
    
}

/* footer */
.footer{
    position: relative;
}
.footer::before{
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        hsl(from var(--colour-4)h s l/1)-1%,
        hsl(from var(--colour-5)h s l/.3)82%
    );
    z-index: -1;
}
.footer__content{
    width: min(100rem,100%);
    margin:0 auto;
    padding:1.5rem;
    border-top: 1px solid hsl(from var(--colour-black)h s l/.3);
    gap:3rem;

    justify-content: space-between;
}
.footer__heading{
    font-size: 1.5rem;
}
.footer__heading.footer__heading--brand-title{
    font-size: 2rem;
    max-width: 16ch;
    text-shadow: 0 0 3rem hsl(from var(--colour-black)h s l/.45);
}
.footer__aside{
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.footer__logo img{
    width: min(16rem,9rem);
}
.footer__ul{
    list-style: none;
}
.footer__li .footer__a{
    color:currentColor;
    text-decoration: none;
}
.footer__social-media-links{
    flex-direction: column;
    align-items: flex-start;
    gap:.5rem;
    min-width: 0;
}
.footer__social-media-link a{
    color: var(--text-primary);
    text-decoration: none;
    padding: .6rem;
    border-radius: 2rem;
    background: var(--instagram-gradient);
    min-width: 0;
}
.footer__social-media-link a svg{
    width: 3rem;
   height: 3rem;
   fill: currentColor;
}