/*
Theme Name: V3ndta
Theme URI: https://v3ndta.co.uk
Author: V3ndta
Author URI: https://v3ndta.co.uk
Description: V3ndta — dedicated to ethical hacking and digital privacy. Dark terminal aesthetic for the UK resistance.
Version: 1.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: v3ndta
Tags: dark, blog, custom-menu, featured-images, accessibility-ready
*/

/* ============================================
   BRAND TOKENS
   ============================================ */
:root {
    --color-bg:          #0d0d0d;
    --color-bg-card:     #1a1a1a;
    --color-bg-footer:   #0a0a0a;
    --color-border:      #2d2d2d;
    --color-border-glow: rgba(0,255,65,0.2);
    --color-green:       #00ff41;
    --color-green-dark:  #00cc33;
    --color-gold:        #ffd700;
    --color-red:         #ff3b3b;
    --color-white:       #ffffff;
    --color-text:        #cccccc;
    --color-muted:       #888888;
    --font-mono: 'JetBrains Mono','Share Tech Mono','Courier New',monospace;
    --font-body: 'Inter','IBM Plex Sans',system-ui,sans-serif;
    --container: 1100px;
    --header-h: 70px;
}

/* ============================================
   RESET & BASE
   ============================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    background:var(--color-bg);
    color:var(--color-text);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
::-webkit-scrollbar{width:7px}
::-webkit-scrollbar-track{background:var(--color-bg)}
::-webkit-scrollbar-thumb{background:var(--color-green-dark);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--color-green)}

h1,h2,h3,h4,h5,h6{
    font-family:var(--font-mono);
    color:var(--color-green);
    text-transform:uppercase;
    letter-spacing:.05em;
    line-height:1.3;
    margin-top:0;
}
a{color:var(--color-green-dark);text-decoration:none;transition:color .2s,text-shadow .2s}
a:hover,a:focus{color:var(--color-green);text-shadow:0 0 8px rgba(0,255,65,.35)}
a:focus-visible{outline:2px solid var(--color-green);outline-offset:3px;border-radius:2px}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 1.5rem}
.glow{text-shadow:0 0 8px rgba(0,255,65,.6),0 0 16px rgba(0,255,65,.3)}
.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute!important;white-space:nowrap;height:1px;width:1px;overflow:hidden}

/* ============================================
   HEADER
   ============================================ */
