/* ==========================================================================
   Templates CSS — Walltopia v2
   Template-specific styles for single pages, archives, and content blocks.
   ========================================================================== */


/* === 1. Single post (blog) === */

.post-container {
    display: flex;
    flex-wrap: wrap;
}

.single-post-content {
    width: 66.6%;
    padding-right: 20px;
    /* Flex items default to min-width:auto — their automatic minimum size is
       based on content (e.g. a wide img/iframe in post content), which can
       grow this column past its 66.6% basis and overlap .single-post-sidebar.
       min-width:0 lets it actually shrink to the set width so img's own
       max-width:100% (base.css) can do its job. */
    min-width: 0;
}

/* Post title (P3 task B): .wt-title is shared with single-wt_testimonial.php's
   h3 author-name heading (28px literal is right there), so its size can't
   change globally — scoped here instead of keying the selector to h1
   (CLAUDE.md heading rule). One step above content h2 (var(--wt-fs-h2),
   36px) on the existing scale: var(--wt-fs-h1) itself, not the archive
   header's literal .small-header .big-title (50px) — blog titles run long
   and wrap 2-3 lines, where 50px reads too heavy. Tracks the h1/h2 token
   steps at every breakpoint (M8), so h1 > content h2 stays true throughout. */
.single-post-content .wt-title {
    font-size: var(--wt-fs-h1);
}

.single-post-content img.wp-post-image,
.single-post-content img.shortcode-image {
    width: 100%;
    height: auto;
    margin: 0 0 25px 0;
}

.single-post-content .post-tags {
    width: 100%;
    display: inline-block;
    margin: 50px 0 0 0;
}

.single-post-content .post-tags .tag {
    background: #dee5e8;
    font-size: 14px;
    line-height: 25px;
    display: inline-block;
    padding: 0 20px;
    margin: 0 25px 12.5px 0;
    color: var(--wt-black);
    text-decoration: none;
}

.single-post-content .post-tags .tag:hover {
    background: #b8b8b8;
    text-decoration: none;
}

.single-post-sidebar {
    width: calc(33.3% - 40px);
    padding: 0;
    margin-left: 20px;
    margin-right: 20px;
}

.single-post-sidebar #sidebar {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--wt-font-heading);
    display: inline-block;
    background: var(--wt-white);
}

.single-post-sidebar #sidebar aside {
    margin: 0 25px;
    width: calc(100% - 50px);
    padding: 30px 0 10px 0;
}

/* M5c: divider belongs BETWEEN widgets (form → Related Posts), not after the
   last one. Was unconditional on every aside, so it also drew under Related
   Posts — invisible before M5c only because the removed share block's own
   margin visually absorbed it; removing that block exposed it as a leftover
   trailing line. */
.single-post-sidebar #sidebar aside:not(:last-child) {
    border-bottom: 2px solid #b8b8b8;
}

.single-post-sidebar #sidebar aside ul {
    background: var(--wt-white);
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.single-post-sidebar #sidebar aside ul li {
    padding: 0;
    border: 0 none;
}

.single-post-sidebar #sidebar aside ul li::before {
    content: none;
    display: none;
}

.single-post-sidebar #sidebar aside ul li a {
    color: #97a9b5;
    padding: 0;
    margin: 0 0 15px 0;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
    display: inline-block;
    width: 100%;
    text-decoration: none;
}

.single-post-sidebar #sidebar aside ul li a:hover {
    color: var(--wt-black);
    text-decoration: none;
}

.single-post-sidebar .widget-title {
    color: var(--wt-black);
    font-weight: 900;
    line-height: 1;
    margin: 5px 0 20px 0;
    text-transform: capitalize;
    letter-spacing: 0;
}

.single-post-sidebar .widget-title::after {
    content: none;
    display: none;
}

/* Sticky blog sidebar (M5/M5b), desktop only (≥1024, M1 ladder) — matches
   production's mechanism (old theme's jquery.sticky-sidebar.min.js,
   `.single-post-sidebar.stickySidebar({ topSpacing:140, bottomSpacing:50,
   containerSelector:'.post-container', innerWrapperSelector:'#sidebar' })`,
   verified live in header.php) without the jQuery dependency: `#sidebar`'s
   own containing block is `.single-post-sidebar`, which — being a flex item
   of `.post-container` (default align-items: stretch, no override needed) —
   is already stretched to the full height of `.single-post-content`. That
   makes position: sticky on `#sidebar` stop exactly at the end of the
   content column by construction (no footer/overlap risk) without wrapping
   or reordering anything; Related Posts and the share icons stay inside
   `#sidebar` in their existing order and travel with the form as one block,
   same as production's single sticky unit.

   Tall form vs short screen (M5b): the form (~25 checkboxes) is taller
   (~2000px) than any realistic desktop viewport below the sticky offset, at
   both 1366x768 and 1920x1080. M5 first capped `#sidebar` at the available
   viewport height with its own `overflow-y: auto`, but Жоро rejected the
   inner scrollbar — production's sidebar keeps its natural height and
   scrolls with the page. Fix: no max-height/overflow here at all;
   `assets/js/sticky-sidebar.js` computes `--wt-sidebar-top` on `#sidebar`
   (ResizeObserver + window resize, no scroll listener) as
   `min(topSpacing, viewportHeight - sidebarHeight - bottomSpacing)` — a
   short sidebar gets the plain `topSpacing` value, a tall one gets a
   negative `top`, which is what pins it by its *bottom* edge as the page
   scrolls, keeping the Send button and Related Posts in view. The `top`
   values below are the pre-JS/no-JS fallback only. */
