/**
 * Bootstrap utility replacements.
 *
 * Covers every Bootstrap UTILITY class that appears in this theme's markup and
 * has no definition of its own anywhere in the theme's CSS. Generated from an
 * inventory of the actual markup, not copied wholesale — if a class is not used
 * here, it is not in this file.
 *
 * NOT in scope:
 *   - The grid. root.css already implements .row as CSS Grid with a 12-column
 *     template and the full .col-* / .col-{xs,sm,md,lg}-* set. Bootstrap's
 *     flexbox grid was being loaded and shadowed.
 *   - Component base layout (.btn, .form-control, .dropdown-menu, .card,
 *     .offcanvas, .carousel and friends). Those live in bs-components.css —
 *     they need more care, because much of the theme's CSS overrides them
 *     rather than defining them.
 *
 * Values follow the theme's own variables (--gap, --brand, --text, --muted,
 * --border, --border-radius, --box-shadow) rather than Bootstrap's hardcoded
 * palette, so a theme colour change carries through.
 *
 * Bootstrap's spacer scale is 0 / .25 / .5 / 1 / 1.5 / 3 rem. Here it is
 * derived from --gap (2rem) so spacing stays proportional to the theme's
 * rhythm: 0 / .25 / .5 / 1 / 1.5 / 3 × (--gap / 2).
 *
 * @package Propertunity
 */

:root {
    --sp-0: 0;
    --sp-1: calc(var(--gap) * 0.125);
    --sp-2: calc(var(--gap) * 0.25);
    --sp-3: calc(var(--gap) * 0.5);
    --sp-4: calc(var(--gap) * 0.75);
    --sp-5: calc(var(--gap) * 1.5);
}

/* ── Display ─────────────────────────────────────────────────────────────── */

.d-none  { display: none !important; }
.d-block { display: block !important; }
.d-grid  { display: grid !important; }

@media (min-width: 768px) {
    .d-md-block { display: block !important; }
}

/* ── Flex ────────────────────────────────────────────────────────────────── */

