/* =========================================================================
   Site styles, shared by every site. Colors come from the --site-* tokens
   below, which each site's theme overrides (wwwroot/css/themes/{Site:Key}.css,
   loaded after this file). The defaults are Pembhi's palette; each color is
   only given roles where it meets WCAG 2.2 AA contrast.

   Token roles and contrast needed (Pembhi's values as the reference):
     --site-primary     on white, 4.5:1+   body links, headings, buttons  (#264077, 10.4:1)
     --site-on-primary  on primary, 4.5:1+ text on dark surfaces           (#FCFAFA, 9.7:1)
     --site-highlight   on primary, 4.5:1+ links/accents on dark surfaces  (#7FCADD, 5.5:1)
     --site-accent      on primary, 3:1+   large text / icons only          (#4BACA5, 3.7:1)
     --site-secondary   on white, 3:1+     focus rings, borders, icons      (#1B90D5, 3.5:1)
   The *-rgb tokens are the same colors as "r, g, b" for translucent uses.
   ========================================================================= */

:root {
    /* Brand palette (a theme overrides these) */
    --site-primary: #264077;
    --site-primary-rgb: 38, 64, 119;
    --site-primary-hover: #1c315c;
    --site-primary-hover-rgb: 28, 49, 92;
    --site-primary-active: #15254a;
    --site-secondary: #1B90D5;
    --site-secondary-rgb: 27, 144, 213;
    --site-accent: #4BACA5;
    --site-accent-rgb: 75, 172, 165;
    --site-highlight: #7FCADD;
    --site-highlight-rgb: 127, 202, 221;
    --site-on-primary: #FCFAFA;
    --site-shadow-tint: #7d9ec1;
    --site-shadow-tint-rgb: 125, 158, 193;
    --site-heading-font: inherit;

    /* Roles */
    --site-text: #212529;
    --site-text-muted: #4a5568;        /* 7.5:1 on white */
    --site-surface: #ffffff;
    --site-surface-alt: #f4f7fb;       /* faint blue tint for alternating sections */
    --site-border: #d9e1ec;
    --site-focus: var(--site-secondary);
    --site-radius: 0.75rem;
    --site-radius-sm: 0.5rem;
    --site-shadow-sm: 0 1px 2px rgba(var(--site-primary-rgb), 0.08), 0 1px 3px rgba(var(--site-primary-rgb), 0.06);
    --site-shadow: 0 0.5rem 1.5rem rgba(var(--site-primary-rgb), 0.12);
    --site-shadow-lg: 0 1rem 3rem rgba(var(--site-shadow-tint-rgb), 0.45);

    /* Bootstrap theme hooks (follow the tokens) */
    --bs-primary: var(--site-primary);
    --bs-primary-rgb: var(--site-primary-rgb);
    --bs-link-color: var(--site-primary);
    --bs-link-color-rgb: var(--site-primary-rgb);
    --bs-link-hover-color: var(--site-primary-hover);
    --bs-link-hover-color-rgb: var(--site-primary-hover-rgb);
    --bs-body-color: var(--site-text);
    --bs-border-radius: 0.5rem;
    --bs-focus-ring-color: rgba(var(--site-secondary-rgb), 0.5);
}

/* ---------- Base ---------- */

html {
    /* 16px on every screen size; smaller body text hurts readability on phones. */
    font-size: 100%;
    scroll-padding-top: 5rem;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: clip; /* full-bleed sections use 100vw; clip (not hidden) keeps the sticky header working */
    color: var(--site-text);
    background-color: var(--site-surface);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

main {
    flex: 1 0 auto;
}

main:focus {
    outline: none;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--site-primary);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

p, li {
    max-width: 75ch;
}

a {
    color: var(--site-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--site-primary-hover);
    text-decoration-thickness: 2px;
}

/* Visible keyboard focus everywhere (WCAG 2.4.7 / 2.4.11). */
:focus-visible {
    outline: 3px solid var(--site-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    outline: 3px solid var(--site-focus);
    outline-offset: 2px;
    box-shadow: none;
    border-color: var(--site-primary);
}

::selection {
    background: var(--site-highlight);
    color: var(--site-primary);
}

img {
    max-width: 100%;
    height: auto;
}

/* ---------- Skip link ---------- */

.skip-link {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2000;
    padding: 0.75rem 1rem;
    border-radius: var(--site-radius-sm);
    background: var(--site-primary);
    color: var(--site-on-primary);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
    color: var(--site-on-primary);
}

/* ---------- Buttons ---------- */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.6rem;
    border-radius: var(--site-radius-sm);
    min-height: 44px; /* comfortable touch target */
}

.btn-sm {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.35rem;
    min-height: 36px;
}

.btn-lg {
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-padding-y: 0.8rem;
}

.btn-primary,
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--site-primary);
    --bs-btn-border-color: var(--site-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--site-primary-hover);
    --bs-btn-hover-border-color: var(--site-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--site-primary-active);
    --bs-btn-active-border-color: var(--site-primary-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--site-primary);
    --bs-btn-disabled-border-color: var(--site-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--site-primary);
    --bs-btn-border-color: var(--site-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--site-primary);
    --bs-btn-hover-border-color: var(--site-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--site-primary-hover);
    --bs-btn-active-border-color: var(--site-primary-hover);
}

/* Light button for dark surfaces. */
.btn-on-dark {
    --bs-btn-color: var(--site-primary);
    --bs-btn-bg: var(--site-on-primary);
    --bs-btn-border-color: var(--site-on-primary);
    --bs-btn-hover-color: var(--site-primary);
    --bs-btn-hover-bg: var(--site-highlight);
    --bs-btn-hover-border-color: var(--site-highlight);
    --bs-btn-active-color: var(--site-primary);
    --bs-btn-active-bg: var(--site-highlight);
}

.btn-link {
    --bs-btn-color: var(--site-primary);
    --bs-btn-hover-color: var(--site-primary-hover);
}

/* ---------- Header / navigation ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--site-border);
}

/* While one of the header's menus is open (e.g. Manage), keep it above sticky bars that normally cover the header,
   such as the page builder's toolbar; its menus can't rise above the header's own layer. */
.site-header:has(.dropdown-menu.show, .navbar-collapse.show, .navbar-collapse.collapsing) {
    z-index: 1035;
}

.site-header .navbar {
    --bs-navbar-padding-y: 0.75rem;
}