@media (min-width: 1024px) {
    .single-post-sidebar #sidebar {
        position: sticky;
        top: var(--wt-sidebar-top, var(--wt-sp-md));
    }

    /* WP core's own fixed admin-bar height at ≥783px viewports — the header
       itself is not fixed/sticky (verified live: it scrolls away normally),
       so only the always-fixed admin bar needs compensating here. The JS
       bakes this same offset into --wt-sidebar-top once it runs. */
    body.admin-bar .single-post-sidebar #sidebar {
        top: var(--wt-sidebar-top, calc(32px + var(--wt-sp-md)));
    }
}

.sharing-buttons {
    display: inline-block;
    width: calc(100% - 50px);
    margin: 20px 25px;
}

.sharing-buttons .sharing-button {
    width: 25px;
    height: 25px;
    margin: 0 10px 0 0;
    display: inline-block;
    text-align: center;
    line-height: 25px;
    color: #97a9b5;
}

.sharing-buttons .sharing-button:hover {
    color: var(--wt-black);
}

.sharing-buttons .sharing-button i {
    display: inline-block;
    line-height: 25px;
    text-align: center;
    font-size: 20px;
    width: 100%;
    height: 100%;
}

.sharing-buttons .sharing-button i::before {
    display: inline-block;
    width: 100%;
    line-height: 25px;
    text-align: center;
}

blockquote.custom {
    z-index: 1;
    overflow: visible;
    margin: 0 0 35px 0;
    padding: 67px 87px;
}

blockquote.custom .dashicons {
    position: absolute;
    right: 50px;
    bottom: -30px;
    font-size: 100px;
    line-height: 1;
    z-index: 2;
    width: auto;
    height: auto;
    min-width: 50px;
    min-height: 50px;
}

blockquote.custom::after {
    content: none;
    display: none;
}

blockquote.custom .content p:only-child,
blockquote.custom .content p:last-child {
    margin: 0;
}

@media (max-width: 1023px) {
    .single-post-content {
        width: 100%;
        margin-bottom: 40px;
        padding-right: 0;
    }

    .single-post-content .post-tags .tag {
        margin: 0 10px 10px 0;
    }

    .single-post-sidebar {
        width: calc(100% - 42px);
    }

    .single-post-sidebar #sidebar {
        width: 100%;
    }
}

@media (max-width: 767px) {
    blockquote.custom {
        padding: 40px 50px 60px 50px;
    }
}

/* === 1b. Blog content gallery (WP [gallery] shortcode renderer, inc/gallery.php) ===
   Not scoped to .single-post-content — [gallery] can appear in any post_content.
   Slider, not grid (2026-10-06, Жоро's verdict on the grid build): sliders.js's
   initBlogGallerySliders() turns these flat <figure> children into a Swiper
   slider — 1 slide/view below 768px, 2 from 768px up (M1 ladder, decisions.md
   #41), matching wt_gallery_sizes_attr()'s PHP math (inc/gallery.php). The
   .swiper-pagination/.swiper-button-* dot/arrow chrome is styled in
   sliders.css next to the other slider instances; this block only owns the
   renderer's own .wt-gallery__* BEM classes and the no-JS fallback — before
   JS runs (or with JS disabled), .wt-gallery is a horizontal scroll-snap row,
   progressive enhancement with no layout break. */

.wt-gallery {
    margin: 0 0 var(--wt-sp-md) 0;
    padding: 0;
    list-style: none;
}

.wt-gallery:not(.swiper) {
    display: flex;
    gap: calc(2 * var(--wt-sp-md));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.wt-gallery:not(.swiper) .wt-gallery__item {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .wt-gallery:not(.swiper) .wt-gallery__item {
        flex: 0 0 calc(50% - var(--wt-sp-md));
    }
}

.wt-gallery__item {
    margin: 0;
}

.wt-gallery__link {
    display: block;
}

.wt-gallery__link:focus-visible {
    outline: 2px solid var(--wt-red);
    outline-offset: 2px;
}

.wt-gallery__image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
    .wt-gallery__link {
        transition: opacity 0.2s ease;
    }

    .wt-gallery__link:hover {
        opacity: 0.85;
    }
}

.wt-gallery__caption {
    margin: var(--wt-sp-xs) 0 0 0;
    font-size: var(--wt-fs-small);
    text-align: center;
    color: var(--wt-black);
}

@media (max-width: 479px) {
    blockquote.custom {
        padding: 40px 40px 60px 40px;
    }
}


/* === 2. Single project === */

body.single-wt_project .page-title-block {
    padding: 60px 0;
}

body.single-wt_project .page-title-block p {
    margin: 0;
}

body.single-wt_project article.wt_project {
    padding: 50px 0;
    float: left;
    width: 100%;
}

body.single-wt_project .project-data-container {
    align-items: stretch;
}

body.single-wt_project .project-big-thumb {
    width: calc(100% - 407px);
    display: flex;
    align-items: stretch;
}

body.single-wt_project .project-big-thumb a {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

body.single-wt_project .project-data {
    width: 357px;
    background-color: #e9f1f1;
    margin: 0 0 0 50px;
    padding: 35px;
}

body.single-wt_project .project-data .project-data-rows {
    border-bottom: 1px solid #ccc;
    padding: 0 0 12px 0;
    margin: 0 0 12px 0;
}

body.single-wt_project .project-data .project-data-rows:last-child {
    border: 0 none;
    margin: 0;
    padding: 0;
}

body.single-wt_project .project-data-row {
    margin: 0;
    line-height: 1.4;
    word-break: break-word;
}

body.single-wt_project .project-data .project-data-rows ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: block;
    width: 100%;
    float: left;
}

