/* Global */
main {
    padding: 0;
}
.half-size {
    font-size: 50%;
}


/***************************************************************************/
/* Introduction */

.festival-title-banner {
    display: block;
    overflow: hidden;
    position: relative;


    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
@supports (-webkit-touch-callout: none) {
    .festival-title-banner {
        /* Work around for iOS's broken implementation of background-attachment: fixed; */
        background-attachment: scroll;
        background-size: 300%;
        background-position: 50% 0%;
    }
}
.festival-title-banner .block-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -10;

}
.festival-title-banner .block-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.festival-title-summary {
    position: absolute;
    transform: translateY(-100%);
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.0),
        rgba(0,0,0,0.5)
    );
    padding-top: 10em;
    font-size: 1.5em;
    color: white;
    width: 100%;
    text-align: center;
    text-shadow: 0em 0em 0.2em black;
}

.festival-title-banner-content-title {
    overflow: visible;
    z-index: 1;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0;
    position: relative;
    transform: translateY(-15%);
}

.festival-title-banner-content-title * {
    z-index: 1;
}
.festival-title-banner-content-title::before {
    content: '';
    z-index: 0;
    /* margin: 4em; */
    transform: rotate(-4deg);
    height: 20em;
    width: 120%;
    background-color: rgba(0,0,0,0.35);
    backdrop-filter: blur(7px);
    position: absolute;
    left: -10%; right: -10;
    /* border: 1px solid red; */
}

.festival-title-banner-content-title h1,
.festival-title-banner-content-title h2,
.festival-title-banner-content-title h3,
.festival-title-banner-content-title h4,
.festival-title-banner-content-title h5,
.festival-title-banner-content-title h6 {
    color: white;
    text-shadow: 
        0em 0em 0.1em var(--color-accent-alt),
        0em 0em 0.3em var(--color-accent);
    font-size: 6.5em;
    margin: 0;
    padding: 0;

}

@media screen and (max-width: 750px) {
    .festival-title-banner-content-title h1,
    .festival-title-banner-content-title h2,
    .festival-title-banner-content-title h3,
    .festival-title-banner-content-title h4,
    .festival-title-banner-content-title h5,
    .festival-title-banner-content-title h6 {
        font-size: 4.5em;
    }
}

.festival-title-banner-content-content {
    padding: 5em;
    font-size: 1.25em;

    background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
}

.festival-title-banner-content-content h1,
.festival-title-banner-content-content h2,
.festival-title-banner-content-content h3,
.festival-title-banner-content-content h4,
.festival-title-banner-content-content h5,
.festival-title-banner-content-content h6 {
    margin-bottom: 1em;
}

.festival-title-banner-content-content p {
    font-size: 1.25em;
}

@media screen and (max-width: 750px) {
    .festival-title-banner-content-content {
        font-size: 1em;
        padding: 2em;
    }
}


/***************************************************************************/
/* Discover */


.discover-bar {
    padding: 2em 4em;
    background-color: var(--color-accent);
    background: linear-gradient(
        180deg,
        rgb(40, 0, 73) 10%,
        /* var(--color-accent-muted) 50%, */
        /* var(--color-accent-alt), */
        var(--color-accent-muted) 100%
    );
    position: sticky;
    top: 0;
    z-index: 1;

    box-shadow: 
        0 0.5em 0.5em -0.5em rgba(0,0,0,0.5),
        0 0.5em 1em -1em rgba(0,0,0,1.0);
}

.discover-bar ~ .img-info-banner {
    z-index: 0;
}
.discover-bar ~ * { 
    z-index: 100; 
    position: sticky;
    background-color: white;
}

.discover-bar h1, 
.discover-bar h2,
.discover-bar h3,
.discover-bar h4,
.discover-bar h5,
.discover-bar h6 {
    font-size: 4em;
    color: white;
    /* text-shadow: 
        0em 0em 0.1em var(--color-accent-alt),
        0em 0em 0.3em var(--color-accent); */
}

@media screen and (max-width: 750px) {
    
    .discover-bar h1, 
    .discover-bar h2,
    .discover-bar h3,
    .discover-bar h4,
    .discover-bar h5,
    .discover-bar h6 {
        font-size: 2em;
    }

    .discover-bar {
        padding: 2en;
    }
}

@media screen and (min-width: 1200px) {
    .discover-bar {
        font-size: 0.85em;
    }
}

.img-info-banner {
    --img-info-banner-content-padding: 1em;
    overflow: hidden;
    position: relative;
    
    display: flex;
    flex-flow: column;
    justify-content: end;
    
    box-shadow: inset 0em 1em 3em rgba(0,0,0,0.65);

    /* height: 70vh; */
    min-height: 35em;
}
@media screen and (max-width: 1800px) {
    .img-info-banner { min-height: 50em; }
}
@media screen and (max-width: 1200px) {
    .img-info-banner { min-height: 40em; }
}
@media screen and (max-width: 750px) {
    .img-info-banner {
        height: 100vw;
    }
}

