/*
Theme Name: NYAA（Spectra One Child）
Theme URI: https://nyaa-dev.cairo.ac/
Description: Child theme for Spectra One.
Author: Cairo Team
Version: 1.0.0
Template: spectra-one
Text Domain: spectra-one-child
*/

:root {
  --nyaa-color-outline: var(--wp--preset--color--outline, rgba(255, 255, 255, 0.4));
  --nyaa-color-on-dark: var(--wp--preset--color--on-dark, rgba(255, 255, 255, 0.8));
  --nyaa-color-surface-translucent: var(--wp--preset--color--surface-translucent, rgba(255, 255, 255, 0.8));
  --nyaa-color-background: var(--wp--preset--color--background, rgba(255, 255, 255, 1));
  --nyaa-color-heading: var(--wp--preset--color--heading, rgba(0, 0, 0, 1));
  --nyaa-color-primary: var(--wp--preset--color--primary, rgba(100, 49, 246, 1));
  --nyaa-content-max-width: 1234px;
  --nyaa-container-padding-left: max(var(--wp--style--root--padding-left, var(--wp--preset--spacing--x-small, clamp(12px, 0.5vw + 10.2px, 14.4px))), env(safe-area-inset-left, 0px));
  --nyaa-container-padding-right: max(var(--wp--style--root--padding-right, var(--wp--preset--spacing--x-small, clamp(12px, 0.5vw + 10.2px, 14.4px))), env(safe-area-inset-right, 0px));
  --nyaa-container-max-width: calc(var(--nyaa-content-max-width) + var(--nyaa-container-padding-left) + var(--nyaa-container-padding-right));
  --nyaa-container-width: min(100%, var(--nyaa-container-max-width));
  --nyaa-gutter: var(--nyaa-container-padding-left);
  --nyaa-block-gap: var(--wp--style--block-gap, var(--wp--preset--spacing--x-small, clamp(8px, 0.35vw + 6.6px, 9.6px)));
}

/* Keep Global Styles layout padding above Spectra One block-level defaults. */
.wp-site-blocks > :where(.wp-block-group, .wp-block-post-content).has-global-padding,
.editor-styles-wrapper .is-root-container > :where(.wp-block-group, .wp-block-post-content).has-global-padding {
  padding-right: var(--wp--style--root--padding-right, 0);
  padding-left: var(--wp--style--root--padding-left, 0);
}

.wp-site-blocks > :where(.wp-block-group, .wp-block-post-content).has-global-padding > .alignfull,
.editor-styles-wrapper .is-root-container > :where(.wp-block-group, .wp-block-post-content).has-global-padding > .alignfull {
  margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1);
  margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1);
}


/* Normalize NYAA custom block roots so their visible content can reach the 1234px site container. */
.wp-site-blocks :where(.wp-block-post-content, .wp-block-group, main) > :where(
  .wp-block-spectra-one-child-nyaa-archive-intro.nyaa-archive-intro,
  .nyaa-archive-results,
  .wp-block-nyaa-sponsor-image-cards,
  .nyaa-sticky-series,
  .wp-block-nyaa-topics,
  .nyaa-topics,
  .wp-block-nyaa-division-archive-cta,
  .wp-block-nyaa-judge-archive-cta,
  .wp-block-nyaa-sponsor-archive-cta,
  .wp-block-nyaa-judge-list,
  .wp-block-nyaa-footer-menu,
  .nyaa-sponsor-support__head,
  .nyaa-sponsor-support
) {
  width: var(--nyaa-container-width, min(100%, 1234px)) !important;
  max-width: var(--nyaa-container-max-width, 1234px) !important;
}
/* Keep NYAA custom block content visually aligned to the 1234px site container even inside Global Styles padding wrappers. */
.wp-site-blocks > :where(.wp-block-group.has-global-padding) > :where(
  .nyaa-archive-intro,
  .nyaa-archive-results,
  .wp-block-nyaa-sponsor-image-cards,
  .nyaa-sticky-series,
  .wp-block-nyaa-topics,
  .nyaa-topics,
  .wp-block-nyaa-division-archive-cta,
  .wp-block-nyaa-judge-archive-cta,
  .wp-block-nyaa-sponsor-archive-cta,
  .wp-block-nyaa-judge-list,
  .wp-block-nyaa-footer-menu,
  .nyaa-sponsor-support__head,
  .nyaa-sponsor-support
) {
  width: min(calc(100% + var(--nyaa-container-padding-left, 0px) + var(--nyaa-container-padding-right, 0px)), var(--nyaa-container-max-width, 1234px)) !important;
  max-width: var(--nyaa-container-max-width, 1234px) !important;
  margin-left: calc(var(--nyaa-container-padding-left, 0px) * -1) !important;
  margin-right: calc(var(--nyaa-container-padding-right, 0px) * -1) !important;
}
/* Align the sponsor support section with the site gutter. */
.wp-site-blocks :where(.wp-block-post-content, .wp-block-group, main) > .nyaa-sponsor-support__title,
.wp-site-blocks :where(.wp-block-post-content, .wp-block-group, main) > .nyaa-sponsor-support__title + .wp-block-group {
  width: var(--nyaa-container-width, min(100%, 1234px)) !important;
  max-width: var(--nyaa-container-max-width, 1234px) !important;
}