body.single-wt_project .project-data .project-data-rows ul li {
    display: block;
    width: 100%;
    float: left;
}

/* Card grid on `gap` (M1c): column-gap = 2 × the old 25px thumb margin,
   no container bleed — thumbs sit flush with the content edge. */
body.single-wt_project .project-gallery-container {
    width: 100%;
    margin: 50px 0 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: calc(2 * var(--wt-sp-md));
}

body.single-wt_project .project-gallery-container a {
    margin: 0 0 50px 0;
}

body.single-wt_project .project-gallery-container a img {
    width: 100%;
    height: auto;
    float: left;
}

body.single-wt_project .project-text-content:empty {
    display: none;
}

body.single-wt_project .project-text-content {
    padding-bottom: 25px;
}

body.single-wt_project .project-text-content .video-container {
    margin: 0 0 50px 0;
    padding-top: 0;
}

body.single-wt_project .project-text-content .video-container:only-of-type,
body.single-wt_project .project-text-content .video-container:last-of-type {
    margin: 0 0 25px 0;
}

@media (max-width: 1023px) {
    body.single-wt_project .project-big-thumb {
        width: calc(50% - 12.5px);
    }

    body.single-wt_project .project-data {
        width: calc(50% - 12.5px);
        margin: 0 0 0 25px;
    }

    /* 2 columns with the halved 25px gutter (was 12.5px margins each side) */
    body.single-wt_project .project-gallery-container {
        width: 100%;
        margin: 25px 0 0 0;
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--wt-sp-md);
    }

    body.single-wt_project .project-gallery-container a {
        margin: 0 0 25px 0;
    }

    body.single-wt_project .project-text-content {
        padding-bottom: 0;
    }

    body.single-wt_project .project-text-content .video-container {
        margin: 0 0 25px 0;
    }

    body.single-wt_project .see-all-projects {
        margin-top: 25px;
    }
}

@media (max-width: 767px) {
    body.single-wt_project .project-big-thumb {
        width: 100%;
        height: 400px;
    }

    body.single-wt_project .project-data {
        width: 100%;
        margin: 0;
    }
}

@media (max-width: 479px) {
    /* single column; the old version kept a 12.5px inset each side (width
       100% − 25px inside the half-bleed) — an accident of the margin-cancel
       mechanism, now simply flush */
    body.single-wt_project .project-gallery-container {
        grid-template-columns: 1fr;
    }
}


/* === 3. Single event === */

.single-event-sidebar {
    width: 33.3%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 100px;
    padding: 0;
}

.single-event-sidebar #sidebar {
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 100%;
}

.single-event-sidebar .widget-title {
    color: var(--wt-black);
    font-weight: 900;
    line-height: 1;
    margin: 5px 0 20px 0;
    text-transform: capitalize;
    letter-spacing: 0;
}

.single-event-sidebar .widget-title::after {
    content: none;
    display: none;
}

.widget.event-sidebar-booking-form {
    padding: 25px;
    background: var(--wt-white);
    margin-bottom: 25px;
}

.widget.event-sidebar-booking-form .widget-title {
    font-family: var(--wt-font-heading);
    font-size: 20px;
    margin: 0 0 10px 0;
}

.widget.event-sidebar-booking-form .wpcf7 p {
    margin: 0;
}

.widget.event-sidebar-booking-form .wpcf7 label {
    margin: 0 0 20px 0;
}

.widget.event-sidebar-booking-form .wpcf7 label .title {
    line-height: 1;
    display: block;
    width: 100%;
    float: left;
    margin: 0 0 10px 0;
}

.widget.event-sidebar-booking-form .wpcf7 label .wpcf7-form-control-wrap input[type="text"],
.widget.event-sidebar-booking-form .wpcf7 label .wpcf7-form-control-wrap input[type="email"],
.widget.event-sidebar-booking-form .wpcf7 label .wpcf7-form-control-wrap input[type="date"] {
    line-height: 20px;
    padding: 10px;
}

.widget.event-sidebar-booking-form .wpcf7 input[type="submit"] {
    padding: 9px 60px;
}

.sticky-sidebar-area {
    position: sticky;
    top: 120px;
}

@media (max-width: 1023px) {
    .single-event-sidebar {
        width: 100%;
        margin-bottom: 0;
    }

    .single-event-sidebar #sidebar {
        width: 100%;
    }

    .widget.event-sidebar-booking-form {
        margin-bottom: 0;
    }
}


/* === 4. Single testimonial === */

.testimonial-data {
    width: 50%;
    margin: 0 50% 0 0;
    background-color: #e9f1f1;
    padding: 50px;
    text-align: left;
}

.testimonial-data.featured-image-no {
    width: 100%;
    margin: 0;
}

.testimonial-data h3 {
    margin: 90px 0 0 0;
}

.testimonial-data .wt-link {
    margin: 55px 0 30px 0;
}

.testimonial-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 50%;
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    left: 50%;
}

@media (max-width: 767px) {
    .testimonial-data,
    .testimonial-image {
        width: 100%;
        margin: 0;
        position: relative;
        top: unset;
        bottom: unset;
        left: unset;
        right: unset;
        min-height: 400px;
    }

    .testimonial-data h3 {
        margin: 45px 0 0 0;
    }

    .testimonial-data .wt-link {
        margin: 25px 0 0 0;
    }
}

@media (max-width: 479px) {
    .testimonial-data {
        padding: 25px 25px 50px 25px;
    }

    .testimonial-data .wt-link,
    .wt-link.see-all-testimonials {
        width: 100%;
    }
}


/* === 5. Single wall type / product / industry === */

.block-content:last-of-type {
    padding-bottom: 50px;
}

