@layer normalize, typography, base, spacing, rte, layout, components, blocks, sections, utility;

/* @@ ROOT VARIABLES */
:root {
  --header-height: 100px;
  --pw-spacing: 1rem;
  --section-spacing: 3rem;
  
  /* ## colors */
  --color-white: #FFFBF2;
  --color-dark-white: #e7dcc5;
  --color-yellow: #fdf3c6;
  --color-dark-yellow: #efd776;
  --color-blue: #cbe2fd;
  --color-dark-blue: #93bfef;
  --color-brown: #574635;
  --color-dark-brown: #3c3126;
  --color-green: #52553e;
  --color-dark-green: #3b3e27;

  /* animation */
  --transition-hover: 800ms cubic-bezier(0.19,1,0.22,1);
}

@media (min-width: 980px) {
  :root {
    --header-height: 115px;
    --pw-spacing: 3rem;
    --section-spacing: 8rem;
  }
}

/* @@ NORMALIZE */
@layer normalize {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
    min-height: 0;
  }

  body {
    line-height: 1;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  span,
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: inherit;
    overflow-wrap: break-word;
    font-weight: inherit;
  }

  p {
    text-wrap: pretty;
    line-height: 1.55;
  }

  ol,
  ul {
    list-style: none;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button {
    -webkit-appearance: none;
    border-radius: 0;
    text-align: inherit;
    background: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    border: none;
    color: inherit;
    font: inherit;
  }

  svg {
    /* Bug(Old Safari): SVG incorrect placement */
    -webkit-transform: translate(0px, 0px);
  }

  select {
    /* Reset appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Reset box model */
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    outline: none;
    background: none;

    /* Reset typography */
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;

    /* Misc */
    cursor: pointer;
    box-shadow: none;
  }
}


/* @@ TYPOGRAPHY */
@layer typography {
  @font-face {
    font-family: 'ClashDisplay';
    src: url('../fonts/ClashDisplay.woff2') format('woff2'),
        url('../fonts/ClashDisplay.woff') format('woff'),
        url('../fonts/ClashDisplay.ttf') format('truetype');
    font-weight: 200 700;
    font-display: swap;
    font-style: normal;
  }

  @font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat.woff2') format('woff2'),
        url('../fonts/Montserrat.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
  }

  @font-face {
    font-family: 'Montserrat-Italic';
    src: url('../fonts/Montserrat-Italic.woff2') format('woff2'),
        url('../fonts/Montserrat-Italic.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
    font-style: italic;
  }

  body {
    font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
  }

  /* ## headers */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h0,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    font-family: "ClashDisplay", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    line-height: 1;
    letter-spacing: normal;
    hyphens: auto;
  }

  h1:not(:only-child),
  h2:not(:only-child),
  h3:not(:only-child),
  h4:not(:only-child),
  h5:not(:only-child),
  h6:not(:only-child),
  .h0:not(:only-child),
  .h1:not(:only-child),
  .h2:not(:only-child),
  .h3:not(:only-child),
  .h4:not(:only-child),
  .h5:not(:only-child),
  .h6:not(:only-child) {
    margin-bottom: 0.5em;
  }

  .h0 {
    font-size: 4.5rem;
  }

  h1,
  .h1 {
    font-size: 3.5rem;
  }

  h2,
  .h2 {
    font-size: 2.5rem;
  }

  h3,
  .h3 {
    font-size: 2rem;
  }

  h4,
  .h4 {
    font-size: 1.75rem;
  }

  h5,
  .h5 {
    font-size: 1.25rem;
  }

  h6,
  .h6 {
    font-size: 1rem;
  }


  /* ## labels */
  .l1,
  .l2,
  .l3 {
    font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
  }

  .l1 {
    font-size: 1.75rem;
  }
  
  .l2 {
    font-size: 1.25rem;
  }
  
  .l3 {
    font-size: 1.1rem;
  }
  
  @media (min-width: 980px) {
    .h0 {
      font-size: 6rem;
    }

    h1,
    .h1 {
      font-size: 4.5rem;
    }
  
    h2,
    .h2 {
      font-size: 3.5rem;
    }
  
    h3,
    .h3 {
      font-size: 2.5rem;
    }

    .l1 {
      font-size: 2rem;
    }

    .l2 {
      font-size: 1.5rem;
    }

    .l3 {
      font-size: 1.25rem;
    }
  }


  /* ## miscellaneous */
  .alt-text {
    padding-top: 0.5rem;
    color: var(--color-tertiary);
    font-style: italic;
  }
}


