/*
Theme Name: UpInThePast - Official Theme
Theme URI: https://upinthepast.com
Author: UpInThePast.com
Description: Official UpInThePast.com theme - based on your orange splat + VHS logo. Black Memphis background, neon, no dev text on frontend.
Version: 2.0.0
License: GPL v2
*/

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Fredoka:wght@600;700&family=Baloo+2:wght@700;800&display=swap');

:root{
  --orange:#ff7a00;
  --orange-splat:#ff6a00;
  --teal:#00e5c0;
  --teal-dark:#00b4d8;
  --purple:#a020f0;
  --pink:#ff6bff;
  --yellow:#ffeb3b;
  --black:#080810;
}

*{box-sizing:border-box}
html,body{margin:0; padding:0; background:var(--black); color:white; font-family:'Fredoka', sans-serif; overflow-x:hidden}

body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,122,0,0.08) 0 2%, transparent 2.5%),
    radial-gradient(circle at 90% 10%, rgba(0,229,192,0.08) 0 1.5%, transparent 2%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><g stroke="%23333" stroke-width="0.8" fill="none" opacity="0.35"><path d="M20 100 L40 80 L60 100 L80 85"/><path d="M200 50 Q220 10 240 50"/><circle cx="120" cy="120" r="8"/><triangle points="300,40 310,20 320,40"/><rect x="500" y="60" width="14" height="14" transform="rotate(15 507 67)"/><path d="M600 120 L620 100 L640 120"/><circle cx="700" cy="150" r="6"/><path d="M50 300 L70 280 L90 300"/><circle cx="150" cy="350" r="5"/></g></svg>');
}

a{color:var(--teal); text-decoration:none}
a:hover{color:var(--orange)}

.uip-header{
  position:sticky; top:0; z-index:50;
  background:rgba(8,8,16,0.9); backdrop-filter:blur(10px);
  border-bottom:2px solid rgba(255,255,255,0.1);
  padding:12px 24px;
  display:flex; justify-content:space-between; align-items:center;
}
.uip-logo-top{
  font-family:'Bangers'; font-size:24px; letter-spacing:1px; color:white;
  background:var(--orange); border:3px solid white; border-radius:30px; padding:6px 18px;
  transform:rotate(-1deg); box-shadow:0 0 15px rgba(255,122,0,0.5);
  text-shadow:1px 1px 0 black;
}
.uip-nav a{
  font-family:'Bangers'; font-size:16px; color:white; margin-left:14px;
  letter-spacing:0.5px; opacity:0.9;
}
.uip-nav a:hover{color:var(--orange); text-shadow:0 0 8px var(--orange)}

/* HERO based on your logo */
.uip-hero{
  max-width:1200px; margin:0 auto; padding:50px 24px 30px;
  text-align:center; position:relative;
}
.uip-hero-splat-wrap{position:relative; display:inline-block; margin:0 auto}
.uip-hero-splat{
  background:var(--orange-splat);
  width:520px; max-width:90vw; aspect-ratio:1.2; 
  border-radius:60% 40% 50% 50% / 50% 60% 40% 50%;
  position:relative; display:grid; place-items:center;
  box-shadow:0 0 0 8px rgba(0,0,0,0.5), 0 20px 50px rgba(255,122,0,0.4);
  animation:float 6s ease-in-out infinite;
  padding:20px;
}
@keyframes float{0%,100%{transform:rotate(-1deg) translateY(0)}50%{transform:rotate(1deg) translateY(-8px)}}

.uip-hero-top-text{
  position:absolute; top:-18px; left:50%; transform:translateX(-50%) rotate(-4deg);
  font-family:'Baloo 2'; font-weight:800; font-size:18px; letter-spacing:2px;
  color:#7af8ff; text-shadow:0 0 10px #00e5ff, 0 0 20px #00e5ff;
  white-space:nowrap; background:rgba(0,0,0,0.6); padding:2px 12px; border-radius:20px;
}

