/**
 * @file        holiday-banner.css
 * @description Holiday module: layout of the three.js holiday banner (strip beside the anchor or under the parent, text fallback)
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         1715957c-0a09-4d3a-9bc2-4c61590951d5
 * @version     0.2.0.2
 * @created     2026-10-31
 * @updated     2026-10-31
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary — All rights reserved
 */

/* WHY: the banner sits on top of its parent's free strip (in the site header: from the page edge to
   the logo). It never takes layout space and never catches clicks, so the header and the mobile
   menu behave exactly as without it. The width is set by holiday-banner.js from the anchor element. */
.holiday-banner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.holiday-banner[hidden],
.holiday-banner.is-tiny {
  display: none;
}

/* Strip under the parent (data-holiday-below): used when there is no room beside the anchor, e.g.
   on phones under a fixed header. The page is pushed down by the same height, so nothing is hidden. */
.holiday-banner.is-below {
  top: 100%;
  bottom: auto;
  width: 100%;
  height: var(--holiday-below-height, 52px);
  background: var(--holiday-banner-bg, #1a2b4a);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

html.holiday-below-active body {
  padding-top: var(--holiday-below-height, 52px);
}

.holiday-banner canvas {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease;
}

/* Greeting text: for screen readers, and visible only when WebGL or three.js is unavailable. */
.holiday-banner__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.holiday-banner.is-fallback .holiday-banner__text {
  position: static;
  width: auto;
  height: 100%;
  clip: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.25rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: #ffd166;
  text-overflow: ellipsis;
}