/* ============================
   Handles & Hinges – AI Guides
   Performance-first, CLS-safe
   ============================ */

/* ---- Brand tokens ---- */
:root{
  --hh-blue:#4F98E6;
  --hh-blue-600:#2E7FD6;
  --hh-orange:#FFA300;
  --hh-orange-700:#E38F00;
  --bg:#F7FAFC;
  --card:#FFFFFF;
  --ink:#0F172A;           /* slate-900 */
  --ink-2:#334155;         /* slate-600 */
  --ink-3:#64748B;         /* slate-500 */
  --line:#E5E7EB;          /* gray-200 */
  --ring:#C7E1FF;
  --shadow:0 6px 20px rgba(15,23,42,.06);
  --radius:14px;

  /* layout widths */
  --container:1200px;      /* global page width cap */
  --read:900px;            /* readable line-length cap */
}

/* ---- Base reset ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--ink);
  background:var(--bg);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--hh-blue);text-decoration:none}
a:hover{color:var(--hh-blue-600)}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

/* ---- Layout ---- */
.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;        /* side breathing space */
}
.site-header{
  position:sticky;top:0;z-index:50;
  background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 2px 10px rgba(15,23,42,.03);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  min-height:64px;
}
.brand{display:flex;gap:10px;align-items:center}
.logo{
  display:inline-grid;place-items:center;
  width:34px;height:34px;border-radius:999px;
  background:linear-gradient(135deg,var(--hh-orange),#ffd580);
  color:#000;font-weight:800;font-family:Inter,system-ui,sans-serif;
  letter-spacing:.5px;font-size:14px;
}
.brand-text{font-weight:700;color:var(--ink);white-space:nowrap}
.nav a{margin-left:16px;color:var(--ink-2)}
.nav a:hover{color:var(--ink)}

.article{
  background:transparent;
  padding:40px 0 64px;   /* more vertical rhythm */
}

/* Constrain reading width for all main content blocks */
.article h1,
.article h2,
.article p,
.article ul,
.article ol,
.article .warning,
.spec-table,
figure,
.cta { max-width: var(--read); margin-left:auto; margin-right:auto; }

/* Headings & copy */
.article h1{
  font-size:clamp(28px,3vw,42px);
  line-height:1.15;margin:0 auto .6em;
  letter-spacing:-.015em;text-align:left;
}
.article h2{
  font-size:clamp(20px,2.4vw,28px);
  margin:1.2em auto .4em;
  color:var(--ink-2)
}
.article p{color:var(--ink);margin:.7em auto}
.article ul,.article ol{padding-left:1.1rem}
.article li{margin:.35em 0}
.article .warning{
  background:#FFFBEF;border:1px solid var(--hh-orange);
  padding:12px 14px;border-radius:10px;color:#5b4b00;
}

/* ---- Cards grid (homepage) ---- */
.grid{
  display:grid;gap:16px;margin:14px auto 28px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  max-width: var(--container);
  padding: 0 24px;
}
.card{
  display:block;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 16px 18px;
  box-shadow:var(--shadow);
  transform:translateZ(0); /* GPU hint without moving */
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card h3{margin:.2em 0 .3em;line-height:1.25}
.card p{margin:0;color:var(--ink-3)}
.card:hover{
  transform:translateY(-3px);
  border-color:#dbeafe; /* blue-100 */
  box-shadow:0 10px 28px rgba(15,23,42,.10);
}
.card:focus-visible{outline:3px solid var(--ring);outline-offset:3px}

/* small SVG icon helper for cards */
.card h3{display:flex;align-items:center;gap:6px}
.card-icon{width:20px;height:20px;vertical-align:middle;fill:currentColor}

/* ---- Buttons ---- */
.btn{
  display:inline-block;border-radius:10px;padding:10px 14px;
  font-weight:600;line-height:1;text-align:center;
  border:1px solid transparent;transition:background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--hh-orange);color:#000;border-color:var(--hh-orange)}
.btn--primary:hover{background:var(--hh-orange-700)}
.btn--ghost{background:#fff;color:var(--hh-blue);border-color:var(--hh-blue)}
.btn--ghost:hover{background:#F2F7FF}

/* ---- Tables ---- */
.spec-table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:10px auto 18px;
}
.spec-table th,.spec-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.spec-table thead th{background:#F8FAFF;color:#0f2742}
.spec-table tr:last-child td{border-bottom:0}

/* ---- Figures ---- */
figure{margin:14px auto}
figcaption{font-size:.9em;color:var(--ink-3);margin-top:6px}

/* ---- Footer ---- */
.site-footer{border-top:1px solid var(--line);background:#fff}
.site-footer .wrap{padding:18px 24px;text-align:center}
.site-footer small{color:var(--ink-3)}

/* ---- Code blocks (just in case) ---- */
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#F3F4F6;border:1px solid #e5e7eb;padding:.1em .35em;border-radius:6px}

/* ---- Accessibility & motion ---- */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/* ---- Narrow screens ---- */
@media (max-width: 640px){
  .site-header .wrap{min-height:56px}
  .nav a{margin-left:10px}
  .wrap{padding:0 16px}
  .grid{padding:0 16px}
  .article{padding:24px 0 48px}
}

/* ---- Print tidy ---- */
@media print{
  .site-header,.site-footer,.nav{display:none!important}
  .article{padding:0}
  a[href]:after{content:" (" attr(href) ")";font-size:.8em}
}


/* ---- CTA buttons centering ---- */
.cta {
  text-align: center;           /* center content */
  margin-top: 20px;
  margin-bottom: 20px;
}

.cta .btn {
  margin: 6px;                  /* small gap between buttons */
}