/* 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;

    /* 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; }
}

@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-TRIAL-SemiBold.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 600;
    font-display : swap;
}
@font-face {
    font-family  : "Tobias";
    src          : url('fonts/Tobias-TRIAL-RegularItalic.woff2') format('woff2');
    font-style   : italic;
    font-weight  : 400;
    font-display : swap;
}
@font-face {
    font-family  : "Tobias";
    src          : url('fonts/Tobias-TRIAL-Regular.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 400;
    font-display : swap;
}
@font-face {
    font-family  : "ABCROM";
    src          : url('fonts/ABCROM-RegularItalic-Trial.woff2') format('woff2');
    font-style   : italic;
    font-weight  : 400;
    font-display : swap;
}
@font-face {
    font-family  : "ABCROM";
    src          : url('fonts/ABCROM-Regular-Trial.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 400;
    font-display : swap;
}
@font-face {
    font-family  : "ABCROM";
    src          : url('fonts/ABCROM-MediumItalic-Trial.woff2') format('woff2');
    font-style   : italic;
    font-weight  : 500;
    font-display : swap;
}
@font-face {
    font-family  : "ABCROM";
    src          : url('fonts/ABCROM-Medium-Trial.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 500;
    font-display : swap;
}


:root {
    
    /* Colors */
    --light        : #FAFAFA;
    --dark         : #000000;
    --accent       : #900443;
    --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 14px/1.21 var(--font-sans);
    --sans-l  : 400 24px/1.17 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.08 var(--font-serif);
    --serif-l  : 400 30px/1.1 var(--font-serif);
    --serif-xl : 400 40px/1.1 var(--font-serif);

    --nav   : 400 15px/20px Berling, serif;
    --nav-l : 400 22px/20px Berling, serif;

    /* 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;

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

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

}

/* Above 800px we introduce the sidebar */
@media (width > 800px) {
    :root {
        --sidebar-width : 15rem;
        --outer-grid    : var(--sidebar-width) 1fr;
    }
}

@media (width > 950px) {
    :root {
        --sidebar-width : 20rem;
    }
}

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

        --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);

    }
}

html,body {
    scroll-behavior: smooth;
}

body {
    font-size   : var(--font-size);
    line-height : var(--font-height);
}
}/* 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";
    min-height            : 100vh;
}

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

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

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

main {
    grid-area : innergrid;
}/* UI Elements *//* Website Header and Navigation */

.header {
    position   : fixed;
    inset      : 1rem 1rem auto;
    color      : var(--light);
    clip-path  : content-box;
    max-height : 1.5rem;
    width      : var(--sidebar-width);
    transition : all 0.25s linear;
    z-index    : 10000;
}/* 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;
}

.header-menu-button-icon {
    fill : var(--light);
    width : 15px;
    height : 9px;
}/* The Main Menu */

.header-navigation-wrapper {
    background     : var(--accent);
    pointer-events : none;
}

.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 a {
    opacity: .7;
}

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

.header-navigation-secondary span {
    margin-bottom : 0.25rem;
    display       : block;
}/* Buttons Block */

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

.header-navigation-buttons li {
    max-width : 20rem;
}/* Extra Section */

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

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

.header-navigation-credits {
    grid-area      : credits;
    align-self     : end;
    text-transform : uppercase;
    font           : var(--sans-xs);
}/* Small Screen Adjustments */

@media (width < 1000px) {    
    .header-navigation {
        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";
    }
}/* The Style for the Open navigation */

.navigation-is-open {

    .header {
        width      : calc(100vw - 2rem);
        max-height : 100vh;
    }

    .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;
    }



}/* The Website's Footer */

.footer {
    background : var(--accent);
    color      : var(--light);
    padding    : 1rem 1rem 2rem;
    font       : var(--sans);
    position   : relative;
    z-index    : var(--footer);

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

    grid-template-rows : auto auto 1fr auto auto;
}/* 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 : 3rem;
}/* 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            : 10rem;
    display               : grid;
    grid-template-columns : subgrid;
}

.footer-link {
    grid-column    : span 4;
    font           : var(--sans-xs);
    text-transform : uppercase;
}/* Credits */

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

