/* whole timetable section is wider "fullscreen" */
#timetable, #timetable_filters, #week-switcher {
    max-width: 87.5rem;
}

#timetable {
    list-style: none;
    display: grid;
    grid-template-columns: 120px 272px auto 250px; /* 120 272 x 250 */
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#timetable h3 {
    grid-column: 1 / 5;
    margin: 2px 0 22px;
}

.timetable_day {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / 5;
}

/*
# Hiding things that don't match searches

This is keyed off a few different properties, all of which are set to "yes" or "no" (or not present)

.timetable_day[data-is-today-or-after] - hide if "no"
.timetable_day[data-is-current-week] - hide if "no"
.timetable_day[data-contains-visible-events] - hide if "no"

.h-event[data-is-current-activity-name] - hide if "no"
.h-event[data-is-current-location] - hide if "no"

if ANY of these things are set, then hiding takes precedence
this ensures that if an event matches the selected location but does not match the activity name,
we hide it (so that it doesn't matter which order you set the filters in) 
*/

.timetable_day[data-is-today-or-after="no"], 
.timetable_day[data-is-current-week="no"],
.timetable_day[data-contains-visible-events="no"] {
    display: none;
}

.h-event[data-is-current-activity-name="no"], .h-event[data-is-current-location="no"] {
    display: none;
}

/*
Finally, we want to display a 'no results' section
note that this is not the same thing as the "there are no events" section written by
the template, which occurs if there are no events _at all_.
this shows if setNoResultsMessage() in timetable.js sets a no-results message
*/
#timetable[data-no-results]::before {
    content: attr(data-no-results);
    grid-column: 1/5;
    text-align: center;
}

#timetable[data-no-results] .no-activities { display: none; }

.timetable_day ul {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / 5;
    padding: 0;
    margin: 0;
}

.timetable_day li {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / 5;
    padding: 0;
    margin: 0;
    border: 1px solid #dedede;
    margin-bottom: 11px;
}

.timetable_day li[hidden] {
    display: none;
}

.timetable_day li input {
    /* visually hide */
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.timetable_day li input + label, .timetable_day li input + label:hover {
    grid-column: 1 / 2;
    grid-row: 1/4;
    text-indent: -1000em;
    background: url("/static/images/chevron.svg") no-repeat;
    background-position-x: 40px;
    background-position-y: 24px;
    background-size: 42px 27px;
    background-color: #F6F5EF;
    position: relative;
    overflow: hidden; /* so when rotated this doesn't appear a mile to the right! */
}

.timetable_day li input + label:hover {
  background: url("/static/images/chevronLightGreen.svg") no-repeat;
  background-position-x: 40px;
  background-position-y: 24px;
  background-size: 42px 27px;
  background-color: #F6F5EF;
}

.timetable_day li input:focus + label::after { /* "focus ring" */
  --focus-ring-border-width: 4px;
  --focus-ring-gap: 2px;

  content: "";
  position: absolute;
  width: calc(40px + var(--focus-ring-border-width) + var(--focus-ring-border-width) + var(--focus-ring-gap) + var(--focus-ring-gap));
  height: calc(27px + var(--focus-ring-border-width) + var(--focus-ring-border-width) + var(--focus-ring-gap) + var(--focus-ring-gap));
  border: var(--focus-ring-border-width) solid #e86c00;
  top: calc(20px - var(--focus-ring-border-width) - var(--focus-ring-gap));
  left: calc(40px - var(--focus-ring-border-width) - var(--focus-ring-gap));
  display: block;
}

.timetable_day li input:checked:focus + label::after { /* "focus ring" when selected */
  top: auto;
  left: auto;
  bottom: calc(20px - var(--focus-ring-border-width) - var(--focus-ring-gap));
  /* stylelint-disable declaration-block-no-redundant-longhand-properties */
  right: calc(40px - var(--focus-ring-border-width));
}

.timetable_day li input:checked + label {
  transform: rotate(0.5turn);
  background-position-x: calc(100% - 40px);
  background-position-y: calc(100% - 24px);
}

.timetable_day li .event-timing {
    grid-column: 2 / 3;
    grid-row: 1;
    background: #FFEEBD;
    padding: 20px 10px;
    position: relative;
    padding-right: 18px;

    @media screen and (min-width: 1024px) {
      padding: 20px;
    }
}

.timetable_day li .event-timing::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 18px;
    bottom: 0;
    background: white;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.timetable_day li input:checked ~ .event-timing::before {
    width: 8px;
}

.timetable_day li .event-details {
    grid-column: 3 / 4;
    grid-row: 1;
    padding: 12px 8px;
}

.timetable_day li .booking {
    align-items: center;
    display: flex;
    flex-direction: column;
    grid-column: 4 / 5;
    grid-row: 1;
    align-self: center;
    justify-content: center;
    text-align: center;
    color: #0B463D;
    font-family: barnardos-speak, sans-serif;
    font-size: var(--step-3);
    font-weight: 700;
    line-height: 31.104px;
    padding: 12px 8px;
}

.timetable_day li .booking a {
    background: #0B463D;
    color: white;
    margin-top: 8px;
    padding: 5px 15px;
    text-decoration: none;
    box-shadow: 4px 4px 0 black;
    width: fit-content;
}

.timetable_day li .booking a::after {
    content: "";
    width: 26px;
    height: 26px;
    background: url("/static/images/linkout.svg") center center no-repeat;
    background-size: contain;
    display: inline-block;
    margin-left: 10px;
}

.timetable_day li .booking .supporting-text {
  color:#1d1d1d;
  display: inline-block;
  font-family: arial, sans-serif;
  font-size: 89%;
  font-weight: 300;
  line-height: 1.5;
  margin-top: 1rem;
}

@media (min-width: 40rem) {
  .timetable_day li .booking .supporting-text {
    font-size: 79%;
  }
}

@media (min-width: 44rem) {
  .timetable_day li .booking .supporting-text {
    font-size: 75.5%;
  }
} 

@media (min-width: 1024px) {
  .timetable_day li .booking .supporting-text {
    font-size: 52.5%;
  }
} 

#timetable .event-address-and-other, #timetable .event-description {
    display: none;
}

