/* ==========================================================================
   CodeToolz Knowledge Center — Resources
   Ported from the approved UI/UX prototype (assets/css/style.css). Loaded only
   on Resource pages, after kc-articles.css (tokens, fonts, base, sidebar,
   search field) and kc-search.css (search results + preview dialog). Every
   rule is scoped under `.kc`.
   Green stays a small accent: selected sidebar item / chips and the result-row
   hover rule only. Primary buttons are navy.
   ========================================================================== */

/* ---------- Theme reset guard ----------
   hello-elementor's reset styles every bare <button> (pink border, pink
   hover/focus fill). Restate the prototype look for our buttons. */
.kc-resources button { text-transform: none; letter-spacing: normal; }
.kc .rcard__media, .kc .rcard__media:hover, .kc .rcard__media:focus { border: 0; color: inherit; box-shadow: none; }
.kc .btn--ghost:focus { background: #fff; color: var(--ctkc-navy); border-color: var(--ctkc-line-strong); }
.kc .btn--ghost:hover { background: var(--ctkc-surface-alt); border-color: var(--ctkc-line-hover); color: var(--ctkc-navy); }
.kc .btn--primary:focus { background: var(--ctkc-navy); color: #fff; border-color: var(--ctkc-navy); }
.kc .btn--primary:hover { background: var(--ctkc-navy-700); border-color: var(--ctkc-navy-700); }
.kc .btn--text { background: none; border: 0; min-height: 40px; padding: 0 4px; color: var(--ctkc-blue); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
body .kc a.btn--text { color: var(--ctkc-blue); }
.kc .btn--text:hover, body .kc a.btn--text:hover { color: var(--ctkc-navy); background: none; }
.kc .btn--icon { width: 44px; padding: 0; }
body .kc a.btn--primary, body .kc a.btn--primary:hover { color: #fff; }
body .kc a.btn--ghost, body .kc a.btn--ghost:hover { color: var(--ctkc-navy); }

/* ---------- Page structure (wider Resource pages) ---------- */
.kc-resources .main-body { display: flex; flex-direction: column; gap: 24px; }
.kc-resources .layout-sidebar__main > .section + .section { margin-top: 24px; }
.kc-resources .page-head .badge { align-self: flex-start; }
/* Collection image (admin-chosen or bundled), left of the title. */
.kc-resources .page-head__row .page-head__media { flex: 0 0 200px; align-self: center; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--ctkc-line); border-radius: var(--ctkc-r-card); background: var(--ctkc-surface-sunk); }
.kc-resources .page-head__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Badge, flags, icon tile ---------- */
.kc .badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--ctkc-r-sm); border: 1px solid var(--ctkc-line-strong); background: #fff; font-size: 12px; font-weight: 600; color: var(--ctkc-navy); white-space: nowrap; }
.kc .badge .icon { width: 14px; height: 14px; stroke-width: 2.1; color: var(--ctkc-ink-muted); }
.kc .flag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--ctkc-surface-sunk); color: var(--ctkc-ink-soft); font-size: 12px; font-weight: 500; }
.kc .icon-tile { width: 40px; height: 40px; flex: none; border-radius: 10px; display: inline-grid; place-items: center; background: var(--ctkc-surface-sunk); border: 1px solid var(--ctkc-line); color: var(--ctkc-navy); }
.kc .icon-tile .icon { width: 20px; height: 20px; stroke-width: 1.8; }

/* ---------- Chips (Medical Forms category filter) ---------- */
.kc-resources .pill { min-height: 36px; padding: 0 14px; font-size: 14px; transition: background var(--ctkc-ease), border-color var(--ctkc-ease), color var(--ctkc-ease); }
body .kc-resources a.pill { color: var(--ctkc-ink-body); }
body .kc-resources a.pill:hover { border-color: var(--ctkc-line-hover); background: var(--ctkc-surface-alt); color: var(--ctkc-ink); }
body .kc-resources a.pill[aria-current="page"] { background: var(--ctkc-green-050); border-color: var(--ctkc-green); color: var(--ctkc-navy); font-weight: 600; }
.kc .chip-nav ul { list-style: none; display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; }
.kc .chip-nav li { flex: none; }
/* Desktop: the filter wraps beside the sidebar instead of scrolling. */
@media (min-width: 861px) { .kc .chip-nav ul { flex-wrap: wrap; overflow: visible; padding-bottom: 2px; } }

