/* =========================
   Onslaught Tactical Solutions
   Full site stylesheet (mobile-first)
   Place in: public_html/assets/css/styles.css
   ========================= */

/* -------------------------
   CSS Variables and Theme
   ------------------------- */
:root{
  --bg:#0b0b0b;
  --panel:#0f0f10;
  --muted:#9aa0a6;
  --text:#e9eef1;
  --accent:#c62828;
  --accent-2:#bdbdbd;
  --glass: rgba(255,255,255,0.03);
  --container:1200px;
  --gap:1rem;
  --radius:10px;
  --shadow: 0 6px 18px rgba(0,0,0,0.6);
  --focus: 3px solid rgba(198,40,40,0.18);
  --transition: 180ms cubic-bezier(.2,.9,.3,1);
  --max-content-width:1100px;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  --elev-1: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

/* -------------------------
   Reset and Base
   ------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
html{font-size:16px; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* -------------------------
   Layout Utilities
   ------------------------- */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:1rem;
}
.row{display:flex;flex-wrap:wrap;gap:var(--gap)}
.col{flex:1 1 0}

/* Simple grid helper */
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.center{display:flex;align-items:center;justify-content:center}

/* -------------------------
   Typography
   ------------------------- */
h1,h2,h3,h4{margin:0 0 .5rem 0;line-height:1.1}
h1{font-size:1.75rem;letter-spacing:-0.02em}
h2{font-size:1.25rem}
h3{font-size:1rem}
.lead{color:var(--muted);font-size:1rem;max-width:60ch;margin:0 auto}

/* small text */
.small{font-size:.9rem;color:var(--muted)}

/* -------------------------
   Header and Navigation
   ------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.4));
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.site-header .container{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem}
.logo{height:48px;width:auto;display:block}
.brand{
  display:flex;flex-direction:column;gap:0;line-height:1;
}
.brand .title{font-weight:700;letter-spacing:.02em}
.brand .tag{font-size:.75rem;color:var(--muted)}

/* Nav */
.main-nav{display:none;gap:1rem;align-items:center}
.main-nav a{padding:.5rem .6rem;border-radius:6px;color:var(--text);transition:background var(--transition)}
.main-nav a:hover{background:rgba(255,255,255,0.02)}
.cta{background:var(--accent);color:#fff;padding:.5rem .8rem;border-radius:6px}
.nav-toggle{background:none;border:0;color:var(--text);font-size:1.25rem;padding:.25rem}

/* Desktop nav */
@media(min-width:768px){
  .main-nav{display:flex}
  .nav-toggle{display:none}
}

/* Mobile nav open state */
.main-nav.open{display:flex;flex-direction:column;padding:1rem;background:var(--panel);position:absolute;top:64px;right:1rem;border-radius:8px;box-shadow:var(--shadow)}

/* -------------------------
   Hero
   ------------------------- */
.hero{
  padding:2rem 0;
  text-align:center;
  background:
    radial-gradient(800px 200px at 10% 10%, rgba(198,40,40,0.04), transparent 6%),
    linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
}
.hero .hero-inner{max-width:var(--max-content-width);margin:0 auto;padding:1rem}
.hero h1{font-size:1.6rem;margin-bottom:.5rem}
.hero .lead{margin-top:0}

/* -------------------------
   Division Cards and Cards
   ------------------------- */
.division-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-top:1rem;
}
.card{
  display:block;
  padding:1rem;
  border-radius:var(--radius);
  background:var(--elev-1);
  border:1px solid rgba(255,255,255,0.03);
  transition:transform var(--transition), box-shadow var(--transition);
  text-decoration:none;color:inherit;
}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,0.6)}
.card h3{margin:0 0 .25rem 0}
.card p{margin:0;color:var(--muted)}

/* External partner card */
.external-card{
  display:flex;gap:1rem;align-items:center;padding:.75rem;border-radius:8px;background:var(--panel);border:1px solid rgba(255,255,255,0.03);
  transition:transform var(--transition), box-shadow var(--transition);
}
.external-card img{width:96px;height:64px;object-fit:cover;border-radius:6px;flex:0 0 96px}
.external-card .card-body{flex:1}
.external-card .card-cta{color:var(--accent);font-weight:600}
.external-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.external-card:focus{outline:3px solid #c62828;outline-offset:3px}
.card-cta{color:var(--accent);font-weight:600}

/* Desktop grid for division cards */
@media(min-width:768px){
  .division-cards{grid-template-columns:repeat(3,1fr)}
}

/* -------------------------
   Projects and MRSS Viewer
   ------------------------- */
.projects{padding:1.25rem 0}
.project{padding:1rem;border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));border:1px solid rgba(255,255,255,0.03)}
.project h3{margin-bottom:.5rem}
.project .meta{color:var(--muted);font-size:.95rem}

