/* advent header */
@media (min-width: 62rem) {
  .page-template-advent-calendar .site--header__sticky {
    background-color: rgb(38 144 151 / 60%);
  }
  .page-template-advent-calendar.header-transparent .site--header .site--header__site-branding a > svg {
    fill: var(--cl-white);
  }

  .page-template-advent-calendar.header-transparent .site--header {
    --cl-black: white !important;
  }
  .page-template-advent-calendar.header-transparent .site--header .site--header__navigation .unstyled-list > .menu-item > .link-arrow svg path {
    fill: var(--cl-black);
  }
  .page-template-advent-calendar.header-transparent .site--header .btn-site-search svg {
    fill: var(--cl-white);
  }
  .page-template-advent-calendar.header-transparent .site--header .site--header__navigation .unstyled-list > .menu-item .sub-menu .menu-item > a {
    color: black;
  }
  .page-template-advent-calendar .site--header__sticky .site--header__navigation ul > .menu-item:hover > a {
    color: black;
  }
  .page-template-advent-calendar  .site--header__sticky .site--header__navigation .unstyled-list > .menu-item > a:before {
    bottom: 0;
  }
  .page-template-advent-calendar .site--header__sticky .site--header__navigation .unstyled-list > .menu-item:hover > a:before {
    background-color: black;
  }
  .page-template-advent-calendar .site--header__sticky .site--header__navigation .unstyled-list > .menu-item:hover .link-arrow svg path {
    fill: black;
  }
  .page-template-advent-calendar.header-transparent .site--header .btn-site-search:hover svg path {
    fill: black;
  }
}

/* advent calendar */
.advent-board{
  background-image: var(--bg);
  background-size: cover;
  background-position: top center;
  padding-block-start: calc(var(--header-height, 100px) + 2rem);
  padding-block-end: 2rem;
}

.advent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(16px, 1.2vw, 30px);
  align-items: stretch;
  justify-items: stretch;
}

.advent-grid h1 {
  font-size: clamp(32px, 8.8vw, 94px);
}

.advent-grid h2,
.advent-grid h1 {
  margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
  .advent-grid {
    grid-template-columns: repeat(5, minmax(0,1fr));
  }
}

.advent-grid > a {
  font-size: clamp(42px, 8.8vw + 1rem, 150px);
  font-weight: bold;
  color: var(--cl-white);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 15px;
  position: relative;
  overflow: hidden;
  border-left: 2px solid var(--cl-white);
  aspect-ratio: 1 / 1;
}

.advent-grid > a.current-day {
  border: 0;
  border-left: 2px solid var(--cl-white);
}

.advent-grid > a.current-day > span {
  transform: skewX(-6deg);
  transform-origin: top right;
  background-color: rgba(222, 70, 104, 0.3);
}

.advent-grid > a.current-day > span  > span {
	transform: skewX(6deg);
	display: block;
}

.advent-grid > a.current-day:hover > span {
  background-color: var(--cl-pink);
}

.advent-grid > a > span {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border-top: 2px solid var(--cl-white);
  border-right: 2px solid var(--cl-white);
  border-bottom: 2px solid var(--cl-white);
}

.advent-grid > a.day-closed:hover > span {
  background-color: transparent;
}

.advent-grid > a:hover > span {
  background-color: var(--cl-pink);
}

.advent-grid .advent-grid__item.grid-rowspan-2 { 
  grid-row: span 2; 
  aspect-ratio: 1 / 2; 
}

.advent-grid .advent-grid__item.grid-colspan-2 { 
  grid-column: span 2; 
  aspect-ratio: 2 / 1; 
}

.advent-grid .advent-grid__item.grid-colspan-3 { 
  grid-column: span 3; 
  aspect-ratio: 3 / 1; 
}

.text-white {
  color: var(--cl-white);
}


/* single advent */
.back-to-advent {
	position: relative;
}

.back-to-advent .back-btn-wrapper{
	position: absolute;
	top: 35px;
	width: 100%;
	max-width: 190px;
}

.back-to-advent .advent-grid {
	grid-template-columns: 1fr;
}

.back-to-advent .advent-grid a {
	border-color: var(--cl-black);
	aspect-ratio: 1 / 0.92;
}

.back-to-advent .advent-grid a > span{
	font-size: 24px;
	flex-wrap: wrap;
	align-items: center;
	border-color: var(--cl-black);
  background: var(--cl-black) !important;
	transition: all 0.3s ease;
}

.back-to-advent .advent-grid a > span svg {
	margin-top: 1rem;
	transform: rotate(180deg);
}

.back-to-advent .advent-grid a:not(:hover) > span svg path{
	width: 100%;
	stroke: var(--cl-white);
}

.back-to-advent .advent-grid a:hover  {
	border-color: var(--cl-white);
	color: var(--cl-black);
}

.back-to-advent .advent-grid a:hover > span {
	background-color: var(--cl-white) !important;
	border-color: var(--cl-white);
	transform: skew(0deg);
}

.back-to-advent .advent-grid a > span.return-text {
  transform: none;
  background: none !important;
  border: none !important;
	display: block;
	padding: 32px;
}

/* advent hero image */
.single-advent .grid-2 {
  column-gap: 0;
  row-gap: 0;
}

.single-advent {
	--sticky-btn-zindex : 98;
}

/* page--header__gradient */
.single-advent .page--header__gradient .container {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: flex-end;
  transform: skewX(12deg);
}


/* page--header__title */
.single-advent .page--header__title {
  width: 100%;
  padding-block: 30px;
	margin-block-start: -203px;
	position: relative;
}

