/*
 * Theme Name: UMG for Brands - Timber
 * Description: Wordpress Theme using Timber
 * Author: MIK
*/

/* Default variables */
:root {
  --z-index--header: 900;
  --z-index--fullscreen-overlay: 100000; /* Higher than admin bar's 99999 */

  --post-banner-media--height: calc(100vw * 2 / 3); /* 3:2 aspect ratio */
  --landing-banner-media--height: 100vw;
  --default-content-size: 840px;

  --column-gap: var(--wp--preset--spacing--50);

  --hr-separator: 1px solid currentColor;
  --hr-separator-display: block;

  --carousel-arrow-scale: 1;
  --carousel-image-height: 12rem;

  --form-control--height: 2.45rem;
  --form-control--min-width: 6.1rem;
  --form-control--padding: 0 0.875rem;

  --brand-statement--font-weight: 300;
  --brand-statement--line-height: 1.05;

  --umg-for-ref-width: 724;
  --umg-for-ref-for-height: 125;
  --umg-for-ref-gap: 28.5;
  --umg-for-width: 17rem;

  --umg-marquee-height-inner: calc(var(--umg-for-ref-for-height) / var(--umg-for-ref-width) * var(--umg-for-width));
  --umg-for-gap: calc(var(--umg-for-ref-gap) / var(--umg-for-ref-for-height) * var(--umg-marquee-height-inner));
  --umg-marquee-height: calc(var(--umg-marquee-height-inner) + var(--umg-for-gap) * 2);

  --header-logo-height: calc(1.75 * var(--font-scale--base, 1rem));
  
  /* Palette */
  --palette--pink: #FEB4EC;
  --palette--blue: #3015C3;
  --palette--yellow: #FED801;
  --palette--orange: #FC5102;

  --color-current: var(--wp--preset--color--white);
  --color-invert: var(--wp--preset--color--black);
}

/* Font scaling */
:root {
  /* The scaling variables are only set in non-admin, see below */

  /* Default sizes: applied via theme.json */
  --font-size--p: calc(1 * var(--font-scale--base, 1rem));
  --font-size--h1: calc(2.39 * var(--font-scale--base, 1rem));
  --font-size--h2: calc(1.08 * var(--font-scale--base, 1rem));
  --font-size--h3: calc(0.625 * var(--font-scale--base, 1rem));

  --font-size--small: calc(0.5625 * var(--font-scale--base, 1rem));
  --font-size--medium: calc(1 * var(--font-scale--base, 1rem));
  --font-size--large: calc(1.3 * var(--font-scale--base, 1rem));
  --font-size--x-large: calc(2.17 * var(--font-scale--base, 1rem));

  /* Scale multipliers to scale differently for mobile */
  --scale-multiplier--hero: 0.8;
  --font-size--hero: calc(2.17 * var(--scale-multiplier--hero) * var(--font-scaling--hero, 1rem));

  --scale-multiplier--post-title: 0.626;
  --font-size--post-title: calc(3.8 * var(--scale-multiplier--post-title) * var(--font-scale--base, 1rem));

  /* Special sizes with no font scaling or custom font scaling */
  --font-size--category: 0.6875rem;
  --font-size--form: 1rem;
  --font-size--menu: 1.125rem;
  --font-size--menu-icon: var(--font-size--p);
  --font-size--menu-item: var(--font-size--x-large);

  /* Derived sizes */
  --brand-statement--size-1: calc(0.8 * var(--wp--preset--font-size--x-large));
  --scale-multiplier--brand-size-2: 0.5;

  --brand-statement--size-2: calc(var(--scale-multiplier--brand-size-2) * var(--wp--preset--font-size--x-large));
}

@media (min-width: 782px) {
  :root {
    --scale-multiplier--hero: 1.25;
    --scale-multiplier--post-title: 1;
    --scale-multiplier--brand-size-2: 0.55;
  }
}

/* Below this size, the content-size is shrunk */
@media (min-width: 888px) {
  :root {
    --scale-multiplier--brand-size-2: 0.65;
  }
}

/* Content and font scaling that we don't want to accidentally apply to the editor */
:root.root-non-admin {
  /* Font is from browser width 1050px -> 1500px, which coincides with 840px -> 1200px content width at 80vw */
  --wp--style--global--content-size: clamp(840px, 80vw, 1200px);
  --wp--style--global--wide-size: clamp(1080px, 90vw, 1540px);

  /* Scale most font by 1200/840 = ~1.42x = (16px -> 22.8571428571px) so it matches width content scaling */
  --font-scale--base: clamp(1rem, calc(1.52381vw + 1rem * (0.0000000001 / 16)), calc(1rem * 22.8571428571 / 16));

  /* Previous code scaled the global brand statement differently, leaving this variable in cases it changes again */
  --font-scaling--hero: var(--font-scale--base);
}

/* Desktop variables */
@media (min-width: 782px) {
  :root {
    --column-gap: var(--wp--preset--spacing--70);

    --post-banner-media--height: calc(100vw * 540 / 1920); /* 32:9 aspect ratio */
    --landing-banner-media--height: calc(100vw * 796 / 1920);

    --carousel-arrow-scale: 1.5;
    --carousel-image-height: 20rem;

    --hr-separator-display: none;

    --brand-statement--size-1: calc(1 * var(--wp--preset--font-size--x-large));

    --umg-for-width: 23rem;
  }

  /* Don't hide mobile-only styles in block editor or you'll never be able to select the thing again. */
  :root.root-non-admin .mobile-only {
    display: none !important;
  }

  /* Editor sidebar */
  /* Allow it to go a bit larger on large-enough screens */
  .interface-complementary-area__fill {
    min-width: 280px !important;
    width: 380px !important;
    max-width: calc(100vw - 900px);
  }

  .interface-complementary-area {
    width: 100% !important;
  }
}

/* Mobile variables - use sparingly, should be defaults where possible */
@media (max-width: 781px) {
  .desktop-only {
    display: none !important;
  }
}

/* Very large screens */
@media (min-width: 1600px) {
  :root {
    --umg-for-width: 30rem;
  }
}

html {
  /* Page height for sticky footer */
  height: calc(100% - var(--wp-admin--admin-bar--height, 0px));

  /* Make fragment links scroll smoothly */
  scroll-behavior: smooth;
}

.root-non-admin body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Palette */
.palette-light {
  color: var(--wp--preset--color--black);
  background-color: var(--wp--preset--color--white);

  --color-current: var(--wp--preset--color--black);
  --color-invert: var(--wp--preset--color--white);
}