@media (width <= 1000px) {

    .footer {
        padding : 3rem 1rem 10rem;

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

        grid-template-rows : auto auto auto 1fr auto auto;
    }

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

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

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

    .footer-links {
        grid-template-columns : 1fr;
        gap : 0.25rem;
    }

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

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

.editor {

}

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

.editor a {
    text-decoration : underline;
}

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

.editor strong {
    background : var(--accent-light);
}/* 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;
}

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

.button-l {
    padding : 0.5rem;
}

.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);
}/* A bunch of containers all use the same spacing */

#calendario-wrapper,#stagione-wrapper,#stagioni-wrapper,#storia-wrapper,#evento-wrapper,#caffe-wrapper,#default-wrapper,#spazi-wrapper,#visite-wrapper,#info-wrapper {
    padding : 3rem 1rem 6rem;
}/* Sidebar View */

@media (width > 800px) {
    #calendario-wrapper,#stagione-wrapper,#stagioni-wrapper,#storia-wrapper,#evento-wrapper,#caffe-wrapper,#default-wrapper,#spazi-wrapper,#visite-wrapper,#info-wrapper {
        padding : 0.5rem 1rem 10rem;
    }
}/* Timeline containers have a different grid structure */

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

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

@media (width > 800px) {


    .sidebar {
        position : fixed;
        inset    : 2.5rem auto 1rem 1rem;
        z-index  : var(--sidebar);
    }

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

    .sidebar-footer {
        grid-area : footer;
        display   : grid;
        gap       : 3px;
    }

    /* 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 <= 800px) {

    /* We hide the sidebar on mobile for the most part */
    .sidebar { display: none; }
}/* 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 var(--dark);
    border-bottom       : 1px solid var(--dark);
    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 {
    border-right-color  : var(--accent);
    border-bottom-color : var(--accent);
}

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

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

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

.accordion[open] .accordion-title::after {
    transform : translateY(0.25em) rotate(225deg);
}/* 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;
}/* The H1 used in a bunch of different places */

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

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

.opening {
    width            : 100%;
    height           : 100svh;
    background-image : linear-gradient(to top, rgba(0,0,0,0.5) 30%, transparent), var(--backgroundImage);
    background-size  : cover;
    padding          : 1rem;
    align-content    : end;
    min-height       : unset;
}/* Inner Container */

.opening-inner {
    grid-template-areas : "content content content content content content content content content content content content content content content content content";
}/* Content Container */

.opening-content {
    grid-area  : content;
    align-self : end;
    color      : var(--light);
}/* Big title, contains the name of the season */

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

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

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

@media (width > 1100px) {
    .opening {
        background-image    : radial-gradient(ellipse at top right, rgba(0,0,0,0.5) 50%, transparent), var(--backgroundImage);
        grid-template-rows  : 50% 50%;
    }

    .opening-inner {
        grid-template-areas : ". . . . . content content content content content content content content . . . .";
    }

    .opening-intro,
    .opening-buttons {
        grid-column : span 8;
    }
}

@media (width < 500px) {
    .opening-buttons {
        grid-template-columns : 1fr;
    }
}/*! 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;
}/* Blocks Container */

.blocks {
    display : grid;
    gap     : 1.5rem;
}/* The Title Block */

.block-title {
    font : var(--serif-l);
}/* The Text Block */

.block-writer {
    font      : var(--sans-m);
    max-width : 70ch;
}

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

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

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

.block-info-title {
    font : var(--serif-l);
}/* 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;
}/* Sidebar Chunks *//* Search Section in the sidebar */

.sidebar-search-container {
    margin-top : 1rem;
}/* 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;
}/* 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;
}/*  *//* The categories section */

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

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

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

.sidebar-category-list-item {
    order  : 1;
}

:is(.sidebar-category-list-item,.sidebar-subcategory-list-item) :is(button,a) {
    font       : var(--sans);
    padding    : 0.25rem 0.5rem;
    box-sizing : border-box;
    display    : block;
    border     : 1px solid var(--dark);
}

.sidebar-category-list-item[aria-current] {
    background   : var(--accent);
    border-color : var(--accent);
    color        : var(--light);
}

.sidebar-category-list-item:hover {
    background   : var(--dark);
    color        : var(--light);
}

button.sidebar-category-list-toggle {
    position        : relative;
    display         : flex;
    justify-content : space-between;
    gap             : 0.5rem;
    width           : 100%;
}