.site-header .navbar-brand img {
    display: block;
    width: 180px;
    height: auto;
}

/* Preview only: when a scheduled section ("Show until") is shown to visitors. */
.cms-schedule-note {
    margin: 1rem 0 0;
    padding: 0.4rem 0.75rem;
    border: 1px dashed var(--site-secondary);
    border-radius: var(--site-radius-sm);
    background: var(--site-surface-alt);
    color: var(--site-text);
    font-size: 0.875rem;
}

/* The site's name as its wordmark, for a site without a logo image (Site:HeaderLogo / FooterLogo). */
.navbar-brand-text {
    display: block;
    color: var(--site-primary);
    font-family: var(--site-heading-font);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    white-space: normal;
}

.footer-brand-text {
    color: var(--site-on-primary);
    font-family: var(--site-heading-font);
    font-size: 1.35rem;
    font-weight: 700;
}

.site-header .nav-link {
    --bs-nav-link-color: var(--site-primary);
    --bs-nav-link-hover-color: var(--site-primary-hover);
    --bs-navbar-active-color: var(--site-primary);
    position: relative;
    font-weight: 600;
    padding: 0.6rem 0.9rem !important;
    border-radius: var(--site-radius-sm);
}

.site-header .nav-link:hover {
    background-color: var(--site-surface-alt);
}

/* Current page indicator: a bar, not color alone (WCAG 1.4.1). */
.site-header .nav-link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.2rem;
    height: 3px;
    border-radius: 3px;
    background: var(--site-accent);
}

.site-header .navbar-toggler {
    border-color: var(--site-border);
    min-width: 44px;
    min-height: 44px;
}

.site-header .dropdown-menu {
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    box-shadow: var(--site-shadow);
    padding: 0.5rem;
}

.site-header .dropdown-item {
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    color: var(--site-text);
}

.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus {
    background-color: var(--site-surface-alt);
    color: var(--site-primary);
}

.site-header .dropdown-header {
    color: var(--site-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 767.98px) {
    .site-header .navbar-nav {
        padding-top: 0.75rem;
        gap: 0.25rem;
    }

    .site-header .nav-cta {
        margin-top: 0.5rem;
    }
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(26rem, 70vh, 44rem);
    padding: 4rem 0;
    background-color: var(--site-primary);
    background-position: center;
    background-size: cover;
    isolation: isolate;
}

.hero-sm {
    min-height: clamp(18rem, 45vh, 26rem);
}

/* Text sits on a solid panel so contrast never depends on the photo. */
.hero-panel {
    max-width: 38rem;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border-radius: var(--site-radius);
    background: rgba(252, 250, 250, 0.95);
    box-shadow: var(--site-shadow-lg);
    border-top: 6px solid var(--site-accent);
}

.hero-panel h1 {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    margin-bottom: 1rem;
}

.hero-panel .lead {
    color: var(--site-text);
    margin-bottom: 1.5rem;
}

.hero-caption {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    margin: 0;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgba(var(--site-primary-rgb), 0.85);
    color: var(--site-on-primary);
    font-size: 0.8125rem;
}

/* ---------- Page header (pages without a hero) ---------- */

.page-header {
    padding: clamp(2rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 2.5rem);
}

.page-header h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    margin-bottom: 0.75rem;
}

.page-header .lead {
    color: var(--site-text-muted);
}

.eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    color: var(--site-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 3px;
    margin-right: 0.5rem;
    vertical-align: middle;
    border-radius: 3px;
    background: var(--site-accent);
}

/* ---------- Sections ---------- */

.section {
    padding: clamp(3rem, 8vw, 5.5rem) 0;
}

.section-alt {
    background-color: var(--site-surface-alt);
}

.section-heading {
    max-width: 44rem;
    margin: 0 auto clamp(2rem, 5vw, 3rem);
    text-align: center;
}

.section-heading h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    margin-bottom: 0.75rem;
}

.section-heading p {
    margin-inline: auto;
    color: var(--site-text-muted);
}

/* Full-bleed sections inside the layout's container. */
.full-bleed {
    margin-inline: calc(50% - 50vw);
}

/* ---------- Cards ---------- */

.card {
    --bs-card-border-color: var(--site-border);
    --bs-card-border-radius: var(--site-radius);
    --bs-card-inner-border-radius: calc(var(--site-radius) - 1px);
    box-shadow: var(--site-shadow-sm);
}

.card-interactive {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-interactive:hover,
.card-interactive:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--site-shadow-lg);
}

/* Show focus on the whole card when its stretched link is focused. */
.card-interactive:focus-within {
    outline: 3px solid var(--site-focus);
    outline-offset: 2px;
}

.card-interactive .stretched-link:focus-visible {
    outline: none;
}

.card-title a {
    color: inherit;
    text-decoration: none;
}

.card-title a:hover {
    text-decoration: underline;
}

.card-img-top {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: var(--site-surface-alt);
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1rem;
    border-radius: var(--site-radius-sm);
    background: rgba(var(--site-accent-rgb), 0.18);
    color: var(--site-primary);
    font-size: 1.5rem;
}

.card-meta {
    color: var(--site-text-muted);
    font-size: 0.875rem;
}

/* Folder picker (_FolderPicker.cshtml): a select-like dropdown showing "Name (/images/path)". */
.folder-picker-toggle {
    display: flex;
    align-items: baseline;
    text-align: start;
    min-width: 0;
}

.folder-picker-label,
.folder-picker-menu .dropdown-item {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
}

.folder-picker-label .card-meta,
.folder-picker-menu .card-meta {
    flex-shrink: 0;
    font-size: 0.8125rem;
}

.move-to-picker {
    min-width: 14rem;
}

.folder-picker-menu {
    width: 100%;
    min-width: 14rem;
    max-height: 18rem;
    overflow-y: auto;
}

.folder-picker-menu .dropdown-item.active .card-meta,
.folder-picker-menu .dropdown-item:active .card-meta {
    color: inherit;
    opacity: 0.8;
}

