/* July 4th Patriotic Theme */
:root {
  --patriot-red: #e31c23;
  --patriot-white: #ffffff;
  --patriot-blue: #002868;
}

/* July 4th Banner - Top stripe */
.july4th-banner {
  width: 100%;
  height: 16px;
  background: repeating-linear-gradient(
    90deg,
    var(--patriot-red) 0px,
    var(--patriot-red) 30px,
    var(--patriot-white) 30px,
    var(--patriot-white) 60px
  );
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: none;
  box-shadow: 0 4px 12px rgba(227, 28, 35, 0.6);
  border-bottom: 2px solid var(--patriot-blue);
}

body[data-july4th-mode='active'] .july4th-banner {
  display: block;
}

/* Patriotic message banner */
body[data-july4th-mode='active']::before {
  content: '🇺🇸 HAPPY 4TH OF JULY 🇺🇸';
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--patriot-blue) 0%, var(--patriot-red) 50%, var(--patriot-blue) 100%);
  color: var(--patriot-white);
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 3px;
  z-index: 99;
  box-shadow: 0 6px 20px rgba(227, 28, 35, 0.8), 0 0 30px rgba(0, 40, 104, 0.6);
  animation: july4thBounce 0.8s ease-in-out;
  pointer-events: none;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  border: 3px solid var(--patriot-white);
}

@keyframes july4thBounce {
  0% {
    transform: translateX(-50%) translateY(-30px);
    opacity: 0;
  }
  50% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-8px);
    opacity: 1;
  }
}

/* Patriotic navigation icons */
body[data-july4th-mode='active'] .nav-btn:nth-child(1) .nav-icon svg {
  fill: var(--patriot-red);
  filter: drop-shadow(0 0 4px rgba(227, 28, 35, 0.8));
}

body[data-july4th-mode='active'] .nav-btn:nth-child(2) .nav-icon svg {
  fill: var(--patriot-blue);
  filter: drop-shadow(0 0 4px rgba(0, 40, 104, 0.8));
}

body[data-july4th-mode='active'] .nav-btn:nth-child(3) .nav-icon svg {
  fill: var(--patriot-red);
  filter: drop-shadow(0 0 4px rgba(227, 28, 35, 0.8));
}

body[data-july4th-mode='active'] .nav-btn:nth-child(4) .nav-icon svg {
  fill: var(--patriot-blue);
  filter: drop-shadow(0 0 4px rgba(0, 40, 104, 0.8));
}

body[data-july4th-mode='active'] .nav-btn:nth-child(5) .nav-icon svg {
  fill: var(--patriot-red);
  filter: drop-shadow(0 0 4px rgba(227, 28, 35, 0.8));
}

body[data-july4th-mode='active'] .nav-btn:nth-child(6) .nav-icon svg {
  fill: var(--patriot-blue);
  filter: drop-shadow(0 0 4px rgba(0, 40, 104, 0.8));
}

body[data-july4th-mode='active'] .nav-btn:nth-child(7) .nav-icon svg {
  fill: var(--patriot-red);
  filter: drop-shadow(0 0 4px rgba(227, 28, 35, 0.8));
}

/* Patriotic brand logo */
body[data-july4th-mode='active'] .brand-logo {
  border: 4px solid var(--patriot-red);
  box-shadow: 0 0 16px rgba(227, 28, 35, 1), 0 0 32px rgba(0, 40, 104, 0.7), inset 0 0 12px rgba(227, 28, 35, 0.4);
  background: linear-gradient(135deg, rgba(0, 40, 104, 0.3), rgba(227, 28, 35, 0.3));
}

/* Patriotic buttons */
body[data-july4th-mode='active'] .btn-primary,
body[data-july4th-mode='active'] button[type='submit'] {
  background: linear-gradient(135deg, var(--patriot-red), var(--patriot-blue)) !important;
  border: 2px solid var(--patriot-white) !important;
  border-color: var(--patriot-red) !important;
  color: white !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(227, 28, 35, 0.6) !important;
}

body[data-july4th-mode='active'] .btn-primary:hover,
body[data-july4th-mode='active'] button[type='submit']:hover {
  filter: brightness(1.2);
  box-shadow: 0 6px 16px rgba(227, 28, 35, 0.8) !important;
}

/* Patriotic active nav items */
body[data-july4th-mode='active'] .nav-btn.active {
  border: 2px solid var(--patriot-red) !important;
  background: rgba(227, 28, 35, 0.25) !important;
  box-shadow: inset 0 0 8px rgba(227, 28, 35, 0.3);
}

/* Patriotic post borders */
body[data-july4th-mode='active'] .feed-item,
body[data-july4th-mode='active'] .post-card {
  border: 2px solid var(--patriot-red) !important;
  border-left: 4px solid var(--patriot-blue) !important;
  box-shadow: 0 2px 8px rgba(227, 28, 35, 0.3) !important;
}

/* Patriotic text highlights */
body[data-july4th-mode='active'] strong {
  color: var(--patriot-red);
  font-weight: 900;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

body[data-july4th-mode='active'] .badge-founder,
body[data-july4th-mode='active'] .badge-plus {
  background: linear-gradient(135deg, var(--patriot-blue), var(--patriot-red)) !important;
  color: white !important;
  border: 2px solid var(--patriot-white) !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(227, 28, 35, 0.6) !important;
}

/* Patriotic links */
body[data-july4th-mode='active'] a {
  color: var(--patriot-red) !important;
  font-weight: 600;
}

body[data-july4th-mode='active'] a:hover {
  color: var(--patriot-blue) !important;
  text-decoration: underline;
}

/* Fireworks effect */
.july4th-fireworks {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 101;
}

.firework-burst {
  position: absolute;
  font-size: 28px;
  animation: fireworkExplode 1.2s ease-out forwards;
  text-shadow: 0 0 8px rgba(227, 28, 35, 0.8);
}

@keyframes fireworkExplode {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2.5) translateY(-80px);
  }
}

/* Patriotic background accent */
body[data-july4th-mode='active'] .app-shell {
  background: linear-gradient(
    135deg,
    rgba(0, 40, 104, 0.04),
    rgba(227, 28, 35, 0.04)
  );
}

body[data-july4th-mode='active'] .content {
  border: 2px solid var(--patriot-red) !important;
  border-left: 4px solid var(--patriot-blue) !important;
  box-shadow: inset 0 0 30px rgba(227, 28, 35, 0.08), 0 4px 12px rgba(227, 28, 35, 0.2) !important;
}

body[data-july4th-mode='active'] .right-rail {
  border: 2px solid var(--patriot-blue) !important;
  box-shadow: 0 4px 12px rgba(0, 40, 104, 0.2) !important;
}

body[data-july4th-mode='active'] .left-rail {
  border-right: 4px solid var(--patriot-red) !important;
}