.tabbed-content.industries .related-projects-container {
    margin: 0 0 100px 0;
}

.tabbed-content.industries #resources:not(:empty) {
    margin-bottom: 100px;
}

.tabbed-content.industries #resources .resource-block-container:first-child {
    margin-top: 0;
}

.tabbed-content.industries #products .info-block-container .image img {
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .tabbed-content.industries .related-projects-container {
        margin: 0 0 50px 0;
    }

    .tabbed-content.industries #resources {
        margin-bottom: 50px;
    }
}


/* === 6. Archives === */

/* Card grid on `gap` (M1c): column-gap = 2 × the old 25px box margin, no
   container bleed — boxes sit flush with the content edge at every width.
   The old .full-width-container variant (no bleed, so boxes sat 25px inset
   from the frame on the industries/products archives below 1250px and the
   plain variant matched it below 1250 when the ≤1249 reset dropped the
   bleed) is gone with the mechanism: flush everywhere now. Non-box children
   (related-content block h2, the projects archive's #map/facet/.projects-loop
   wrappers, no-results <p>) span the full row. */
.archive-boxes-container {
    margin: 0;
    width: 100%;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(2 * var(--wt-sp-md));
    float: left;
}

.archive-boxes-container > :not(.single-archive-box) { grid-column: 1 / -1; }

.archive-boxes-container .single-archive-box {
    height: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 25px 0;
    text-align: center;
    position: relative;
}

.archive-boxes-container .single-archive-box a {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    text-decoration: none;
    padding: 20px;
}

.archive-boxes-container .single-archive-box a::after {
    content: "";
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}

.archive-boxes-container .single-archive-box .archive-box-title {
    color: var(--wt-white);
    margin: 0;
    font-size: 20px;
    line-height: 1;
    z-index: 10;
    text-shadow: 2px 2px 4px rgb(40, 40, 40);
    transition: all 0.3s ease-out;
    text-transform: uppercase;
    font-weight: 900;
    font-family: var(--wt-font-heading);
}

.archive-boxes-container .single-archive-box:hover .archive-box-title {
    transform: scale(1.15);
}

.archive-boxes-container.bigger-titles .single-archive-box .archive-box-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -1px;
}

/* Testimonials card — shared by archive-wt_testimonial.php and the
   related-content-manual.php wt_testimonial variant (both render
   template-parts/testimonial-card.php). Markup differs between the two
   call sites by one nesting level: the archive wraps the loop in a
   .content-container div (which spans the grid's full row and repeats its
   tracks), the related-content block emits cards as direct children.
   Card grid on `gap` (M1c): column-gap = 2 × the old 25px card margin.
   This replaces the whole bleed family here — the base bleed, the
   .full-width-container frame override and the M1b ≥1300px gate (cards sat
   25px inset below 1300px, Жоро's screenshots) are all gone: on the archive
   the nested .content-container is just a normal content container (same
   frame as the page title's), and the cards are flush with it at every
   width. Equal-height cards + bottom-anchored band use flex column layout
   inside each card, as before. */
.testimonials-boxes-container {
    margin: 0;
    width: 100%;
    padding: 100px 0 50px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: calc(2 * var(--wt-sp-md));
    align-items: stretch;
}

/* Non-card children (related-content h2, the archive's .content-container
   wrapper, no-results <p>) span the full row. */
.testimonials-boxes-container > :not(.single-archive-box) { grid-column: 1 / -1; }

.testimonials-boxes-container.full-width-container > .content-container {
    display: grid;
    grid-template-columns: inherit;
    column-gap: inherit;
    align-items: stretch;
}

.testimonials-boxes-container .single-archive-box {
    display: flex;
    flex-direction: column;
    margin: 0 0 50px 0;
    overflow: hidden;
    box-shadow: 0 0 12px rgba(0, 0, 0, .15);
    position: relative;
}