.badge-category {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(var(--site-highlight-rgb), 0.3);
    color: var(--site-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---------- Call to action band ---------- */

.cta-band {
    padding: clamp(2.5rem, 6vw, 4rem) 0;
    background: linear-gradient(135deg, var(--site-primary) 0%, #1f3563 100%);
    color: var(--site-on-primary);
}

.cta-band h2 {
    color: var(--site-on-primary);
}

.cta-band p {
    color: var(--site-on-primary);
}

/* ---------- Forms ---------- */

.form-label,
.control-label {
    font-weight: 600;
    color: var(--site-text);
    margin-bottom: 0.375rem;
}

/* Required-field asterisk (6.5:1 on white, 6:1 on the light form surface). */
.required-mark {
    margin-left: 0.2rem;
    color: #b02a37;
    font-weight: 700;
}

.required-note {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Length counter beside a label: muted until the length is in range (green), red when too long.
   The text says the state too, so it doesn't rely on color. Green 6.4:1 and red 6.5:1 on white. */
.char-counter {
    font-size: 0.8125rem;
    color: var(--site-text-muted);
    white-space: nowrap;
}

.char-counter.is-ok {
    color: #146c43;
    font-weight: 600;
}

.char-counter.is-over {
    color: #b02a37;
    font-weight: 600;
}

/* Post address check while typing (icon and words carry the meaning, not just the color). */
.slug-status {
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

.slug-status:empty {
    display: none;
}

.slug-status.is-free {
    color: #146c43;
}

.slug-status.is-taken {
    color: #b02a37;
    font-weight: 600;
}

/* Post feature image: preview beside the chosen path and buttons. */
.post-image-field {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

.post-image-preview,
.post-image-placeholder {
    flex-shrink: 0;
    width: 11rem;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    background: var(--site-surface-alt);
    object-fit: cover;
}

.post-image-placeholder {
    display: grid;
    place-items: center;
    color: var(--site-text-muted);
    font-size: 2rem;
}

.post-image-placeholder[hidden],
.post-image-preview[hidden] {
    display: none;
}

/* Image picker choices (buttons styled like the Images page cards). */
.image-choice {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}

.image-choice.is-selected figure {
    border-color: var(--site-primary);
    box-shadow: 0 0 0 3px rgba(var(--site-primary-rgb), 0.35);
}

.form-control,
.form-select {
    min-height: 44px;
    border-color: #b8c4d6; /* 3:1 against white for the field boundary */
    border-radius: var(--site-radius-sm);
}

.form-text {
    color: var(--site-text-muted);
}

.text-danger,
.field-validation-error,
.validation-summary-errors {
    color: #b42318 !important; /* 6.2:1 on white */
}

.form-surface {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface);
    box-shadow: var(--site-shadow);
}

.form-surface-narrow {
    max-width: 30rem;
    margin-inline: auto;
}

.divider-text {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: var(--site-text-muted);
    font-size: 0.875rem;
}

.divider-text::before,
.divider-text::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--site-border);
}

/* ---------- Alerts ---------- */

.alert {
    border-radius: var(--site-radius-sm);
    border-left-width: 6px;
}

/* ---------- Tables (editor) ---------- */

.table {
    --bs-table-striped-color: #212529;
    --bs-table-striped-bg: rgba(var(--site-shadow-tint-rgb), 0.17);
    --bs-table-active-color: #212529;
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: #212529;
    --bs-table-hover-bg: #4baca627;
    vertical-align: middle;
}

.table > thead th {
    color: var(--site-primary);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom-width: 2px;
}

/* ---------- Long-form content (blog posts, policies) ---------- */

.prose {
    max-width: 72ch;
    margin-inline: auto;
    font-size: 1.0625rem;
}

.prose h2,
.prose h3 {
    margin-top: 2.25rem;
    margin-bottom: 0.75rem;
}

.prose img {
    border-radius: var(--site-radius-sm);
}

.prose blockquote {
    margin: 1.5rem 0;
    padding: 0.5rem 1.25rem;
    border-left: 4px solid var(--site-accent);
    color: var(--site-text-muted);
}

.prose pre {
    padding: 1rem;
    border-radius: var(--site-radius-sm);
    background: var(--site-surface-alt);
}

.share-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    list-style: none;
}

.share-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--site-border);
    border-radius: 50%;
    color: var(--site-primary);
    font-size: 1.125rem;
    text-decoration: none;
}

.share-links a:hover {
    background: var(--site-primary);
    border-color: var(--site-primary);
    color: #fff;
}

/* ---------- Image library (editor) ---------- */

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 1rem;
    padding: 0;
    list-style: none;
}

.image-grid figure {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    background: var(--site-surface);
}

.image-grid img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--site-surface-alt);
}

.image-grid figcaption {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    word-break: break-all;
}

.dropzone {
    padding: 2rem 1.5rem;
    border: 2px dashed var(--site-shadow-tint);
    border-radius: var(--site-radius);
    background: var(--site-surface-alt);
    text-align: center;
}

.dropzone .bi {
    color: var(--site-primary);
    font-size: 2rem;
}

.dropzone-compact {
    padding: 1rem 1.25rem;
}

.dropzone-compact .bi {
    font-size: 1.5rem;
}

/* Bundled image import (Admin > Images > Import). */
.import-thumb {
    flex-shrink: 0;
    width: 4.5rem;
    height: 3rem;
    object-fit: contain;
    border: 1px solid var(--site-border);
    border-radius: 0.35rem;
    background: var(--site-surface-alt);
}

/* Image groups on the Images page (sections share the Pages list's .page-group styles). */
.image-group-body {
    padding: 1rem;
}

.image-group [data-image-list] {
    min-height: 3rem; /* room to drop an image into an empty group */
}

.image-group [data-image-key] {
    cursor: grab;
}

/* Library cards that link to the image's edit page. */
.image-card {
    display: block;
    height: 100%;
    border-radius: var(--site-radius-sm);
    color: var(--site-text);
    text-decoration: none;
}

