/*
Theme Name: Nocks Security Blog
Theme URI: https://nockssecurity.com
Author: Nocks Security
Description: Dark professional blog theme — Security Architecture & Risk Management.
Version: 1.2.0
License: GNU General Public License v2 or later
Tags: blog, dark, security, professional
*/
:root{--black:#0a0a0f;--black-soft:#111118;--black-card:#14141d;--border:#1e1e2e;--blue:#2563eb;--blue-light:#3b82f6;--blue-dim:rgba(37,99,235,.10);--white:#f0f0f5;--grey:#6b7280;--grey-light:#9ca3af;--silver:#b8bdc8;--silver-bright:#cdd2db;--font-head:'Barlow Condensed',sans-serif;--font-body:'DM Sans',sans-serif;--font-mono:'JetBrains Mono',monospace;--radius:4px;--max-width:1100px;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--black);color:var(--silver);font-family:var(--font-body);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;}
a{color:var(--blue-light);text-decoration:none;}a:hover{color:var(--white);}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);font-weight:700;line-height:1.1;letter-spacing:.02em;text-transform:uppercase;color:var(--silver);}
.container{max-width:var(--max-width);margin:0 auto;padding:0 2rem;}

/* HEADER */
.site-header{position:sticky;top:0;z-index:100;background:rgba(10,10,15,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:108px;}

/* LOGO LOCKUP */
.logo-lockup{display:flex;align-items:center;gap:14px;text-decoration:none;}
.logo-lockup .site-logo-img{height:96px;width:auto;max-height:96px;object-fit:contain;flex-shrink:0;}
.logo-sep{width:1px;height:52px;background:var(--border);flex-shrink:0;}
.logo-name{display:flex;flex-direction:column;line-height:1;}
.logo-name .brand{font-family:var(--font-head);font-size:2.9rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--silver-bright);line-height:1;}
.logo-name .tagline{font-family:var(--font-mono);font-size:.48rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-top:6px;}

.site-nav{display:flex;align-items:center;gap:2rem;}
.site-nav a{font-family:var(--font-head);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-light);position:relative;transition:color .2s;}
.site-nav a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--blue);transition:width .2s;}
.site-nav a:hover,.site-nav .current-menu-item>a{color:var(--white);}
.site-nav a:hover::after,.site-nav .current-menu-item>a::after{width:100%;}
.nav-toggle{display:none;background:none;border:1px solid var(--border);color:var(--white);padding:.4rem .7rem;border-radius:var(--radius);cursor:pointer;font-size:1.2rem;line-height:1;}

/* BANNER */
.page-banner{padding:88px 0 68px;border-bottom:1px solid var(--border);position:relative;overflow:hidden;}
.page-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(37,99,235,.08) 0%,transparent 70%);pointer-events:none;}

/* NEW: full-width two-column layout (banner + posts left, sidebar right) */
.page-layout{display:grid;grid-template-columns:1fr 300px;gap:3rem;padding:4rem 0;}
.page-banner-inner{padding:48px 0 40px;border-bottom:1px solid var(--border);margin-bottom:2.5rem;position:relative;}
.page-banner-inner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 100% at 0% 0%,rgba(37,99,235,.07) 0%,transparent 70%);pointer-events:none;}
.posts-feed{}
.banner-label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:1rem;display:flex;align-items:center;gap:.75rem;}
.banner-label::before{content:'';width:24px;height:1px;background:var(--blue);}
.banner-title{font-size:clamp(2.2rem,5vw,3.8rem);margin-bottom:1rem;max-width:700px;color:var(--silver-bright);}
.banner-desc{color:var(--grey);max-width:520px;font-size:.95rem;line-height:1.7;}

/* BLOG LAYOUT */
.blog-wrap{display:grid;grid-template-columns:1fr 300px;gap:3rem;padding:4rem 0;} /* archive/search pages */

