/* ==========================================================================
   Petrekivka2 — Ornamental Elements
   SVG-based Petrykivka decorative elements used as dividers, borders, accents
   ========================================================================== */

/* -----------------------------------------------------------------------
   Section Divider — Floral ornament between sections
   Uses inline SVG encoded as background-image
   ----------------------------------------------------------------------- */

.ornament-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-12) auto;
  max-width: 400px;
  color: var(--color-accent-red);
  opacity: 0.6;
}

.ornament-divider::before,
.ornament-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to var(--direction, right),
    transparent,
    var(--color-border-medium)
  );
}

.ornament-divider::before {
  --direction: right;
}

.ornament-divider::after {
  --direction: left;
}

/* Ornament flower icon in the center */
.ornament-divider-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Corner Ornaments — For card corners
   ----------------------------------------------------------------------- */

.ornament-corner {
  position: relative;
}

.ornament-corner::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 40px;
  height: 40px;
  opacity: 0.15;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M2 38 C2 38 8 20 20 14 C14 20 8 30 2 38Z' fill='%23C84B31'/%3E%3Cpath d='M4 36 C4 36 14 22 22 12 C28 8 34 4 38 2' stroke='%23C84B31' fill='none' stroke-width='1'/%3E%3Ccircle cx='22' cy='12' r='3' fill='%23D4A853'/%3E%3Ccircle cx='30' cy='6' r='2' fill='%23C84B31'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.ornament-corner:hover::before {
  opacity: 0.3;
}

/* -----------------------------------------------------------------------
   Decorative Line — Simple horizontal ornament
   ----------------------------------------------------------------------- */

.ornament-line {
  display: block;
  width: 80px;
  height: 3px;
  border: none;
  border-radius: var(--radius-full);
  background: linear-gradient(
    90deg,
    var(--color-accent-red),
    var(--color-accent-gold),
    var(--color-accent-red)
  );
  margin: var(--space-6) 0;
}

.ornament-line-center {
  margin-left: auto;
  margin-right: auto;
}

.ornament-line-sm {
  width: 40px;
  height: 2px;
}

.ornament-line-lg {
  width: 120px;
  height: 4px;
}

/* -----------------------------------------------------------------------
   Floral Background Pattern — subtle repeating pattern
   ----------------------------------------------------------------------- */

.ornament-pattern-bg {
  position: relative;
}

.ornament-pattern-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 10 C25 15 20 25 30 30 C40 25 35 15 30 10Z' fill='%23C84B31'/%3E%3Cpath d='M30 50 C25 45 20 35 30 30 C40 35 35 45 30 50Z' fill='%23C84B31'/%3E%3Cpath d='M10 30 C15 25 25 20 30 30 C25 40 15 35 10 30Z' fill='%23C84B31'/%3E%3Cpath d='M50 30 C45 25 35 20 30 30 C35 40 45 35 50 30Z' fill='%23C84B31'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 60px 60px;
  pointer-events: none;
  z-index: -1;
}

/* -----------------------------------------------------------------------
   Hero Ornament — Large decorative element for hero sections
   ----------------------------------------------------------------------- */

.ornament-hero {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

.ornament-hero-left {
  left: -40px;
  bottom: -40px;
  transform: rotate(-15deg);
}

.ornament-hero-right {
  right: -40px;
  top: -40px;
  transform: rotate(15deg);
}

/* -----------------------------------------------------------------------
   Quote Ornament — decorative marks for blockquotes
   ----------------------------------------------------------------------- */

.ornament-quote {
  position: relative;
  padding-left: var(--space-8);
}

.ornament-quote::before {
  content: '❝';
  position: absolute;
  left: 0;
  top: -8px;
  font-size: var(--text-4xl);
  font-family: var(--font-display);
  color: var(--color-accent-gold);
  opacity: 0.4;
  line-height: 1;
}

/* -----------------------------------------------------------------------
   Category Ornament Frame — border with folk art feel
   ----------------------------------------------------------------------- */

.ornament-frame {
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.ornament-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-accent-red) 20%,
    var(--color-accent-gold) 50%,
    var(--color-accent-red) 80%,
    transparent 100%
  );
}

/* -----------------------------------------------------------------------
   Animated accent dot — small decorative pulse
   ----------------------------------------------------------------------- */

.ornament-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--color-accent-gold);
  border-radius: var(--radius-full);
  vertical-align: middle;
}

.ornament-dot-red {
  background-color: var(--color-accent-red);
}