@import url(../main.css);
@import url(../components/buttons.css);
@import url(../components/covers.css);
@import url(../base-style.css);

body.cover::before
{
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: 100vh;
    position: fixed;
}

button#NavControl
{
    display: none;
    position: fixed;
    top: var(--default-outside-vertical-margin);
    right: var(--page-margin);
}

#WhatsButton
{
    position: fixed;
    bottom: var(--display-gap);
    right: calc(var(--page-margin) * .5);
    z-index: 5;
}

#MainHeader
{
    --grid-header:
        [pre-first]
        var(--default-outside-vertical-margin)
        [first]
        min-content
        [pos-first]
    ;
    min-height: 100vh;
}

#MainHeader > #Banner
{
    grid-column: pre-first / pos-last;
    grid-row: pre-first / pos-last;
    z-index: 0;
}

#MainHeader > #Banner > figure
{
    --speed: 20s;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation-duration: var(--speed);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    -webkit-animation-duration: var(--speed);
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
}

#MainHeader > #Banner > figure::before
{
    background-position: center bottom;
}

#MainHeader > #Banner > figure.img-01{ animation-name: fade01; }
#MainHeader > #Banner > figure.img-03{ animation-name: fade02; }
#MainHeader > #Banner > figure.img-04{ animation-name: fade03; }
#MainHeader > #Banner > figure.img-05{ animation-name: fade04; }

@keyframes fade01 {
    0%{ opacity: 1; }
    12.5%{ opacity: 1; }
    25%{ opacity: 0; }
    87.5%{ opacity: 0; }
    100%{ opacity: 1; }
}
@keyframes fade02 {
    0%{ opacity: 0; }
    12.5%{ opacity: 0; }
    25%{ opacity: 1; }
    37.5%{ opacity: 1; }
    50%{ opacity: 0; }
    100%{ opacity: 0; }
}
@keyframes fade03 {
    0%{ opacity: 0; }
    37.5%{ opacity: 0; }
    50%{ opacity: 1; }
    62.5%{ opacity: 1; }
    75%{ opacity: 0; }
    100%{ opacity: 0; }
}
@keyframes fade04 {
    0%{ opacity: 0; }
    62.5%{ opacity: 0; }
    75%{ opacity: 1; }
    87.5%{ opacity: 1; }
    100%{ opacity: 0; }
}

@-webkit-keyframes fade01 {
    0%{ opacity: 1; }
    12.5%{ opacity: 1; }
    25%{ opacity: 0; }
    87.5%{ opacity: 0; }
    100%{ opacity: 1; }
}
@-webkit-keyframes fade02 {
    0%{ opacity: 0; }
    12.5%{ opacity: 0; }
    25%{ opacity: 1; }
    37.5%{ opacity: 1; }
    50%{ opacity: 0; }
    100%{ opacity: 0; }
}
@-webkit-keyframes fade03 {
    0%{ opacity: 0; }
    37.5%{ opacity: 0; }
    50%{ opacity: 1; }
    62.5%{ opacity: 1; }
    75%{ opacity: 0; }
    100%{ opacity: 0; }
}
@-webkit-keyframes fade04 {
    0%{ opacity: 0; }
    62.5%{ opacity: 0; }
    75%{ opacity: 1; }
    87.5%{ opacity: 1; }
    100%{ opacity: 0; }
}

/* 

-\_____/
_/-\____
___/-\__
_____/-\

*/

#MainHeader > nav
{
    --rows-structure: auto;
    grid-column: pre-first / pos-last;
    grid-row: first / pos-first;
}

#MainHeader .logo
{
    --size: var(--display-gap);
    --logo-color: var(--emphasis-color);
    grid-column: pos-first / pre-division 1;
    height: var(--size);
    width: calc(var(--size) * var(--width-ratio));
}

#MainHeader [role="navigation"]
{
    grid-column: pre-division 1 / pre-division 3;
    display: flex;
    height: min-content;
    align-self: center;
    gap: calc(var(--font-size) * 2);
}

