/* sites/fdcla-texas.org/fdcla-child/assets/css/papel-picado.css
   Components. Consumes the custom properties from tokens.css. */

/* ---- Papel picado banner divider -------------------------------------
   Pure CSS. Each pennant is a flex child with a zig-zag clip-path and a
   perforation dot pattern. No images. */
.fdcla-banners {
  display: flex;
  width: 100%;
  height: 74px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.fdcla-banners__flag {
  flex: 1 1 0;
  min-width: 0;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  background-color: var(--flag-colour, var(--fdcla-cyan));
  background-image:
    radial-gradient(circle at 24% 26%, rgba(255,255,255,.85) 3.5px, transparent 4px),
    radial-gradient(circle at 62% 22%, rgba(255,255,255,.85) 3px,   transparent 3.5px),
    radial-gradient(circle at 44% 46%, rgba(255,255,255,.85) 3px,   transparent 3.5px);
  transform-origin: top center;
  animation: fdcla-sway var(--fdcla-sway-duration) ease-in-out infinite;
}

.fdcla-banners__flag:nth-child(5n+1) { --flag-colour: var(--fdcla-cyan);    animation-delay: 0s; }
.fdcla-banners__flag:nth-child(5n+2) { --flag-colour: var(--fdcla-magenta); animation-delay: -1.4s; }
.fdcla-banners__flag:nth-child(5n+3) { --flag-colour: var(--fdcla-yellow);  animation-delay: -2.8s; }
.fdcla-banners__flag:nth-child(5n+4) { --flag-colour: var(--fdcla-green);   animation-delay: -4.2s; }
.fdcla-banners__flag:nth-child(5n+5) { --flag-colour: var(--fdcla-crimson); animation-delay: -5.6s; }

@keyframes fdcla-sway {
  0%, 100% { transform: rotate(-1.1deg) translateY(0); }
  50%      { transform: rotate(1.1deg)  translateY(2px); }
}

/* ---- Paper card ------------------------------------------------------ */
.fdcla-card {
  background: var(--fdcla-bg-card);
  border-radius: var(--fdcla-radius);
  padding: var(--fdcla-space-lg) var(--fdcla-space-md);
  box-shadow: 0 14px 40px rgba(26, 31, 38, .16);
  max-width: 62rem;
  margin-inline: auto;
}

/* ---- CTA chips -------------------------------------------------------
   Chip text is always ink. Task 4's audit is what settles which fills
   are usable; ink is chosen because it clears AA against all of them. */
.fdcla-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fdcla-space-sm);
  justify-content: center;
}

/* .fdcla-chip-row is a Group block, and the block editor always wraps a
   Group's content in an extra `.wp-block-group__inner-container` div, so
   the real DOM is:
     .fdcla-chip-row (flex)
       > .wp-block-group__inner-container
           > p.wp-block-paragraph   (one per chip)
               > a.fdcla-chip
   Each chip is authored as its own paragraph block, so two block-level
   layers — the inner-container div and each <p> — sit between the flex
   container and the chip link, and either one alone is enough to take a
   full line and stack the chips vertically instead of letting them flow.
   `display: contents` on both drops them from the box tree entirely (they
   stay in the DOM/a11y tree) so each .fdcla-chip becomes a direct flex item
   of .fdcla-chip-row, participating in the row's wrap/gap/centering as if
   neither wrapper were there. */
.fdcla-chip-row > .wp-block-group__inner-container,
.fdcla-chip-row > .wp-block-group__inner-container > p {
  display: contents;
}

.fdcla-chip {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-family: var(--fdcla-font-display);
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--fdcla-text-strong);
  background: var(--fdcla-cyan);
  overflow-wrap: anywhere;
  transition: transform .18s var(--fdcla-ease), box-shadow .18s ease;
}

.fdcla-chip:hover,
.fdcla-chip:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(26, 31, 38, .22);
}

.fdcla-chip:focus-visible {
  outline: 3px solid var(--fdcla-ink);
  outline-offset: 3px;
}

.fdcla-chip--magenta { background: var(--fdcla-magenta); color: var(--fdcla-white); }
.fdcla-chip--yellow  { background: var(--fdcla-yellow); }
.fdcla-chip--green   { background: var(--fdcla-green); }
.fdcla-chip--crimson { background: var(--fdcla-crimson); color: var(--fdcla-white); }

/* ---- Bilingual pairs -------------------------------------------------
   Prose form: two co-equal columns, identical size and weight. Neither
   language is styled as secondary — that is the whole point. */
.fdcla-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fdcla-space-md);
  align-items: start;
}

.fdcla-pair > [class*="fdcla-lang-"] {
  font-size: 1rem;
  font-weight: 400;
  color: var(--fdcla-text);
  overflow-wrap: break-word;
}

@media (max-width: 782px) {
  .fdcla-pair {
    grid-template-columns: 1fr;
    gap: var(--fdcla-space-sm);
  }
  .fdcla-pair > [class*="fdcla-lang-"] + [class*="fdcla-lang-"] {
    border-top: 1px solid rgba(72, 84, 96, .25);
    padding-top: var(--fdcla-space-sm);
  }
}

/* Short-string form: "SATURDAY | SÁBADO" on one line, matching the
   convention already used in the festival's own schedules. */
.fdcla-pair-inline > [class*="fdcla-lang-"] + [class*="fdcla-lang-"]::before {
  content: " | ";
  color: var(--fdcla-crimson-text); /* NOT --fdcla-crimson: that fails AA as text on cream */
  font-weight: 700;
}

/* ---- Section heading ------------------------------------------------- */
.fdcla-section-head {
  font-family: var(--fdcla-font-display);
  color: var(--fdcla-text-strong);
  text-align: center;
  margin-bottom: var(--fdcla-space-md);
}

/* ---- Dark band (2027 announcements, footer) -------------------------- */
.fdcla-band-dark {
  background: var(--fdcla-bg-dark);
  color: var(--fdcla-text-on-dark);
  padding-block: var(--fdcla-space-lg);
}

.fdcla-band-dark h1,
.fdcla-band-dark h2,
.fdcla-band-dark .fdcla-section-head {
  color: var(--fdcla-text-on-purple);
}

.fdcla-band-dark a { color: var(--fdcla-white); }