/* Main Configuration */

@layer configuration {

*,*::before,*::after {
    box-sizing      : border-box;
    padding         : 0;
    margin          : 0;
    background      : none;
    text-decoration : none;
    outline         : none;
    font-family     : inherit;
    font-size       : inherit;
    line-height     : inherit;
    font-weight     : inherit;
    color           : inherit;

    /* Disable double tap to zoom */
    touch-action    : manipulation;
    scrollbar-gutter: stable;
    /*overscroll-behavior-y : none;*/

    /* Fix the antialias when needed */
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
    font-feature-settings   : "onum", "kern", "liga", "clig", "calt";

    /* Global Transitions */
    transition-delay           : 0ms;
    transition-duration        : 150ms;
    transition-property        : none;
    transition-timing-function : ease-out ;
}

/* Address doesn't need to be italic */
address {
    font-style : normal;
}

/* We need to reset the details and summary */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Global Accessibility Settings
*:focus {
    outline        : 5px solid var(--accent) !important;
    outline-offset : 5px;
}
 */
}

@layer configuration {

@font-face {
    font-family  : "Berling";
    src          : url('fonts/BerlingLTStd-Roman.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 400;
    font-display : swap;
}

@font-face {
    font-family  : "Tobias";
    src          : url('fonts/Tobias-Regular.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 400;
    font-display : swap;
}

@font-face {
    font-family  : "Tobias";
    src          : url('fonts/Tobias-Medium.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 500;
    font-display : swap;
}

@font-face {
    font-family  : "Tobias";
    src          : url('fonts/Tobias-RegularItalic.woff2') format('woff2');
    font-style   : italic;
    font-weight  : 400;
    font-display : swap;
}

@font-face {
    font-family  : "ABCROM";
    src          : url('fonts/ABCROM-RegularItalic.woff2') format('woff2');
    font-style   : italic;
    font-weight  : 400;
    font-display : swap;
}

@font-face {
    font-family  : "ABCROM";
    src          : url('fonts/ABCROM-Regular.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 400;
    font-display : swap;
}

@font-face {
    font-family  : "ABCROM";
    src          : url('fonts/ABCROM-Medium.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 500;
    font-display : swap;
}

:root {
    
    /* Colors */
    --light        : #FAFAFA;
    --dark         : #000000;
    --dark-alt     : #717171;
    --accent       : #900443;
    --accent-alt   : #cd5c8f;
    --accent-light : #E5C9D5;

    --font-sans  : ABCROM, sans-serif;
    --font-serif : Tobias, serif;

    /* Font Settings */
    --font-family : var(--font-sans);
    --font-size   : 16px;
    --font-height : 20px;
    --font-weight : 400;

    /* All The Various Font Sizes */
    --sans-xs : 400 8px/1.25 var(--font-sans);
    --sans-s  : 400 10px/1.20 var(--font-sans);
    --sans-sl : 400 12px/1.2 var(--font-sans);
    --sans    : 400 12px/1.33 var(--font-sans);
    --sans-m  : 400 16px/1.21 var(--font-sans);
    --sans-l  : 400 16px/1.25 var(--font-sans);

    --serif-s  : 400 15px/1.1 var(--font-serif);
    --serif    : 400 20px/1.1 var(--font-serif);
    --serif-m  : 400 24px/1.1 var(--font-serif);
    --serif-l  : 400 30px/1.1 var(--font-serif);
    --serif-xl : 400 40px/1.1 var(--font-serif);

    /* Nav specific font sizes */
    --nav   : 400 15px/20px Berling, serif;
    --nav-l : 400 19px/22px Berling, serif;

    /* Fluid Typography */
    --serif-xl-fluid     : 400 clamp(35px, 4.09vi + 18.64px, 80px) / 1.1 var(--font-serif);
    --serif-l-fluid      : 400 clamp(30px, 2.67vi + 16.67px, 70px) / 1.1 var(--font-serif);
    --serif-m-fluid      : 400 clamp(24px, 1.73vi + 15.33px, 50px) / 1.1 var(--font-serif);
    --serif-l-fluid-home : 500 30px / 0.94 var(--font-serif);

    /* Case specific font sizes */
    --caffe-calendar  : 400 14px/18px var(--font-sans);
    --calendar-widget : 400 14px/18px var(--font-sans);

    /* Set the defaults */
    font-size        : var(--font-height); /* We set the value of 1rem = 1 line height of the base typeface */
    font-family      : var(--font-family);
    font-weight      : var(--font-weight);
    background       : var(--light);
    color            : var(--dark);
    interpolate-size : allow-keywords;

    /* Grid and Spacing settings */
    --gtc   : repeat(12,1fr);
    --gap   : 0.5rem;
    --gap-h : 0.5rem;
    --gap-v : 1rem;

    --stickybars-distance : calc(2rem + 3px);

    /* Grid Main Structure */
    --sidebar-width : calc(100% - 1rem);
    --outer-grid    : 1fr;
    --inner-grid    : repeat(12,1fr);

    --side-spacer : 0.5rem;
    --spacer-1-1 : 1rem;
    --spacer-1-2 : 0.5rem;
    --spacer-1-4 : 0.25rem;
    --spacer-1-8 : 0.125rem;

    /* Various Grids */
    --grid-home-category : 1fr 1fr;
    --grid-intro         : 1fr 1fr;

    /* Z-Indexes */
    --footer       : 8000;
    --sidebar      : 6000;
    --sidebar-home : 7000;

}

/* We'll do only 1 mobile adjustment at 1100px */
@media (width > 1100px) {
    :root {

        --grid-home-category : var(--sidebar-width) 1fr;
        --grid-intro         : var(--sidebar-width) 1fr;

        --side-spacer   : 1rem;
        --sidebar-width : 20rem;
        --outer-grid    : var(--sidebar-width) 1fr;
        --font-size     : 16px;
        --font-height   : 20px;

        --gtc        : repeat(24,1fr);
        --inner-grid : repeat(17,1fr);

        /* All The Various Font Sizes */
        --sans-xs : 400 10px/1.20 var(--font-sans);
        --sans-s  : 400 12px/1.33 var(--font-sans);
        --sans-sl : 400 14px/1.33 var(--font-sans);
        --sans    : 400 16px/1.25 var(--font-sans);
        --sans-m  : 400 20px/1.20 var(--font-sans);
        --sans-l  : 400 24px/1.17 var(--font-sans);

        --serif-xs : 400 15px/1.1 var(--font-serif);
        --serif-s  : 400 20px/1.1 var(--font-serif);
        --serif    : 400 24px/1.1 var(--font-serif);
        --serif-m  : 400 30px/1.1 var(--font-serif);
        --serif-l  : 400 60px/1 var(--font-serif);
        --serif-xl : 400 80px/1 var(--font-serif);

        --serif-l-fluid-home : 500 clamp(40px, 3.75vi + -5px, 70px) / 0.94 var(--font-serif);

        --stickybars-distance : 1rem;

    }
}

/* Big Screens Adjustment */
@media (width > 1800px) {
    :root {
        --sans-sl : 400 clamp(14px, 0.33vi + 8px, 16px) / 1.25 var(--font-sans);
        --sans-m  : 400 clamp(20px, 0.67vi + 8px, 24px) / 1.25 var(--font-sans);
        --sans-ms : 400 20px/1.20 var(--font-sans);
    }   
}

html,body {
    scroll-behavior : smooth;
    background      : var(--accent);
}

body {
    font-size     : var(--font-size);
    line-height   : var(--font-height);
    position      : relative;
    background    : var(--light);
}

#spazi body {
    background : var(--dark);
}

html#newsletter body {
    background : var(--accent);
}

@media (width < 1100px) {
    html,body {
        scroll-padding : var(--stickybars-distance);
    }
}
}/* Global Settings *//* The Main Grid class. Will convert the container into a basic grid with all the settings */

.grid {
    display               : grid;
    grid-template-columns : var(--gtc);
    gap                   : var(--gap-v) var(--gap-h);
    align-content         : start;
    align-items           : start;
}

.outer-grid {
    display               : grid;
    grid-template-columns : var(--outer-grid);
    gap                   : var(--gap-v) 3rem;
    grid-template-areas   : "innergrid";
}

.inner-grid {
    display               : grid;
    grid-template-columns : var(--inner-grid);
    gap                   : var(--gap-v) var(--gap-h);
    grid-area             : innergrid;
}

@media (width > 1100px) {
    .outer-grid {
        grid-template-areas : "sidebar innergrid";
    }
}

*:focus {
    outline : 2px solid white;
    outline : unset;
}

main {
    grid-area : innergrid;
}

#calendario,#stagione,#caffe {
    overflow: auto;
    scroll-padding: 2.5rem;
}/* The Vertical Stack */

:root {

    --z-navigation : 10000;
    --z-banner     :  9500;
    --z-intro      :  9100;
    --z-sidebar    :  9000;
    --z-caffe      :  9600;
    --z-news       :  9500;
    --z-footer     :  9500;
    --z-titles     :  9000;
}/* Custom Cookie Banner Settings */

:root {
    --cc-bg : var(--light);
    --cc-font-family : var(--font-sans);
    --cc-btn-border-radius : 0;

    --cc-btn-primary-bg           : var(--dark);
    --cc-btn-primary-border-color : var(--dark);
    --cc-btn-primary-color        : var(--light);

    --cc-btn-secondary-bg           : var(--dark);
    --cc-btn-secondary-border-color : var(--dark);
    --cc-btn-secondary-color        : var(--light);

    --cc-btn-primary-hover-bg : var(--accent);
    --cc-btn-primary-hover-border-color : var(--accent);
    --cc-btn-primary-hover-color        : var(--light);

    --cc-btn-secondary-hover-bg           : var(--accent);
    --cc-btn-secondary-hover-border-color : var(--accent);
    --cc-btn-secondary-hover-color        : var(--light);

    --cc-footer-bg: var(--light);

}

#cc-main .cm__btn {
    font-weight : 400;
}/* UI Elements *//* Website Header and Navigation */

.header {
    position           : fixed;
    inset              : var(--side-spacer) var(--side-spacer) auto;
    color              : var(--light);
    clip-path          : content-box;
    max-height         : 1.5rem;
    width              : var(--sidebar-width);
    transition         : all 0.25s linear;
    z-index            : var(--z-navigation);
    display            : grid;
    grid-template-rows : auto 1fr;
    z-index            : 999999 ;
}/* The Topbar. Is the part that's always visible and expands on click */

.header-topbar-wrapper {
    display : grid;
}

.header-topbar {
    position    : relative;
    padding     : 0.25rem 0.5rem;
    grid-column : span 1;
    background  : var(--accent);
}

.header-topbar-text {
    font                : var(--nav);
    color               : var(--light);
    text-transform      : uppercase;
    white-space         : nowrap;
    transform           : translateY(1px);
    transition-property : all;
}

.header-menu-button {
    border       : none;
    aspect-ratio : 1;
    width        : 1.5rem;
    cursor       : pointer;
    position     : absolute;
    inset        : 0 0 0 auto;
}

.icon-menu,.icon-back {
    fill    : var(--light);
    width   : 1.5rem;
    height  : 1.5rem;
    display : block;
}/* News Notification Button */

.header-topbar-news-notice {
    border       : none;
    aspect-ratio : 1;
    width        : 1.5rem;
    height       : 1.5rem;
    cursor       : pointer;
    position     : absolute;
    top          : 0;
    right        : 1.5rem;
    bottom       : 0;
    display      : flex;
}

.header-topbar-news-notice.is-hidden {
    display : none;
}

.header-topbar-news-notice svg {
    fill : var(--light);
}

.header-topbar-news-notice:hover span {
    background : var(--light);
    color      : var(--accent);
}/* Hero Section */

.hero-container {
    position         : relative;
    height           : 40vh;
    background-image : linear-gradient(to bottom left, var(--dark) , var(--accent));
}

.hero-content {
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : var(--gap-v) 3rem;
    height                : 100%;
    grid-template-areas   : "content";
    padding               : 0.5rem var(--side-spacer);
    position              : relative;
    z-index               : 2;
}

.hero-title {
    grid-area  : content;
    align-self : end;
    color      : var(--light);
    font       : var(--serif-l);
    text-wrap  : balance;
}

.hero-title span {
    display: block;
    font : var(--serif-m);
    font-weight: normal;
}

.hero-background {
    position : absolute;
    inset    : 0;
    z-index  : 0;
}

.hero-background::after {
    content    : "";
    position   : absolute;
    inset      : 0;
    z-index    : 1;
    background : linear-gradient(to top, rgba(0,0,0,0.65) 20%, transparent);
}

.hero-background-image,
.hero-background-video {
    width          : 100%;
    height         : 100%;
    object-fit     : cover;
    object-position: center;
}

@media (width > 1100px) {
    .hero-container {
        margin-bottom    : 2rem;
        height           : 70vh;
    }
    .hero-content {
        grid-template-columns : var(--outer-grid);
        grid-template-areas   : "sidebar content";
    }   

    .hero-title {
        align-self : center;
    }

    .hero-background::after {
        background : rgba(0,0,0,0.5);
    }

}/* The Main Menu */

.header-navigation-wrapper {
    background     : var(--accent);
    pointer-events : none;
    height         : 0;
    width          : 0;
    overflow       : hidden;
}

.header-navigation {
    display               : grid;
    padding               : 0 0.5rem 1rem;
    grid-template-columns : repeat(4,1fr);
    gap                   : var(--gap-v) var(--gap-h);
    grid-template-areas   : "primary primary primary primary"
                            "secondary-a secondary-b secondary-c secondary-d"
                            "buttons extra . credits";
}

.header-navigation ul {
    list-style : none;
}

.header-navigation-primary {
    grid-column    : primary;
    font           : var(--nav-l);
    margin         : 2rem 0 3rem;
    text-transform : uppercase;
}

.header-navigation-primary li:not(:last-child) {
    margin-bottom : 0.25rem;
}

.header-navigation-secondary {
    margin-bottom : 4rem;
}

.header-navigation-secondary-a { grid-area : secondary-a; }

.header-navigation-secondary-b { grid-area : secondary-b; }

.header-navigation-secondary-c { grid-area : secondary-c; }

.header-navigation-secondary-d { grid-area : secondary-d; }

.header-navigation-secondary-e { grid-area : secondary-e; display : none; }

.header-navigation-secondary-with-icon a {
    display     : flex;
    align-items : center;
}

.header-navigation-secondary a {
    opacity: .7;
}

.header-navigation-secondary a:hover {
    opacity: 1;
}

.header-navigation-secondary-title {
    display        : flex;
    gap            : 0.25rem;
    align-items    : center;
    border         : none;
    cursor         : pointer;
    pointer-events : none;
}

.icon {
    width : 1.5rem;
    height : 1.5rem;
    display: none;
}

.icon svg {
    fill : var(--light);
}/* Buttons Block */

.header-navigation-buttons {
    grid-area     : buttons;
    display       : grid;
    gap           : 0.5rem;
    padding-right : 1rem;
}/* Extra Section */

.header-navigation-extra {
    grid-area      : extra;
    align-self     : end;
    text-transform : uppercase;
    font           : var(--sans-xs);
}

.header-navigation-extra a:hover,
.header-navigation-extra button:hover {
    opacity : .7;
}

.header-navigation-extra li:first-child {
    margin-bottom : 0.5rem;
}

.header-navigation-extra button {
    text-transform: inherit;
    border        : none;
    cursor        : pointer;
}/* Credits */

.header-navigation-credits {
    grid-area     : credits;
    align-self    : end;
    text-transform: uppercase;
    font          : var(--sans-xs);
    justify-self  : start;
}

.header-navigation-credits:hover {
    opacity : .7;
}/* Small Screen Adjustments */

@media (width < 1100px) {    
    .header-navigation {
        grid-template-rows  : auto auto auto 1fr auto;
        height              : 100%;
        grid-template-areas : "primary primary primary primary"
                              "secondary-a secondary-a secondary-b secondary-b"
                              "secondary-c secondary-c secondary-d secondary-d"
                              ". . . ."
                              "buttons buttons extra credits";
    }
}/* Small Screen Adjustments */

@media (width < 600px) {    
    .header-navigation {
        gap                   : 0 var(--gap-h);
        grid-template-columns : repeat(2,1fr);
        grid-template-rows    : auto auto auto auto auto auto 1fr auto auto;
        grid-template-areas   : "primary primary"
                                "secondary-a secondary-a"
                                "secondary-b secondary-b"
                                "secondary-c secondary-c"
                                "secondary-d secondary-d"
                                "secondary-e secondary-e"
                                ". ."
                                "extra credits"
                                "buttons buttons";
    }

    .header-navigation-secondary-title {
        pointer-events: all;
    }

    .header-navigation-secondary {
        margin-bottom : 0;
    }

    .header-navigation-secondary-e {
        display : block;
    }

    /* Hide the submenu */
    .header-navigation-secondary ul {
        display: none;
    }

    .header-navigation-extra {
        margin : 1rem 0 0;
    }
    .header-navigation-credits {
        justify-self: end;
    }
    .header-navigation-buttons {
        margin-top    : 1rem;
        padding-right : 0;
    }

    .header-navigation-wrapper {
        height : 100%;
    }

    .icon {
        display: block;
    }

    .mobile-submenu-is-active .header-navigation-secondary {
        display: none;
    }

    .mobile-submenu-is-active .header-navigation-secondary.active-submenu {
        display: block;
    }

    .mobile-submenu-is-active .icon {
        transform : rotate(180deg)
    }

    .active-submenu ul {
        display: block;
        padding-left : 1.75rem;
    }

    .active-submenu li {
        padding-bottom : 0.25rem;
    }

}/* The Style for the Open navigation */

.navigation-is-open {

    .header {
        width     : calc(100% - (var(--side-spacer) * 2));
        max-height: 100svh;
        inset     : var(--side-spacer) var(--side-spacer) auto var(--side-spacer);
    }

    .header-topbar-wrapper {
        grid-template-columns : 1fr 0fr;
    }

    .header-topbar-text {
        font : var(--nav-l);
    }

    .header-menu-button {
        transform : rotate(90deg)
    }

    .header-navigation-wrapper {
        pointer-events : all;
        height         : auto;
        width          : auto;
    }

}

@media (width < 1100px) {
    .navigation-is-open .header {
        inset : var(--side-spacer);
    }
}

#home .navigation-is-open .header {
    max-height: calc(100dvh - 2.75rem);
}/* The Important notice message */

