/* Certified ProBooks — client update log.
   Brand pulled from her site so this reads as the same company:
   navy #2C4E8C, green #92D050, Raleway headings / Inter body. */

:root {
  --navy: #2C4E8C;
  --navy-dark: #244072;
  --navy-deep: #1B2F55;
  --navy-tint: #EEF2F9;
  --green: #92D050;
  --green-dark: #74AD37;
  --green-tint: #F1F9E7;
  --ink: #1B2430;
  --body: #47536B;
  --muted: #6B7688;
  --border: #E1E7F0;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--body);
  background: #F7F9FC;
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

h1, h2, h3 { font-family: 'Raleway', 'Avenir Next', sans-serif; margin: 0; color: var(--ink); }

a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }

header.site {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 65%, var(--navy-dark) 120%);
  color: #fff; padding: 38px 0 32px;
}
header.site h1 { color: #fff; font-size: clamp(1.6rem, 4.5vw, 2.1rem); font-weight: 800; letter-spacing: -.01em; }
header.site .lede { color: #C9D6EC; margin: 10px 0 0; font-size: .98rem; }

header.site .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
header.site .brand img { height: 46px; width: auto; background: #fff; border-radius: 8px; padding: 4px; }
header.site .brand .name { font-family: 'Raleway', sans-serif; font-weight: 800; color: #fff; font-size: 1rem; }
header.site .brand .tag  { color: var(--green); font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }

.updates-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.updates-nav a {
  color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  padding: 7px 15px; border-radius: 999px; font-size: .86rem; font-weight: 600;
}
.updates-nav a:hover { background: rgba(255,255,255,.22); text-decoration: none; }
.updates-nav a[aria-current="page"] { background: var(--green); border-color: var(--green); color: var(--navy-deep); }

main { padding: 34px 0 60px; }

.eyebrow {
  display: block; font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 26px 0 12px;
}
.eyebrow:first-child { margin-top: 0; }

.release-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px 26px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(27,47,85,.05);
}
.release-card .date { display: block; font-size: .78rem; font-weight: 700; color: var(--green-dark); letter-spacing: .04em; margin-bottom: 6px; }
.release-card h2 { font-size: 1.28rem; font-weight: 800; line-height: 1.3; margin-bottom: 8px; }
.release-card h2 a { color: var(--ink); }
.release-card .summary { margin: 0; font-size: .96rem; }
.readmore { display: inline-block; margin-top: 14px; font-weight: 700; font-size: .9rem; border-bottom: 2px solid var(--green); }
.readmore:hover { text-decoration: none; border-bottom-color: var(--navy); }

.tag {
  display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin: 14px 6px 0 0;
}
.tag.feature     { background: var(--green-tint); color: var(--green-dark); border: 1px solid var(--green); }
.tag.improvement { background: var(--navy-tint); color: var(--navy); border: 1px solid #C6D4EA; }
.tag.removed     { background: #FDECEC; color: #B3261E; border: 1px solid #F3C4C1; }
.tag.blocked     { background: #FFF4E0; color: #96620A; border: 1px solid #F2D49A; }

.changes { margin-top: 22px; }
.changes h3 { font-size: .82rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.change-list { margin: 0; padding-left: 20px; }
.change-list li { margin-bottom: 11px; font-size: .95rem; }
.change-list strong { color: var(--ink); }

.back-link { display: inline-block; font-size: .88rem; font-weight: 600; margin-bottom: 18px; }

.callout {
  background: var(--green-tint); border: 1px solid var(--green);
  border-left-width: 4px; border-radius: 10px; padding: 16px 18px; margin: 20px 0 0;
  font-size: .93rem;
}
.callout strong { color: var(--navy-deep); }
.callout.warn { background: #FFF8EA; border-color: #F2D49A; }

footer.site {
  border-top: 1px solid var(--border); padding: 24px 0 40px;
  font-size: .84rem; color: var(--muted); text-align: center;
}

@media (max-width: 560px) {
  .release-card { padding: 20px; }
  header.site { padding: 30px 0 26px; }
}