/*
 * Responsive frame corrections kept separately while the legacy site.css
 * remains encoded as Windows-1250.
 */

/* The upper capitals are already part of motiv.png. */
body.kweb-v4 .kweb-col {
    top: calc(var(--arch-h) - var(--overlap-arch));
}

/* Slide the repeating shaft slightly underneath the arch image. */
body.kweb-v4 .kweb-col-body {
    top: 0;
    bottom: var(--cap-bottom-h);
}

/* Disable the temporary alignment guides from site.css. */
body.kweb-v4 .kweb-arch,
body.kweb-v4 .kweb-col,
body.kweb-v4 .kweb-col-body,
body.kweb-v4 .kweb-col-bottom,
body.kweb-v4 .kweb-foot,
body.kweb-v4 .kweb-foot-layer,
body.kweb-v4 .kweb-foot-center {
    outline: none !important;
}

body.kweb-v4 .kweb-arch,
body.kweb-v4 .kweb-col,
body.kweb-v4 .kweb-foot,
body.kweb-v4 .kweb-foot-layer {
    background-color: transparent !important;
}

/* Harmonized lower frame variants; original PNG files remain untouched. */
body.kweb-v4 .kweb-col-left .kweb-col-bottom {
    background-image: url("../images/kweb/v3/leftfoot-harmonized.png");
}

body.kweb-v4 .kweb-col-right .kweb-col-bottom {
    background-image: url("../images/kweb/v3/rightfoot-harmonized.png");
}

body.kweb-v4 .kweb-foot-center {
    background-image: url("../images/kweb/v3/foot-rail-tile.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
}

/*
 * The rail belongs behind the column bases. This removes the horizontal cut
 * that previously ran across the middle of both columns.
 */
body.kweb-v4 .kweb-foot-layer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--foot-h);
    pointer-events: none;
    z-index: 30;
}

body.kweb-v4 .kweb-foot {
    z-index: auto !important;
}

/* Quiet end caps instead of the dark side pieces baked into the old strip. */
body.kweb-v4 .kweb-foot-center::before,
body.kweb-v4 .kweb-foot-center::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18px;
    pointer-events: none;
}

body.kweb-v4 .kweb-foot-center::before {
    left: 0;
    background: linear-gradient(to right, rgba(91, 64, 35, 0.58), transparent);
}

body.kweb-v4 .kweb-foot-center::after {
    right: 0;
    background: linear-gradient(to left, rgba(91, 64, 35, 0.58), transparent);
}

/* Persistent language switch, visually separate from the category menu. */
body.kweb-v4 .kweb-language-switch {
    position: fixed;
    top: calc(var(--arch-h) * 0.18);
    left: calc(50% + (var(--frame-w) / 2) - var(--col-w) - 88px);
    z-index: 230;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid rgba(86, 61, 27, 0.22);
    border-radius: 999px;
    background: rgba(246, 225, 177, 0.72);
    box-shadow: 0 7px 18px rgba(55, 38, 13, 0.16);
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

body.kweb-v4 .kweb-language-switch button {
    min-width: 38px;
    padding: 4px 9px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #5f4318;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
}

body.kweb-v4 .kweb-language-switch button:hover,
body.kweb-v4 .kweb-language-switch button.is-active {
    color: #fff8e8;
    background: #7a5319;
}

/*
 * Legacy article HTML often contains dimensions copied from Word or the old
 * editor. Keep it from widening the responsive viewport while the stored
 * content is gradually normalized.
 */
body.kweb-v4 .content-html {
    max-width: 100%;
    overflow-wrap: anywhere;
}

body.kweb-v4 .content-html img,
body.kweb-v4 .content-html video,
body.kweb-v4 .content-html iframe {
    max-width: 100% !important;
    height: auto !important;
}

body.kweb-v4 .content-html table {
    max-width: 100% !important;
}

@media (max-width: 720px) {
    body.kweb-v4 .content-html table {
        display: block;
        overflow-x: auto;
    }
}

/* Contextual category menu: modern replacement for the old Office-style bar. */
body.kweb-v4 .kweb-context-menu {
    position: relative;
    z-index: 24;
    width: calc(var(--frame-w) - (2 * var(--col-w)) - 24px);
    margin: 0 auto 12px;
    padding: 6px 9px;
    border: 1px solid rgba(105, 77, 35, 0.20);
    border-radius: 0 0 11px 11px;
    background: linear-gradient(
        to bottom,
        rgba(247, 226, 177, 0.94),
        rgba(232, 205, 151, 0.94)
    );
    box-shadow: 0 4px 9px rgba(60, 42, 12, 0.13);
}

body.kweb-v4 .kweb-context-list,
body.kweb-v4 .kweb-context-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.kweb-v4 .kweb-context-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
}

