/**
 * Interior column templates — left side navigation, searchable/collapsible
 * documentation menu, the 2-column content card, and the right rail.
 *
 * The navs are built from core blocks (core/list, core/search) — no raw HTML —
 * and restyled here to the CMS.gov vertical-nav look. Collapse toggles and the
 * search filter are added by side-nav.js as progressive enhancement.
 */

:root {
  --ccg-side-nav-top: 6rem;
  --ccg-side-nav-line: color-mix(in srgb, var(--color-primary-light, #4f95c7) 20%, var(--color-gray-lighter, #e6e6e6));
}

/* ── Shared vertical-nav list look (core/list) ─────────────────── */
.ccg-side-menu__list,
.ccg-doc-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--ccg-side-nav-line);
}

.ccg-side-menu__list > li,
.ccg-doc-nav__list > li {
  margin: 0;
  list-style: none;
  border-block-start: 1px solid var(--ccg-side-nav-line);
}

.ccg-side-menu__list > li:first-child,
.ccg-doc-nav__list > li:first-child {
  border-block-start: 0;
}

.ccg-side-menu__list ::marker,
.ccg-doc-nav__list ::marker { content: ''; }

.ccg-side-menu__list a,
.ccg-doc-nav__list a {
  display: block;
  padding: 0.5rem 1rem;
  border-inline-start: 4px solid transparent;
  font-size: 0.9375rem;
  line-height: var(--font-line-height-heading, 1.4);
  text-decoration: none;
  color: var(--color-primary-darkest, #07124a);
  transition: border-inline-start-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ccg-side-menu__list a:hover,
.ccg-doc-nav__list a:hover {
  border-inline-start-color: var(--color-primary, #005ea2);
  background: color-mix(in srgb, var(--color-primary-lightest, #e8f1fb) 40%, transparent);
  transform: translateX(3px);
}

.ccg-side-menu__list a.is-current,
.ccg-doc-nav__list a.is-current {
  border-inline-start-color: var(--color-primary-darker, #0d2499);
  background: color-mix(in srgb, var(--color-primary-lightest, #e8f1fb) 55%, transparent);
  font-weight: 600;
  color: var(--color-primary-darker, #0d2499);
}

/* ── Simple section menu (2-column left panel) ─────────────────── */
.ccg-side-menu {
  position: sticky;
  top: var(--ccg-side-nav-top);
  padding: 1rem;
  border: 1px solid var(--ccg-side-nav-line);
  border-radius: 12px;
  background: var(--color-white, #ffffff);
  box-shadow: 0 2px 14px color-mix(in srgb, var(--color-primary-darkest, #07124a) 6%, transparent);
}

.ccg-side-menu__title,
.ccg-doc-nav__title {
  margin: 0 0 0.75rem;
  padding: 0 0.5rem;
  font-family: var(--global__font-family, 'Open Sans', system-ui, sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gray-dark, #5a5a5a);
}

/* ── Documentation menu (3-column left panel) ──────────────────── */
.ccg-doc-nav {
  position: sticky;
  top: var(--ccg-side-nav-top);
  max-height: calc(100vh - var(--ccg-side-nav-top) - 1.5rem);
  overflow: hidden auto;
  padding: 1rem;
  border: 1px solid var(--ccg-side-nav-line);
  border-radius: 12px;
  background: var(--color-white, #ffffff);
  box-shadow: 0 2px 14px color-mix(in srgb, var(--color-primary-darkest, #07124a) 6%, transparent);
}

.ccg-doc-nav__search { margin: 0 0 0.75rem; }

.ccg-doc-nav__search .wp-block-search__input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ccg-side-nav-line);
  border-radius: 8px;
  font-size: 0.9375rem;
}

/* Nested group list — animatable collapse (JS toggles .is-collapsed). */
.ccg-doc-nav__list ul.wp-block-list {
  margin: 0;
  padding-inline-start: 0.75rem;
  list-style: none;
  overflow: hidden;
  max-height: 40rem;
  opacity: 1;
  transition: max-height 0.28s ease, opacity 0.2s ease;
}

.ccg-doc-nav__list ul.wp-block-list.is-collapsed {
  max-height: 0;
  opacity: 0;
}

.ccg-doc-nav__list ul.wp-block-list > li { margin: 0; list-style: none; border: 0; }

/* Group toggle button injected by JS around a parent item's label. */
.ccg-doc-nav__grouptoggle {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0.5rem 2rem 0.5rem 1rem;
  border: 0;
  border-inline-start: 4px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: start;
  color: var(--color-primary-darkest, #07124a);
  cursor: pointer;
}

.ccg-doc-nav__grouptoggle::after {
  content: '';
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
  opacity: 0.7;
}

.ccg-doc-nav__grouptoggle[aria-expanded="false"]::after {
  transform: translateY(-30%) rotate(-45deg);
}

/* Search filtering hides non-matching items. */
.ccg-doc-nav__list li[hidden] { display: none; }

.ccg-doc-nav__empty {
  display: none;
  margin: 0.5rem 0.5rem 0;
  font-size: 0.875rem;
  color: var(--color-gray-dark, #5a5a5a);
}

.ccg-doc-nav__empty--show { display: block; }

/* ── Entrance animation (reduced-motion aware) ─────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .ccg-side-menu__list > li,
  .ccg-doc-nav__list > li {
    animation: ccg-side-nav-in 0.4s ease both;
  }
  .ccg-side-menu__list > li:nth-child(1), .ccg-doc-nav__list > li:nth-child(1) { animation-delay: 0.03s; }
  .ccg-side-menu__list > li:nth-child(2), .ccg-doc-nav__list > li:nth-child(2) { animation-delay: 0.07s; }
  .ccg-side-menu__list > li:nth-child(3), .ccg-doc-nav__list > li:nth-child(3) { animation-delay: 0.11s; }
  .ccg-side-menu__list > li:nth-child(4), .ccg-doc-nav__list > li:nth-child(4) { animation-delay: 0.15s; }
  .ccg-side-menu__list > li:nth-child(n + 5), .ccg-doc-nav__list > li:nth-child(n + 5) { animation-delay: 0.19s; }
}

@keyframes ccg-side-nav-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

/* ── 2-column main content card ────────────────────────────────── */
.ccg-page-two-column .ccg-page-columns__main {
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--color-primary-light, #4f95c7) 18%, var(--color-gray-lighter, #e6e6e6));
  border-radius: 14px;
  background: var(--color-white, #ffffff);
  box-shadow: 0 2px 16px color-mix(in srgb, var(--color-primary-darkest, #07124a) 5%, transparent);
}

/* ── 3-column right rail ───────────────────────────────────────── */
.ccg-rail {
  position: sticky;
  top: var(--ccg-side-nav-top);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ccg-rail__card {
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--ccg-side-nav-line);
  border-radius: 12px;
  background: var(--color-white, #ffffff);
}

.ccg-rail__heading {
  margin: 0 0 0.75rem;
  font-family: var(--global__font-family, 'Open Sans', system-ui, sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gray-dark, #5a5a5a);
}

.ccg-rail__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ccg-rail__list li { margin: 0; }

.ccg-rail__list a,
.ccg-rail__list a:visited {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-primary, #005ea2);
  text-decoration: none;
}

.ccg-rail__list a:hover { text-decoration: underline; text-underline-offset: 0.15em; }

.ccg-rail__cta {
  border-color: color-mix(in srgb, var(--color-primary, #005ea2) 30%, transparent);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--color-primary-lightest, #e8f1fb) 70%, var(--color-white, #ffffff)) 0%,
    var(--color-white, #ffffff) 100%
  );
}

.ccg-rail__cta-text {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-gray-dark, #5a5a5a);
}

/* ── Narrow viewports — stop sticking, stack above content ─────── */
@media (max-width: 1023px) {
  .ccg-side-menu,
  .ccg-doc-nav,
  .ccg-rail {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ccg-side-menu__list a,
  .ccg-doc-nav__list a { transition: none; }
  .ccg-side-menu__list a:hover,
  .ccg-doc-nav__list a:hover { transform: none; }
}