.image-card figure {
    height: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.image-card:hover figure,
.image-card:focus-visible figure {
    border-color: var(--site-primary);
    box-shadow: 0 4px 14px rgba(var(--site-primary-rgb), 0.18);
}

.image-card:focus-visible {
    outline: 3px solid var(--site-primary);
    outline-offset: 2px;
}

.image-card:hover .image-card-name {
    color: var(--site-primary);
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .image-card figure {
        transition: none;
    }
}

/* ---------- Hero focus picker (editor) ---------- */

.focus-picker {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    border-radius: var(--site-radius-sm);
    overflow: hidden;
}

.focus-picker img {
    display: block;
    max-width: 100%;
    max-height: 22rem;
    cursor: crosshair;
}

.focus-marker {
    position: absolute;
    width: 28px;
    height: 28px;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--site-primary), 0 2px 6px rgba(0, 0, 0, 0.4);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.focus-preview {
    width: 100%;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    background-color: var(--site-surface-alt);
    background-repeat: no-repeat;
    background-size: cover;
}

.focus-preview-wide {
    aspect-ratio: 2.2 / 1; /* home hero at desktop widths */
}

.focus-preview-phone {
    aspect-ratio: 3 / 4; /* home hero on a phone */
}

.form-range::-webkit-slider-thumb {
    background-color: var(--site-primary);
}

.form-range::-moz-range-thumb {
    background-color: var(--site-primary);
}

/* ---------- Account pages ---------- */

.account-nav .nav-link {
    color: var(--site-primary);
    font-weight: 600;
    border-radius: var(--site-radius-sm);
}

.account-nav .nav-link:hover {
    background: var(--site-surface-alt);
}

.account-nav .nav-link.active {
    background: var(--site-primary);
    color: #fff;
}

.avatar {
    display: inline-block;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--site-highlight);
}

.avatar-lg {
    width: 96px;
    height: 96px;
}

.avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--site-surface-alt);
    color: var(--site-primary);
    font-size: 2.5rem;
}

/* ---------- Admin: wide list pages ---------- */

/* Wider than the reading container, for admin lists with many columns of information. */
.container-admin-wide {
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.page-group {
    margin-bottom: 1.25rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: #fff;
    box-shadow: var(--site-shadow-sm);
}

.page-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--site-border);
    background: var(--site-surface-alt);
    border-radius: var(--site-radius) var(--site-radius) 0 0;
}

.page-group-toggle {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    min-height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--site-primary);
    font-weight: 700;
    text-align: left;
}

.page-group-toggle .bi-chevron-down {
    transition: transform 0.2s ease;
}

.page-group-toggle.collapsed .bi-chevron-down {
    transform: rotate(-90deg);
}

.page-rows {
    min-height: 3rem; /* room to drop a page into an empty group */
}

.page-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--site-border);
}

.page-row:last-child {
    border-bottom: 0;
}

.page-row-path,
.page-row-status {
    display: none;
}

.page-row-status {
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    align-items: center;
}

@media (min-width: 992px) {
    .page-row {
        grid-template-columns: auto auto minmax(14rem, 2fr) minmax(12rem, 2fr) minmax(14rem, 2fr) auto;
    }

    .page-row-path {
        display: block;
    }

    .page-row-status {
        display: flex;
    }

    .page-row-mobile-meta {
        display: none !important;
    }
}

.page-empty {
    padding: 0.9rem 1rem;
    color: var(--site-text-muted);
}

/* ---------- Admin: users and roles ---------- */

.min-w-0 {
    min-width: 0;
}

.user-list .list-group-item {
    padding: 0.9rem 1.25rem;
}

.user-initial {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(var(--site-highlight-rgb), 0.35);
    color: var(--site-primary);
    font-weight: 700;
}

.user-initial-lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.5rem;
}