body.kweb-v4 .kweb-context-item {
    position: relative;
}

body.kweb-v4 .kweb-context-item:hover,
body.kweb-v4 .kweb-context-item:focus-within {
    z-index: 40;
}

body.kweb-v4 .kweb-context-row {
    display: flex;
    align-items: stretch;
    min-height: 34px;
    border: 1px solid rgba(92, 67, 28, 0.20);
    border-radius: 7px;
    overflow: hidden;
    background: rgba(255, 248, 224, 0.76);
}

body.kweb-v4 .kweb-context-link,
body.kweb-v4 .kweb-context-sublink {
    color: #3d2c12;
    text-decoration: none;
}

body.kweb-v4 .kweb-context-link {
    display: flex;
    align-items: center;
    padding: 7px 11px;
    font-size: 0.86rem;
}

body.kweb-v4 .kweb-context-link:hover,
body.kweb-v4 .kweb-context-sublink:hover,
body.kweb-v4 .kweb-context-link.is-selected,
body.kweb-v4 .kweb-context-sublink.is-selected {
    color: #6d180e;
    background: rgba(255, 255, 255, 0.60);
}

body.kweb-v4 .kweb-context-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

body.kweb-v4 .kweb-context-expander {
    display: none;
    align-items: center;
    justify-content: center;
    width: 27px;
    margin: 0;
    border-left: 1px solid rgba(92, 67, 28, 0.18);
    color: #6b4c1d;
    cursor: pointer;
    user-select: none;
}

body.kweb-v4 .kweb-context-expander:hover {
    background: rgba(255, 255, 255, 0.64);
}

body.kweb-v4 .kweb-context-sublist {
    display: none;
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    min-width: 190px;
    padding: 5px;
    border: 1px solid rgba(92, 67, 28, 0.30);
    border-radius: 9px;
    background: rgba(244, 222, 174, 0.98);
    box-shadow: 0 8px 17px rgba(60, 42, 12, 0.24);
    z-index: 3;
}

body.kweb-v4 .kweb-context-item:has(.kweb-context-sublist)::after {
    content: "";
    display: none;
    position: absolute;
    left: 0;
    right: -24px;
    top: 100%;
    height: 10px;
    z-index: 2;
}

body.kweb-v4 .kweb-context-sublink {
    display: block;
    padding: 7px 9px;
    border-radius: 6px;
    font-size: 0.84rem;
    white-space: nowrap;
}

body.kweb-v4 .kweb-context-toggle:checked ~ .kweb-context-expander span {
    display: inline-block;
    transform: rotate(180deg);
}

body.kweb-v4 .kweb-context-item:focus-within .kweb-context-sublist,
body.kweb-v4 .kweb-context-item:hover .kweb-context-sublist {
    display: block;
}

body.kweb-v4 .kweb-context-item:focus-within::after,
body.kweb-v4 .kweb-context-item:hover::after {
    display: block;
}