.sidebar-category-list-toggle::after {
    content       : "";
    display       : block;
    width         : 0.35rem;
    height        : 0.35rem;
    align-self    : center;
    transform     : rotate(-45deg);
    border-right  : 1px solid currentColor;
    border-bottom : 1px solid currentColor;
}

.category-filters-is-hidden {
    display : none;
}/* The Single Category Container */

.category-back-button {
    display               : grid;
    grid-template-columns : auto 1fr;
    gap                   : var(--gap-h);
    border                : none;
    width                 : 100%;
    text-align            : left;
    cursor                : pointer;
    margin-bottom         : 0.5rem;
}

.category-back-icon {
    border : 1px solid var(--dark);
    aspect-ratio: 1;
    height: 100%;
    cursor : pointer;
}

.category-back-icon {
    transform : rotate(180deg);
    fill      : var(--dark);
}

.category-back-icon svg {
    display: block;
}

.category-back-text {
    font       : var(--sans);
    padding    : 0.25rem 0.5rem;
    box-sizing : border-box;
    display    : block;
    border     : 1px solid var(--accent);
    background : var(--accent);
    color      : var(--light);
}

.category-items,
.category-toggles {
    display     : flex;
    gap         : 0.5rem;
    list-style  : none;
    flex-wrap   : wrap;
}

.category-items-item,
.category-toggle {
    font       : var(--sans);
    padding    : 0.25rem 0.5rem;
    box-sizing : border-box;
    display    : block;
    border     : 1px solid var(--dark);
    background : var(--light);
    color      : var(--dark);
}

.category-items-item[aria-current] {
    border-color : var(--accent);
    background   : var(--accent);
    color        : var(--light);
}

.category-toggle:hover {
    background : var(--dark);
    color      : var(--light);
    cursor     : pointer;
}

.category-toggles.is-hidden {
    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;
}

.sidebar-open-icon svg {
    display: block;
    border-radius : 50%;
}/* Hover State */

.sidebar-open-button:hover {
    color : var(--accent);
}

.sidebar-open-button:hover svg {
    fill : var(--accent);
}/* Selected state */

.sidebar-open-button.active {
    color : var(--accent);
}

.sidebar-open-button.active svg {
    fill       : var(--light);
    background : var(--accent);
}

.sidebar-open-button.active .words { fill : var(--light) }

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

.calendar-container {
    widows     : 100%;
}

#calendar {
    margin-top : 1.5rem;
}

#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);
}

#calendar .air-datepicker-nav--title {
    font           : var(--nav);
    text-transform : uppercase;
    transform :
}

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

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

#calendar .air-datepicker-cell.-day- {
    font : var(--sans-sl);
}

#calendar .air-datepicker-cell.-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.-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);
}

calendar-date,calendar-month,calendar-multi {
    width : 100%;
}/* The calendar header */

calendar-multi::part(header) {
    background : var(--dark);
    padding    : 0.25rem;
    color      : var(--light);
}

calendar-multi::part(heading) {
    font : var(--nav);
    align-self: center;
}

calendar-month::part(day) {
    font: var(--sans);
}

calendar-month::part(button) {
    border-radius : 50%;
    width         : 1.25rem;
    height        : 1.25rem;
    margin        : 0.5rem;
}/* Caffe sidebar thingy */

.sidebar-caffe {
    background : var(--dark);
    color      : var(--light);
    font       : var(--sans-sl);
    padding    : 0.5rem 0.75rem;
    position   : relative;
}/* The hidden part of the section */

.sidebar-caffe-hidden {
    position       : absolute;
    padding        : 0.75rem 0.75rem 0;
    bottom         : 100%;
    right          : 0;
    left           : 0;
    background     : #000;
    opacity        : 0;
    pointer-events : none;
    transform      : translateY(2rem);
}/* The Toggle button */

.sidebar-caffe-button {
    border     : none;
    width      : 100%;
    text-align : left;
}/* Single date container */

.sidebar-caffe-day {
    width                 : 100%;
    display               : grid;
    grid-template-columns : 1.5fr 1fr 2fr;
    gap                   : 1rem;
}

.sidebar-caffe-day:not(:last-child) {
    margin-bottom : 0.25rem;
}/* Date container */

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

.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:last-child {
    grid-column : span 2;
}/* Link To the coffee page */

.sidebar-caffe-link {
    display : block;
    margin  : 0.75rem 0 0.25rem;
}/* Active State */

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