#important-notice {
    top       : 50%;
    left      : 50%;
    border    : none;
    z-index   : 999999;
    transform : translate(-50%,-50%);
    width     : 100%;
    max-width : 25rem;
    padding : var(--side-spacer);
}

#important-notice::backdrop {
    background : #90044359;
    backdrop-filter: blur(15px);
}

.important-notice-content {
    padding    : 1rem 1.5rem 1rem 1rem;
    color      : var(--light);
    background : var(--dark);
    position   : relative;
}

.important-notice-close-button {
    position : absolute;
    top      : 0;
    right    : 0;
    border   : none;
    cursor   : pointer;
}

.important-notice-close-button svg {
    width : 1.5rem;
    height : 1.5rem;
    fill : var(--light);
    display: block;
}

.important-notice-close-button:hover svg {
    fill : var(--accent);
}/* The popup news */

#popup-news {
    position   : fixed;
    top        : calc(var(--side-spacer) + 1.5rem);
    left       : var(--side-spacer);
    z-index    : var(--z-news);
    max-width  : var(--sidebar-width);
    width      : 100%;
    background : var(--dark);
    color      : var(--light);
}

:is(#home,#spazi,#eventi) #popup-news {
    background : var(--light);
    color      : var(--dark);
}

#popup-news.is-hidden {
    display: none;
}

