/* ============================================================
   C2E Engineering — site.css
   Shared COMPONENTS (nav, footer, cards, prose, forms) for the
   simpler pages (blog, legal). All variables come from tokens.css,
   imported below, which is the single source of truth.
   ============================================================ */

@import url("tokens.css");

/* ---- Reset ---- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  font-weight:var(--fw-regular);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  background:var(--bg);
  color:var(--text-body);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);
  background:var(--dark-nav);
  backdrop-filter:blur(12px);
  border-bottom:var(--hairline-dark);
}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo-mark{font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:var(--tracking-tight);color:var(--on-dark)}
.nav-logo-mark span{color:var(--on-dark)}
.nav-sep{width:1px;height:11px;background:var(--dark-border)}
.nav-sub{font-size:var(--fs-xs);color:var(--on-dark-muted);letter-spacing:.02em}
.nav-right{display:flex;align-items:center;gap:var(--space-7)}
.nav-links{display:flex;align-items:center;gap:var(--space-7)}
.nav-link,.nav-back{
  font-size:var(--fs-xs);font-weight:var(--fw-regular);letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:var(--on-dark-muted);text-decoration:none;transition:color var(--t-base);
}
.nav-link:hover,.nav-link.active,.nav-back:hover{color:var(--on-dark)}
.nav-cta{
  font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:#001a3a;background:var(--on-dark);padding:var(--space-2) 18px;
  text-decoration:none;transition:opacity var(--t-fast);
}
.nav-cta:hover{opacity:.85}

/* ============================================================
   LAYOUT CONTAINERS
   ============================================================ */
main{flex:1;padding:120px var(--gutter) var(--space-22)}
.container{max-width:var(--container-wide);margin:0 auto;width:100%}
.container--text{max-width:var(--container-text)}

/* Reading column padding when used without <main> wrapper */
.prose-page{max-width:var(--container-text);margin:0 auto;padding:120px var(--gutter) var(--space-22)}

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.label,.eyebrow{
  font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-subtle);margin-bottom:var(--space-3);display:block;font-weight:var(--fw-bold);
}
h1,.page-title{
  font-size:var(--fs-display);font-weight:var(--fw-bold);letter-spacing:var(--tracking-tight);
  line-height:var(--lh-tight);color:var(--text);margin-bottom:10px;
}
.page-header{margin-bottom:var(--space-12);padding-bottom:var(--space-7);border-bottom:var(--hairline)}
.page-sub{font-size:var(--fs-md);color:var(--text-muted);line-height:var(--lh-body);max-width:560px}

/* ---- Long-form prose (legal pages, articles) ---- */
.prose{line-height:var(--lh-prose)}
.prose .updated{
  font-size:var(--fs-xs);color:var(--text-subtle);margin-bottom:var(--space-12);
  padding-bottom:var(--space-8);border-bottom:var(--hairline);
}
.prose h2{font-size:var(--fs-h3);font-weight:var(--fw-semibold);color:var(--text);margin-top:var(--space-9);margin-bottom:10px}
.prose h3{font-size:var(--fs-h3);font-weight:var(--fw-semibold);color:var(--text);margin-top:var(--space-7);margin-bottom:var(--space-2)}
.prose p{color:var(--text-body);margin-bottom:var(--space-3)}
.prose strong{color:var(--text)}
.prose ul{margin:var(--space-2) 0 var(--space-3) 0;padding-left:0;list-style:none}
.prose ul li{color:var(--text-body);padding:var(--space-1) 0;padding-left:var(--space-4);position:relative}
.prose ul li::before{content:"·";position:absolute;left:0;color:var(--accent-bright)}
a{color:var(--accent)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-block;font-size:var(--fs-meta);font-weight:var(--fw-bold);letter-spacing:.1em;
  text-transform:uppercase;padding:var(--space-3) var(--space-7);text-decoration:none;
  background:var(--accent);color:var(--on-dark);transition:opacity var(--t-fast);border:none;cursor:pointer;
}
.btn:hover{opacity:.85}
.btn-link{
  font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;
}

/* ============================================================
   CARDS  (blog listing)
   ============================================================ */
.posts-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.post-card{
  background:var(--surface);border:var(--hairline);
  padding:var(--space-9) var(--space-8);text-decoration:none;display:flex;flex-direction:column;
  transition:border-color var(--t-base);
}
.post-card:hover{border-color:var(--accent)}
.post-card-category{
  font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--accent);font-weight:var(--fw-bold);margin-bottom:14px;
}
.post-card-title{
  font-size:var(--fs-title);font-weight:var(--fw-bold);color:var(--text);
  letter-spacing:var(--tracking-tight);line-height:var(--lh-snug);margin-bottom:var(--space-3);
}
.post-card-excerpt{font-size:var(--fs-sm);line-height:var(--lh-prose);color:var(--text-muted);margin-bottom:var(--space-5);flex:1}
.post-card-meta{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:14px;border-top:1px solid var(--border-soft);
}
.post-card-date{font-size:var(--fs-xs);color:var(--text-faint);letter-spacing:.02em}
.post-card-link{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.post-card.placeholder{
  border:2px dashed rgba(0,0,0,.12);background:transparent;
  align-items:center;justify-content:center;min-height:260px;
}
.post-card.placeholder .label{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.2em;text-transform:uppercase;color:rgba(0,0,0,.3);margin-bottom:var(--space-3)}
.post-card.placeholder .value{font-size:var(--fs-title);font-weight:var(--fw-bold);color:rgba(0,0,0,.2);letter-spacing:-.01em}

/* ============================================================
   FORMS
   ============================================================ */
.field{margin-bottom:var(--space-5)}
.field label{
  display:block;font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-subtle);margin-bottom:var(--space-2);
}
.field input,.field textarea{
  width:100%;background:var(--surface);border:var(--hairline);
  padding:var(--space-3) 14px;font-family:var(--font);font-size:var(--fs-md);color:var(--text);
}
.field input:focus,.field textarea:focus{
  border-color:var(--accent);outline:2px solid var(--accent-bright);outline-offset:2px;
}

/* ============================================================
   FOOTER
   ============================================================ */
/* Footer styling now lives in /assets/footer.css (single source) */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  nav{padding:0 var(--gutter-mobile)}
  .nav-sep,.nav-sub,.nav-links{display:none}
  main{padding:96px var(--gutter-mobile) var(--space-16)}
  .prose-page{padding:96px var(--gutter-mobile) var(--space-16)}
  .posts-grid{grid-template-columns:1fr;gap:var(--space-4)}
  .post-card{padding:var(--space-7) var(--space-6)}
}
@media(max-width:600px){
  .prose-page{padding:var(--space-22) var(--gutter-mobile) var(--space-14)}
}

/* ============================================================
   ACCESSIBILITY FLOOR
   ============================================================ */
:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}