.palette-dark {
  color: var(--wp--preset--color--white);
  background-color: var(--wp--preset--color--black);

  --color-current: var(--wp--preset--color--white);
  --color-invert: var(--wp--preset--color--black);
}

.local-palette-0,
.local-palette-5,
.category-palette-0,
.local-palette-orange {
  --palette--local: var(--palette--orange);
  --color-current: var(--wp--preset--color--black);
  --color-invert: var(--wp--preset--color--white);
}

.local-palette-1,
.local-palette-4,
.local-palette-yellow {
  --palette--local: var(--palette--yellow);
  --color-current: var(--wp--preset--color--black);
  --color-invert: var(--wp--preset--color--white);
}

.local-palette-2,
.local-palette-7,
.category-palette-1,
.local-palette-blue {
  --palette--local: var(--palette--blue);
  --color-current: var(--wp--preset--color--white);
  --color-invert: var(--wp--preset--color--black);
}

.local-palette-3,
.local-palette-6,
.category-palette-2,
.local-palette-pink {
  --palette--local: var(--palette--pink);
  --color-current: var(--wp--preset--color--black);
  --color-invert: var(--wp--preset--color--white);
}

.background-local-palette {
  background-color: var(--palette--local);
}

/* Resets */
img, svg, video {
  vertical-align: middle;
}

[role='button'] {
  cursor: pointer;
  user-select: none;
}

/* Header */
.header {
 position: absolute;
 top: var(--wp-admin--admin-bar--height, 0px);
 left: 0;
 right: 0;
 z-index: var(--z-index--header);
}

.header-wrapper {
  padding-top: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--40);

  align-items: flex-start !important;
  justify-content: space-between;
}

/* Header logo */
.hdr-logo-link {
  text-decoration: none !important;
  color: var(--color-current);
}

.hdr-logo-link img {
  width: auto;
  height: var(--header-logo-height);
  object-fit: contain;
  object-position: left center;
}

.hdr-logo-image.hdr-logo-invert {
  filter: brightness(0);
}

/* Header menu button */
.menu-button {
  display: flex;
  flex-direction: column;
}

.menu-button.menu-button-right {
  align-items: flex-end;
}

.menu-button .menu-label {
  font-size: var(--font-size--menu);
  font-weight: bold;
  text-transform: uppercase;
}

.menu-icon {
  font-size: var(--font-size--menu-icon);
}

.menu-icon svg {
  width: 1em;
  height: 1em;
}

/* Footer */
footer {
  flex: 1 1 auto;  
  padding-top: var(--wp--preset--spacing--70);

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.footer-layout {
  display: grid;
  grid-template:
    'logo' min-content
    'menu' min-content
    / 100%;

  padding: 0 var(--wp--style--root--padding-left) var(--wp--preset--spacing--40) var(--wp--style--root--padding-right);
}

.footer-layout .footer-content {
  padding-bottom: var(--wp--preset--spacing--70);
}

.footer-layout .footer-brand-statement {
  font-size: var(--wp--preset--font-size--large);
  font-weight: var(--brand-statement--font-weight);
  line-height: var(--brand-statement--line-height);
}

@media (min-width: 782px) {
  .footer-layout {
    padding: 0 0 var(--wp--preset--spacing--60) 0;

    --banner-column-width: calc(var(--wp--style--global--content-size) / 2);

    grid-template:
      'lead lead menu .' min-content
      / minmax(var(--wp--style--root--padding-left), 1fr) minmax(0, var(--banner-column-width)) minmax(0, var(--banner-column-width)) minmax(var(--wp--style--root--padding-right), 1fr);

    column-gap: var(--column-gap);
  }

  .footer-layout .footer-menu {
    grid-row: 1 / span 1;
    grid-column: 3 / span 1;

    justify-content: center;
    padding-right: var(--wp--style--root--padding-right);
  }

  .footer-layout .footer-content {
    grid-row: 1;
    grid-column: 2;

    padding-left: var(--wp--style--root--padding-left);
    padding-bottom: 0;
    max-width: var(--banner-column-width);
  }
}

footer .copyright-notice {
  padding-top: 0.5rem;
  padding-bottom: 1rem;
  text-align: center;
}

footer .footer-links {
  margin-bottom: var(--wp--preset--spacing--40);
}

@media (min-width: 782px) {
  footer .footer-links {
    margin-bottom: 0;
  }
}

/* Fullscreen overlays like menu and video */
.fullscreen-overlay {
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-index--fullscreen-overlay);

  display: flex;
  flex-direction: column;
}

/* At this exact small screen breakpoint, admin bar becomes absolute instead of fixed */
@media screen and (max-width: 600px) {
  .fullscreen-overlay {
    top: 0;
  }
}