.popup-news-inner {
    position : relative;
    padding  : 0.25rem 0.5rem 0.5rem;
}

.popup-news-button {
    border       : none;
    aspect-ratio : 1;
    width        : 1.5rem;
    height       : 1.5rem;
    cursor       : pointer;
    position     : absolute;
    top          : 0;
    right        : 0;
}

.popup-news-button svg {
    fill : currentColor;
}

.popup-news-button:hover svg {
    fill : var(--accent);
}

.popup-news-title {
    text-transform : uppercase;
    padding-right  : 1.5rem;
    padding-bottom : 0.5rem;
}

.popup-news-excerpt {
    padding-right : 0.5rem;
}

.popup-news-excerpt p {
    margin-bottom : 0;
}

.editor-mini a.popup-news-link {
    color : var(--inherit);
    display: inline-block;
}/* The Website's Footer */

.footer {
    display               : grid;
    background            : var(--accent);
    grid-template-columns : repeat(6,1fr);
    color                 : var(--light);
    padding               : 1rem var(--side-spacer) 2rem;
    font                  : var(--sans);
    position              : fixed;
    z-index               : var(--z-footer);
    right                 : 0;
    left                  : 0;
    bottom                : 0;
    z-index               : -1;
    gap                   : var(--gap-v) var(--gap-h);
    grid-template-rows    : auto auto 1fr auto auto;

    /* Grid area is gonna be a bit wild */
    grid-template-areas : "logo logo logo logo logo logo"
                          "addressteatro addressteatro addressfondazione addressfondazione openings openings"
                          ". . contacts contacts openings openings"
                          "social social social social buttons buttons"
                          "links links links links links credits";

}/* We need to assign all the various blocks to the correct grid area */

.footer-logo { grid-area : logo; }

.footer-address-teatro { grid-area : addressteatro; }

.footer-address-fondazione { grid-area : addressfondazione; }

.footer-contacts { grid-area : contacts; }

.footer-openings { grid-area : openings; }

