/*
Theme Name: Rural Data Portal
Theme URI: https://www.rural-data.com
Author: Rural Data research team
Author URI: https://www.rural-data.com
Description: A modern, data-product–focused block (FSE) theme for the Rural Data Portal — a research, mapping, and data hub for rural health and social data in Canada. Includes patterns for hero, feature cards, research summaries, dataset cards, and map embeds. Built on theme.json with full Site Editor support.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.2.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rural-data
Tags: full-site-editing, block-patterns, block-styles, blog, news, education, one-column, two-columns, three-columns, four-columns, custom-colors, custom-logo, custom-menu, featured-images, theme-options, threaded-comments, translation-ready, wide-blocks
*/

/* -------------------------------------------------------------------------
   Rural Data Portal — supplemental styles
   The bulk of the design lives in theme.json (typography, palette, base
   styles for headings/buttons/links). This file styles the design-specific
   classNames the patterns apply to core blocks, plus a few accessibility
   refinements. There is no reliance on inline styles — all visuals come
   from classNames so blocks validate cleanly in the editor.
   ------------------------------------------------------------------------- */

/* ---------- Skip link ---------- */
.skip-link.screen-reader-text {
    background-color:#fff; color: var(--wp--preset--color--ink);
    border:2px solid var(--wp--preset--color--accent); border-radius:4px;
    clip:rect(1px,1px,1px,1px); height:1px; left:8px; overflow:hidden;
    padding:12px 16px; position:absolute; top:8px; width:1px;
    word-wrap:normal !important; z-index:100000; text-decoration:none; font-weight:600;
}
.skip-link.screen-reader-text:focus {
    clip:auto; height:auto; width:auto; display:block; font-size:0.95rem;
}

.wp-block-site-title a { text-decoration:none; }

/* ---------- Generic helpers used across patterns ---------- */
.rd-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
    margin: 0 0 0.5rem;
}

.rd-lede {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.55;
    color: var(--wp--preset--color--ink-muted);
    margin: 0 0 1.5rem;
    max-width: 60ch;
}

.rd-caption {
    font-size: 0.85rem;
    color: var(--wp--preset--color--ink-muted);
    margin-top: 0.75rem;
}

.rd-section { padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.rd-section--alt { /* surface-2 background applied via theme color in pattern */ }

.rd-section-hero {
    padding-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* ---------- Header ---------- */
.rd-site-header {
    border-bottom: 1px solid var(--wp--preset--color--border);
    background: rgba(255,255,255,0.86);
    backdrop-filter: saturate(160%) blur(8px);
    -webkit-backdrop-filter: saturate(160%) blur(8px);
}

.wp-block-navigation .wp-block-navigation-item__content { font-weight: 500; }
.wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--accent); }

/* ---------- Hero (homepage) ---------- */
.rd-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 5vw, 4rem) !important;
}

/* Subtle dot-grid backdrop on the hero */
.rd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(15, 30, 60, 0.10) 1px, transparent 0);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at 75% 35%, #000 30%, transparent 70%);
            mask-image: radial-gradient(ellipse at 75% 35%, #000 30%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.rd-hero > * { position: relative; z-index: 1; }

.rd-hero__title {
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: var(--wp--preset--color--ink);
    margin: 0 0 1.1rem;
    max-width: 22ch;
}

/* When .rd-lede appears inside the hero, soften the bottom margin */
.rd-hero .rd-lede { margin-bottom: 1.5rem; max-width: 60ch; }

/* ---------- Featured-indicator card (right side of hero) ---------- */
.rd-featured-indicator {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 14px;
    padding: 1.5rem !important;
    box-shadow: 0 24px 50px -28px rgba(15, 30, 60, 0.18);
}

.rd-featured-indicator__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--ink-muted);
    margin: 0 0 0.4rem;
}

.rd-featured-indicator__title {
    font-family: var(--wp--preset--font-family--display);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.5rem;
}

.rd-featured-indicator__desc {
    color: var(--wp--preset--color--ink-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 1rem;
}

.rd-featured-indicator__cta { margin: 0.5rem 0 0; font-weight: 600; }

/* Stats inside the indicator card */
.rd-stat-row { margin-bottom: 0.5rem; }
.rd-stat-row.wp-block-columns { gap: 0.75rem !important; }

.rd-stat {
    border-left: 3px solid var(--wp--preset--color--accent);
    padding: 0.25rem 0 0.25rem 0.85rem !important;
}

.rd-stat__value {
    font-family: var(--wp--preset--font-family--display);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--wp--preset--color--ink);
    margin: 0;
}