#timetable .event-address-and-other {
    grid-column: 2/3;
    grid-row: 2;
    background: #FFEEBD;
    position: relative;
    padding: 22px 18px 20px 0;
    color: #0B463D;
    font-family: barnardos-speak, sans-serif;
    font-size: var(--step-1);
    font-weight: 700;

    @media screen and (min-width: 1024px) {
      padding-top: 0rem
    }
}

#timetable .event-address-and-other > * {
  padding: 0 5px 0 10px;

  @media screen and (min-width: 1024px) {
    padding-left: 20px;
  }
}

.timetable_day li .event-address-and-other::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 18px;
    bottom: 0;
    background: white;
    clip-path: polygon(calc(100% - 8px) 0, 100% 0, 100% 100%, 0 100%);
}

#timetable .event-address-and-other p {
    font-family: arial, sans-serif;
    font-weight: 300;
    font-size: var(--step-0);
}

#timetable .event-address-and-other h5 {
    font-size: var(--step-1);
}

#timetable .event-address-and-other h5:not(:nth-of-type(1)) {
    margin-top: 12px;
}

#timetable .event-address-and-other .event-partner-details {
  padding: 10px 0 18px 20px;
}

#timetable .event-description {
    grid-column: 3/4;
    grid-row: 2;
    padding: 10px 10px 12px;

    @media screen and (min-width: 1024px) {
      padding-top: 0;
    }
}

#timetable .timetable_day input:checked ~ .event-address-and-other,
#timetable .timetable_day input:checked ~ .event-description {
    display: block;
}

#timetable .p-name {
    font-size: var(--step-3);
    padding-top: 13px; /* align with centre name */
    margin-bottom: 12px;
}

#timetable .p-location {
    color: #0B463D;
    font-family: barnardos-speak, sans-serif;
    font-size: var(--step-2);
    font-weight: 700;
    line-height: 31.104px;
}

#timetable p.time {
    --border: 4px;

    float: right;
    background: white;
    clip-path: polygon(10px 5px, 100% 0, 100% 100%, 0 100%);
    padding: calc(5px + var(--border)) 3px 5px calc(10px + var(--border));
    transform: translateX(calc(23px - var(--border)));
    position: relative;
    margin: 10px 0;
}

