:root {
  --visiteurajoki-blue: #003a5d;
  --visiteurajoki-orange: #003a5d;
}

[data-events-list] .type-toggle, [data-calendar] .type-toggle {
  margin-bottom: 1em;
  text-align: center;
}
[data-events-list] .type-toggle button, [data-calendar] .type-toggle button {
  border: 2px solid var(--visiteurajoki-blue) !important;
}
[data-events-list] .type-toggle button:hover, [data-calendar] .type-toggle button:hover {
  border-color: var(--visiteurajoki-orange) !important;
}

[data-events-list]:has(+ [data-calendar]):not(.visible) {
  display: none;
}
[data-events-list]:has(+ [data-calendar]).visible + [data-calendar] {
  display: none;
}

[data-calendar] table th:not([colspan]), [data-calendar] table td:not([colspan]) {
  border-width: 0 !important;
  font-size: clamp(12px, 1.75em, 32px);
}
@media (max-width: 767px) {
  [data-calendar] table th:not([colspan]), [data-calendar] table td:not([colspan]) {
    font-size: clamp(12px, 1.75em, 2vw);
  }
}
[data-calendar] table th {
  background-color: #fafafa !important;
  color: #003a5d;
}
[data-calendar] table td {
  background-color: #fafafa !important;
  color: #888;
}
[data-calendar] table thead th {
  border-color: transparent;
}
[data-calendar] table tbody th {
  color: rgba(0, 58, 93, 0.5);
}

.calendar-weeks .calendar-week:not(.visible) {
  display: none;
}
.calendar-weeks .calendar-day {
  padding: 0.5em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: #fff !important;
  position: relative;
}
.calendar-weeks .calendar-day:has(.event-count) {
  background-color: rgba(0, 58, 93, 0.1) !important;
  color: #003a5d;
}
.calendar-weeks .calendar-day:has(.event-count):hover {
  background-color: #003a5d !important;
  color: #fff !important;
}
.calendar-weeks .calendar-day .day-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.calendar-weeks .calendar-day .day-content {
  position: absolute;
}
.calendar-weeks .calendar-day .day-content:not(.visible) {
  display: none;
}

.calendar-table {
  width: 100%;
  background-color: #fff;
}

[data-calendar] [data-details-rows]:has(.visible) ~ [data-preview-rows] {
  display: none;
}

.event-details {
  background-color: #fff;
  margin-top: 0.5em;
  color: #000;
  padding: 1em;
  border: 2px solid #003a5d;
}
@media (max-width: 480px) {
  .event-details {
    font-size: 13px;
  }
}
.event-details .event-details-head {
  display: flex;
  align-items: center;
  margin-bottom: 0.5em;
}
.event-details .event-details-head .event-external-link {
  width: 90%;
}
.event-details .event-details-head .event-external-link a {
  font-weight: bold;
  display: block;
  line-height: 1.5;
}
.event-details .event-details-head .event-external-link a:hover {
  text-decoration: underline;
}
.event-details .event-details-head .event-external-link a small {
  font-weight: unset;
  display: block;
}
.event-details .event-details-head .event-details-close {
  cursor: pointer;
  padding: 1em;
  width: 10%;
  display: flex;
  justify-content: center;
  align-content: center;
  color: red;
}
.event-details .event-details-head .event-details-close:hover, .event-details .event-details-head .event-details-close:focus {
  background-color: #eee;
}
.event-details .description:has(img) {
  margin-bottom: 1em;
}
.event-details:not(.visible) {
  display: none;
}

.event-day-preview {
  border: 2px solid #fff;
  margin-top: 0.5em;
  background-color: #fafafa;
  color: #000;
  padding: 1em;
}
@media (max-width: 480px) {
  .event-day-preview {
    font-size: 13px;
  }
}
.event-day-preview.visible:first-child {
  border-color: #003a5d;
}
.event-day-preview [data-details] {
  font-weight: bold;
  cursor: pointer;
}
.event-day-preview [data-details]:hover, .event-day-preview [data-details]:focus {
  text-decoration: underline;
}
.event-day-preview h3 {
  font-size: 1.25em;
  margin-top: 0;
}
.event-day-preview.visible ~ .visible ~ .visible {
  display: none;
}
.event-day-preview:not(.visible) {
  display: none;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}
.flex-row h2 {
  margin: 0 0.5em !important;
}

[data-prev-month], [data-next-month] {
  font-size: 1.5em;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  padding: 0.5em 1em;
}
[data-prev-month].disabled, [data-next-month].disabled {
  color: #aaa;
  cursor: not-allowed;
}
[data-prev-month]:hover, [data-prev-month]:focus, [data-next-month]:hover, [data-next-month]:focus {
  background-color: rgba(0, 58, 93, 0.1) !important;
}