#MainHeader [role="navigation"] > li
{
    --font-size: calc(var(--base-size) * 2);
    margin-top: 0;
    line-height: 0;
}

#MainHeader nav #BuyNow
{
    --resize-rate: 2;
    grid-column: pos-division 3 / pre-last;
    justify-self: end;
    align-self: center;
}


#MainHeader > .tagline
{
    --rows-structure:
        [first]
        auto
        [pre-row]
        var(--display-gap)
        [pos-row]
        auto
        [last]
    ;
    grid-row: pos-row 1 / pre-last;
    grid-column: pre-first / pos-last;
    align-self: end;
    text-align: center;
    margin-top: var(--display-gap);
}

#MainHeader > .tagline h1
{
    grid-column: pos-first / pre-last;
    grid-row: first / pre-row;
}

#MainHeader > .tagline p
{
    grid-column: pos-division 1 / pre-division 3;
    grid-row: pos-row / last;
}

body > section.legended .legend
{
    --font-size: calc(var(--base-size) * 1.5);
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-weight: var(--f-bold);
    grid-column: pos-first / pre-last;
    grid-row: first / pos-first;
    align-self: flex-end;
    color: var(--emphasis-color);
    border: 4px solid;
}

body > section.legended .legend::before,
body > section.legended .legend::after
{
    content: attr(aria-label);
    padding: 0 calc(var(--font-size) * .5);
    white-space: nowrap;
    border: 4px solid var(--emphasis-color);
    border-bottom: none;
    margin: -4px;
    margin-bottom: 0;
}

body > section.legended .legend::after
{
    content: 'Réveillon 2024 by Casa Bossa';
}



.accordion
{
    color: var(--emphasis-color);
    border: 4px solid;
    border-top: none;
    box-sizing: border-box;
}

.accordion > article
{
    transition: all .25s var(--base-easing);
    overflow: hidden;
}

.accordion > article > header
{
    overflow: hidden;
    border-top: 4px solid;
    padding: calc((var(--base-size) * 2) - 4px);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    transition: inherit;
}


.accordion > article > header::after
{
    content: '\e08c';
    font-family: var(--esl);
    font-size: calc(var(--base-size) * 2);
    transition: inherit;
}

.accordion > article > .content
{
    max-height: 0;
    transition: all .4s var(--base-easing);
    margin: 0 calc(var(--base-size) * 2);
}

.accordion > article:hover,
.accordion > article:focus-within
{
    background-color: var(--emphasis-color);
}

.accordion > article > header:hover::after, 
.accordion > article > header:hover .title,
.accordion > article:focus-within .prph > p,
.accordion > article:focus-within .prph > li,
.accordion > article:focus-within .title,
.accordion > article:focus-within > header
{
    border-color: var(--emphasis-color);
    color: var(--background);
}

.accordion > article:focus-within > header::after
{
    transform: rotateZ(180deg);
}

.accordion > article:focus-within > .content
{
    max-height: 1000px;
    margin: calc(var(--base-size) * 2);
}


#AllInclusive
{
    --rows-core: 1fr;
    --speed: 90s;
    min-height: 100vh;
    text-align: center;
    align-content: end;
}

#AllInclusive > .tagline
{
    --rows: 3;
    --rows-core: var(--default-rows-core);
    --grid-header: [pos-first];
    --grid-footer: [pre-last];
    grid-row: pos-first / pre-last;
    grid-column: pre-first / pos-last;
    align-self: end;
    z-index: 1;
}

#AllInclusive > .tagline > header
{
    grid-row: pos-first / pre-row 1;
    grid-column: pos-first / pre-last;
}

#AllInclusive > .tagline > section
{
    grid-row: pos-row 1 / pre-row 2;
    grid-column: pos-division 1 / pre-division 3;
}

