/*
Theme Name: Wildoom Local Business
Theme URI: https://wildoom.com/
Author: Wildoom Studio
Description: A native block theme for restaurants, salons and small local businesses, designed to receive tokens exported from Figma.
Version: 0.4.0
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: wildoom-local-business
*/

html {
  scroll-behavior: smooth;
}

body {
  text-wrap: pretty;
}

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--wp--preset--color--focus);
  outline-offset: 3px;
}

.is-style-eyebrow {
  margin-bottom: var(--wp--preset--spacing--xs);
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wp-element-button,
.wp-block-button__link {
  transition: transform 160ms ease, opacity 160ms ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.wildoom-section {
  padding-block: var(--wp--preset--spacing--3-xl);
}

.wildoom-card {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--ds-radius-card);
}

.wildoom-image,
.wildoom-image img {
  border-radius: var(--ds-radius-image);
}

.wildoom-price-row {
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding-block: var(--wp--preset--spacing--m);
}

.wildoom-price-row:first-child {
  padding-top: 0;
}

.wildoom-price-row .wildoom-price {
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  white-space: nowrap;
}

.wildoom-price-table table {
  border: 0;
}

.wildoom-price-table td {
  border-width: 0 0 1px;
  border-color: var(--wp--preset--color--border);
  padding: var(--wp--preset--spacing--m) 0;
  vertical-align: top;
}

.wildoom-price-table td:last-child {
  padding-left: var(--wp--preset--spacing--m);
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--heading);
  text-align: right;
  white-space: nowrap;
}

.wildoom-gallery {
  display: grid;
  grid-template-columns: 1.75fr 0.9fr 0.95fr;
  grid-template-rows: repeat(2, minmax(13rem, 1fr));
  gap: var(--wp--preset--spacing--m);
  min-height: 38rem;
  position: relative;
}

.wildoom-gallery > figure {
  height: 100%;
  margin: 0;
}

.wildoom-gallery img {
  width: 100%;
  height: 100%;
  border-radius: var(--ds-radius-image);
  object-fit: cover;
}

.wildoom-gallery > figure:first-child {
  grid-row: 1 / 3;
  transform: translateY(var(--wp--preset--spacing--m));
}

.wildoom-gallery > figure:nth-child(4) {
  grid-column: 3;
  grid-row: 1 / 3;
  margin-block: var(--wp--preset--spacing--xl);
}

.wildoom-gallery-badge {
  position: absolute;
  left: 42%;
  bottom: 4%;
  display: grid;
  width: 7.5rem;
  aspect-ratio: 1;
  place-content: center;
  border-radius: var(--ds-radius-badge);
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary-contrast);
  text-align: center;
  transform: rotate(-6deg);
}

.wildoom-gallery-badge strong {
  font-size: var(--wp--preset--font-size--heading-s);
}

.wildoom-faq details {
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding-block: var(--wp--preset--spacing--m);
}

.wildoom-faq summary {
  cursor: pointer;
  font-size: var(--wp--preset--font-size--body-l);
  font-weight: 650;
}

.wildoom-site-footer a {
  color: inherit;
}

@media (max-width: 781px) {
  .wildoom-section {
    padding-block: var(--wp--preset--spacing--2-xl);
  }

  .wildoom-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 20rem 13rem 18rem;
    min-height: 0;
  }

  .wildoom-gallery > figure:first-child {
    grid-column: 1 / 3;
    grid-row: 1;
    transform: none;
  }

  .wildoom-gallery > figure:nth-child(4) {
    grid-column: 1 / 3;
    grid-row: 3;
    margin: 0;
  }

  .wildoom-gallery-badge {
    left: auto;
    right: -0.5rem;
    bottom: 14rem;
    width: 6rem;
  }
}