/*
 * Avenir web fonts, copied from the PEH User Portal (`/assets/fonts-*.css`).
 *
 * The files themselves live in `public/peh_theme/fonts/` and are served from
 * `/peh_theme/fonts/...`, so these URLs stay valid regardless of how webassets
 * bundles this stylesheet.
 */

@font-face {
    font-family: 'Avenir';
    src: url("/peh_theme/fonts/Avenir.woff") format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'AvenirLTLight';
    src: url("/peh_theme/fonts/AvenirLTLight.woff2") format('woff2'),
         url("/peh_theme/fonts/AvenirLTLight.woff") format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'AvenirLTBook';
    src: url("/peh_theme/fonts/AvenirLTBook.woff2") format('woff2'),
         url("/peh_theme/fonts/AvenirLTBook.woff") format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'AvenirLTRoman';
    src: url("/peh_theme/fonts/AvenirLTRoman.woff2") format('woff2'),
         url("/peh_theme/fonts/AvenirLTRoman.woff") format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'AvenirLTMedium';
    src: url("/peh_theme/fonts/AvenirLTMedium.woff2") format('woff2'),
         url("/peh_theme/fonts/AvenirLTMedium.woff") format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'AvenirLTHeavy';
    src: url("/peh_theme/fonts/AvenirLTHeavy.woff2") format('woff2'),
         url("/peh_theme/fonts/AvenirLTHeavy.woff") format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'AvenirLTBlack';
    src: url("/peh_theme/fonts/AvenirLTBlack.woff2") format('woff2'),
         url("/peh_theme/fonts/AvenirLTBlack.woff") format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'AvenirLTOblique';
    src: url("/peh_theme/fonts/AvenirLTOblique.woff2") format('woff2'),
         url("/peh_theme/fonts/AvenirLTOblique.woff") format('woff');
    font-style: oblique;
    font-display: swap;
}

/*
 * PEH theme for CKAN.
 *
 * Ported from the PEH User Portal (https://peh-staging.saskvitoint.int.vito.be/),
 * which is built on Tailwind + daisyUI. Its two daisyUI themes, `peh-light` and
 * `peh-dark`, are declared there in oklch(); the hex values below are the exact
 * sRGB equivalents (the original oklch triplet is kept in a comment next to
 * each one).
 *
 * The active theme is selected with `data-theme` on <html> ("peh-light" or
 * "peh-dark"), exactly like the portal does.
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root,
[data-theme="peh-light"] {
    color-scheme: light;

    --peh-base-100: #f6fbfd;            /* oklch(0.985 0.006 225) */
    --peh-base-200: #e8f2f6;            /* oklch(0.955 0.012 225) */
    --peh-base-300: #d2e3ea;            /* oklch(0.905 0.020 225) */
    --peh-base-content: #12283b;        /* oklch(0.270 0.045 245) */

    --peh-primary: #0e4f64;             /* oklch(0.400 0.070 225) */
    --peh-primary-content: #f8fdfe;     /* oklch(0.990 0.005 225) */
    --peh-secondary: #00315b;           /* oklch(0.310 0.090 250) */
    --peh-secondary-content: #f2fafe;   /* oklch(0.980 0.010 235) */
    --peh-accent: #9ec450;              /* oklch(0.770 0.150 125) */
    --peh-accent-content: #19260b;      /* oklch(0.250 0.050 130) */
    --peh-neutral: #344b5b;             /* oklch(0.400 0.040 240) */
    --peh-neutral-content: #eff7fb;     /* oklch(0.970 0.010 230) */

    --peh-info: #2baad3;                /* oklch(0.690 0.120 225) */
    --peh-info-content: #001d33;        /* oklch(0.220 0.060 240) */
    --peh-success: #2aa654;             /* oklch(0.640 0.160 150) */
    --peh-success-content: #021c09;     /* oklch(0.200 0.050 150) */
    --peh-warning: #f0ad15;             /* oklch(0.790 0.160 080) */
    --peh-warning-content: #3a1f00;     /* oklch(0.270 0.060 065) */
    --peh-error: #ea3d35;               /* oklch(0.620 0.210 028) */
    --peh-error-content: #fff6f5;       /* oklch(0.980 0.010 025) */

    --peh-base-content-rgb: 18, 40, 59;
    --peh-primary-rgb: 14, 79, 100;
    --peh-accent-rgb: 158, 196, 80;

    --peh-shadow-color: rgba(18, 40, 59, 0.08);
    --peh-plate-bg: #ffffff;
}