.rd-stat__label {
    font-size: 0.78rem;
    color: var(--wp--preset--color--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0.25rem 0 0;
}

/* ---------- Card grid (used by feature/research/dataset patterns) ---------- */
.rd-cards-grid.wp-block-columns { gap: 1.25rem !important; }

/* ---------- Feature cards (homepage four-up) ---------- */
.rd-feature-card {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 14px;
    padding: 1.5rem !important;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    height: 100%;
}

.rd-feature-card:hover,
.rd-feature-card:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -18px rgba(15,30,60,0.25);
    border-color: var(--wp--preset--color--accent);
}

.rd-feature-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--wp--preset--color--accent-soft);
    color: var(--wp--preset--color--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.rd-feature-card__icon svg { width: 22px; height: 22px; }

.rd-feature-card--research .rd-feature-card__icon { background: rgba(31,86,173,0.10);  color: var(--wp--preset--color--accent); }
.rd-feature-card--data     .rd-feature-card__icon { background: rgba(14,142,142,0.12); color: var(--wp--preset--color--data-teal); }
.rd-feature-card--mapping  .rd-feature-card__icon { background: rgba(217,138,27,0.14); color: var(--wp--preset--color--data-amber); }
.rd-feature-card--download .rd-feature-card__icon { background: rgba(47,125,79,0.12);  color: var(--wp--preset--color--data-forest); }

.rd-feature-card__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
    margin: 0 0 0.25rem;
}

.rd-feature-card__title {
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 0.5rem;
}

.rd-feature-card__title a {
    color: var(--wp--preset--color--ink);
    text-decoration: none;
}

.rd-feature-card__title a:hover { color: var(--wp--preset--color--accent); }

.rd-feature-card__desc {
    color: var(--wp--preset--color--ink-muted);
    line-height: 1.55;
    font-size: 0.97rem;
    margin: 0 0 0.75rem;
}

.rd-feature-card__cta {
    margin: auto 0 0;
    font-weight: 600;
}

.rd-feature-card__cta a {
    color: var(--wp--preset--color--accent);
    text-decoration: none;
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
}

.rd-feature-card__cta a::after {
    content: "→";
    transition: transform 180ms ease;
    display: inline-block;
}

.rd-feature-card:hover .rd-feature-card__cta a::after { transform: translateX(3px); }

/* ---------- Research / dataset cards ---------- */
.rd-research-card {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 12px;
    padding: 1.4rem !important;
    transition: border-color 160ms ease;
    height: 100%;
}

.rd-research-card:hover { border-color: var(--wp--preset--color--accent); }

.rd-research-card__tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--wp--preset--color--accent-soft);
    color: var(--wp--preset--color--accent);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    margin: 0 0 0.75rem;
}

.rd-research-card__title {
    font-family: var(--wp--preset--font-family--display);
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.rd-research-card__title a {
    color: var(--wp--preset--color--ink);
    text-decoration: none;
}

.rd-research-card__title a:hover { color: var(--wp--preset--color--accent); }

.rd-research-card__desc {
    color: var(--wp--preset--color--ink-muted);
    line-height: 1.55;
    margin: 0 0 0.75rem;
}

.rd-research-card__meta {
    font-size: 0.85rem;
    color: var(--wp--preset--color--ink-muted);
    margin: 0;
}

/* ---------- Posts grid (block pattern) ---------- */
.rd-posts-section { padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); }

.rd-posts-section .rd-lede { margin-bottom: 1.25rem; }

.rd-posts-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
}

.rd-posts-filter__hint {
    font-size: 0.85rem;
    color: var(--wp--preset--color--ink-muted);
    margin: 0;
}

.rd-posts-filter__pill {
    appearance: none;
    border: 1px solid var(--wp--preset--color--border);
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--ink);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.rd-posts-filter__pill:hover,
.rd-posts-filter__pill:focus-visible {
    border-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--accent);
    outline: none;
}

.rd-posts-filter__pill.is-active {
    background: var(--wp--preset--color--accent);
    color: #fff;
    border-color: var(--wp--preset--color--accent);
}

/* The Query Loop with displayLayout=flex,columns=3 */
.rd-posts-grid .wp-block-post-template.is-layout-flex {
    gap: 1.25rem !important;
}

.rd-posts-grid .wp-block-post-template {
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 900px) {
    .rd-posts-grid .wp-block-post-template.is-layout-flex {
        flex-wrap: wrap;
    }
    .rd-posts-grid .wp-block-post-template.is-layout-flex > * {
        flex: 1 1 calc(50% - 1.25rem);
    }
}

@media (max-width: 600px) {
    .rd-posts-grid .wp-block-post-template.is-layout-flex > * {
        flex: 1 1 100%;
    }
}