/* @@ BASE */
@layer base {
  body {
    background-color: var(--color-white);
  }

  /* ## color themes */
  .color-theme-section {
    color: var(--color-primary);
    background-color: var(--color-secondary);
  }

  [data-color-theme="white-brown"] {
    --color-primary: var(--color-white);
    --color-secondary: var(--color-brown);
    --color-tertiary: var(--color-dark-white);
    --color-quaternary: var(--color-dark-brown);
  }

  [data-color-theme="white-green"] {
    --color-primary: var(--color-white);
    --color-secondary: var(--color-green);
    --color-tertiary: var(--color-dark-white);
    --color-quaternary: var(--color-dark-green);
  }

  [data-color-theme="yellow-brown"] {
    --color-primary: var(--color-yellow);
    --color-secondary: var(--color-brown);
    --color-tertiary: var(--color-dark-yellow);
    --color-quaternary: var(--color-dark-brown);
  }

  [data-color-theme="yellow-green"] {
    --color-primary: var(--color-yellow);
    --color-secondary: var(--color-green);
    --color-tertiary: var(--color-dark-yellow);
    --color-quaternary: var(--color-dark-green);
  }

  [data-color-theme="blue-brown"] {
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-brown);
    --color-tertiary: var(--color-dark-blue);
    --color-quaternary: var(--color-dark-brown);
  }

  [data-color-theme="brown-white"] {
    --color-primary: var(--color-brown);
    --color-secondary: var(--color-white);
    --color-tertiary: var(--color-dark-brown);
    --color-quaternary: var(--color-dark-white);
  }

  [data-color-theme="brown-yellow"] {
    --color-primary: var(--color-brown);
    --color-secondary: var(--color-yellow);
    --color-tertiary: var(--color-dark-brown);
    --color-quaternary: var(--color-dark-yellow);
  }

  [data-color-theme="brown-blue"] {
    --color-primary: var(--color-brown);
    --color-secondary: var(--color-blue);
    --color-tertiary: var(--color-dark-brown);
    --color-quaternary: var(--color-dark-blue);
  }

  [data-color-theme="green-white"] {
    --color-primary: var(--color-green);
    --color-secondary: var(--color-white);
    --color-tertiary: var(--color-dark-green);
    --color-quaternary: var(--color-dark-white);
  }

  [data-color-theme="green-yellow"] {
    --color-primary: var(--color-green);
    --color-secondary: var(--color-yellow);
    --color-tertiary: var(--color-dark-green);
    --color-quaternary: var(--color-dark-yellow);
  }

  /* ## wp menu */
  .wp-nav-menu a {
    transition: opacity var(--transition-hover);
  }

  .wp-nav-menu:has(.menu-item:hover) .menu-item:not(:hover) a {
    opacity: 0.5;
  }

  .current-menu-item {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 0.05em;
  }

  /* ## the header */
  .the-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
  }

  .the-header-banner {
    transition: background-color var(--transition-hover);
  }

  .the-header-banner .banner-string {
    transition: color var(--transition-hover);
  }

  .the-header-banner-btn {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 37px;
    height: 37px;
    padding: 0.5rem;
    background-color: var(--color-secondary);
    transition: background-color var(--transition-hover);
  }

  .the-header-banner-btn svg {
    width: 100%;
    height: auto;
  }
  
  .the-header-row {
    display: grid;
    grid-template-columns: 1fr auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .the-header-logo,
  .the-header .language-picker,
  .the-header-menu-btn {
    flex-grow: 1;
  }

  .the-header .language-picker,
  .the-header-menu-btn {
    display: flex;
    justify-content: flex-end;
  }

  .the-header-navigation {
    flex-shrink: 0;
    display: flex;
    gap: 0.25rem;
    align-items: center;
  }

  .the-header-menu {
    display: flex;
    gap: 0;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    border: var(--color-primary) 2px solid;
    background-color: var(--color-primary);
    transition: border var(--transition-hover), background-color var(--transition-hover);
  }
  
  .the-header-logo {
    color: var(--color-primary);
    transition: color var(--transition-hover);
    padding: 1rem 0;
    display: flex;
    justify-content: flex-start;
  }

  .the-header-logo svg {
    width: 8rem;
    height: auto;
  }
  
  @media (min-width: 480px) {
    .the-header-logo svg {
      width: 10rem;
    }
  }

  .language-picker-icon {
    width: 1.15rem;
    height: auto;
  }

  .language-picker-select {
    text-align: center;
    text-transform: capitalize;
    font-size: 14px;
  }

  @media (min-width: 980px) {
    .the-header-row {
      grid-template-columns: 1fr auto 1fr;
    }
  }


  /* ## the menu */
  .the-menu-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    height: 100%;
  }

  .the-menu-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    overflow-y: scroll;
    flex-grow: 1;
  }

  .the-menu-btn {
    flex-shrink: 0;
  }
  
  .the-menu-btn,
  .the-menu-close-btn {
    transform: scale(0);
    transform-origin: center;
  }
  
  .open-modal .the-menu-btn,
  .open-modal .the-menu-close-btn {
    transform: scale(1);
    transition: transform var(--transition-hover) 450ms;
  }

  .the-menu-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .the-menu-contact .wp-nav-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .the-menu-menu,
  .the-menu-contact {
    opacity: 0;
    transform: translateY(10%);
  }

  .open-modal .the-menu-menu,
  .open-modal .the-menu-contact {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--transition-hover) 450ms, transform var(--transition-hover) 450ms;
  }

  .the-menu-contact-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
  }


  /* ## the footer */
  .the-footer {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .the-footer-grid {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .the-footer-some {
    grid-area: 1 / 3 / 6 / 4;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    padding: 0 0 0 2rem;
  }

  .the-footer-logo {
    grid-area: 1 / 2 / 2 / 3;
  }

  .the-footer-logo svg {
    width: 4rem;
    height: auto;
    margin-bottom: 2rem;
  }

  .the-footer-row {
    grid-area: 2 / 2 / 3 / 3;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 4rem;
    gap: 6rem;
  }
  
  .the-footer-row-row {
    display: flex;
    gap: 2rem 4rem;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .the-footer-description {
    flex-shrink: 1;
    max-width: 32rem;
  }

  .the-footer-contact,
  .the-footer-navigation,
  .the-footer-opening-hours {
    flex-shrink: 0;
  }

  .the-footer-bottom {
    grid-area: 5 / 2 / 6 / 5;
    font-size: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .the-footer-menu {
    --gap: 0.2rem;
  }

  .the-footer-some a {
    text-transform: capitalize;
    writing-mode: sideways-rl;
  }

  .the-footer-weekday-name {
    text-transform: capitalize;
  }
  
  @media (min-width: 480px) {
    .the-footer-description {
      font-size: 1.25rem;
    }

    .the-footer-some {
      grid-area: 1 / 1 / 6 / 2;
      padding: 0 4rem 0 0;
    }

    .the-footer-some a {
      writing-mode: sideways-lr;
    }

    .the-footer-logo svg {
      width: 6rem;
      margin-bottom: 4rem;
    }
  }

  @media (max-width: 979px) {
    .the-footer-row {
      flex-wrap: wrap;
    }

    .the-footer-description,
    .the-footer-row-row {
      flex: 0 0 100%;
    }

    .the-footer-row-row {
      justify-content: space-between;
    }
  }
  
  @media (min-width: 980px) {
    .the-footer {
      padding-top: 6rem;
    }
  }
}


/* @@ SPACING */
@layer spacing {
  /* ## padding */
  .pt-2 {
    padding-top: 2rem;
  }

  .pt-4 {
    padding-top: 4rem;
  }

  .pb-2 {
    padding-bottom: 2rem;
  }

  .py-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .py-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .py-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }


  /* ## margin */
  .mt-1 {
    margin-top: 1rem;
  }

  .mt-15 {
    margin-top: 1.5rem;
  }

  .mt-2 {
    margin-top: 2rem;
  }
  
  .my-2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .mb-1 {
    margin-bottom: 1rem;
  }

  .mb-15 {
    margin-bottom: 1.5rem;
  }

  .mb-2 {
    margin-bottom: 2rem;
  }

  /* ## gap */
  .gap-0\.2 {
    --gap: 0.2rem;
  }

  .gap-0\.5 {
    --gap: 0.5rem;
  }

  .gap-1 {
    --gap: 1rem;
  }

  .gap-2 {
    --gap: 2rem;
  }
}


/* @@ RTE */
@layer rte {
  .rte > * + * {
      margin-top: 1rem;
  }

  .rte h2 { 
    margin-top: 4rem; 
    margin-bottom: 1.5rem;
  }

  .rte h3 { 
    margin-top: 2.5rem; 
  }

  .rte figure,
  .rte blockquote,
  .rte img {
    margin: 2rem 0;
  }

  .rte p { 
    line-height: 1.6; 
  }

  .ul,
  .rte ul {
    list-style: none;
    padding-left: 1.5em;
  }

  .ul li,
  .rte ul li {
    position: relative;
    margin: 0;
  }

  .ul li::before,
  .rte ul li::before {
    content: '';
    position: absolute;
    left: -1.2em;
    top: 0.525em;
    width: 0.5em;
    height: 0.5em;
    border: 1.5px solid currentColor;
    background-color: transparent;
    transform: rotate(45deg);
    line-height: var(--line-height-2);
  }

  .rte ol {
    list-style-type: decimal;
  }

  .rte ul,
  .rte ol {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 1.25rem;
    margin: 2rem 0;
    line-height: var(--line-height-2);
  }

  .rte img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .rte figure {
    text-align: center;
  }

  .rte figcaption {
    font-size: 0.875rem;
    margin-top: 0.5rem;
  }

  .rte blockquote {
    border-left: 4px solid var(--color-black);
    padding: 1rem 0 1rem 2rem;
    font-style: italic;
  }

  .rte .gallery {
    display: grid;
    grid-template-columns: repeat(var(--columns, 1), 1fr);
    gap: 1rem;
  }

  @media (min-width: 980px) {
    .rte .gallery-columns-1 {
      --columns: 1;
    }
  
    .rte .gallery-columns-2 {
      --columns: 2;
    }
  
    .rte .gallery-columns-3 {
      --columns: 3;
    }
  
    .rte .gallery-columns-4,
    .rte .gallery-columns-5,
    .rte .gallery-columns-6,
    .rte .gallery-columns-7,
    .rte .gallery-columns-8,
    .rte .gallery-columns-9 {
      --columns: 4;
    }
  }
}


/* @@ LAYOUT */
@layer layout {
  /* ## blocks */
  .block {
    display: block;
  }

  .inline-block {
    display: inline-block;
  }


  /* ## wrapper */
  .pw\:wrapper {
    padding: 0 var(--pw-spacing);
    margin: 0 auto;
    max-width: 120rem;
  }


  /* ## rows */
  .row,
  .spaced\:row {
    display: flex;
    align-items: center;
    gap: var(--gap, 1.5rem);
  }

  .spaced\:row {
    justify-content: space-between;
  }

  .auto\:row-item {
    flex: 0 0 auto;
  }

  .fill\:row-item {
    flex: 1 0 auto;
  }


  /* ## column */
  .column {
    display: flex;
    flex-direction: column;
    gap: var(--gap, 1.5rem);
  }


  /* ## grid */
  .grid {
    display: grid;
    gap: var(--gap, 1rem);
    grid-template-columns: repeat(12, 1fr);
  }

  .clmns-6\/12 {
    grid-column: auto / span 6;
  }

  .clmns-12\/12 {
    grid-column: auto / span 12;
  }
  
  @media (max-width: 979px) {
    .mobile\:clmns-first {
      grid-column-start: 1;
      grid-row-start: 1;
    }
  }

  @media (min-width: 980px) {
    .laptop\:clmns-3\/12 {
      grid-column: auto / span 3;
    }

    .laptop\:clmns-4\/12 {
      grid-column: auto / span 4;
    }

    .laptop\:clmns-6\/12 {
      grid-column: auto / span 6;
    }

    .laptop\:clmns-8\/12 {
      grid-column: auto / span 8;
    }

    .laptop\:clmns-first {
      grid-column-start: 1;
      grid-row-start: 1;
    }

    .laptop\:start-clmn-3 {
      grid-column-start: 3;
    }
  }

  @media (min-width: 1440px) {
    .desktop\:clmns-6\/12 {
      grid-column: auto / span 6;
    }

    .desktop\:start-clmn-4 {
      grid-column-start: 4;
    }
  }
}


/* @@ COMPONENTS */
@layer components {
  /* ## language picker */
  .language-picker {
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    transition: color var(--transition-hover);
    gap: 0.5rem;
  }


  /* ## banner */
  .banner,
  .small\:banner {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .small\:banner {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* 
  *:hover > .banner .banner-scroll-track {
    animation-play-state: paused;
  } */
  
  .small\:banner:hover .banner-scroll-track {
    animation-play-state: paused;
  }
  
  .banner.active,
  .small\:banner.active {
    transition: opacity var(--transition-hover) 100ms;
    opacity: 1;
  }

  .banner.active .banner-blueprint,
  .small\:banner.active .banner-blueprint {
    display: none;
  }

  .banner-track {
    display: flex;
    font-size: 2rem;
    font-weight: 400;
    font-family: "ClashDisplay", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  }

  .small\:banner .banner-track {
    font-size: 14px;
  }

  .banner-scroll-track {
    display: flex;
    flex-shrink: 0;
    white-space: nowrap;
    will-change: transform;
    animation: infinity-scroll infinite linear;
    padding-right: 8rem;
    gap: 8rem;
  }

  .small\:banner .banner-scroll-track {
    padding-right: 33vw;
    gap: 33vw;
  }

  @media (min-width: 980px) {
    .banner {
      padding-top: 2.5rem;
      padding-bottom: 2.5rem;
    }
    
    .banner-track {
      font-size: 3rem;
    }

    .banner-scroll-track {
      padding-right: 16rem;
      gap: 16rem;
    }
  }

  @keyframes infinity-scroll {
    from { transform: translateX(0%); }
    to { transform: translateX(-100%); }
  }

  /* ## accordion */
  .accordion,
  .accordion__item {
    display: flex;
    flex-direction: column;
  }
  
  .accordion {
    gap: 0.5rem;
  }

  .accordion__item {
    /* gap: 0.5rem; */
    padding: 1rem 1.75rem;
    border-radius: 1rem;
    color: var(--color-secondary);
    background-color: var(--color-primary);
    transition: background-color var(--transition-hover);
  }

  .accordion__item:hover {
    background-color: var(--color-tertiary);
  }

  .accordion__header {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin: 0;
    padding: 0.5rem 0;
  }

  .accordion__title {
    font-size: inherit;
    margin: 0;
    line-height: 1.2;
  }

  .accordion__icon {
    width: 1em;
    height: auto;
    flex-shrink: 0;
  }

  .accordion__item[data-is-open="true"] .accordion__icon {
    transform: rotate(180deg);
  }

  .accordion__drawer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-hover);
  }

  .accordion__item[data-is-open="true"] .accordion__drawer {
    grid-template-rows: 1fr;
  }

  .accordion__content {
    overflow: hidden;
  }

  .accordion__text {
    padding: 1rem 0;
  }


  /* ## pagination */
  .pagination {
    margin-top: 2.5rem;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .pagination .current {
    font-weight: 700;
  }

  .pagination .page-numbers:not(.next, .prev) {
    border-radius: 999px;
    width: 44px;
    height: 44px;
  }

  .page-numbers.current {
    font-weight: 500;
  }

  /* ## badges */
  .badges {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    z-index: 1;
    padding: 0.5rem;
  }

  .badge {
    display: block;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    color: var(--color-white);
    background-color: var(--color-black);
  }


  /* ## buttons */
  .btn,
  .small\:btn,
  .the-header-menu li a,
  .page-numbers {
    display: inline-flex;
    gap: 0.5em;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    /* border-radius: 1em; */
    color: var(--color-secondary);
    padding: 1.15em 1.65em;
    text-align: center;
    background-color: var(--color-primary);
    transition: transform var(--transition-hover), background-color var(--transition-hover);
  }

  .small\:btn,
  .the-header-menu li a,
  .page-numbers {
    font-size: 14px;
    padding: 0.8em 1.25em;
  }

  .btn.cta,
  .small\:btn.cta,
  .the-header-menu li.current-menu-item a,
  .page-numbers.current {
    background-color: var(--color-tertiary);
  }

  .btn.cta:hover,
  .small\:btn.cta:hover,
  .the-header-menu li a:hover,
  .page-numbers:hover {
    background-color: var(--color-primary);
  }

  .btn:hover,
  .small\:btn:hover,
  .the-header-menu li a:hover,
  .page-numbers:hover {
    background-color: var(--color-tertiary, var(--color-dark-main));
  }

  .btn:active,
  .small\:btn:active,
  .the-header-menu li a:active,
  .page-numbers:active {
    transform: scale(0.975);
  }

  .btn-icon {
    width: 1.25em;
  }

  .btn-icon svg {
    width: 100%;
    height: auto;
  }
  
  .btn select,
  .small\:btn select {
    position: relative;
    z-index: 1;
    text-align: center;
  }

  .txt\:btn {
    text-decoration: underline;
    text-underline-offset: 0.3em;
  }

  .btn,
  .txt\:btn {
    flex: 0 0 auto;
  }

  .icon\:btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
  }

  .icon\:btn svg {
    width: 100%;
    height: auto;
  }


  /* ## modal */
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
  }
 
  .modal:not(.display-modal) {
    display: none;
  }

  .modal::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition: opacity 500ms ease-in-out;
  }

  .modal.open-modal::before {
    opacity: 1;
  }

  .modal-inner {
    position: absolute;
    color: var(--color-primary);
    background-color: var(--color-secondary);
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 480px;
    transform: translateX(101%);
    transition: transform 700ms ease-in-out;
    padding: var(--pw-spacing);
    --gap: 2rem;
  }

  .open-modal .modal-inner {
    transform: translateX(0%);
  }

  .modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .modal-content {
    padding: var(--pw-spacing) 0;
    flex: 1 0 auto;
    overflow-y: scroll;
  }


  /* ## ratio container */
  .ratio-container {
    position: relative;
    margin: 0 auto;
    max-width: var(--max-width, 100%);
  }

  .ratio-container::before {
    content: "";
    display: block;
    height: 0;
    width: 100%;
    padding-top: calc(var(--ratio-mobile, 1) * 100%);
  }

  .ratio-container-item {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--corners);
  }

  @media (min-width: 980px) {
    .ratio-container::before {
      padding-top: calc(var(--ratio-laptop, var(--ratio-mobile, 1)) * 100%);
    }
  }
}