[data-theme="peh-dark"] {
    color-scheme: dark;

    --peh-base-100: #172836;            /* oklch(0.270 0.035 245) */
    --peh-base-200: #091c2c;            /* oklch(0.220 0.040 247) */
    --peh-base-300: #031222;            /* oklch(0.180 0.040 250) */
    --peh-base-content: #deeaef;        /* oklch(0.930 0.015 225) */

    --peh-primary: #59a5b7;             /* oklch(0.680 0.080 215) */
    --peh-primary-content: #00151f;     /* oklch(0.180 0.040 225) */
    --peh-secondary: #519fca;           /* oklch(0.670 0.100 235) */
    --peh-secondary-content: #011022;   /* oklch(0.170 0.045 250) */
    --peh-accent: #a6ca60;              /* oklch(0.790 0.140 125) */
    --peh-accent-content: #131f04;      /* oklch(0.220 0.050 130) */
    --peh-neutral: #2c4353;             /* oklch(0.370 0.040 240) */
    --peh-neutral-content: #e5edf1;     /* oklch(0.940 0.010 230) */

    --peh-info: #49b3d8;                /* oklch(0.720 0.110 225) */
    --peh-info-content: #001425;        /* oklch(0.180 0.050 240) */
    --peh-success: #4cb86a;             /* oklch(0.700 0.150 150) */
    --peh-success-content: #001705;     /* oklch(0.180 0.050 150) */
    --peh-warning: #f0b135;             /* oklch(0.800 0.150 080) */
    --peh-warning-content: #2a1500;     /* oklch(0.220 0.050 065) */
    --peh-error: #fa695c;               /* oklch(0.700 0.180 028) */
    --peh-error-content: #290b0a;       /* oklch(0.200 0.050 025) */

    --peh-base-content-rgb: 222, 234, 239;
    --peh-primary-rgb: 89, 165, 183;
    --peh-accent-rgb: 166, 202, 96;

    --peh-shadow-color: rgba(0, 0, 0, 0.45);
    --peh-plate-bg: #ffffff;
}

:root {
    /* Shared, theme independent tokens (daisyUI `--radius-*` / masthead). */
    --peh-radius-box: 0.875rem;
    --peh-radius-field: 0.5rem;
    --peh-radius-selector: 2rem;

    --peh-header-bg: #0b345d;
    --peh-header-fg: #ffffff;

    --peh-font-sans: 'Avenir', 'AvenirLTBook', 'Avenir Next', 'Segoe UI', sans-serif;
    --peh-font-heavy: 'AvenirLTHeavy', 'Avenir', 'Avenir Next', 'Segoe UI', sans-serif;
    --peh-font-medium: 'AvenirLTMedium', 'Avenir', 'Avenir Next', 'Segoe UI', sans-serif;

    --peh-border-subtle: rgba(var(--peh-base-content-rgb), 0.10);
    --peh-border-strong: rgba(var(--peh-base-content-rgb), 0.20);
    --peh-muted: rgba(var(--peh-base-content-rgb), 0.65);
    --peh-muted-soft: rgba(var(--peh-base-content-rgb), 0.50);
}

/* Bootstrap 5.1 root variables that CKAN inherits from. */
:root {
    --bs-body-bg: var(--peh-base-200);
    --bs-body-color: var(--peh-base-content);
    --bs-font-sans-serif: var(--peh-font-sans);
    --bs-link-color: var(--peh-primary);
    --bs-link-hover-color: var(--peh-secondary);
}

/* ==========================================================================
   2. Base typography and page canvas
   ========================================================================== */

html {
    background-color: var(--peh-base-200);
}

body {
    font-family: var(--peh-font-sans);
    color: var(--peh-base-content);
    background-color: var(--peh-base-200);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The portal's `.page-shell` glow. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 8% 4%, rgba(var(--peh-primary-rgb), 0.10) 0, transparent 24rem),
        radial-gradient(circle at 92% 18%, rgba(var(--peh-accent-rgb), 0.07) 0, transparent 22rem);
}

h1, h2, h3, h4, h5, h6,
.page-heading, .module-heading, .heading {
    font-family: var(--peh-font-heavy);
    color: var(--peh-base-content);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

h1, .page-heading {
    letter-spacing: -0.02em;
}

a {
    color: var(--peh-primary);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--peh-secondary);
    text-decoration: underline;
}

[data-theme="peh-dark"] a:hover,
[data-theme="peh-dark"] a:focus {
    color: var(--peh-accent);
}

:focus-visible {
    outline: 2px solid var(--peh-primary);
    outline-offset: 2px;
}