.fullscreen-overlay:not(.fullscreen-overlay-open) {
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

/* Menu */
.menu-overlay .menu-overlay-content {
  flex: 1 1 auto;

  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.menu-overlay .menu-overlay-items {
  flex: 1 1 auto;

  padding-top: var(--wp--preset--spacing--80);
}

.menu-overlay .menu-item {
  font-size: var(--font-size--menu-item);
  font-weight: bold;
  text-transform: uppercase;

  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--50);

  /* Allow a little bit of overflow into page margin to adjust wrapping on smaller mobiles */
  margin-right: calc(-1 * var(--wp--style--root--padding-right) / 2);
}

.menu-overlay .menu-item .menu-item-label {
  --palette--local: var(--palette--orange);
  transition: background-size 0.2s;
  background-image: linear-gradient(var(--palette--local), var(--palette--local));
  background-position: 0% 100%;
  background-size: 0% 100%;
  background-repeat: no-repeat;
}

@media (any-hover: hover) {
  .menu-overlay .menu-item:hover .menu-item-label {
    background-size: 100% 100%;
  }
}

.menu-overlay .menu-overlay-footer {
  padding-bottom: var(--wp--preset--spacing--70);
}

/* Menu icons */
.menu-overlay .menu-item .menu-item-icon {
  width: 1em;
  height: 1em;
  
  background-image: var(--icon-image);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.menu-overlay .menu-item.icon-email {
  --icon-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_66_1180)'%3E%3Cpath d='M0 11.1705V68.5344H79.6721V11.1705H0ZM3.18689 14.3574H76.4852V18.3908L39.8361 47.3715L3.18689 18.3908V14.3574ZM3.18689 22.474L38.8402 50.658C39.4253 51.1248 40.2469 51.1248 40.832 50.658L76.4852 22.474V65.3475H3.18689V22.474Z' fill='black' stroke='white' stroke-width='0.86941'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_66_1180'%3E%3Crect width='79.6721' height='79.6721' fill='white' transform='translate(0 0.0163574)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.menu-overlay .menu-item.icon-search {
  --icon-image: url("data:image/svg+xml,%3Csvg width='80' height='81' viewBox='0 0 80 81' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32.6652 5.12457C17.7204 5.12457 5.57666 17.2683 5.57666 32.2131C5.57666 47.1578 17.7204 59.3016 32.6652 59.3016C38.5784 59.3016 44.0434 57.397 48.5 54.1727L69.4637 75.0867L73.9453 70.6051L53.2306 49.8406C57.3013 45.0976 59.7537 38.9417 59.7537 32.2131C59.7537 17.2683 47.6099 5.12457 32.6652 5.12457ZM32.6652 8.31146C45.8858 8.31146 56.5668 18.9925 56.5668 32.2131C56.5668 45.4337 45.8858 56.1147 32.6652 56.1147C19.4446 56.1147 8.76355 45.4337 8.76355 32.2131C8.76355 18.9925 19.4446 8.31146 32.6652 8.31146Z' fill='black' stroke='white' stroke-width='0.86941'/%3E%3C/svg%3E%0A");
}

.menu-overlay .menu-item.icon-folder {
  --icon-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_66_1186)'%3E%3Cpath d='M4.83526 6.37378C2.2148 6.37378 0.0549358 8.53364 0.0549358 11.1541V69.9621C-0.0446543 70.3293 -0.00730801 70.7152 0.154526 71.0576C0.602682 73.2299 2.54469 74.8918 4.83526 74.8918H66.9795C69.3572 74.8918 71.3117 73.0992 71.6603 70.8086C71.6727 70.709 71.7038 70.6094 71.7101 70.5098C71.7101 70.4787 71.7101 70.4414 71.7101 70.4103L71.7598 70.1613C71.7598 70.1426 71.7598 70.1302 71.7598 70.1115L79.6773 27.3873L79.7271 27.2379V27.0885C79.7271 24.4681 77.5672 22.3082 74.9467 22.3082V17.5279C74.9467 14.9074 72.7869 12.7476 70.1664 12.7476H28.7867C28.7929 12.7538 28.7742 12.7476 28.7369 12.7476C28.6871 12.7102 28.5439 12.5919 28.2887 12.2994C27.8966 11.8512 27.4422 11.1043 26.9443 10.3076C26.4463 9.51087 25.911 8.66435 25.2512 7.91743C24.5915 7.1705 23.6703 6.37378 22.3631 6.37378H4.83526ZM4.83526 9.56066H22.3631C22.2635 9.56066 22.4689 9.56066 22.8611 10.0088C23.2532 10.457 23.7076 11.2039 24.2055 12.0006C24.7035 12.7973 25.2512 13.6439 25.8986 14.3908C26.5459 15.1377 27.4298 15.9344 28.7369 15.9344H70.1664C71.0627 15.9344 71.7598 16.6316 71.7598 17.5279V22.3082H12.8025C10.294 22.3082 8.29602 24.3249 8.12174 26.7898H8.07194L8.02215 27.0885L3.24182 52.8824V11.1541C3.24182 10.2578 3.93895 9.56066 4.83526 9.56066ZM12.8025 25.4951H74.9467C75.843 25.4951 76.5402 26.1922 76.5402 27.0885L68.7224 69.3646L68.6726 69.4641C68.6539 69.5264 68.6352 69.5949 68.6228 69.6633C68.6041 69.7256 68.5854 69.794 68.573 69.8625C68.573 69.8936 68.573 69.931 68.573 69.9621C68.573 69.9808 68.573 69.9932 68.573 70.0119C68.5481 70.0928 68.5356 70.1737 68.5232 70.2609C68.5169 70.3107 68.5294 70.3605 68.5232 70.4103C68.5169 70.4787 68.5169 70.541 68.5232 70.6094C68.324 71.2568 67.7078 71.7049 66.9795 71.7049H4.83526C3.93895 71.7049 3.24182 71.0078 3.24182 70.1115L11.1592 27.3873L11.209 27.2379V27.0885C11.209 26.1922 11.9062 25.4951 12.8025 25.4951Z' fill='black' stroke='white' stroke-width='0.86941'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_66_1186'%3E%3Crect width='79.6721' height='79.6721' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.menu-overlay .menu-item.icon-info {
  --icon-image: url("data:image/svg+xml,%3Csvg width='80' height='81' viewBox='0 0 80 81' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M39.8362 3.85901C19.6143 3.85901 3.18701 20.2863 3.18701 40.5082C3.18701 60.7301 19.6143 77.1574 39.8362 77.1574C60.0581 77.1574 76.4854 60.7301 76.4854 40.5082C76.4854 20.2863 60.0581 3.85901 39.8362 3.85901ZM39.8362 7.04589C58.3358 7.04589 73.2985 22.0086 73.2985 40.5082C73.2985 59.0078 58.3358 73.9705 39.8362 73.9705C21.3366 73.9705 6.3739 59.0078 6.3739 40.5082C6.3739 22.0086 21.3366 7.04589 39.8362 7.04589ZM39.8362 18.2C38.5684 18.2 37.3525 18.7036 36.456 19.6001C35.5595 20.4966 35.0559 21.7125 35.0559 22.9803C35.0559 24.2481 35.5595 25.464 36.456 26.3605C37.3525 27.257 38.5684 27.7606 39.8362 27.7606C41.104 27.7606 42.3199 27.257 43.2164 26.3605C44.1129 25.464 44.6165 24.2481 44.6165 22.9803C44.6165 21.7125 44.1129 20.4966 43.2164 19.6001C42.3199 18.7036 41.104 18.2 39.8362 18.2ZM33.4624 34.1344V37.3213H35.0559H36.6493V58.0361H35.0559H33.4624V61.2229H35.0559H36.6493H43.0231H44.6165H46.21V58.0361H44.6165H43.0231V34.1344H41.4296H35.0559H33.4624Z' fill='black' stroke='white' stroke-width='0.86941'/%3E%3C/svg%3E%0A");
}

/* Fullscreen sizzle overlay */
.sizzle-overlay .sizzle-overlay-content {
  flex: 1 1 auto;
  
  position: relative;
}

.sizzle-overlay .header-wrapper {
  position: relative;
  z-index: 2;
}

.sizzle-overlay .sizzle-video {
  position: absolute;
  top: 0;
  left: 0;
  right: calc(-1 * var(--scrollbar-width, 0));
  bottom: 0;
  z-index: 1;
}

.sizzle-overlay .sizzle-video iframe,
.sizzle-overlay .sizzle-video video {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: center;
}

/* Banner video or image */
.landing-banner-media {
  --post-banner-media--height: var(--landing-banner-media--height);
}

.banner-media {
  width: 100%;
  height: var(--post-banner-media--height);
  object-fit: cover;
  object-position: center;

  opacity: 0.85; /* As requested by Aaron */
}

.banner-empty-spacer {
  width: 100%;
  height: var(--wp--preset--spacing--80);
}

/* Posts and Pages */
.article-content {
  --article-content-margin-top: var(--wp--preset--spacing--60);
  margin-top: var(--article-content-margin-top);
  margin-bottom: var(--wp--preset--spacing--80);
}

.article-body {
  --article-body-margin-top: var(--wp--preset--spacing--60);
  margin-top: var(--article-body-margin-top);
  margin-bottom: var(--wp--preset--spacing--40);
}

@media (min-width: 782px) {
  .article-content {
    --article-content-margin-top: var(--wp--preset--spacing--60);
  }

  .article-body {
    --article-body-margin-top: var(--wp--preset--spacing--70);
  }
}


.article-body > .article-content-intro {
  margin-bottom: var(--wp--preset--spacing--50);
}

.article-body > .article-content-intro .article-heading {
  margin-top: 0;
}

/* Make first paragraph bigger font */
.post-type-post .article-body {
  --first-paragraph--margin-top: var(--wp--preset--spacing--60);
  --first-paragraph--margin-bottom: var(--wp--preset--spacing--60);
}

.post-type-post .article-body > p:first-child,
.post-type-post .article-body > *:first-child p,
.post-type-post .article-body > .article-content-intro + p,
.post-type-post .article-body > .article-content-intro + * p {
  margin-top: var(--first-paragraph--margin-top);
  margin-bottom: var(--first-paragraph--margin-bottom);
}

.article-content .heading-title {
  font-size: var(--font-size--post-title);
}

@media (min-width: 782px) {
  /* Put first paragraph inset on the right on desktop */
  
  .post-type-post .article-body {
    --first-paragraph--margin-top: 0;
    --first-paragraph--margin-bottom: var(--wp--preset--spacing--60);
  }

  .post-type-post .article-body {
    --article-column-width: calc((var(--wp--style--global--content-size) - var(--column-gap)) / 2);

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--article-column-width)) var(--column-gap) minmax(0, var(--article-column-width)) minmax(0, 1fr);
  }

  .post-type-post .article-body > * {
    grid-column: 2 / span 3;
    width: 100%;
  }

  .post-type-post .article-body > .article-content-intro {
    grid-column: 2 / span 1;
  }

  .post-type-post .article-body > .article-content-intro + p {
    grid-column: 4 / span 1;
  }
}