/* ---------- Form category switcher (stacked layouts only) ----------
   Replaces the sidebar's category sub-list at ≤860px: one closed row naming
   the current category; open, a list of every category (two columns on
   tablets). Selected item uses the sidebar's selected state. */
.kc .cat-switch details { background: #fff; border: 1px solid var(--ctkc-line-strong); border-radius: 10px; box-shadow: var(--ctkc-sh-xs); transition: border-color var(--ctkc-ease); }
.kc .cat-switch details:hover, .kc .cat-switch details[open] { border-color: var(--ctkc-line-hover); }
.kc .cat-switch summary { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 16px; list-style: none; cursor: pointer; border-radius: 9px; }
.kc .cat-switch summary::-webkit-details-marker { display: none; }
.kc .cat-switch summary::marker { content: ""; }
.kc .cat-switch summary:focus-visible { outline-offset: 0; }
.kc .cat-switch__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kc .cat-switch__label { font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ctkc-ink-muted); }
.kc .cat-switch__value { font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--ctkc-navy); }
.kc .cat-switch__count { flex: none; font-size: 13px; color: var(--ctkc-ink-muted); }
.kc .cat-switch__icon { color: var(--ctkc-ink-muted); transform: rotate(90deg); transition: transform var(--ctkc-ease); }
.kc .cat-switch details[open] .cat-switch__icon { transform: rotate(-90deg); }
.kc .cat-switch ul { list-style: none; display: grid; gap: 2px; margin: 0; padding: 8px; border-top: 1px solid var(--ctkc-line); }
.kc .cat-switch li { margin: 0; }
.kc .cat-switch a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: var(--ctkc-r-control); font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ctkc-ink-soft); text-decoration: none; transition: background var(--ctkc-ease), color var(--ctkc-ease); }
body .kc .cat-switch a { color: var(--ctkc-ink-soft); }
body .kc .cat-switch a:hover { background: var(--ctkc-surface-sunk); color: var(--ctkc-ink); }
body .kc .cat-switch a[aria-current="page"] { background: var(--ctkc-surface-sunk); color: var(--ctkc-navy); font-weight: 600; }
.kc .cat-switch a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--ctkc-green); }
@media (min-width: 641px) { .kc .cat-switch ul { grid-template-columns: 1fr 1fr; column-gap: 8px; } }
/* Desktop: the sidebar lists the categories. */
@media (min-width: 861px) { .kc .cat-switch { display: none; } }

/* ---------- Sidebar groups + form categories sub-list ---------- */
.kc .sidebar__group { margin: 18px 0 4px; padding: 0 12px; font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ctkc-ink-muted); }
.kc .sidebar__sub { list-style: none; margin: 2px 0 6px 16px; padding-left: 10px; border-left: 1px solid var(--ctkc-line); }
.kc .sidebar__sub a { min-height: 34px; padding: 6px 10px; font-size: 14px; }
.kc .sidebar a.is-open:not([aria-current]) { color: var(--ctkc-navy); font-weight: 600; }

