/* Home timeline - from legacy DkR Theatre Addons */

/* Timeline wrapper */
.dkr-home-timeline-container {
    position: relative;
    display: flex;
    overflow: hidden;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0 auto;
}

/* Timeline container (except arrows) */
.dkr-home-timeline-container .dkr-timeline-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: hidden;
    flex-shrink: 0;
    z-index: 1;
}

/* Months and days container - Desktop */
.dkr-home-timeline-container .dkr-timeline-container .dkr-mobile-tworows-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    width: 50%;
    flex-shrink: 0;
}

/* Months' squares styling */
.dkr-home-timeline-container .dkr-timeline-container .dkr-timeline-single-month {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px;
}

.dkr-home-timeline-container .dkr-timeline-container .dkr-timeline-single-month > span {
    background-color: #575757;
    color: white;
    width: calc(5px + 5vmin);
    height: calc(5px + 5vmin);
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 2px solid #b2b2b2;
    text-transform: uppercase;
    font-weight: 700;
}

/* Days' squares styling */
.dkr-home-timeline-container .dkr-timeline-container .dkr-timeline-single-day {
    width: calc(5px + 5vmin);
    height: calc(5px + 5vmin);
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 2px solid #b2b2b2;
    text-transform: uppercase;
    font-size: 14px;
    margin: 5px;
}

/* Arrows - Desktop */
.elementor-shortcode .dkr-timeline-arrows-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.elementor-shortcode .dkr-timeline-arrows-wrapper > i {
    position: absolute;
    top: 0.5em;
    font-size: 32px;
}

.elementor-shortcode .dkr-timeline-arrows-wrapper > .eicon-chevron-left {
    left: -1em;
}

.elementor-shortcode .dkr-timeline-arrows-wrapper > .eicon-chevron-right {
    right: -1em;
}

/* When a square has shows */
.dkr-home-timeline-container .dkr-timeline-container .dkr-timeline-single-day.dkr-day-has-show {
    outline: 2px solid #E30013;
}

.dkr-home-timeline-container .dkr-timeline-container .dkr-timeline-single-day.dkr-day-has-show.dkr-single-day-sunday:hover,
.dkr-home-timeline-container .dkr-timeline-container .dkr-timeline-single-day.dkr-day-has-show:hover {
    outline: 2px solid #aeaeae;
    background-color: #E30013;
}


/* Tooltip: popup under the selected day (built by timeline.js).
 *
 * Black box, one card per show: image on the left (16:9), title, date and
 * "Discover" link on the right; the discipline stays in the markup but is
 * hidden. A single close button, top right of the box, outside the list.
 *
 * Fonts come from the Elementor kit (variables on body.elementor-kit-7), with
 * fallbacks if a global is removed: "62507d7" is the kit custom typography
 * with Kalnia, the display font of the show titles; date and link use the
 * Barlow Semi Condensed custom font, with the kit Barlow as fallback.
 *
 * Bands: desktop >= 1025px, tablet 768-1024px, mobile <= 767px (Elementor
 * breakpoints; 768px is also where timeline.js centers the box on screen),
 * small phones <= 380px. Gutters (16px / 12px) match timeline.js.
 */
.dkr-hometimeline-tooltip-wrapper {
    --dkr-tt-img: 235px;
    --dkr-tt-gutter: 16px;
    display: none;
    position: absolute;
    z-index: 100;
    top: 0;
    left: 35%;
    box-sizing: border-box;
    width: 600px;
    max-width: calc(100vw - 2 * var(--dkr-tt-gutter));
    padding: 0;
    background-color: #000;
    color: #fff;
    text-align: left;
}

/* List of the shows: no height limit and no inner scroll (as the legacy
   plugin): with many shows the box simply grows downwards. */

/* Close button: top right of the box, outside the list of the shows */
.dkr-hometimeline-tooltip-wrapper .dkr-close-me {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    line-height: 1;
    cursor: pointer;
}

.dkr-hometimeline-tooltip-wrapper .dkr-close-me:hover,
.dkr-hometimeline-tooltip-wrapper .dkr-close-me:focus {
    background: transparent;
    color: #fff;
}

.dkr-hometimeline-tooltip-wrapper .dkr-close-me:hover .dkr-eicon-close {
    opacity: 0.7;
}

.dkr-hometimeline-tooltip-wrapper .dkr-close-me:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -6px;
}

