/* html5please.us — styling for feature pages, category hubs, about and blog.
   Reuses the tool's brand palette (denim, cream, HTML5 orange). Loaded on
   every page except the single-page tool (which keeps css/style.css only). */

:root {
  --denim: #232927;
  --denim-dark: #1e2322;
  --panel: #2b322f;
  --panel-2: #313a37;
  --line: rgba(227, 215, 191, 0.14);
  --cream: #e3d7bf;
  --cream-dim: #b3ab98;
  --orange: #f16529;
  --orange-soft: #e88860;
  --link: #46b4e6;
  --teal: #476871;
  --use: #60ac39;
  --caution: #ffaa00;
  --avoid: #d92626;
  --display: 'Francois One', 'Arial Narrow', sans-serif;
  --body: 'Open Sans', system-ui, sans-serif;
  --wrap: 760px;
}

* { box-sizing: border-box; }

html { background: var(--denim-dark); }

body.page {
  margin: 0;
  font-family: var(--body);
  color: var(--cream);
  background:
    radial-gradient(1100px 520px at 80% -10%, rgba(241, 101, 41, 0.10), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(71, 104, 113, 0.18), transparent 55%),
    url('../img/denim.png') var(--denim);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

/* ---- top bar ---- */
.topbar {
  border-bottom: 1px solid var(--line);
  background: rgba(30, 35, 34, 0.6);
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 5;
}
.topbar .wrap { display: flex; align-items: center; gap: 20px; height: 60px; }
.brand {
  font-family: var(--display); font-size: 22px; letter-spacing: .5px;
  color: var(--cream); text-decoration: none; display: flex; align-items: center; gap: 8px;
}
.brand img { width: 24px; height: 25px; }
.brand b { color: var(--orange); font-weight: normal; }
.topbar nav { margin-left: auto; display: flex; gap: 20px; }
.topbar nav a { color: var(--cream-dim); text-decoration: none; font-size: 15px; transition: color .15s; }
.topbar nav a:hover { color: var(--orange); }

/* ---- breadcrumb ---- */
.crumbs { font-size: 13px; color: var(--cream-dim); margin: 26px 0 6px; }
.crumbs a { color: var(--cream-dim); text-decoration: none; }
.crumbs a:hover { color: var(--orange); }
.crumbs span { color: var(--cream); }

/* ---- content ---- */
main { padding-bottom: 80px; }
article.doc h1 {
  font-family: var(--display); font-weight: normal; line-height: 1.05;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); margin: .1em 0 .35em; color: #fff;
}
article.doc h1 code { font-family: var(--display); font-size: .9em; }
article.doc h2 {
  font-family: var(--display); font-weight: normal; color: var(--orange-soft);
  font-size: 1.5rem; margin: 2.2rem 0 .6rem; letter-spacing: .3px;
}
article.doc p, article.doc li { color: #d9cfba; }
article.doc a { color: var(--link); text-decoration: none; border-bottom: 1px solid rgba(70,180,230,.28); }
article.doc a:hover { color: #7fd0f5; border-bottom-color: #7fd0f5; }
article.doc code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88em;
  background: rgba(71, 104, 113, 0.28); padding: .1em .4em; border-radius: 5px; color: #eadfca;
}
article.doc pre {
  background: var(--denim-dark); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; overflow-x: auto; font-size: .86em; line-height: 1.55;
}
article.doc pre code { background: none; padding: 0; color: #d7e6ea; }

/* ---- verdict badge ---- */
.verdict {
  display: inline-flex; align-items: center; gap: 9px; margin: 4px 0 8px;
  font-family: var(--display); font-size: .95rem; letter-spacing: .4px;
  padding: 7px 15px; border-radius: 999px; text-transform: capitalize;
}
.verdict .kindtag { font-size: .8rem; opacity: .8; text-transform: lowercase; }
.verdict.use { background: rgba(96,172,57,.16); color: #9ede73; border: 1px solid rgba(96,172,57,.4); }
.verdict.caution { background: rgba(255,170,0,.14); color: #ffca63; border: 1px solid rgba(255,170,0,.4); }
.verdict.avoid { background: rgba(217,38,38,.15); color: #ff8080; border: 1px solid rgba(217,38,38,.42); }

.lede { font-size: 1.18rem; color: #efe6d2; margin: .2em 0 1.2em; }

.factbox {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  margin: 22px 0;
}
.factbox div { background: var(--panel); padding: 13px 16px; }
.factbox dt { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--cream-dim); }
.factbox dd { margin: 3px 0 0; font-family: var(--display); font-size: 1.05rem; color: var(--cream); }
.factbox a { color: var(--link); border: none; }

/* ---- related / feature grids ---- */
.related { margin-top: 40px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips a {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 13px; color: var(--cream); font-size: 14px; transition: transform .12s, border-color .12s;
}
.chips a:hover { transform: translateY(-2px); border-color: var(--orange); }
.chips a .dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.use { background: var(--use); } .dot.caution { background: var(--caution); } .dot.avoid { background: var(--avoid); }

/* category hub grid */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 26px 0; }
.hub-card {
  display: block; text-decoration: none; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px; transition: transform .14s, border-color .14s, background .14s;
}
.hub-card:hover { transform: translateY(-3px); border-color: var(--orange); background: var(--panel-2); }
.hub-card .name { font-family: var(--display); font-size: 1.15rem; color: #fff; }
.hub-card .name code { font-family: var(--display); }
.hub-card .meta { font-size: 13px; color: var(--cream-dim); margin-top: 6px; }
.hub-card .verdict-mini { font-size: 12px; font-weight: 700; text-transform: capitalize; }
.verdict-mini.use { color: #9ede73; } .verdict-mini.caution { color: #ffca63; } .verdict-mini.avoid { color: #ff8080; }
.hub-section h2 { font-family: var(--display); color: var(--orange-soft); font-weight: normal; margin: 30px 0 4px; }

/* ---- blog ---- */
.post-list { display: grid; gap: 18px; margin: 26px 0; }
.post-card {
  display: block; text-decoration: none; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 22px 24px; transition: transform .14s, border-color .14s;
}
.post-card:hover { transform: translateY(-3px); border-color: var(--orange); }
.post-card .cat { font-size: 12px; text-transform: uppercase; letter-spacing: .7px; color: var(--orange); }
.post-card h2 { font-family: var(--display); font-weight: normal; color: #fff; font-size: 1.5rem; margin: 6px 0 8px; }
.post-card p { color: var(--cream-dim); margin: 0; }
.post-card .byline { font-size: 13px; color: var(--cream-dim); margin-top: 12px; }
.post-meta { font-size: 14px; color: var(--cream-dim); margin: 0 0 4px; display: flex; gap: 12px; flex-wrap: wrap; }
.post-meta .cat { color: var(--orange); text-transform: uppercase; letter-spacing: .6px; font-size: 12px; }
article.doc.post img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }

/* ---- footer ---- */
footer.site {
  border-top: 1px solid var(--line); background: rgba(30,35,34,.5); color: var(--cream-dim);
  font-size: 14px; padding: 34px 0 46px;
}
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 12px 30px; align-items: baseline; }
footer.site a { color: var(--cream-dim); text-decoration: none; }
footer.site a:hover { color: var(--orange); }
footer.site nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 620px) {
  .topbar nav { gap: 13px; }
  .topbar nav a.hide-sm { display: none; }
  body.page { font-size: 16px; }
}