/* @@ BLOCKS */
@layer blocks {
  /* ## card */
  .block-event-card-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    background-color: var(--color-quaternary);
  }

  .block-event-card-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    background-color: var(--color-primary);
    color: var(--color-secondary);
    padding: 1.25rem 1rem;
  }

  .block-event-card-date,
  .block-event-card-time {
    writing-mode: sideways-lr;
  }

  .block-event-card-text {
    padding: 2rem;
    max-width: 32rem;
  }

  .block-event-card-description {
    margin-top: 1rem;
  }

  .block-event-card-btn {
    margin-top: 1.5rem;
  }

  .block-event-card-date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-transform: capitalize;
  }

  .block-event-card-image .ratio-container {
    height: 100%;
  }

  @media (max-width: 479px) {
    .block-event-card-meta {
      grid-area: 2 / 1 / 3 / 2;
      padding: 0.75rem 0.5rem;
    }

    .block-event-card-text {
      grid-area: 2 / 2 / 3 / 3;
      padding: 2rem 1rem;
    }

    .block-event-card-image {
      grid-area: 1 / 1 / 2 / 3;
    }
  }

  @media (min-width: 480px) {
    .block-event-card-inner {
      grid-template-columns: auto 1fr 20rem;
    }
  }
}

/* @@ SECTIONS */
@layer sections {
  .section {
    margin: var(--section-spacing) 0;
  }

  .bg\:section {
    padding: var(--section-spacing) 0;
  }

  /* ## menu */
  .section-menu[data-background-color] {
    transition: background-color var(--transition-hover);
  }

  .section-menu[data-background-color="yellow"] {
    background-color: var(--color-yellow);
  }

  .section-menu[data-background-color="blue"] {
    background-color: var(--color-blue);
  }

  .section-menu .h3 {
    font-weight: 500;
  }

  .section-menu-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pw-spacing);
    align-items: start;
  }

  .section-menu-header {
    writing-mode: sideways-lr;
  }

  .section-menu-types {
    display: flex;
    flex-direction: column;
  }

  .section-menu-type {
    column-gap: calc(var(--pw-spacing) * 3);
  }

  .section-menu-type:not(:first-child) {
    padding-top: 6rem;
  }

  .section-menu-type:not(:last-child) {
    padding-bottom: 6rem;
  }
  
  .section-menu-type-item:not(:first-child) {
    margin-top: 3rem;
  }

  .section-menu-category:not(:first-child) {
    margin-top: 2rem;
  }

  .section-menu-category-heading {
    display: inline-block;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 0.75rem;
    font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  }

  .section-menu-product-heading,
  .section-menu-product-price {
    font-weight: 700;
  }

  .section-menu-products {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
  }

  .section-menu-product-main {
    grid-column: 1 / 2;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
  }

  .section-menu-product-description {
    margin-top: 4px;
    font-size: 14px;
    max-width: 400px;
  }

  .section-menu-product-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .section-menu-product-heading,
  .section-menu-product-variant-names {
    line-height: 1.2;
  }

  .section-menu-product-variant-names {
    font-size: 14px;
    font-weight: 500;
  }

  .section-menu-product-price {
	line-height: 1;
    grid-column: 2 / 3;
    justify-self: end;
  }

  @media (max-width: 979px) {
    .section-menu-header {
      padding-top: 6rem;
      padding-bottom: 2rem;
    }

    .section-menu-header .h0 {
      transform: translateX(-10%);
    }
  }

  @media (min-width: 980px) {
    .section-menu-main {
      grid-template-columns: auto 1fr;
    }

    .section-menu-types {
      grid-column-start: 2;
      grid-row-start: 2;
    }

    .section-menu-header {
      position: sticky;
      top: var(--header-height); 
    }

    .section-menu-type {
      column-count: 2;
      column-gap: calc(var(--pw-spacing) * 2);
    }
  }

  /* ## boardgames */
  .section-boardgames-filter {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .section-boardgames-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
  }

  [data-has-filters="true"] .section-boardgames-item:not(.active) {
    display: none;
  }

  .section-boardgames-filter-btn {
    text-transform: uppercase;
  }

  .section-boardgames-filter-btn,
  .section-boardgames-clear-filter-btn {
    min-width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    gap: 0.25rem;
    color: var(--color-primary);
    border: var(--color-primary) 1px solid;
    transition: color var(--transition-hover), background-color var(--transition-hover), transform var(--transition-hover);
  }

  .section-boardgames-filter-btn:hover,
  .section-boardgames-filter-btn.active,
  .section-boardgames-clear-filter-btn:hover {
    color: var(--color-secondary);
    background-color: var(--color-primary);
  }

  .section-boardgames-filter-btn:active,
  .section-boardgames-clear-filter-btn:active {
    transform: scale(0.975);
  }

  [data-clear-filters] {
    display: none;
    padding: 0 1rem;
  }

  [data-has-filters="true"] [data-clear-filters] {
    display: inline-flex;
  }

  .section-boardgames-items {
    padding-top: 2rem;
    column-width: 16rem;
    column-gap: 2rem;
  }

  .section-boardgames-item {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .section-boardgames-item:not(:last-child) {
    margin-bottom: 2rem;
  }

  .section-boardgames-item-title {
    text-transform: capitalize;
    margin: 0;
  }


  /* ## events */
  .section-events-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  /* ## faq */
  .section-faq-grid-item {
    grid-area: 1 / 1 / 2 / 13;
  }
  
  @media (min-width: 480px) {
    .section-faq-grid-item {
      grid-area: 1 / 2 / 2 / 12;
    }
  }

  @media (min-width: 980px) {
    .section-faq-grid-item {
      grid-area: 1 / 3 / 2 / 11;
    }
  }

  /* ## introduction */
  .section-introduction {
    position: relative;
    margin-bottom: calc(var(--section-spacing) * -1);
  }

  .section-introduction-logo-slide {
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    color: var(--color-secondary);
    background-color: var(--color-primary);
  }
  
  .section-introduction-logo-slide .grid {
    opacity: calc(1 - (var(--progress, 0) * 1.5));
    min-height: 100vh;
    align-items: center;
  }

  .section-introduction-logo {
    padding: 1.5rem;
    grid-area: 1 / 1 / 3 / 13;
    transform: scale(calc((1 - (var(--progress, 0) * 1.5))));
  }

  .section-introduction-logo svg {
    width: 100%;
    height: auto;
  }

  .section-introduction-aside {
    grid-area: 2 / -1 / 3 / -2;
    transform: translateX(calc(50vw * var(--progress, 0)));
  }

  .section-introduction-scroll {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }

  .section-introduction-scroll-label {
    writing-mode: sideways-rl;
  }

  .section-introduction-scroll-icon {
    overflow: hidden;
  }
  
  .section-introduction-scroll-icon svg {
    width: 1rem;
    height: auto;
    animation: scrollBounce 3s ease-in-out infinite;
  }

  @keyframes scrollBounce {
    0% { transform: translateY(0%); }
    20% { transform: translateY(-50%); }
    40% { transform: translateY(0%); }
    100% { transform: translateY(0%); }
  }
  
  .section-introduction-background-slide {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
  }

  .section-introduction-background-slide-background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-primary);
  }
  
  .section-introduction-background-slide-background::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-secondary);
    transform-origin: center;
    transform: scale(calc(var(--progress, 0) * 1.1));
  }

  @media (max-width: 979px) {
    .section-introduction .grid {
      grid-template-rows: 1fr auto;
      padding-bottom: 2rem;
    }
  }

  @media (min-width: 980px) {
    .section-introduction-logo {
      grid-area: 1 / 3 / 2 / 11;
    }

    .section-introduction-aside {
      grid-area: 1 / -1 / 2 / -2;
    }
  }

  /* ## 404 */
  .section-404 .grid {
    min-height: 75vh;
  }

  .section-404__content {
    display: flex;
    align-items: center;
  }


  /* ## post description */
  .section-post-description-items {
    display: flex;
    gap: 2rem;
  }

  .section-post-description-event-item,
  .section-post-description-description-item {
    flex: 1 1 100%;
  }

  @media (max-width: 979px) {
    .section-post-description-items {
      flex-direction: column;
    }
  }
  
  @media (min-width: 980px) {
    .section-post-description-items {
      gap: 4rem;
    }

    .section-post-description-event-item {
      flex: 0 0 auto;
      max-width: 400px;
    }
  }

  /* ## banner */
  .section-banner {
    color: var(--color-primary, var(--color-black));
    background-color: var(--color-secondary, var(--color-white));
  }

  /* ## text and image */
  /* ### layout 1 */
  .image\:one\:text-and-image-layout .text-and-image-layout-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .image\:one\:text-and-image-layout .text-and-image-layout-text > div {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }

  .image\:one\:text-and-image-layout .text-and-image-heading {
    grid-column: 1 / -2;
    margin-bottom: 4rem;
  }

  .image\:one\:text-and-image-layout .text-and-image-sub-heading {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
    writing-mode: sideways-lr;
    text-align: center;
    padding-right: var(--pw-spacing);
  }

  .image\:one\:text-and-image-layout .text-and-image-description,
  .image\:one\:text-and-image-layout .text-and-image-button {
    grid-column: 2 / -1;
  }

  .one\:text-and-image-layout .text-and-image-layout-text > div {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }

  .one\:text-and-image-layout .text-and-image-sub-heading {
    color: var(--color-tertiary);
  }

  .one\:text-and-image-layout .text-and-image-description,
  .one\:text-and-image-layout .text-and-image-button {
    grid-column-start: 2;
  }

  @media (max-width: 979px) {
    .image\:one\:text-and-image-layout .text-and-image-layout-wrapper {
      gap: 4rem;
    }

    .one\:text-and-image-layout .text-and-image-layout-text > div {
      padding: var(--section-spacing) 0;
    }

    .one\:text-and-image-layout .text-and-image-heading {
      grid-column: 1 / 6; 
      margin-bottom: 4rem;
    }

    .one\:text-and-image-layout .text-and-image-sub-heading {
      grid-row-start: 1;
      grid-column: 1 / 5;
      margin-bottom: 1rem; 
    }

    .one\:text-and-image-layout .text-and-image-description,
    .one\:text-and-image-layout .text-and-image-button {
      grid-column-end: -1;
    }

    .image\:one\:text-and-image-layout .text-and-image-layout-wrapper:has(.mobile\:image-first) {
      padding-top: var(--pw-spacing);
      padding-bottom: var(--section-spacing);
    }

    .image\:one\:text-and-image-layout .text-and-image-layout-wrapper:not(:has(.mobile\:image-first)) {
      padding-top: var(--section-spacing);
      padding-bottom: var(--pw-spacing);
    }
  }

  @media (min-width: 980px) {
    .image\:one\:text-and-image-layout .text-and-image-layout-wrapper {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
    }

    .image\:one\:text-and-image-layout .text-and-image-layout-text {
      grid-column: 1 / 8;
    }

    .image\:one\:text-and-image-layout .text-and-image-layout-image {
      grid-column: 8 / -1;
    }

    .one\:text-and-image-layout .text-and-image-sub-heading {
      align-self: end;
      padding-right: 4rem;
    }

    .one\:text-and-image-layout .text-and-image-layout-text > div {
      grid-template-columns: repeat(2, 1fr);
    }

    .one\:text-and-image-layout .text-and-image-description,
    .one\:text-and-image-layout .text-and-image-button {
      justify-self: end;
    }

    .one\:text-and-image-layout .text-and-image-heading {
      max-width: 448px;
      padding-right: 4rem;
    }

    .one\:text-and-image-layout .text-and-image-heading,
    .one\:text-and-image-layout .text-and-image-description {
      grid-row-start: 1;
    }

    .one\:text-and-image-layout .text-and-image-button {
      width: 100%;
    }
  }

  /* ### layout 2 */
  .two\:text-and-image-layout .text-and-image-layout-text > div {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .two\:text-and-image-layout {
    padding: var(--section-spacing) 0;
  }

  .image\:two\:text-and-image-layout .text-and-image-layout-wrapper {
    display: grid;
    grid-template-columns: 1fr;
  }

  .image\:two\:text-and-image-layout .text-and-image-layout-text > div {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .two\:text-and-image-layout .text-and-image-heading {
    grid-column: 1 / -1;
    margin-bottom: 10vh;
  }

  .two\:text-and-image-layout .text-and-image-sub-heading {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
    align-self: end;
    writing-mode: sideways-lr;
    padding-right: var(--pw-spacing);
  }

  .two\:text-and-image-layout .text-and-image-description,
  .two\:text-and-image-layout .text-and-image-button {
    grid-column: 2 / -1;
  }
  
  .image\:two\:text-and-image-layout .text-and-image-layout-text {
    padding: 0 var(--pw-spacing);
    max-width: 60rem;
  }

  .image\:two\:text-and-image-layout .text-and-image-sub-heading {
    grid-column: 2 / -1;
    grid-row: 1 / 4;
    writing-mode: sideways-rl;
    text-align: center;
    padding-left: var(--pw-spacing);
  }

  @media (max-width: 979px) {
    .two\:text-and-image-layout .text-and-image-layout-wrapper {
      padding-right: var(--pw-spacing); 
      padding-left: var(--pw-spacing); 
    }
    
    .two\:text-and-image-layout .text-and-image-layout-wrapper,
    .image\:two\:text-and-image-layout .text-and-image-layout-wrapper {
      gap: 2.5rem;
    }

    .image\:two\:text-and-image-layout .text-and-image-layout-wrapper:has(.mobile\:image-first) {
      padding-bottom: var(--section-spacing);
    }

    .image\:two\:text-and-image-layout .text-and-image-layout-wrapper:not(:has(.mobile\:image-first)) {
      padding-top: var(--section-spacing);
    }
  }
  
  @media (min-width: 980px) {
    .two\:text-and-image-layout .text-and-image-layout-text > div,
    .image\:two\:text-and-image-layout .text-and-image-layout-wrapper {
      grid-template-columns: repeat(2, 1fr);
    }

    .two\:text-and-image-layout .text-and-image-heading {
      grid-column: 1 / 2;
      margin-bottom: 15vh;
    }

    .two\:text-and-image-layout .text-and-image-description {
      grid-row-start: 2;
    }
    
    .two\:text-and-image-layout .text-and-image-button {
      grid-row-start: 3;
    }
    .two\:text-and-image-layout .text-and-image-description,
    .two\:text-and-image-layout .text-and-image-button {
      padding-left: 4rem;
    }

    .two\:text-and-image-layout {
      padding-bottom: var(--section-spacing) 0;
    }
  }

  /* ### layout 3 */
  .three\:text-and-image-layout .text-and-image-layout-wrapper,
  .image\:three\:text-and-image-layout .text-and-image-layout-wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    text-align: center;
  }

  .three\:text-and-image-layout .text-and-image-layout-text > div,
  .image\:three\:text-and-image-layout .text-and-image-layout-text > div {
    display: grid;
    grid-template-columns: 1fr;
  }

  .three\:text-and-image-layout .text-and-image-description,
  .image\:three\:text-and-image-layout .text-and-image-description {
    max-width: 40rem;
    margin: 0 auto;
  }

  .three\:text-and-image-layout .text-and-image-sub-heading,
  .image\:three\:text-and-image-layout .text-and-image-sub-heading {
    grid-row-start: 1;
    margin-bottom: 1rem;
  }

  .three\:text-and-image-layout .text-and-image-layout-text,
  .three\:text-and-image-layout .text-and-image-layout-image,
  .image\:three\:text-and-image-layout .text-and-image-layout-text,
  .image\:three\:text-and-image-layout .text-and-image-layout-image {
    grid-column: 1 / -1;
  }

  .three\:text-and-image-layout .text-and-image-layout-image,
  .image\:three\:text-and-image-layout .text-and-image-layout-image {
    margin-top: 2rem;
  }
	
  .three\:text-and-image-layout {
    padding: var(--section-spacing) 0;
  }

  @media (max-width: 979px) {
    .image\:three\:text-and-image-layout .text-and-image-layout-wrapper:has(.mobile\:image-first) {
      padding-bottom: var(--section-spacing);
    }

    .image\:three\:text-and-image-layout .text-and-image-layout-wrapper:not(:has(.mobile\:image-first)) {
      padding-top: var(--section-spacing);
    }
  }

  @media (min-width: 980px) {
    .three\:text-and-image-layout .text-and-image-layout-wrapper,
    .image\:three\:text-and-image-layout .text-and-image-layout-wrapper {
      gap: 2.5rem;
    }

    .three\:text-and-image-layout .text-and-image-layout-text,
    .three\:text-and-image-layout .text-and-image-layout-image,
    .image\:three\:text-and-image-layout .text-and-image-layout-text,
    .image\:three\:text-and-image-layout .text-and-image-layout-image {
      grid-column: 3 / span 8;
    }
  }

  /* ### all layouts */
  @media (max-width: 979px) {
    .text-and-image-layout-image.mobile\:image-first {
      grid-row-start: 1;
    }
  }

  @media (min-width: 980px) {
    .text-and-image-layout-image.laptop\:image-first {
      grid-row-start: 1;
      grid-column-start: 3;
    }

    .section-text-and-image {
      padding: var(--section-spacing) 0;
    }
  }

  /* ## archive */
  .archive-header {
    padding-top: var(--header-height);
    padding-bottom: 4rem;
    max-width: 52rem;
  }

  .arhive-no-results {
    padding: 3rem 0;
  }
}


/* @@ UTILITY */
@layer utility {
  /* ## sticky-top element */
  .top\:sticky {
    position: sticky;
    top: calc(var(--header-height, 0px) + var(--pw-spacing));
  }


  /* ## cover element */
  .contain {
    position: relative;
  }

  .cover {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }


  /* ## hide element */
  @media (max-width: 979px) {
    .handheld\:hidden {
      display: none;
    }
  }

  @media (max-width: 479px) {
    .mobile\:hidden {
      display: none;
    }
  }

  @media (min-width: 480px) {
    .mobile\:only {
      display: none;
    }
  }

  @media (min-width: 980px) {
    .laptop\:hidden {
      display: none;
    }
  }


  /* ## disable scroll */
  .disable-scroll {
    overflow: hidden;
  }
}