/* Holiday theme.
   Every rule is scoped to html.holiday, which the small script in
   base.njk adds only between the start and end dates. Outside that
   window this file does nothing and the site looks normal. */

html.holiday {
  --accent: #9b1c24;   /* cranberry */
  --pine: #2f5d3a;     /* evergreen */
  --gold: #c8862a;
  --paper: #fdfbf6;
}

/* Thin candy-stripe ribbon under the header */
html.holiday .site-header {
  border-bottom: none;
  position: relative;
}
html.holiday .site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    135deg,
    var(--accent) 0 8px,
    #fff 8px 12px,
    var(--pine) 12px 20px,
    #fff 20px 24px
  );
}

/* Small holly sprig before the site title */
html.holiday .site-title::before {
  content: "";
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.35em;
  vertical-align: -0.15em;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%232f5d3a' d='M15 17c-3-1-5-4-5-7l-2 1-1-3-2 1c0 4 3 8 7 9 1 0 2 0 3-1zM17 17c3-1 5-4 5-7l2 1 1-3 2 1c0 4-3 8-7 9-1 0-2 0-3-1z'/%3E%3Ccircle cx='13' cy='20' r='3' fill='%239b1c24'/%3E%3Ccircle cx='19' cy='20' r='3' fill='%239b1c24'/%3E%3Ccircle cx='16' cy='24.5' r='3' fill='%23b8262f'/%3E%3C/svg%3E");
}

/* Evergreen touches */
html.holiday .hero .button { background: var(--pine); }
html.holiday .recipe h2 { border-bottom-color: #d9e3d6; }
html.holiday .tag-link:hover .tag,
html.holiday .tag-link:focus .tag { background: var(--pine); }

/* Seasonal greeting in the footer */
html.holiday .site-footer::before {
  content: "Happy holidays from the Longwell kitchen";
  display: block;
  margin-bottom: 0.25rem;
  color: var(--pine);
  font-style: italic;
}

/* Printed recipes stay plain */
@media print {
  html.holiday .site-footer::before { content: none; }
}