hr {
    border-color: var(--peh-border-subtle);
    opacity: 1;
}

code, pre, .code {
    background-color: var(--peh-base-200);
    color: var(--peh-base-content);
    border-radius: var(--peh-radius-field);
}

/* CKAN paints `bg.png` behind the main area; the portal uses flat surfaces. */
.main,
.homepage .main,
.main.hero {
    background: transparent;
    background-image: none;
}

.main::after,
.main::before {
    display: none;
}

/* ==========================================================================
   3. Masthead / header
   ========================================================================== */

.account-masthead {
    color: var(--peh-header-fg);
    background: color-mix(in srgb, var(--peh-header-bg) 92%, #000);
    background-image: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.account-masthead .account ul li {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.account-masthead .account ul li a {
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--peh-font-medium);
    font-weight: normal;
}

.account-masthead .account ul li a:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.10);
}

.account-masthead .account .btn,
.account-masthead .account .btn-link {
    color: rgba(255, 255, 255, 0.82);
}

.account-masthead .account .btn:hover,
.account-masthead .account .btn-link:hover {
    color: #ffffff;
}

.masthead {
    color: var(--peh-header-fg);
    background: var(--peh-header-bg);
    background-image: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 10px 30px -18px rgba(6, 29, 53, 0.55);
    padding: 0.35rem 0;
}

.masthead .navbar-light .navbar-nav .nav-link,
.masthead .navbar-nav .nav-link,
.masthead a,
.masthead h1 a,
.masthead h2 {
    color: var(--peh-header-fg);
}

.masthead .navbar-nav .nav-link,
.masthead .main-navbar ul li a {
    font-family: var(--peh-font-heavy);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.5rem 0.85rem;
    opacity: 0.85;
    border-radius: 0;
    background-color: transparent;
    box-shadow: inset 0 -2px 0 0 transparent;
}

.masthead .navbar-nav .nav-link:hover,
.masthead .navbar-nav .nav-link:focus,
.masthead .main-navbar ul li:hover a,
.masthead .main-navbar ul li:focus a,
.masthead .main-navbar ul li a:hover,
.masthead .main-navbar ul li a:focus {
    background-color: transparent;
    border-radius: 0;
    text-decoration: none;
    opacity: 1;
    box-shadow: inset 0 -2px 0 0 #fff;
}

.masthead .navbar-nav .active > a,
.masthead .navbar-nav .nav-item.active .nav-link,
.masthead .navbar-nav .nav-link.active,
.masthead .main-navbar ul li.active a {
    background-color: transparent;
    border-radius: 0;
    opacity: 1;
    box-shadow: inset 0 -2px 0 0 #fff;
}

.masthead .navbar-nav .active > a:after,
.masthead .navbar-nav .nav-item.active .nav-link:after {
    display: none;
}

/* Brand lockup: white plate + wordmark, as on the portal. */
.masthead .peh-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.masthead .peh-brand:hover {
    text-decoration: none;
}

.masthead .peh-brand__plate {
    background: var(--peh-plate-bg);
    border-radius: var(--peh-radius-field);
    padding: 0.375rem 0.625rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.06);
    line-height: 0;
}

.masthead .peh-brand__plate img {
    height: 2.75rem;
    width: auto;
    max-height: 2.75rem;
}

.masthead .peh-brand__text {
    display: none;
}

.masthead .peh-brand__eyebrow {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    opacity: 0.7;
}

.masthead .peh-brand__title {
    display: block;
    font-family: var(--peh-font-heavy);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0;
}

@media (min-width: 576px) {
    .masthead .peh-brand__text {
        display: block;
    }
}

.masthead .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.25);
    border-radius: var(--peh-radius-field);
}

/* Site search in the masthead. */
.masthead .site-search .form-control,
.masthead .site-search input[type="text"] {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: var(--peh-radius-field);
    color: #ffffff;
    box-shadow: none;
}

.masthead .site-search .form-control::placeholder {
    color: rgba(255, 255, 255, 0.65);
}

.masthead .site-search .form-control:focus {
    background-color: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
    box-shadow: none;
}

.masthead .site-search .btn {
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #ffffff;
    border-radius: var(--peh-radius-field);
}

.masthead .site-search .btn:hover {
    background-color: rgba(255, 255, 255, 0.24);
}

/* ==========================================================================
   4. Light / dark mode toggle (portal `.theme-toggle`)
   ========================================================================== */

.peh-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 31px;
    padding: 0 10px;
    margin: 0;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.peh-theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.10);
    color: #ffffff;
}