.footer-social { grid-area : social; }

.footer-buttons { grid-area : buttons; }

.footer-links { grid-area : links; }

.footer-credits { grid-area : credits; }/* Footer Textual Logo */

.footer-logo {
    font          : var(--serif-m);
    margin-bottom : 2rem;
}/* The Two Main Buttons */

.footer-buttons {
    margin-top : 1rem;
    display    : grid;
    gap        : var(--gap-h);
}/* Social media links */

.footer-social {
    margin-top : 1rem;
}

.footer-social ul {
    display    : flex;
    gap        : var(--gap-v);
    list-style : none;
}/* Extra Navigation */

.footer-links {
    margin-top            : 5rem;
    display               : grid;
    grid-template-columns : subgrid;
}

.footer-link {
    grid-column    : span 1;
    font           : var(--sans-xs);
    text-transform : uppercase;
    border : none;
    text-align: left;
}/* Credits */

.footer-credits {
    margin-top     : 5rem;
    font           : var(--sans-xs);
    text-transform : uppercase;
    justify-self   : end;
}/* Mobile Adjustment of the footer*/

@media (width <= 1100px) {

    .footer {
        padding : 1rem var(--side-spacer) 1rem;
    }

    .footer-logo {
        margin-bottom : 0.5rem;
    }

    .footer-social,.footer-buttons {
        margin-top : 0.5rem;
    }

    .footer-links,.footer-credits {
        margin-top : 0.5rem;
    }

    .footer-link {
        grid-column : span 2;
    }

    .footer-credits {
        align-self: end;
    }

}

@media (width <= 700px) {

    .footer {
        grid-template-columns: repeat(2,1fr);
        position             : fixed;
        grid-template-rows   : auto;
        align-items          : start;
        align-content        : start;
        grid-template-rows: repeat(7, auto);

        /* Grid area is gonna be a bit wild */
        grid-template-areas : "logo logo"
                              "addressteatro addressfondazione"
                              "openings contacts"
                              "opanings ."
                              "social social"
                              "buttons buttons"
                              "links credits";
        }

}/* Reusable Components *//* Basic editor styles */

.editor h2 {
    font       : inherit;
    margin-top : 2rem;
    color      : var(--accent);
}

.editor h2 strong,
.editor strong h2 {
    font-weight : 500;
}

.editor p:not(:last-child) {
    margin-bottom : 1rem;
}

.editor li p {
    margin-bottom : 0 !important;
}

.editor a {
    text-decoration : underline;
    color           : var(--accent);
}

.editor a:hover {
    text-decoration: none;
}

.editor small {
    font : var(--sans-sl);
}

.editor strong {
    font-weight : 500;
}

.editor ul, .editor ol {
    margin-bottom : 1rem;
    padding-left  : 3ch;
}

.editor li::marker {
    content     : "→ ";
    white-space : pre;
    color : inherit;
}

.editor hr {
    margin : 2rem 0;
    height : 1px;
    border:  none;
    background: var(--dark);
    opacity: .25;
}/* The Event page uses slightly different styles */

.event-description.editor :is(ul,ol) {
    padding-left : 3ch;
}

.event-description.editor h2 {
    font : var(--sans-m);
}/* We have a series of different editors on the site, each with slightly different styles */

.editor-mini p:not(:last-child) {
    margin-bottom : 1rem;
}

.editor-mini strong { font-weight : 500; }

.editor-mini em { font-style : italic; font-weight : 400; }

.editor-mini em strong,
.editor-mini strong em {
    font-style : normal;
    font-weight : 500;
}

.editor-mini a {
    text-decoration: underline;
    color          : var(--accent);
}/* A few pages have a different colot scheme */

.editor-on-dark a {
    color : var(--accent-alt);
}/* Serif Editor Used in a few spots */

.editor-serif p:not(:last-child) {
    margin-bottom : 1rem;
}

.editor-serif a {
    text-decoration          : underline;
    text-decoration-thickness: 0.05em;
    transition-property      : opacity;
}

.editor-serif a:hover {
    opacity: 0.75;
}

.editor-serif strong {
    font-weight : 400;
}/* Default Image Styles */

img {
    display : block;
    width   : 100%;
    height  : auto;
}/* Reusable button style */

.button {
    border              : 1px solid currentColor;
    text-align          : center;
    display             : block;
    padding             : 0.25rem;
    transition-property : background, border-color, color;
    max-width           : 18rem;
    width               : 100%;
}

.button-wide {
    max-width : unset;
}

@media (width < 1100px) {    
    .button-wide-on-mobile { max-width : unset }
}

.button-accent {
    border     : 1px solid var(--accent);
    color      : var(--accent);
    background : var(--light);
}

.button-light {
    border-color : var(--light);
    color        : var(--light);
}

.button-currentcolor {
    border     : 1px solid currentcolor;
    color      : currentcolor;
    background : transparent;
}

.button-l {
    padding : 0.5rem;
}

@media (hover:hover) {

    .button-h-light:hover {
        background   : var(--light);
        color        : var(--accent);
        border-color : var(--light);
    } 

    .button-a-light:hover {
        background   : var(--accent);
        color        : var(--light);
        border-color : var(--accent);
    } 

    .button-hover-accent:hover {
        background   : var(--accent);
        color        : var(--light);
        border-color : var(--accent);
    } 

    .button-hover-light:hover {
        background   : var(--light);
        color        : var(--accent);
        border-color : var(--light);
    } 

    .button-hover-dark:hover {
        background   : var(--dark);
        color        : var(--light);
        border-color : var(--dark);
    } 
}/* Reusable Styles for the Titles */

.black-titlebar {
    background     : var(--dark);
    padding        : calc(0.25rem + 1px) 0.5rem calc(0.25rem - 1px);
    font           : var(--nav);
    color          : var(--light);
    text-transform : uppercase;
}/* A bunch of containers all use the same spacing */

#home-wrapper,#calendario-wrapper,#stagione-wrapper,#stagioni-wrapper,#storia-wrapper,#evento-wrapper,#caffe-wrapper,#default-wrapper,#spazi-wrapper,#visite-wrapper,#info-wrapper {
    clip-path: border-box;
}/* Add default spacing to the wrappers */

div[id*="-wrapper"] {
    padding : 3rem var(--side-spacer) 6rem;
}/* Sidebar View */

@media (width > 1100px) {
    div[id*="-wrapper"] {
        padding : 0.5rem var(--side-spacer) 10rem;
    }
}/* Remove padding in a few places */

#home-wrapper,
#eventi-wrapper,
#progetto-wrapper,
#progetto-archivio-wrapper {
    padding : 0;
}/* Timeline containers have a different grid structure */

#calendario-wrapper,#visite-wrapper,#stagione-wrapper,#caffe-wrapper,#cerca-wrapper {
    grid-template-rows  : auto auto 1fr;
    grid-template-areas : "intro" "sidebar" "timeline";
}

@media (width > 1100px) {
    #calendario-wrapper,#visite-wrapper,#stagione-wrapper,#caffe-wrapper,#cerca-wrapper {
        grid-template-rows  : auto 1fr;
        grid-template-areas : ". intro" ". timeline";
    }
}/* We have a bunch of sidebars throughout the site */

.sidebar-with-nav-links .sidebar-inner {
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
    gap            : var(--side-spacer);
}