.role-badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Text colors below are all at least 4.5:1 on their backgrounds. */
.role-superadmin { background: var(--site-primary); color: #fff; }
.role-admin { background: rgba(var(--site-primary-rgb), 0.12); color: var(--site-primary); border: 1px solid rgba(var(--site-primary-rgb), 0.35); }
.role-user { background: var(--site-surface-alt); color: var(--site-text-muted); border: 1px solid var(--site-border); }
.status-invited { background: #fff4e5; color: #8a4b00; }
.status-active { background: #e8f5ee; color: #1e6b45; }
.status-locked { background: #fdecea; color: #a12a1f; }

.role-option {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    cursor: pointer;
}

.role-option:hover {
    background: var(--site-surface-alt);
}

.role-option:has(input:checked) {
    border-color: var(--site-primary);
    box-shadow: 0 0 0 1px var(--site-primary);
    background: rgba(var(--site-primary-rgb), 0.04);
}

.passkey-list .list-group-item {
    padding: 1rem 1.25rem;
}

/* ---------- Footer ---------- */

.site-footer {
    flex-shrink: 0;
    margin-top: clamp(3rem, 8vw, 5rem);
    padding: 3.5rem 0 2rem;
    background-color: var(--site-primary);
    color: var(--site-on-primary);
}

/* Explicit width: the global img { height: auto } rule overrides the height attribute. Smaller than the 180px navbar logo. */
.site-footer .footer-logo {
    display: block;
    width: 140px;
    height: auto;
}

.site-footer h2 {
    margin-bottom: 1rem;
    color: var(--site-highlight);
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-footer a {
    color: var(--site-on-primary);
    text-decoration-color: rgba(252, 250, 250, 0.4);
}

.site-footer a:hover {
    color: var(--site-highlight);
    text-decoration-color: currentColor;
}

.site-footer :focus-visible {
    outline-color: var(--site-highlight);
}

.site-footer address,
.site-footer p {
    color: var(--site-on-primary);
}

.site-footer ul {
    padding: 0;
    list-style: none;
}

.site-footer li + li {
    margin-top: 0.5rem;
}

.site-footer .footer-legal {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(252, 250, 250, 0.2);
    font-size: 0.875rem;
}

.site-footer .footer-legal ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0;
}

.site-footer .footer-legal li + li {
    margin-top: 0;
}

/* ---------- Page builder content ---------- */

.cms-section {
    position: relative;
}

.cms-space-sm { padding: clamp(1rem, 3vw, 1.75rem) 0; }
.cms-space-md { padding: clamp(2.25rem, 6vw, 4rem) 0; }
.cms-space-lg { padding: clamp(3rem, 8vw, 5.5rem) 0; }

.cms-narrow {
    max-width: 768px;
}

.cms-bg-light {
    background-color: var(--site-surface-alt);
}

/* Dark blue band: off-white text 9.7:1, light-green links 5.5:1. */
.cms-bg-brand,
.cms-panel-brand {
    background: linear-gradient(135deg, var(--site-primary) 0%, #1f3563 100%);
    color: var(--site-on-primary);
}

.cms-bg-brand :is(h1, h2, h3, h4, h5, h6, p, li, .lead, .cms-lead),
.cms-panel-brand :is(h1, h2, h3, h4, h5, h6, p, li, .lead, .cms-lead) {
    color: var(--site-on-primary);
}

.cms-bg-brand .eyebrow,
.cms-panel-brand .eyebrow {
    color: var(--site-highlight);
}

.cms-bg-brand a:not(.btn),
.cms-panel-brand a:not(.btn) {
    color: var(--site-highlight);
}

.cms-bg-brand .btn-primary,
.cms-panel-brand .btn-primary {
    --bs-btn-color: var(--site-primary);
    --bs-btn-bg: var(--site-on-primary);
    --bs-btn-border-color: var(--site-on-primary);
    --bs-btn-hover-color: var(--site-primary);
    --bs-btn-hover-bg: var(--site-highlight);
    --bs-btn-hover-border-color: var(--site-highlight);
    --bs-btn-active-color: var(--site-primary);
    --bs-btn-active-bg: var(--site-highlight);
}

.cms-bg-brand .btn-outline-primary,
.cms-panel-brand .btn-outline-primary {
    --bs-btn-color: var(--site-on-primary);
    --bs-btn-border-color: var(--site-on-primary);
    --bs-btn-hover-color: var(--site-primary);
    --bs-btn-hover-bg: var(--site-on-primary);
    --bs-btn-hover-border-color: var(--site-on-primary);
}

.cms-bg-brand :focus-visible,
.cms-panel-brand :focus-visible {
    outline-color: var(--site-highlight);
}

/* Cards keep their own light surface inside a brand band. */
.cms-bg-brand .card :is(h3, p, .card-title, .card-text) {
    color: var(--site-text);
}

.cms-bg-brand .card .card-title {
    color: var(--site-primary);
}

/* Custom colors: text color is set inline (chosen for contrast unless overridden); headings and leads inherit it. */
.cms-bg-custom :is(h1, h2, h3, h4, h5, h6, p, li, .lead, .cms-lead, .eyebrow, a:not(.btn)),
.cms-panel-custom :is(h1, h2, h3, h4, h5, h6, p, li, .lead, .cms-lead, .eyebrow, a:not(.btn)),
.cms-text-custom :is(h1, h2, h3, h4, h5, h6, p, li, .lead, .cms-lead, .eyebrow, a:not(.btn)) {
    color: inherit;
}

.cms-bg-custom .card :is(h3, p, .card-title, .card-text),
.cms-text-custom .card :is(h3, p, .card-text) {
    color: var(--site-text);
}

.cms-bg-custom .card .card-title {
    color: var(--site-primary);
}

.cms-panel-custom {
    padding: 1.25rem;
    border-radius: var(--site-radius-sm);
}

.cms-on-dark .btn-primary {
    --bs-btn-color: var(--site-primary);
    --bs-btn-bg: var(--site-on-primary);
    --bs-btn-border-color: var(--site-on-primary);
    --bs-btn-hover-color: var(--site-primary);
    --bs-btn-hover-bg: var(--site-highlight);
    --bs-btn-hover-border-color: var(--site-highlight);
}

.cms-on-dark .btn-outline-primary {
    --bs-btn-color: currentColor;
    --bs-btn-border-color: currentColor;
    --bs-btn-hover-color: var(--site-primary);
    --bs-btn-hover-bg: var(--site-on-primary);
    --bs-btn-hover-border-color: var(--site-on-primary);
}

.cms-on-dark :focus-visible {
    outline-color: var(--site-highlight);
}

/* Custom-colored buttons and callouts: background and readable text come from inline variables. */
.cms-btn-custom {
    --bs-btn-color: var(--cms-custom-fg);
    --bs-btn-bg: var(--cms-custom-bg);
    --bs-btn-border-color: var(--cms-custom-bg);
    --bs-btn-hover-color: var(--cms-custom-fg);
    --bs-btn-hover-bg: var(--cms-custom-bg);
    --bs-btn-hover-border-color: var(--cms-custom-fg);
    --bs-btn-active-color: var(--cms-custom-fg);
    --bs-btn-active-bg: var(--cms-custom-bg);
}

.cms-btn-custom:hover {
    filter: brightness(0.92);
}

.cms-callout-custom {
    background: var(--cms-custom-bg);
    color: var(--cms-custom-fg);
    border: 0;
}

.cms-callout-custom p {
    color: inherit;
}

.cms-section-box {
    padding: clamp(1.25rem, 3vw, 2.5rem);
}

/* Rounded corners clip images and cards inside the block. */
.cms-boxed {
    overflow: hidden;
}

.cms-boxed > .card,
.cms-boxed > figure img,
.cms-boxed > .alert {
    border-radius: inherit;
}

/* Carousel */
.cms-carousel .carousel-item > .cms-block {
    min-height: 100%;
}

.cms-carousel .carousel-item img {
    width: 100%;
}

.cms-carousel-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.cms-carousel-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
    border: 1px solid var(--site-border);
    border-radius: 999px;
    background: #fff;
    color: var(--site-primary);
}

.cms-carousel-btn:hover {
    background: var(--site-primary);
    color: #fff;
}

/* Bootstrap's indicators are absolutely positioned over the slide; here they sit in the control bar. */
.cms-carousel .cms-carousel-indicators {
    position: static;
    margin: 0;
    gap: 0.35rem;
}

.cms-carousel .cms-carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    margin: 0;
    border: 2px solid var(--site-primary);
    border-radius: 50%;
    background-color: transparent;
    opacity: 1;
    text-indent: 0;
}

.cms-carousel .cms-carousel-indicators .active {
    background-color: var(--site-primary);
}

.cms-on-dark .cms-carousel .cms-carousel-indicators [data-bs-target],
.cms-bg-brand .cms-carousel .cms-carousel-indicators [data-bs-target] {
    border-color: var(--site-on-primary);
}

.cms-on-dark .cms-carousel .cms-carousel-indicators .active,
.cms-bg-brand .cms-carousel .cms-carousel-indicators .active {
    background-color: var(--site-on-primary);
}

.cms-panel-light {
    padding: 1.25rem;
    border-radius: var(--site-radius-sm);
    background: var(--site-surface-alt);
}

.cms-panel-brand {
    padding: 1.25rem;
    border-radius: var(--site-radius-sm);
}

.cms-block + .cms-block {
    margin-top: 1rem;
}

.cms-block.cms-inline {
    display: inline-block;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.cms-block.cms-inline + .cms-block.cms-inline {
    margin-top: 0;
}

.cms-column > .cms-block:only-child,
.cms-column > .cms-block.cms-card,
.cms-column > .cms-block.cms-feature:only-child {
    height: 100%;
}

.cms-lead {
    color: var(--site-text-muted);
    margin-bottom: 0;
    margin-inline: inherit;
}

.text-center .cms-lead,
.text-center p {
    margin-inline: auto;
}

.hero-panel .cms-lead {
    color: var(--site-text);
}

.hero-panel .cms-heading h1 {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
}

.cms-text > :last-child {
    margin-bottom: 0;
}

.cms-text img {
    max-width: 100%;
    height: auto;
    border-radius: var(--site-radius-sm);
}

.cms-text h2,
.cms-text h3 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.cms-text > h1:first-child,
.cms-text > h2:first-child {
    margin-top: 0;
}

.cms-multiline {
    white-space: pre-line;
}

.cms-quote blockquote {
    padding: 0.5rem 1.25rem;
    border-left: 4px solid var(--site-accent);
    font-size: 1.15rem;
}

.cms-callout-brand {
    background: rgba(var(--site-primary-rgb), 0.08);
    border-left: 6px solid var(--site-primary);
    color: var(--site-text);
}

/* Photos cropped to a shape (image and card blocks); the inline style sets the aspect ratio and focus point. */
img.cms-crop {
    object-fit: cover;
    height: auto;
}

img.cms-crop:not(.w-25, .w-50, .w-75) {
    width: 100%;
}

.cms-spacer-sm { height: 1rem; }
.cms-spacer-md { height: 2.5rem; }
.cms-spacer-lg { height: 5rem; }

/* List groups, accordions and tables keep their own light surface, so their text stays dark on colored backgrounds. */
:is(.cms-bg-brand, .cms-panel-brand, .cms-bg-custom, .cms-panel-custom, .cms-text-custom, .cms-on-dark)
    :is(.list-group, .accordion, .table) :is(h2, h3, h4, p, li, span, a:not(.btn), caption) {
    color: var(--site-text);
}

.cms-table caption {
    color: var(--site-text-muted);
}

.cms-collapse-toggle .bi-chevron-down {
    display: inline-block;
    transition: transform 0.2s ease;
}

.cms-collapse-toggle:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .cms-collapse-toggle .bi-chevron-down {
        transition: none;
    }
}

.cms-button-group {
    max-width: 100%;
}

@media (max-width: 575.98px) {
    /* Long horizontal groups wrap on phones instead of overflowing. */
    .cms-button-group.btn-group {
        flex-wrap: wrap;
    }
}

.preview-banner {
    position: sticky;
    top: 0;
    z-index: 1040;
    padding: 0.6rem 1rem;
    background: #fff4e5;
    color: #8a4b00;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #f0c27b;
}

/* The starter page's bar (Admin > Pages > Starter page): calm, informative, and it stays in view. */
.starter-banner {
    position: sticky;
    top: 0;
    z-index: 1040;
    padding: 0.6rem 0;
    background: #eef4ff;
    color: #1f3a68; /* 10:1 on the bar */
    border-bottom: 1px solid #c9d8f2;
}

.starter-banner-text {
    font-size: 0.95rem;
}

/* A page's short link on the Pages list: looks like quiet text, behaves like a copy button. */
.page-short-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.4rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    background: none;
    color: var(--bs-secondary-color);
    font-family: var(--bs-font-monospace);
    font-size: 0.8rem;
}

.page-short-link:hover,
.page-short-link:focus-visible {
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* "Start here" on the Pages list. */
.starter-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.starter-card-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: #eef4ff;
    color: #1f3a68;
    font-size: 1.4rem;
}

/* ---------- Page builder (editor) ---------- */

.pb {
    padding-bottom: 4rem;
}

.pb-toolbar {
    position: sticky;
    top: 0;
    z-index: 1031; /* above the site header while editing */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 calc(50% - 50vw) 1rem;
    padding: 0.6rem max(1rem, calc(50vw - 50% + 0.75rem));
    background: #fff;
    border-bottom: 1px solid var(--site-border);
    box-shadow: var(--site-shadow-sm);
}

.pb-title {
    flex: 1 1 auto;
}

.pb-status {
    display: block;
    color: var(--site-text-muted);
    font-size: 0.8125rem;
}

.pb-toolbar-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* Links and buttons alike: center the label vertically. (d-none still wins: it's !important.) */
.pb-toolbar .btn-sm {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
}

.pb-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 992px) {
    .pb-shell {
        grid-template-columns: 13rem 1fr;
    }

    .pb-shell.is-palette-collapsed {
        grid-template-columns: 3.25rem 1fr;
    }

    .pb-palette {
        position: sticky;
        top: 5rem;
        align-self: start;
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
    }
}

.pb-palette-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
}

/* Collapsed: a narrow rail of block icons (still draggable); names show as tooltips. */
.is-palette-collapsed .pb-palette-head {
    justify-content: center;
}

.is-palette-collapsed .pb-palette-title,
.is-palette-collapsed .pb-palette-hint,
.is-palette-collapsed .pb-palette-item span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

.is-palette-collapsed .pb-palette-item {
    justify-content: center;
    padding: 0.55rem 0;
}

.is-palette-collapsed .pb-palette-toggle .bi {
    transform: rotate(180deg);
}

.pb-palette-title {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.pb-palette-list {
    display: grid;
    gap: 0.4rem;
}

.pb-palette-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    background: #fff;
    cursor: grab;
    user-select: none;
}

.pb-palette-item:hover {
    border-color: var(--site-primary);
    background: var(--site-surface-alt);
}

.pb-sections {
    display: grid;
    gap: 1rem;
}

.pb-section {
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: #fff;
    box-shadow: var(--site-shadow-sm);
    border-left: 6px solid var(--site-border);
}

.pb-section.pb-bg-light { border-left-color: var(--site-highlight); }
.pb-section.pb-bg-brand { border-left-color: var(--site-primary); }
.pb-section.pb-hero { border-left-color: var(--site-accent); }

.pb-section-bar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--site-border);
    background: var(--site-surface-alt);
    border-top-right-radius: var(--site-radius);
}

