/* Detail guides and catalog headings. */
:root {
  --hh-guide-ink: #172236;
  --hh-guide-text: #344358;
  --hh-guide-border: #e6eaf0;
  --hh-guide-lemon: #ffed86;
  --hh-guide-mint: #a9ecd7;
  --hh-guide-lilac: #e1d0fa;
  --hh-guide-peach: #ffd3b0;
  --hh-guide-sky: #bde9fa;
}

.hh-guide-mark {
  color: var(--hh-guide-ink);
  background: linear-gradient(177deg, transparent 51%, var(--hh-marker, var(--hh-guide-lemon)) 52% 91%, transparent 92%);
  padding-inline: .13em;
  border-radius: .09em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  overflow-wrap: anywhere;
}

.hh-marker-mint { --hh-marker: var(--hh-guide-mint); }
.hh-marker-lilac { --hh-marker: var(--hh-guide-lilac); }
.hh-marker-peach { --hh-marker: var(--hh-guide-peach); }
.hh-marker-sky { --hh-marker: var(--hh-guide-sky); }

.hh-guide {
  box-sizing: border-box;
  width: min(100% - 2rem, 1080px);
  margin: clamp(2.3rem, 6vw, 5rem) auto;
  color: var(--hh-guide-ink);
}

.hh-guide--catalog { margin-block: 4rem 5rem; }
.hh-guide--catalog .hh-guide-intro { margin-bottom: 1.7rem; }

.hh-guide-intro {
  max-width: 66ch;
  color: var(--hh-guide-text);
  font-size: clamp(1.08rem, 2.3vw, 1.25rem);
  line-height: 1.7;
}

.hh-guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 275px);
  align-items: start;
  gap: clamp(1.4rem, 4.5vw, 4rem);
}

.hh-guide-copy { min-width: 0; }

.hh-guide-section {
  padding-block: clamp(1.3rem, 4vw, 2.4rem);
  border-top: 1px solid var(--hh-guide-border);
  scroll-margin-top: 104px;
}

.hh-guide-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.hh-guide-section:last-child { padding-bottom: 0; }

.hh-guide h2, .hh-guide h3, .hh-guide h4 {
  margin: 0 0 .75rem;
  color: var(--hh-guide-ink);
  font-size: clamp(1.28rem, 3.1vw, 1.82rem);
  font-weight: 790;
  line-height: 1.3;
  letter-spacing: -.024em;
  text-wrap: pretty;
}

.hh-guide-section p {
  max-width: 70ch;
  margin: 0;
  color: var(--hh-guide-text);
  font-size: clamp(1rem, 2vw, 1.08rem);
  line-height: 1.8;
  overflow-wrap: break-word;
}

.hh-guide-section p + p { margin-top: .9rem; }

.hh-guide-nav {
  position: sticky;
  top: 104px;
  padding: 1.25rem;
  border: 1px solid #e5deea;
  border-radius: 1rem;
  background: #faf8fc;
}

.hh-guide-nav p {
  margin: 0 0 .55rem;
  color: #55364e;
  font-size: .77rem;
  font-weight: 800;
  letter-spacing: .07em;
}

.hh-guide-nav ol, .hh-guide-related ul {
  display: grid;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hh-guide-nav a {
  display: block;
  padding: .48rem .1rem;
  border-radius: .25rem;
  color: #57374e;
  font-size: .91rem;
  line-height: 1.45;
}

.hh-guide-nav a:hover, .hh-guide-related a:hover { text-decoration: underline; }

.hh-guide-nav a:focus-visible, .hh-guide-related a:focus-visible,
.hh-guide-actions a:focus-visible {
  outline: 3px solid #7650a1;
  outline-offset: 3px;
}

.hh-guide-related {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-block: 1.6rem 0;
  border-top: 1px solid var(--hh-guide-border);
}

.hh-guide-related ul { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

.hh-guide-related a {
  display: block;
  padding: .9rem 1rem;
  border: 1px solid var(--hh-guide-border);
  border-radius: .7rem;
  color: #57374e;
  background: #fff;
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.4;
}

.hh-guide-actions {
  margin-block: 2.8rem 0;
  padding: clamp(1.2rem, 4vw, 2rem);
  border: 1px solid #e8dfe9;
  border-radius: 1.1rem;
  background: #fbf7fb;
}

.hh-guide-actions p {
  max-width: 65ch;
  margin: 0 0 1rem;
  color: var(--hh-guide-text);
  font-size: 1rem;
  line-height: 1.65;
}

.hh-guide-action-links { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.hh-guide-action-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .68rem 1rem;
  border-radius: .6rem;
  background: #714b67;
  color: #fff;
  font-size: .94rem;
  font-weight: 750;
  line-height: 1.3;
}

.hh-guide-action-links a:hover { background: #56364d; color: #fff; }
.hh-guide-action-links .hh-guide-secondary { background: #fff; color: #57374e; border: 1px solid #e5deea; }

.hh-guide-hero .page-title {
  max-width: 24ch;
  font-size: clamp(2rem, 5vw, 3.65rem);
  letter-spacing: -.045em;
  line-height: 1.18;
}

.hh-guide-hero .page-caption {
  max-width: 68ch;
  margin-bottom: .75rem;
  line-height: 1.65;
}

.hh-guide-new-hero {
  padding: clamp(2.15rem, 6vw, 4.1rem) 0;
  border-block: 1px solid #edf0f4;
  background: linear-gradient(175deg, #fcf8fd 0%, #fff 90%);
}

.hh-guide-new-hero .eyebrow { margin: 0 0 1.1rem; }
.hh-guide-new-hero .page-title { margin: 0 0 1rem; }
.hh-guide-new-hero .page-caption { color: var(--hh-guide-text); }

.hh-guide-shell { box-sizing: border-box; width: min(100% - 2rem, 1080px); margin-inline: auto; }

.hh-guide-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .7rem;
  margin: 0;
  padding: .8rem 0;
  list-style: none;
  font-size: .9rem;
}

.hh-guide-crumbs li:not(:last-child)::after { content: "/"; margin-left: .7rem; color: #7a8294; }
.hh-guide-crumbs [aria-current=page] { color: var(--hh-guide-text); }

.hh-guide-sitehead, .hh-guide-sitefoot { border-block-end: 1px solid var(--hh-guide-border); }
.hh-guide-sitefoot { border-block-start: 1px solid var(--hh-guide-border); border-block-end: 0; }
.hh-guide-sitehead .hh-guide-shell, .hh-guide-sitefoot .hh-guide-shell {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1.3rem;
  padding-block: .6rem;
}
.hh-guide-sitehead img { display: block; height: 34px; width: auto; }
.hh-guide-sitehead nav, .hh-guide-sitefoot nav { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.hh-guide-sitehead nav a, .hh-guide-sitefoot nav a { padding: .35rem .1rem; font-size: .9rem; font-weight: 700; }

@media (max-width: 720px) {
  .hh-guide-layout { grid-template-columns: 1fr; }
  .hh-guide-nav { position: static; }
  .hh-guide-hero .page-title { max-width: 100%; }
}

@media (forced-colors: active) {
  .hh-guide-mark { background: none; color: CanvasText; text-decoration: underline; }
}