/* POST CARDS */
.post-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--black-card);overflow:hidden;margin-bottom:1.5rem;transition:border-color .25s,transform .25s;}
.post-card:hover{border-color:rgba(37,99,235,.45);transform:translateY(-2px);}
.post-card__thumb{width:100%;aspect-ratio:16/7;object-fit:cover;border-bottom:1px solid var(--border);}
.post-card--featured .post-card__thumb{aspect-ratio:16/8;}
.post-card__body{padding:1.75rem;}.post-card--small .post-card__body{padding:1.25rem 1.5rem;}
.post-card__meta{display:flex;align-items:center;gap:1rem;margin-bottom:.85rem;flex-wrap:wrap;}
.post-card__cat{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--blue);background:var(--blue-dim);border:1px solid rgba(37,99,235,.25);padding:.2rem .6rem;border-radius:2px;}
.post-card__date{font-family:var(--font-mono);font-size:.7rem;color:var(--grey);}
.post-card__title{font-size:1.3rem;margin-bottom:.75rem;transition:color .2s;color:var(--silver-bright);}
.post-card--featured .post-card__title{font-size:1.75rem;}
.post-card:hover .post-card__title{color:var(--blue-light);}
.post-card__excerpt{font-size:.875rem;color:var(--grey);margin-bottom:1.25rem;line-height:1.65;}
.post-card--small .post-card__excerpt{display:none;}
.post-card__link{font-family:var(--font-head);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-light);display:inline-flex;align-items:center;gap:.4rem;transition:gap .2s,color .2s;}
.post-card__link::after{content:'→';}
.post-card:hover .post-card__link{gap:.7rem;color:var(--white);}

