@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&family=Permanent+Marker&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  --bg-dark: #121212;
  --bg-darker: #0d0d0d;
  --bg-surface: #1a1a1a;
  --fire-red: #ff2e2e;
  --mustard-yellow: #ffb800;
  --chalk-white: #ffffff;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-dark);
  color: #f3f4f6;
  overflow-x: hidden;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

main, .site-main {
  width: 100%;
  max-width: 100%;
}

/* Typography classes */
.font-display {
  font-family: 'Bebas Neue', 'Anton', sans-serif;
  letter-spacing: 0.05em;
}

.font-street {
  font-family: 'Permanent Marker', cursive;
}

.font-heading {
  font-family: 'Space Grotesk', sans-serif;
}

/* Subtle Matte Asphalt Noise Texture Overlay */
.asphalt-noise {
  background-image: radial-gradient(circle at 50% 50%, rgba(26, 26, 26, 0.4) 0%, rgba(18, 18, 18, 0.95) 100%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.045'/%3E%3C/svg%3E");
}

/* Red and White Diner Checkered Paper Pattern */
.checkered-paper {
  background-color: #ffffff;
  background-image: 
    linear-gradient(45deg, #ff2e2e 25%, transparent 25%),
    linear-gradient(-45deg, #ff2e2e 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ff2e2e 75%),
    linear-gradient(-45deg, transparent 75%, #ff2e2e 75%);
  background-size: 26px 26px;
  background-position: 0 0, 0 13px, 13px -13px, -13px 0px;
}

/* Solid Sticker Shadows (Streetwear Neo-Brutalism) */
.sticker-shadow-sm {
  box-shadow: 3px 3px 0px #000000;
}

.sticker-shadow {
  box-shadow: 5px 5px 0px #000000;
}

.sticker-shadow-lg {
  box-shadow: 8px 8px 0px #000000;
}

.sticker-shadow-yellow {
  box-shadow: 5px 5px 0px #ffb800;
}

.sticker-shadow-red {
  box-shadow: 5px 5px 0px #ff2e2e;
}

.sticker-shadow-white {
  box-shadow: 5px 5px 0px #ffffff;
}

/* Street badge cut corner effect */
.cut-corner {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.cut-corner-diagonal {
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

/* Polaroid Photo Card styling */
.polaroid-card {
  background-color: #ffffff;
  padding: 10px 10px 32px 10px;
  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.9);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.polaroid-card:hover {
  transform: translateY(-8px) scale(1.03) rotate(0deg) !important;
  box-shadow: 10px 10px 0px #ffb800;
  z-index: 30;
}

/* Sticker Micro-interactions & Animations */
@keyframes subtleWiggle {
  0%, 100% {
    transform: rotate(var(--base-rot, 0deg)) translateY(0px);
  }
  25% {
    transform: rotate(calc(var(--base-rot, 0deg) + 4deg)) translateY(-4px);
  }
  50% {
    transform: rotate(var(--base-rot, 0deg)) translateY(-7px);
  }
  75% {
    transform: rotate(calc(var(--base-rot, 0deg) - 4deg)) translateY(-3px);
  }
}

.animate-sticker-wiggle {
  animation: subtleWiggle 3.2s ease-in-out infinite;
}

.animate-sticker-wiggle-delayed {
  animation: subtleWiggle 3.2s ease-in-out 1.6s infinite;
}

.sticker-interactive {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}

.sticker-interactive:hover {
  transform: scale(1.12) rotate(6deg) !important;
  filter: drop-shadow(0 0 12px rgba(255, 184, 0, 0.6));
}

@keyframes urgencyBlink {
  0%, 100% {
    opacity: 1;
    transform: scale(1) rotate(-3deg);
  }
  50% {
    opacity: 0.82;
    transform: scale(1.05) rotate(-3deg);
    box-shadow: 0 0 14px rgba(255, 46, 46, 0.9);
  }
}

.animate-urgency {
  animation: urgencyBlink 1.8s ease-in-out infinite;
}

/* Animations */
@keyframes floatSlight {
  0%, 100% {
    transform: translateY(0px) rotate(var(--rot, 0deg));
  }
  50% {
    transform: translateY(-8px) rotate(var(--rot, 0deg));
  }
}

.animate-float {
  animation: floatSlight 4s ease-in-out infinite;
}

.animate-float-delayed {
  animation: floatSlight 4s ease-in-out 2s infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(255, 46, 46, 0.4);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 46, 46, 0.8), 0 0 10px rgba(255, 184, 0, 0.6);
  }
}

.pulse-glow {
  animation: pulseGlow 2.5s infinite;
}

/* Ticker marquee animation */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 25s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #121212;
}
::-webkit-scrollbar-thumb {
  background: #ff2e2e;
  border-radius: 4px;
  border: 2px solid #121212;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffb800;
}

/* Sound Wave Animation */
@keyframes wave {
  0%, 100% { height: 4px; }
  50% { height: 16px; }
}

.wave-bar:nth-child(1) { animation: wave 1s ease-in-out infinite; }
.wave-bar:nth-child(2) { animation: wave 1s ease-in-out 0.2s infinite; }
.wave-bar:nth-child(3) { animation: wave 1s ease-in-out 0.4s infinite; }
.wave-bar:nth-child(4) { animation: wave 1s ease-in-out 0.6s infinite; }

/* Modal backdrop transition */
.modal-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}



/* ======================================================== */
/* WORDPRESS CORE & ACCESSIBILITY HELPERS (TEMA BASE 2.0.0) */
/* ======================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus,
.tb-skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
	padding: 12px 18px;
	background: #ff2e2e;
	color: #ffffff;
	font-weight: 700;
	border: 2px solid #000000;
	border-radius: 8px;
	box-shadow: 4px 4px 0px #000000;
}

.tb-skip-link {
	position: absolute;
	left: -9999px;
}

/* Post Typography & Entry Meta for Blog & Standard Pages */
.tb-entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #9ca3af;
}

.tb-entry-meta time {
	color: #ffb800;
}

.tb-entry-meta .byline {
	color: #ffffff;
}

.tb-prose {
	font-size: 1.05rem;
	line-height: 1.75;
	color: #e5e7eb;
}

.tb-prose h2,
.tb-prose h3,
.tb-prose h4 {
	font-family: 'Bebas Neue', 'Anton', sans-serif;
	letter-spacing: 0.05em;
	color: #ffffff;
	text-transform: uppercase;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

.tb-prose h2 { font-size: 2.25rem; }
.tb-prose h3 { font-size: 1.75rem; }
.tb-prose h4 { font-size: 1.35rem; }

.tb-prose p {
	margin-bottom: 1.25rem;
}

.tb-prose a {
	color: #ffb800;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.tb-prose a:hover {
	color: #ff2e2e;
}

.tb-prose blockquote {
	margin: 2rem 0;
	padding: 1rem 1.5rem;
	border-left: 4px solid #ff2e2e;
	background: #1a1a1a;
	border-radius: 0 12px 12px 0;
	font-style: italic;
	color: #f3f4f6;
}

.tb-prose img {
	border-radius: 16px;
	border: 3px solid #000000;
	box-shadow: 6px 6px 0px #000000;
	margin: 1.5rem 0;
}

/* WordPress Default Alignments */
.alignwide {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
	margin-right: 1.5rem;
	margin-bottom: 1.5rem;
}

.alignright {
	float: right;
	margin-left: 1.5rem;
	margin-bottom: 1.5rem;
}

/* Pagination */
.tb-pagination .nav-links {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.tb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #1a1a1a;
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
	border: 2px solid rgba(255, 255, 255, 0.1);
	transition: all 0.2s ease;
}

.tb-pagination .page-numbers:hover,
.tb-pagination .current {
	background: #ff2e2e;
	color: #ffffff;
	border-color: #000000;
	box-shadow: 3px 3px 0px #000000;
}

/* Comment Form Styling */
.tb-comments input[type="text"],
.tb-comments input[type="email"],
.tb-comments input[type="url"],
.tb-comments textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	background: #121212;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	margin-top: 0.35rem;
	margin-bottom: 1rem;
	font-size: 0.875rem;
}

.tb-comments input:focus,
.tb-comments textarea:focus {
	outline: none;
	border-color: #ffb800;
}

.tb-comments .form-submit input[type="submit"] {
	padding: 0.75rem 2rem;
	background: #ff2e2e;
	color: #ffffff;
	font-family: 'Bebas Neue', 'Anton', sans-serif;
	font-size: 1.25rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: 2px solid #000000;
	border-radius: 12px;
	box-shadow: 4px 4px 0px #000000;
	cursor: pointer;
	transition: all 0.2s ease;
}

.tb-comments .form-submit input[type="submit"]:hover {
	transform: scale(1.03);
	background: #e02020;
	box-shadow: 0 0 15px rgba(255, 46, 46, 0.6);
}