.site-header{
    position:fixed;top:0;left:0;width:100%;z-index:1000;
    background:rgba(13,13,13,.95);
    border-bottom:1px solid var(--color-green-dark);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.header-inner{
    display:flex;align-items:center;justify-content:space-between;
    height:var(--header-h);
    max-width:var(--container);margin:0 auto;padding:0 1.5rem;
}
.site-branding .site-title{margin:0;font-size:1.6rem;letter-spacing:.1em}
.site-branding .site-title a{color:var(--color-green);text-shadow:0 0 10px rgba(0,255,65,.35)}
.site-branding .site-title a::before{content:'> ';animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.main-navigation ul{margin:0;padding:0;list-style:none;display:flex;gap:.25rem}
.main-navigation a{
    color:var(--color-text);font-family:var(--font-mono);font-size:.78rem;
    text-transform:uppercase;letter-spacing:.1em;padding:6px 10px;
    border:1px solid transparent;transition:all .2s;display:block;
}
.main-navigation a:hover,
.main-navigation .current-menu-item>a,
.main-navigation .current_page_item>a{color:var(--color-green);border-color:var(--color-green);text-shadow:none}

.menu-toggle{
    display:none;background:none;border:1px solid var(--color-green);
    color:var(--color-green);font-size:1.4rem;cursor:pointer;
    padding:4px 10px;line-height:1;transition:all .2s;
}
.menu-toggle:hover{background:var(--color-green);color:#000}

/* Marquee */
.header-marquee{background:#111;border-top:1px solid var(--color-border);overflow:hidden;height:28px;display:flex;align-items:center}
.header-marquee p{
    white-space:nowrap;font-family:var(--font-mono);font-size:.7rem;
    color:var(--color-green);letter-spacing:.15em;margin:0;
    display:inline-block;animation:marquee 40s linear infinite;padding-left:100%;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ============================================
   MOBILE NAV
   ============================================ */
.mobile-nav-overlay{
    position:fixed;inset:0;background:rgba(13,13,13,.98);z-index:2000;
    display:flex;justify-content:center;align-items:center;flex-direction:column;
    transform:translateX(100%);transition:transform .4s cubic-bezier(.77,0,.175,1);
    backdrop-filter:blur(12px);
}
.mobile-nav-overlay.active{transform:translateX(0)}
.close-menu-toggle{
    position:absolute;top:1.5rem;right:1.5rem;background:none;
    border:1px solid var(--color-green);color:var(--color-green);
    font-size:1.8rem;cursor:pointer;width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
}
.mobile-nav ul{list-style:none;padding:0;margin:0;text-align:center}
.mobile-nav li{margin:1rem 0}
.mobile-nav a{
    font-family:var(--font-mono);font-size:1.6rem;color:var(--color-text);
    text-transform:uppercase;letter-spacing:.1em;padding:8px 20px;
    display:block;border:1px solid transparent;transition:all .2s;
}
.mobile-nav a:hover{color:var(--color-green);border-color:var(--color-green)}

/* ============================================
   CONTENT OFFSET
   ============================================ */
#content{padding-top:calc(var(--header-h) + 28px)}

/* ============================================
   HERO
   ============================================ */
.hero-section{
    position:relative;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    min-height:90vh;text-align:center;padding:4rem 1.5rem;
    background:var(--color-bg);overflow:hidden;
}
.scanline-overlay{
    position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(to bottom,transparent 0px,transparent 3px,rgba(0,0,0,.08) 3px,rgba(0,0,0,.08) 4px);
}
.hero-title{font-size:clamp(2.5rem,8vw,6rem);color:var(--color-green);margin:0 0 1rem;z-index:1}
.hero-subtitle{font-size:clamp(1rem,2.5vw,1.2rem);color:var(--color-muted);font-family:var(--font-body);margin:0 0 2.5rem;z-index:1}
.cta-button{
    position:relative;display:inline-block;background:transparent;
    border:2px solid var(--color-green);color:var(--color-green);
    padding:14px 32px;font-family:var(--font-mono);font-size:.9rem;
    text-transform:uppercase;letter-spacing:.15em;cursor:pointer;
    overflow:hidden;z-index:1;transition:color .25s;text-decoration:none;
}
.cta-button::before{
    content:'';position:absolute;top:0;left:-100%;
    width:100%;height:100%;background:var(--color-green);
    transition:left .25s;z-index:-1;
}
.cta-button:hover{color:#000;text-shadow:none}
.cta-button:hover::before{left:0}

/* ============================================
   POSTS GRID
   ============================================ */
.posts-section{padding:4rem 0}
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.75rem}

/* ============================================
   POST CARD
   ============================================ */
.post-card{
    background:var(--color-bg-card);border:1px solid var(--color-border);
    display:flex;flex-direction:column;overflow:hidden;
    transition:transform .25s,box-shadow .25s,border-color .25s;
}
.post-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,255,65,.1);border-color:var(--color-green-dark)}
.post-card-image{overflow:hidden;aspect-ratio:16/9}
.post-card-image a{display:block;height:100%}
.post-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.post-card:hover .post-card-image img{transform:scale(1.04)}
.post-card-content{padding:1.25rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex-grow:1}
.category-badge{
    background:var(--color-green);color:#000;padding:3px 10px;
    font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
    text-transform:uppercase;display:inline-block;margin-bottom:.9rem;align-self:flex-start;
}
.post-title{font-size:1.1rem;margin:0 0 .75rem;letter-spacing:.03em}
.post-title a{color:var(--color-white)}
.post-title a:hover{color:var(--color-green);text-shadow:none}
.post-excerpt{color:var(--color-muted);font-size:.9rem;flex-grow:1;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.read-more{color:var(--color-green-dark);font-family:var(--font-mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;align-self:flex-start}
.read-more:hover{color:var(--color-green)}

/* ============================================
   NEWSLETTER CTA
   ============================================ */
.newsletter-cta{
    text-align:center;padding:4rem 1.5rem;
    background:var(--color-bg-card);border:1px solid var(--color-border-glow);margin:4rem 0;
}
.newsletter-cta h2{font-size:clamp(1.8rem,4vw,2.4rem);margin-bottom:.75rem}
.newsletter-cta p{color:var(--color-muted);margin-bottom:2rem}
.newsletter-form{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.newsletter-form input[type="email"]{
    background:#111;border:1px solid var(--color-border);color:var(--color-text);
    padding:14px 16px;font-family:var(--font-mono);font-size:.9rem;width:300px;max-width:100%;transition:border-color .2s;
}
.newsletter-form input[type="email"]:focus{outline:none;border-color:var(--color-green);box-shadow:0 0 10px rgba(0,255,65,.2)}

/* ============================================
   PAGINATION
   ============================================ */
.nav-links{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;margin:3rem 0}
.page-numbers{font-family:var(--font-mono);font-size:.85rem;color:var(--color-text);border:1px solid var(--color-border);padding:8px 14px;transition:all .2s}
.page-numbers:hover,.page-numbers.current{background:var(--color-green);color:#000;border-color:var(--color-green);text-shadow:none}

/* ============================================
   SINGLE POST
   ============================================ */
.single-post-wrap{max-width:820px;margin:0 auto;padding:3rem 1.5rem}
.single-post-header{margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:1px solid var(--color-border)}
.single-post-header .entry-title{font-size:clamp(1.8rem,5vw,3rem);margin:1rem 0;color:var(--color-white)}
.single-post-header .entry-meta{color:var(--color-muted);font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em}
.single-post-header .entry-meta a{color:var(--color-text)}
.post-thumbnail{margin-bottom:2.5rem;border:1px solid var(--color-border)}
.post-thumbnail img{width:100%}

.entry-content{font-size:1.05rem;line-height:1.85}
.entry-content h2,.entry-content h3{margin-top:3rem;margin-bottom:1rem}
.entry-content h2{font-size:1.5rem}
.entry-content h3{font-size:1.2rem}
.entry-content h2::before{content:'// ';opacity:.5}
.entry-content h3::before{content:'> ';opacity:.5}
.entry-content p{margin-bottom:1.5rem}
.entry-content a{color:var(--color-green-dark);text-decoration:underline;text-underline-offset:3px}
.entry-content a:hover{color:var(--color-green)}
.entry-content blockquote{border-left:4px solid var(--color-green);background:var(--color-bg-card);margin:2rem 0;padding:1rem 1.5rem;font-style:italic}
.entry-content pre,
.entry-content code{font-family:var(--font-mono)}
.entry-content pre{background:#111;border:1px solid var(--color-border);color:var(--color-green);padding:1.25rem;overflow-x:auto;margin:1.5rem 0;font-size:.88rem;line-height:1.6}
.entry-content :not(pre)>code{background:var(--color-bg-card);color:var(--color-green-dark);padding:2px 7px;font-size:.88em;border:1px solid var(--color-border)}
.entry-content img{border:1px solid var(--color-border);margin:1.5rem 0}
.entry-content table{width:100%;border-collapse:collapse;margin:1.5rem 0}
.entry-content th{background:var(--color-green);color:#000;padding:10px 14px;font-family:var(--font-mono);font-size:.85rem;text-align:left}
.entry-content td{padding:10px 14px;border:1px solid var(--color-border)}
.entry-content tr:nth-child(even) td{background:var(--color-bg-card)}

.author-box{display:flex;align-items:flex-start;gap:1.5rem;padding:1.75rem;margin-top:3rem;background:var(--color-bg-card);border:1px solid var(--color-border);border-left:4px solid var(--color-green)}
.author-avatar img{border-radius:50%;border:2px solid var(--color-border)}
.author-title{margin:0 0 .5rem;font-size:1.1rem;color:var(--color-white)}
.author-bio{margin:0;color:var(--color-muted);font-size:.9rem}

.related-posts{margin-top:4rem;border-top:1px solid var(--color-border);padding-top:2.5rem}
.related-posts-title{font-size:1.5rem;text-align:center;margin-bottom:2rem}

/* ============================================
   SIDEBAR
   ============================================ */
.widget{background:var(--color-bg-card);border:1px solid var(--color-border);padding:1.5rem;margin-bottom:2rem}
.widget-title{font-family:var(--font-mono);font-size:.85rem;color:var(--color-green);text-transform:uppercase;letter-spacing:.12em;margin:0 0 1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--color-border)}
.widget ul{list-style:none;margin:0;padding:0}
.widget ul li{padding:5px 0;border-bottom:1px solid var(--color-border);font-size:.9rem}
.widget ul li:last-child{border-bottom:none}
.widget ul li a{color:var(--color-text)}
.widget ul li a:hover{color:var(--color-green)}
.search-form{display:flex}
.search-field{flex:1;background:#111;border:1px solid var(--color-border);border-right:none;color:var(--color-text);padding:10px 12px;font-family:var(--font-mono);font-size:.85rem}
.search-field:focus{outline:none;border-color:var(--color-green)}
.search-submit{background:var(--color-green);border:none;color:#000;padding:10px 16px;font-family:var(--font-mono);font-size:.85rem;cursor:pointer;text-transform:uppercase;transition:background .2s}
.search-submit:hover{background:var(--color-white)}
.tagcloud a{display:inline-block;background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-muted);padding:3px 9px;font-family:var(--font-mono);font-size:.72rem!important;text-transform:uppercase;letter-spacing:.1em;margin:3px;transition:all .2s}
.tagcloud a:hover{background:var(--color-green);color:#000;border-color:var(--color-green)}

/* ============================================
   ARCHIVE
   ============================================ */
.archive-header{padding:2.5rem 0;border-bottom:1px solid var(--color-border);margin-bottom:3rem}
.archive-title{font-size:clamp(1.5rem,4vw,2.5rem);margin:0}
.archive-description{color:var(--color-muted);margin-top:.75rem}

/* ============================================
   404
   ============================================ */
.error-404{text-align:center;padding:6rem 1.5rem;min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.error-404-ascii pre{font-family:var(--font-mono);color:var(--color-green);font-size:clamp(1.5rem,8vw,3.5rem);white-space:pre-wrap;line-height:1.2;margin-bottom:1.5rem;text-shadow:0 0 20px rgba(0,255,65,.4)}
.error-404 .page-title{color:var(--color-text);font-family:var(--font-mono);font-size:1rem;letter-spacing:.08em}
.back-to-home{display:inline-block;margin-top:2rem;color:var(--color-green);border:1px solid var(--color-green);padding:12px 24px;font-family:var(--font-mono);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;transition:all .2s}
.back-to-home:hover{background:var(--color-green);color:#000;text-shadow:none}

/* ============================================
   FOOTER
   ============================================ */
.site-footer{background:var(--color-bg-footer);color:var(--color-muted);padding:4rem 0 2rem;margin-top:5rem;border-top:1px solid var(--color-green-dark)}
.footer-widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2.5rem;margin-bottom:3rem}
.footer-widget-area .widget-title{color:var(--color-green)}
.site-info{text-align:center;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;color:var(--color-muted);border-top:1px solid var(--color-border);padding-top:1.5rem}

/* ============================================
   COMMENTS
   ============================================ */
.comments-area{max-width:820px;margin:0 auto;padding:3rem 1.5rem;border-top:1px solid var(--color-border)}
.comments-title{font-size:1.4rem}
.comment-body{background:var(--color-bg-card);border:1px solid var(--color-border);padding:1.25rem;margin-bottom:1.25rem}
.comment-form input,.comment-form textarea{width:100%;background:#111;border:1px solid var(--color-border);color:var(--color-text);padding:12px;font-family:var(--font-body);font-size:.95rem;margin-bottom:1rem;transition:border-color .2s}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--color-green)}
.comment-form .submit{background:transparent;border:2px solid var(--color-green);color:var(--color-green);padding:10px 28px;font-family:var(--font-mono);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;transition:all .2s}
.comment-form .submit:hover{background:var(--color-green);color:#000}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:900px){
    .main-navigation{display:none}
    .menu-toggle{display:flex;align-items:center;justify-content:center}
}
@media(max-width:600px){
    .posts-grid{grid-template-columns:1fr}
    .hero-section{min-height:80vh}
    .author-box{flex-direction:column}
    .newsletter-form{flex-direction:column;align-items:center}
    .newsletter-form input[type="email"],.cta-button{width:100%;text-align:center}
}

/* ============================================
   PRINT
   ============================================ */
@media print{
    .site-header,.site-footer,.widget,.newsletter-cta,.related-posts{display:none}
    body{background:#fff;color:#000}
    a{color:#000}
    .entry-content pre,.entry-content code{border:1px solid #ccc;background:#f5f5f5;color:#000}
}