/*
Theme Name: RokasJ
Theme URI: https://rokasj.com
Author: Rokas
Description: A dark, minimal standalone theme with a blurred YouTube video background and scroll-reactive blog posts. Built from scratch — no page builder. Borrows Peregrine's Roboto type scale and accent colour.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rokasj
*/

:root{
--bg:#001100;
--surface:#062a0c;
--surface-2:#0a3a10;
--text:#c4d8c4;
--heading:#eafaea;
--muted:#7fa37f;
--accent:#3fe07d;
--accent-dark:#27a85b;
--border:rgba(120,220,140,.12);
  --maxw:1140px;
  --font:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:transparent;color:var(--text);font-family:var(--font);font-weight:400;font-size:16px;line-height:1.6;overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}
a{color:#e6e8ee;text-decoration:none;transition:color .2s;}
a:hover{color:var(--accent);}

h1,h2,h3,h4,h5,h6{color:var(--heading);margin:0 0 .6em;font-family:var(--font);line-height:1.2;}
h1{font-weight:700;font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.1;}
h2{font-weight:300;font-size:clamp(1.8rem,4vw,2.625rem);}
h3{font-weight:400;font-size:clamp(1.3rem,3vw,2.25rem);}
p{margin:0 0 1rem;}

/* ---- background video (fixed, behind everything) ---- */
.bg-video{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#000;}
.bg-video iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;transform:translate(-50%,-50%) scale(1.1);border:0;pointer-events:none;filter:blur(14px) brightness(.55) saturate(1.1);}
.bg-video__fallback{position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 30%,#1a1d26 0%,#0c0d10 70%);}
.bg-video__overlay{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,13,16,.45) 0%,rgba(12,13,16,.65) 60%,var(--bg) 100%);}

/* ---- fixed header ---- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.4rem clamp(1.25rem,4vw,3rem);transition:background .3s,padding .3s,box-shadow .3s;}
.site-header.is-scrolled{background:rgba(12,13,16,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.7rem clamp(1.25rem,4vw,3rem);box-shadow:0 1px 0 var(--border);}
.site-title{margin:0;font-family:var(--mono);font-weight:500;font-size:1rem;letter-spacing:.04em;color:var(--heading);}
.site-title a{color:inherit;}
.site-title a:hover{color:var(--accent);}

/* ---- hero ---- */
.hero{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:7rem 1.25rem 5rem;}
.hero__inner{max-width:780px;animation:rj-rise .9s cubic-bezier(.2,.7,.2,1) both;}
.hero__eyebrow{font-family:var(--mono);font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin:0 0 1.4rem;}
.hero h1{margin-bottom:1rem;}
.hero__sub{font-size:clamp(1rem,2.2vw,1.3rem);color:var(--text);max-width:42ch;margin:0 auto;}
.hero__scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);animation:rj-bob 2s ease-in-out infinite;}

@keyframes rj-rise{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
@keyframes rj-bob{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(6px);}}

/* ---- posts ---- */
.posts{position:relative;z-index:1;background:var(--bg);padding:clamp(3rem,8vw,7rem) clamp(1.25rem,4vw,3rem);}
.posts__inner{max-width:var(--maxw);margin:0 auto;}
.posts__head{margin-bottom:2.5rem;}
.posts__head .eyebrow{margin:0 0 .3rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);}
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;}

.card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:transform .3s,border-color .3s;}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;z-index:2;}
.card:hover{transform:translateY(-4px);border-color:rgba(63 255 125,.4);}
.card:hover::before{transform:scaleX(1);}
.card__thumb{display:block;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden;}
.card__thumb img{width:100%;height:100%;object-fit:cover;}
.card__body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.6rem;flex:1;}
.card__meta{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;}
.card__title{font-size:1.25rem;font-weight:500;line-height:1.3;margin:0;}
.card__title a{color:var(--heading);}
.card__title a:hover{color:var(--accent);}
.card__excerpt{font-size:.95rem;color:var(--text);margin:0;}
.card__more{margin-top:auto;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.reveal.is-visible{opacity:1;transform:none;}

/* ---- single post / page ---- */
.single-wrap{position:relative;z-index:1;background:var(--bg);padding:clamp(7rem,12vw,10rem) clamp(1.25rem,4vw,3rem) 5rem;}
.article{max-width:760px;margin:0 auto;}
.article__meta{margin:0 0 1rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.article__thumb{margin:2rem 0;border-radius:14px;overflow:hidden;border:1px solid var(--border);}
.article__content{font-size:1.05rem;}
.article__content p{margin:0 0 1.4rem;}
.article__content a{color:var(--accent);text-decoration:underline;}
.article__content h2,.article__content h3{margin-top:2rem;}
.article__content img{border-radius:10px;margin:1.5rem 0;}
.back-link{display:inline-block;margin-bottom:2rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.back-link:hover{color:var(--accent);}

/* ---- pagination ---- */
.pagination{margin-top:3rem;}
.pagination .nav-links{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;font-family:var(--mono);}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 .6rem;border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.85rem;}
.pagination .page-numbers.current,.pagination a.page-numbers:hover{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ---- footer ---- */
.site-footer{position:relative;z-index:1;background:var(--bg);border-top:1px solid var(--border);padding:2.5rem clamp(1.25rem,4vw,3rem);text-align:center;color:var(--muted);font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;}
.site-footer p{margin:0;}
.site-footer a{color:var(--muted);}
.site-footer a:hover{color:var(--accent);}

/* ---- empty state ---- */
.empty{max-width:var(--maxw);margin:0 auto;text-align:center;color:var(--muted);}

@media (max-width:600px){
  .posts-grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
  .reveal{opacity:1;transform:none;}
  .bg-video iframe{transform:translate(-50%,-50%);}
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---- accessibility: visually-hidden text (used by WP markup) ---- */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;word-wrap:normal!important;}
.screen-reader-text:focus{background:#14161b;border-radius:6px;clip:auto!important;clip-path:none;color:var(--heading);display:block;height:auto;left:1rem;padding:.6rem 1rem;top:1rem;width:auto;z-index:100000;}