/* One seasonal frame for the app and server-rendered pages. The illustrations
   occupy their own space at the page corners, never a layer over working UI. */
html[data-site-theme='art'] {
  --seasonal-corner-start: url('/seasonal/art-palette.svg');
  --seasonal-corner-end: url('/seasonal/art-brushes.svg');
}

html[data-site-theme='fair-play'] {
  --seasonal-corner-start: url('/seasonal/fair-play-ribbons.svg');
  --seasonal-corner-end: url('/seasonal/fair-play-pennants.svg');
}

html[data-site-theme='music'] {
  --seasonal-corner-start: url('/seasonal/music-instruments.svg');
  --seasonal-corner-end: url('/seasonal/music-notes.svg');
}

html[data-site-theme='coffee'] {
  --seasonal-corner-start: url('/seasonal/coffee-branch.svg');
  --seasonal-corner-end: url('/seasonal/coffee-roastery.svg');
}

html[data-site-theme='halloween'] {
  --seasonal-corner-start: url('/seasonal/halloween-pumpkins.svg');
  --seasonal-corner-end: url('/seasonal/halloween-moon.svg');
}

html[data-site-theme='thanksgiving'] {
  --seasonal-corner-start: url('/seasonal/thanksgiving-harvest.svg');
  --seasonal-corner-end: url('/seasonal/thanksgiving-leaves.svg');
}

html[data-site-theme='christmas'] {
  --seasonal-corner-start: url('/seasonal/christmas-greenery.svg');
  --seasonal-corner-end: url('/seasonal/christmas-lights.svg');
}

html[data-site-theme='hody'] {
  --seasonal-corner-start: url('/seasonal/hody-maypole.svg');
  --seasonal-corner-end: url('/seasonal/hody-flowers.svg');
}

html[data-site-theme]:not([data-site-theme='everyday'])
  main#main-content:not([data-route-pending]):not(.public-page__main):not(
    [data-route-path^='/embed']
  )::before {
  content: '';
  display: block;
  height: clamp(100px, 12vw, 160px);
  margin-bottom: 16px;
  background-image: var(--seasonal-corner-start), var(--seasonal-corner-end);
  background-position:
    left bottom,
    right top;
  background-size:
    auto 100%,
    auto 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  flex: none;
  grid-column: 1 / -1;
  align-self: stretch;
}

@media print {
  html[data-site-theme] main#main-content::before {
    display: none !important;
  }
}