/*
 * YESHENKO.FAMILY - jemne farebne dekoracie
 * Version 1.1 - h2/h3 decorations globally (including outside main) - CSS-only addon for existing pages.
 * Load AFTER all existing site stylesheets. No HTML restructuring required.
 */

:root {
  --yf-pine: #2f6353;
  --yf-leaf: #7ba889;
  --yf-sky: #78b7cb;
  --yf-apricot: #f5b477;
  --yf-blush: #eaa8a1;
  --yf-cream: #fff7eb;
  --yf-gold: #ddb86c;
}

/* Very light corner watercolor accents. The content and layout remain intact. */
body {
  background-image:
    radial-gradient(ellipse 360px 300px at 0% 5%, rgba(245,180,119,.13), transparent 72%),
    radial-gradient(ellipse 380px 300px at 100% 28%, rgba(120,183,203,.12), transparent 74%),
    radial-gradient(ellipse 420px 300px at 12% 96%, rgba(123,168,137,.12), transparent 76%);
  background-repeat: no-repeat;
}

/* Small celebratory motifs beside the original site title. */
header h1, .hero h1, .site-header h1, .banner h1 {
  position: relative;
  text-wrap: balance;
}
header h1::after, .hero h1::after, .site-header h1::after, .banner h1::after {
  content: '✦';
  display: inline-block;
  margin-left: .45em;
  color: var(--yf-gold);
  font-size: .46em;
  vertical-align: 39%;
  text-shadow: 0 3px 14px rgba(221,184,108,.25);
  animation: yf-twinkle 5s ease-in-out infinite;
}
header h1::before, .hero h1::before, .site-header h1::before, .banner h1::before {
  content: '✧';
  display: inline-block;
  margin-right: .32em;
  color: var(--yf-blush);
  font-size: .37em;
  vertical-align: 57%;
}

/* The links remain in the same navigation: just friendlier pills on hover. */
nav a, .navbar a, .site-nav a, header nav a {
  border-radius: 999px;
  transition: background-color .25s ease, box-shadow .25s ease,
              color .25s ease, transform .25s ease;
  text-underline-offset: 5px;
}
nav a:hover, nav a:focus-visible,
.navbar a:hover, .navbar a:focus-visible,
.site-nav a:hover, .site-nav a:focus-visible {
  background: rgba(255,246,225,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18),
              0 5px 18px rgba(47,99,83,.10);
  transform: translateY(-2px);
}
nav a:focus-visible, .site-nav a:focus-visible, .navbar a:focus-visible {
  outline: 2px solid var(--yf-apricot);
  outline-offset: 3px;
}

/*
 * Visible decorations on EVERY h2 and h3, even if the original page does
 * not use <main>, <article> or .content. Intentionally leave heading text,
 * font size, and layout unchanged. CSS loaded last will override older rules.
 */
body h2,
body h3 {
  position: relative;
  padding-left: .65em;
  border-left-style: solid;
  border-radius: 3px;
}
body h2 {
  border-left-width: 4px;
  border-left-color: var(--yf-apricot);
  background: linear-gradient(90deg, rgba(245, 180, 119, .17), transparent 75%);
}
body h3 {
  border-left-width: 3px;
  border-left-color: var(--yf-sky);
  background: linear-gradient(90deg, rgba(120, 183, 203, .15), transparent 75%);
}
body h2::before,
body h3::before {
  display: inline-block;
  font-weight: 400;
  line-height: 1;
  margin-right: .4em;
  text-shadow: 0 1px 1px rgba(255,255,255,.65);
}
body h2::before {
  content: '✿';
  color: #c8793c;
  font-size: .74em;
  vertical-align: .02em;
}
body h3::before {
  content: '✦';
  color: #438ca5;
  font-size: .70em;
  vertical-align: .05em;
}
/* A colored underline for h2 and a small finish ornament for h3. */
body h2::after {
  content: '';
  display: block;
  width: 110px;
  max-width: 32%;
  height: 4px;
  border-radius: 99px;
  margin-top: .30em;
  background: linear-gradient(90deg, #e9a65f, #e8a09a, transparent);
}
body h3::after {
  content: '  ✧';
  color: #438ca5;
  font-size: .64em;
  vertical-align: .10em;
  white-space: pre;
}

/* A low-key highlighted quote/intro treatment only where already marked. */
.lead, .intro-text, .subtitle {
  text-shadow: 0 1px 15px rgba(255,255,255,.25);
}

/* Make existing photos look like album prints. Never alter their dimensions. */
main img, .gallery img, .gallery-grid img, article img {
  border-radius: 13px;
  box-shadow: 0 9px 27px rgba(34,75,65,.14), 0 1px 3px rgba(34,75,65,.08);
  transition: filter .3s ease, box-shadow .3s ease, transform .3s ease;
}
main a:hover img, .gallery a:hover img, .gallery-grid a:hover img,
main img:hover, .gallery img:hover, .gallery-grid img:hover {
  filter: saturate(1.1) contrast(1.03);
  box-shadow: 0 16px 34px rgba(34,75,65,.20), 0 2px 5px rgba(34,75,65,.10);
  transform: translateY(-2px);
}

/* Color accents for current lists without rebuilding them. */
main li::marker, .content li::marker, article li::marker {
  color: var(--yf-pine);
}
main a:not(nav a):not(.button):not(.btn) {
  text-decoration-color: rgba(234,168,161,.65);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Soft separator above the existing footer. */
footer, .site-footer {
  position: relative;
  border-top: 1px solid rgba(47,99,83,.12);
}
footer::before, .site-footer::before {
  content: '✦  ✧  ✦';
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 13px;
  color: var(--yf-gold);
  font-size: 13px;
  letter-spacing: 7px;
  line-height: 25px;
  background: transparent;
  text-shadow: 0 0 3px #fff, 0 0 9px #fff;
  pointer-events: none;
}

::selection { background: rgba(245,180,119,.32); }

@keyframes yf-twinkle {
  0%, 100% { opacity: .75; transform: scale(1) rotate(0); }
  50% { opacity: 1; transform: scale(1.17) rotate(14deg); }
}

@media (prefers-reduced-motion: reduce) {
  header h1::after, .hero h1::after, .site-header h1::after, .banner h1::after { animation: none; }
  nav a, .navbar a, .site-nav a, main img, .gallery img,
  .gallery-grid img, article img { transition: none; }
}

@media (max-width: 600px) {
  header h1::before, .hero h1::before, .site-header h1::before, .banner h1::before {
    margin-right: .18em;
  }
  header h1::after, .hero h1::after, .site-header h1::after, .banner h1::after {
    margin-left: .18em;
  }
  body h2::after { height: 3px; }
  body h2, body h3 { padding-left: .45em; }
}