@media (min-width: 768px) {
  .hr-wrap { padding-block: var(--space-8); }
}

/* Top navbar: language switcher on the left, download + blog on the right.
   The inner width tracks .hr-layout so its edges line up with the content. */
.hr-navbar { background: var(--surface-raised); border-bottom: 1px solid var(--hairline); }
.hr-navbar-inner { max-width: 760px; margin: 0 auto; padding: var(--space-2) var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.hr-navbar ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.hr-navbar-langs { gap: var(--space-1); }
.hr-navbar .hr-navbar-links { gap: var(--space-4); margin-inline-start: auto; }
.hr-navbar-lang, .hr-navbar-link { font-size: 14px; line-height: 22px; color: var(--ink-muted); text-decoration: none; }
.hr-navbar-lang { display: block; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-weight: 700; letter-spacing: .06em; }
.hr-navbar-lang:hover, .hr-navbar-link:hover { color: var(--primary-strong); }
.hr-navbar-lang.active { background: var(--primary-tint); color: var(--primary-strong); }
.hr-navbar-link { display: inline-flex; align-items: center; gap: var(--space-1); }
.hr-navbar-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.hr-section { scroll-margin-top: var(--space-5); }

/* "On this page" section nav, docs-style, on the right of the resume column.
   Hidden on narrow screens where there's no room beside the content. */
.hr-toc { display: none; }

@media (min-width: 1100px) {
  .hr-layout { display: grid; grid-template-columns: minmax(0, 760px) 220px; justify-content: center; gap: var(--space-6); }
  .hr-layout > .hr-wrap { margin: 0; width: 100%; }
  .hr-navbar-inner { max-width: calc(760px + var(--space-6) + 220px); }
  .hr-toc { display: block; }
  .hr-toc-inner { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding-block: var(--space-8); }
}

.hr-toc-title { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-3); padding-inline-start: var(--space-3); }
.hr-toc-list { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--hairline); }
.hr-toc-link { display: block; margin-inline-start: -1px; padding: var(--space-1) var(--space-3); border-inline-start: 2px solid transparent; font-size: 14px; line-height: 22px; color: var(--ink-muted); text-decoration: none; }
.hr-toc-link:hover { color: var(--primary-strong); }
.hr-toc-link.active { color: var(--primary); font-weight: 700; border-inline-start-color: var(--primary); }

/* Standalone contact page and the "message sent" alert on the resume. */
.hr-contact-back { display: inline-block; margin-block-end: var(--space-5); font-size: 14px; color: var(--ink-muted); text-decoration: none; }
.hr-contact-back:hover { color: var(--primary-strong); }
.hr-contact-intro { margin: var(--space-2) 0 var(--space-5); color: var(--ink-muted); }
.hr-contact .card { --bs-card-spacer-y: var(--space-5); --bs-card-spacer-x: var(--space-5); --bs-card-bg: var(--surface-raised); }
.hr-contact .form-label { font-weight: 600; }
/* Bootstrap draws its own rounded focus rings; drop the page-wide square outline. */
.hr-contact .form-control:focus-visible, .hr-contact .btn:focus-visible, .hr-contact-alert .btn-close:focus-visible { outline: none; }
.hr-contact-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); }
.hr-contact-status { margin-inline-end: auto; }
.hr-contact-status[data-state="error"] { color: var(--bs-danger); }
.hr-navbar-link.active { color: var(--primary-strong); }
.hr-contact-alert { margin-block-end: var(--space-5); }
@media (prefers-color-scheme: dark) {
  .hr-contact-alert .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
}

/* Bootstrap hard-codes .btn-primary colours; point them at the site palette. */
.hr-page .btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-color: var(--on-primary); --bs-btn-hover-bg: var(--primary-strong); --bs-btn-hover-border-color: var(--primary-strong); --bs-btn-hover-color: var(--on-primary); --bs-btn-active-bg: var(--primary-strong); --bs-btn-active-border-color: var(--primary-strong); --bs-btn-active-color: var(--on-primary); --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary); --bs-btn-disabled-color: var(--on-primary); --bs-btn-focus-shadow-rgb: var(--primary-rgb); }

/* "Interested in working with me?" call-to-action under the summary. */
.hr-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--primary-tint); }
.hr-cta-text { margin: 0; flex: 1 1 260px; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ink); }
.hr-cta .btn { flex: 0 0 auto; }
@media (max-width: 575.98px) {
  .hr-cta .btn { width: 100%; }
}