/*
Theme Name: Floral Decor
Theme URI: https://floraldecor.ie
Author: Jeet
Description: Custom WordPress theme for Floral Decor — converted from Vite + Pug + SCSS.
Version: 1.0.0
Text Domain: floral-decor
*/

/* 404 page */
.section-404 {
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2.5rem;
    height: 100vh;
    padding: 10rem 0;
  }
}

/* Contact Form 7 styles */
.wpcf7 {
  width: 100%;
}

.wpcf7-form {
  p {
    br,
    label {
      display: none;
    }

    input:not([type="submit"], [type="checkbox"], [type="radio"]),
    textarea {
      width: 100%;
    }

    textarea {
      height: 5rem;
    }

    &:has(input[type="submit"], textarea) {
      grid-column: 1 / -1;
    }

    input[type="submit"] {
      font-size: 1.8rem;
      font-weight: 600;
      line-height: 1.25;
      color: currentColor;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
      border: 1px solid currentColor;
      padding: 1.25rem 2.5rem;
      transition: all 0.3s cubic-bezier(0.3, 1, 0.3, 1);

      &:hover {
        background: #000;
        color: #fff;
        border-color: transparent;
      }
    }
  }
}

/* ─── Live Search Results ─── */
.search-results {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-height: 30rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.search-results li {
  width: 100%;
  opacity: 0;
  margin-left: 0;
  animation: srSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.search-results li:nth-child(1) {
  animation-delay: 0.03s;
}
.search-results li:nth-child(2) {
  animation-delay: 0.07s;
}
.search-results li:nth-child(3) {
  animation-delay: 0.11s;
}
.search-results li:nth-child(4) {
  animation-delay: 0.15s;
}
.search-results li:nth-child(5) {
  animation-delay: 0.19s;
}

@keyframes srSlideIn {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.search-results li a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 2rem;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 1.7rem;
  font-weight: 500;
  border: 1px solid transparent;
  background: #000000;
  color: #ffffff;
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-results li a:hover {
  background: transparent;
  color: #000000;
  border: 1px solid currentColor;
}

.search-results li a span {
  position: relative;
  z-index: 1;
}

.search-results li a svg {
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-results li a:hover svg {
  opacity: 1;
  transform: translateX(0);
}

.search-results .no-results {
  padding: 1.6rem 2rem;
  font-size: 1.4rem;
  opacity: 0.4;
  letter-spacing: 0.02em;
}

/* Fixes */
.data .container .data-item figure:not(:has(img)) {
	margin-bottom: -2rem;
	
	.data-figure-content {
		position: relative;
		right: auto;
		bottom: auto;
		width: 100%;
		color: currentcolor;
		padding: 0;
		gap: 1rem;
	}
}

.drop-down-content {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
}