/** Post heading style with link to content */
.post-type-post .post-heading {
  display: grid;
  grid-template:
    'heading'      max-content
    'content-link' max-content
    'separator'    max-content
    / 100%;

  align-items: start;
}

.post-type-post .post-heading .heading-title {
  margin-top: 0;
  margin-bottom: var(--wp--preset--spacing--50);
}

.post-type-post .post-heading .separator {
  width: 100%;
  grid-column: 1 / -1;

  margin-top: var(--wp--preset--spacing--50);
  margin-bottom: 0;
}

.post-type-post .post-skip-content {
  font-size: 0.8em;
  font-weight: 300;
}

@media (min-width: 782px) {
  .post-type-post .post-heading {
    display: grid;
    grid-template:
      'heading      content-link' max-content
      'separator    separator'    min-content
      / minmax(min-content, 1fr) max-content;

    column-gap: var(--wp--preset--spacing--50);
    align-items: end;
  }

  .post-type-post .post-heading .heading-title {
    margin: 0;
  }
}


/* Categories */
.post-categories {
  margin-top: var(--wp--preset--spacing--50);
}

.post-category {
  font-size: var(--font-size--category);
  font-weight: 400;

  text-transform: uppercase;
  text-align: center;

  border: 1px solid currentColor;
  border-radius: 1000px;

  min-width: 4.8rem;
  padding: 0.5rem 0.75rem;

  /* Reset link styling */
  color: currentColor !important;
  text-decoration: none !important;
}

.post-category:focus-visible,
.post-category.is-active {
  color: var(--color-current) !important;
  border-color: var(--palette--local, var(--palette--orange));
  background-color: var(--palette--local, var(--palette--orange));

  outline: none !important;
}

@media (any-hover: hover) {
  .post-category:hover {
    color: var(--color-current) !important;
    border-color: var(--palette--local, var(--palette--orange));
    background-color: var(--palette--local, var(--palette--orange));
  }
}

/* Landing Page */
.landing-banner {
  display: grid;

  grid-template:
    'banner'  min-content
    'lead'    min-content
    'play'    min-content
    / 100%;
}

.landing-banner .landing-banner-media {
  grid-row: 1 / span 3;
  grid-column: 1 / span 1;
}

.landing-banner .landing-lead-text {
  z-index: 1;

  grid-row: 2;
  grid-column: 1;
  align-self: end;

  padding-left: var(--wp--style--root--padding-left);
  padding-right: var(--wp--style--root--padding-right);
}

.landing-banner .landing-umg-text {
  z-index: 1;

  grid-row: 3 / span 1;
  grid-column: 1 / span 1;

  padding-left: var(--wp--style--root--padding-left);
  padding-right: var(--wp--style--root--padding-right);

  width: var(--umg-for-width);
  transform: var(--umg-text-transform);

  margin-top: 1rem;
}

.landing-banner .landing-logo {
  align-self: stretch;

  grid-row: 2;
  grid-column: 1;

  padding-left: var(--wp--style--root--padding-left);
  padding-right: var(--wp--style--root--padding-right);
  padding-bottom: var(--wp--preset--spacing--20);
}

.landing-banner .landing-logo {
  margin-top: var(--wp--preset--spacing--50);
}

.landing-banner .landing-play {
  grid-row: 3;
  grid-column: -2;
  align-self: end;
  justify-self: start;
  z-index: 1;

  padding-left: var(--wp--style--root--padding-left);
  padding-right: calc(var(--wp--style--root--padding-right));
  padding-top: var(--wp--preset--spacing--50);
  padding-bottom: var(--wp--preset--spacing--70);
}