@media (min-width: 782px) {
  .wp-site-blocks :where(.wp-block-post-content, .wp-block-group, main) > .nyaa-sponsor-support__title,
  .wp-site-blocks :where(.wp-block-post-content, .wp-block-group, main) > .nyaa-sponsor-support__title + .wp-block-group {
    width: min(
      calc(100% - (var(--nyaa-container-padding-left, 0px) + var(--nyaa-container-padding-right, 0px))),
      var(--nyaa-content-max-width, 1234px)
    ) !important;
    max-width: var(--nyaa-content-max-width, 1234px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 781px) {
  .wp-site-blocks :where(.wp-block-post-content, .wp-block-group, main) > .nyaa-sponsor-support__title,
  .wp-site-blocks :where(.wp-block-post-content, .wp-block-group, main) > .nyaa-sponsor-support__title + .wp-block-group {
    width: calc(100% - (var(--nyaa-container-padding-left, 8px) + var(--nyaa-container-padding-right, 8px))) !important;
  }
}

/* HTMX loading indicator */
#htmx-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #111;
  opacity: 0;
  z-index: 99999;
  transition: width 0.25s ease, opacity 0.2s ease;
}

.htmx-request #htmx-indicator,
#htmx-indicator.htmx-request {
  width: 100%;
  opacity: 1;
}

/* Page transition fallback */
#site-content {
  transition: opacity 0.18s ease, transform 0.24s ease, filter 0.24s ease;
  will-change: opacity, transform;
}

#site-content.is-swapping-out {
  opacity: 0;
  transform: translateY(8px) scale(0.995);
  filter: blur(1.5px);
}

#site-content.is-swapping-in {
  animation: nyaa-htmx-content-enter 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes nyaa-htmx-content-enter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.995);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Avoid fallback animation conflicts while View Transition is active */
html.is-vt-running #site-content {
  transition: none !important;
  animation: none !important;
}

/* View Transition API */
@supports (view-transition-name: site-content) {
  #site-content {
    view-transition-name: site-content;
  }

  ::view-transition-old(site-content) {
    animation: s1hc-vt-fade-out 0.2s ease both;
  }

  ::view-transition-new(site-content) {
    animation: s1hc-vt-fade-in-up 0.44s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes s1hc-vt-fade-out {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(8px) scale(0.995);
      filter: blur(1.5px);
    }
  }

  @keyframes s1hc-vt-fade-in-up {
    from {
      opacity: 0;
      transform: translateY(18px) scale(0.995);
      filter: blur(2px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }
}

@media (max-width: 781px) {
  #site-content {
    transition: opacity 0.16s ease, transform 0.2s ease;
  }

  #site-content.is-swapping-out {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }

  #site-content.is-swapping-in {
    animation: nyaa-htmx-mobile-content-enter 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes nyaa-htmx-mobile-content-enter {
    from {
      opacity: 0;
      transform: translateY(10px);
      filter: none;
    }

    to {
      opacity: 1;
      transform: translateY(0);
      filter: none;
    }
  }
}
@media (max-width: 781px) {
  .wp-site-blocks .has-global-padding {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .wp-site-blocks .entry-content.wp-block-post-content.has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .wp-site-blocks .wp-block-group[style*="padding-left:32px"][style*="padding-right:32px"] {
    padding-top: 16px !important;
    padding-right: 12px !important;
    padding-bottom: 16px !important;
    padding-left: 12px !important;
  }
}



/* Align the NYAA about page content with the shared site gutter. */
body.page-id-649 #site-content > .entry-content.wp-block-post-content {
  box-sizing: border-box;
  width: var(--nyaa-container-width, min(100%, 1234px));
  max-width: var(--nyaa-container-max-width, 1234px);
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: var(--nyaa-container-padding-right, 0) !important;
  padding-left: var(--nyaa-container-padding-left, 0) !important;
}