@media (max-width: 720px) {
    body.kweb-v4 .kweb-nav-backdrop {
        display: none;
    }

    body.kweb-v4 .kweb-language-switch {
        top: 16px;
        right: 14px;
        left: auto;
        z-index: 520;
        background: rgba(255, 255, 255, 0.76);
    }

    body.kweb-v4 .kweb-nav-toggle:checked ~ .kweb-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 505;
        background: rgba(35, 28, 17, 0.18);
    }

    body.kweb-v4 .kweb-burger {
        position: relative;
        z-index: 520;
    }

    body.kweb-v4 .kweb-arch-menu {
        z-index: 510;
        width: calc(100vw - 24px);
        right: auto;
        box-sizing: border-box;
    }

    body.kweb-v4 .kweb-arch-menu > div {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
        width: 100%;
    }

    body.kweb-v4 .kweb-arch-menu a {
        width: auto !important;
        max-width: none !important;
    }

    body.kweb-v4:has(#kwebNavToggle:checked) .kweb-context-menu {
        visibility: hidden;
    }

    body.kweb-v4 .kweb-context-menu {
        width: auto;
        margin: 0 12px 12px;
        border-radius: 11px;
    }

    body.kweb-v4 .kweb-context-list {
        display: grid;
        grid-template-columns: 1fr;
    }

    body.kweb-v4 .kweb-context-link {
        flex: 1;
    }

    body.kweb-v4 .kweb-context-expander {
        display: flex;
    }

    body.kweb-v4 .kweb-context-sublist {
        position: static;
        margin: 4px 0 0 12px;
        box-shadow: none;
    }

    body.kweb-v4 .kweb-context-item:hover .kweb-context-sublist {
        display: none;
    }

    body.kweb-v4 .kweb-context-item:focus-within .kweb-context-sublist,
    body.kweb-v4 .kweb-context-row:has(.kweb-context-toggle:checked) + .kweb-context-sublist {
        display: block;
    }
}

/* Database pages */
body.kweb-v4 .kweb-db {
    padding: 18px;
    border: 1px solid rgba(102, 72, 31, 0.22);
    border-radius: 12px;
    background: rgba(250, 232, 189, 0.94);
    box-shadow: 0 5px 15px rgba(72, 48, 17, 0.14);
    color: #2e2415;
}

body.kweb-v4 .kweb-db-header,
body.kweb-v4 .kweb-db-detail-heading {
    margin-bottom: 16px;
}

body.kweb-v4 .kweb-db-detail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

body.kweb-v4 .kweb-db h1 {
    margin: 0;
    color: #6d180e;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    font-weight: 700;
}

body.kweb-v4 .kweb-db-header p:last-child,
body.kweb-v4 .kweb-db-subtitle {
    margin: 5px 0 0;
    color: #66543b;
}