.uip-hero-main{
  font-family:'Bangers'; line-height:0.9; text-transform:uppercase;
}
.uip-hero-up{
  font-size:72px; color:#ffe066; text-shadow:0 0 0 black, 0 3px 0 #ff7a00, 0 0 20px #ff7a00, 0 0 40px #ff7a00;
  display:block; letter-spacing:2px;
}
.uip-hero-the{
  display:inline-block; background:var(--purple); color:#ffe066; border:3px solid white;
  border-radius:50%; width:70px; height:70px; line-height:64px; font-size:32px;
  box-shadow:0 0 15px var(--purple); transform:rotate(-5deg); margin:-10px 0;
  text-shadow:1px 1px 0 black;
}
.uip-hero-past{
  display:block; font-size:82px;
  background:linear-gradient(to bottom, #7af8ff 0%, #00e5c0 50%, #0088aa 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 0 black) drop-shadow(0 0 15px rgba(0,229,192,0.6));
  letter-spacing:3px;
}

.uip-vhs-icon{
  margin-top:10px; border:2px solid #00e5c0; border-radius:12px; padding:6px 18px;
  display:inline-flex; flex-direction:column; align-items:center;
  box-shadow:0 0 12px rgba(0,229,192,0.5), inset 0 0 12px rgba(0,229,192,0.2);
}
.uip-vhs-icon span{font-family:monospace; font-size:13px; color:var(--pink); letter-spacing:2px; text-shadow:0 0 8px var(--pink)}
.uip-vhs-tape{
  width:120px; height:14px; border:2px solid var(--pink); border-radius:4px; margin-top:4px;
  background:linear-gradient(90deg, transparent 10%, var(--pink) 10% 90%, transparent 90%);
  box-shadow:0 0 8px var(--pink);
}

/* VIDEO GRID */
.uip-section{max-width:1200px; margin:50px auto; padding:0 24px}
.uip-section-title{
  font-family:'Bangers'; font-size:32px; color:white; margin:0 0 20px;
  display:flex; align-items:center; gap:12px;
}
.uip-section-title:before{content:''; width:8px; height:32px; background:var(--orange); border-radius:4px; box-shadow:0 0 10px var(--orange)}
.uip-section-title span{color:var(--teal); text-shadow:0 0 10px var(--teal)}

.uip-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:20px}
.uip-card{
  background:#12121a; border:1px solid rgba(255,255,255,0.1); border-radius:16px; overflow:hidden;
  transition:0.2s; position:relative;
}
.uip-card:hover{transform:translateY(-4px); border-color:var(--orange); box-shadow:0 10px 30px rgba(0,0,0,0.6), 0 0 20px rgba(255,122,0,0.2)}
.uip-card-thumb{aspect-ratio:16/9; background:black; position:relative; overflow:hidden}
.uip-card-thumb img{width:100%; height:100%; object-fit:cover; transition:0.3s}
.uip-card:hover .uip-card-thumb img{transform:scale(1.05)}
.uip-card-thumb::after{content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.12) 2px 3px); pointer-events:none}
.uip-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; background:rgba(0,0,0,0.7); border:2px solid var(--orange); border-radius:50%; display:grid; place-items:center; color:white; font-size:22px; backdrop-filter:blur(4px); box-shadow:0 0 15px rgba(255,122,0,0.5)}
.uip-card-body{padding:14px}
.uip-card-title{font-weight:700; font-size:16px; line-height:1.3; color:white}
.uip-card-meta{font-size:11px; color:rgba(255,255,255,0.5); margin-top:6px; letter-spacing:1px; text-transform:uppercase}
.uip-card-meta b{color:var(--orange)}

.uip-footer{text-align:center; padding:40px 20px; border-top:1px solid rgba(255,255,255,0.08); margin-top:80px; color:rgba(255,255,255,0.4); font-size:12px}
.uip-footer b{color:white}

/* Single post - video player */
.uip-player-wrap{max-width:900px; margin:30px auto; padding:0 24px}
.uip-player{
  background:#000; border:2px solid rgba(255,255,255,0.1); border-radius:20px; overflow:hidden;
  aspect-ratio:16/9; position:relative; box-shadow:0 20px 60px rgba(0,0,0,0.8);
}
.uip-player iframe{width:100%; height:100%; border:0}
.uip-player-overlay{position:absolute; top:12px; left:12px; background:rgba(0,0,0,0.7); border:1px solid rgba(255,255,255,0.2); border-radius:20px; padding:4px 10px; font-size:10px; letter-spacing:1px}
.uip-single-title{font-family:'Bangers'; font-size:42px; color:white; line-height:0.95; margin:20px 0 10px; letter-spacing:1px}
.uip-single-title span{color:var(--orange)}