.pb-section-title {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.4rem 0.25rem;
    border: 0;
    background: none;
    color: var(--site-primary);
    font-weight: 600;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-handle {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--site-radius-sm);
    background: none;
    color: var(--site-text-muted);
    cursor: grab;
    touch-action: none; /* drag with the handle; swipe elsewhere still scrolls */
}

.pb-handle:hover {
    background: rgba(var(--site-primary-rgb), 0.08);
}

.pb-icon-btn {
    min-width: 40px;
    min-height: 40px;
    color: var(--site-primary);
}

.pb-columns {
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem;
}

@media (min-width: 768px) {
    .pb-layout-1-1 { grid-template-columns: 1fr 1fr; }
    .pb-layout-1-2 { grid-template-columns: 1fr 2fr; }
    .pb-layout-2-1 { grid-template-columns: 2fr 1fr; }
    .pb-layout-1-1-1 { grid-template-columns: repeat(3, 1fr); }
    .pb-layout-1-1-1-1 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
    .pb-layout-1-1-1-1 { grid-template-columns: repeat(4, 1fr); }
}

.pb-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.5rem;
    border: 1px dashed var(--site-border);
    border-radius: var(--site-radius-sm);
}

.pb-column-label {
    color: var(--site-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pb-blocks {
    display: grid;
    gap: 0.4rem;
    min-height: 2.75rem; /* room to drop into an empty column */
}

.pb-block {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    background: #fff;
}

.pb-block.is-selected {
    border-color: var(--site-primary);
    box-shadow: 0 0 0 2px rgba(var(--site-primary-rgb), 0.25);
}

.pb-block-main {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    min-height: 44px;
    padding: 0.35rem 0.25rem;
    border: 0;
    background: none;
    text-align: left;
    color: var(--site-text);
}

.pb-block-icon {
    color: var(--site-primary);
    font-size: 1.15rem;
}

.pb-block-thumb {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: 0.35rem;
}

.pb-block-type {
    display: block;
    color: var(--site-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pb-block-summary {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.pb-ghost {
    opacity: 0.45;
    background: rgba(var(--site-highlight-rgb), 0.25) !important;
}

.pb-add-block {
    align-self: flex-start;
}

/* Container blocks hold their own columns of blocks. */
.pb-block.pb-container {
    display: block;
    background: rgba(var(--site-highlight-rgb), 0.08);
}

.pb-container-bar {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.pb-container > .pb-columns {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem;
    padding: 0 0.5rem 0.5rem;
}

.pb-container .pb-column {
    background: #fff;
}

/* Focus point picker for cropped photos */
.pb-focus {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.75rem;
    align-items: start;
    margin-bottom: 0.75rem;
}

.pb-focus .focus-picker {
    margin: 0;
}

.pb-focus-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--site-radius-sm);
    background-color: var(--site-surface-alt);
    background-repeat: no-repeat;
    background-size: cover;
}

/* Table editor */
.pb-table-editor {
    overflow-x: auto;
}

.pb-table-editor table {
    border-collapse: separate;
    border-spacing: 0.25rem;
}

.pb-table-editor td input {
    min-width: 7rem;
}

.pb-table-editor .is-header input {
    font-weight: 700;
    background: var(--site-surface-alt);
}

/* Item lists (list groups, accordions, button groups) */
.pb-item {
    padding: 0.75rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    background: #fff;
}

.pb-item-bar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.pb-item-bar .pb-item-title {
    flex: 1 1 auto;
    color: var(--site-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pb-add-section {
    margin-top: 1rem;
    min-height: 52px;
    border-style: dashed;
}

/* Edit panel: wide side panel on desktop, full screen on phones. */
.pb-panel {
    --bs-offcanvas-width: 28rem;
}

@media (max-width: 575.98px) {
    .pb-panel {
        --bs-offcanvas-width: 100vw !important;
    }

    .pb-panel-resizer {
        display: none;
    }
}

/* Width handle along the panel's left edge. */
.pb-panel-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 12px;
    margin-left: -6px;
    cursor: ew-resize;
    touch-action: none;
}

.pb-panel-resizer::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px;
    width: 2px;
    background: transparent;
    transition: background-color 0.15s ease;
}

.pb-panel-resizer:hover::before,
.pb-panel-resizer:focus-visible::before,
.pb-panel-resizer.is-dragging::before {
    background: var(--site-primary);
}

.pb-panel-resizer:focus-visible {
    outline: none;
}

.pb-panel-grip {
    position: absolute;
    top: 50%;
    left: -4px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 44px;
    border: 1px solid var(--site-border);
    border-radius: 6px;
    background: #fff;
    color: var(--site-primary);
    transform: translateY(-50%);
}

.pb-panel-resizer:focus-visible .pb-panel-grip {
    box-shadow: 0 0 0 3px rgba(var(--site-primary-rgb), 0.35);
}

/* No sliding animation while the width follows the pointer. */
.pb-panel.is-resizing {
    transition: none;
    user-select: none;
}

.pb-sheet {
    --bs-offcanvas-height: auto;
    max-height: 80vh;
}

.pb-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.6rem;
    padding-bottom: 1rem;
}

.pb-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-height: 5.5rem;
    padding: 0.85rem 0.5rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    background: #fff;
    color: var(--site-primary);
    font-weight: 600;
}

.pb-choice:hover,
.pb-choice:focus-visible {
    border-color: var(--site-primary);
    background: var(--site-surface-alt);
}

.pb-choice .bi {
    font-size: 1.5rem;
}

.pb-layout-diagram {
    display: flex;
    gap: 3px;
    width: 4.5rem;
    height: 2rem;
}

.pb-layout-diagram span {
    border-radius: 3px;
    background: var(--site-highlight);
}

.pb-diagram-hero span {
    flex: 1;
    background: linear-gradient(135deg, var(--site-accent), var(--site-secondary));
}

.pb-layout-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.pb-layout-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 0.25rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    cursor: pointer;
    text-align: center;
}

.pb-layout-option:has(input:checked) {
    border-color: var(--site-primary);
    box-shadow: 0 0 0 1px var(--site-primary);
}

.pb-layout-option:has(input:focus-visible) {
    outline: 3px solid var(--site-focus);
    outline-offset: 2px;
}

.pb-segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.pb-segmented .btn {
    min-height: 36px;
}

.pb-field-heading {
    margin: 1.5rem 0 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--site-border, #d9e1ec);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--site-text-muted);
}

.pb-field-heading:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.pb-color {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pb-color .form-control-color {
    flex-shrink: 0;
    width: 3rem;
    height: 40px;
    padding: 0.25rem;
}

.pb-color [data-color-text] {
    max-width: 8.5rem;
    font-family: var(--bs-font-monospace);
}

.pb-color .btn {
    min-height: 40px;
}

.pb-contrast:empty {
    display: none;
}

.pb-contrast {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.4rem;
    font-size: 0.875rem;
}

.pb-contrast-ok {
    color: #146c43;
}

.pb-contrast-bad {
    padding: 0.4rem 0.6rem;
    border-radius: var(--site-radius-sm);
    background: #fff3cd;
    color: #664d03;
}

.pb-contrast-note {
    color: var(--site-text-muted);
}

.pb-swatch {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    margin-right: 0.35rem;
    vertical-align: -0.1rem;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 50%;
}

.pb-slide-list .pb-block {
    margin: 0;
}

.pb-image-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pb-image-preview,
.pb-image-placeholder {
    flex-shrink: 0;
    width: 5.5rem;
    height: 4rem;
    object-fit: cover;
    border-radius: var(--site-radius-sm);
    background: var(--site-surface-alt);
}

.pb-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--site-text-muted);
    font-size: 1.5rem;
}