#AllInclusive > .tagline > footer
{
    grid-row: pos-row 2 / pre-last;
    grid-column: pos-division 1 / pre-division 3;
    justify-self: center;
}

#AllInclusive > .sliders
{
    display: grid;
    grid-column: pre-first / pos-last;
    grid-row: pre-first / pos-last;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

#AllInclusive > .sliders > div
{
    grid-column: span 1;
    grid-row: 1 / 2;
    display: grid;
    grid-auto-columns: min-content;
    grid-template-rows: 1fr;
    overflow: hidden;
    width: min-content;
}

#AllInclusive > .sliders figure
{
    display: flex;
    grid-column: span 1;
    grid-row: 1 / 2;
    height: 100vh;
}

#AllInclusive > .sliders img
{
    height: 100%;
}

#AllInclusive > .sliders.play > div
{
    animation-name: carousel;
    animation-timing-function: linear;
    animation-duration: var(--speed);
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    -webkit-animation-name: carousel;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: var(--speed);
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-fill-mode: backwards;
}


@keyframes carousel {
    0%{transform: translateX(0%); }
    100%{ transform: translateX(-100%); }
}

@-webkit-keyframes carousel {
    0%{transform: translateX(0%); }
    100%{ transform: translateX(-100%); }
}

#Sobre header
{
    --grid-row-gap: var(--display-gap);
    grid-column: pos-first / pre-last;
    grid-row: pos-first / pre-row 1;
    padding-top: var(--display-gap);
}

#Sobre section
{
    grid-column: pos-first / pre-division 3;
    grid-row: pos-row 1 / pre-last;
}

#Atracoes
{
    min-height: 75vh;
}

#Atracoes figure
{
    grid-row: pre-first / pos-last;
}

#Atracoes figure:first-of-type
{
    grid-column: pre-first / division 2;
}

#Atracoes figure:last-of-type
{
    grid-column: division 2 / pos-last;
}

#Atracoes figure img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    grid-column: pre-first / pos-last;
    grid-row: pre-first / pos-last;
}

#Atracoes figure figcaption
{
    --grow: 6;
    --font-size: calc(var(--base-size) * var(--grow));
    line-height: 0;
    font-family: var(--bebas);
    font-weight: 900;
    grid-column: pos-first / pre-last;
    grid-row: pos-row 1 / pre-last;
    color: var(--emphasis-color);
    margin-bottom: calc(var(--font-size) * -.5);
    align-self: end;
}

#Atracoes figure figcaption span
{
    display: block;
    color: var(--text-color);
}


#Cardapio
{
    --grid-row-gap: var(--display-gap);
}

#Cardapio > section
{
    grid-column: pos-first / pre-last;
}

#Cardapio > section:first-of-type
{
    margin-top: var(--display-gap);
    grid-row: pos-first / pre-row 1;
}

#Cardapio > section:last-of-type
{
    grid-row: pos-row 1 / pre-last;
    grid-column-end: pre-division 2;
}

#Cardapio .accordion
{
    border-left: none;
    border-right: none;
}

#Cardapio .accordion > header,
#Cardapio > section:last-of-type > header
{
    margin-bottom: var(--row-gap);
}

#Cardapio .accordion > article
{
    border-color: var(--emphasis-color);
    border-style: solid;
    border-bottom: none;
    border-top: none;
    border-left-width: 4px;
    border-right-width: 4px;
}

#Cardapio .accordion .content,
#Cardapio > section:last-of-type .content
{
    columns: 2;
    column-gap: var(--default-grid-column-gap);
}


#Prices
{
    --rows: 3;
}

#Prices article
{
    grid-row: pos-row 1 / pre-row 2;
    border: 4px solid var(--emphasis-color);
    display: flex;
    flex-direction: column;
    gap: var(--half-row-gap);
    text-align: center;
    border-radius: var(--base-size);
    overflow: hidden;
}

#Prices article header,
#Prices article footer
{
    padding: var(--half-row-gap);
    background-color: var(--emphasis-color);
}