.img-info-banner .block-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -5;
        
    transform: translateZ(-1px);
}
.img-info-banner .block-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.img-info-banner-content {
    padding: var(--img-info-banner-content-padding);
    z-index: 0;
}
/* .img-info-banner-content::before {
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    margin: calc(-1.0 * var(--img-info-banner-content-padding));
    position: absolute;
    content: ' ';
    backdrop-filter: blur(10px);
    z-index: -1;
} */

.img-info-banner * {
    color: black;
}
.img-info-banner * {
    font-size: 1.25em;
}
.img-info-banner h1,
.img-info-banner h2,
.img-info-banner h3,
.img-info-banner h4,
.img-info-banner h5,
.img-info-banner h6 {
    text-shadow: 0.05em 0.05em 0.4em rgba(0,0,0, 0.5);
    font-size: 2.5em;
    /* color: var(--color-accent-muted); */
    color: white;
    text-shadow: 
        0.05em 0.05em 0.4em rgba(0,0,0,0.5),
        0.0em 0.0em 0.1em rgba(0,0,0, 1.0);
}

.img-info-banner {
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    justify-content: start;
}
@supports (-webkit-touch-callout: none) {
    .img-info-banner {
        background-attachment: scroll;
    }
}

/* 
.img-info-banner-content-header {
    background: linear-gradient(175deg, var(--color-accent-muted), var(--color-accent-alt));
    padding: 2em;
    text-align: center;
    box-shadow: 
        0 0.5em 0.5em -0.5em rgba(0,0,0,0.5),
        0 0.5em 1em -1em rgba(0,0,0,1.0);
} 
*/
.img-info-banner-content-header {
    padding: 1.5em;
    text-align: center;
    font-size: 2em;
    background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0));
    padding-bottom: 3em;
}
.img-info-banner-content-header h1,
.img-info-banner-content-header h2,
.img-info-banner-content-header h3,
.img-info-banner-content-header h4,
.img-info-banner-content-header h5,
.img-info-banner-content-header h6 {
    text-shadow: 0.05em 0.05em 0.4em rgba(0,0,0, 0.5);
    font-size: 3.0em;
    color: white;
    text-shadow: 
        0.05em 0.05em 0.4em rgba(0,0,0,0.5),
        0.0em 0.0em 0.1em rgba(0,0,0, 1.0);
    position: relative;
    display: inline-block;
}
.smallheader::after {
    content: ' ';
    position: absolute;
    background-color: white;
    box-shadow: 
        0.05em 0.05em 0.4em rgba(0,0,0,0.5),
        0.0em 0.0em 0.1em rgba(0,0,0, 1.0);;
    /* top: 0; */
    left: 0;
    right: 0;
    /* bottom: 0; */
    height: 0.1em;
    width: 100%;
    transform: translateY(0.15em);
}
.smallheader {
    color: white;
    font-size: 0.6em;
}


.img-info-banner-content-header * {
    margin: 0;
    padding: 0;
}

.img-info-banner-content-description {
    background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    
    width: 50%;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(2em);
    text-align: center;
    --discover-content-padding: 4em;
    padding: var(--discover-content-padding);
}
.img-info-banner-content-description > p {
    margin-bottom: 0;
}

.img-info-banner-content-description::before,
.img-info-banner-content-description::after {
    display: block;
    position: relative;
    left: 0;
    right: 0;
    height: 1em;
    content: '';
    margin-left: calc(-1 * var(--discover-content-padding));
    margin-right: calc(-1 * var(--discover-content-padding));
    background-image: url("../img/footer_hr.8a7f98277cc2.svg");
    background-size: auto 100%;
    background-position: center;
}
.img-info-banner-content-description::before {
    transform: translateY(calc(-1 * var(--discover-content-padding) + 100%));
}
.img-info-banner-content-description::after {
    transform: translateY(calc(var(--discover-content-padding) - 100%));
}

@media screen and (min-width: 1800px) {
    .img-info-banner-content-header {
        font-size: 1.8rem;
    }
    .img-info-banner-content-description {
        font-size: 1.2rem;
    }
}

@media screen and  (max-width: 1200px) {
    .img-info-banner-content-header {
        font-size: 1.5em;
    }
    .img-info-banner-content-description {
        font-size: 1.1em;
    }
}
@media screen and  (max-width: 750px) {
    .img-info-banner-content-header {
        font-size: 1.0em;
    }
    .img-info-banner-content-description {
        font-size: 1em;
        padding: var(--discover-content-padding) calc(0.5 * var(--discover-content-padding));
        width: 80%;
    }
    .img-info-banner-content-description::before,
    .img-info-banner-content-description::after {
        margin-left: calc(-0.5 * var(--discover-content-padding));
        margin-right: calc(-0.5 * var(--discover-content-padding));
    }
}