#timetable p.time::after {
    content: "";
    background: #8EFE9A;
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: translateX(var(--border)) translateY(var(--border));
    clip-path: polygon(10px 5px, 100% 0, 100% 100%, 0 100%);
}

#week-switcher {
    margin-top: 40px;
    margin-bottom: 40px;
}

#week-switcher ul {
    list-style: none;
    display: grid;
    grid-template-columns: auto max-content auto;
    margin: 0;
    padding: 0;
    width: 100%;
    gap: 10px;
}

#week-switcher li {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / 4;
}

#week-switcher li[hidden] {
    display: none;
}

#week-switcher li button {
    width: 44px;
    height: 44px;
    background: center center no-repeat;
    background-color: transparent;
    background-size: 23px 36px;
    border-width: 0;
    text-indent: -1000em;
}

#week-switcher li button.previous-week {
    grid-column: 1 / 2;
    justify-self: end;
    background-image: url("/static/images/chevron-left.svg");
}

#week-switcher li span {
    grid-column: 2 / 3;
    font-family: barnardos-speak, sans-serif;
    font-size: var(--step-2);
    font-weight: 700;
    line-height: 25.92px;
    text-align: center;
    align-self: center;
}

#week-switcher li button.next-week {
    grid-column: 3 / 4;
    justify-self: start;
    background-image: url("/static/images/chevron-right.svg");
}

#week-switcher li button.next-week:hover,
#week-switcher li button.previous-week:hover {
  filter: brightness(0) saturate(100%) invert(88%) sepia(9%) saturate(1519%) hue-rotate(69deg) brightness(103%) contrast(99%);
}

#timetable_filters {
    background: #CCC5FF;
    padding: 17px;
    text-align: center;
    margin: 0 -100px; /* full width */
}

#timetable_filters .annoying-wrapper-div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 auto;
    max-width: 908px;
}

#timetable_filters select {
    font-family: barnardos-speak, sans-serif;
    font-size: var(--step-2);
    color: #0B463D;
    padding: 12px;
    margin: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;

    /* The point of this is to make the text fade out on the right so that
    it doesn't overlay the chevron.
    So we set two backgrounds: one is the text's green, fading out to white,
        and which we background-clip to be the text.
    The other is the chevron itself.
    Then we set text-fill-colour to transparent so that what we're actually
        seeing for the text is the clipped background showing through, and
        so the text fades out before it hits the chevron. 

    However, Firefox breaks if using multiple background-clip values where
    one is "text". This is https://bugzilla.mozilla.org/show_bug.cgi?id=1481498.
    So we work around it by adding an extremely-annoying-wrapper-div which
    is literally only there so we can give it a background colour which lives
    behind the select, and a chevron. We need to make the select width:100%
    so it fills the extremely-annoying-wrapper-div.
    */
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #0B463D 75%, transparent 85%) text; /* stylelint-disable-line declaration-property-value-no-unknown */
    background-size: 100%;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

#timetable_filters .extremely-annoying-wrapper-div {
    background: white url("/static/images/chevron.svg") no-repeat calc(100% - 10px) center border-box;
    background-size: 42px 27px;
}

#timetable_filters option {
    font-size: var(--step-0);
    font-family: sans-serif;
}

#timetable #np-buttons {
    display: grid;
    grid-template-columns: 1fr max-content max-content 1fr;
    grid-column: 1 / 5;
    width: 100%;
    margin-top: 40px;
}

#timetable #np-buttons button {
    background: #0B463D;
    color: white;
    padding: 5px 15px;
    text-decoration: none;
    box-shadow: 4px 4px 0 black;
    font-family: barnardos-speak, sans-serif;
    font-size: var(--step-3);
    font-weight: 700;
    line-height: 31.104px;
    border-width: 0;
}

#timetable #np-buttons button:hover {
  box-shadow: none;
}

#timetable #np-buttons button[disabled] {
    background-color: #DEDEDE;
    color: #9F9F9F;
    box-shadow: none;
}

#timetable #np-buttons button.previous-week {
    justify-content: end;
    margin-right: 5px;
    grid-column: 2/3;
}