/* ---------- Navigation cards (collections, form categories) ---------- */
.kc .nav-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px; margin: 0; padding: 0; }
.kc .nav-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.kc .nav-grid > li { margin: 0; }
.kc .card-foot { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.kc .card-foot .card-meta { margin: 0; padding: 0; }
.kc .card__cta { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--ctkc-blue); }
.kc .card__cta .icon { transition: transform var(--ctkc-ease); }
.kc .card--link:hover .card__cta .icon { transform: translateX(3px); }
.kc .card-media--docs { display: flex; align-items: flex-end; justify-content: center; }
.kc .doc-stack { display: flex; gap: 10px; align-items: flex-end; height: 82%; }
.kc .doc-stack img { height: 100%; width: auto; aspect-ratio: 600 / 780; object-fit: cover; object-position: top; background: #fff; border: 1px solid var(--ctkc-line); border-bottom: 0; border-radius: 4px 4px 0 0; box-shadow: 0 6px 16px rgba(1, 28, 68, .08); transition: transform var(--ctkc-ease); }
.kc .card--link:hover .doc-stack img { transform: translateY(-3px); }
/* No form previews yet: neutral document mark in the same well. */
.kc .doc-mark { align-self: center; display: grid; place-items: center; width: 64px; height: 80px; border-radius: 6px; background: #fff; border: 1px solid var(--ctkc-line); color: var(--ctkc-line-hover); }
.kc .doc-mark .icon { width: 30px; height: 30px; stroke-width: 1.5; }

/* ---------- Group heads (Browse Resources) ---------- */
.kc .group-head { display: flex; gap: 14px; align-items: center; }
.kc .group-head h2 { font-size: 20px; line-height: 1.3; font-weight: 700; }
.kc .group-head p { margin-top: 2px; font-size: 14px; color: var(--ctkc-ink-muted); }

/* ---------- Filter bar ---------- */
.kc .filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 0; padding-bottom: 16px; border-bottom: 1px solid var(--ctkc-line); }
.kc .filter-bar__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kc .filter-bar .select { flex: 0 0 auto; width: 210px; }
.kc .filter-note { margin-top: -10px; font-size: 13px; color: var(--ctkc-ink-muted); }
.kc .sibling-link { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 16px 20px; border-radius: var(--ctkc-r-card); background: var(--ctkc-surface-alt); border: 1px solid var(--ctkc-line); font-size: 15px; color: var(--ctkc-ink-soft); }

/* ---------- Unified resource card: Resource · Form ---------- */
.kc .rgrid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 24px; margin: 0; padding: 0; }
.kc .container--wide .rgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.kc .rgrid__full { grid-column: 1 / -1; }
.kc .rgrid > li { margin: 0; }
.kc .rcard { display: flex; flex-direction: column; overflow: hidden; }
.kc .rcard:hover { border-color: var(--ctkc-line-strong); box-shadow: var(--ctkc-sh-hover); transform: translateY(-2px); }
.kc .rcard__media { width: 100%; height: 164px; padding: 18px 0 0; margin: 0; display: flex; align-items: flex-end; justify-content: center; background: var(--ctkc-surface-sunk); border: 0; border-bottom: 1px solid var(--ctkc-line); border-radius: 0; cursor: zoom-in; overflow: hidden; }
.kc .rcard__media:hover, .kc .rcard__media:focus { background: var(--ctkc-surface-sunk); border-bottom: 1px solid var(--ctkc-line); }
.kc .rcard__media img { width: 112px; height: auto; aspect-ratio: 600 / 780; object-fit: cover; object-position: top; background: #fff; border: 1px solid var(--ctkc-line); border-bottom: 0; border-radius: 4px 4px 0 0; box-shadow: 0 6px 16px rgba(1, 28, 68, .10); transition: transform var(--ctkc-ease); }
.kc .rcard:hover .rcard__media img { transform: translateY(-4px); }
.kc .rcard__media--static { cursor: default; }
/* No preview image: neutral document mark, same well height so cards align. */
.kc .rcard__media--icon { align-items: center; padding: 0; cursor: default; color: var(--ctkc-line-hover); }
.kc .rcard__media--icon .icon { width: 44px; height: 44px; stroke-width: 1.4; }
.kc .rcard__kicker { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kc .rcard__type { display: inline-flex; align-items: center; gap: 6px; }
.kc .rcard__format { flex: none; padding: 2px 7px; border-radius: var(--ctkc-r-sm); border: 1px solid var(--ctkc-line); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ctkc-ink-muted); }
.kc .rcard .card-title { font-size: 17px; }
.kc .rcard__flags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.kc .rcard__actions { display: flex; gap: 8px; padding: 0 22px 22px; }
.kc .rcard__actions .btn { flex: 1 1 0; min-width: 0; min-height: 42px; padding: 0 12px; }
.kc .included { font-size: 14px; color: var(--ctkc-ink-soft); }
.kc .included summary { cursor: pointer; font-weight: 600; color: var(--ctkc-blue); width: fit-content; min-height: 30px; display: flex; align-items: center; }
.kc .included summary:hover { text-decoration: underline; }
.kc .included ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; }

