/*  ==========================================================
    BLOCKS
    ========================================================== */

/**
 * The block layer is where styles for specific components such as cards, avatars, and buttons are set up.
 * An example of a block is styles created for a team card element.
 *
 * # What should a block do?
 *   - Extend the work already done by the global CSS, composition and utility layers
 *   - Apply a collection of design tokens within a concise group
 *   - Create a namespace or specificity boost to control a specific context
 *
 * # What should NOT a block do
 *   - Grow to anything larger than a handful of CSS rules (max 80-100 lines)
 *   - Solve more than one contextual problem. For example: styling a card and a button in one file
 */
 
.eyebrow {
  position: relative;

  & + * {
    --flow-space: 0.1em;
  }
}

/** Btns and links style */
.btn {
  position: relative;
  display: block;
  max-inline-size: fit-content;
  padding: var(--space-2xs) var(--space-m);
  font-family: var(--accent-font);
  color: oklch(var(--color-dark));
  background-color: oklch(var(--color-light));
  text-decoration: none;
  text-transform: uppercase;
  border: 2px solid oklch(var(--color-primary));
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-around);
  cursor: pointer;
  transition:
    background-color var(--anim-fast),
    color var(--anim-fast),
    box-shadow var(--anim-fast);
  overflow: hidden;
  z-index: 2;

  --flow-space: 2em !important;
}

.btn:not(.btn-border):hover {
  background-color: oklch(var(--color-primary));
  color: oklch(var(--color-light));
  box-shadow: none;
}

.btn.btn-border {
  background: oklch(var(--color-dark) / 0.5);
  border: 2px solid oklch(var(--color-light));
  color: oklch(var(--color-light));
}

.btn-border:hover {
  background-color: oklch(var(--color-light));
  color: oklch(var(--color-dark));
}

.btn.btn-border.inverted {
  background-color: oklch(var(--color-light));
  border: 2px solid oklch(var(--color-light));
  color: oklch(var(--color-dark));
}

.btn-border.inverted:hover {
  background: oklch(var(--color-dark) / 0.5);
  color: oklch(var(--color-light));
}

.btn[disabled] {
  background: oklch(var(--color-dark) / 0.25);
  border: none;
  box-shadow: none;
  cursor: not-allowed;
  
  &:hover {
    background: oklch(var(--color-dark) / 0.25);
    box-shadow: none;
    color: currentColor;
  }
}

.ico-btn i {
  inline-size: 2em;
  aspect-ratio: 1;
  padding: 0.5em;
  background: oklch(var(--color-primary));
  border-radius: 50%;
  color: oklch(var(--color-light));
  font-size: var(--step-2);
}

*:has(.angled-divider) {
  position: relative;
}

.angled-divider {
  --_height: 22vb;

  position: absolute;
  bottom: calc(-1 * var(--_height));
  left: 0;
  inline-size: 100dvi;
  block-size: var(--_height);
  background: oklch(var(--color-light));
  transform: skewY(-6deg);
  transform-origin: top left;
  z-index: -1;
}

.cover,
.cover img {
  position: relative;
  block-size: 100%;
  z-index: -2;
}

.cover img {
  object-fit: cover;
}

.fixed-img {
  inline-size: 100dvi;
  block-size: 100dvb;
  background: fixed center/cover no-repeat;
  z-index: -3;
}

header {
  position: sticky;
  top: 0;
  background-color: oklch(var(--color-light));
  box-shadow: var(--shadow-basic);
  z-index: 10;
  isolation: isolate;

  --flex-justify-content: space-between;
}

/* Header menu */
.header-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25em;
}

#desktop-menu {
  display: none;
}

@media (min-width: 1180px) {
  #desktop-menu {
    display: grid !important;
  }

  #mobile-menu {
    display: none !important;
  }
}

.menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1em;
  z-index: 15;
}

.language-switcher {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;

  & .lang-list {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    gap: var(--inverse-clamp);
    padding: 1em;
    background-color: oklch(var(--color-light));
    clip-path: circle(0% at 50% 0%);

    & li {
      background-color: oklch(var(--color-dark) / 0.1);
      border-radius: var(--border-radius);
      box-shadow: var(--shadow-around);
      font-size: var(--step-2);
      text-align: center;

      & a {
        padding: 1em;
        transition-property: background-color, color;
        transition-duration: var(--anim-fast);

        &:hover {
          background-color: oklch(var(--color-primary) / 0.25);
          color: oklch(var(--color-light)) !important;
        }
      }

      &.active {
        background-color: oklch(var(--color-primary));

        & a {
          color: oklch(var(--color-light));
          text-decoration: none !important;

          &:hover {
            background-color: oklch(var(--color-primary) 34% c h);
          }
        }
      }
    }
  }
}

