/*
 * Connected Municipality resources pages (/resources/ and /resources/<situation>/).
 *
 * Restyling: change the settings in the first block. Colours follow the
 * Kadence palette when it's there, with the check-up's colours as fallbacks.
 * All rules are scoped to .cm-resources.
 */

.cm-resources {
    --cm-res-navy: var(--global-palette2, #073b64);
    --cm-res-accent: var(--global-palette1, #078b96);
    --cm-res-text: var(--global-palette3, #1a202c);
    --cm-res-text-soft: var(--global-palette5, #4a5568);
    --cm-res-tint: var(--global-palette8, #eaf2f3);
    --cm-res-surface: var(--global-palette9, #ffffff);
    --cm-res-border: #d5e2ee;
    --cm-res-radius: 12px;
    --cm-res-space: clamp(24px, 4vw, 40px);

    /* Lanes, the same as the check-up. */
    --cm-res-lane-understand: #0b72b8;
    --cm-res-lane-find: #0b7a66;
    --cm-res-lane-do: #b8860b;
    --cm-res-lane-take-part: #6b4fa0;
    --cm-res-lane-behind: #4e5d6c;

    /* Card kinds. */
    --cm-res-kind-approach: #0b72b8;
    --cm-res-kind-tool: #0b7a66;
    --cm-res-kind-foundation: #4e5d6c;
    --cm-res-kind-ai: #6b4fa0;
}

.cm-resources .content-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--cm-res-space) 0 calc(var(--cm-res-space) * 1.5);
    color: var(--cm-res-text);
}

/* Kadence's content container adds side padding; other themes may not. */
body:not(.wp-theme-kadence) .cm-resources .content-wrap {
    padding-left: 16px;
    padding-right: 16px;
}

.cm-resources h1,
.cm-resources h2,
.cm-resources h3,
.cm-resources h4 {
    color: var(--cm-res-navy);
    line-height: 1.25;
}

.cm-resources a:focus-visible {
    outline: 3px solid var(--cm-res-accent);
    outline-offset: 2px;
}

/* Lane colours */
.cm-res-lane--lane-understand { --cm-res-lane: var(--cm-res-lane-understand); }
.cm-res-lane--lane-find { --cm-res-lane: var(--cm-res-lane-find); }
.cm-res-lane--lane-do { --cm-res-lane: var(--cm-res-lane-do); }
.cm-res-lane--lane-take-part { --cm-res-lane: var(--cm-res-lane-take-part); }
.cm-res-lane--lane-behind-the-scenes { --cm-res-lane: var(--cm-res-lane-behind); }

.cm-res-swatch {
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    margin-right: 0.5em;
    border-radius: 3px;
    background: var(--cm-res-lane, var(--cm-res-navy));
    vertical-align: baseline;
}

/* Breadcrumb */
.cm-res-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 1.25rem;
    font-size: 0.9375rem;
    color: var(--cm-res-text-soft);
}

/* Hero */
.cm-res-hero {
    margin-bottom: var(--cm-res-space);
}

.cm-res-hero__title {
    margin: 0 0 0.75rem;
    font-size: clamp(2rem, 4vw, 2.75rem);
}

.cm-res-hero__lead {
    margin: 0 0 0.5rem;
    font-size: clamp(1.125rem, 2vw, 1.3125rem);
    font-weight: 500;
}

.cm-res-hero__helper {
    margin: 0;
    color: var(--cm-res-text-soft);
}

/* When it's working well */
.cm-res-good {
    margin-bottom: var(--cm-res-space);
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--cm-res-accent);
    border-radius: 0 var(--cm-res-radius) var(--cm-res-radius) 0;
    background: var(--cm-res-tint);
}

.cm-res-good h2 {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
}

.cm-res-good p {
    margin: 0;
}

/* Where to start / If you don't have this yet */
.cm-res-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: var(--cm-res-space);
}

.cm-res-step {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--cm-res-border);
    border-radius: var(--cm-res-radius);
    background: var(--cm-res-surface);
}

.cm-res-step h2 {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
}

.cm-res-step p {
    margin: 0;
}

/* Card sections */
.cm-res-section {
    margin-bottom: var(--cm-res-space);
}

.cm-res-section > h2 {
    margin: 0 0 1rem;
    font-size: 1.5rem;
}