.sidebar-nav-link {
    display            : block;
    font               : var(--serif-s);
    padding            : 1rem 0;
    border-bottom      : 1px solid currentColor;
    transition-property: opacity;
    opacity            : 0.5;
    pointer-events     : all;
}

.sidebar-nav-link:hover {
    opacity : 1;
}

.sidebar-nav-link-with-icon {
    display              : grid;
    grid-template-columns: 1rem 1fr;
    align-items          : center;
    gap                  : 0.5rem;
}

.sidebar-nav-link-icon {
    display     : block;
    width       : 100%;
    aspect-ratio: 1;
}

.sidebar-nav-link-icon svg {
    width   : 100%;
    height  : 100%;
    fill    : currentColor;
    display : block;
}/* Disabled Link Item */

.sidebar-nav-link.disabled {
    opacity : .35;
}

.sidebar-nav-link[aria-current] {
    opacity : 1;
}

.sidebar-footer {
    grid-area : footer;
    display   : grid;
    gap       : 3px;
}/* General Navigation Button */

.sidebar-navigation-button {
    display : none;
}

@media (width > 1100px) {

    .sidebar {
        position       : fixed;
        inset          : 2.5rem auto 1rem 1rem;
        z-index        : var(--sidebar);
        grid-area      : sidebar;
        z-index        : var(--z-sidebar);
        pointer-events : none;
    }

    .sidebar a, .sidebar button {
        pointer-events: all;
    }

    .sidebar-inner {
        min-height          : 100%;
        display             : grid;
        grid-template-rows  : 1fr auto;
        gap                 : 1rem;
        grid-template-areas : "navigation" "footer";
        width               : var(--sidebar-width);
    }

    /* Navigation Section */
    .sidebar-navigation {
        grid-area     : navigation;
        display       : grid;
        gap           : 3px;
        align-self    : stretch;
        align-items   : end;
        align-content : end;
    }

    .sidebar-navigation-item {
        background     : var(--light);
        color          : var(--dark);
        font           : var(--nav);
        padding        : calc(0.25rem + 2px) 0.5rem calc(0.25rem - 2px);
        text-transform : uppercase;
    }

    .sidebar-navigation-item:hover {
        color      : var(--light);
        background : var(--accent);
    }

}/* Single Event Sidebar Content */

.sidebar-evento-title {
    font           : var(--nav);
    text-transform : uppercase;
    padding-top    : 1rem;
    padding-bottom : 1rem;
}/* Mobile Sidebar */

@media (width <= 1100px) {

    /* We hide the sidebar on mobile for the most part */
    .sidebar {
        grid-area : sidebar;
    }

    .sidebar-footer {
        margin-top : 1rem;
    }

}/* Template Specific Adjustments */

@media (width <= 1100px) {


    :where(#home,#storia,#spazi,#default,#info,#eventi) .sidebar { display : none; }

    #home .sidebar {
        inset   : auto 0 0 0;
        position: fixed;
        z-index : 999999;
    }
    #home .sidebar-navigation {
        display: none;
    }

    /* General Navigation Button */
    .sidebar-navigation-button {
        display : block;
        width   : 100%;
    }
    
}/* New Styles For The Sticky Items */

.sidebar-sticky-items {
    align-self : end;
    padding-bottom: 2.75rem;
}/* The Actual link */

.sidebar-sticky-item {
    display        : block;
    padding-bottom : 3px;
    pointer-events : all;
}

.sidebar-sticky-item:first-child {
    padding-top : 3px;
}/* The home is special */

#link-spazi.sidebar-sticky-item {
    padding-top : 0.75rem;
}/* The Inner text */

.sidebar-sticky-item-text {
    background     : var(--light);
    color          : var(--dark);
    font           : var(--nav);
    padding        : calc(0.25rem + 2px) 0.5rem calc(0.25rem - 2px);
    text-transform : uppercase;
    display        : block;
}

.sidebar-sticky-item:hover .sidebar-sticky-item-text {
    color      : var(--light);
    background : var(--accent);
}/* We have a custom version of the sidebar for small screens */

.sidebar-compact {
    position   : static;
    min-height : calc(100svh - 3.5rem);
    align-self : start;
    grid-area  : unset;
    grid-row   : 1 / 10;
    padding-top: 2rem;
}

@media (width < 1100px) {
    .sidebar-compact {
        grid-column: 1;
        grid-row   : 1;
    }
}/* Accordion Styles */

.accordion {
    border-bottom  : 1px solid currentColor;
}

.accordion-title {
    font                : var(--sans-m);
    padding             : 0.5rem 0;
    cursor              : pointer;
    position            : relative;
    transition-property : color;
}

.accordion-title::after {
    content             : "";
    position            : absolute;
    aspect-ratio        : 1;
    height              : 0.5em;
    border-right        : 1px solid currentColor;
    border-bottom       : 1px solid currentColor;
    transform           : rotate(45deg);
    top                 : 0.75em;
    right               : 0;
    transition-property : color, transform;
    transform-origin    : center center;
}

.accordion-title:hover {
    color : var(--accent);
}

.accordion-title:hover::after {
    
}

.accordion-content {
    padding               : 0.5rem 0 1rem;
    font                  : var(--sans-m);
    display               : grid;
    grid-template-columns : 2fr 9fr;
    gap                   : var(--gap-v) var(--gap-h) ;
    display               : none;
}

@media (width > 1100px) {
    .accordion-content { grid-template-columns : 2fr 15fr; }
}

.accordion[open] .accordion-content {
    display : grid;
}

.accordion-text {
    font : var(--sans-m);
}

.accordion-text:first-child {
    grid-column : 1 / span 2;
}/* Open Accordion */

.accordion[open] .accordion-title::after {
    transform : translateY(0.25em) rotate(225deg);
}/* A few pages need a different set of styles for the accordion text */

:where(#spazi,#evento,#info,#visite,#default .block-accordions) .accordion .accordion-text h2 {
    color     : inherit;
    margin-top: 1.5rem;
}

.accordion .accordion-text h2:first-child {
    margin-top : 0;
}

:where(#spazi,#evento,#info,#visite,#default .block-accordions) .accordion:not(.event-credits) .accordion-text p {
    padding-left: 1rem;
    color       : var(--dark-alt);
}

:where(#spazi,#evento,#info,#visite,#default .block-accordions) .accordion:not(.event-credits) .accordion-text a {
    color : var(--dark);
}

:where(#spazi,#evento,#info,#visite,#default .block-accordions) .accordion:not(.event-credits) .accordion-text ul {
    padding-left : 2.5rem;
    color        : var(--dark-alt);
}

:where(#spazi,#evento,#info,#visite,#default .block-accordions) .accordion:not(.event-credits) .accordion-text li p {
    padding-left : 0;
}

.accordion.event-credits .accordion-text h2 {
    color: var(--dark);
}/* The Prices table used in a few places */

.prices-list {
    display               : grid;
    gap                   : 0.25rem 0;
    grid-template-columns : 1fr 6rem;

}

.prices-tier,
.prices-price {
    border-bottom : 1px solid currentColor;
    padding-bottom : 0.25rem;
}/* Date blocked used on the homepage and on the single show page */

.event-date-container:not(:last-child) {
    margin-bottom : 1rem;
}

.event-date-container[data-open] {
    padding-right : 2rem;
    position      : relative;
}