.lang-button {
  position: relative;
  background: none;
  padding: 1em;
  z-index: 1;
}

.header-logo,
.hamburger-menu {
  position: relative;
  width: fit-content;
  z-index: 15;
}

.header-logo img,
.footer-logo img {
  block-size: var(--space-2xl);
}

/* Hamburger menu */
.hamburger-menu {
  justify-self: end;
  align-self: center;
  cursor: pointer;
}

.hamburger-menu span {
  --inline-size: 2rem;
  --block-size: 2px;
  --space: 6px;

  display: block;
  inline-size: var(--inline-size);
  block-size: var(--block-size);
  background: oklch(var(--color-primary));
  border-radius: 2px;
  transition: all var(--anim-fast);
}

.hamburger-menu > span + span {
  margin-block-start: var(--space);
}

.hamburger-menu span:nth-of-type(2) {
  inline-size: calc(var(--inline-size) * 0.75);
}

.hamburger-menu span:nth-of-type(3) {
  inline-size: calc(var(--inline-size) * 0.5);
}

/* Hamburger animation */
.hamburger-menu.active span {
  inline-size: var(--inline-size);
}

.hamburger-menu.active span:first-of-type {
  translate: 0 calc(var(--space) + var(--block-size));
  rotate: 45deg;
}

.hamburger-menu.active span:nth-of-type(2) {
  opacity: 0;
}

.hamburger-menu.active span:last-of-type {
  translate: 0 calc(-1 * (var(--space) + var(--block-size)));
  rotate: -45deg;
}

.hamburger-menu.active span:first-of-type {
  translate: 0 calc(var(--space) + var(--block-size));
}

.menu-container {
  position: fixed;
  inset: 0;
  padding-block-start: var(--space-4xl);
  padding-block-end: var(--space-4xl);
  display: none;
  translate: -100% 0;
  background: oklch(var(--color-light));
  z-index: 9;

  --flex-direction: column;
  --flex-gap: var(--space-2xl);

  & ul {
    height: 100%;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    gap: var(--inverse-clamp);

    & li {
      inline-size: 100%;
      border-radius: var(--border-radius);
      translate: -10% 0;
      opacity: 0;
      transition:
        background-color var(--anim-fast) ease,
        color var(--anim-fast) ease;

      & figure {
        border-radius: var(--border-radius);

        & img {
          max-block-size: var(--space-m);
        }
      }

      & a {
        inline-size: 100%;
        block-size: 100%;
        padding: 0.5em;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--step-2);
      }
    }

    & li:hover {
      background-color: oklch(var(--color-primary));

      & a {
        color: oklch(var(--color-light)) !important;
      }
    }
  }
}

.active:has(.menu-link) {
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-decoration-color: oklch(var(--color-primary));
  text-decoration-thickness: 2px;
}

.has-bg-img {
  position: relative;
}

.has-bg-img.opaque::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: oklch(var(--color-light) / 0.25);
  z-index: -1;
}

.has-bg-img.more-opaque::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: oklch(var(--color-light) / 0.5);
  z-index: -1;
}

.has-bg-img.very-opaque::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: oklch(var(--color-light) / 0.75);
  z-index: -1;
}

.has-bg-img.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: oklch(var(--color-dark) / 0.25);
  z-index: -1;
}

.has-bg-img.dark.more-opaque::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: oklch(var(--color-dark) / 0.5);
  z-index: -1;
}

.has-bg-img.dark.very-opaque::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: oklch(var(--color-dark) / 0.75);
  z-index: -1;
}

.is-bg-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
}

.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: var(--lines, 2);
  -webkit-line-clamp: var(--lines, 2);
  overflow: hidden;
}

.boxed {
  padding-inline: var(--biggest-element-font-size, var(--step-0));
  padding-block-start: calc(
    var(--biggest-element-font-size, var(--step-0)) / var(--heading-line-height)
  );
  padding-block-end: var(--biggest-element-font-size, var(--step-0));
  border-radius: calc(
    var(--biggest-element-font-size, var(--step-0)) / var(--heading-line-height)
  );
}

