/* Partyactivo – teljes lábléc (footer-pa.html); index.php közösségi ikonokkal kiegészül */
/* ═══════════════════════════════════════════════════
   PA-FOOTER  –  design system tokenek
═══════════════════════════════════════════════════ */
.pa-footer-root {
  --pf-bg:       #0d0820;
  --pf-acc:      #ffd166;
  --pf-acc2:     #ff6b35;
  --pf-t1:       #ef476f;
  --pf-t2:       #06d6a0;
  --pf-purple:   #7b2fff;
  --pf-text:     #f0eaff;
  --pf-muted:    rgba(255,255,255,0.35);
  --pf-border:   rgba(255,255,255,0.07);
  --pf-surface:  rgba(255,255,255,0.03);
}

.pa-footer-root {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, transparent 0%, rgba(123,47,255,0.055) 100%);
  font-family: 'Nunito', sans-serif;
  color: var(--pf-text);
}

.pf-topline {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent      0%,
    var(--pf-purple) 15%,
    var(--pf-acc2)   35%,
    var(--pf-acc)    50%,
    var(--pf-t2)     65%,
    var(--pf-t1)     80%,
    transparent      100%
  );
  background-size: 200% 100%;
  animation: pf-slide 4s linear infinite;
}
@keyframes pf-slide {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.pf-bgwords {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.pf-bgw {
  position: absolute;
  font-family: 'Boogaloo', cursive;
  font-size: .78rem;
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.035);
  color: rgba(255,255,255,0.035);
  white-space: nowrap;
  user-select: none;
}

.pf-inner { position: relative; z-index: 1; }

.pf-hero {
  text-align: center;
  padding: 56px 24px 44px;
}
.pf-hero-eyebrow {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 18px;
}
.pf-hero-wordmark {
  font-family: 'Boogaloo', cursive;
  font-size: 2rem;
  line-height: .9;
  letter-spacing: 7px;
  background: linear-gradient(135deg, #ffd166 0%, #ff6b35 30%, #ef476f 60%, #7b2fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
}
.pf-hero-desc {
  font-size: .88rem;
  color: rgba(255,255,255,0.32);
  max-width: 340px;
  margin: 0 auto 28px;
  line-height: 1.75;
}

.pf-social-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 8px;
  flex-wrap: wrap;
}
.footer-social {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.5);
  transition: all .2s;
  text-decoration: none;
}
.footer-social a:hover {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
  transform: translateY(-2px);
}
.footer-social svg { width: 18px; height: 18px; }

.pf-catstrip {
  display: flex;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 32px;
}
.pf-cat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 11px 4px;
  cursor: default;
  transition: opacity .2s;
  position: relative;
}
.pf-cat::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  transform: scaleX(0.5);
  transition: transform .25s;
}
.pf-cat:hover::after  { transform: scaleX(1); }
.pf-cat:hover         { opacity: .85; }

.pf-cat-icon  { font-size: 1.15rem; }
.pf-cat-label {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  opacity: .65;
}