.dkr-hometimeline-tooltip-wrapper .dkr-close-me .dkr-eicon-close {
    display: block;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

/* Card of a show: grid, so the existing elements stay direct children.
   Rows: [space] title, discipline (hidden), date, link [space]: the text is
   vertically centered on the image. */
.dkr-timeline-tooltip-content {
    position: relative;
    box-sizing: content-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: 20px;
    padding: 14px 52px 14px 16px;
    border-top: 0 none;
}

/* Separator only between two cards (not above the first, not below the last) */
.dkr-timeline-tooltip-content + .dkr-timeline-tooltip-content {
    border-top: 2px solid #808080;
}

.dkr-timeline-tooltip-content.dkr-timeline-tooltip-has-image {
    grid-template-columns: var(--dkr-tt-img) minmax(0, 1fr);
    /* never shorter than the image (content-box) */
    min-height: calc(var(--dkr-tt-img) * 9 / 16);
}

.dkr-timeline-tooltip-content > .dkr-timeline-tooltip-media {
    grid-column: 1;
    grid-row: 1 / 7;
    align-self: center;
    background-color: #1a1a1a;
    line-height: 0;
}

/* Image link (same URL as "Discover", hidden from keyboard and screen
   readers): a plain block, the image stays the same */
.dkr-timeline-tooltip-content > .dkr-timeline-tooltip-media > a {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 0;
    text-decoration: none;
}

.dkr-timeline-tooltip-content > .dkr-timeline-tooltip-media img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.dkr-timeline-tooltip-content > .dkr-timeline-tooltip-title {
    grid-row: 2;
}

.dkr-timeline-tooltip-content > .dkr-timeline-tooltip-p {
    grid-row: 3;
    display: none;
}

.dkr-timeline-tooltip-content > .dkr-timeline-tooltip-p2 {
    grid-row: 4;
}

.dkr-timeline-tooltip-content > a {
    grid-row: 5;
}

.dkr-timeline-tooltip-has-image > .dkr-timeline-tooltip-title,
.dkr-timeline-tooltip-has-image > .dkr-timeline-tooltip-p,
.dkr-timeline-tooltip-has-image > .dkr-timeline-tooltip-p2,
.dkr-timeline-tooltip-has-image > a {
    grid-column: 2;
}

/* Typography (measured on the client mockup, capitals are ~0.70em in Kalnia,
   Barlow and Barlow Semi Condensed): title caps ~16px, date caps ~15px,
   "Discover" caps ~10px; ~14px between title and date, ~18px between date
   and "Discover" (margins computed from the font metrics).

   Title: Kalnia is uploaded in Elementor as one variable font (weight axis
   100-700) without a weight range, so the weight is set on the axis and
   font-synthesis stops any faux bold. "wght" 500 is the weight of the show
   titles in the home grid (shows.css, font-weight 500). */
.dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > .dkr-timeline-tooltip-title {
    margin: 0 0 4px;
    padding: 0;
    color: #fff;
    font-family: var(--e-global-typography-62507d7-font-family, "Kalnia"), Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    font-variation-settings: "wght" 500;
    font-synthesis: none;
    line-height: 1.05;
    letter-spacing: 0.01em;
    /* Kalnia has a very wide space (0.357em): -0.1em gives a word gap of
       ~0.27em, the same proportion as the grid titles (shows.css: -0.12em
       with letter-spacing 1px at 35px), still clearly open on short words
       ("MOZART VA A NOZZE") and scaling with the font size in every band. */
    word-spacing: -0.1em;
    text-transform: uppercase;
    overflow-wrap: break-word;
    text-wrap: balance;
}

/* Title always white, in every state and for any content inside it, whatever
   the kit (".elementor-kit-7 h4", ".elementor-kit-7 a") or the theme reset
   (a:hover, a:active...) say: these selectors are more specific. */
.dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > .dkr-timeline-tooltip-title,
.dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > .dkr-timeline-tooltip-title:hover,
.dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > .dkr-timeline-tooltip-title:focus,
.dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > .dkr-timeline-tooltip-title:active,
.dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > .dkr-timeline-tooltip-title *,
.dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > .dkr-timeline-tooltip-title a:link,
.dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > .dkr-timeline-tooltip-title a:visited,
.dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > .dkr-timeline-tooltip-title a:hover,
.dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > .dkr-timeline-tooltip-title a:focus,
.dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > .dkr-timeline-tooltip-title a:active {
    color: #fff;
    -webkit-text-fill-color: #fff;
}

/* Date and "Discover": Barlow Semi Condensed, the only face uploaded is
   declared 500 (file: Regular); Barlow as fallback. */
.dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > .dkr-timeline-tooltip-p2 {
    margin: 0;
    color: #fff;
    font-family: "Barlow semi-condensed", var(--e-global-typography-text-font-family, "Barlow"), sans-serif;
    font-size: 21px;
    font-weight: 500;
    font-synthesis: none;
    line-height: 1.2;
    text-transform: uppercase;
}

/* "Discover": left aligned under the date, in the grid flow. calendar.css
   (shared tooltip rules of the legacy plugin) sets position absolute,
   right and bottom on ".dkr-timeline-tooltip-content > a": reset here.
   44px touch area with vertical padding; the negative margins keep the
   visual spacing (18px above, card padding below). */
.dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > a {
    position: static;
    right: auto;
    bottom: auto;
    justify-self: start;
    align-self: start;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    margin: -4px 0 -14px;
    padding: 14px 0;
    color: #fff;
    font-family: "Barlow semi-condensed", var(--e-global-typography-primary-font-family, "Barlow"), sans-serif;
    font-size: 14px;
    font-weight: 500;
    font-synthesis: none;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
}

.dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > a:hover,
.dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > a:focus {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Tooltip - tablet */
@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .dkr-hometimeline-tooltip-wrapper {
        --dkr-tt-img: 180px;
        width: 560px;
    }

    .dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > .dkr-timeline-tooltip-title {
        font-size: 20px;
    }

    .dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > .dkr-timeline-tooltip-p2 {
        font-size: 18px;
    }

    .dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > a {
        font-size: 13px;
    }
}

/* Tooltip - mobile: full width (minus the gutters), smaller image on the left */
@media only screen and (max-width: 767px) {
    .dkr-hometimeline-tooltip-wrapper {
        --dkr-tt-img: clamp(88px, 30vw, 150px);
        --dkr-tt-gutter: 12px;
        width: calc(100vw - 2 * var(--dkr-tt-gutter));
    }

    /* only the first card leaves room for the close button */
    .dkr-timeline-tooltip-content {
        column-gap: 12px;
        padding: 12px 12px 12px 12px;
    }

    .dkr-timeline-tooltip-content:first-child {
        padding-right: 44px;
    }

    .dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > .dkr-timeline-tooltip-title {
        font-size: clamp(15px, 4.4vw, 19px);
    }

    .dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > .dkr-timeline-tooltip-p2 {
        font-size: clamp(14px, 3.9vw, 17px);
    }

    .dkr-hometimeline-tooltip-wrapper .dkr-timeline-tooltip-content > a {
        font-size: 13px;
    }
}

/* Tooltip - small phones */
@media only screen and (max-width: 380px) {
    .dkr-hometimeline-tooltip-wrapper {
        --dkr-tt-img: 26vw;
    }

    .dkr-timeline-tooltip-content {
        column-gap: 10px;
    }
}

/* Medium devices */
@media only screen and (max-width: 1024px) and (min-width: 768px) {
    /* Months and days container - Medium device */
    .dkr-home-timeline-container .dkr-timeline-container {
        justify-content: center;
        flex-wrap: wrap;
    }

    .dkr-home-timeline-container .dkr-timeline-container .dkr-mobile-tworows-wrapper {
        width: 100%;
    }

    /* Arrows - Mobile */
    .elementor-shortcode .dkr-timeline-arrows-wrapper {
        top: -50px;
    }

    .elementor-shortcode .dkr-timeline-arrows-wrapper > .eicon-chevron-left {
        left: 9em;
    }

    .elementor-shortcode .dkr-timeline-arrows-wrapper > .eicon-chevron-right {
        right: 9em;
    }

    /* Days' sizes */
    .dkr-home-timeline-container .dkr-timeline-container .dkr-timeline-single-day,
    .dkr-home-timeline-container .dkr-timeline-container .dkr-timeline-single-month,
    .dkr-home-timeline-container .dkr-timeline-container .dkr-timeline-single-month > span {
        width: calc(5px + 8vmin);
        height: calc(5px + 8vmin);
        font-size: 16px;
    }

}


/* Mobile devices */
@media only screen and (max-width: 1240px) {
    /* Months and days container - Mobile */
    .dkr-home-timeline-container .dkr-timeline-container {
        justify-content: center;
        flex-wrap: wrap;
    }

    .dkr-home-timeline-container .dkr-timeline-container .dkr-mobile-tworows-wrapper {
        width: 100%;
    }

    /* Arrows - Mobile */
    .elementor-shortcode .dkr-timeline-arrows-wrapper {
        top: -65px;
    }

    .elementor-shortcode .dkr-timeline-arrows-wrapper > .eicon-chevron-left {
        left: 2em;
    }

    .elementor-shortcode .dkr-timeline-arrows-wrapper > .eicon-chevron-right {
        right: 2em;
    }

    .dkr-home-timeline-container .dkr-timeline-container .dkr-timeline-single-day,
    .dkr-home-timeline-container .dkr-timeline-container .dkr-timeline-single-month,
    .dkr-home-timeline-container .dkr-timeline-container .dkr-timeline-single-month > span {
        width: calc(5px + 8vmin);
        height: calc(5px + 8vmin);
        font-size: 10px;
    }

}

.dkr-visible {
    display: block;
}