.event-date-note {
    font           : var(--sans-s);
    text-transform : uppercase;
    font-weight    : 450;
}

.event-date-day::first-letter {
    text-transform: uppercase;
}

.event-date-location {

}

.event-date-time {

}

.event-date-open {
    position : absolute;
    width    : 1.5rem;
    height   : 1.5rem;
    inset    : 0 0 auto auto;
    fill     : currentColor;
}

.event-date-open path {
    fill : currentColor;
}/* The H1 used in a bunch of different places */

.page-title {
    font          : var(--serif-l);
    margin-bottom : 3rem;
    text-wrap     : balance;
}

.page-title span {
    display: block;
}/* Homepage opening section */

.opening {
    width                : 100%;
    height               : 100svh;
    align-content        : end;
    min-height           : unset;
    position             : relative;
    display              : grid;
    grid-template-columns: var(--grid-home-category);
    grid-template-areas  : "content content";
    padding              : var(--side-spacer);
    gap                  : var(--side-spacer);
}/* Content Container */

.opening-content {
    z-index       : 1;
    grid-area     : content;
    color         : var(--light);
    justify-self  : center;
    width         : 100%;
}

#home .opening {
    padding-bottom : 2.25rem;
}/* Big title, contains the name of the season */

.opening-title {
    font        : var(--serif-xl);
    font        : var(--serif-xl-fluid);
    grid-column : 1 / -1;
}/* The Small intro text */

.opening-intro {
    font       : var(--sans-l);
    margin-top : 0.35rem;
}/* Extra text at the top */

.opening-place-time {
    font          : var(--sans-l);
    margin-bottom : 0.5rem;
}/* The Buttons container */

.opening-buttons {
    margin-top           : 1rem;
    display              : grid;
    grid-template-columns: 1fr;
    gap                  : 0.5rem;
}

.opening-buttons .button:only-child {
    grid-column : 1 / -1;
}/* The Media background */

.opening-background-container {
    position : absolute;
    inset    : 0;
    z-index  : 0;
}

.opening-background-container::after {
    content          : "";
    inset            : 0;
    background-image : linear-gradient(to top, rgba(0,0,0,0.5) 30%, transparent);
    background-size  : cover;
    position         : absolute;
}

.opening-background-video,
.opening-background-image {
    display         : block;
    width           : 100%;
    height          : 100%;
    object-fit      : cover;
    object-position : center center;
}/* Mobile Adjustments */

@media (width > 1100px) {

    .opening {
        align-content      : center;
        justify-content    : center;
        grid-template-areas: " . content";
    }

    .opening-intro {
        margin-top : 0.5rem;
    }

    .opening-background-container::after {
        background-image    : radial-gradient(ellipse at top right, rgba(0,0,0,0.5) 50%, transparent);
    }

    .opening-content {
        padding-bottom : 10dvh;
        max-width      : 35rem;
    }

}

@media (width > 500px) {
    .opening-buttons {
        grid-template-columns: 1fr 1fr;
    }
}

@media (width < 500px) {
    .opening-title {
        font-weight : 500;
    }
}/*! Flickity v2.3.0
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}/* ---- flickity-button ---- */

.flickity-button {
  position: absolute;
  background: hsla(0, 0%, 100%, 0.75);
  border: none;
  color: #333;
}

.flickity-button:hover {
  background: white;
  cursor: pointer;
}

.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
}

.flickity-button-icon {
  fill: currentColor;
}/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* vertically center */
  transform: translateY(-50%);
}

.flickity-prev-next-button.previous { left: 10px; }

.flickity-prev-next-button.next { right: 10px; }/* right to left */

.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}/* ---- page dots ---- */

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}/* The Grid of Cards */

.cards {
    display              : grid;
    gap                  : 0.5rem;
    grid-template-columns: repeat(auto-fill,minmax(18rem,1fr));
    padding-top          : 0.5rem !important;
}

@media (width < 600px) {
    .cards {
        grid-template-columns : 1fr;
        padding-bottom        : 0 !important;
    }
}/* The Show Card */

.card {
    aspect-ratio    : 7/10;
    background-size : cover;
    padding         : 0.5rem;
    display         : flex;
    align-items     : flex-end;
    justify-content : stretch;
    color           : var(--light);
    position        : relative;
}

@media (width < 1100px) {
    .card {
        aspect-ratio: 5/6;
    }
}

.card-link {
    position  : absolute;
    inset     : 0;
    display   : block;
    z-index   : 0;
}

.card[aria-hidden] {
    display: none;
}

.card::after {
    content       : "";
    position      : absolute;
    inset         : 0;
    z-index       : 1;
    background    : linear-gradient(to bottom, transparent, rgba(0,0,0,0.9));
    pointer-events: none;
}

.card::before {
    content  : "";
    position : absolute;
    z-index  : -1;
    inset    : 0;
    background: linear-gradient(to bottom left, black, var(--accent));
}

.card-content {
    width   : 100%;
    z-index : 2;
    pointer-events: none;
}

.card-title {
    font          : var(--serif-m);
    margin-bottom : 0.25rem;
}

.card-dates {
    margin-top: 1rem;
}

.card-button {
    margin-top : 0.5rem;
    pointer-events: all;
}

@media (width < 1100px) {
    .card-title {
        font        : var(--serif-l);
        line-height : 1;
        font-weight : 500;
    }
}/* Blocks Container */

.blocks {
    display : grid;
    gap     : 1.5rem;
}

@media (width < 1100px) {
    .blocks {
        display : grid;
        gap     : 0.9rem;
    }   
}/* The Title Block */

.block-title {
    font: var(--serif-l-fluid);
}

.block-title-primary,
.block-title-secondary {
    display : block;
}

.block-title-secondary {
    font : var(--serif-m-fluid);
}

@media (width < 1100px) {
    .block-title:not(:first-child){
        margin-top : 1rem;
    }
}/* The Text Block */

.block-writer {
    font                 : var(--sans-m);
    display              : grid;
    gap                  : var(--gap-v) var(--gap-h);
    grid-template-columns: 1fr;
    margin-bottom        : 2rem;
}

.block-writer :is(p,ul,ol):not(:last-child) {
    margin-bottom : 0.5rem;
}

@media (width < 1100px) {
    .block-writer {
        margin-bottom : 0.3rem;
    }
}/* The Picture Block */

.block-picture {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 1rem;
    margin-bottom        : 2rem;
}

.block-picture img {
    height          : 100%;
    object-fit      : cover;
    object-position : center;
}

.block-picture:has(+ .block-picture) {
    margin-bottom : 1rem;
}

.block-picture-image-container {
    grid-column : var(--columnSpan);
}

.block-picture-caption {
    font           : var(--sans-s);
    text-transform : uppercase;
    padding-top    : 0.5rem;
}

@media (width <= 1100px) {
    .block-picture {
        gap          : 0.25rem;
        margin-bottom: 0.3rem;
    }
}

@media (width < 600px) {
    .block-picture {
        grid-column : 1fr;
    }
}/*  */

.block-accordions .accordion:first-child .accordion-title {
    padding-top : 0;
}

.block-accordions .accordion:first-child .accordion-title::after {
    top : 0.25rem;
}/* The Info Block */

.block-info:not(:first-child) {
    margin-top : 3rem;
}

.block-info-title {
    font : var(--serif-l-fluid);
}

.block-info-primary,
.block-info-secondary {
    display : block;
}