/* model-viewer container */
.model-wrap{border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,0.04);background:#0b0b0b}
model-viewer{width:100%;height:420px;display:block;background:#0b0b0b}

/* Lazy placeholder */
.model-placeholder{display:flex;align-items:center;justify-content:center;height:420px;background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));color:var(--muted)}

/* -------------------------
   Forms and Inputs
   ------------------------- */
form{max-width:760px;margin:0 auto}
label{display:block;margin:.5rem 0;font-size:.95rem}
input[type="text"],input[type="email"],textarea,select{
  width:100%;
  padding:.6rem .75rem;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  background:transparent;color:var(--text);
  transition:border-color var(--transition), box-shadow var(--transition);
  outline:none;
}
input:focus,textarea:focus,select:focus{box-shadow:var(--focus);border-color:var(--accent)}
textarea{min-height:120px;resize:vertical;padding-top:.6rem}
input[type="checkbox"]{transform:scale(1.05);margin-right:.5rem}

/* Buttons */
.btn{
  display:inline-block;padding:.6rem 1rem;border-radius:8px;background:var(--accent);color:#fff;font-weight:600;border:0;cursor:pointer;transition:transform var(--transition), box-shadow var(--transition);
}
.btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* Form feedback */
.form-success{background:linear-gradient(90deg, rgba(40,198,40,0.06), rgba(40,198,40,0.02));padding:.75rem;border-radius:8px;color:#bfeec0;border:1px solid rgba(40,198,40,0.06)}
.form-error{background:linear-gradient(90deg, rgba(198,40,40,0.06), rgba(198,40,40,0.02));padding:.75rem;border-radius:8px;color:#ffd6d6;border:1px solid rgba(198,40,40,0.06)}

/* -------------------------
   Footer
   ------------------------- */
.site-footer{padding:1rem 0;border-top:1px solid rgba(255,255,255,0.03);margin-top:2rem;background:transparent}
.site-footer .container{display:flex;flex-direction:column;gap:.5rem;align-items:center}
.site-footer p{margin:0;color:var(--muted);font-size:.95rem}

/* -------------------------
   Accessibility and Focus
   ------------------------- */
:focus{outline:none}
a:focus,button:focus,input:focus,textarea:focus{outline:var(--focus);outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;background:#111;border-radius:6px;color:#fff;z-index:100}

/* -------------------------
   Utility classes
   ------------------------- */
.hidden{display:none !important}
.visually-hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.kicker{font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.badge{display:inline-block;padding:.25rem .5rem;border-radius:999px;background:rgba(255,255,255,0.03);font-size:.85rem;color:var(--muted)}

/* -------------------------
   Responsive tweaks
   ------------------------- */
@media(min-width:1024px){
  .hero h1{font-size:2.25rem}
  .hero .lead{font-size:1.05rem}
  .model-wrap model-viewer{height:520px}
}

/* -------------------------
   Print styles
   ------------------------- */
@media print{
  body{background:#fff;color:#000}
  .site-header,.site-footer,.nav-toggle,.cta{display:none}
  a::after{content:" (" attr(href) ")"}
}

/* -------------------------
   Small animations
   ------------------------- */
.fade-in{animation:fadeIn .45s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* -------------------------
   Tables and lists
   ------------------------- */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.5rem;border-bottom:1px solid rgba(255,255,255,0.03);text-align:left}
.list-inline{display:flex;gap:.5rem;flex-wrap:wrap}

/* -------------------------
   CSP-friendly external scripts placeholder
   ------------------------- */
/* If you add external scripts (model-viewer, analytics), ensure CSP in .htaccess allows them.
   Example: script-src 'self' https://unpkg.com https://js.stripe.com
*/

/* -------------------------
   Notes and extension points
   ------------------------- */
/* - Replace color variables to match brand palette.
   - Add additional utility classes as needed (margins, padding, text sizes).
   - For heavy pages, create a minified production CSS and a separate dev CSS.
   - If using Tailwind, this file can be used as a fallback or base.
*/