.pb-image-choice {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}

.pb-image-choice:hover figure,
.pb-image-choice:focus-visible figure {
    border-color: var(--site-primary);
    box-shadow: 0 0 0 2px var(--site-primary);
}

.pb-toast {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 1090;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: calc(100vw - 2rem);
    padding: 0.7rem 1rem;
    transform: translateX(-50%);
    border-radius: var(--site-radius-sm);
    background: var(--site-primary);
    color: var(--site-on-primary);
    box-shadow: var(--site-shadow);
}

.pb-toast.is-error {
    background: #a12a1f;
}

.pb-toast .btn-link {
    color: var(--site-highlight);
    font-weight: 700;
}

/* ---------- Brand utility classes (kept for existing content) ---------- */

.pembhi-active { color: #7fcadd; font-weight: bolder; font-style: italic; }
.pembhi-background-off-white { background-color: #FCFAFA; }
.pembhi-background-dark-blue { background-color: #264077; }
.pembhi-background-light-blue { background-color: #1B90D5; }
.pembhi-background-dark-green { background-color: #4BACA5; }
.pembhi-background-light-green { background-color: #7FCADD; }
.pembhi-body-text { color: #264077; }
.pembhi-heading-dark-blue { color: #264077; }
.pembhi-heading-light-blue { color: #1B90D5; }
.pembhi-heading-light-green { color: #7FCADD; }
.pembhi-heading-dark-green { color: #4BACA5; }
.pembhi-heading-off-white { color: #FCFAFA; text-decoration: none; }
.pembhi-card-icons-dark-blue { color: #264077; font-size: 4rem; }
.pembhi-card-icons-sm-dark-blue { color: #264077; font-size: 1rem; }
.pembhi-nav-shadow { box-shadow: 0 1rem 3rem 0 #7d9ec1; }
.pembhi-shadow { border-radius: 10px; box-shadow: 0 1rem 3rem 0 #7d9ec1; }
.pembhi-shadow:hover, .pembhi-shadow:active { box-shadow: 0 1rem 3rem 0 #4BACA5; }
.pembhi-border { border-color: #4BACA5; }

/* ---------- Motion preferences ---------- */

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

    .card-interactive:hover,
    .card-interactive:focus-within {
        transform: none;
    }
}

/* ---------- Print ---------- */

@media print {
    .site-header,
    .site-footer,
    .skip-link,
    .share-links {
        display: none !important;
    }
}

/* Image editor */

.image-grid-caption {
    margin-top: 0.125rem;
    font-style: italic;
    color: var(--site-text-muted);
    word-break: normal;
    overflow-wrap: anywhere;
}

.image-edit-preview img {
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    background: var(--site-surface-alt);
}

.image-edit-facts dt {
    font-weight: 600;
}

.image-edit-facts dd {
    margin-bottom: 0.75rem;
}

.image-usage {
    padding-left: 1.1rem;
}

/* Delete area on the image edit page, and its confirmation dialog. */
.danger-zone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid #f1c4c8;
    border-radius: var(--site-radius-sm);
    background: #fdf5f6;
}

/* The same layout for an action that isn't destructive (moving a photo to another folder). */
.danger-zone.action-zone {
    border-color: var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

/* Confirmation dialogs (delete photo, and every <form data-confirm> via site.js) share this look. */
.confirm-dialog,
.bulk-move-dialog {
    border: 0;
    border-radius: var(--site-radius);
    box-shadow: 0 1.25rem 3rem rgba(16, 24, 40, 0.25);
}

/* Images page: selecting several images (page-admin.js) and moving them together. */
[data-image-groups] [data-image-key] {
    position: relative;
}

.image-select-check {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
    display: none;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0;
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.35);
    cursor: pointer;
}

.is-selecting .image-select-check {
    display: block;
}

.is-selecting .image-card {
    cursor: pointer;
}

[data-image-key].is-selected .image-card {
    outline: 3px solid var(--site-secondary);
    outline-offset: 2px;
}

[data-image-groups]:not(.is-selecting) .image-select-all {
    display: none;
}

.image-select-all {
    flex-shrink: 0;
    text-decoration: none;
}

.selection-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    box-shadow: 0 -0.5rem 1.5rem rgba(16, 24, 40, 0.1);
}

.selection-bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    max-width: 1140px;
    margin: 0 auto;
}

body.has-selection-bar {
    padding-bottom: 5.5rem;
}

.bulk-move-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.bulk-move-thumbs li {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    overflow: hidden;
    border-radius: var(--site-radius-sm);
    background: var(--bs-tertiary-bg);
    color: var(--site-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

.bulk-move-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.confirm-dialog-icon {
    display: inline-grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: #fbe3e5;
    color: #b02a37;
    font-size: 1.5rem;
}

.confirm-dialog-preview {
    display: block;
    max-width: 100%;
    max-height: 10rem;
    margin: 0 auto;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    object-fit: contain;
    background: var(--site-surface-alt);
}

.image-usage li + li {
    margin-top: 0.25rem;
}