.account-masthead .peh-theme-toggle-wrap {
    float: right;
}

.peh-icon {
    height: 1rem;
    width: 1rem;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke: currentColor;
}

.peh-theme-toggle .peh-icon--sun {
    display: none;
}

[data-theme="peh-dark"] .peh-theme-toggle .peh-icon--sun {
    display: block;
}

[data-theme="peh-dark"] .peh-theme-toggle .peh-icon--moon,
[data-theme="peh-light"] .peh-theme-toggle .peh-icon--sun {
    display: none;
}

/* ==========================================================================
   5. Surfaces: wrapper, modules, cards, boxes
   ========================================================================== */

.wrapper,
.module,
.box,
.card,
.module-content,
.module-narrow {
    background-color: transparent;
}

.wrapper {
    background-color: var(--peh-base-100);
    border: 1px solid var(--peh-border-subtle);
    border-radius: var(--peh-radius-box);
    box-shadow: 0 18px 40px -30px var(--peh-shadow-color);
}

.wrapper:before {
    border-right-color: var(--peh-border-subtle) !important;
}

.box,
.card {
    background-color: var(--peh-base-100);
    border: 1px solid var(--peh-border-subtle);
    border-radius: var(--peh-radius-box);
    box-shadow: none;
}

.card-header,
.card-footer {
    background-color: rgba(var(--peh-base-content-rgb), 0.035);
    border-color: var(--peh-border-subtle);
    color: var(--peh-base-content);
}

.module-heading {
    background-color: rgba(var(--peh-base-content-rgb), 0.04);
    border-top: 1px solid var(--peh-border-subtle);
    border-bottom: 1px solid var(--peh-border-subtle);
    color: var(--peh-base-content);
    font-family: var(--peh-font-heavy);
}

.module-heading .action {
    color: var(--peh-muted);
}

/* CKAN hard-codes dark greys on these headings; keep them on the palette. */
.module-heading a,
.media-heading,
.media-heading a,
.group-list .module-heading h3 a,
.group-list .module-heading .h3 a {
    color: var(--peh-base-content);
}

.module-heading a:hover,
.media-heading a:hover,
.group-list .module-heading h3 a:hover,
.group-list .module-heading .h3 a:hover {
    color: var(--peh-primary);
}

.media-grid {
    background: transparent;
    border-color: var(--peh-border-subtle);
}

.media-item {
    background-color: var(--peh-base-100);
    border: 1px solid var(--peh-border-subtle);
    border-radius: var(--peh-radius-box);
    color: var(--peh-base-content);
}

.media-item span.count,
.media-view .count {
    color: var(--peh-muted-soft);
}

.module-footer {
    border-top: 1px dotted var(--peh-border-subtle);
}

.module-narrow .nav-item > a,
.module-narrow .nav-aside li a {
    color: var(--peh-base-content);
}

.module .read-more {
    color: var(--peh-primary);
    font-family: var(--peh-font-heavy);
}

.module-shallow,
.module-grid,
.module-item {
    background-color: transparent;
    border-color: var(--peh-border-subtle);
}

.empty,
.module-content .empty {
    color: var(--peh-muted-soft);
}

/* ==========================================================================
   6. Toolbar / breadcrumbs / secondary nav
   ========================================================================== */

.toolbar .breadcrumb,
.breadcrumb {
    background: transparent;
    padding-left: 0;
    font-family: var(--peh-font-heavy);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.toolbar .breadcrumb li,
.toolbar .breadcrumb a,
.breadcrumb-item a {
    color: var(--peh-muted);
}

.toolbar .breadcrumb li.active,
.toolbar .breadcrumb li:last-child,
.breadcrumb-item.active {
    color: var(--peh-base-content);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--peh-muted-soft);
}

.nav-simple,
.nav-aside {
    border-color: var(--peh-border-subtle);
}

.nav-item > a {
    color: var(--peh-base-content);
    border-radius: var(--peh-radius-field);
}

.nav-item > a:hover {
    background-color: rgba(var(--peh-primary-rgb), 0.08);
    color: var(--peh-primary);
    text-decoration: none;
}

.nav-item.active > a,
.nav-simple .nav-item.active > a {
    background-color: var(--peh-primary);
    color: var(--peh-primary-content);
}

.nav-item.active > a:after,
.nav-aside li.active a:after {
    border-left-color: var(--peh-primary);
}

.nav-tabs {
    border-bottom-color: var(--peh-border-subtle);
}

.nav-tabs .nav-link {
    color: var(--peh-muted);
    border-radius: var(--peh-radius-field) var(--peh-radius-field) 0 0;
}

