/* Shared styles for the shouldiboat.com Guides — self-contained editorial
   pages served as static assets (like /about and /legal). Light theme to match
   the rest of the static content pages; brand palette (navy / teal / green). */
:root {
  --navy: #004777;
  --teal: #008BA8;
  --green: #1B936A;
  --amber: #9a7212;
  --red: #c0392b;
  --ink: #10202E;
  --body: #27323d;
  --muted: #50616F;
  --faint: #8595A1;
  --bg: #F6F8F4;
  --surface: #fff;
  --border: #DCE2DA;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 30px 20px 90px; }
a { color: var(--teal); }
.home {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 20px; color: var(--teal); text-decoration: none;
  font-weight: 600; font-size: 14px;
}
.home:hover { text-decoration: underline; }
.crumbs { font-size: 13px; color: var(--faint); margin-bottom: 14px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

h1 { font-size: 2.05rem; color: var(--navy); margin: 0 0 8px; letter-spacing: -0.02em; line-height: 1.15; }
.lede { color: var(--muted); font-size: 1.12rem; margin: 0 0 26px; line-height: 1.5; }
.meta-line { color: var(--faint); font-size: .85rem; margin: -14px 0 26px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px 30px; }
article h2 { font-size: 1.35rem; color: var(--navy); margin: 32px 0 8px; letter-spacing: -0.01em; }
article h3 { font-size: 1.05rem; color: var(--ink); margin: 22px 0 6px; }
article h2:first-child { margin-top: 4px; }
p, li { color: var(--body); font-size: 1rem; }
ul, ol { padding-left: 22px; }
li { margin: 5px 0; }
strong { color: var(--ink); }

.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: .8rem; white-space: nowrap; }
.go { background: rgba(27,147,106,.14); color: var(--green); }
.cau { background: rgba(169,131,28,.16); color: var(--amber); }
.nogo { background: rgba(192,57,43,.14); color: var(--red); }

.callout {
  background: #EEF6F8; border: 1px solid #CDE6EC; border-left: 4px solid var(--teal);
  border-radius: 10px; padding: 14px 18px; margin: 20px 0;
}
.callout.warn { background: #FBF3E0; border-color: #EBD7A8; border-left-color: var(--amber); }
.callout.warn strong { color: #7a560f; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout p:first-child { margin-top: 0; }

table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .95rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); }
th { color: var(--navy); font-weight: 700; }
.tblwrap { overflow-x: auto; }

/* Guides hub cards */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 22px 0; }
.guide-card {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 20px; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
.guide-card:hover { border-color: var(--teal); transform: translateY(-2px); }
.guide-card h3 { margin: 0 0 5px; color: var(--navy); font-size: 1.08rem; }
.guide-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }

.next { margin-top: 30px; border-top: 1px solid var(--border); padding-top: 22px; }
.next h2 { font-size: 1.05rem; color: var(--ink); margin: 0 0 12px; }
.next ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.next a { font-weight: 600; text-decoration: none; }
.next a:hover { text-decoration: underline; }

footer { color: var(--faint); font-size: .82rem; margin-top: 30px; line-height: 1.7; }
footer a { color: var(--muted); }
.disclaimer { color: var(--muted); font-size: .85rem; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }