/* Icon dock: links and labels remain in the document without JavaScript. */
@media (min-width: 1081px) {
  .site-nav {
    position: relative;
    justify-self: center;
    display: flex;
    width: max-content;
    height: 68px;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(13,41,69,.13);
    border-radius: 22px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 24px rgba(13,41,69,.08);
    overflow: visible;
  }
  .site-nav .dock-item {
    position: relative;
    z-index: 0;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    color: var(--navy);
    text-decoration: none;
  }
  .site-nav .dock-item::after { display: none; }
  .site-nav .dock-item:is(:hover, :focus-visible) { z-index: 2; }
  .dock-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: transparent;
    transform: scale(var(--dock-scale, 1));
    transition: transform .16s ease, background-color .16s ease, color .16s ease;
  }
  .dock-icon .icon { width: 22px; height: 22px; stroke-width: 1.65; }
  .dock-item:hover .dock-icon, .dock-item:focus-visible .dock-icon { background: #f3eee4; }
  .dock-item:focus-visible .dock-icon { transform: scale(1.24); }
  .dock-item[aria-current="page"] .dock-icon { background: var(--navy); color: #fff; }
  .dock-item[aria-current="page"]:is(:hover, :focus-visible) .dock-icon { background: var(--navy-2); }
  .dock-label {
    position: absolute;
    top: calc(100% + 17px);
    left: 50%;
    width: max-content;
    max-width: 170px;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--navy);
    box-shadow: 0 5px 14px rgba(13,41,69,.14);
    color: #fff;
    font-size: .78rem;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -5px);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
  }
  .dock-item:is(:hover, :focus-visible) .dock-label { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 1080px) {
  .site-nav {
    width: 100%;
    max-height: calc(100dvh - var(--header-height));
    gap: 0;
    padding: 10px 20px 18px;
    overflow-y: auto;
    border-radius: 0;
    background: #fff;
  }
  .site-nav.is-open { visibility: visible; }
  .site-nav .dock-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
    text-decoration: none;
  }
  .site-nav .dock-item::after { display: none; }
  .dock-icon { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: #f3f4f1; }
  .dock-icon .icon { width: 21px; height: 21px; }
  .dock-item[aria-current="page"] .dock-icon { background: var(--navy); color: #fff; }
  .dock-label { position: static; color: var(--navy); white-space: normal; }
}

.practice-index { display: grid; gap: 17px; margin-bottom: 55px; padding: 24px 28px; border: 1px solid var(--line); background: #faf9f6; }
.practice-index > strong { color: var(--navy); font-family: var(--serif); font-size: 1.2rem; font-weight: 500; }
.practice-index > div { display: flex; flex-wrap: wrap; gap: 8px; }
.practice-index a { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy); font-size: .88rem; line-height: 1.25; text-decoration: none; }
.practice-index a:hover, .practice-index a:focus-visible { border-color: var(--gold); background: #fbf4e8; }
.practice-topic-link { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 14px; color: var(--navy); text-decoration: none; }
.practice-topic-link > span { min-width: 0; }
.practice-topic-link small { flex: 0 0 auto; color: #86602a; font-size: .78rem; white-space: nowrap; }
.practice-topic-link:hover > span, .practice-topic-link:focus-visible > span { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.practice-all-link { margin-top: 30px; }

@media (max-width: 780px) {
  .practice-index { margin-bottom: 30px; padding: 20px; }
  .practice-index > div { max-height: 220px; overflow-y: auto; }
  .practice-topic-link { flex-direction: column; gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .dock-icon, .dock-label { transition: none; }
}

@media print {
  .practice-index { display: none; }
}