/* SIDEBAR */
.sidebar{position:sticky;top:128px;height:fit-content;align-self:start;}
.widget{border:1px solid var(--border);border-radius:var(--radius);background:var(--black-card);padding:1.5rem;margin-bottom:1.5rem;}
.widget-title{font-family:var(--font-head);font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--blue);margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.5rem;}
.widget-title::before{content:'';width:3px;height:12px;background:var(--blue);border-radius:1px;}
/* Search widget — targets WordPress default search form markup */
.widget_search .search-form{display:flex;gap:.5rem;align-items:stretch;}
.widget_search .search-form label{flex:1;display:flex;}
.widget_search .search-field{flex:1;width:100%;background:var(--black-soft);border:1px solid var(--border);border-radius:var(--radius);color:var(--silver);font-family:var(--font-body);font-size:.875rem;padding:.625rem .875rem;outline:none;transition:border-color .2s;-webkit-appearance:none;}
.widget_search .search-field:focus{border-color:var(--blue);}
.widget_search .search-field::placeholder{color:var(--grey);}
.widget_search .search-submit{background:var(--blue);border:none;color:#fff;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;padding:.625rem 1rem;border-radius:var(--radius);cursor:pointer;white-space:nowrap;flex-shrink:0;}
.widget_search .search-submit:hover{background:var(--blue-light);}
.widget_categories ul,.widget_recent_entries ul{list-style:none;}
.widget_categories ul li{border-bottom:1px solid var(--border);padding:.5rem 0;}
.widget_categories ul li:last-child{border-bottom:none;}
.widget_categories ul li a{font-size:.875rem;color:var(--grey-light);display:flex;justify-content:space-between;align-items:center;transition:color .2s;}
.widget_categories ul li a:hover{color:var(--blue-light);}
.widget_recent_entries ul li{border-bottom:1px solid var(--border);padding:.6rem 0;}
.widget_recent_entries ul li:last-child{border-bottom:none;}
.widget_recent_entries ul li a{font-size:.85rem;color:var(--grey-light);transition:color .2s;}
.widget_recent_entries ul li a:hover{color:var(--white);}
.widget_recent_entries .post-date{font-family:var(--font-mono);font-size:.65rem;color:var(--grey);display:block;margin-top:.2rem;}

/* SINGLE POST */
.single-wrap{display:grid;grid-template-columns:1fr 300px;gap:3rem;padding:4rem 0;}
.article-thumbnail{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border);margin-bottom:2.5rem;}
.article-content{font-size:1rem;line-height:1.85;}
.article-content p{color:var(--grey-light);margin-bottom:1.4em;}
.article-content h2{font-size:1.5rem;margin:2.5em 0 1em;padding-top:1.5em;border-top:1px solid var(--border);}
.article-content h3{font-size:1.15rem;margin:2em 0 .75em;}
.article-content ul,.article-content ol{color:var(--grey-light);padding-left:1.5rem;margin-bottom:1.4em;}
.article-content li{margin-bottom:.4em;}
.article-content blockquote{border-left:3px solid var(--blue);padding:1rem 1.5rem;margin:2em 0;background:var(--blue-dim);border-radius:0 var(--radius) var(--radius) 0;font-style:italic;color:var(--grey-light);}
.article-content code{font-family:var(--font-mono);font-size:.85em;background:var(--black-soft);border:1px solid var(--border);padding:.15em .45em;border-radius:3px;color:var(--blue-light);}
.article-content pre{background:var(--black-soft);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;overflow-x:auto;margin-bottom:1.4em;}
.article-content pre code{border:none;background:none;padding:0;}
.reading-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--blue);z-index:9999;transition:width .1s linear;}
.post-tags{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--border);display:flex;gap:.5rem;flex-wrap:wrap;}
.post-tags a{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);background:var(--black-soft);border:1px solid var(--border);padding:.25rem .6rem;border-radius:2px;transition:all .2s;}
.post-tags a:hover{border-color:var(--blue);color:var(--blue-light);}
.author-box{margin-top:3rem;padding:1.75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--black-card);display:flex;gap:1.25rem;align-items:flex-start;}
.author-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--blue);flex-shrink:0;}
.author-name{font-family:var(--font-head);font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--white);margin-bottom:.25rem;}
.author-bio{font-size:.85rem;color:var(--grey);}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border);}
.post-nav__item{border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;background:var(--black-card);transition:border-color .2s;}
.post-nav__item:hover{border-color:rgba(37,99,235,.4);}
.post-nav__label{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--grey);margin-bottom:.4rem;}
.post-nav__title{font-family:var(--font-head);font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;color:var(--white);}
.post-nav__item--next{text-align:right;}
.pagination{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:2rem 0;border-top:1px solid var(--border);}
.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;font-family:var(--font-mono);font-size:.8rem;border:1px solid var(--border);border-radius:var(--radius);color:var(--grey-light);background:var(--black-card);padding:0 .5rem;transition:all .2s;}
.page-numbers:hover,.page-numbers.current{border-color:var(--blue);color:var(--white);}
.page-numbers.current{background:var(--blue);}

/* FOOTER */
.site-footer{border-top:1px solid var(--border);padding:3rem 0 2rem;background:var(--black-soft);}
.footer-inner{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem;}
.footer-logo-wrap{display:flex;align-items:center;gap:12px;margin-bottom:.85rem;}
.footer-logo-wrap .site-logo-img{height:38px;width:auto;max-height:38px;object-fit:contain;flex-shrink:0;}
.footer-brand{font-family:var(--font-head);font-size:1.1rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--white);}
.footer-desc{font-size:.85rem;color:var(--grey);}
.footer-col h4{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--grey);margin-bottom:1rem;font-family:var(--font-head);}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:.5rem;}
.footer-col ul a{font-size:.875rem;color:var(--grey-light);transition:color .2s;}
.footer-col ul a:hover{color:var(--blue-light);}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:2rem;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:.68rem;color:var(--grey);}
.error-404{text-align:center;padding:8rem 0;}
.error-404 .error-code{font-size:8rem;color:var(--blue);opacity:.15;line-height:1;}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.fade-up{animation:fadeUp .5s ease forwards;}
/* ── TABLET ── */
@media(max-width:900px){
  .blog-wrap,.single-wrap,.page-layout{grid-template-columns:1fr;}
  .sidebar{position:static;top:auto;}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .post-nav{grid-template-columns:1fr;}
  .nav-toggle{display:block;}
  .site-nav{
    display:none;
    position:absolute;
    top:108px;left:0;right:0;
    background:var(--black-soft);
    border-bottom:1px solid var(--border);
    flex-direction:column;
    align-items:flex-start;
    padding:1rem 2rem;
    gap:1rem;
    z-index:99;
  }
  .site-nav.open{display:flex;}
  .logo-name .tagline{display:none;}
}