.discover-licensed-area, .discover-tamariki {
    --discover-extra-info-padding: 3em;
    text-align: center;
    padding: var(--discover-extra-info-padding);
    font-size: 1.25em;

    position: relative;
    height: 15em;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    /* border: 2px solid red; */
    box-shadow: 0em -1em 1.0em -1em rgba(0,0,0,0.5);
}

@media screen and (min-width: 1200px) {
    .discover-licensed-area, .discover-tamariki {
        height: 20em;
    }
}
@media screen and (max-width: 750px) {
    .discover-licensed-area, .discover-tamariki {
        font-size: 1em;
        height: 20em;
        padding: calc(0.5 * var(--discover-extra-info-padding));
    }
    .discover-licensed-area img {
        transform: scale(2.0);
    }
}
.discover-licensed-area .block-image, .discover-tamariki .block-image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    /* border: 2px solid green; */
}
.discover-licensed-area img, .discover-tamariki img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.discover-licensed-area {
     padding-left: calc(50% + var(--discover-extra-info-padding));
     text-align: left;
}
.discover-licensed-area .block-image { right: 50%; }
.discover-tamariki { 
    padding-right: calc(50% + var(--discover-extra-info-padding));
    text-align: right;
}
.discover-tamariki .block-image { left: 50%; }


/***************************************************************************/
/* Stallholders */

.stallholders .discover-bar ~ .stallholders-content {
    z-index: 0;
}

.stallholders {
    background-color: white;
    padding-bottom: 4em;
}
.stallholders-intro {
    margin: 4em;
}
.stallholders-intro {
    font-size: 1.25em;
}

.stallholders-content {
    text-align: center;
}

.stallholder { 
    vertical-align: top;
    --stallholder-gap: 1.5em;
    margin-bottom: var(--stallholder-gap);
    margin-left: calc(0.5 * var(--stallholder-gap));
    margin-right: calc( 0.5 * var(--stallholder-gap));
    display: inline-block;
    width: calc(33% - var(--stallholder-gap) * (1.75));
}

@media screen and (max-width: 1200px) {
    .stallholder { width: calc(50% - (var(--stallholder-gap) * 2.0)); }
}
@media screen and (max-width: 750px) {
    .stallholder { width: calc(100% - (var(--stallholder-gap) * 3.0)); }
}

.stallholder-btn {
    background-color: var(--color-accent-muted);
    color: white;
    height: 5em;
    padding: 0 1em;
    width: 100%;
    position: relative;
    padding-bottom: 100%; /* Height equal to width */

    border: none;
    border-radius: 0.5em;
    outline:none;

    text-decoration: none;
    font-weight: bold;

    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    z-index: 1;

    transition: border-radius 0.35s;
}
.stallholder-btn * {
    margin: 0;
}

.stallholder-btn {
    aspect-ratio: 1;
    overflow: hidden;
}
.stallholder-btn .block-image {
    overflow: hidden;
    position: absolute;
    /* border: 2px solid red; */
    top: 0; bottom: 0; left: 0; right: 0;
}
.stallholder-btn .block-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}


.stallholder-btn[aria-expanded="true"] {
    border-radius: 0.5em 0.5em 0 0;
}

.stallholder-info {
    background-color: var(--gray-medium);
    color: black;
    position: relative;
    z-index: -1;

    border-radius: 0 0 0.5em 0.5em;

    font-size: 1.1em;
    text-align: left;
}

.stallholder-info h2::before {
    display: none;
}

.stallholder-info > * {
    padding: 1em;
}

/***************************************************************************/
/* Plan your visit */

.plan-visit {
    background-color: white;
    width: 100%;
}


.plan-visit .discover-bar {
    position: relative;
}
/* .plan-visit .discover-bar ~ .plan-visit-content {
    z-index: 0;
} */

.plan-visit-content {
    padding: 4em;
    font-size: 1.5em;
}
@media screen and  (max-width: 750px) {
    .plan-visit-content {
        padding: 2em;
        font-size: 1em;
    }
}


/***************************************************************************/
/* Invitation */

.invitation {
    background-color: white;
    width: 100%;
}


.invitation .discover-bar {
    position: relative;
}
/* .invitation .discover-bar ~ .invitation-content {
    z-index: 0;
} */

.invitation-content {
    padding: 4em;
    font-size: 1.5em;
}
@media screen and  (max-width: 750px) {
    .invitation-content {
        padding: 2em;
        font-size: 1em;
    }
}