.single-advent .page--header__title span.day-number {
	font-size: clamp(196px, 18.75vw, 300px);
	font-weight: 600;
	line-height: 1;
}
.single-advent .page-header-intro__sticky--btn  .button.button--pink:after {
	background: var(--cl-pink);
}
@media (min-width: 62em) and (max-width: 90em) {
  .single-advent .page--header__title .max-width-s {
    max-width: calc(var(--max-width-s) - 420px);
  }
  .single-advent .page--header__title h2 {
    font-size: 38px;
  }
}

@media (min-width: 90em) {
  .single-advent .page--header__title .max-width-s {
    max-width: calc(var(--max-width-s) - 200px);
  }
} 


/* advent audio */
.advent-audio {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 767px) {
  .advent-audio {
    right: 12px;
    bottom: 12px;
    transform: scale(0.9);
  }
}

.advent-audio audio {
  /* no native controls; fully custom */
  display: none;
}

.advent-audio .advent-audio__controls {
  display: inline-flex;
  gap: 8px;
}

.advent-audio__btn--play .icon-play {
  display: none;
}

.advent-audio__btn--play.paused .icon-play {
  display: inline-flex;
}

.advent-audio__btn--play.paused .icon-pause {
  display: none;
}

.advent-audio__btn--mute .icon-volume-off {
  display: none;
}

.advent-audio__btn--mute.muted .icon-volume-off {
  display: inline-flex;
}

.advent-audio__btn--mute.muted .icon-volume {
  display: none;
}
.advent-audio__btn--mute.unmuted .icon-volume {
	display: inline-flex;
}
.post-details > p:not(:last-child), .advent-partners p {
    margin-bottom: 1rem;
}

.advent-grid > a.day-open:not(.current-day) {
  opacity: 0.35;
}
.advent-grid > a.day-open:hover {
  opacity: 1;
}

.gform_wrapper.gform-theme--foundation.gform-theme--framework .newsletter-checkbox .gform-field-label {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
}

.gform_wrapper.gform-theme--foundation.gform-theme--framework .newsletter-checkbox [type=checkbox] {
  margin-top: 3px;
}
@media (min-width: 992px) {
	.back-to-advent .back-btn-wrapper{
		top: 90px;
		width: 250px;
	}

	.single-advent .page--header__title {
    color: var(--cl-white);
    padding-block-end: 48px;
    position: absolute;
    left: 0;
    bottom: 0;
		margin-block-start: 0;
  }

	.single-advent .page--header__image {
    margin-left: -4.5vw;
  }
  .single-advent .page--header__image .image {
    aspect-ratio: 1.4 / 1;
    transform-origin: bottom left;
    display: flex;
  }
  .single-advent .page--header__image .image img {
    transform-origin: bottom right;
    transform: skewX(12deg);
  }

	.single-advent .page--header__gradient {
    margin-right: -4.5vw;
  }
  .single-advent .page--header__gradient .gradient-wrap {
    position: relative;
    overflow: hidden;
    transform: skewX(-12deg);
    transform-origin: top left;
    height: 100%;
  }
  .single-advent .page--header__gradient .gradient-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cl-pink);
    transform: skewX(12deg);
    transform-origin: top left;
  }

	.single-advent .page-header-intro__sticky--btn {
		margin-top: 0px;
	}
	.single-advent .page-header-intro__sticky--btn:not(.is-fixed)  .button.button--pink {
    position: fixed;
    top: calc(var(--sticky-header-height) + var(--wp-admin--admin-bar--height, 0px) - 81px);
    z-index: 11;
	}
}

.gform_validation_container.gfield--type-honeypot,
body .gform_wrapper .gform_validation_container.gfield--type-honeypot {
  display: none !important;
}

@media (max-width: 991px) {
  .single-advent {
    --newsletter-btn-zindex: 98;
  }
	.single-advent .page--header__title span.day-number {
		display: block;
		color: white;
	}
	.advent-board {
		background: none;
	}
  .advent-board::before {
    content: "";
    position: fixed;      
    inset: 0;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    height: 100vh;           
  }

	.advent-board .advent-grid .advent-grid__item.grid-colspan-2 {
		grid-column: span 3;
		aspect-ratio: auto;
		background: #4BAEB5;
		margin-left: calc(var(--cont-pad-inline) * -1);
		margin-right: calc(var(--cont-pad-inline) * -1);
		margin-bottom: -50px;
		padding: var(--cont-pad-inline) var(--cont-pad-inline) 50px;
	}

	.advent-grid > a.current-day > span {
		background-color: rgba(222, 70, 104, 1);
	}
	.advent-grid > a.day-closed {
    opacity: 1;
	}
  .secondary-text {
    font-weight: bold;
  }
}

/* sticky header mobile */

@media (prefers-reduced-motion: no-preference) {
  .site--header__sticky-advent {
    animation: slideDown 0.5s forwards ease-in-out;
  }
}

@media (max-width: 991px) {
  .site--header__sticky-advent {
    background-color: var(--cl-white);
    padding-block: 0px;
  }
  .site--header__sticky-advent .site--header__navigation {
      border-bottom: none;
      align-items: center;
  }
  .site--header.site--header__sticky-advent .whats-on-page, .site--header.site--header__sticky-advent .btn-full-menu {
    --cl-black : #000;
  }
  .site--header__sticky-advent .site--header__site-branding a > svg:first-child {
    display: none;
  }
  .site--header__sticky-advent .site--header__site-branding a > svg:last-child {
    display: block;
    max-width: 55px;
    height: auto;
    margin-top: 5px;
  }
  .header-transparent .site--header.site--header__sticky-advent .site--header__site-branding a > svg {
    fill: black !important;
  }
}