.entry-guideline-title__slug {
  margin: 0 0 8px;
  color: inherit;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.4;
  opacity: 0.7;
}

.entry-guideline-title__heading {
  margin: 0;
}



.entry-guideline-title__slug {
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--primary);
}

.entry-guideline-title {
  width: 100%;
  max-width: var(--wp--style--global--content-size, 764px);
  margin-left: auto;
  margin-right: auto;
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(16px, 3vw, 24px);
}

.entry-guideline-title + .has-base-2-background-color.has-background {
  margin-top: 16px;
}

.entry-guideline-title + .has-base-2-background-color.has-background .entry-content > :first-child {
  margin-top: 0;
}



.entry-guideline-title__slug {
  text-transform: uppercase;
  margin-bottom: 16px;
}

.wp-block-list {
  margin-left: 0;
  padding-left: 0;
  padding-inline-start: 0;
  list-style-position: inside;
}


.wp-block-list li {
  padding-left: 1em;
  text-indent: -1em;
}

.entry-guideline-title + .entry-content.wp-block-post-content {
  margin-top: 16px;
}

.entry-guideline-title + .entry-content.wp-block-post-content > :first-child {
  margin-top: 0;
}

.entry-guideline-title + .entry-content.wp-block-post-content.wp-block-post-content-is-layout-constrained {
  margin-top: 16px;
  padding-top: 0 !important;
}

.entry-guideline-title + .entry-content.wp-block-post-content.wp-block-post-content-is-layout-constrained > :first-child {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

.post-type-archive-entry_guideline main.wp-block-group.has-global-padding {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.wp-block-accordion-item {
  display: grid;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows 0.28s ease;
}

.wp-block-accordion-item.is-open {
  grid-template-rows: auto 1fr;
}

.wp-block-accordion-item > .wp-block-accordion-panel,
.wp-block-accordion-panel[aria-hidden="true"],
.wp-block-accordion-panel[inert] {
  display: block !important;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
  margin-block-start: 0;
}

.wp-block-accordion-item.is-open > .wp-block-accordion-panel {
  opacity: 1;
}

.wp-block-nyaa-marquee-carousel.nyaa-marquee-carousel .nyaa-marquee-carousel__archive-card {
  position: relative;
  aspect-ratio: 4 / 3;
  height: var(--nyaa-marquee-slide-height, 240px);
  margin-block: 0;
  background: color-mix(in srgb, var(--wp--preset--color--custom-theme, #111827) 18%, transparent);
}

.wp-block-nyaa-marquee-carousel.nyaa-marquee-carousel .nyaa-marquee-carousel__archive-link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.wp-block-nyaa-marquee-carousel.nyaa-marquee-carousel .nyaa-marquee-carousel__archive-card .nyaa-marquee-carousel__archive-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
}

.wp-block-nyaa-marquee-carousel.nyaa-marquee-carousel .nyaa-marquee-carousel__archive-caption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 1;
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.wp-block-nyaa-marquee-carousel.nyaa-marquee-carousel .nyaa-marquee-carousel__archive-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.55));
}

.wp-block-nyaa-marquee-carousel.nyaa-marquee-carousel,
.wp-block-nyaa-marquee-carousel.nyaa-marquee-carousel .nyaa-marquee-carousel__viewport {
  overflow-x: clip;
  overflow-y: hidden;
}

@supports selector(:has(*)) {
  .entry-content.wp-block-post-content:has(.wp-block-nyaa-marquee-carousel.nyaa-marquee-carousel) {
    overflow-x: clip;
  }
}