.pf-cat.draw  { background: rgba(255,107,53,.09);  color: #ff8c5a; }
.pf-cat.draw::after  { background: #ff6b35; box-shadow: 0 0 8px rgba(255,107,53,.7); }
.pf-cat.mime  { background: rgba(6,214,160,.08);   color: #06d6a0; }
.pf-cat.mime::after  { background: #06d6a0; box-shadow: 0 0 8px rgba(6,214,160,.7); }
.pf-cat.word  { background: rgba(123,47,255,.09);  color: #b57bff; }
.pf-cat.word::after  { background: #7b2fff; box-shadow: 0 0 8px rgba(123,47,255,.7); }
.pf-cat.mix   { background: rgba(239,71,111,.09);  color: #ef476f; }
.pf-cat.mix::after   { background: #ef476f; box-shadow: 0 0 8px rgba(239,71,111,.7); }

.pf-sep {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 960px;
  margin: 32px auto 0;
  padding: 0 32px;
}
.pf-sep-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07));
}
.pf-sep-line.r {
  background: linear-gradient(90deg, rgba(255,255,255,.07), transparent);
}
.pf-sep-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.035);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.pf-grid {
  max-width: 960px;
  margin: 0 auto;
  padding: 36px 32px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
}
@media (max-width: 680px) {
  .pf-grid { grid-template-columns: 1fr 1fr; gap: 28px 0; }
}
@media (max-width: 380px) {
  .pf-grid { grid-template-columns: 1fr; }
}

.pf-col { padding: 0 20px 0 0; }

.pf-col-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
}
.pf-col-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pf-col-dot.d-orange { background: #ff6b35; box-shadow: 0 0 7px rgba(255,107,53,.9); }
.pf-col-dot.d-teal   { background: #06d6a0; box-shadow: 0 0 7px rgba(6,214,160,.9); }
.pf-col-dot.d-purple { background: #7b2fff; box-shadow: 0 0 7px rgba(123,47,255,.9); }
.pf-col-dot.d-pink   { background: #ef476f; box-shadow: 0 0 7px rgba(239,71,111,.9); }

.pf-col-title {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

.pf-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pf-links li a {
  display: inline-flex;
  align-items: center;
  font-size: .82rem;
  color: rgba(255,255,255,.3);
  text-decoration: none;
  padding: 5px 0;
  transition: color .18s, padding-left .18s;
  position: relative;
}
.pf-links li a::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 1px;
  background: currentColor;
  margin-right: 0;
  transition: width .18s, margin-right .18s;
  vertical-align: middle;
  flex-shrink: 0;
}
.pf-links li a:hover {
  color: rgba(255,255,255,.88);
  padding-left: 10px;
}
.pf-links li a:hover::before {
  width: 6px;
  margin-right: 6px;
}

.pf-badge-new {
  display: inline-block;
  margin-left: 6px;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .5px;
  background: rgba(255,107,53,.16);
  color: #ff8c5a;
  border: 1px solid rgba(255,107,53,.3);
  padding: 1px 5px;
  border-radius: 4px;
  vertical-align: middle;
}
.pf-badge-hot {
  display: inline-block;
  margin-left: 5px;
  font-size: .55rem;
  font-weight: 700;
  background: rgba(239,71,111,.16);
  color: #ef476f;
  border: 1px solid rgba(239,71,111,.3);
  padding: 1px 5px;
  border-radius: 4px;
  vertical-align: middle;
}

.pf-bottom {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 32px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.pf-bottom-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pf-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(6,214,160,.22);
  background: rgba(6,214,160,.07);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #06d6a0;
}
.pf-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #06d6a0;
  animation: pf-liveblink 2s ease-in-out infinite;
}
@keyframes pf-liveblink {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .25; transform: scale(1.5); }
}

.pf-copy {
  font-size: .7rem;
  color: rgba(255,255,255,.2);
}
.pf-copy a {
  color: rgba(255,255,255,.32);
  text-decoration: none;
  transition: color .2s;
}
.pf-copy a:hover { color: rgba(255,255,255,.65); }

.pf-legal {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.pf-legal a {
  font-size: .7rem;
  color: rgba(255,255,255,.2);
  text-decoration: none;
  transition: color .2s;
}
.pf-legal a:hover { color: rgba(255,255,255,.6); }

@media (max-width: 600px) {
  .pf-hero { padding: 40px 20px 32px; }
  .pf-catstrip, .pf-sep, .pf-grid, .pf-bottom {
    padding-left: 20px;
    padding-right: 20px;
  }
  .pf-cat-label { display: none; }
  .pf-bottom { flex-direction: column; align-items: flex-start; }
}

[data-theme="light"] .pa-footer-root {
  --pf-text: var(--text, #1a1035);
  --pf-muted: var(--muted, #5a4080);
  --pf-border: var(--border, rgba(0, 0, 0, 0.08));
  --pf-surface: rgba(0, 0, 0, 0.03);
  color: var(--pf-text);
  background: linear-gradient(180deg, var(--bg, #f4f0ff) 0%, rgba(123, 47, 255, 0.06) 100%);
}
[data-theme="light"] .pf-bgw          { color: rgba(0,0,0,.04); border-color: rgba(0,0,0,.04); }
[data-theme="light"] .pf-hero-eyebrow { color: rgba(0,0,0,.35); }
[data-theme="light"] .pf-hero-desc    { color: rgba(0,0,0,.45); }
[data-theme="light"] .pf-sep-icon     { border-color: rgba(0,0,0,.1); background: rgba(0,0,0,.03); }
[data-theme="light"] .pf-col-title    { color: rgba(0,0,0,.35); }
[data-theme="light"] .pf-links li a   { color: rgba(0,0,0,.4); }
[data-theme="light"] .pf-links li a:hover { color: rgba(0,0,0,.85); }
[data-theme="light"] .pf-bottom       { border-top-color: rgba(0,0,0,.07); }
[data-theme="light"] .pf-copy         { color: rgba(0,0,0,.35); }
[data-theme="light"] .pf-copy a       { color: rgba(0,0,0,.5); }
[data-theme="light"] .pf-legal a      { color: rgba(0,0,0,.35); }
[data-theme="light"] .pf-legal a:hover { color: rgba(0,0,0,.75); }
[data-theme="light"] .pf-copy a:hover  { color: rgba(0,0,0,.75); }
[data-theme="light"] .pf-cat.draw   { background: rgba(255,107,53,.1); }
[data-theme="light"] .pf-cat.mime   { background: rgba(6,214,160,.1); }
[data-theme="light"] .pf-cat.word   { background: rgba(123,47,255,.1); }
[data-theme="light"] .pf-cat.mix    { background: rgba(239,71,111,.1); }
[data-theme="light"] .pf-sep-line, [data-theme="light"] .pf-sep-line.r {
  background: rgba(0,0,0,.08);
}
[data-theme="light"] .footer-social a { background: rgba(0,0,0,.06); color: rgba(0,0,0,.5); }
[data-theme="light"] .footer-social a:hover { background: rgba(0,0,0,.12); color: rgba(0,0,0,.9); }