.landing-banner .landing-play .form-button {
  text-transform: uppercase;
  padding-inline: 1rem;
  white-space: nowrap;
}

@media (min-width: 782px) {
  .landing-banner {
    --banner-column-width: calc(var(--wp--style--global--content-size) / 2);

    grid-template:
      '.    .      .    .'    minmax(var(--wp--preset--spacing--50), 1fr)
      '.    lead   lead .'    min-content
      '.    play   .    .'    min-content
      '.    .      .    .'    minmax(var(--wp--preset--spacing--50), 1fr)
      '.    .      .    .'    min-content
      / minmax(var(--wp--style--root--padding-left), 1fr) minmax(0, var(--banner-column-width)) minmax(0, var(--banner-column-width)) minmax(var(--wp--style--root--padding-right), 1fr);
  }

  .landing-banner .landing-banner-media {
    grid-row: 1 / -2;
    grid-column: 1 / -1;
  }
  
  .landing-banner .landing-lead-text {
    grid-row: 2 / span 1;
    grid-column: 2 / span 2;
    align-self: center;

    margin-bottom: 0;

    padding-top: var(--wp--preset--spacing--80);
    padding-left: 0;
    padding-right: calc(var(--column-gap) / 2);
  }
  
  .landing-banner .landing-umg-text {
    grid-row: 4 / span 1;
    grid-column: 1 / span 2;
    align-self: end;

    max-width: var(--banner-column-width);

    padding-left: var(--wp--style--root--padding-left);
    padding-right: unset;

    margin-top: unset;
  }

  .landing-banner .landing-logo {
    grid-row: 4 / span 1;
    grid-column: 1 / span 2;

    padding-left: var(--wp--style--root--padding-left);
    padding-right: 0;

    margin-right: calc(var(--column-gap) / 2);
    padding-bottom: var(--wp--preset--spacing--40);
  }

  .landing-banner .landing-play {
    grid-row: 3;
    grid-column: 2;

    padding-left: 0;
    padding-top: var(--wp--preset--spacing--60);

    margin-top: 0;
    margin-bottom: var(--wp--preset--spacing--40);
  }

  .landing-banner .landing-play .form-button {
    padding-inline: 1.5rem;
  }
}

.landing-lead-text {
  font-size: var(--font-size--hero);
  font-weight: var(--brand-statement--font-weight);
  line-height: var(--brand-statement--line-height);
  
  margin-top: 0;
  margin-bottom: 0;
}

.landing-get-in-touch {
  padding-top: var(--wp--preset--spacing--70);
  padding-bottom: var(--wp--preset--spacing--70);
}

.formatted-tagline {
  white-space: pre-line;
}