.rd-post-card {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 12px;
    padding: 1.4rem !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.rd-post-card:hover,
.rd-post-card:focus-within {
    border-color: var(--wp--preset--color--accent);
    box-shadow: 0 14px 30px -22px rgba(15, 30, 60, 0.25);
    transform: translateY(-2px);
}

.rd-post-card__thumb {
    margin: -1.4rem -1.4rem 1rem;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    aspect-ratio: 16 / 9;
    background: var(--wp--preset--color--surface-2);
}

.rd-post-card__thumb a,
.rd-post-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rd-post-card__thumb img {
    transition: transform 320ms ease;
}

.rd-post-card:hover .rd-post-card__thumb img {
    transform: scale(1.03);
}

.rd-post-card__tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--wp--preset--color--accent-soft);
    color: var(--wp--preset--color--accent);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    margin: 0 0 0.75rem;
}

.rd-post-card__tag a {
    color: inherit;
    text-decoration: none;
}

.rd-post-card__title {
    font-family: var(--wp--preset--font-family--display);
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.rd-post-card__title a {
    color: var(--wp--preset--color--ink);
    text-decoration: none;
}

.rd-post-card__title a:hover { color: var(--wp--preset--color--accent); }

.rd-post-card__desc,
.rd-post-card__desc p {
    color: var(--wp--preset--color--ink-muted);
    line-height: 1.55;
    margin: 0 0 0.75rem;
    font-size: 0.97rem;
}

.rd-post-card__meta {
    margin: auto 0 0;
    font-size: 0.85rem;
    color: var(--wp--preset--color--ink-muted);
}

.rd-posts-loadmore-wrap {
    margin-top: 1.5rem !important;
}

.rd-posts-loadmore-wrap .wp-block-button__link.is-loading,
.rd-posts-loadmore-wrap .wp-block-button__link[aria-busy="true"] {
    opacity: 0.6;
    cursor: progress;
}

.rd-posts-empty {
    grid-column: 1 / -1;
    color: var(--wp--preset--color--ink-muted);
    font-style: italic;
    margin: 0;
}

/* Reduced motion: drop card lift + thumbnail zoom */
@media (prefers-reduced-motion: reduce) {
    .rd-post-card,
    .rd-post-card__thumb img { transition: none; }
    .rd-post-card:hover { transform: none; }
    .rd-post-card:hover .rd-post-card__thumb img { transform: none; }
}

/* ---------- Map embed ---------- */
.rd-map-embed {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--wp--preset--color--border);
    background: var(--wp--preset--color--surface-2);
    aspect-ratio: 16 / 9;
}

.rd-map-embed iframe,
.rd-map-embed > * { width: 100%; height: 100%; border: 0; }

/* ---------- Plain-language callout ---------- */
.rd-pl-summary {
    border-left: 4px solid var(--wp--preset--color--accent) !important;
    background: var(--wp--preset--color--accent-soft);
    padding: 1.25rem 1.5rem !important;
    border-radius: 0 12px 12px 0;
    margin: 1.5rem 0;
}

.rd-pl-summary__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
    margin: 0 0 0.4rem;
}

/* ---------- Citation block ---------- */
.rd-citation {
    background: var(--wp--preset--color--surface-2);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 14px;
    padding: 1.5rem !important;
}

.rd-citation__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
    margin: 0 0 0.25rem;
}

.rd-citation__title {
    font-family: var(--wp--preset--font-family--display);
    margin: 0.25rem 0 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.rd-citation__note {
    font-size: 0.9rem;
    color: var(--wp--preset--color--ink-muted);
    margin: 0.75rem 0 0;
}

/* ---------- Buttons (block styles) ---------- */
.wp-block-button.is-style-rd-primary .wp-block-button__link {
    background: var(--wp--preset--color--accent);
    color: #fff;
    border-radius: 8px;
    padding: 0.85rem 1.4rem;
    font-weight: 600;
    box-shadow: 0 6px 18px -10px rgba(31,86,173,0.6);
}

.wp-block-button.is-style-rd-primary .wp-block-button__link:hover {
    background: var(--wp--preset--color--accent-strong);
}

.wp-block-button.is-style-rd-ghost .wp-block-button__link {
    background: transparent;
    color: var(--wp--preset--color--ink);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 8px;
    padding: 0.85rem 1.4rem;
    font-weight: 600;
}

.wp-block-button.is-style-rd-ghost .wp-block-button__link:hover {
    border-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--accent);
}

/* ---------- Footer ---------- */
.rd-site-footer {
    background: var(--wp--preset--color--ink);
    color: #d8dde7;
}

.rd-site-footer a { color: #fff; }

.rd-site-footer .rd-footer-heading {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9aa3b5;
    margin-bottom: 0.75rem;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .rd-feature-card,
    .rd-feature-card__cta a::after { transition: none; }
    .rd-feature-card:hover { transform: none; }
}

/* ---------- Print niceties ---------- */
@media print {
    .rd-site-header,
    .rd-site-footer,
    .wp-block-navigation { display: none; }
    body { color: #000; background: #fff; }
}