.card {
  max-inline-size: var(--card-width);
  background-color: oklch(var(--color-light));
  border-radius: var(--border-radius);
  color: oklch(var(--color-light));
  box-shadow: var(--shadow-around);
  overflow: hidden;
  z-index: 2;

  & img {
    transition: scale var(--anim-fast);
  }

  &:hover img {
    scale: 1.05;
  }
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    oklch(var(--color-dark) / 0.9), transparent
  );
  z-index: -1;
}

.card:focus-within,
.img-card:focus-within {
  outline: 2px solid oklch(var(--color-primary));
  outline-offset: 0.5ch;
  border-radius: var(--border-radius);
}

.eyebrow {
  --_width: 2em;
  --_height: 2px;
  --_offset: -0.5em;

  position: relative;
  max-inline-size: calc(320px - 1.5 * var(--_width) + var(--_offset));
  translate: calc(-1 * var(--_offset) + var(--_width)) 0;
}

.eyebrow::before {
  content: "";
  position: absolute;
  top: calc(50% - var(--_height));
  left: calc(var(--_offset) - var(--_width));
  inline-size: var(--_width);
  block-size: var(--_height);
  background-color: oklch(var(--color-primary));
}

#virtual-tour {
  block-size: 70vh;
}

footer {
  min-block-size: unset !important;
  font-size: var(--step--1);

  --padding-block-start: var(--space-m);
  --padding-block-end: calc(var(--inverse-clamp) * 2);
}

footer :is(p, a) {
  color: oklch(var(--color-light)) !important;
}

.action-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  inline-size: 100%;
  z-index: 99;

  --flex-gap: var(--inverse-clamp);
}

/* Form */
.form-section > * {
  --flow-space: 0.5em !important;
}

.privacy {
   --flex-gap: 0.5em;
 }
 
#send.is-loading {
  --progress: 0%;
  
  background: linear-gradient(
    to right,
    oklch(var(--color-primary)) var(--progress),
    oklch(var(--color-dark) / 0.15) var(--progress)
  );
  color: oklch(var(--color-light));
}

/*.form-container {*/
/*  --__input-padding-block: 1em;*/
/*  --__input-padding-inline: 1em;*/

/*  position: relative;*/
/*  z-index: 1;*/

/*  & .privacy {*/
/*    --flex-gap: 0.5em;*/
/*  }*/
/*}*/

/*.form-section {*/
/*  position: relative;*/
/*  width: 100%;*/

/*  & input,*/
/*  & textarea {*/
/*    padding: calc(0.25em + var(--__input-padding-block))*/
/*      var(--__input-padding-inline) var(--__input-padding-block)*/
/*      var(--__input-padding-inline) !important;*/
/*    border: none;*/
/*    box-shadow: var(--shadow-around);*/
/*  }*/
  
/*  & input::placeholder,*/
/*  & textarea::placeholder {*/
/*    color: transparent !important;*/
/*  }*/
  
/*  & label:not([for="Privacy"]) {*/
/*    position: absolute;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    top: calc(-0.25em + var(--__input-padding-block));*/
/*    padding: 0.25em 0.5em;*/
/*    margin-inline-start: calc(var(--__input-padding-inline) / 2);*/
/*    background-color: oklch(var(--color-light));*/
/*    border: 1px solid transparent;*/
/*    border-radius: var(--border-radius);*/
/*    color: oklch(var(--__color, oklch(var(--color-dark, black))));*/
/*    cursor: text;*/
/*    transition:*/
/*      top 0.25s ease-out,*/
/*      border-color 0.25s ease-out 0.1s;*/
  
/*    --flow-space: 0;*/
/*  }*/
/*}*/

/*.form-section input:focus + label,*/
/*.form-section input:not(:placeholder-shown) + label,*/
/*.form-section textarea:focus + label,*/
/*.form-section textarea:not(:placeholder-shown) + label {*/
/*  top: -1em;*/
/*  border-color: oklch(var(--color-primary));*/
/*}*/

/*.form-section input {*/
/*    transition: all var(--anim-fast);*/
/*}*/

/* Success state */
/*.form-section input:user-valid {*/
/*  background: oklch(var(--color-success) / 0.25);*/
/*  outline-color: oklch(var(--color-success));*/
/*}*/

/*.form-section:has(input:user-valid)::after {*/
/*  content: "✓";*/
/*  position: absolute;*/
/*  top: 0;*/
/*  right: 0.5em;*/
/*  padding: 0.25em;*/
/*  display: flex;*/
/*  justify-content: center;*/
/*  align-items: center;*/
/*  block-size: 1.5em;*/
/*  inline-size: 1.5em;*/
/*  border: 1px solid oklch(var(--color-success));*/
/*  border-radius: 50%;*/
/*  background: oklch(var(--color-success) / 0.25);*/
/*  color: oklch(var(--color-success));*/
/*  font-size: var(--step-2);*/
/*  font-weight: var(--fw-bold);*/
/*  translate: 0 0.5em;*/
/*}*/