.cm-res-card {
    margin-bottom: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--cm-res-border);
    border-top: 4px solid var(--cm-res-kind, var(--cm-res-navy));
    border-radius: var(--cm-res-radius);
    background: var(--cm-res-surface);
    scroll-margin-top: 120px;
}

.cm-res-card:target {
    box-shadow: 0 0 0 3px var(--cm-res-kind, var(--cm-res-navy));
}

.cm-res-kind--approach { --cm-res-kind: var(--cm-res-kind-approach); }
.cm-res-kind--tool { --cm-res-kind: var(--cm-res-kind-tool); }
.cm-res-kind--foundation { --cm-res-kind: var(--cm-res-kind-foundation); }
.cm-res-kind--ai { --cm-res-kind: var(--cm-res-kind-ai); }

.cm-res-card__kind {
    margin: 0 0 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cm-res-kind, var(--cm-res-text-soft));
}

.cm-res-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.3125rem;
}

.cm-res-card__summary {
    font-weight: 600;
}

.cm-res-card p {
    margin: 0 0 0.75rem;
}

.cm-res-card__subhead {
    margin: 1rem 0 0.5rem;
    font-size: 1rem;
}

.cm-res-card__list {
    margin: 0 0 0.75rem 1.25rem;
    padding: 0;
}

.cm-res-card__list li {
    margin-bottom: 0.25rem;
}

.cm-res-card__more {
    margin: 0;
    font-size: 0.9375rem;
}

/* "Also consider" cards fold their detail away */
.cm-res-card__fold > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--cm-res-navy);
}

.cm-res-card__fold[open] > summary {
    margin-bottom: 0.75rem;
}

.cm-res-card__fold > summary:focus-visible {
    outline: 3px solid var(--cm-res-navy);
    outline-offset: 2px;
}

.cm-res-browse {
    margin: 0 0 var(--cm-res-space);
}

/* Call to action */
.cm-res-cta {
    margin: var(--cm-res-space) 0;
    padding: 1.5rem;
    border-radius: var(--cm-res-radius);
    background: var(--cm-res-navy);
    color: #ffffff;
}

.cm-res-cta .cm-res-cta__title {
    margin: 0 0 0.5rem;
    font-size: 1.375rem;
    color: #ffffff;
}

.cm-res-cta p {
    margin: 0 0 1rem;
}

.cm-res-button,
.cm-resources a.cm-res-button {
    display: inline-block;
    padding: 0.75rem 1.375rem;
    border-radius: 8px;
    background: #ffffff;
    color: var(--cm-res-navy);
    font-weight: 600;
    text-decoration: none;
}

.cm-resources a.cm-res-button:hover,
.cm-resources a.cm-res-button:focus-visible {
    background: var(--cm-res-tint);
    color: var(--cm-res-navy);
}

.cm-res-cta a.cm-res-button:focus-visible {
    outline-color: #ffffff;
}

/* More in this lane */
.cm-res-others h2 {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
}

.cm-res-others ul {
    margin: 0 0 0 1.25rem;
    padding: 0;
}

/* Index */
.cm-res-lane {
    margin-bottom: var(--cm-res-space);
}

.cm-res-lane__title {
    margin: 0 0 0.75rem;
    font-size: 1.5rem;
}

.cm-res-index {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cm-res-index__link {
    display: block;
    height: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid var(--cm-res-border);
    border-left: 4px solid var(--cm-res-lane, var(--cm-res-navy));
    border-radius: var(--cm-res-radius);
    background: var(--cm-res-surface);
    color: var(--cm-res-text);
    text-decoration: none;
}

.cm-res-index__link:hover {
    background: var(--cm-res-tint);
}

.cm-res-index__name {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--cm-res-navy);
}

.cm-res-index__question {
    display: block;
    font-size: 0.9375rem;
    color: var(--cm-res-text-soft);
}

@media (max-width: 600px) {
    .cm-res-card,
    .cm-res-step,
    .cm-res-good,
    .cm-res-cta {
        padding: 1.125rem;
    }
}


/* Guidance shortcode on a WordPress page: [cm_resource_guidance] */
.cm-res-guidance {
    margin-bottom: var(--cm-res-space);
    color: var(--cm-res-text);
}

.cm-res-guidance__question {
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
    line-height: 1.45;
    color: var(--cm-res-text-soft);
}

.cm-res-guidance .cm-res-steps {
    margin-bottom: 0;
}