.flex-row  { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-fill { flex: 1 1 auto !important; }

/* ── Margin ──────────────────────────────────────────────────────────────── */

.m-4 { margin: var(--sp-4) !important; }

.mt-0 { margin-top: var(--sp-0) !important; }
.mt-1 { margin-top: var(--sp-1) !important; }
.mt-2 { margin-top: var(--sp-2) !important; }
.mt-3 { margin-top: var(--sp-3) !important; }
.mt-4 { margin-top: var(--sp-4) !important; }
.mt-5 { margin-top: var(--sp-5) !important; }

.mb-1 { margin-bottom: var(--sp-1) !important; }
.mb-2 { margin-bottom: var(--sp-2) !important; }
.mb-3 { margin-bottom: var(--sp-3) !important; }
.mb-4 { margin-bottom: var(--sp-4) !important; }
.mb-5 { margin-bottom: var(--sp-5) !important; }

.ms-1 { margin-left: var(--sp-1) !important; }
.ms-2 { margin-left: var(--sp-2) !important; }
.ms-3 { margin-left: var(--sp-3) !important; }

.me-2 { margin-right: var(--sp-2) !important; }
.me-3 { margin-right: var(--sp-3) !important; }

/* ── Padding ─────────────────────────────────────────────────────────────── */

.p-0 { padding: var(--sp-0) !important; }
.p-2 { padding: var(--sp-2) !important; }
.p-3 { padding: var(--sp-3) !important; }
.p-4 { padding: var(--sp-4) !important; }

.px-2 { padding-left: var(--sp-2) !important; padding-right: var(--sp-2) !important; }
.px-5 { padding-left: var(--sp-5) !important; padding-right: var(--sp-5) !important; }

.py-3 { padding-top: var(--sp-3) !important; padding-bottom: var(--sp-3) !important; }
.py-4 { padding-top: var(--sp-4) !important; padding-bottom: var(--sp-4) !important; }
.py-5 { padding-top: var(--sp-5) !important; padding-bottom: var(--sp-5) !important; }

.ps-2 { padding-left: var(--sp-2) !important; }
.ps-3 { padding-left: var(--sp-3) !important; }

/* ── Gap / grid gutters ──────────────────────────────────────────────────── */

.gap-3 { gap: var(--sp-3) !important; }

/* Bootstrap's .g-* set gutters on a .row. root.css's grid reads --gutter. */
.g-3 { --gutter: var(--sp-3); gap: var(--sp-3); }
.g-4 { --gutter: var(--sp-4); gap: var(--sp-4); }

/* ── Sizing ──────────────────────────────────────────────────────────────── */

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

/* ── Position ────────────────────────────────────────────────────────────── */

.position-absolute { position: absolute !important; }

/* ── Order ───────────────────────────────────────────────────────────────── */

.order-4 { order: 4 !important; }

/* ── Text ────────────────────────────────────────────────────────────────── */

.text-start      { text-align: left !important; }
.text-uppercase  { text-transform: uppercase !important; }

.text-dark    { color: var(--text-heading) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }

.lead {
    font-size: 1.25rem;
    font-weight: 300;
}

/* ── Background ──────────────────────────────────────────────────────────── */

.bg-white     { background-color: var(--bg-color) !important; }
.bg-light     { background-color: var(--color-38) !important; }
.bg-primary   { background-color: var(--brand) !important; }
.bg-secondary { background-color: var(--color-30) !important; }
.bg-info      { background-color: var(--info) !important; }

/* ── Border ──────────────────────────────────────────────────────────────── */

.border         { border: 1px solid var(--border) !important; }
.border-0       { border: 0 !important; }
.border-start   { border-left: 1px solid var(--border) !important; }
.border-4       { border-width: 4px !important; }
.border-primary { border-color: var(--brand) !important; }

/* ── Radius ──────────────────────────────────────────────────────────────── */

.rounded   { border-radius: var(--border-radius) !important; }
.rounded-4 { border-radius: calc(var(--border-radius) * 4) !important; }

/* ── Shadow ──────────────────────────────────────────────────────────────── */

.shadow-sm { box-shadow: 0 .125rem .25rem color-mix(in srgb, var(--color-25) 8%, transparent) !important; }
.shadow    { box-shadow: var(--box-shadow) !important; }
.shadow-lg { box-shadow: var(--box-shadow-hover) !important; }

/* ── Aspect ratio ────────────────────────────────────────────────────────── */

.ratio {
    position: relative;
    width: 100%;
}

.ratio::before {
    content: "";
    display: block;
    padding-top: var(--pty-ratio, 100%);
}

.ratio > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ratio-16x9 { --pty-ratio: 56.25%; }

/* ── Accessibility ───────────────────────────────────────────────────────── */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0 !important;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */

.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -.125em;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: pty-spin .75s linear infinite;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: .2em;
}

@keyframes pty-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .spinner-border { animation-duration: 1.5s; }
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

.table-sm > :not(caption) > * > * {
    padding: var(--sp-1) var(--sp-2);
}

.table-borderless > :not(caption) > * > * {
    border-width: 0;
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */

.alert-success {
    color: var(--success);
    background-color: var(--success-light);
    border-color: var(--success);
}

.alert-warning {
    color: var(--warning);
    background-color: var(--warning-light);
    border-color: var(--warning);
}

.alert-danger {
    color: var(--error);
    background-color: var(--error-light);
    border-color: var(--error);
}

/* ── Accordion ───────────────────────────────────────────────────────────── */

/* .accordion-collapse is the collapsible region; .collapse in
   bs-components.css does the showing and hiding. */
.accordion-collapse { display: block; width: 100%; border: 0; }

.accordion-flush .accordion-item {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}

.accordion-flush .accordion-item:first-child { border-top: 0; }
.accordion-flush .accordion-item:last-child  { border-bottom: 0; }

/* ── Cards ───────────────────────────────────────────────────────────────── */

.card-title {
    margin-bottom: var(--sp-2);
}

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

/* ── Carousel ────────────────────────────────────────────────────────────── */

/* Crossfade instead of slide. The theme's own carousel.css owns layout. */
.carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity .6s ease-in-out;
    transform: none;
}