/* In progress state */
/*.form-section input:not(:placeholder-shown):focus:invalid {*/
/*  background: oklch(var(--color-warning) / 0.05);*/
/*  outline-color: oklch(var(--color-warning));*/
/*}*/

/*.form-section:has(input:not(:placeholder-shown):focus:invalid)::after {*/
/*  content: "...";*/
/*  position: absolute;*/
/*  top: 0;*/
/*  right: 0.5em;*/
/*  padding: 0.25em;*/
/*  display: flex;*/
/*  justify-content: center;*/
/*  align-items: center;*/
/*  block-size: 1.5em;*/
/*  inline-size: 1.5em;*/
/*  border: 1px solid oklch(var(--color-warning));*/
/*  border-radius: 50%;*/
/*  background: oklch(var(--color-warning) / 0.05);*/
/*  color: oklch(var(--color-dark));*/
/*  font-size: var(--step-2);*/
/*  line-height: -0.5em;*/
/*  font-weight: var(--fw-bold);*/
/*  translate: 0 0.5em;*/
/*  animation: pulse 1s infinite;*/
/*}*/

/*@keyframes pulse {*/
/*  0% { opacity: .3; }*/
/*  50% { opacity: 1; }*/
/*  100% { opacity: .3; }*/
/*}*/

/* Error state */
/*.form-section input:user-invalid {*/
/*  background: oklch(var(--color-error) / 0.25);*/
/*  outline-color: oklch(var(--color-error));*/
/*}*/

/*.form-section:has(input:user-invalid)::after {*/
/*  content: "!";*/
/*  position: absolute;*/
/*  top: 0;*/
/*  right: 0.5em;*/
/*  padding: 0.25em;*/
/*  display: flex;*/
/*  justify-content: center;*/
/*  align-items: center;*/
/*  block-size: 1.5em;*/
/*  inline-size: 1.5em;*/
/*  border: 1px solid oklch(var(--color-error));*/
/*  border-radius: 50%;*/
/*  background: oklch(var(--color-error) / 0.25);*/
/*  color: oklch(var(--color-error));*/
/*  font-size: var(--step-2);*/
/*  font-weight: var(--fw-bold);*/
/*  translate: 0 0.5em;*/
/*}*/

#message-field {
  padding: 0.5em 0.75em;
  background: oklch(var(--__color, gray) / 0.1);
  border: 1px solid oklch(var(--__color, gray));
  border-radius: var(--border-radius);
  color: oklch(var(--__color, black));
}

.dropzone {
  padding: 2em;
  border: 2px dashed oklch(var(--color-dark) / 0.25);
  border-radius: var(--border-radius);
  transition: border-color 0.2s ease, background-color 0.2s ease;
  
  & .dropzone-link {
    text-transform: unset;
  }
}

.dropzone.dragover {
  border-color: oklch(var(--color-success));
  background: oklch(var(--color-success) / 0.25);
}

.dropzone.is-error {
  border-color: oklch(var(--color-error));
  background: oklch(var(--color-error) / 0.05);
}

.dropzone.is-success {
  border-color: oklch(var(--color-success));
  background: oklch(var(--color-success) / 0.05);
}

.dropzone-feedback {
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.dropzone-feedback.error {
  color: oklch(var(--color-error));
  font-weight: bold; 
}
.dropzone-feedback.success {
  color: oklch(var(--color-success));
}

.social-share {
  --flex-direction: row;
  --flex-gap: var(--inverse-clamp);

  & i {
    font-size: var(--step-5);
    transition: color var(--anim-fast) ease;
  }

  & i:hover {
    color: oklch(var(--color-dark));
  }
}

.btn-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
}

.article-btns {
  inline-size: 100%;

  --grid-min-item-size: 20rem;
}

.article-btn {
  padding: 0;
  max-inline-size: unset !important;
  inline-size: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  font-weight: var(--fw-regular);

  & i {
    font-size: var(--step-5);
  }

  & img {
    width: 80px;
    min-height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    align-self: stretch;
  }
}

.btn-content {
  padding: 1em;
  display: flex;
  align-items: center;
  gap: 1em;
}

.article-btn.inactive {
  display: none;
}