/* ---------- Compact State directories ---------- */
.kc .dir-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 10px; margin: 0; padding: 0; }
.kc .dir-item { margin: 0; }
.kc .dir-item__link { height: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border: 1px solid var(--ctkc-line); border-radius: 10px; color: inherit; text-decoration: none; transition: border-color var(--ctkc-ease), box-shadow var(--ctkc-ease); }
body .kc a.dir-item__link, body .kc a.dir-item__link:hover { color: inherit; }
.kc .dir-item__link:hover { border-color: var(--ctkc-line-strong); box-shadow: 0 6px 16px rgba(1, 28, 68, .07); }
.kc .dir-item__logo { flex: none; display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; }
.kc .dir-item__logo img { display: block; width: auto; height: auto; max-height: 40px; max-width: 96px; }
.kc .dir-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kc .dir-item__state { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ctkc-ink-muted); }
.kc .dir-item__name { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ctkc-ink); transition: color var(--ctkc-ease); }
.kc .dir-item__site { flex: none; display: inline-flex; align-items: center; gap: 5px; max-width: 46%; font-size: 13.5px; font-weight: 600; color: var(--ctkc-blue); }
.kc .dir-item__domain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc .dir-item__link:hover .dir-item__name { color: var(--ctkc-blue); }
.kc .dir-item__link:hover .dir-item__domain { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.kc .sidebar .sidebar__group, .kc .sidebar .sidebar__sub { display: none; }
	body .kc .sidebar a.is-open { background: var(--ctkc-green-050); border-color: var(--ctkc-green); color: var(--ctkc-navy); }
	.kc-resources .page-head__row .kc-search { max-width: none; }
	/* One-line breadcrumb: a deep trail (Medical Forms › category) wrapped to
	   three lines and pushed the search box down on those pages only. It scrolls
	   sideways instead, scrolled to the current page (kc-resources.js), with a
	   fade on the side that has more. */
	.kc-resources .page-head .breadcrumb ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; overscroll-behavior-x: contain; }
	.kc-resources .page-head .breadcrumb ol::-webkit-scrollbar { display: none; }
	.kc-resources .page-head .breadcrumb li { flex: none; }
	.kc-resources .page-head .breadcrumb ol.is-scrolled { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px); mask-image: linear-gradient(to right, transparent 0, #000 28px); }
	.kc-resources .page-head__row .page-head__media { flex: none; width: 160px; align-self: flex-start; }
}
@media (max-width: 640px) {
	.kc .filter-bar__controls { width: 100%; }
	.kc .filter-bar .select { flex: 1 1 140px; width: auto; }
	.kc .dir-item__link { flex-wrap: wrap; row-gap: 4px; padding: 12px 14px; }
	.kc .dir-item__text { flex-basis: calc(100% - 52px); }
	.kc .dir-item__site { max-width: 100%; }
	.kc .dir-item__logo + .dir-item__text { flex-basis: calc(100% - 112px); }
}

@media (prefers-reduced-motion: reduce) {
	.kc .rcard:hover { transform: none; }
	.kc .rcard:hover .rcard__media img, .kc .card--link:hover .doc-stack img { transform: none; }
	.kc .cat-switch__icon { transition: none; }
}

@media print {
	.kc .chip-nav, .kc .cat-switch, .kc .ctkc-res-search, .kc .filter-bar__controls, .kc .rcard__actions { display: none !important; }
}