.nav-tabs .nav-link:hover {
    border-color: transparent;
    background-color: rgba(var(--peh-primary-rgb), 0.07);
    color: var(--peh-primary);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: var(--peh-base-100);
    border-color: var(--peh-border-subtle) var(--peh-border-subtle) var(--peh-base-100);
    color: var(--peh-base-content);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--peh-primary);
    color: var(--peh-primary-content);
    border-radius: var(--peh-radius-field);
}

/* ==========================================================================
   7. Buttons
   ========================================================================== */

.btn {
    font-family: var(--peh-font-heavy);
    letter-spacing: 0.01em;
    border-radius: var(--peh-radius-field);
    box-shadow: none;
    text-shadow: none;
}

.btn-default,
.btn-secondary,
.btn.btn-light {
    background-color: var(--peh-base-100);
    background-image: none;
    border: 1px solid var(--peh-border-strong);
    color: var(--peh-base-content);
}

.btn-default:hover,
.btn-secondary:hover,
.btn.btn-light:hover {
    background-color: var(--peh-base-200);
    border-color: var(--peh-border-strong);
    color: var(--peh-base-content);
}

.btn-primary,
.btn-primary:visited {
    background-color: var(--peh-primary);
    background-image: none;
    border: 1px solid var(--peh-primary);
    color: var(--peh-primary-content);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: color-mix(in srgb, var(--peh-primary) 85%, #000);
    border-color: color-mix(in srgb, var(--peh-primary) 85%, #000);
    color: var(--peh-primary-content);
}

[data-theme="peh-dark"] .btn-primary:hover,
[data-theme="peh-dark"] .btn-primary:focus {
    background-color: color-mix(in srgb, var(--peh-primary) 85%, #fff);
    border-color: color-mix(in srgb, var(--peh-primary) 85%, #fff);
}

.btn-outline-primary {
    border-color: var(--peh-primary);
    color: var(--peh-primary);
}

.btn-outline-primary:hover {
    background-color: var(--peh-primary);
    color: var(--peh-primary-content);
}

.btn-success {
    background-color: var(--peh-success);
    background-image: none;
    border-color: var(--peh-success);
    color: var(--peh-success-content);
}

.btn-info {
    background-color: var(--peh-info);
    background-image: none;
    border-color: var(--peh-info);
    color: var(--peh-info-content);
}

.btn-warning {
    background-color: var(--peh-warning);
    background-image: none;
    border-color: var(--peh-warning);
    color: var(--peh-warning-content);
}

.btn-danger {
    background-color: var(--peh-error);
    background-image: none;
    border-color: var(--peh-error);
    color: var(--peh-error-content);
}

.btn-link {
    color: var(--peh-primary);
}

.btn-check:focus + .btn,
.btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--peh-primary-rgb), 0.25);
}

/* ==========================================================================
   8. Forms
   ========================================================================== */

label,
.control-label,
legend,
fieldset legend {
    font-family: var(--peh-font-medium);
    color: var(--peh-base-content);
}

.form-control,
.form-select,
.search-input input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select {
    background-color: rgba(var(--peh-base-content-rgb), 0.03);
    border: 1px solid var(--peh-border-strong);
    border-radius: var(--peh-radius-field);
    color: var(--peh-base-content);
    box-shadow: none;
}

[data-theme="peh-dark"] .form-control,
[data-theme="peh-dark"] .form-select,
[data-theme="peh-dark"] input[type="text"],
[data-theme="peh-dark"] input[type="email"],
[data-theme="peh-dark"] input[type="password"],
[data-theme="peh-dark"] input[type="url"],
[data-theme="peh-dark"] input[type="number"],
[data-theme="peh-dark"] input[type="search"],
[data-theme="peh-dark"] textarea,
[data-theme="peh-dark"] select {
    background-color: rgba(255, 255, 255, 0.05);
}

.form-control:focus,
.form-select:focus,
textarea:focus,
select:focus {
    background-color: var(--peh-base-100);
    border-color: var(--peh-primary);
    color: var(--peh-base-content);
    box-shadow: 0 0 0 0.2rem rgba(var(--peh-primary-rgb), 0.18);
}

.form-control::placeholder {
    color: var(--peh-muted-soft);
}

.form-control[disabled],
.form-control:disabled,
fieldset[disabled] .form-control {
    background-color: rgba(var(--peh-base-content-rgb), 0.06);
    color: var(--peh-muted-soft);
}

.info-block,
.form-text,
.info-help,
.form-group .info-block {
    color: var(--peh-muted);
}

.form-group.error .form-control,
.form-group.error input,
.error-block,
.error-inline,
.field_with_errors {
    color: var(--peh-error);
    border-color: var(--peh-error);
}

.input-group-text,
.input-group-addon {
    background-color: rgba(var(--peh-base-content-rgb), 0.05);
    border-color: var(--peh-border-strong);
    color: var(--peh-muted);
}

.form-actions {
    background-color: transparent;
    border-top: 1px solid var(--peh-border-subtle);
}

/* Select2 (CKAN's tag/autocomplete widgets). Its stylesheet is loaded after
   this one, so these rules are qualified with `body` to win on specificity. */
body .select2-container .select2-choice,
body .select2-container-multi .select2-choices,
body .select2-drop {
    background-color: rgba(var(--peh-base-content-rgb), 0.03);
    background-image: none;
    border-color: var(--peh-border-strong);
    border-radius: var(--peh-radius-field);
    color: var(--peh-base-content);
}

body .select2-drop,
body .select2-drop-active {
    background-color: var(--peh-base-100);
    border-color: var(--peh-border-strong);
}

body .select2-results {
    background-color: var(--peh-base-100);
    color: var(--peh-base-content);
}

body .select2-results .select2-highlighted {
    background-color: var(--peh-primary);
    color: var(--peh-primary-content);
}

body .select2-container-multi .select2-choices .select2-search-choice {
    background-color: rgba(var(--peh-primary-rgb), 0.12);
    background-image: none;
    border-color: var(--peh-border-strong);
    color: var(--peh-base-content);
    border-radius: var(--peh-radius-field);
    box-shadow: none;
}

body .select2-container .select2-choice > .select2-chosen,
body .select2-container .select2-choice .select2-arrow {
    color: var(--peh-base-content);
    background: transparent;
    border-color: var(--peh-border-strong);
}

/* ==========================================================================
   9. Search, facets, dataset lists
   ========================================================================== */

.search-form {
    background: transparent;
    border-bottom: 1px solid var(--peh-border-subtle);
    padding-bottom: 1rem;
}

.search-form .search-input .btn,
.search-form .search-input button {
    color: var(--peh-muted);
    background: transparent;
    border: 0;
}

.search-form .form-select {
    width: auto;
}

.search-form h1,
.search-form .form-title {
    font-family: var(--peh-font-heavy);
}

.filter-list .filtered,
.filter-list a {
    color: var(--peh-base-content);
}

.filter-list .filtered {
    background-color: rgba(var(--peh-primary-rgb), 0.10);
    border-radius: var(--peh-radius-field);
}

.filter-list .pill,
.badge,
.label {
    border-radius: var(--peh-radius-selector);
    font-family: var(--peh-font-medium);
}

.filter-list .pill {
    background-color: var(--peh-neutral);
    color: var(--peh-neutral-content);
}

.dataset-item {
    border-bottom: 1px solid var(--peh-border-subtle);
    padding-bottom: 1.1rem;
}

.dataset-heading,
.dataset-heading a {
    font-family: var(--peh-font-heavy);
    color: var(--peh-base-content);
}

.dataset-heading a:hover {
    color: var(--peh-primary);
}

.dataset-item .notes,
.dataset-notes {
    color: var(--peh-muted);
}

.dataset-resources li a,
.label[data-format],
.badge[data-format] {
    background-color: var(--peh-neutral);
    color: var(--peh-neutral-content);
    border-radius: var(--peh-radius-selector);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dataset-private,
.badge.badge-inverse {
    background-color: var(--peh-secondary);
    color: var(--peh-secondary-content);
}

.tag,
.tag-list .tag {
    background-color: rgba(var(--peh-primary-rgb), 0.10);
    border: 1px solid var(--peh-border-subtle);
    color: var(--peh-base-content);
    border-radius: var(--peh-radius-selector);
}

.tag:hover {
    background-color: var(--peh-primary);
    color: var(--peh-primary-content);
    text-decoration: none;
}

/* ==========================================================================
   10. Tables
   ========================================================================== */

.table {
    --bs-table-bg: transparent;
    color: var(--peh-base-content);
    border-color: var(--peh-border-subtle);
}

.table > :not(:last-child) > :last-child > * {
    border-bottom-color: var(--peh-border-subtle);
}

.table thead th,
.table > thead > tr > th {
    background-color: rgba(var(--peh-base-content-rgb), 0.05);
    color: var(--peh-muted);
    border-color: var(--peh-border-subtle);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--peh-font-heavy);
}

.table td,
.table th {
    border-color: rgba(var(--peh-base-content-rgb), 0.07);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(var(--peh-base-content-rgb), 0.03);
    color: var(--peh-base-content);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgba(var(--peh-primary-rgb), 0.06);
    color: var(--peh-base-content);
}

.table-chunky thead th,
.table.table-bordered {
    border-color: var(--peh-border-subtle);
}

/* ==========================================================================
   11. Alerts, flash messages, pagination
   ========================================================================== */

.alert {
    border-radius: var(--peh-radius-box);
    border-width: 1px;
}

.alert-info,
.flash-messages .alert-info {
    background-color: rgba(var(--peh-base-content-rgb), 0.04);
    border-color: var(--peh-info);
    color: var(--peh-base-content);
}

.alert-success {
    background-color: rgba(var(--peh-base-content-rgb), 0.04);
    border-color: var(--peh-success);
    color: var(--peh-base-content);
}

.alert-warning {
    background-color: rgba(var(--peh-base-content-rgb), 0.04);
    border-color: var(--peh-warning);
    color: var(--peh-base-content);
}

.alert-danger,
.alert-error {
    background-color: rgba(var(--peh-base-content-rgb), 0.04);
    border-color: var(--peh-error);
    color: var(--peh-base-content);
}

.pagination {
    --bs-pagination-color: var(--peh-base-content);
}

.pagination .page-link {
    background-color: var(--peh-base-100);
    border-color: var(--peh-border-subtle);
    color: var(--peh-base-content);
}

.pagination .page-link:hover {
    background-color: rgba(var(--peh-primary-rgb), 0.10);
    color: var(--peh-primary);
}

.pagination .page-item.active .page-link {
    background-color: var(--peh-primary);
    border-color: var(--peh-primary);
    color: var(--peh-primary-content);
}

.pagination .page-item.disabled .page-link {
    background-color: transparent;
    color: var(--peh-muted-soft);
}

.pagination-wrapper {
    border-top-color: var(--peh-border-subtle);
}

/* Dropdowns and popovers. */
.dropdown-menu {
    background-color: var(--peh-base-100);
    border: 1px solid var(--peh-border-subtle);
    border-radius: var(--peh-radius-box);
    box-shadow: 0 18px 40px -24px var(--peh-shadow-color);
}

.dropdown-item {
    color: var(--peh-base-content);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(var(--peh-primary-rgb), 0.10);
    color: var(--peh-primary);
}

.popover,
.tooltip-inner,
.modal-content {
    background-color: var(--peh-base-100);
    color: var(--peh-base-content);
    border-color: var(--peh-border-subtle);
    border-radius: var(--peh-radius-box);
}

.modal-header,
.modal-footer {
    border-color: var(--peh-border-subtle);
}

/* ==========================================================================
   12. Homepage
   ========================================================================== */

.homepage .module-promotion,
.homepage .box {
    background-color: var(--peh-base-100);
    border: 1px solid var(--peh-border-subtle);
    border-radius: var(--peh-radius-box);
}

.homepage .hero {
    padding-top: 2.5rem;
    padding-bottom: 1rem;
}

.homepage .module-search {
    background-color: var(--peh-base-100);
    border: 1px solid var(--peh-border-subtle);
    border-radius: var(--peh-radius-box);
    color: var(--peh-base-content);
    box-shadow: none;
}

/* The search panel: the portal's `.home-access` card instead of a solid slab. */
.homepage .module-search .search-form {
    background-color: rgba(var(--peh-base-content-rgb), 0.05);
    border: 1px solid var(--peh-border-subtle);
    border-radius: var(--peh-radius-box);
    color: var(--peh-base-content);
}

.homepage .module-search .search-form input,
.homepage .module-search .search-form .form-control {
    background-color: var(--peh-base-100);
    border: 1px solid var(--peh-border-strong);
    color: var(--peh-base-content);
}

.homepage .module-search .search-form button,
.homepage .module-search .search-form .btn {
    background: transparent;
    color: var(--peh-muted);
}

.homepage .module-search .search-form button:hover,
.homepage .module-search .search-form .btn:hover {
    color: var(--peh-primary);
}

.homepage .module-search .heading,
.homepage .module-search h3 {
    font-family: var(--peh-font-heavy);
    color: var(--peh-base-content);
}

/* "Latest datasets" module (replaces the featured group / organization). */
.homepage .peh-latest-datasets .dataset-item {
    border-bottom: 1px solid var(--peh-border-subtle);
}

.homepage .peh-latest-datasets .dataset-item:last-child {
    border-bottom: 0;
}

.homepage .peh-latest-datasets .peh-dataset-type {
    margin-left: 0.5rem;
    background-color: rgba(var(--peh-primary-rgb), 0.12);
    color: var(--peh-base-content);
    font-size: 0.7rem;
    vertical-align: middle;
}

.homepage .peh-latest-datasets__date {
    margin-bottom: 0;
    font-size: 0.8rem;
}

.homepage h1,
.homepage .page-heading {
    letter-spacing: -0.03em;
}

/* Portal hero accents, reused for the CKAN homepage intro. */
.peh-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
    font-family: var(--peh-font-heavy);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--peh-primary);
}