.block-info-secondary {
    font  : var(--serif-m-fluid);
    color : var(--accent);
}/* The Two columns text section */

.block-info-texts {
    margin-top            : 3rem;
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : var(--gap-h);
    font                  : var(--sans-m);
}/* The Accordions section */

.block-info-accordions {
    margin-top : 3rem;
}

@media (width < 550px) {
    .block-info-texts {
        grid-template-columns : 1fr;
    }
}

@media (width < 1100px) {
    .block-info-texts {
        margin-top : 1.5rem;
    }
    .block-info-accordions {
       margin-top : 1.5rem;
    }
    .block-info:not(:first-child) {
       margin-top : 1rem;
    }
}/* The Map Block */

.block-map {
    margin : 1rem 0;
}

.block-map-content {
    font      : var(--sans-m);
    max-width : 60ch;
}

.block-map svg {
    margin : auto;
    max-width : 40ch;
    display: block;
}

.block-map .map-icon {
    cursor : pointer;
}

.block-map .map-icon:hover .map-icon-bg {
    fill : var(--accent);
}

.block-map .map-icon-bg {
    stroke       : var(--light);
    stroke-width : 1px;
}/* The New Legend */

.block-map-legend {
    list-style: none;
    width : 100%;
    max-width: 40ch;
    margin : 2rem auto 0;
}

.block-map-legend a {
    display              : grid;
    grid-template-columns: 1.25rem 1fr;
    gap                  : 2rem;
    align-items: center;
}

.block-map-legend a:hover svg:last-child {
    fill : var(--accent);
}

.block-map-legend span {
    position : relative
}

.block-map-legend svg:first-child {
    fill : var(--light);
    position: relative;
    z-index: 1;
}

.block-map-legend svg:last-child {
    position :absolute;
    z-index  : 0;
    inset    : 0;
}

@media (width > 1100px) {
    .block-map-legend {
        display: none;
    }
}/* The Logos Block */

.block-logos-title {
    margin-bottom : 1rem;
    font          : var(--serif-m);
}

.block-logos-grid {
    border-bottom   : 1px solid var(--dark);
    display         : flex;
    justify-content : flex-start;
    align-items     : center;
    gap             : 2rem;
    flex-wrap       : wrap;
    padding-bottom  : 2rem;
}

.block-logos-logo-container {
    background : var(--light);
}

.block-logos-logo-image {
    mix-blend-mode: multiply;
}/* Sidebar Chunks *//* Search Section in the sidebar */

.sidebar-search-container {
    margin-top    : 1rem;
    pointer-events: all;
    appearance    : none;
}/* Inner container */

.sidebar-search-form {
    display               : grid;
    grid-template-columns : 1fr 1rem;
    grid-template-areas   : "label label" "input button";
}/* The Search label */

.sidebar-search-label {
    grid-area      : label;
    text-transform : uppercase;
    font           : var(--sans-s);
}/* Text Input */

.sidebar-search-input {
    appearance     : none;
    border         : none;
    border-bottom  : 1px solid var(--dark);
    font           : var(--sans);
    padding-bottom : 0.125rem;
}

input[type="search" i]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
    opacity: 0;
}/* Submit button */

.sidebar-search-button {
    border         : none;
    border-bottom  : 1px solid var(--dark);
    padding-bottom : 0.125rem;
    cursor         : pointer;
}

.sidebar-search-button svg {
    opacity: .6;
}

.sidebar-search-button:hover svg {
    fill    : var(--accent);
    opacity : 1;
}

@media (width < 1100px) {
    .sidebar-search-container {
       margin-top : 0rem;
    }
}/* The categories section */

.sidebar-categories {
    margin-top : 1.5rem;
}

.sidebar-categories-title,
.sidebar-categories-button {
    font          : var(--sans-s);
    text-transform: uppercase;
    margin-bottom : 0.5rem;
    appearance    : none;
    border        : none;
}

.sidebar-categories-button {
    display : none; 
}

.sidebar-categories-button svg {
    width  : 1rem;
    height : 1rem;
}

:is(#stagione,#caffe) .sidebar-categories-button svg {
    display : none;
}/* The Main container */

.category-filters {
    display       : grid;
    gap           : 0.25rem;
    justify-items : start;
    margin-bottom : 1rem;
}/* Filters Container */

.category-filters-buttons {
    display   : flex;
    flex-wrap : wrap;
    gap       : 0.25rem;
}/* Style The Buttons */

.filters-button {
    appearance : none;
    cursor     : pointer;
    border     : 1px solid var(--dark);
    padding    : 0.25rem 0.5rem;
    font       : var(--sans);
    box-sizing : border-box;
}

.filters-button[aria-selected] {
    background   : var(--accent);
    border-color : var(--accent);
    color        : var(--light);
}

.filters-button[aria-disabled] {
    cursor  : not-allowed;
    opacity : 0.5;
}

.sidebar-categories-list,
.sidebar-subcategories-list {
    list-style : none;
    display    : flex;
    flex-wrap  : wrap;
    gap        : 0.5rem;
}

.sidebar-category-list-item {
    order  : 1;
}/* Hide categories on mobile */

@media (width < 550px) {
    
    #calendario .category-filters {
        margin-bottom : 0.25rem;
    }

    #calendario .category-filters-buttons {
        display : none;
    }

    #calendario .sidebar-categories.is-expanded .category-filters {
        margin-bottom : 1rem;
    }

    #calendario .sidebar-categories.is-expanded .category-filters-buttons {
        display : flex;
    }
}

@media (hover : hover) {

    .filters-button:not([aria-disabled]):hover {
        background : var(--dark);
        color      : var(--light);
    }
    
}

@media (width < 1100px) {
    .is-expanded .sidebar-categories-button svg {
        transform: rotate(90deg);
    }
}

@media (width <= 550px) {
    .sidebar-categories-button {
        display : flex;
        align-items: center;
        cursor : pointer;
    }
    .sidebar-categories-title {
        display : none;
    }
}/* Filter by OPEN status */

.sidebar-open-container {
    margin-top : 1.5rem;
}

.sidebar-open-button {
    display               : grid;
    gap                   : 1rem;
    grid-template-columns : 1fr 1.25rem;
    width                 : 100%;
    align-items           : center;
    border                : none;
    cursor                : pointer;
}

.sidebar-open-text {
    font           : var(--sans-s);
    text-transform : uppercase;
    text-align     : left;
    text-wrap: balance;
}

.sidebar-open-icon svg {
    display : block;
    width   : 1.5rem;
}/* Selected state */

.sidebar-open-button[aria-selected] {
    color : var(--accent);
}

.sidebar-open-button[aria-selected] path { fill : var(--accent) }

@media (hover : hover) {
    /* Hover State */
    .sidebar-open-button:hover {
        color : var(--accent);
    }

    .sidebar-open-button:hover path {
        fill  : var(--accent);
    }
}/* The calendar date picker/visualizer */

.calendar-container {
    widows     : 100%;
}

#calendar {
    margin-top : 1.5rem;
    pointer-events: all;
}

#calendar .air-datepicker {
    width                 : 100%;
    background            : var(--light);
    border                : none;
    --adp-nav-action-size : 1.5rem;
}

#calendar .air-datepicker-nav {
    border-bottom : none;
    padding       : 0;
    background    : var(--dark);
    color         : var(--light);
    min-height    : unset;
    border        : 1px solid var(--dark);
}/* Topbar title */