.formatted-tagline i,
.formatted-tagline em {
  font-family: var(--wp--preset--font-family--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* Post teasers */
.post-teasers {
  display: flex;
  flex-direction: column;

  --post-teasers-gap: var(--wp--preset--spacing--70);
  --post-teasers-padding-top: var(--wp--preset--spacing--60);
  gap: var(--post-teasers-gap);

  padding-top: var(--post-teasers-padding-top);
  margin-bottom: var(--wp--preset--spacing--80) !important;
}

@media (min-width: 782px) {
  .post-teasers {
    --teaser-footer-offset: 2rem;

    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--column-gap);

    --post-teasers-padding-top: var(--post-teasers-gap);
    padding-bottom: var(--teaser-footer-offset);
  }
}

.post-teasers .teaser-intro,
.post-teasers .teaser-intro-placeholder {
  grid-row: 2;
  grid-column: 2;
}

.post-teasers .teaser-intro-images {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min-content;

  --teaser-intro-image-height: calc(var(--header-logo-height) * 1.25);
  grid-template-rows: var(--teaser-intro-image-height);

  gap: var(--wp--preset--spacing--50);
  margin-bottom: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
  .post-teasers .teaser-intro-images {
    gap: var(--wp--preset--spacing--60);
  }
}

.post-teasers .teaser-intro-image {
  height: 100%;
  width: auto;
}

.post-teasers .teaser-intro-image img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.post-teasers .teaser-intro-text {
  font-size: var(--brand-statement--size-2);
  font-weight: var(--brand-statement--font-weight);
  line-height: var(--brand-statement--line-height);

  margin-top: 0;
  margin-bottom: var(--wp--preset--spacing--60); 
}

.post-teasers .teaser-title {
  grid-row: 1;
  grid-column: 1;

  margin-block: 0;
}

@media (max-width: 781px) {
  .post-teasers .teaser-title:not(:first-child) {
    margin-top: calc(var(--post-teasers-padding-top) - var(--post-teasers-gap));
  }

  .post-teasers .teaser-title {
    margin-bottom: calc(var(--post-teasers-padding-top) - var(--post-teasers-gap));
  }
}

.post-teasers .teaser-footer {
  transform: translateY(var(--teaser-footer-offset, 0px));
}

.post-teasers.post-teasers-compact .teaser-title  {
  grid-column: 1 / span 2;
}

.culture-tagline {
  font-size: var(--brand-statement--size-1);
  font-weight: 100;
  line-height: 1;
}

.archive-heading {
  margin-top: var(--wp--preset--spacing--60);
}

.archive-title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.archive-filter {
  margin-top: var(--wp--preset--spacing--60);

  border-top: var(--hr-separator);
  border-bottom: var(--hr-separator);
  
  padding-top: var(--wp--preset--spacing--60);
  padding-bottom: var(--wp--preset--spacing--60);
}

.archive-filter-inner {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.archive-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.archive-filter-header .archive-filter-button {
  transition: transform 0.3s;
}

.archive-filter-header.expand-toggle-expanded .archive-filter-button {
  transform: rotate(-45deg);
}

.archive-filter-content {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}

.search-form {
  padding-top: var(--wp--preset--spacing--50);
}

.search-filter {
  margin-top: var(--wp--preset--spacing--80);
  padding-top: var(--wp--preset--spacing--80);
  padding-bottom: var(--wp--preset--spacing--80);
}

.search-no-results {
  padding-top: var(--wp--preset--spacing--50);
}

.tease {
  grid-row: span 2;
}

.tease .tease-image-wrapper {
  display: grid;
  overflow: hidden;
}

.tease .tease-image {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;

  object-fit: cover;
  aspect-ratio: 1; /* Non-critical if older browser doesn't support */

  transition: transform 0.3s;
}

.tease .tease-image-cover {
  grid-area: 1 / 1;
  z-index: 1;

  /* Will have background-color set from palette class */
}

.tease .tease-title {
  margin-top: var(--wp--preset--spacing--50);
}

.tease .post-categories {
  margin-top: var(--wp--preset--spacing--50);
}

/* All this tease-title span mess is for the hover animation */
.tease .tease-title span {
  z-index: 1;

  background-image:
    linear-gradient(to right, var(--color-current) 0%, var(--color-current) 50%, currentColor 50%, currentColor 100%),
    linear-gradient(var(--palette--local), var(--palette--local));
  background-position: 100% 0%, 0% 100%;
  background-size: 200% 100%, 0% 100%;
  background-repeat: no-repeat;

  -webkit-background-clip: text, border-box;
  -webkit-text-fill-color: transparent;
}

.tease .tease-title span {
  transition: background-position 0.2s, background-size 0.2s;
}

.tease-compact .tease-link {
  display: flex;
  align-items: center;
}

.tease-compact .tease-image-wrapper {
  flex: 0 0 auto;
  --gap: var(--column-gap);
  width: calc(50% - var(--gap) / 2);
  margin-right: var(--gap);
}

.tease-compact .tease-title {
  margin: 0;
}

.tease-compact .tease-excerpt {
  display: none;
}

.tease-compact .post-categories {
  margin-top: var(--wp--preset--spacing--40);
}

@media (min-width: 1200px) {
  .tease-compact .tease-link {
    display: block;
  }
  
  .tease-compact .tease-image-wrapper {
    float: left;
    width: 35%;
  }
}

@media (any-hover: hover) {
  .tease-link:hover .tease-image {
    transform: scale(1.05);
  }

  .tease-link:hover .tease-title span {
    background-position-x: 0%, 0%;
    background-size: 200% 100%, 100% 100%;
  }
}

/* Forms */
input[type="text"].form-control,
input[type="email"].form-control,
input[type="search"].form-control,
select.form-control {
  color: var(--color-current);
  background-color: transparent;

  border: 1px solid var(--color-current);
  border-radius: 1000px;

  height: var(--form-control--height);
  min-width: var(--form-control--min-width);
  padding: var(--form-control--padding);

  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;

  font-size: var(--font-size--form);
}

select.form-control {
  background: none;

  /* Chevron copied from Bootstrap */
  --bg-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-image: var(--bg-chevron);
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  background-repeat: no-repeat;
}

select.form-control option {
  color: var(--color-current);
  background-color: var(--color-invert);
}

.form-button,
a.shareaholic-service-icon.shareaholic-service-icon.shareaholic-service-default.shareaholic-service-all {
  /* All the important styles and other hacks are to override the shareaholic button */

  color: var(--color-current) !important;
  background-color: transparent !important;

  border: 2px solid var(--color-current) !important;
  border-radius: 1000px !important;

  height: var(--form-control--height);
  min-width: var(--form-control--min-width);
  padding: var(--form-control--padding);

  line-height: 1.1 !important;
  font-size: var(--font-size--form) !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

@media (any-hover: hover) {
  .form-button:hover,
  select.form-control:hover,
  a.shareaholic-service-icon.shareaholic-service-icon.shareaholic-service-default.shareaholic-service-all:hover {
    color: var(--wp--preset--color--black) !important;
    background-color: var(--palette-local, var(--palette--orange)) !important;
    border-color: var(--palette-local, var(--palette--orange)) !important;
  }

  select.form-control:hover {
    --bg-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  }
}

/* Links */
a.link-quiet,
.link-quiet > a {
  text-decoration: none !important;
  color: inherit !important;
}

a.link-block {
  display: block;
  color: inherit !important;
}

.link-wrapper {
  display: flex;
  flex-direction: column;

  overflow: hidden;
}

.has-global-padding .link-wrapper {
  /* Make full bleed so its overflow: hidden works cleanly */
  margin-left: calc(-1 * var(--wp--style--root--padding-left));
  margin-right: calc(-1 * var(--wp--style--root--padding-right));

  padding-left: var(--wp--style--root--padding-left);
  padding-right: var(--wp--style--root--padding-right);
}

.link-highlight,
a[href^="mailto"] > *,
.link-with-arrow {
  --palette--local: var(--palette--orange);
  --color-current: var(--wp--preset--color--black) !important;
  transition: background-position 0.2s, background-size 0.2s;

  background-image:
    linear-gradient(to right, var(--color-current) 0%, var(--color-current) 50%, currentColor 50%, currentColor 100%),
    linear-gradient(var(--palette--local), var(--palette--local));  background-position: 0% 100%;
  background-position: 100% 0%, 0% 100%;
  background-size: 200% 100%, 0% 100%;
  background-repeat: no-repeat;

  -webkit-background-clip: text, border-box;
  -webkit-text-fill-color: transparent
}

@media (any-hover: hover) {
  .link-highlight:hover,
  a[href^="mailto"]:hover > *,
  .link-with-arrow:hover {
    background-position-x: 0%, 0%;
    background-size: 200% 100%, 100% 100%;
  }

  .link-with-arrow:hover::after {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

.link-with-arrow {
  color: inherit;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none !important;

  align-self: flex-end;
  display: inline-grid;
  grid-template:
    'content' max-content
    'arrow'   min-content
    / max-content;
  justify-items: flex-end;

  position: relative;

  --animation-duration: 1s;

  animation: animate-block-left var(--animation-duration) ease-out;
  animation-fill-mode: both;
}

.link-with-arrow::before,
.link-with-arrow::after {
  content: '';
  display: block;
  grid-area: arrow;

  width: calc(75 / 46 * 1em);
  height: calc(36 / 46 * 1em);

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 75 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='56.2072' y1='1.29289' x2='73.619' y2='18.7047' stroke='white' stroke-width='2'/%3E%3Cline x1='73.6191' y1='17.2955' x2='56.2073' y2='34.7073' stroke='white' stroke-width='2'/%3E%3Cline x1='0.500122' y1='18' x2='72.5001' y2='18' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 75 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='56.2072' y1='1.29289' x2='73.619' y2='18.7047' stroke='white' stroke-width='2'/%3E%3Cline x1='73.6191' y1='17.2955' x2='56.2073' y2='34.7073' stroke='white' stroke-width='2'/%3E%3Cline x1='0.500122' y1='18' x2='72.5001' y2='18' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
  mask-repeat: no-repeat;
  mask-position: 100% 100%;
  
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 100% 100%;
  background-repeat: no-repeat;

  /* Animation must be set via variable so it can be paused/reset via js */
  animation: var(--animation, animate-text-in 0.3s ease-out);
  animation-fill-mode: both;
  animation-delay: calc(var(--animation-duration) - 0.2s);
  animation-play-state: var(--animation-play-state, unset);
}

.link-with-arrow::after {
  background-image: linear-gradient(var(--color-current), var(--color-current));
  width: 100%;

  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 0.2s;
}

.link-with-arrow.link-down {
  grid-template:
    'content      arrow'      max-content
    / max-content min-content;

  column-gap: 0.5em;
}

.link-with-arrow.link-down::before,
.link-with-arrow.link-down::after {
  width: calc(36 / 46 * 0.7em);
  height: calc(75 / 46 * 0.7em);

  /* Try to make it not touch the edges of the highlight */
  transform: translateX(-1px) translateY(1px);

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 61'%3E%3Cg xmlns='http://www.w3.org/2000/svg' transform='matrix(0 1 -1 0 29 -0)'%3E%3Cg id='Group 18'%3E%3Cg id='Group 19'%3E%3Cline id='Line 3' x1='46.2042' y1='0.914972' x2='60.3935' y2='15.1043' stroke='white' stroke-width='1.62985' /%3E%3Cline id='Line 4' x1='60.3936' y1='13.9551' x2='46.2043' y2='28.1444' stroke='white' stroke-width='1.62985' /%3E%3Cline id='Line 5' x1='0.806641' y1='14.5298' x2='59.4813' y2='14.5298' stroke='white' stroke-width='1.62985' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 61'%3E%3Cg xmlns='http://www.w3.org/2000/svg' transform='matrix(0 1 -1 0 29 -0)'%3E%3Cg id='Group 18'%3E%3Cg id='Group 19'%3E%3Cline id='Line 3' x1='46.2042' y1='0.914972' x2='60.3935' y2='15.1043' stroke='white' stroke-width='1.62985' /%3E%3Cline id='Line 4' x1='60.3936' y1='13.9551' x2='46.2043' y2='28.1444' stroke='white' stroke-width='1.62985' /%3E%3Cline id='Line 5' x1='0.806641' y1='14.5298' x2='59.4813' y2='14.5298' stroke='white' stroke-width='1.62985' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.link-with-arrow.link-down::after {
  grid-area: unset;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  width: 100%;
}

/* Marquee */
.marquee {
  --marquee-gap: 1.5rem;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--marquee-gap);
}

.marquee.marquee-fade {
  --mask-image: linear-gradient(to right, transparent 1rem, black 4rem);
  --webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
}

.marquee-content {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--marquee-gap);

  will-change: transform;
  backface-visibility: hidden;
  animation: marquee var(--marquee-duration, 12s) linear infinite;
}

.marquee-image img {
  width: 10rem;
  height: 10rem;
  object-fit: contain;
}

.marquee-svg {
  height: 100%;
}

.marquee svg.icon-arrow-right {
  display: block;
  
  --arrow-width: 2.7rem;
  --arrow-aspect-ratio: calc(127 / 61);
  width: var(--arrow-width);
  height: calc(var(--arrow-width) / var(--arrow-aspect-ratio));

  object-fit: contain;
  object-position: center;
}

.marquee-for-brands {
  padding-top: var(--umg-for-gap);
  padding-bottom: var(--umg-for-gap);
  height: 100%;
  display: grid;
  grid-template-columns: min-content 1fr;

  gap: 0.25rem;
}

.marquee-for-brands .marquee-for {
  z-index: 1;
}

.marquee-for-brands .marquee-svg {
  display: grid; /* Fixes weird Safari svg issue */
}

.marquee-for-brands svg {
  height: 100%;
  width: auto;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100% - var(--marquee-gap)));
  }
}

