/* ===============================================
   HONEYCOMB PATTERN - Subtle Bee-Themed Accents
   =============================================== */

/* Honeycomb background pattern for sections */
.honeycomb-bg {
  position: relative;
  overflow: hidden;
}

.honeycomb-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.03;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 20px,
      #F5A623 20px,
      #F5A623 21px
    ),
    repeating-linear-gradient(
      60deg,
      transparent,
      transparent 20px,
      #F5A623 20px,
      #F5A623 21px
    ),
    repeating-linear-gradient(
      120deg,
      transparent,
      transparent 20px,
      #F5A623 20px,
      #F5A623 21px
    );
  background-size: 40px 70px;
  pointer-events: none;
  z-index: 0;
}

.honeycomb-bg > * {
  position: relative;
  z-index: 1;
}

/* Hexagon decorative elements */
.hexagon {
  width: 30px;
  height: 17.32px;
  background: var(--honey-amber, #F5A623);
  position: relative;
  margin: 8.66px 0;
  display: inline-block;
}

.hexagon::before,
.hexagon::after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  left: 0;
}

.hexagon::before {
  bottom: 100%;
  border-bottom: 8.66px solid var(--honey-amber, #F5A623);
}

.hexagon::after {
  top: 100%;
  border-top: 8.66px solid var(--honey-amber, #F5A623);
}

/* Small hexagon decorations */
.hexagon-small {
  transform: scale(0.6);
  opacity: 0.6;
}

/* Hexagon border for cards */
.hexagon-border {
  border: 2px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, var(--honey-amber, #F5A623), var(--honey-gold, #FFC30B)) border-box;
  border-radius: 15px;
}

/* Subtle honeycomb corner accents */
.corner-hexagons::before,
.corner-hexagons::after {
  content: '⬡';
  position: absolute;
  font-size: 2rem;
  color: var(--honey-amber, #F5A623);
  opacity: 0.1;
  z-index: 0;
}

.corner-hexagons::before {
  top: 10px;
  left: 10px;
}

.corner-hexagons::after {
  bottom: 10px;
  right: 10px;
  transform: rotate(30deg);
}

/* Animated floating hexagons (very subtle) */
@keyframes float-hexagon {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(10deg);
  }
}

.floating-hexagon {
  animation: float-hexagon 6s ease-in-out infinite;
  opacity: 0.05;
}

/* Section divider with hexagons */
.divider-with-hexagons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 3rem 0;
}

.divider-with-hexagons::before,
.divider-with-hexagons::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--honey-amber, #F5A623),
    transparent
  );
}

.divider-with-hexagons .hexagon-icon {
  font-size: 1.5rem;
  color: var(--honey-amber, #F5A623);
}

/* Honeycomb pattern overlay for hero section */
.hero-honeycomb-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(245, 166, 35, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(255, 195, 11, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

/* SVG Honeycomb Pattern (inline alternative) */
.svg-honeycomb-bg {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='70' viewBox='0 0 40 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0l20 11.547v23.094L20 46.188 0 34.641V11.547z' fill='%23F5A623' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Hexagon container for images */
.hexagon-clip {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: clip-path 0.3s ease;
}

.hexagon-clip:hover {
  clip-path: polygon(50% 5%, 95% 27.5%, 95% 72.5%, 50% 95%, 5% 72.5%, 5% 27.5%);
}

/* Honey drip effect (decorative) */
.honey-drip {
  position: relative;
}

.honey-drip::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 15px;
  background: linear-gradient(to bottom, var(--honey-gold, #FFC30B), transparent);
  border-radius: 0 0 50% 50%;
  opacity: 0.5;
  animation: drip 3s ease-in-out infinite;
}

@keyframes drip {
  0%, 100% {
    height: 15px;
    opacity: 0.5;
  }
  50% {
    height: 25px;
    opacity: 0.8;
  }
}

/* Hexagon grid layout (optional, for future use) */
.hexagon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
}

.hexagon-grid-item {
  aspect-ratio: 1 / 1;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--honey-amber, #F5A623);
  transition: transform 0.3s ease;
}

.hexagon-grid-item:hover {
  transform: scale(1.1) rotate(5deg);
}