.carousel-fade .carousel-item.active {
    opacity: 1;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .carousel-fade .carousel-item { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT BASES
   ═══════════════════════════════════════════════════════════════════════════

   Everything below is structural layout for Bootstrap components the theme
   uses but never defines. Kept deliberately thin: where the theme already has
   a base rule it is NOT repeated here, because a second base would fight it.

   Already owned by the theme, so absent from this file:
     button (style.css)            .form-control  .form-select  .form-floating
     .input-group  .input-group-text  .dropdown-menu  .dropdown-item
     .nav  .nav-item  .nav-link  .nav-fill (root.css)
     .badge  .modal  .btn-close  .row  .col-* (root.css grid)

   Colour comes from theme variables throughout. Nothing here sets a font.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────────────────────────────────── */

/* style.css already styles bare <button> in full. This only has to make an
   <a class="btn"> behave like one, and supply the variants. */
a.btn {
    height: var(--input-size);
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    color: var(--text);
    background: var(--btn);
    border: 0;
    border-radius: var(--border-radius);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
}

.btn-primary   { background: var(--brand) !important;   color: var(--white) !important; }
.btn-secondary { background: var(--color-30) !important; color: var(--text) !important; }
.btn-success   { background: var(--success) !important; color: var(--white) !important; }
.btn-warning   { background: var(--warning) !important; color: var(--color-01) !important; }
.btn-danger    { background: var(--error) !important;   color: var(--white) !important; }

.btn-primary:hover   { background: var(--brand-hover) !important; }
.btn-secondary:hover { background: var(--color-28) !important; }

.btn-link {
    background: none !important;
    border: 0;
    color: var(--brand);
    text-decoration: underline;
    height: auto;
    padding: 0;
    width: auto;
    min-width: 0;
}

.btn-sm { height: auto; padding: var(--sp-2) var(--sp-3); font-size: .875rem; }
.btn-lg { padding: var(--sp-3) var(--sp-4); font-size: 1.25rem; }

.btn-group-lg > .btn { padding: var(--sp-3) var(--sp-4); font-size: 1.25rem; }

/* Visually-hidden radio/checkbox whose <label class="btn"> is the control. */
.btn-check {
    position: absolute;
    clip-path: inset(50%);
    pointer-events: none;
}

.btn-check:focus-visible + .btn { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn-check:checked + .btn       { background: var(--brand); color: var(--white); }

.btn:disabled,
.btn.disabled { opacity: .65; pointer-events: none; }

/* ── Forms ───────────────────────────────────────────────────────────────── */

.form-label {
    display: inline-block;
    margin-bottom: var(--sp-1);
}

.form-control-sm { padding: var(--sp-1) var(--sp-2); font-size: .875rem; }
.form-control-lg { padding: var(--sp-3) var(--sp-4); font-size: 1.25rem; }

.form-control-color {
    width: 3rem;
    padding: var(--sp-1);
}

.form-control-color::-webkit-color-swatch { border-radius: var(--border-radius); border: 0; }
.form-control-color::-moz-color-swatch    { border-radius: var(--border-radius); border: 0; }

.input-group-sm > .form-control,
.input-group-sm > .input-group-text { padding: var(--sp-1) var(--sp-2); font-size: .875rem; }

.form-check-input {
    width: 1em;
    height: 1em;
    margin-top: .25em;
    vertical-align: top;
    background-color: var(--input-bg);
    border: 1px solid var(--border);
    appearance: none;
    print-color-adjust: exact;
}

.form-check-input[type="checkbox"] { border-radius: .25em; }
.form-check-input[type="radio"]    { border-radius: 50%; }

.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.form-check-input:checked[type="radio"] {
    background-image: radial-gradient(circle, var(--white) 0 35%, transparent 36%);
}

.form-range {
    width: 100%;
    height: 1.5rem;
    padding: 0;
    background: transparent;
    appearance: none;
}

.form-range::-webkit-slider-runnable-track {
    height: .5rem;
    background: var(--color-32);
    border-radius: 1rem;
}

.form-range::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -.25rem;
    background: var(--brand);
    border-radius: 50%;
    appearance: none;
}

.form-range::-moz-range-track { height: .5rem; background: var(--color-32); border-radius: 1rem; }
.form-range::-moz-range-thumb { width: 1rem; height: 1rem; background: var(--brand); border: 0; border-radius: 50%; }

/* ── Dropdowns ───────────────────────────────────────────────────────────── */

/* .dropdown-menu and .dropdown-item are styled in root.css; these are the
   pieces it does not cover. */
.dropdown { position: relative; }

.dropdown-toggle::after {
    content: "";
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

.dropdown-menu-end { right: 0; left: auto; }

.dropdown-divider {
    height: 0;
    margin: var(--sp-2) 0;
    border-top: 1px solid var(--border);
    overflow: hidden;
}

.dropdown-header {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    font-size: .875rem;
    color: var(--muted);
    white-space: nowrap;
}

.dropdown-item-text {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    color: var(--text);
}

/* ── Tabs and pills ──────────────────────────────────────────────────────── */

.nav-pills .nav-link.active { background-color: var(--brand); color: var(--white); }

.tab-content > .tab-pane { display: none; }
.tab-content > .active   { display: block; }

/* Panes are class="tab-pane fade", and .fade:not(.show) zeroes opacity — so
   an active pane that never got .show would take up space while invisible.
   showTab() always sets both; this is the guard for markup rendered active
   server-side with only one of them. */
.tab-content > .tab-pane.active { opacity: 1; }

/* ── Cards ───────────────────────────────────────────────────────────────── */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--bg-color);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    word-wrap: break-word;
}

.card-body   { flex: 1 1 auto; padding: var(--sp-3); }
.card-header { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); }
.card-footer { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border); }