body.kweb-v4 .kweb-db-eyebrow {
    margin: 0 0 4px;
    color: #8b6123;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.kweb-v4 .kweb-db-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

body.kweb-v4 .kweb-db-search-field {
    flex: 1 1 300px;
}

body.kweb-v4 .kweb-db .form-control {
    border-color: rgba(105, 77, 35, 0.30);
    background: rgba(255, 252, 238, 0.94);
    color: #342817;
}

body.kweb-v4 .kweb-db .form-control:focus {
    border-color: #a07028;
    box-shadow: 0 0 0 0.2rem rgba(160, 112, 40, 0.18);
}

body.kweb-v4 .kweb-db-btn-primary,
body.kweb-v4 .kweb-db-btn-secondary {
    border: 1px solid rgba(105, 77, 35, 0.34);
    color: #493414;
    background: linear-gradient(to bottom, #fff8df, #e7c982);
}

body.kweb-v4 .kweb-db-btn-primary:hover,
body.kweb-v4 .kweb-db-btn-secondary:hover {
    border-color: rgba(105, 77, 35, 0.58);
    color: #64170e;
    background: #fff7dc;
}

body.kweb-v4 .kweb-db-summary {
    margin: 8px 0 10px;
    color: #6d5b40;
    font-size: 0.88rem;
}

body.kweb-v4 .kweb-db-table-wrap {
    border: 1px solid rgba(105, 77, 35, 0.20);
    border-radius: 8px;
    background: rgba(255, 252, 238, 0.82);
}

body.kweb-v4 .kweb-db-table {
    margin: 0;
}

body.kweb-v4 .kweb-db-table > thead > tr > th {
    border-bottom-color: rgba(105, 77, 35, 0.28);
    color: #654515;
    background: rgba(226, 194, 126, 0.40);
    white-space: nowrap;
}

body.kweb-v4 .kweb-db-table > tbody > tr > td {
    border-color: rgba(105, 77, 35, 0.13);
}

body.kweb-v4 .kweb-db-table a {
    color: #7b2214;
    font-weight: 600;
}

body.kweb-v4 .kweb-db-table a:hover {
    color: #aa351f;
}

body.kweb-v4 .kweb-db-empty {
    padding: 14px;
    border: 1px solid rgba(160, 112, 40, 0.28);
    border-radius: 8px;
    color: #6d4c1b;
    background: rgba(255, 247, 214, 0.82);
}

body.kweb-v4 .kweb-db-pagination {
    margin: 13px 0 8px;
}

body.kweb-v4 .kweb-db-pagination .page-link {
    border-color: rgba(105, 77, 35, 0.23);
    color: #6f4b18;
    background: rgba(255, 250, 232, 0.92);
}

body.kweb-v4 .kweb-db-pagination .active > .page-link {
    border-color: #946923;
    color: #fffaf0;
    background: #946923;
}

body.kweb-v4 .kweb-db-tabs {
    margin-top: 14px;
    border-bottom-color: rgba(105, 77, 35, 0.28);
}

body.kweb-v4 .kweb-db-tabs .nav-link {
    color: #69491a;
}

body.kweb-v4 .kweb-db-tabs .nav-link.active {
    border-color: rgba(105, 77, 35, 0.28) rgba(105, 77, 35, 0.28) transparent;
    color: #731d12;
    background: rgba(255, 252, 238, 0.94);
}

body.kweb-v4 .kweb-db-tab-content {
    padding: 15px;
    border: 1px solid rgba(105, 77, 35, 0.28);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: rgba(255, 252, 238, 0.94);
}

body.kweb-v4 .kweb-db-tab-content th {
    color: #62471d;
}

body.kweb-v4 .kweb-db-hebrew-epitaph {
    direction: rtl;
    padding: 20px 20px !important;
    border-color: rgba(150, 119, 63, 0.26) !important;
    background: rgba(250, 246, 226, 0.70);
    color: #704800;
    font-family: David, "David Libre", "Noto Serif Hebrew", "SBL Hebrew", "Times New Roman", serif;
    font-size: clamp(1.55rem, 2.45vw, 2.1rem);
    font-weight: 400;
    line-height: 1.36;
    text-align: center;
    letter-spacing: 0;
}

body.kweb-v4 .kweb-db-hebrew-epitaph br {
    display: block;
    content: "";
    margin-bottom: 0;
}

body.kweb-v4 .kweb-db-epitaph-notes {
    display: grid;
    gap: 18px;
    border-color: rgba(150, 119, 63, 0.22) !important;
    background: rgba(255, 252, 238, 0.78);
    white-space: pre-line;
}

body.kweb-v4 .kweb-db-epitaph-notes section {
    max-width: 720px;
}

body.kweb-v4 .kweb-db-epitaph-notes h2 {
    margin: 0 0 8px;
    color: #7a5319;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 720px) {
    body.kweb-v4 .kweb-db {
        padding: 12px;
        border-radius: 9px;
    }

    body.kweb-v4 .kweb-db-search {
        align-items: stretch;
    }

    body.kweb-v4 .kweb-db-search-field {
        flex-basis: 100%;
    }

    body.kweb-v4 .kweb-db-detail-heading {
        display: block;
    }

    body.kweb-v4 .kweb-db-detail-heading .btn {
        margin-top: 10px;
    }

    body.kweb-v4 .kweb-db-tab-content {
        padding: 10px;
    }

    body.kweb-v4 .kweb-db-tab-content th {
        min-width: 150px;
    }
}