.testimonials-boxes-container .single-archive-box .image-box {
    flex-shrink: 0;
    height: 210px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Prod effective: the Customizer overrides the old 17px-italic rule to
   18px/20px upright Montserrat with a 60px min-height (equal title rows). */
.testimonials-boxes-container .single-archive-box h6 {
    margin: 0;
    padding: var(--wt-sp-sm) var(--wt-sp-md);
    border-bottom: 1px solid #707070;
    color: var(--wt-dark);
    font-size: 18px;
    line-height: 20px;
    min-height: 60px;
    font-style: normal;
    font-weight: 700;
    text-transform: none;
}

.testimonials-boxes-container .single-archive-box .excerpts { padding: 20px 25px; }
.testimonials-boxes-container .single-archive-box .excerpts p { margin: 0; }

.testimonials-boxes-container .single-archive-box .read-more {
    display: inline-block;
    padding: 0 25px 20px 25px;
    color: var(--wt-black);
    text-decoration: underline;
}

.testimonials-boxes-container .single-archive-box .read-more:hover { color: var(--wt-red); }

/* M7 (mobile-audit F-13): "Read more" is the card's only link — stretch it
   across the whole card (.single-archive-box, now position:relative above)
   instead of leaving only the ~24px text line tappable. */
.testimonials-boxes-container .single-archive-box .read-more::after {
    content: "";
    position: absolute;
    inset: 0;
}

.testimonials-boxes-container .single-archive-box .testimonial-title {
    margin-top: auto;
    padding: 20px 25px;
    background-color: #2c2e3d;
    color: var(--wt-white);
    text-transform: uppercase;
}

.testimonials-boxes-container .single-archive-box .testimonial-title p { margin: 0; }

@media (max-width: 1249px) {
    .testimonials-boxes-container {
        padding: 50px 0;
    }
}

@media (max-width: 1023px) {
    .testimonials-boxes-container { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .testimonials-boxes-container { grid-template-columns: 1fr; }
}

/* Posts pagination — the_posts_pagination() on index.php / archive.php.
   The old theme used a FacetWP load-more on these listings, so there is no
   legacy rule set to port; styled to match the theme's wt-link button
   conventions (red outline, filled current state). */

.navigation.pagination {
    display: block;
    width: 100%;
    clear: both;
    margin: 0 0 50px 0;
    text-align: center;
}

.navigation.pagination .nav-links {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* M7 (mobile-audit F-12): grown from 40x38 to a 44px box — page numbers are
   a standalone control (CLAUDE.md tap-target rule), and the prompt that
   asked for this fix explicitly allows them to grow rather than hiding the
   extra hit area, unlike the invisible-overlay treatment used elsewhere. */
.navigation.pagination .page-numbers {
    display: inline-block;
    min-width: 44px;
    min-height: 44px;
    padding: 11px 14px;
    line-height: 20px;
    border: 1px solid var(--wt-red);
    color: var(--wt-red);
    background-color: var(--wt-white);
    text-decoration: none;
    transition: all 0.3s ease;
}

.navigation.pagination a.page-numbers:hover,
.navigation.pagination .page-numbers.current {
    color: var(--wt-white);
    background-color: var(--wt-red);
}

.navigation.pagination .page-numbers.dots {
    border: 0 none;
    background: transparent;
    color: var(--wt-gray-text);
}

/* Related Content block (acf-blocks/related-content-manual.php) —
   ported Step 20.14 from old theme style.css:3043-3061. The wt_project
   variant reuses .single-archive-box but with the projects-loop structure
   (bg image on a .background-image child, .title-container strip at the
   bottom) — without these overrides the archive-boxes base rules above
   leave a grey box with a top-left title and an invisible zero-height
   image div. Emitted on wt_industry singles (#about + #projects tabs)
   and ACF pages. */

/* !important: old theme specificity override vs .margin-bottom-* utilities */
/* M1c: the headings' old `padding: 0 25px` existed to realign them with
   cards that sat 25px inset (own margins) inside a bled container; the card
   grids are flush now, so the headings are too. */
.info-block.related-content.post { margin-bottom: 50px !important; }
.info-block.related-content.post > h2 { padding: 0; }
.info-block.related-content.wt_wall_type { margin-bottom: 50px !important; }
.info-block.related-content.wt_wall_type > h2 { padding: 0; margin-bottom: 0; }
.info-block.related-content.wt_wall_type .single-item .item-title,
.info-block.related-content.wt_industry .single-archive-box .archive-box-title { text-decoration: underline; }
.info-block.related-content.wt_industry { margin-bottom: 50px !important; }
.info-block.related-content.wt_industry > h2 { padding: 0; margin-bottom: 0; }

.info-block.related-content.wt_project { margin-bottom: 50px !important; }
.info-block.related-content.wt_project > h2 { padding: 0; margin-bottom: 0; }

/* Project cards run 3-up in the related-content grid */
.info-block.related-content.wt_project { grid-template-columns: repeat(3, 1fr); }

.info-block.related-content.wt_testimonial { margin-bottom: 50px !important; }
/* The testimonial block IS the flex container (.testimonials-boxes-container),
   so the h2 is a flex item and nothing collapses/separates it from the cards
   (their margin-top is 0). Prod: 25px below the heading. The other variants
   get their gap from the cards' own 25px margin. */
.info-block.related-content.wt_testimonial > h2 { padding: 0; margin-bottom: 25px; }

.info-block.related-content.wt_project .single-archive-box {
    height: 210px;
    overflow: hidden;
}

.info-block.related-content.wt_project .single-archive-box a {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.info-block.related-content.wt_project .single-archive-box .title-container {
    position: absolute;
    bottom: 0;
    top: unset;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 5;
}

.info-block.related-content.wt_project .single-archive-box .title-container::after {
    content: "";
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
}

.info-block.related-content.wt_project .single-archive-box .title-container .title {
    font-size: 17px;
    text-transform: none;
    font-weight: 500;
    line-height: 1.2;
    padding: 15px;
    position: relative;
    margin: 0;
    color: var(--wt-white);
    text-align: left;
    z-index: 2;
}

.info-block.related-content.wt_project .single-archive-box .background-image {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.5s ease-out;
}

.info-block.related-content.wt_project .single-archive-box:hover .background-image {
    transform: scale(1.1, 1.1);
}

.info-block.related-content.wt_project .single-archive-box:hover a .title {
    transform: none;
    transition: all 0.3s ease-out;
}

/* M7 (archive cards on phones): this 3-up override had no tablet/phone
   step of its own, unlike every sibling related-content variant
   (testimonials, industries, wall types all go 3 -> 2 -> 1 via their
   shared container classes) — it jumped straight from 3 columns to 1,
   leaving 3 narrow fixed-height columns (and clipped titles) between
   480-1023px. Same ladder as .testimonials-boxes-container. Desktop
   (>=1024px) unchanged. */
@media (max-width: 1023px) {
    .info-block.related-content.wt_project { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .info-block.related-content.wt_project { grid-template-columns: 1fr; }
}

/* Projects archive — FacetWP map facet's own "Enable map filtering" opt-in
   button (id="map" precedes the facet div in archive-wt_project.php).
   Production hides it: style.css .facetwp-facet.facetwp-type-map
   .facetwp-map-filtering{display:none}. It only toggles filter-by-map-bounds;
   hiding it just means that mode never activates. */
#map + .facetwp-facet.facetwp-type-map .facetwp-map-filtering {
    display: none;
}

/* Projects archive — FacetWP sidebar */

.projects-loop .projects-loop-container {
    width: calc(100% - 425px);
    display: block;
    float: left;
    margin: 75px 0 0 0;
}

/* Card grid on `gap` (M1c): column-gap = 2 × the old 25px card margin, no
   more negative-margin bleed. FacetWP re-renders this div's contents via
   AJAX, so the grid lives on the class, not on anything PHP-added. */
.projects-loop .projects-loop-container .margin-fix {
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(2 * var(--wt-sp-md));
}

.projects-loop .projects-loop-container .single-archive-box {
    height: 210px;
    margin: 0 0 50px 0;
    overflow: hidden;
}

.projects-loop .projects-loop-container .single-archive-box .background-image {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.5s ease-out;
}

.projects-loop .projects-loop-container .single-archive-box a {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.projects-loop .projects-loop-container .single-archive-box a::after {
    content: none;
    display: none;
}

.projects-loop .projects-loop-container .single-archive-box .title-container {
    position: absolute;
    bottom: 0;
    top: unset;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 5;
}

.projects-loop .projects-loop-container .single-archive-box .title-container::after {
    content: "";
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    bottom: 0;
    z-index: 1;
}

.projects-loop .projects-loop-container .single-archive-box .title-container .title {
    font-size: 17px;
    text-transform: none;
    font-weight: 500;
    line-height: 1.2;
    padding: 15px;
    position: relative;
    margin: 0;
    color: var(--wt-white);
    text-align: left;
    z-index: 2;
}

.projects-loop .projects-loop-container .single-archive-box:hover .background-image {
    transform: scale(1.10);
}

.projects-loop .projects-loop-sidebar {
    width: calc(425px - 25px);
    display: block;
    float: right;
    margin: 75px 0 75px 25px;
}

.projects-loop .projects-loop-sidebar .widget .widget-title {
    line-height: 1;
    text-align: left;
    letter-spacing: -1px;
    color: var(--wt-black);
    font-size: 28px;
    font-weight: 900;
    font-family: var(--wt-font-heading);
    text-transform: uppercase;
    margin: 0 0 20px 0;
}

.projects-loop .projects-loop-sidebar .widget.title-with-less-margin .widget-title {
    margin: 0 0 15px 0;
}

.projects-loop .projects-loop-sidebar .widget .widget-title::after {
    content: none;
    display: none;
}

.projects-loop .projects-loop-sidebar .widget .facetwp-type-search {
    margin: 0;
    width: 100%;
}

.projects-loop .projects-loop-sidebar .widget .facetwp-type-search .facetwp-input-wrap {
    width: 100%;
    position: relative;
}

.projects-loop .projects-loop-sidebar .widget .facetwp-type-search .facetwp-input-wrap input.facetwp-search {
    width: 100%;
    height: auto;
    background-color: #e8f1f1;
    line-height: 45px;
    border: 1px solid #babebe;
    padding: 0 50px 0 10px;
    border-radius: 3px;
}

.facetwp-load-more {
    transition: all 0.6s ease;
}

.projects-loop .projects-loop-container .facetwp-facet-load_more_projects {
    display: block;
    width: 100%;
    float: left;
    text-align: center;
    position: relative;
    margin: 0 0 75px 0;
}

.projects-loop .projects-loop-container .projects-loop-no-results {
    width: calc(100% - 50px);
    display: block;
    float: left;
    margin: 0 25px 50px 20px;
}

@media (max-width: 1249px) {
    /* Pre-M1c this reset also dropped the container's bleed below 1250px;
       the bleed is gone, but the padding: 0 part is kept because it's what
       currently neutralizes the archive templates' .padding-top-75 /
       .padding-bottom-75 utilities below the container breakpoint. */
    .archive-boxes-container:not(.projects-loop) {
        padding: 0;
    }
}

@media (max-width: 1023px) {
    .projects-loop .projects-loop-container .margin-fix {
        grid-template-columns: 1fr;
    }

    .projects-loop .projects-loop-container .single-archive-box {
        height: 300px;
        margin: 0 0 25px 0;
    }

    /* M7/M8 (F-7, mobile-audit): below the laptop step the sidebar/results
       pair drops from opposite-side floats to normal block flow, so DOM
       order (sidebar markup first, see archive-wt_project.php) puts the
       filters above the results. M8: always open, no collapse toggle. */
    .projects-loop .projects-loop-container {
        width: 100%;
        float: none;
        margin: 20px 0 0 0;
    }

    .projects-loop .projects-loop-sidebar {
        width: 100%;
        float: none;
        margin: 0 0 20px 0;
    }
}

@media (max-width: 767px) {
    .archive-boxes-container { grid-template-columns: 1fr; }

    .archive-boxes-container .single-archive-box {
        margin: 0 0 20px 0;
    }

    .projects-loop .projects-loop-container .single-archive-box {
        height: 210px;
    }

    .projects-loop .projects-loop-sidebar .widget .widget-title {
        font-size: 25px;
    }
}

/* Clearfix for the float-based projects layout (loop container floats left,
   sidebar floats right). The old .facetwp-template.margin-fix entry is gone:
   that div is a grid now — no floats to clear, and a ::after on a grid
   container would become a phantom grid item. */
.projects-loop::after,
.projects-loop-container::after {
    display: block;
    content: "";
    clear: both;
}

/* -------------------------------------------------------
   FacetWP custom overrides (projects sidebar)
   ------------------------------------------------------- */

/* Reduce default facet margin */
.projects-loop-sidebar .facetwp-facet {
    margin-bottom: 0;
}

/* Slider: red connect bar, dark handles, thin track */
.projects-loop-sidebar .noUi-target {
    background: #babebe;
    border: 0 none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 20px 0;
}

.projects-loop-sidebar .noUi-horizontal {
    height: 1px;
}

.projects-loop-sidebar .noUi-connect {
    background: var(--wt-red);
}

.projects-loop-sidebar .noUi-handle {
    border: 0 none;
    border-radius: 50%;
    background: #000;
    cursor: default;
    box-shadow: none;
}

.projects-loop-sidebar .noUi-horizontal .noUi-handle {
    width: 14px;
    height: 14px;
    right: -7px;
    top: -6px;
}

.projects-loop-sidebar .noUi-handle::after {
    display: none;
}

/* M7 (mobile-audit F-7/F-13): the 14px handle is hard to grab on a touch
   screen. Keep the visual circle modest and grow the hit area with an
   invisible ::before — a child of .noUi-handle, which noUiSlider already
   binds its pointer/drag listeners to, so the enlarged area still drags
   the handle. 15px on each side brings 14px up to the 44px tap-target
   floor without changing what's painted. */
.projects-loop-sidebar .noUi-handle::before {
    display: block;
    content: "";
    position: absolute;
    inset: -15px;
}

/* Slider layout: label left, value right */
.projects-loop-sidebar .facetwp-type-slider {
    display: inline-block;
    width: 100%;
}

.projects-loop-sidebar .facetwp-type-slider > div:not(.facetwp-slider-wrap) {
    width: 50%;
    float: right;
    line-height: 1;
    text-align: right;
}

.projects-loop-sidebar .facetwp-slider-label {
    width: 50%;
    float: left;
    line-height: 1;
    text-align: left;
}

.projects-loop-sidebar .facetwp-slider-reset {
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
    line-height: 1;
    float: right;
}

.projects-loop-sidebar .facetwp-slider-wrap {
    padding: 0 7px;
    display: block;
    width: 100%;
    float: left;
}

/* Checkbox expand toggle */
.projects-loop-sidebar .facetwp-checkbox .facetwp-expand {
    float: right;
}

/* -------------------------------------------------------
   FacetWP checkbox lists — scrollable with max-height
   ------------------------------------------------------- */

/* Constrain checkbox lists to ~5 visible items with scroll */
.projects-loop-sidebar .facetwp-type-checkboxes {
    max-height: 140px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

/* Custom scrollbar styling (webkit) */
.projects-loop-sidebar .facetwp-type-checkboxes::-webkit-scrollbar {
    width: 10px;
}

.projects-loop-sidebar .facetwp-type-checkboxes::-webkit-scrollbar-track {
    background: transparent;
}

.projects-loop-sidebar .facetwp-type-checkboxes::-webkit-scrollbar-thumb {
    background: #babebe;
    border-radius: 3px;
}

/* Firefox scrollbar */
.projects-loop-sidebar .facetwp-type-checkboxes {
    scrollbar-width: auto;
    scrollbar-color: #babebe transparent;
}

/* Checkbox items: tighter spacing */
.projects-loop-sidebar .facetwp-checkbox {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 2px;
}

/* Counter styling */
.projects-loop-sidebar .facetwp-counter {
    display: none;
}

/* CSS-only checkbox indicator (replaces PNG) */
.projects-loop-sidebar .facetwp-checkbox {
    background-image: none;
    padding-left: 22px;
    position: relative;
}

.projects-loop-sidebar .facetwp-checkbox::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: #c8ced1;
    border: none;
    border-radius: 1px;
}

.projects-loop-sidebar .facetwp-checkbox.checked::before {
    background: var(--wt-red);
}

@media (max-width: 479px) {
    .archive-boxes-container .single-archive-box:only-of-type,
    .archive-boxes-container .single-archive-box:last-child {
        margin: 0;
    }
}


/* === 7. Resources / downloads === */

.resource-block-container {
    width: 100%;
    display: block;
    float: left;
    padding: 50px 50px 0 50px;
    position: relative;
}

.resource-block-container.width-auto {
    width: auto;
}

.resource-block-container .title {
    font-size: 28px;
    margin: 0 0 50px 0;
    line-height: 1;
    letter-spacing: -1px;
}

/* Card grid on `gap` (M1c): column-gap = 2 × the old 25px card margin, no
   more negative-margin bleed. Overrides the .flex-container utility the
   markup still carries. */
.resource-block-container .margin-fix {
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: calc(2 * var(--wt-sp-md));
    align-items: start;
}

.resource-block-container .single-file-container {
    border: 0 none;
    padding: 0;
    margin: 0 0 100px 0;
}

.resource-block-container .single-file-container .file-thumb {
    margin: 0 0 25px 0;
}

.resource-block-container .single-file-container .file-thumb img {
    width: 100%;
    height: auto;
    border: 0 none;
}

.resource-block-container .single-file-container .file-name,
.single-file-container .file-name {
    margin: 0 0 20px 0;
    text-align: center;
    font-size: 16px;
    letter-spacing: 0.8px;
    font-weight: 700;
    text-transform: none;
    color: var(--wt-dark);
}

/* [download] shortcode grid — spacing only, scoped so it never touches
   the shared .single-file-container/.file-name rules used by [resources] */
.download-grid,
.download-grid-single {
    margin-bottom: var(--wt-sp-3xl); /* 60px — decisions.md #36 adoption candidate */
}

/* Grid layout (own namespace — not .columns-content, which is the ACF block).
   Mobile: one column. ≥768px: --cols-N sets the cell width. --cols-12 is
   deliberately unstyled (stays one column), as the old theme's
   undefined .vc_col-md-1 did. */
.download-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: -15px;
    margin-right: -15px;
}

.download-grid__cell {
    box-sizing: border-box;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 768px) {
    /* Prod (/downloads-acf): 30px between wrapped rows from 768px up, none
       when stacked. */
    .download-grid { row-gap: var(--wt-sp-lg); }
    .download-grid--cols-1 > .download-grid__cell { flex-basis: 100%;       width: 100%;       max-width: 100%; }
    .download-grid--cols-2 > .download-grid__cell { flex-basis: 50%;        width: 50%;        max-width: 50%; }
    .download-grid--cols-3 > .download-grid__cell { flex-basis: 33.33333%;  width: 33.33333%;  max-width: 33.33333%; }
    .download-grid--cols-4 > .download-grid__cell { flex-basis: 25%;        width: 25%;        max-width: 25%; }
    .download-grid--cols-6 > .download-grid__cell { flex-basis: 16.66667%;  width: 16.66667%;  max-width: 16.66667%; }
}

.download-grid .single-file-container .file-thumbnail,
.download-grid-single .single-file-container .file-thumbnail {
    margin-bottom: 20px;
}

.download-grid .single-file-container .file-name,
.download-grid-single .single-file-container .file-name {
    margin-bottom: 15px;
}

.resource-block-container .single-file-container .file-download {
    padding: 15px;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.resource-block-container .single-file-container img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
}

.resource-block-container.presentations-block,
.resource-block-container.manuals-block,
.resource-block-container.certificates-block,
.resource-block-container.active-entertainment-block {
    margin-top: 100px;
}

@media (max-width: 767px) {
    .resource-block-container.presentations-block,
    .resource-block-container.manuals-block,
    .resource-block-container.certificates-block,
    .resource-block-container.active-entertainment-block {
        margin-top: 50px;
    }

    /* 2 columns with the old 15px-margin gutter (2 × 15px = 30px) */
    .resource-block-container .margin-fix {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 30px;
    }

    .resource-block-container .single-file-container {
        margin: 0 0 100px 0;
    }
}

@media (max-width: 479px) {
    /* single column; the old version kept a 15px inset each side (an
       accident of the margin-cancel mechanism) — now flush */
    .resource-block-container .margin-fix {
        grid-template-columns: 1fr;
    }

    .resource-block-container .single-file-container {
        margin: 0 0 50px 0;
    }

    .resource-block-container {
        padding: 25px 25px 0 25px;
    }

    .resource-block-container .title {
        margin: 0 0 5px 0;
        font-size: 24px;
        line-height: 29px;
    }
}


/* === 8. FAQ === */

.faq-list {
    margin-bottom: 80px;
}

.faq-question {
    cursor: pointer;
    font-weight: 700;
    padding: 15px 0;
    border-bottom: 1px solid var(--wt-gray-border);
}

.faq-answer {
    padding: 15px 0;
    display: none;
}

.faq-answer.active {
    display: block;
}


/* === 9. Focus text and feature blocks === */

.focus-text {
    font-size: 30px;
    font-family: var(--wt-font-heading);
    margin-bottom: 20px;
    line-height: normal;
    border-left: 4px solid var(--wt-red);
    padding-left: 40px;
}

.focus-text.focus-text-small {
    font-size: 20px;
}

.feature-block {
    width: calc(50% - 30px);
    margin: 0 25px 25px 0;
    height: auto;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
    background-color: var(--wt-white);
    padding: 20px;
    min-height: 200px;
}

.floatleft {
    clear: left;
}

@media (max-width: 767px) {
    .feature-block {
        width: 100%;
        margin: 0 0 25px 0;
    }
}


/* === 10. Comparison table === */

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 0.75em;
}

.comparison-table th {
    background-color: var(--wt-dark-bg);
    color: var(--wt-white);
    padding: 10px;
    border: 1px solid #ccc;
}

.comparison-table td {
    padding: 8px;
    border: 1px solid #ccc;
}

.comparison-table td:first-child {
    text-align: left;
    font-weight: bold;
    background-color: var(--wt-light-bg);
}

.comparison-table .yes {
    background-color: #d4edda;
    color: #155724;
    font-weight: bold;
}

.comparison-table .no {
    background-color: #fce4d6;
    color: #cc9999;
    font-weight: bold;
}


/* === 11. Leasing options and store footer === */

ul.leasing-options-list {
    list-style: none;
    padding: 0;
}

ul.leasing-options-list li {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--wt-red);
}

ul.leasing-options-list h4 {
    margin: 0 0 10px 0;
}

.store-footer {
    margin: 40px 0;
    display: block;
    font-weight: bold;
    font-size: 1.75em;
    line-height: normal;
    font-family: var(--wt-font-heading);
}


/* === 13. Contact page tap targets === */

/* M7 (contact-acf-REPORT C-3): /contact-us-acf/'s dense contact columns
   put 45 mailto: + 22 tel: links at ~23px tall — these sit in standalone
   contact rows, not flowing prose (CLAUDE.md tap-target exemption doesn't
   apply). Padding + an equal negative margin grows the tap target without
   moving any text — scoped to this one page via the slug body class
   (inc/setup.php), not a hardcoded post ID (CLAUDE.md "Never" list), so it
   doesn't touch tel:/mailto: links elsewhere (e.g. inside real prose on
   other ACF pages). */
.page-contact-us-acf .columns-content a[href^="tel:"],
.page-contact-us-acf .columns-content a[href^="mailto:"] {
    display: inline-block;
    padding: 10px 0;
    margin: -10px 0;
}