/* ── Collapse ────────────────────────────────────────────────────────────── */

.collapse:not(.show) { display: none; }

.collapsing {
    height: 0;
    overflow: hidden;
    transition: height .35s ease;
}

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

/* ── Accordion ───────────────────────────────────────────────────────────── */

/* root.css makes .row a 12-track CSS Grid, so a direct child with no .col-*
   class occupies exactly one track — 1/12th of the width. Bootstrap's .row was
   flexbox and a bare child just flexed to fit, which is why this only appeared
   once Bootstrap came out. Anything unclassed in a .row spans the full width.

   Scoped to direct children of .row so it cannot affect nested grids. */
/*.row > .accordion,
.row > .tab-content,
.row > .card,
.row > .table,
.row > .alert,
.row > .collapse,
.row > .accordion-item {
    grid-column: 1 / -1;
}*/

/* A .row with no .col-* children is being used as a plain wrapper, not a
   grid. root.css gives .row 12 fixed tracks, so each unclassed child lands
   in one of them — 1/12th wide. Bootstrap's .row was flexbox, which is why
   this only surfaced once Bootstrap came out.
   
   Falling back to flex here restores exactly what those wrappers had before:
   children at content width, wrapping, same gutter. Rows that DO contain
   columns are untouched and stay on the grid. */
.row:not(:has(> [class*="col-"])) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter, 16px);
}

/*.row > *:not([class*="col-"]) { grid-column: 1 / -1; }*/

.accordion {
    display: block;
    width: 100%;
}

.accordion-item {
    display: block;
    width: 100%;
    background-color: var(--bg-color);
    border: 1px solid var(--border);
}

.accordion-item + .accordion-item { border-top: 0; }

.accordion-header { margin-bottom: 0; }

.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--sp-3);
    text-align: left;
    background-color: transparent;
    border: 0;
}

.accordion-button::after {
    flex-shrink: 0;
    margin-left: auto;
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-size: contain;
    transition: transform .2s ease;
}

.accordion-button:not(.collapsed)::after { transform: rotate(-180deg); }

.accordion-body { padding: var(--sp-3); }

/* ── Offcanvas ───────────────────────────────────────────────────────────── */

.offcanvas {
    position: fixed;
    bottom: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    background-color: var(--bg-color);
    background-clip: padding-box;
    outline: 0;
    transition: transform .3s ease-in-out;
    visibility: hidden;
}

.offcanvas.showing,
.offcanvas.show:not(.hiding) { transform: none; visibility: visible; }

.offcanvas-start  { top: 0; left: 0; width: 400px; border-right: 1px solid var(--border); transform: translateX(-100%); }
.offcanvas-end    { top: 0; right: 0; width: 400px; border-left: 1px solid var(--border);  transform: translateX(100%); }
.offcanvas-top    { top: 0; right: 0; left: 0; height: 30vh; border-bottom: 1px solid var(--border); transform: translateY(-100%); }
.offcanvas-bottom { right: 0; left: 0; height: 30vh; border-top: 1px solid var(--border); transform: translateY(100%); }

.offcanvas-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3); }
.offcanvas-body   { flex-grow: 1; padding: var(--sp-3); overflow-y: auto; }

.offcanvas-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background-color: var(--color-01);
}

.offcanvas-backdrop.show { opacity: .5; }

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