/* ── MOBILE PORTRAIT ── */
@media(max-width:600px){
  /* Header */
  .site-header{}
  .header-inner{height:80px;}
  .logo-lockup .site-logo-img{height:34px;max-height:34px;}
  .logo-name .brand{font-size:1.6rem;letter-spacing:.08em;}
  .logo-sep{height:36px;}
  .site-nav{top:80px;}

  /* Banner */
  .page-banner{padding:40px 0 36px;}
  .banner-title{font-size:1.75rem;}
  .banner-desc{font-size:.875rem;}
  .banner-label{font-size:.65rem;}

  /* Container padding */
  .container{padding:0 1rem;}

  /* Blog wrap */
  .blog-wrap,.single-wrap{padding:2rem 0;gap:2rem;}

  /* Post cards */
  .post-card__body{padding:1.25rem;}
  .post-card--featured .post-card__thumb{aspect-ratio:16/9;}
  .post-card--featured .post-card__title{font-size:1.3rem;}

  /* Sidebar: stack widgets horizontally on small screens */
  .sidebar{display:flex;flex-direction:column;gap:0;}
  /* Hide less important sidebar widgets on mobile */
  .sidebar .widget + .widget + .widget{display:none;}

  /* Article */
  .article-thumbnail{margin-bottom:1.5rem;}
  .article-content{font-size:.9375rem;}
  .author-box{flex-direction:column;gap:1rem;}
  .post-nav{grid-template-columns:1fr;}
  .post-nav__item--next{text-align:left;}

  /* Footer */
  .footer-inner{grid-template-columns:1fr;gap:1.5rem;}
  .footer-col:not(:first-child){display:none;} /* hide nav cols on mobile */
  .footer-bottom{flex-direction:column;gap:.5rem;text-align:center;}
  .footer-logo-wrap .site-logo-img{height:32px;}

  /* Pagination */
  .pagination{flex-wrap:wrap;gap:.375rem;}
  .page-numbers{min-width:32px;height:32px;font-size:.75rem;}

  /* Fix reading progress not covering header on mobile */
  .reading-progress{top:0;}
}

.cat-count{font-family:var(--font-mono);font-size:.65rem;color:var(--grey);background:var(--black-soft);padding:.1rem .4rem;border-radius:2px;margin-left:auto;}

/* ── MOBILE NAV CATEGORIES ── */
.nav-cat-section{
  display:none; /* only shown inside open mobile nav */
  flex-direction:column;
  gap:.25rem;
  padding-top:.75rem;
  margin-top:.5rem;
  border-top:1px solid var(--border);
  width:100%;
}
.nav-cat-label{
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:.25rem;
}
.nav-cat-link{
  font-family:var(--font-head);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--grey-light);
  padding:.2rem 0;
  transition:color .2s;
}
.nav-cat-link:hover,.nav-cat-link.active{color:var(--white);}

@media(max-width:900px){
  .site-nav.open .nav-cat-section{display:flex;}
  .page-layout .sidebar,.blog-wrap .sidebar,.single-wrap .sidebar{display:none;}
  .page-layout,.blog-wrap,.single-wrap{grid-template-columns:1fr;}
  .page-banner-inner{padding:28px 0 24px;margin-bottom:1.5rem;}
}