.peh-eyebrow__mark {
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 9999px;
    background-color: var(--peh-accent);
    box-shadow: 0 0 0 4px rgba(var(--peh-accent-rgb), 0.15);
}

.peh-title__accent {
    display: block;
    color: var(--peh-primary);
}

.peh-lead {
    color: var(--peh-muted);
    font-size: 1.05rem;
    line-height: 1.65;
}

.peh-assurances {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-top: 1.5rem;
}

.peh-assurance {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--peh-font-medium);
    font-size: 0.9rem;
    color: var(--peh-muted);
}

.peh-assurance .peh-icon {
    height: 1.25rem;
    width: 1.25rem;
    color: var(--peh-primary);
}

/* ==========================================================================
   13. Footer
   ========================================================================== */

/* Sticky footer: keep the footer at the bottom of the viewport on short pages,
   without making it fixed on long, scrollable ones. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > .main,
body > #content {
    flex: 1 0 auto;
}

.site-footer {
    margin-top: auto;
    flex-shrink: 0;
    background-color: var(--peh-header-bg);
    background-image: none;
    color: rgba(255, 255, 255, 0.72);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2rem 0;
}

.site-footer a,
.site-footer .footer-links a {
    color: rgba(255, 255, 255, 0.72);
}

.site-footer a:hover {
    color: #ffffff;
}

.site-footer .peh-footer-brand {
    display: inline-block;
    margin-bottom: 0.75rem;
}

.site-footer .peh-footer-brand__plate {
    display: inline-block;
    background: var(--peh-plate-bg);
    border-radius: var(--peh-radius-field);
    padding: 0.375rem 0.625rem;
    line-height: 0;
}

.site-footer .peh-footer-brand__plate img {
    height: 2.5rem;
    width: auto;
}

.site-footer .peh-footer-attribution a {
    color: #ffffff;
    text-decoration: underline;
}

.site-footer label,
.site-footer small,
.site-footer p {
    color: rgba(255, 255, 255, 0.72);
}

.site-footer select,
.site-footer .form-select,
.site-footer .form-control {
    background-color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--peh-radius-field);
    color: var(--peh-base-content);
}

.site-footer select:focus,
.site-footer .form-select:focus,
.site-footer .form-control:focus {
    background-color: #ffffff;
    color: var(--peh-base-content);
}

.site-footer select option {
    color: var(--peh-base-content);
    background-color: var(--peh-base-100);
}

/* ==========================================================================
   14. Misc CKAN chrome
   ========================================================================== */