/** Logo culture animation */
.logo-culture-animated {
  mix-blend-mode: lighten;

  position: relative;
  z-index: 1;
}

.logo-culture-animated img {
  width: 100%;
  height: auto; 
}

/** Shareaholic embed */
.shareaholic-buttons-wrapper {
  padding-top: var(--wp--preset--spacing--60) !important;
}

.shareaholic-canvas[data-app="share_buttons"] {
  /* Prevent font size affecting embed size */
  display: flex;

  /* This should be the exact height, to prevent layout jiggle */
  min-height: var(--form-control--height);
}

.shareaholic-canvas[data-app="share_buttons"] .shareaholic-share-buttons-container {
  /* Prevent font size affecting embed size */
  display: flex;
}

.shareaholic-resolved-canvas {
  animation: animate-block-up 1s ease-out;
  animation-fill-mode: both;
}

.shareaholic-canvas .shareaholic-share-button:not(.shareaholic-share-button-all) {
  display: none !important;
}

.shareaholic-canvas .shareaholic-service-all::before {
  /* Remove existing */
  content: unset !important;
}

.shareaholic-canvas .shareaholic-service-all::after {
  content: 'Share';
  text-transform: uppercase;
}

.shareaholic-share-button-counter {
  display: none !important;
}

.shareaholic-share-buttons-container li.shareaholic-share-button.shareaholic-share-button {
  padding: 0 !important;
}

/* General layout */
.responsive-columns {
  display: flex;
  flex-direction: column;
}

@media (min-width: 782px) {
  .responsive-columns {
    flex-direction: row;
    gap: var(--column-gap);
  }
  
  .responsive-columns .responsive-column {
    flex: 1 1 50%;
  }
}

hr {
  border-top: var(--hr-separator);
  border-bottom: 0;
}

.separator-top::before,
.separator-bottom::after {
  content: '';
  display: var(--hr-separator-display);
  border-top: var(--hr-separator);
}

.separator-top::before {
  margin-bottom: var(--wp--preset--spacing--70);
}

.separator-bottom::after {
  margin-top: var(--wp--preset--spacing--70);
}

/* Utilities */
.flex-fill {
  flex: 1 1 auto;
}

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

.flex-reverse {
  flex-direction: row-reverse;
}

.grid-distribute-content {
  align-content: space-between;
}

.text-align-right {
  text-align: right;
}

