/* Main Configuration */
*,*::before,*::after {
    -moz-box-sizing      : border-box;
    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;
    -moz-font-feature-settings   : "kern", "liga", "clig", "calt";
    font-feature-settings   : "kern", "liga", "clig", "calt";

    /* Global Transitions */
    -moz-transition-delay           : 0ms;
    transition-delay           : 0ms;
    -moz-transition-duration        : 250ms;
    transition-duration        : 250ms;
    -moz-transition-property        : none;
    transition-property        : none;
    -moz-transition-timing-function : ease-out;
    transition-timing-function : ease-out;
}
@font-face {
    font-family  : "GTC";
    src          : url('fonts/GT-Cinetype-Regular.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 400;
    font-display : swap;
}
:root {
    
    /* Colors */
    --background : hsl(0,0%,100%);
    --text       : hsl(0,0%,10%);

    --dark  : #992C58;
    --light : #F4F0E9;

    /* Font Settings */
    --font-family : GTC, sans-serif;
    --font-size   : 12px;
    --font-height : 14px;
    --font-weight : 400;

    interpolate-size: allow-keywords;

    /* Set the defaults */
    background  : var(--background);
    font-size   : var(--font-size);
    line-height : var(--font-height);
}
@media (width > 850px) {
    :root {
        --font-size   : 15px;
        --font-height : 20px;
        --font-size   : clamp(15px, 0.36vi + 11.91px, 21px);
        --font-height : clamp(20px, 0.18vi + 18.45px, 23px);
    }
}
body {
    font-size   : var(--font-size);
    line-height : var(--font-height);
    font-family : var(--font-family);
    font-weight : var(--font-weight);
    color       : var(--text);
}
/* UI Elements */
/* Content Goes Here */
.header {
    background            : var(--dark);
    display               : grid;
    grid-template-columns : auto auto;
    -moz-box-pack       : justify;
    justify-content       : space-between;
    padding               : 1rlh 1rlh 1.2rlh;
}
.logo {
    display : block;
    height : 6rlh;
}
.tagline-container {
    align-self: end;
}
.tagline {
    height : 0.75rlh;
    display: block;
}
@media (width > 450px) {
    .tagline {
        height : 1rlh;
    }
}
@media (width > 850px) {
    .header {
        padding : 2.5rlh 3rlh 2rlh;
    }
    .logo {
        height : 7rlh;
    }
}
.row {
    min-height            : -moz-calc((100svh - 19rlh) / 3);
    min-height            : calc((100svh - 19rlh) / 3);
    background            : var(--light);
    color                 : var(--dark);
    padding               : 1rlh 1rlh 4rlh;
    display               : grid;
    gap                   : 1rlh;
    grid-template-columns : repeat(5,1fr);
    align-content         : start;
}
.row:nth-child(odd) {
    background : var(--dark);
    color      : var(--light);
}
.row-title {
    text-transform: uppercase;
    font-size : 2rem;
    line-height: 1;
    display : -moz-box;
    display : flex;
    align-content: center;
    gap : 1rlh;
    grid-column: span 2;
    grid-row : 1;
}
.row-number {
    height : 2rem;
}
.row-content {
    display : grid;
    grid-template-columns: 1fr;
    gap : 1rlh;
    grid-column: 3/6;
    grid-row : 1;
}
.row-links {
    display : -moz-box;
    display : flex;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    gap : 1rlh;
    -moz-box-align: start;
    align-items: start;
}
.about {
    font-size : 1.33rem;
    line-height: 1.2;
    display : block;
}
.about p:not(:last-child) {
    margin-bottom : 1rlh;
}
.row-content-column {
    text-transform: uppercase;
    justify-self: start;
    width : 100%;
}
.opening-status {
    font-size      : 1.33rem;
    line-height    : 1;
    text-transform : uppercase;
}
.opening-hours {
    margin-top : 1rlh;
    width      : 100%;
    overflow   : hidden;
}
.opening-hours button {
    cursor              : pointer;
    width               : -webkit-max-content;
    width               : -moz-max-content;
    width               : max-content;
    -moz-transition-property : opacity;
    transition-property : opacity;
    border              : none;
    margin-bottom       : .5rlh;
    &:hover {
        opacity: .5;
    }
}
.opening-hours button::before {
    content     : "+ ";
    white-space : pre;
}
.opening-hours button.active::before {
    content : "× ";
}
.opening-hours div {
    height              : 0;
    -moz-transition-property : height;
    transition-property : height;
}
.opening-hours ol {
    list-style : none;
}
.opening-hours li {
    display         : -moz-box;
    display         : flex;
    -moz-box-pack : justify;
    justify-content : space-between;
    padding         : 0.35rlh 0;
    border-bottom   : 1px solid currentColor;
}
.opening-hours span:last-child {
    font-variant-numeric: tabular-nums;
}
li.has-next-day {
    border-bottom : unset;
    padding-bottom : 0;
}
li.has-next-day + li {
    padding-top : 0;
}
li.has-next-day + li span:first-child {
    opacity : 0;
}
.underlined {
    text-decoration: underline;
}
.row-graphic {
    grid-column  : 5 / 6;
    justify-self : end;
    grid-row : 1;
}
.row-graphic svg {
    width : 3rlh;
}
.row[data-status] .row-graphic svg {
    display : none;
}
.row[data-status="open-soon"] svg.row-graphic-open-soon { display : block; }
.row[data-status="open"] svg.row-graphic-open { display : block; }
.row[data-status="close-soon"] svg.row-graphic-close-soon { display : block; }
.row[data-status="close"] svg.row-graphic-close { display : block; }
.row[data-status="holiday"] svg.row-graphic-holiday { display : block; }
.row[data-status="holiday"] .opening-hours {
    display : none;
}
@media (width > 650px) {
    .row {
        grid-template-columns : repeat(12,1fr);
    }
    .row-title {
        grid-column: span 3;
    }
    .row-graphic {
        justify-self : start;
        grid-column  : span 2;
    }
    .opening-hours {
         max-width : 12rlh;
    }
    .row-content {
        grid-template-columns: 1fr 1fr;
    }
}
@media (width > 850px) {
    .row {
        padding : 2.5rlh 3rlh 3rlh;
    }
}
@media (width > 1000px) {
    .row-content {
        grid-template-columns: 3fr 4fr;
    }
}
.row-location .row-title   { grid-column : 1 / 3; grid-row : 1; }
.row-location .row-graphic { grid-column : 5 / 6; grid-row : 1; }
.row-location .row-content { grid-column : 3 / 6; grid-row : 1; }
@media (width > 650px) {
    .row-location .row-title   { grid-column : 1 / 4; grid-row : 1; }
    .row-location .row-graphic { grid-column : 4 / 6; grid-row : 1; }
    .row-location .row-content { grid-column : 6 / 13; grid-row : 1; }
}
.row-intro {
    grid-template-areas: "title title title graphic graphic" "content content content content content";

}
@media (width > 650px) {
    .row-intro {
        grid-template-areas: "title title title graphic graphic content content content content content content content";
    }
}
.row-intro .row-title { grid-area : title; }
.row-intro .row-graphic { grid-area : graphic; }
.row-intro .row-content { grid-area : content; }
@media (width <= 650px) {
    .row-intro .row-content.about {
        grid-column: 1 / -1;
        grid-row : 2;
    }
}
.clock-container {
    position : relative;
}
.clock-icon,.minutes,.hours {
    display : block;
    width : 100%;
    fill : var(--dark);
}
.minutes,.hours {
    position         : absolute;
    inset            : 0;
    -moz-transform-origin : center center;
    transform-origin : center center;
}
.footer {
    background            : var(--dark);
    color                 : var(--light);
    display               : grid;
    grid-template-columns : repeat(12,1fr);
    gap                   : 1rlh;
    text-transform        : uppercase;
    padding               : 1rlh;
}
@media (width > 850px) {
    .footer {
        padding : 3.5rlh 3rlh 2rlh;
    }
}
.footer-column {
    display : block;
}
.footer-column:nth-child(1) { grid-column: span 12; }
.footer-column:nth-child(2) { grid-column: span 12; }
.footer-column:nth-child(3) { grid-column: span 12; }
@media (width > 950px) {
    .footer-column:nth-child(1) { grid-column: span 3; }
    .footer-column:nth-child(2) { grid-column: span 4; }
    .footer-column:nth-child(3) { grid-column: span 5; }
}
@media (width > 1250px) {
    .footer-column:nth-child(1) { grid-column: span 5; }
    .footer-column:nth-child(2) { grid-column: span 3; }
    .footer-column:nth-child(3) { grid-column: span 4; }
}