/* The occasion banner above the header (inc/occasion.php): a gold band, with a swallowtail end
   on each side folded back behind it, like a medieval banner. Loaded only while a banner shows.

   The ends are the link's ::before and ::after, cut by clip-path; the dark folds are the band's
   ::before and ::after. The band sits --tail minus --fold in from each side, so each end tucks
   --fold under it and shows --drop below it. A light crosses the band now and then. */

.occasion-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 clamp(4px, 1vw, 12px);
}

.occasion {
  --tail: 58px;   /* width of each end */
  --fold: 14px;   /* how far an end tucks under the band */
  --drop: 12px;   /* how far the ends hang below it */
  --h: 46px;      /* height of the band */
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: 0 calc(var(--tail) - var(--fold)) var(--drop);
  color: var(--navy);
  text-decoration: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)) drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
  transition: transform .25s ease, filter .25s ease;
}
a.occasion:hover,
a.occasion:focus-visible {
  transform: translateY(-2px);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .5)) drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}
a.occasion:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }

/* the two ends, each with a V cut into its outer side */
.occasion::before,
.occasion::after {
  content: "";
  position: absolute;
  top: var(--drop);
  width: var(--tail);
  height: var(--h);
  background: linear-gradient(180deg, #e3bd62 0%, #b3832b 55%, #6f4b15 100%);
}
.occasion::before { left: 0;  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 34% 50%); }
.occasion::after  { right: 0; clip-path: polygon(0 0, 100% 0, 66% 50%, 100% 100%, 0 100%); }

.occasion-band { position: relative; z-index: 1; display: block; }

/* the folds, where each end turns back under the band */
.occasion-band::before,
.occasion-band::after {
  content: "";
  position: absolute;
  top: 100%;
  width: var(--fold);
  height: var(--drop);
  background: #3f2906;
}
.occasion-band::before { left: 0;  clip-path: polygon(0 0, 100% 0, 100% 100%); }
.occasion-band::after  { right: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }

/* the band's face: metallic gold, a fine inner line, the words */
.occasion-face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: var(--h);
  padding: 0 22px;
  overflow: hidden;
  background: linear-gradient(180deg, #fff1c4 0%, #e9c766 40%, #ffe7a3 52%, #c8962f 76%, #8c6420 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 251, 232, .85);
  outline: 1.2px solid rgba(122, 84, 24, .55);
  outline-offset: -6px;
}
.occasion-text {
  font: 700 17px/1 "Cinzel", var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.occasion-orn { flex: none; width: 16px; height: 16px; }

/* the light */
.occasion-face::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -90px;
  width: 60px;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
  animation: occasion-shine 7s ease-in-out 1.2s infinite;
}
@keyframes occasion-shine {
  0%   { left: -90px; }
  22%  { left: calc(100% + 30px); }
  100% { left: calc(100% + 30px); }
}

/* phones: no room above the header there, so a smaller ribbon that pushes the page down */
@media (max-width: 760px) {
  .occasion { --tail: 42px; --fold: 10px; --drop: 9px; --h: 36px; }
  .occasion-face { gap: 8px; padding: 0 14px; outline-offset: -5px; }
  .occasion-text { font-size: 12.5px; letter-spacing: .1em; }
  .occasion-orn { width: 12px; height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .occasion { transition: none; }
  .occasion-face::after { animation: none; display: none; }
}

@media print {
  .occasion-wrap { display: none; }
}