.hero,
.homepage .hero,
.stages,
.wrapper .toolbar {
    background-image: none;
}

.stages li {
    background-color: var(--peh-base-200);
    color: var(--peh-muted);
}

.stages li.active {
    background-color: var(--peh-accent);
    color: var(--peh-accent-content);
}

.stages li.complete {
    background-color: rgba(var(--peh-accent-rgb), 0.35);
    color: var(--peh-base-content);
}

.activity .item {
    border-color: var(--peh-border-subtle);
    color: var(--peh-base-content);
}

.activity .item .icon {
    color: var(--peh-muted-soft);
}

.hdx-bs3 .label,
.label-default {
    background-color: var(--peh-neutral);
    color: var(--peh-neutral-content);
}

.prose,
.notes,
.embedded-content {
    color: var(--peh-base-content);
}

blockquote {
    border-left: 3px solid var(--peh-primary);
    color: var(--peh-muted);
}

/* Font Awesome icons inherit the palette instead of CKAN's greys. */
.fa,
.fas,
.far,
.fab {
    color: inherit;
}

.module-heading .fa,
.nav-item > a .fa {
    color: var(--peh-muted);
}

.nav-item.active > a .fa {
    color: inherit;
}

/* Scrollbars follow the colour scheme. */
* {
    scrollbar-color: var(--peh-border-strong) transparent;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}