.text-serif-italic {
  font-family: var(--wp--preset--font-family--font-serif);
  font-style: italic;
  font-weight: 400;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

b, strong {
  /* This is undoing a modern-normalize thing where it sets it to 'stronger' */
  font-weight: bold;
}

blockquote {
  /* Reset browser styles */
  margin-left: 0;
  margin-right: 0;
}

.prevent-margin-collapse-top::before,
.prevent-margin-collapse-bottom::after {
  content: ' ';
  display: table;
}

.no-wrap {
  flex-wrap: nowrap !important;
}

.row-gap-0 {
  row-gap: 0 !important;
}

.row-gap-20 {
  row-gap: var(--wp--preset--spacing--20) !important;
}

.row-gap-30 {
  row-gap: var(--wp--preset--spacing--30) !important;
}

.row-gap-40 {
  row-gap: var(--wp--preset--spacing--40) !important;
}

.row-gap-50 {
  row-gap: var(--wp--preset--spacing--50) !important;
}

.row-gap-60 {
  row-gap: var(--wp--preset--spacing--60) !important;
}

.row-gap-70 {
  row-gap: var(--wp--preset--spacing--70) !important;
}

.row-gap-80 {
  row-gap: var(--wp--preset--spacing--80) !important;
}

.gap-20 {
  gap: var(--wp--preset--spacing--20) !important;
}

.gap-30 {
  gap: var(--wp--preset--spacing--30) !important;
}

.gap-40 {
  gap: var(--wp--preset--spacing--40) !important;
}

.gap-50 {
  gap: var(--wp--preset--spacing--50) !important;
}

.gap-60 {
  gap: var(--wp--preset--spacing--60) !important;
}

.gap-70 {
  gap: var(--wp--preset--spacing--70) !important;
}

.gap-80 {
  gap: var(--wp--preset--spacing--80) !important;
}

/** Wordpress customisation */
#wpadminbar {
  overflow: hidden;
}

#wpadminbar #wp-admin-bar-comments {
  display: none !important;
}

/** Stop admin bar items from overflowing */
@media (max-width: 781px) {
  #wpadminbar #wp-admin-bar-duplicate-post {
    display: none !important;
  }
}

.wp-block-quote {
  font-weight: 100;
  line-height: 1;
}

.wp-block-separator:not(.is-style-wide) {
  border-top-width: 1px;
  border-bottom-width: 0 !important;
}

/** Make smaller images fill correctly */
.wp-block-image.size-full > img {
  width: 100%;
}

/** Fix inconsistency in older Wordpress */
.wp-block-quote > p {
  margin: 0 !important;
}

.wp-block-columns.is-layout-flex.is-layout-flex {
  column-gap: var(--column-gap);
}

/** Remove leading/trailing padding on stacked columns */
@media (max-width: 781px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:first-child {
    padding-top: 0 !important;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:last-child {
    padding-bottom: 0 !important;
  }
}

/** Fix a style conflict where a full-width group doesn't apply padding correctly */
.wp-block-group.has-global-padding {
  padding-right: var(--wp--style--root--padding-right) !important;
  padding-left: var(--wp--style--root--padding-left) !important;
}

.wp-block-details {
  border: 1px solid currentColor;
  border-left: none;
  border-right: none;

  /* Padding on children rather than parent to maximise clickable area */
  --details-padding: 0.25rem;

  --details-gap: var(--wp--preset--spacing--40);
}

.wp-block-details + .wp-block-details {
  border-top: none;
  margin-top: 0 !important;
}

.wp-block-details > * {
  padding-left: var(--details-padding);
  padding-right: var(--details-padding);

  margin-top: var(--details-gap);
}

.wp-block-details > summary {
  padding-top: var(--details-padding);
  padding-bottom: var(--details-padding);
}

.wp-block-details[open] > summary {
  margin-bottom: calc((-1 * (var(--details-padding) + var(--details-gap))) + var(--wp--preset--spacing--20));
}

.wp-block-details > *:last-child {
  padding-bottom: var(--details-gap);
}

.wp-block-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;

  list-style: none;
  user-select: none;

  font-size: var(--font-size--large);
  font-weight: bold;
  text-transform: uppercase;
}

@media (min-width: 782px) {
  .wp-block-details summary {
    font-size: var(--font-size--x-large);
  }
}

.wp-block-details summary::after {
  content: '';
  --size: 18px;
  width: var(--size);
  height: var(--size);

  margin-right: var(--wp--preset--spacing--40);
  
  -webkit-mask-image: url('data:image/svg+xml, <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="16.5483" y1="32" x2="16.5483" stroke="white" stroke-width="2"/><line x1="32" y1="16.4839" x2="-8.74228e-08" y2="16.4839" stroke="white" stroke-width="2"/></svg>');
  mask-image: url('data:image/svg+xml, <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="16.5483" y1="32" x2="16.5483" stroke="white" stroke-width="2"/><line x1="32" y1="16.4839" x2="-8.74228e-08" y2="16.4839" stroke="white" stroke-width="2"/></svg>');
  mask-size: cover;

  background-image: linear-gradient(currentColor, currentColor);
  background-size: cover;

  transition: transform 0.3s;
}

.wp-block-details[open] summary:after {
  transform: rotate(-45deg);
}

.wp-block-details summary::-webkit-details-marker {
  display: none
}

.wp-block-details summary::marker {
  list-style: none;
}

/** Animations **/
.animation-reset {
  animation: none !important;
  --animation: none !important;
}

.animation-pause {
  animation-play-state: paused !important;
  --animation-play-state: paused !important;
}

.animate-faster {
  animation-duration: 0.5s !important;
}

.animation-stagger-fast {
  --animation-delay: 0.5s;
}

.animate-text-in {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  
  animation: animate-text-in 1s ease-in;
  animation-fill-mode: both;
  animation-delay: var(--animation-delay, 0);
}

@keyframes animate-text-in {
  from {
    background-size: 0% 100%;
  }

  to {
    background-size: 100% 100%;
  }
}

.animate-block-up {
  animation: animate-block-up 1s ease-out;
  animation-fill-mode: both;
  animation-delay: var(--animation-delay, 0);
}

@keyframes animate-block-up {
  from {
    opacity: 0;
    transform: translateY(min(50%, 2rem));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-block-left {
  animation: animate-block-left 1s ease-out;
  animation-fill-mode: both;
  animation-delay: var(--animation-delay, 0);
}

@keyframes animate-block-left {
  from {
    opacity: 0;
    transform: translateX(2rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in {
  animation: animate-fade-in 1s ease-out;
  animation-fill-mode: both;
  animation-delay: var(--animation-delay, 0);
}

@keyframes animate-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.animate-slide-out {
  animation: animate-slide-out 0.5s ease-in;
  animation-fill-mode: both;
  animation-delay: var(--animation-delay, 0);
}

@keyframes animate-slide-out {
  from {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  to {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}