/* ── Carousel ────────────────────────────────────────────────────────────── */

/* carousel.css owns the hero carousel's look. This is the sliding mechanism. */
.carousel { position: relative; }

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    backface-visibility: hidden;
    transition: transform .6s ease-in-out;
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev { display: block; }

.carousel-item-next:not(.carousel-item-start),
.carousel-item-end.active   { transform: translateX(100%); }

.carousel-item-prev:not(.carousel-item-end),
.carousel-item-start.active { transform: translateX(-100%); }

.carousel-item-next.carousel-item-start,
.carousel-item-prev.carousel-item-end { transform: none; }

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0 15% var(--sp-3);
    list-style: none;
}

@media (prefers-reduced-motion: reduce) {
    .carousel-item { transition: none; }
}

/* ── Progress ────────────────────────────────────────────────────────────── */

.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    background-color: var(--color-34);
    border-radius: var(--border-radius);
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--brand);
    color: var(--white);
    text-align: center;
    white-space: nowrap;
    transition: width .6s ease;
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar { transition: none; }
}

/* ── Pagination ──────────────────────────────────────────────────────────── */

.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
}

.page-link {
    position: relative;
    display: block;
    padding: var(--sp-2) var(--sp-3);
    color: var(--brand);
    text-decoration: none;
    background-color: var(--bg-color);
    border: 1px solid var(--border);
}

.page-item.active .page-link { background-color: var(--brand); border-color: var(--brand); color: var(--white); }
.page-item.disabled .page-link { color: var(--muted); pointer-events: none; }

/* ── Tables ──────────────────────────────────────────────────────────────── */

.table {
    width: 100%;
    margin-bottom: var(--sp-3);
    vertical-align: top;
    border-collapse: collapse;
}

.table > :not(caption) > * > * {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
}

.table > thead { vertical-align: bottom; }

/* ── Alerts ──────────────────────────────────────────────────────────────── */

.alert {
    position: relative;
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    border: 1px solid transparent;
    border-radius: var(--border-radius);
}

/* ── Tooltip and popover shells ──────────────────────────────────────────── */

/* Positioning is set inline by JS. These only supply the look, so they are
   ready before the Bootstrap JS replacements land. */
.tooltip,
.popover {
    position: absolute;
    z-index: 1080;
    display: block;
    word-wrap: break-word;
}

.tooltip { font-size: .875rem; opacity: 0; transition: opacity .15s linear; }
.tooltip.show { opacity: .9; }

.tooltip-inner {
    max-width: 200px;
    padding: var(--sp-1) var(--sp-2);
    color: var(--white);
    text-align: center;
    background-color: var(--color-05);
    border-radius: var(--border-radius);
}

.popover {
    max-width: 276px;
    background-color: var(--bg-color);
    background-clip: padding-box;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.popover-header { padding: var(--sp-2) var(--sp-3); margin-bottom: 0; border-bottom: 1px solid var(--border); }
.popover-body   { padding: var(--sp-3); color: var(--text-body); }

/* ── Shared state classes ────────────────────────────────────────────────── */

.fade { transition: opacity .15s linear; }
.fade:not(.show) { opacity: 0; }

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

.invisible { visibility: hidden !important; }
.visible   { visibility: visible !important; }

/* ── Names Bootstrap 5 dropped, still in this theme's markup ─────────────── */

/* .btn-group-justified was Bootstrap 3. It has no BS5 equivalent and no
   definition anywhere in the theme, so the button rows at map.php:450 and
   grid.php:1548 have been relying on .btn-group alone. */
.btn-group-justified {
    display: flex;
    width: 100%;
}

.btn-group-justified > .btn,
.btn-group-justified > .btn-group { flex: 1 1 0; }

/* Hook classes with no styling of their own — declared so a grep for an
   undefined class comes back clean, and so the intent is recorded.
   .card-attachment  activity.js:164, a card-body variant
   .nav-hidden       set on <body> by theme.js:1499, read by its own rules
   .tooltip-hack     wrapper for a tooltip on a disabled/wrapped control */





/* Background hero video — decorative, never interactive. YouTube shows its
   centre control cluster on hover regardless of controls=0, and blocking
   pointer events is the only reliable way to stop it. Clicks pass through to
   whatever sits above the video. */
#wp-custom-header-video {
    pointer-events: none;
}