#Prices article .title,
#Prices article footer .prph
{
    --font-color: var(--background);
}

#Prices article:nth-of-type(1)
{
    grid-column: pos-first / pre-division 1;
}

#Prices article:nth-of-type(2)
{
    grid-column: pos-division 1 / pre-division 2;
}

#Prices article:nth-of-type(3)
{
    grid-column: pos-division 2 / pre-last;
}

#Prices footer
{
    grid-column: pos-first / pre-last;
    grid-row: pos-row 2 / pre-last;
    display: flex;
    justify-content: center;
}

#Action
{
    --grid-row-gap: var(--display-gap);
    z-index: 1;
}

#Action header
{
    grid-column: pos-first / pre-last;
    grid-row: pos-first / pre-row 1;
    text-align: center;
}

#Action section
{
    grid-column: pos-first / pre-division 2;
    grid-row: pos-row 1 / pre-last;
    text-align: right;
}

#Action section .cta a{
    margin-left: auto;
}

#Action .counter
{
    grid-column: pos-division 2 / pre-last;
    grid-row: pos-row 1 / pre-last;
}

#Action .counter .prph
{
    display: flex;
}

#Action .counter .prph span::after
{
    --label: 'label';
    content: attr(aria-label, var(--label));
    --font-size: var(--base-size);
    font-size: var(--adjusted-font-size);
    text-align: center;
    position: absolute;
    top: calc(var(--font-size) * -5);
    left: 0;
    width: 100%;
}


#FAQ > section
{
    grid-column: pos-first / pre-last;
    grid-row: pos-first / pre-last;
    margin-top: var(--display-gap);
}

#MainFooter
{
    --bottom-gap: var(--row-gap);
    --rows-structure: [pos-first] var(--default-rows-core) [pre-last];
    align-items: center;
}

#MainFooter > address,
#MainFooter > .logo,
#MainFooter > .social
{
    grid-row: pos-first / pre-last;
    grid-column: pos-first / pre-division 1;
}

#MainFooter > .logo
{
    grid-column: pos-division 1 / pre-division 2;
    width: 50%;
    justify-self: center;
}

#MainFooter > .social
{
    grid-column: pos-division 2 / pre-last;
    justify-self: end;
}

#MainFooter > .social > ul
{
    display: flex;
    gap: var(--base-size);
}

#MainFooter .logo.casabossa
{
    --size: calc(var(--display-gap) * 1.5);
    height: var(--size);
    width: calc(var(--size) * var(--width-ratio));
    margin-bottom: var(--row-gap);
}

@media (max-width: 1024px) {
    body > section.legended
    {
        --grid-header:
            [pre-first]
            var(--outside-top-margin, var(--outside-vertical-margin, var(--default-outside-vertical-margin)))
            [first]
            minmax(var(--inside-top-margin, var(--inside-vertical-margin, var(--default-inside-vertical-margin))), auto)
            [pos-first]
        ;
    }

    #MainHeader > .tagline p
    {
        grid-column: pos-first / pre-last;
    }

    #AllInclusive > .tagline > section
    {
        grid-column: pos-first / pre-last;
    }
    
    #Sobre section
    {
        grid-column: pos-first / pre-last;
    }

    #Atracoes figure figcaption
    {
        --grow: 4;
    }

}

