/* ============================================
   Cultural Border Patterns — Hearth & Hygge
   Ideogram-generated decorative borders per
   region, displayed as repeating horizontal
   strips via ::before pseudo-elements.
   ============================================ */

/* Shared pattern base */
[class*="pattern-"]::before {
  content: '';
  display: block;
  height: 80px;
  background-repeat: repeat-x;
  background-size: auto 80px;
  background-position: center;
  margin-bottom: 1.5rem;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  max-width: 100%;
  overflow: hidden;
}

[class*="pattern-"] {
  overflow: hidden;
}

[class*="pattern-"]:hover::before {
  opacity: 0.95;
}

/* --- Ireland: Celtic knotwork --- */
.pattern-ireland::before {
  background-image: url('/static/images/borders/border-celtic-knot.png');
}

/* --- Denmark: Nordic knotwork --- */
.pattern-denmark::before {
  background-image: url('/static/images/borders/border-nordic-knot.png');
}

/* --- Sweden: Nordic knotwork (shared with Denmark) --- */
.pattern-sweden::before {
  background-image: url('/static/images/borders/border-nordic-knot.png');
}

/* --- Norway: Nordic knotwork (shared with Denmark) --- */
.pattern-norway::before {
  background-image: url('/static/images/borders/border-nordic-knot.png');
}

/* --- France: Fleur-de-lis --- */
.pattern-france::before {
  background-image: url('/static/images/borders/border-fleur-de-lis.png');
}

/* --- Greece: Greek key meander --- */
.pattern-greece::before {
  background-image: url('/static/images/borders/border-greek-key.png');
}

/* --- England: Tudor rose vine --- */
.pattern-england::before {
  background-image: url('/static/images/borders/border-tudor-rose.png');
}

/* --- Italy: Renaissance scrollwork --- */
.pattern-italy::before {
  background-image: url('/static/images/borders/border-renaissance.png');
}

/* --- Spain: Moorish geometric --- */
.pattern-spain::before {
  background-image: url('/static/images/borders/border-moorish.png');
}

/* --- Hungary: Folk art flowers --- */
.pattern-hungary::before {
  background-image: url('/static/images/borders/border-folk-art.png');
}

/* --- Czechia: Folk art (shared) --- */
.pattern-czechia::before {
  background-image: url('/static/images/borders/border-folk-art.png');
}

/* --- Bulgaria: Folk art (shared) --- */
.pattern-bulgaria::before {
  background-image: url('/static/images/borders/border-folk-art.png');
}

/* --- Croatia: Folk art (shared) --- */
.pattern-croatia::before {
  background-image: url('/static/images/borders/border-folk-art.png');
}

/* --- Tasmania: Fern fronds --- */
.pattern-tasmania::before {
  background-image: url('/static/images/borders/border-fern.png');
}

/* ==========================================================================
   Tileable Background Patterns
   ========================================================================== */

/* Food sketches — subtle tileable background for home page */
.home-hero {
  position: relative;
}

.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/static/images/patterns/pattern-food-sketches.png');
  background-repeat: repeat;
  background-size: 300px 300px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.home-hero > * {
  position: relative;
  z-index: 1;
}

/* Utensils — subtle tileable background for footer */
.site-footer {
  position: relative;
}

.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/static/images/patterns/pattern-utensils.png');
  background-repeat: repeat;
  background-size: 250px 250px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

.site-footer > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  [class*="pattern-"]::before {
    height: 55px;
    background-size: auto 55px;
    margin-bottom: 1rem;
  }
}

@media print {
  [class*="pattern-"]::before {
    opacity: 0.3;
    height: 24px;
    background-size: auto 24px;
  }

  .home-hero::before,
  .site-footer::before {
    display: none;
  }
}