#calendar .air-datepicker-nav--title {
    font           : var(--nav);
    text-transform : uppercase;
    padding        : 2px 0 0;
}/* Arrow container */

#calendar .air-datepicker-nav--action {
    border-radius: 0;
}

#calendar .air-datepicker-nav--action svg {
    width  : 1.5rem;
    height : 1.5rem;
}

#calendar .air-datepicker-nav--action path {
    fill   : var(--light);
    stroke : unset;
}

#calendar .air-datepicker--content {
    padding : 0;
}

#calendar .air-datepicker-body--day-name {
    font           : var(--sans-s);
    color          : var(--dark);
    text-transform : capitalize;
}

#calendar .air-datepicker-cell.-day- {
    font : var(--calendar-widget);
}/* Day Selector */

#calendar .air-datepicker-cell.-day- {
    pointer-events : none;
}

#calendar .air-datepicker-cell.-day-.day-with-event,
#calendar .air-datepicker-cell.-day-.-current- {
    pointer-events : all;
}

#calendar .air-datepicker-cell.-day-.-current- {
    color         : var(--accent);
    width         : 1.25rem;
    height        : 1.25rem;
    justify-self  : center;
    align-self    : center;
    border-radius : 50%;
    border        : 1px solid var(--accent);
}

#calendar .air-datepicker-cell.day-with-event {
    background    : #E5C9D5;
    width         : 1.25rem;
    height        : 1.25rem;
    justify-self  : center;
    align-self    : center;
    border-radius : 50%;
    border        : 1px solid #E5C9D5;
}

#calendar .air-datepicker-cell.-day-.-selected- {
    color         : var(--light);
    background    : var(--accent);
    width         : 1.25rem;
    height        : 1.25rem;
    justify-self  : center;
    align-self    : center;
    border-radius : 50%;
    border        : 1px solid var(--accent);
}/* Month Selector */

#calendar .air-datepicker-cell.-month-.-current-,
#calendar .air-datepicker-cell.-year-.-current- {
    color         : var(--light);
    background    : var(--accent);
    width         : auto;
    height        : auto;
    border-radius : 0;
}

#calendar .air-datepicker-cell.-month-.-focus-,
#calendar .air-datepicker-cell.-year-.-focus- {
    color         : var(--light);
    background    : var(--dark);
    width         : auto;
    height        : auto;
    border-radius : 0;
}

@media (width < 1100px) {
    #calendar {
        display : none;
    }
}/* Move all the hover states inside a hover media query */

@media (hover : hover) {

    /* Topbar hovered */
    #calendar .air-datepicker-nav--title:hover {
        background : unset;
        opacity: .75;
    }

    /* Topbar hovered */
    #calendar .air-datepicker-nav--title:hover {
        background : unset;
        opacity: .75;
    }

    #calendar .air-datepicker-nav--action:hover {
        background: unset;
        opacity: .75;
    }

}/* Caffe sidebar thingy */

.sidebar-caffe-wrapper {
    position       : absolute;
    top            : var(--side-spacer);
    left           : var(--side-spacer);
    bottom         : var(--side-spacer);
    z-index        : var(--z-caffe);
    width          : 100%;
    max-width      : var(--sidebar-width);
    pointer-events : none;
}/* The Inner container */

.sidebar-caffe-inner {
    position : relative;
    height   : 100%;
    width    : 100%;
}

.sidebar-caffe {
    background : var(--dark);
    color      : var(--light);
    font       : var(--caffe-calendar);
    width      : 100%;
    position   : sticky;
    top        : calc(100vh - 3rem);
}/* The hidden part of the section */

.sidebar-caffe-hidden {
    position       : absolute;
    padding        : 8px 0.25rem 0 0.75rem;
    bottom         : 100%;
    right          : 0;
    left           : 0;
    background     : var(--dark);
    opacity        : 0;
    pointer-events : none;
}/* The Toggle button */

.sidebar-caffe-button {
    border         : none;
    width          : 100%;
    text-align     : left;
    cursor         : pointer;
    padding        : 0 0.25rem 0 0.75rem;
    pointer-events : all;
}

.sidebar-caffe-button .arrow-up {
    fill : var(--light);
}/* The days container */

.sidebar-caffe-days {
    display : grid;
}/* Single date container */

.sidebar-caffe-day {
    width                 : 100%;
    display               : grid;
    grid-template-columns : 6rem 1fr 1.5rem;
    gap                   : 0rem;
    padding               : 2px 0;
    align-items           : center;
    grid-template-areas   : "day status arrow";
    cursor                : pointer;
}/* Date container */

.sidebar-caffe-date {
    display               : grid;
    grid-template-columns : 1.5rem 1.5rem 1.5rem;
    justify-content       : start;
    gap                   : 0.25rem;
    position              : relative;
}

.sidebar-caffe-date span {
    text-transform: capitalize;
}

.sidebar-caffe-date span:nth-child(2) { text-align : center; }

.sidebar-caffe-date span:nth-child(3) { text-align : right; }/* The Status */

.sidebar-caffe-status {
    grid-area : status;
    display: grid;
    grid-template-columns: auto 1fr;
}

.sidebar-caffe-status-label:only-child {
    grid-column : span 2;
}

.sidebar-caffe-status-time{
    justify-self: center;
}

.sidebar-caffe-arrow {
    grid-area : arrow;

}

.sidebar-caffe-arrow svg {
    fill    : var(--light);
    display : block;
    width   : 100%;
    height  : 100%;
}

.sidebar-caffe-day-container .sidebar-caffe-arrow {
    overflow : hidden;   
}

.sidebar-caffe-arrow .caffe-icon {
    width  : 10px;
    height : 6px;
    margin : auto;
}/* The Hidden Info */

.sidebar-caffe-day-info {
    display               : grid;
    grid-template-columns : 6rem 1fr;
    gap                   : 0;
    grid-template-areas   : ". time" "info info";
}

.sidebar-caffe-hours {
    grid-area : time;
}

.sidebar-caffe-info {
    grid-area     : info;
    font          : var(--caffe-calendar);
    padding-bottom: 4px;
    padding-top : 4px;
}/* Link To the coffee page */

.sidebar-caffe-link {
    display : block;
    margin  : 8px 0 4px;
}/* Active State */

.sidebar-caffe-open .sidebar-caffe-hidden {
    opacity        : 1;
    pointer-events : all;
    transform      : initial;
}

.sidebar-caffe-open .sidebar-caffe-button svg,
.sidebar-caffe-day-container[open] svg {
    transform: rotate(180deg);
}

@media (width <= 1100px) {
    .sidebar-caffe-wrapper {
        position       : fixed;
        top            : unset;
        right          : 0;
        left           : 0;
        bottom         : 0;
        width          : 100%;
        max-width      : unset;
        pointer-events : all;
    }

    .sidebar-caffe-inner {
        position : static;
    }

    .sidebar-caffe {
        position : relative;
        top      : unset;
    }
}

@media (hover : hover) {

    .sidebar-caffe-day:hover svg {
       fill : var(--accent);
    }
    .sidebar-caffe-link:hover {
       color : var(--accent);
    }
}/* Interactivity *//* All the JS related CSS we need to use */

.js-filtered-by-category { display : none; }

.js-filtered-by-open { display : none; }