#timetable #np-buttons button.next-week {
    justify-content: start;
    margin-left: 5px;
    grid-column: 3/4;
}

#timetable #np-buttons button.next-week::after {
    content: "";
    width: 26px;
    height: 26px;
    background: url("/static/images/arrow-right.svg") center center no-repeat;
    background-size: contain;
    display: inline-block;
    margin-left: 10px;
}

#timetable #np-buttons button.previous-week::before {
    content: "";
    width: 26px;
    height: 26px;
    background: url("/static/images/arrow-left.svg") center center no-repeat;
    background-size: contain;
    display: inline-block;
    margin-right: 10px;
}

#timetable #np-buttons button[disabled]::before, #timetable #np-buttons button[disabled]::after {
    filter: brightness(0.65);
}

#timetable .no-activities {
    grid-column: 1/5;
    text-align: center;
}

#week-switcher:has(~ #timetable .no-activities) {
    margin-bottom: 20px;
}

@media screen and (min-width: 44.938rem) and (max-width: 1024px) {
    #timetable_filters {
        margin: 0 -60px;
    }

    #timetable_filters .annoying-wrapper-div {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media screen and (max-width: 1024px) {
    #timetable_filters {
        padding: 30px;
        display: block;
        margin: 0 -20px;
    }

    #timetable_filters .annoying-wrapper-div {
        grid-template-columns: 1fr;
        padding-left: 0px;
        padding-right: 0px;
    }

    #timetable_filters select {
        display: block;
        width: 100%;
        font-size: var(--step-1);
        margin: 0;
    }

    #timetable_filters select:nth-of-type(1) {
        margin-bottom: 14px;
    }

    #week-switcher {
        margin: 15px 0;
    }

    #week-switcher ul {
        gap: 0;
    }

    #week-switcher li span {
        font-size: var(--step-1);
    }

    #week-switcher li button {
        width: 27px;
        height: 27px;
        background-size: 17px 27px;
    }

    #timetable {
        grid-template-columns: 39px 125px auto auto;
        margin: 0 -20px;
    }

    .timetable_day li input + label, .timetable_day li input + label:hover {
      background-position-x: 4px;
      background-position-y: 24px;
      background-size: 31px 20px;
      grid-row:1/5;
    }

    .timetable_day li input:checked + label {
      background-position-x: calc(100% - 4px);
      background-position-y: calc(100% - 24px);
    }

    #timetable .event-timing {
        padding-bottom: 0;
        grid-row: 1/3;
        display: grid;
        grid-template-rows: subgrid;
    }

    .timetable_day li .booking {
      align-self: self-end; /* added so it's towards center visually and when dropdown opens, it doesn't jump */
       font-size: var(--step-1);
    }

    #timetable p.p-location {
        grid-row: 1/2;
    }

    #timetable p.time {
        grid-row: 2/3;
        width: 200%;
        margin-bottom: 10px;
        transform: none; /* translateX(calc(138px - var(--border))); */
    }
    
    #timetable .timetable_day li input:checked ~ .event-timing p.time {
      margin-bottom: 0;
    }

    .timetable_day li .booking a::after {
        width: 17px;
        height: 17px;
        margin-left: 3px;
    }

    #timetable .timetable_day input:checked ~ .event-address-and-other {
        grid-column: 2/5;
        grid-row: 3;
    }

    #timetable .timetable_day input:checked ~ .event-address-and-other::before {
        display:none;
    }

    #timetable .timetable_day input:checked ~ .event-description {
        grid-column: 2/5;
        grid-row: 4;
    }

    #timetable #np-buttons {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #timetable #np-buttons button.previous-week, #timetable #np-buttons button.next-week  {
        grid-column: 1/2;
        margin: 0;
        max-width: 230px;
        width: 70%;
        justify-self: center;
        display: flex;
        justify-content: space-between;
    }
    
    #timetable #np-buttons button.previous-week::before, #timetable #np-buttons button.next-week::after {
        flex: 0 0 auto;
    }
}

@media  screen and (min-width: 480px) and (max-width:1024px) {
  #timetable {
  grid-template-columns: 39px 160px auto auto;
  }
}