/* Holiday is the current light theme with navigation and masthead decoration.
   Component spacing, typography, tables, dialogs and print styles stay shared. */
.nexus-holiday-greeting { display: none; }

@font-face {
  font-family: "Nexus Holiday Script";
  src: url("/assets/fonts/oooh-baby-greeting.woff?v=1") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@media screen {
  html.nexus-holiday {
    color-scheme: light;
    --holiday-red: #da1f31;
    --holiday-ribbon-red: #d60e22;
    --holiday-ink: #292929;
  }

  html.nexus-holiday:root body :is(.site-global-nav.site-shared-desktop-nav, .site-shared-compact-bar) {
    background-color: #fff !important;
    background-image:
      url("/assets/seasonal/holiday-ribbon-horizontal.svg?v=1"),
      url("/assets/seasonal/holiday-ribbon-vertical.svg?v=1") !important;
    background-size: 32px 14px, 14px 32px !important;
    background-position: left bottom, left 24px top !important;
    background-repeat: repeat-x, repeat-y !important;
    color: var(--holiday-ink) !important;
    border-top-color: #fff !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
  html.nexus-holiday:root body :is(.site-global-nav.site-shared-desktop-nav, .site-shared-compact-bar)::after {
    content: "";
    position: absolute;
    left: -1px;
    bottom: -26px;
    width: 64px;
    height: 54px;
    background: url("/assets/seasonal/holiday-bow.webp?v=1") center / contain no-repeat;
    pointer-events: none;
  }
  html.nexus-holiday:root body :is(.site-global-nav, .site-shared-compact-bar)
    :is(.site-nav-item, .output-button, .site-nav-account, .site-nav-account strong,
      .site-shared-compact-title, .site-shared-compact-search, .compact-nav-toggle,
      .nexus-theme-toggle) {
    color: var(--holiday-ink) !important;
  }
  html.nexus-holiday:root body .site-global-nav.site-shared-desktop-nav
    :is(.site-nav-item, .nexus-theme-toggle):is(:hover, :focus-visible) {
    background: #fbedee !important;
    color: #b91b2a !important;
  }
  html.nexus-holiday:root body .site-global-nav.site-shared-desktop-nav
    :is(.site-nav-item, .site-nav-account, .nexus-theme-toggle):focus-visible {
    outline: 2px solid var(--holiday-red) !important;
    outline-offset: 2px !important;
  }
  html.nexus-holiday:root body :is(.site-shared-desktop-nav, .site-shared-compact-bar)
    :is(.site-shared-nav-brand-icon, .site-shared-compact-title-icon) {
    filter: none !important;
  }
  html.nexus-holiday:root body .site-shared-compact-bar .nexus-hamburger-svg {
    filter: brightness(0) !important;
  }
  html.nexus-holiday:root body .compact-nav-toggle-icon i {
    background: var(--holiday-ink) !important;
  }
  html.nexus-holiday:root body .site-global-nav.site-shared-desktop-nav .site-nav-item
    :is(.site-shared-nav-icon-outline, .site-shared-nav-icon-outline *, .site-shared-nav-icon-spark, .site-shared-nav-icon-spark *),
  html.nexus-holiday:root body .site-global-nav.site-shared-desktop-nav .site-nav-theme-slot button.nexus-theme-toggle :is(svg, svg *),
  html.nexus-holiday:root body .site-shared-compact-bar .site-shared-compact-search :is(svg, svg *) {
    color: inherit !important;
    fill: none !important;
    stroke: currentColor !important;
  }
  html.nexus-holiday:root body .site-global-nav.site-shared-desktop-nav .site-nav-item
    :is(.site-shared-nav-icon-filled, .site-shared-nav-icon-filled *) {
    color: inherit !important;
    fill: currentColor !important;
    stroke: none !important;
  }
  html.nexus-holiday:root body .nexus-theme-choice[data-theme="holiday"].is-active {
    border-color: var(--holiday-red);
    background: #fff3f4;
    color: #ad1827;
  }

  html.nexus-holiday body .nexus-holiday-greeting {
    display: block;
    color: var(--holiday-ribbon-red);
    font: 400 clamp(34px, 3.5vw, 48px) / 1.15 "Nexus Holiday Script", cursive;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
  }

  @media (min-width: 1000px) {
    /* Reserve the extra stripe's space without moving the navigation contents. */
    html.nexus-holiday:root body .site-global-nav.site-shared-desktop-nav {
      height: 62px !important;
      min-height: 62px !important;
      padding-bottom: 4px !important;
    }
    html.nexus-holiday:root body:not(.schedule-page-open) :is(
      .app-header.site-page-header:has(#worksheetPageTitle, #toolsPageTitle, .site-tool-page-title),
      .site-page-header > .site-page-header-inner
    ).nexus-holiday-masthead,
    html.nexus-holiday:root body.schedule-page-open #scheduleDialog > .schedule-dialog-card:not(.schedule-print-card) > .schedule-page-heading.nexus-holiday-masthead {
      display: grid !important;
      grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr) !important;
      gap: 20px !important;
      align-items: center !important;
    }
    html.nexus-holiday body .nexus-holiday-masthead > .site-page-heading {
      grid-column: 1 !important;
      grid-row: 1 !important;
    }
    html.nexus-holiday body .nexus-holiday-masthead > .nexus-holiday-greeting {
      grid-column: 2 !important;
      grid-row: 1 !important;
    }
    html.nexus-holiday body .nexus-holiday-masthead > :is(.site-page-actions, .header-right, .schedule-dialog-actions) {
      grid-column: 3 !important;
      grid-row: 1 !important;
      justify-self: end !important;
    }
  }

  @media (max-width: 999px) {
    html.nexus-holiday.site-shared-compact-active:root body .site-shared-compact-bar {
      background-position: left bottom, left 61px top !important;
    }
    html.nexus-holiday.site-shared-compact-active:root body .site-shared-compact-bar::after {
      left: 38px;
      bottom: -25px;
      width: 60px;
      height: 50px;
    }
    html.nexus-holiday body .nexus-holiday-masthead:not(.site-mobile-page-header) > .nexus-holiday-greeting {
      display: none;
    }
    html.nexus-holiday:root body > .site-mobile-page-header.nexus-holiday-masthead:not([hidden]) {
      display: grid;
      grid-template-columns: minmax(min-content, 1fr) auto minmax(0, 1fr);
      column-gap: 12px;
    }
    html.nexus-holiday:root body .nexus-holiday-masthead > .site-mobile-page-title {
      overflow-wrap: normal;
    }
    html.nexus-holiday body .nexus-holiday-greeting {
      font-size: clamp(32px, 5.4vw, 44px);
    }
  }

  @media (min-width: 600px) and (max-width: 999px) {
    html.nexus-holiday:root body > .site-mobile-page-header.nexus-holiday-masthead:not([hidden]) {
      padding-block: 12px;
    }
  }

  @media (max-width: 599px) {
    html.nexus-holiday:root body > .site-mobile-page-header.nexus-holiday-masthead:not([hidden]) {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 8px 10px;
    }
    html.nexus-holiday:root body > .site-mobile-page-header.nexus-holiday-masthead > .site-mobile-page-title {
      flex: 0 0 auto;
      max-width: 100%;
    }
    html.nexus-holiday body .nexus-holiday-greeting {
      font-size: clamp(23px, 7.2vw, 38px);
      margin-left: auto;
    }
  }
}