.article-btn:last-child {
  text-align: end;
}

.social-icons {
  font-size: var(--step-5);

  --flex-justify-content: flex-start;
}

/* Swiper marquee */
.swiper-wrapper {
  --swiper-wrapper-transition-timing-function: linear;
}

.swiper-slide {
  width: 12rem !important;
  height: 12rem !important;

  & img {
    aspect-ratio: 1;
    object-fit: contain;
  }
}

/* Menus */
.menu-item {
  min-width: 100%;
  min-inline-size: 100%;
  padding: 0.25em;
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "dish-name dish-price"
    "allergens ."
    "dish-description dish-description";
  justify-content: center;
  align-items: end;
  gap: 0.25em;
  border-block-end: 2px dotted oklch(var(--color-primary));
  user-select: none;
}

.menu-item.restaurant {
  grid-template-areas:
    "allergens ."
    "dish-description dish-price";
  align-items: start;
  column-gap: 1.5em;

  & .dish-description {
    align-self: end;
  }
}

.menu-item.pub {
  column-gap: 1em;
}

.menu-item.bar {
  grid-template-areas:
    "dish-name dish-price"
    "dish-description .";
  align-items: start;
  column-gap: 1em;
}

.menu-item.beers {
  grid-template-areas:
    "dish-name dish-price"
    "dish-description dish-description";
  align-items: start;
  column-gap: 1em;
}

.menu-item.beers.has-img {
  grid-template-columns: 60px 7fr 1fr;
  grid-template-areas:
    "img dish-name dish-price"
    "dish-description dish-description dish-description";
  align-items: center;
  column-gap: 1em;
}

.menu-item.gin-rhum {
  grid-template-areas:
    "dish-name dish-price"
    "dish-description dish-description";
  align-items: start;
  column-gap: 1em;
}

.menu-item.gin-rhum.has-img {
  grid-template-columns: 60px 2.5fr 1fr;
  grid-template-areas:
    "img dish-name dish-price"
    "dish-description dish-description dish-description";
  align-items: center;
  column-gap: 1em;
}

.menu-item.wines {
  grid-template-columns: 5fr 3fr;
  grid-template-areas:
    "dish-name bottle-price"
    "winery glass-price"
    "dish-description dish-description";
  align-items: start;
  row-gap: 0.75em;
  
  & .wine-year,
  .winery {
      color: oklch(from oklch(var(--color-dark)) 45% c h);
  }
  
  & .dish-price.bottle {
      grid-area: bottle-price;
  }
  
  & .dish-price.glass {
      grid-area: glass-price;
  }
  
  & .deg-date {
      margin-inline-start: 2em;
  }
  
  & .winery {
      grid-area: winery;
      font-family: 'Times new roman', Georgia, system-ui, serif; /* Problems with slavic chars */
      font-size: var(--step-1);
      font-variant-caps: small-caps;
  }
  
  & .volume {
      display: block;
      justify-self: end;
      font-weight: var(--fw-bold);
      font-size: var(--step--1);
  }
}

.dish-img {
  grid-area: img;
}

.dish-name {
  grid-area: dish-name;
  font-size: var(--step-2);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.dish-price {
  grid-area: dish-price;
  font-size: var(--step-2);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.dish-description {
  grid-area: dish-description;

  & li {
    display: inline !important;
  }
}

.allergens {
  grid-area: allergens;
  font-size: var(--step--1);
  align-self: start;
}

.modded-details {
    border: 1px solid oklch(var(--color-primary));
    border-radius: var(--border-radius);
}

.modded-details > summary {
  position: relative;
  display: block;
  max-inline-size: unset !important;
  inline-size: 100%;
  list-style: none; /* remove the ::marker */
}

.modded-details > summary::after {
  content: "\f107";
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  font-family: FontAwesome;
  transition: rotate 0.3s;
}

.modded-details[open] > summary::after {
  rotate: 180deg;
}
/* Cookie banner */
#cookieBannerSimpleTitle {
  color: oklch(var(--color-dark)) !important;
}

.cookieBanner a {
  color: oklch(var(--color-primary)) !important;
}

.cookieBanner button {
  background-color: oklch(var(--color-dark)) !important;
}

.cookieBanner .primary,
input:not(:disabled):checked + .cookieOptionSlider {
  background-color: oklch(var(--color-primary)) !important;
}

#cookieBannerSimpleAcceptAllButton#cookieBannerSimpleAcceptAllButton {
    color: oklch(var(--color-light));
    text-shadow: none;
}