@media (max-width: 840px) {

    button#NavControl
    {
        display: block;
    }

    #MainHeader
    {
        z-index: 2;
    }

    #MainHeader > nav
    {
        --grid-header: [pos-first];
        --grid-footer: [pre-last];
        --rows-structure: var(--default-rows-structure);
        z-index: 2;
    }

    #MainHeader .logo
    {
        --size: calc(var(--display-gap) * 2);
        grid-column: pos-division 1 / pre-division 3;
        grid-row: pos-first / pre-row 1;
        justify-self: center;
    }

    #MainHeader nav #BuyNow
    {
        grid-column: pos-division 1 / pre-division 3;
        grid-row: pos-row 1 / pre-last;
        justify-self: center;
    }

    #MainHeader #MainNav[role="navigation"]
    {
        --bg-opacity: .85;
        flex-direction: column;
        gap: 0;
        pointer-events: none;
        opacity: 0;
        align-items: center;
        position: fixed;
        grid-row: none;
        grid-column: none;
        top: -25vh;
        left: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
        background-color: var(--background);
        z-index: 2;
        transition: all .5s var(--base-easing);
    }

    #MainHeader #MainNav[role="navigation"].show
    {
        pointer-events: all;
        top: 0;
        opacity: 1;
    }

    #MainHeader > .tagline
    {
        align-self: start;
    }

    #Atracoes figure:first-of-type
    {
        grid-column: pre-first / pos-last;
        grid-row: pre-first / row 1;
    }

    #AllInclusive > .tagline
    {
        --grid-row-gap: var(--display-gap);
        align-self: center;
    }
    
    #Atracoes figure:last-of-type
    {
        grid-column: pre-first / pos-last;
        grid-row: row 1 / pos-last;
    }

    #MainFooter > address
    {
        grid-column: pos-first / pre-division 2;
        grid-row: pos-first / pre-last;
    }

    #Cardapio > section:last-of-type
    {
        grid-column-end: pre-division 3;
    }

    #Prices
    {
        --rows: 5;
    }

    #Prices article:nth-of-type(n)
    {
        grid-column: pos-first / pre-last;
    }

    #Prices article:nth-of-type(1)
    {
        grid-row: pos-row 1 / pre-row 2;
    }

    #Prices article:nth-of-type(2)
    {
        grid-row: pos-row 2 / pre-row 3;
    }

    #Prices article:nth-of-type(3)
    {
        grid-row: pos-row 3 / pre-row 4;
    }

    #Prices footer
    {
        grid-row: pos-row 4 / pre-last;
    }

    #Action
    {
        --rows: 3;
        --grid-row-gap: var(--display-gap);
    }

    #Action section
    {
        grid-column: pos-first / pre-last;
        grid-row: pos-row 1 / pre-row 2;
        text-align: center;
    }

    #Action section .cta a
    {
        margin-right: auto;
    }

    #Action .counter
    {
        margin-top: var(--row-gap);
        grid-column: pos-first / pre-last;
        grid-row: pos-row 2 / pre-last;
    }

    #Action .counter .prph
    {
        justify-content: center;
    }

    #MainFooter > .logo
    {
        grid-column: pos-division 2 / pre-last;
        grid-row: pos-first / pre-row 1;
        justify-self: end;
    }

    #MainFooter > .social
    {
        grid-row: pos-row 1 / pre-last;
    }
}

@media (max-width: 640px) {

    body > section.legended .legend
    {
        grid-column: first / last;    
    }

    #Cardapio > section > section
    {
        columns: 1;
    }

    #Atracoes figure figcaption
    {
        --grow: 3;
    }

    #Cardapio > section:last-of-type
    {
        grid-column-end: pre-last;
    }

    #Cardapio .accordion .content
    {
        columns: 1;
    }

    #Action .counter .prph span::after
    {
        top: calc(var(--font-size) * -3);
    }

    #MainFooter
    {
        --grid-row-gap: var(--display-gap);
    }

    #MainFooter > address
    {
        grid-row: pos-first / pre-row 1;
        grid-column: pos-first / pre-last;
    }

    #MainFooter > .logo
    {
        grid-row: pos-row 1 / pre-last;
        grid-column: pos-first / pre-middle 2;
        justify-self: start;
    }

    #MainFooter > .social
    {
        grid-row: pos-row 1 / pre-last;
        grid-column: pos-middle 2 / pre-last;
    }
}

@media (max-width: 360px) {
    #Cardapio > section:last-of-type .content
    {
        columns: 1;
    }
}