/* HardenWall CSS — cleaned 2025-08-15 */

/* =========================
   Root variables
   ========================= */
:root{
  --gold: rgb(220,156,40);
  --gold-20: rgba(220,156,40,0.2);
  --gold-30: rgba(220,156,40,0.3);
  --gold-40: rgba(220,156,40,0.4);
  --bg-0:#0e0e12;
  --bg-1:#1b1b21;
  --text-0:#f0f0f0;
  --text-1:#ccc;
  --nav-h:76px;           /* fixed header height */
  --subhero-bg:url('');   /* override per page if needed */
}
@media (max-width:768px){ :root{ --nav-h:66px; } }

/* =========================
   Base
   ========================= */
*{ box-sizing:border-box; }
html{ scroll-behavior:auto; } /* kill auto-smooth anchors */
body{
  margin:0; background:var(--bg-0); color:var(--text-0);
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  line-height:1.6; overflow-x:hidden; padding-top:var(--nav-h);
}
a{ color:inherit; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:where(a,button):focus-visible{ outline:2px dashed var(--gold); outline-offset:3px; }

/* Respect reduced motion (consolidated) */
@media (prefers-reduced-motion:reduce){
  *{ transition:none!important; animation:none!important; }
  html{ scroll-behavior:auto; }
}

/* Prevent anchor overlap with fixed nav */
section, .anchor{ scroll-margin-top:calc(var(--nav-h) + 12px); }

.link-placeholder {
  color: var(--gold);
  text-decoration: underline dotted;
  cursor: not-allowed;
  opacity: .9;
}

/* =========================
   Navbar
   ========================= */
nav{
  background:rgba(10,10,10,0.95);
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 5%; position:fixed; width:100%; top:0; z-index:1000;
  border-bottom:2px solid var(--gold);
}
nav .brand{ display:flex; align-items:center; line-height:0; }
nav img{ height:50px; flex-shrink:0; }

/* Menu container (works for WP <ul> or .menu) */
.nav-links{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; }
.nav-links > ul, .nav-links .menu{
  display:flex; gap:20px; list-style:none; margin:0; padding:0; align-items:center;
}
.nav-links li{ position:relative; }

/* Top-level links */
.nav-links > ul a, .nav-links .menu > li > a,
.nav-links button.nav-link-btn{
  color:#fff; text-decoration:none; font-weight:bold; font-size:.95rem;
  font-family:'Orbitron',sans-serif; white-space:nowrap; padding:5px 0;
  display:inline-block; position:relative; background:transparent; border:none; cursor:pointer;
}
/* underline effect */
.nav-links > ul a::after, .nav-links button.nav-link-btn::after{
  content:""; position:absolute; width:0; height:2px; bottom:-4px; left:0; background:var(--gold); transition:width .3s ease;
}
.nav-links > ul a:hover::after, .nav-links button.nav-link-btn:hover::after{ width:100%; }
/* active item */
.nav-links li.current-menu-item > a::after,
.nav-links li.current_page_item > a::after{ width:100%; }

/* Submenus */
.nav-links .sub-menu, .nav-links .dropdown{
  display:none; position:absolute; top:100%; left:0; z-index:1001;
  background:var(--bg-1); min-width:220px; padding:6px 0; margin:0;
  list-style:none; box-shadow:0 8px 16px rgba(0,0,0,.3); border:1px solid var(--gold-20);
}
.nav-links .sub-menu a, .nav-links .dropdown a{
  display:block; padding:10px 15px; color:#fff; text-decoration:none; font-size:.9rem; position:relative;
}
.nav-links .sub-menu a::after, .nav-links .dropdown a::after{
  content:""; position:absolute; width:0; height:2px; bottom:0; left:0; background:var(--gold); transition:width .3s ease;
}
.nav-links .sub-menu a:hover::after, .nav-links .dropdown a:hover::after{ width:100%; }
/* caret */
.nav-links li.menu-item-has-children > a{ padding-right:14px; }
.nav-links li.menu-item-has-children > a::before{
  content:"▾"; position:absolute; right:0; top:50%; transform:translateY(-60%); font-size:.75em; opacity:.9;
}

/* Hover/focus show on desktop */
.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu,
.nav-links li:hover > .dropdown,
.nav-links li:focus-within > .dropdown{ display:block; }

/* Hamburger */
.hamburger{ display:none; margin-left:auto; }
.hamburger button{
  display:flex; flex-direction:column; gap:5px; padding:6px; background:transparent; border:0; cursor:pointer;
}
.hamburger span{ width:26px; height:3px; background:var(--gold); transition:transform .3s ease, opacity .3s ease; }

/* =========================
   Hero / sub-hero / headings
   ========================= */
header.hero{
  background:linear-gradient(135deg, rgba(10,10,10,.8), rgba(26,26,31,.8)),
             url('https://images.unsplash.com/photo-1581092334703-1f9d09d7a1f0?auto=format&fit=crop&w=1600&q=80') center/cover;
  height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:0 20px;
}
.hero img{ max-height:120px; margin-bottom:20px; filter:drop-shadow(0 0 6px rgba(220,156,40,.6)); }
.hero h1{ font-size:3rem; color:var(--gold); font-family:'Orbitron',sans-serif; margin:0 0 8px; }
.hero p{ font-size:1.25rem; color:var(--text-1); max-width:700px; margin:0; }

h2{
  color:var(--gold); border-bottom:2px solid rgba(220,156,40,.6);
  padding-bottom:5px; margin-bottom:20px; font-size:1.6rem; font-family:'Orbitron',sans-serif;
}
h2.wp-block-heading{ border-bottom:0; }

.sub-hero{
  margin-top:0; min-height:36vh;
  background:linear-gradient(135deg, rgba(10,10,10,.85), rgba(26,26,31,.85)), var(--subhero-bg) center/cover no-repeat;
  display:grid; place-items:center; text-align:center; padding:40px 20px;
}
.sub-hero h1{ font-family:'Orbitron',sans-serif; color:var(--gold); font-size:2.4rem; margin:0 0 10px; }
.sub-hero p{ max-width:900px; color:var(--text-1); margin:0; font-size:1.08rem; }

/* =========================
   Buttons / utilities / CTA
   ========================= */
.read-more{
  display:inline-block; color:var(--gold); text-decoration:none; font-family:monospace; font-weight:bold;
  background:rgba(220,156,40,.1); padding:2px 6px; border-radius:4px; transition:background-color .3s ease, color .3s ease;
}
.read-more::before{ content:"[>_]"; margin-right:4px; }
.read-more:hover{ background:var(--gold); color:#000; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:10px; border:1px solid var(--gold); font-weight:700; text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease, background-color .3s ease, color .3s ease;
}
.btn-primary{ background:var(--gold); color:#000; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 20px var(--gold-40); }
.btn-outline{ background:transparent; color:var(--gold); }
.btn-outline:hover{ background:rgba(220,156,40,.1); transform:translateY(-2px); }
.btn-cta{ margin-left:8px; padding:8px 12px; border-radius:8px; }
.cta-buttons{ margin-top:24px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

.cta-band{
  max-width:1200px; 
  padding:18px 20px;
  border:1px solid var(--gold-20); 
  border-radius:12px; 
  background:linear-gradient(135deg,#111,#16161c);
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  gap:12px;
}
.cta-band h3{ margin:0; color:var(--gold); font-family:'Orbitron',sans-serif; }

/* =========================
   Cards / grids / lists
   ========================= */
.services{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:25px; }
.service-card{
  background:var(--bg-1); border:1px solid var(--gold-20); border-radius:12px; padding:20px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:0 8px 20px var(--gold-40); }
.service-card h3{ color:var(--gold); margin-top:0; }
.service-card .btn {
  display: block;           
  width: max-content;       
  margin: 12px auto 0;     
}


/* blog listing cards */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
.card{
  background:var(--bg-1); border:1px solid var(--gold-20); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 10px 24px var(--gold-40); }
.card figure{ margin:0; line-height:0; }
.card img{ width:100%; height:180px; object-fit:cover; display:block; }
.card .body{ padding:14px 16px 16px; }
.meta{ font-size:.86rem; color:var(--text-1); display:flex; gap:10px; flex-wrap:wrap; }
.meta .dot::before{ content:'•'; opacity:.6; margin:0 6px; }
.meta a, .taglist a{ text-decoration:none; }
.card h2{ margin:8px 0 6px; font-size:1.2rem; border:0; color:#fff; }
.card h2 a{ text-decoration:none; }
.excerpt{ color:var(--text-1); font-size:.98rem; margin:6px 0 10px; }
.taglist{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{ font-size:.78rem; border:1px solid var(--gold-20); border-radius:999px; padding:4px 8px; color:var(--text-1); }

/* =========================
   Sidebar
   ========================= */
.sidebar{ position:sticky; top:90px; align-self:start; }
.sidecard, .sidebar .card, .card.sidebar-card{
  background:var(--bg-1); border:1px solid var(--gold-20); border-radius:12px; padding:16px;
}
.sidecard + .sidecard, .sidebar .card + .card{ margin-top:16px; }
.sidecard h3, .sidebar .card h3{
  margin:0 0 10px; color:var(--gold); font-family:'Orbitron',sans-serif; font-size:1.1rem;
}
.toc a{ display:block; padding:2px 0; color:var(--text-1); text-decoration:none; }
.toc a.active{ color:var(--gold); }
.catlist a{
  display:flex; justify-content:space-between; color:var(--text-0); text-decoration:none;
  padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.06);
}
.catlist a:last-child{ border-bottom:none; }
.tagcloud{ display:flex; flex-wrap:wrap; gap:8px; }
.tagcloud .tag{ cursor:pointer; }
.tagcloud a{ text-decoration:none; }

/* =========================
   Blog/page controls & layout
   ========================= */
.controls{
  max-width:1200px; margin:18px auto 0; padding:0 20px;
  display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center;
}
.searchbox{
  display:flex; align-items:center; background:#121217; border:1px solid var(--gold-20);
  border-radius:10px; padding:8px 12px;
}
.searchbox input{ flex:1; background:transparent; border:0; color:var(--text-0); padding:6px 8px; outline:none; }
.searchbox button{ display:none; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px;
  border:1px solid var(--gold-20); color:var(--text-1); background:transparent; cursor:pointer; font-weight:600;
}
.chip.active{ background:var(--gold); color:#000; border-color:var(--gold); }

/* main grid (content + sidebar) */
main{
  max-width:1200px; margin:24px auto 40px; padding:0 20px;
  display:grid; grid-template-columns:1.1fr .6fr; gap:28px;
}
section{ max-width:1200px; margin:80px auto; padding:0 20px; }
main > section{ margin:0; padding:0; }

/* Keep grid children from pushing each other */
main > .prose, main > .sidebar{ min-width:0; }

/* === Reports section (home) === */
#reports{
  max-width:1200px;
  margin:80px auto;
  padding:0 20px;
}

.reports{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:25px;
}

.report-card{
  background:var(--bg-1);
  border:1px solid var(--gold-20);
  border-radius:12px;
  padding:20px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  min-height:300px;
  transition:transform .3s ease, box-shadow .3s ease;
}

.report-card:hover{
  transform:translateY(-6px);
  box-shadow:0 8px 20px var(--gold-40);
}

.report-card h4{
  margin:0 0 6px;
  color:var(--gold);
  font-family:'Orbitron', sans-serif;
  font-size:1.1rem;
}

.report-card img{
  max-width:100px;
  margin:15px 0;
  filter:drop-shadow(0 0 6px rgba(220,156,40,.6));
}

.report-card p{
  color:var(--text-1);
  font-size:.95rem;
  flex-grow:1;
}

.report-card a{
  display:inline-block;
  background:var(--gold);
  color:#000;
  padding:10px 16px;
  border-radius:6px;
  text-decoration:none;
  font-weight:700;
  transition:transform .15s ease, background-color .3s ease;
}

.report-card a:hover{
  background:#e6a930;
  transform:translateY(-1px);
}


/* =========================
   Prose / content
   ========================= */
.breadcrumbs{ max-width:1200px; margin:16px auto 0; padding:0 20px; font-size:.9rem; color:var(--text-1); }
.breadcrumbs a{ color:var(--gold); text-decoration:none; }
.breadcrumbs span{ opacity:.7; }

.prose h2{ font-family:'Orbitron',sans-serif; color:var(--gold); font-size:1.6rem; margin:22px 0 10px; }
.prose h3{ color:#fff; font-size:1.15rem; margin:18px 0 8px; }
.prose p, .prose ul, .prose ol{ color:var(--text-0); }
.prose ul, .prose ol{ padding-left:18px; }
.prose a{ color:var(--gold); }
.prose blockquote{ border-left:3px solid var(--gold-30); padding-left:12px; color:var(--text-1); margin:12px 0; }
.divider{ border:0; height:1px; background:linear-gradient(90deg, transparent, var(--gold-30), transparent); margin:24px 0; }

/* Code blocks (Gutenberg) */
.wp-block-code{
  background:#121217; border:1px solid var(--gold-20); border-radius:12px; padding:12px 14px; margin:18px 0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02); position:relative;
}
.wp-block-code code{
  display:block; color:var(--text-0);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:.95rem; line-height:1.55; white-space:pre; overflow-x:auto; tab-size:2;
}
/* inline code */
:where(p,li,.prose) code:not(.wp-block-code code){
  background:rgba(220,156,40,.08); color:var(--gold);
  border:1px solid var(--gold-20); border-radius:6px; padding:0 .35em; font-size:.95em;
}
/* dark scrollbar for code */
.wp-block-code code::-webkit-scrollbar{ height:10px; }
.wp-block-code code::-webkit-scrollbar-track{ background:#0f1014; }
.wp-block-code code::-webkit-scrollbar-thumb{ background:rgba(220,156,40,.35); border-radius:10px; }
.wp-block-code code::-webkit-scrollbar-thumb:hover{ background:rgba(220,156,40,.55); }

/* Media in content never overflow */
.prose img, .prose video, .prose iframe{ max-width:100%; height:auto; }
.prose figure{ margin:1rem 0; }
.prose .wp-block-image img{ max-width:100%; height:auto; }

/* Constrain wide/full when a sidebar exists */
main .prose .alignwide, main .prose .alignfull{
  width:auto!important; max-width:100%!important; margin-left:0!important; margin-right:0!important;
}

/* Floats behave on desktop, stack on mobile */
.prose .alignleft{ float:left; margin:.5em 1em .5em 0; max-width:50%; }
.prose .alignright{ float:right; margin:.5em 0 .5em 1em; max-width:50%; }
.prose .aligncenter{ display:block; margin-left:auto; margin-right:auto; }

@media (max-width:700px){
  .prose .alignleft, .prose .alignright{ float:none; margin:1em 0; max-width:100%; }
}

/* Tables */
.prose .wp-block-table{ overflow-x:auto; }
.prose .wp-block-table table{ max-width:100%; }

.wp-block-table.is-style-stripes{
  /* subtle gold-tinted stripe + hover */
  --stripe: rgba(220,156,40,0.08);
  --stripe-hover: rgba(220,156,40,0.14);

  border: 1px solid var(--gold-20);
  border-radius: 12px;
  overflow: hidden;            /* rounded corners on the table */
  background: transparent;
}

/* make the table fill the wrapper and scroll if narrow */
.wp-block-table.is-style-stripes table{
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-1);
}

/* header */
.wp-block-table.is-style-stripes thead th{
  background: linear-gradient(135deg,#131318,#191922);
  color: var(--gold);
  border-bottom: 1px solid var(--gold-30);
  font-weight: 700;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: .2px;
  padding: 12px 14px;
  text-align: left;
}

/* cells */
.wp-block-table.is-style-stripes td{
  color: var(--text-0);
  padding: 12px 14px;
  border-bottom: 1px dashed var(--gold-20);
}

/* zebra stripes */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd){
  background: var(--stripe);
}

/* hover (desktop) */
@media (hover:hover){
  .wp-block-table.is-style-stripes tbody tr:hover{
    background: var(--stripe-hover);
  }
}

/* monospace + wrapping for file & hash columns */
.wp-block-table.is-style-stripes td:nth-child(1),
.wp-block-table.is-style-stripes td:nth-child(3){
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  overflow-wrap: anywhere;   /* keep long hashes from blowing out */
  word-break: break-word;
}

/* compact the “label” column a bit */
.wp-block-table.is-style-stripes td:nth-child(2){
  color: var(--text-1);
}

/* optional caption styling */
.wp-block-table.is-style-stripes figcaption{
  color: var(--text-1);
  font-size: .9rem;
  padding: 10px 12px 0;
}

/* compact stripes */
.wp-block-table.is-style-stripes.compact td,
.wp-block-table.is-style-stripes.compact thead th{
  padding: 8px 10px;
  font-size: 0.92rem;
}

/* Center WP image blocks */
.wp-block-image.aligncenter,
figure.aligncenter {
  display: block;
  margin: 1.25rem auto;   /* centers the figure itself */
  text-align: center;     /* centers inline content like <img> */
  clear: both;            /* avoid float collisions */
}

figure.aligncenter > img,
.wp-block-image.aligncenter img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}


/* Center image captions (robust override) */
figure.wp-block-image > figcaption.wp-element-caption,
figure.aligncenter > figcaption.wp-element-caption,
.wp-block-image figure > figcaption.wp-element-caption {
  display: block;
  width: 100%;
  text-align: center !important;
  margin-top: 8px;
  color: var(--text-1);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* (Optional) ensure centered figures stay centered */
figure.aligncenter,
.wp-block-image.aligncenter {
  margin-left: auto;
  margin-right: auto;
}

/* allow horizontal scroll on very small screens */
@media (max-width: 560px){
  .wp-block-table.is-style-stripes{ overflow-x: auto; }
  .wp-block-table.is-style-stripes table{ min-width: 520px; }
}

/* =========================
   Pagination
   ========================= */
.pagination{ display:flex; justify-content:center; gap:10px; margin-top:22px; }
.page-btn{
  border:1px solid var(--gold-20); background:transparent; color:var(--text-0);
  padding:10px 14px; border-radius:10px; cursor:pointer; text-decoration:none;
}
.page-btn[disabled]{ opacity:.5; cursor:not-allowed;}

/* =========================
   Contact form
   ========================= */
#contact .contact-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; }
.contact-card{ background:var(--bg-1); padding:20px; border:1px solid var(--gold-20); border-radius:12px; }
.form-control{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.form-control input, .form-control textarea{
  background:#121217; border:1px solid var(--gold-20); border-radius:10px; padding:12px; color:var(--text-0);
}
.form-control input:focus, .form-control textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 2px rgba(220,156,40,0.2);
}
.form-actions{ display:flex; gap:12px; align-items:stretch; margin-top:8px; flex-wrap:wrap; }
.form-status{ color:var(--text-1); margin-top:8px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hp{ position:absolute; left:-9999px; opacity:0; }
.form-actions .btn{ flex:1 1 240px; text-align:center; max-width:100%; }

/* =========================
   Footer
   ========================= */
footer{
  background:linear-gradient(135deg,#0a0a0a,#1a1a1f);
  color:#888; text-align:center; padding:25px 20px; font-size:.9rem;
  border-top:2px solid var(--gold); box-shadow:0 -2px 20px rgba(220,156,40,0.3);
}

/* =========================
   Responsive: mobile & tablet
   ========================= */
@media (max-width:980px){
  /* Stack main grid: content first, sidebar second */
  main{ grid-template-columns:1fr; }
  .sidebar{ position:static; order:2; }
  .prose{ order:1; }
}

@media (max-width:768px){
  .hamburger{ display:flex; }

  /* Mobile overlay menu */
  .nav-links{
    display:none; position:fixed; top:var(--nav-h); left:0; right:0;
    height:calc(100vh - var(--nav-h)); flex-direction:column;
    background:rgba(10,10,10,0.98); border-top:1px solid var(--gold-30);
    padding:10px; overflow-y:auto; z-index:1100; box-shadow:0 8px 24px rgba(0,0,0,.5);
  }
  .nav-links.active{ display:flex; }

  /* Stack items vertically */
  .nav-links > ul, .nav-links .menu{
    flex-direction:column; gap:0; width:100%; align-items:stretch;
  }
  .nav-links > ul > li, .nav-links .menu > li{ width:100%; }
  .nav-links a, .nav-links button.nav-link-btn{
    display:block; width:100%; text-align:left; padding:12px 20px; border-bottom:1px solid var(--gold-20);
  }

  /* Mobile submenu: always open */
  .nav-links .sub-menu, .nav-links .dropdown{
    position:static; background:none; border:0; box-shadow:none; min-width:unset; padding:0; display:block;
  }
  .nav-links li.open > .sub-menu,
  .nav-links li.open > .dropdown{ display:block; }
  .nav-links .sub-menu{ margin-left:8px; padding-left:16px; border-left:1px solid var(--gold-20); }
  .nav-links .sub-menu .sub-menu{ border-left:1px dashed var(--gold-20); }

  /* caret off (optional) */
  .nav-links li.menu-item-has-children > a::before{ content:none; }

  body.menu-open{ overflow:hidden; }

  .controls{ grid-template-columns:1fr; }
  .cta-band{ flex-direction:column; text-align:center; }
}

/* Stack contact cards + inputs on small screens */
@media (max-width:980px){
  #contact .contact-grid{
    grid-template-columns: 1fr; /* was 1.2fr .8fr */
  }
  .grid-2{
    grid-template-columns: 1fr; /* Name / Email become full-width rows */
  }
  /* Optional: make the action buttons each full width on very small screens */
  .form-actions .btn{
    flex-basis: 100%;
  }
}