/* Global resets, scoped to our project prefix */
[class*="sx-"], [class*="sx-"]::before, [class*="sx-"]::after, [class*="sx-"] * {
  box-sizing: border-box;
}
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 3px;
  border-radius: 0;
}

/* blockGap white-stripe fix between full-bleed sections */
.wp-site-blocks > * { margin-block-start: 0; }
.entry-content > [class*="sx-"] { margin-block-start: 0; }

/* ---------- Header ---------- */
.sx-header {
  z-index: 70;
  border-bottom: var(--wp--custom--border-width) solid var(--wp--preset--color--contrast);
}
.sx-header__bar {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  padding: 14px var(--wp--preset--spacing--30);
  width: 100%;
}
.sx-header__brand {
  gap: 12px;
  flex: 0 0 auto;
  text-decoration: none;
}
.sx-header__logo img,
.sx-header__logo {
  width: 52px;
  height: 52px;
  display: block;
}
.sx-header__title,
.sx-header__title a {
  font-family: var(--wp--preset--font-family--archivo-black);
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--accent) !important;
  text-transform: uppercase;
  text-decoration: none !important;
}
.sx-nav {
  gap: 26px;
}
.sx-nav .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--archivo);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast) !important;
  padding-bottom: 2px;
}
.sx-nav .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--accent) !important;
}
.sx-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
  border-bottom: 2px solid var(--wp--preset--color--accent);
}

/* Festive lights strip */
.sx-lights {
  position: relative;
  height: 14px;
  background: var(--wp--preset--color--contrast);
  overflow: hidden;
}
.sx-lights::before,
.sx-lights::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 48px 14px;
}
.sx-lights::before {
  background-image:
    radial-gradient(circle 4px at 10px 7px, var(--wp--preset--color--accent) 99%, transparent 100%),
    radial-gradient(circle 4px at 34px 7px, var(--wp--preset--color--yellow) 99%, transparent 100%);
  animation: sxLightsA 2.4s ease-in-out infinite;
}
.sx-lights::after {
  background-image:
    radial-gradient(circle 4px at 22px 7px, var(--wp--preset--color--green) 99%, transparent 100%),
    radial-gradient(circle 4px at 46px 7px, var(--wp--preset--color--gold) 99%, transparent 100%);
  animation: sxLightsB 2.4s ease-in-out infinite;
}
@keyframes sxLightsA { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes sxLightsB { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

@media (max-width: 700px) {
  .sx-header__bar { padding: 12px var(--wp--preset--spacing--20); }
  .sx-header__title { font-size: 18px; }
}

/* ---------- Footer ---------- */
.sx-footer {
  position: relative;
}
.sx-footer__grid {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  gap: 40px;
  align-items: flex-start;
}
.sx-footer__grid > * { flex: 1 1 200px; min-width: 200px; }
.sx-footer__brand { gap: 14px; }
.sx-footer__logo img,
.sx-footer__logo {
  width: 64px;
  height: 64px;
  background: var(--wp--preset--color--base);
  padding: 4px;
  display: block;
}
.sx-footer__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--wp--preset--color--surface);
  max-width: 32ch;
  margin: 0;
}
.sx-footer__col { gap: 10px; }
.sx-footer__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--yellow);
  margin: 0;
}
.sx-footer-nav {
  gap: 10px !important;
}
.sx-footer-nav .wp-block-navigation-item__content {
  color: var(--wp--preset--color--base) !important;
  font-size: 14px;
  text-decoration: none;
  padding: 0 !important;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
}
.sx-footer__link, .sx-footer__social {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
}
.sx-footer__link a, .sx-footer__social a {
  color: var(--wp--preset--color--base);
  text-decoration: none;
}
.sx-footer__link a:hover, .sx-footer__social a:hover {
  color: var(--wp--preset--color--yellow);
}

/* Atmosphere widget (snow + piano controls) */
.sx-atmosphere { display: flex; flex-direction: column; gap: 12px; }
.sx-atmosphere__range { width: 100%; accent-color: var(--wp--preset--color--accent); }
.sx-atmosphere__hint { font-size: 13px; color: var(--wp--preset--color--surface); }
.sx-atmosphere__spacer { margin-top: 4px; }
.sx-atmosphere__music-btn {
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  border: 0;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--archivo);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 18px;
  width: fit-content;
}
.sx-atmosphere__music-btn.is-playing {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}

.sx-footer__bottom {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  padding: 20px var(--wp--preset--spacing--30) 40px;
  border-top: var(--wp--custom--border-width) solid var(--wp--preset--color--line);
  font-size: 13px;
  color: var(--wp--preset--color--surface);
}
.sx-footer__copy { margin: 0; }
.sx-footer__legal { margin: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.sx-footer__legal a { color: var(--wp--preset--color--surface); text-decoration: none; }
.sx-footer__legal a:hover { color: var(--wp--preset--color--yellow); }

@media (max-width: 700px) {
  .sx-footer__grid { gap: 28px; padding-top: var(--wp--preset--spacing--50); }
}