/*
 * Shared desktop shell width.
 * Bootstrap 3 caps .container at 1170px. Expand it progressively while
 * preserving the existing 15px viewport gutters, then stop at 1300px.
 */
@media (min-width: 1200px) {
    .container {
        width: calc(100% - 30px);
        max-width: 1300px;
    }

    /* The legacy header adds .jz.container with its own 1400px cap. */
    .navbar .jz.container {
        width: calc(100% - 30px);
        max-width: 1300px;
    }
}

/* Bootstrap 3 pulls .navbar-header 15px outside its container on phones.
 * That made the VoriTools mark touch the viewport edge while the menu button
 * still kept a proper gutter. Restore only the leading gutter so the logo
 * and controls share the same mobile safe area. */
@media (max-width: 767px) {
    .navbar .jz.container > .navbar-header {
        margin-left: 0;
    }
}

/* Compact the top-right locale chooser. The legacy navbar gives every list
 * item a 50px line-height and a 5px bottom margin; both values leak into this
 * independent popover and make four languages nearly 300px tall. */
.kiv-locale-menu > li {
    margin: 0;
    line-height: 1.25;
}

.kiv-locale-menu > li > a {
    min-height: 0;
    padding: 6px 10px;
    line-height: 18px;
}

@media (max-width: 767px) {
    /* Keep a comfortable touch target on phones without restoring the
     * oversized desktop navbar rhythm. */
    .kiv-locale-menu > li > a {
        min-height: 40px;
        padding: 10px 12px;
        line-height: 20px;
    }
}

/*
 * The legacy catalogue used inline-block items.  A translated item that
 * wrapped to two lines made every item on that visual row jump down with it,
 * which left large holes throughout the desktop directory.  Use balanced
 * columns for the catalogue only: it keeps the existing four-column visual
 * language while letting every column flow naturally.
 */
@media (min-width: 1200px) {
    .footer-nav {
        padding-bottom: 8px;
    }

    .footer-nav .list-inline-bg {
        -webkit-column-count: 4;
        column-count: 4;
        -webkit-column-gap: 22px;
        column-gap: 22px;
        margin: 0 0 10px;
        padding: 0 16px 14px;
        line-height: normal;
    }

    .footer-nav .list-inline-bg h3 {
        -webkit-column-span: all;
        column-span: all;
        margin: 0 -16px 8px;
        padding: 11px 16px 9px;
        line-height: 1.25;
    }

    .footer-nav .list-inline-bg li {
        display: block;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 3px 0;
        line-height: 1.45;
        -webkit-column-break-inside: avoid;
        break-inside: avoid-column;
        page-break-inside: avoid;
    }

    .footer-nav .list-inline-bg li span {
        margin-bottom: 0;
        vertical-align: .18em;
    }

    .footer-nav .list-inline-bg li a {
        font-size: 14px;
        line-height: inherit;
    }
}

/* The localized desktop menu has enough room at the 1300px layout cap for
 * a slightly more legible label size without wrapping or touching the globe. */
@media (min-width: 1300px) {
    html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu > li > a {
        font-size: 13.5px;
    }
}

/* Keep the global header readable in every language by grouping the
 * low-frequency calculator, utility, and reference collections under one
 * deliberate "More Tools" menu.  The group headings make the merged list
 * scannable without adding a second navigation row. */
.navbar #top_menu > li.kiv-nav-more > .dropdown-menu.ul-list {
    width: 600px;
    max-height: calc(100vh - 64px);
    overflow-x: hidden;
    overflow-y: auto;
}

.navbar #top_menu > li.kiv-nav-more > .dropdown-menu.ul-list > li.kiv-menu-heading {
    clear: both;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 10px 20px 4px;
    color: #71808b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.25;
    text-transform: uppercase;
}

.navbar #top_menu > li.kiv-nav-more > .dropdown-menu.ul-list > li.kiv-menu-heading:first-child {
    padding-top: 12px;
}

@media (min-width: 1200px) {
    .navbar #top_menu > li.kiv-nav-more > .dropdown-menu {
        right: 0;
        left: auto;
    }

    /* After grouping, keep the categories visually connected to the brand
     * instead of right-aligning a much shorter menu beside the globe. */
    html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar .navbar-collapse {
        justify-content: flex-start;
    }

    html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu {
        margin: 0 42px 0 12px;
        justify-content: flex-start;
    }
}

/* Localized desktop and compact menus turn .ul-list into a CSS grid.  A
 * section heading must span the grid rather than occupy a tool column. */
html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu > li.kiv-nav-more > .dropdown-menu.ul-list > li.kiv-menu-heading {
    grid-column: 1 / -1;
    width: auto;
}

/* The original two-column menus sized themselves from their longest item,
 * while every item stayed on one line. That made technical labels disappear
 * at the right edge. Standard tool menus now use two stable reading columns;
 * their labels may wrap, and a very long menu scrolls within the viewport. */
@media (min-width: 1200px) {
    .navbar #top_menu > li:not(.kiv-nav-webops):not(.kiv-nav-more) > .dropdown-menu.ul-list,
    html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu > li:not(.kiv-nav-webops):not(.kiv-nav-more) > .dropdown-menu.ul-list {
        width: min(680px, calc(100vw - 30px));
        min-width: 0;
        max-height: calc(100vh - 64px);
        overflow-x: hidden;
        overflow-y: auto;
    }

    .navbar #top_menu > li:not(.kiv-nav-webops):not(.kiv-nav-more):hover > .dropdown-menu.ul-list,
    .navbar #top_menu > li:not(.kiv-nav-webops):not(.kiv-nav-more).open > .dropdown-menu.ul-list,
    html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu > li:not(.kiv-nav-webops):not(.kiv-nav-more):hover > .dropdown-menu.ul-list,
    html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu > li:not(.kiv-nav-webops):not(.kiv-nav-more).open > .dropdown-menu.ul-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        height: auto;
    }

    .navbar #top_menu > li:not(.kiv-nav-webops):not(.kiv-nav-more) > .dropdown-menu.ul-list > li,
    html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu > li:not(.kiv-nav-webops):not(.kiv-nav-more) > .dropdown-menu.ul-list > li {
        float: none;
        width: auto;
        min-width: 0;
        height: auto;
    }

    .navbar #top_menu > li:not(.kiv-nav-webops):not(.kiv-nav-more) > .dropdown-menu.ul-list > li.divider,
    html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu > li:not(.kiv-nav-webops):not(.kiv-nav-more) > .dropdown-menu.ul-list > li.divider {
        grid-column: 1 / -1;
        width: auto;
        clear: none;
    }

    .navbar #top_menu > li:not(.kiv-nav-webops):not(.kiv-nav-more) > .dropdown-menu.ul-list > li > a,
    html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu > li:not(.kiv-nav-webops):not(.kiv-nav-more) > .dropdown-menu.ul-list > li > a {
        min-height: 34px;
        height: auto;
        padding: 7px 18px;
        line-height: 1.35;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Menus from Text & Numbers onward open on the right half of the header;
     * align those wide panels to the trigger's right edge so they stay inside
     * the visible desktop canvas. */
    .navbar #top_menu > li:nth-child(n+4):not(.kiv-nav-webops):not(.kiv-nav-more) > .dropdown-menu.ul-list {
        right: 0;
        left: auto;
    }
}

/* Web Ops contains related engineering workflows rather than one undifferentiated
 * legacy list. Four short, named columns preserve the navy/green shell while
 * keeping every label readable at desktop widths. */
@media (min-width: 1200px) {
    .navbar #top_menu > li.kiv-nav-webops > .dropdown-menu.kiv-webops-menu {
        position: fixed;
        top: 50px;
        right: max(15px, calc((100vw - 1300px) / 2));
        left: auto;
        width: min(1040px, calc(100vw - 30px));
        min-width: 0;
        margin: 0;
        padding: 0;
        max-height: calc(100vh - 50px);
        overflow-x: hidden;
        overflow-y: auto;
        border: 1px solid #d5dee3;
        border-radius: 0 0 4px 4px;
        box-shadow: 0 10px 24px rgba(25, 42, 54, .18);
    }

    .navbar #top_menu > li.kiv-nav-webops:hover > .dropdown-menu.kiv-webops-menu,
    .navbar #top_menu > li.kiv-nav-webops.open > .dropdown-menu.kiv-webops-menu {
        display: flex;
    }

    /* Locale fixes previously turned every legacy ul-list into a two-column
     * grid. Keep this purpose-built menu as the four semantic columns above.
     * The extra locale selector intentionally wins over that compatibility
     * layer without affecting any other dropdown. */
    html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu > li.kiv-nav-webops > .dropdown-menu.kiv-webops-menu {
        width: min(1040px, calc(100vw - 30px));
        min-width: 0;
    }

    html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu > li.kiv-nav-webops:hover > .dropdown-menu.kiv-webops-menu,
    html[data-kiv-locale]:not([data-kiv-locale="en"]) .navbar #top_menu > li.kiv-nav-webops.open > .dropdown-menu.kiv-webops-menu {
        display: flex;
        max-height: calc(100vh - 50px);
        overflow-x: hidden;
        overflow-y: auto;
    }

    .navbar #top_menu > li.kiv-nav-webops > .dropdown-menu.kiv-webops-menu > li.kiv-webops-column {
        float: none;
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 15px 0 16px;
    }

    .navbar #top_menu > li.kiv-nav-webops > .dropdown-menu.kiv-webops-menu > li.kiv-webops-column + li.kiv-webops-column {
        border-left: 1px solid #e4eaed;
    }

    .navbar #top_menu > li.kiv-nav-webops .kiv-webops-heading {
        display: block;
        margin: 0 16px 7px;
        padding-bottom: 7px;
        border-bottom: 2px solid #4aca6d;
        color: #60727d;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .07em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .navbar #top_menu > li.kiv-nav-webops .kiv-webops-column > ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .navbar #top_menu > li.kiv-nav-webops .kiv-webops-column > ul > li {
        float: none;
        width: auto;
        min-width: 0;
        height: auto;
        margin: 0;
        padding: 0;
    }

    .navbar #top_menu > li.kiv-nav-webops .kiv-webops-column > ul > li > a {
        display: block;
        min-height: 34px;
        padding: 7px 16px;
        color: #36434b;
        font-size: 13px;
        line-height: 1.35;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .navbar #top_menu > li.kiv-nav-webops .kiv-webops-column > ul > li > a:hover,
    .navbar #top_menu > li.kiv-nav-webops .kiv-webops-column > ul > li > a:focus {
        background: #eff9f2;
        color: #176d34;
        outline: 0;
        text-decoration: none;
    }
}

/* Keep the grouped menu easy to scan in the collapsed navigation too. */
@media (max-width: 1199px) {
    .navbar #top_menu > li.kiv-nav-webops > .dropdown-menu.kiv-webops-menu {
        min-width: 0;
        overflow: visible;
    }

    .navbar #top_menu > li.kiv-nav-webops > .dropdown-menu.kiv-webops-menu > li.kiv-webops-column {
        float: none;
        width: auto;
        height: auto;
        margin: 0;
        padding: 10px 0;
    }

    .navbar #top_menu > li.kiv-nav-webops .kiv-webops-heading {
        display: block;
        margin: 0 15px 5px;
        color: #9ce0ad;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .navbar #top_menu > li.kiv-nav-webops .kiv-webops-column > ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .navbar #top_menu > li.kiv-nav-webops .kiv-webops-column > ul > li {
        float: none;
        width: auto;
        height: auto;
    }

    .navbar #top_menu > li.kiv-nav-webops .kiv-webops-column > ul > li > a {
        display: block;
        padding: 6px 25px;
        color: #d9e3e9;
        line-height: 1.35;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* The old compact breakpoint kept two clipped, non-wrapping catalogue
 * columns on phones.  Keep the same catalogue cards, but let translated
 * labels remain readable: two balanced columns on tablets and one column on
 * phones. */
@media (max-width: 1199px) {
    .footer-nav .list-inline-bg {
        -webkit-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 20px;
        column-gap: 20px;
        margin: 0 0 10px;
        padding: 0 14px 12px;
        line-height: normal;
    }

    .footer-nav .list-inline-bg h3 {
        -webkit-column-span: all;
        column-span: all;
        margin: 0 -14px 7px;
        padding: 10px 14px 8px;
        line-height: 1.25;
    }

    .footer-nav .list-inline-bg li {
        display: block;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 3px 0;
        line-height: 1.45;
        white-space: normal;
        overflow: visible;
        -webkit-column-break-inside: avoid;
        break-inside: avoid-column;
        page-break-inside: avoid;
    }

    .footer-nav .list-inline-bg li span {
        margin-bottom: 0;
        vertical-align: .18em;
    }

    .footer-nav .list-inline-bg li a {
        font-size: 14px;
        line-height: inherit;
    }
}

@media (max-width: 767px) {
    .footer-nav .list-inline-bg {
        -webkit-column-count: 1;
        column-count: 1;
    }
}

/* Homepage discovery block. It deliberately uses the catalogue's existing
 * green and quiet grey-white surfaces so new tools are easy to discover
 * without turning the home page into a second, competing navigation system. */
.footer-nav .kiv-home-featured {
    margin: 0 0 18px;
    padding: 18px 20px 20px;
    border: 1px solid #d9e8e0;
    border-top: 3px solid #15a96a;
    border-radius: 4px;
    background: linear-gradient(135deg, #f4fbf7 0%, #ffffff 58%, #f8fbfa 100%);
    box-shadow: 0 6px 18px rgba(29, 60, 48, .06);
}

.kiv-home-featured-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 14px;
}

.kiv-home-featured-eyebrow {
    display: block;
    margin: 0 0 5px;
    color: #168654;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1.2;
    text-transform: uppercase;
}

.kiv-home-featured h1,
.kiv-home-featured h2 {
    margin: 0;
    color: #2c3e49;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
}

.kiv-home-featured-description {
    max-width: 760px;
    margin: 5px 0 0;
    color: #6a7d87;
    font-size: 12px;
    line-height: 1.5;
}

.kiv-home-featured-all {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid #b9dec8;
    border-radius: 3px;
    background: #ffffff;
    color: #168654;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.kiv-home-featured-all:hover,
.kiv-home-featured-all:focus {
    border-color: #15a96a;
    background: #eff9f2;
    color: #116b43;
    outline: 0;
    text-decoration: none;
}

.kiv-home-featured-all:focus-visible,
.kiv-home-featured-link:focus-visible {
    outline: 2px solid #168654;
    outline-offset: 3px;
}

.kiv-home-featured-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.kiv-home-featured-card {
    position: relative;
    min-width: 0;
    min-height: 78px;
    padding: 11px 28px 10px 11px;
    border: 1px solid #dfe9e3;
    border-radius: 3px;
    background: #ffffff;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.kiv-home-featured-card::after {
    position: absolute;
    right: 11px;
    bottom: 10px;
    color: #58ba7d;
    content: '→';
    font-size: 15px;
    line-height: 1;
}

.kiv-home-featured-card:hover,
.kiv-home-featured-card:focus-within {
    border-color: #86ce9f;
    box-shadow: 0 7px 16px rgba(32, 107, 71, .10);
    transform: translateY(-2px);
}

.kiv-home-featured-tag {
    display: block;
    margin: 0 0 5px;
    color: #6d818b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .065em;
    line-height: 1.25;
    text-transform: uppercase;
}

.kiv-home-featured-link {
    color: #30424c;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.kiv-home-featured-link:hover,
.kiv-home-featured-link:focus {
    color: #148454;
    outline: 0;
    text-decoration: none;
}

.footer-nav #all-tools {
    scroll-margin-top: 64px;
}

@media (prefers-reduced-motion: reduce) {
    .kiv-home-featured-card {
        transition: none;
    }

    .kiv-home-featured-card:hover,
    .kiv-home-featured-card:focus-within {
        transform: none;
    }
}

@media (max-width: 1199px) {
    .kiv-home-featured-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .kiv-home-featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .footer-nav .kiv-home-featured {
        padding: 15px 13px;
    }

    .kiv-home-featured-head {
        display: block;
        margin-bottom: 12px;
    }

    .kiv-home-featured h1,
    .kiv-home-featured h2 {
        font-size: 19px;
    }

    .kiv-home-featured-all {
        display: inline-block;
        margin-top: 10px;
    }

    .kiv-home-featured-grid {
        grid-template-columns: 1fr;
    }
}

/*
 * Shared typography rhythm for the modern developer workspaces.
 *
 * The legacy shell uses a readable 14px body and 14px controls, while the
 * newer card workspaces originally dropped labels, inputs, findings, and
 * result tables to 10–12px.  Keep the compact engineering character, but
 * restore a deliberate hierarchy that is readable at the 1300px desktop cap
 * and on a phone.  Monospace data remains visually distinct without becoming
 * the smallest text on the page.
 */
.kiv-api-tool .tool-intro h1 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.28;
}

.kiv-api-tool .tool-intro p {
    font-size: 14px;
    line-height: 1.6;
}

.kiv-api-tool .tool-card-heading,
.kiv-pro-tool .pro-card-head {
    font-size: 14px;
    line-height: 1.4;
}

.kiv-pro-tool .pro-card-head small {
    font-size: 12px;
    line-height: 1.45;
}

.kiv-api-tool .parameter-row label,
.kiv-api-tool .compact-label,
.kiv-api-tool .policy-directive label,
.kiv-api-tool .code-title-row,
.kiv-api-tool .field-grid label,
.kiv-pro-tool .pro-field > label,
.kiv-pro-tool .pro-inline-label,
.kiv-pro-tool .pro-form-group > label,
.kiv-pro-tool .pro-form-group .pro-form-label {
    font-size: 13px;
    line-height: 1.4;
}

.kiv-pro-tool .pro-select,
.kiv-pro-tool .pro-text-input,
.kiv-pro-tool .pro-form-group input[type="text"],
.kiv-pro-tool .pro-form-group input[type="number"],
.kiv-pro-tool .pro-form-group input[type="email"],
.kiv-pro-tool .pro-form-group select,
.kiv-pro-tool .pro-form-group textarea {
    font-size: 14px;
    line-height: 1.45;
}

.kiv-pro-tool .pro-code-input,
.kiv-pro-tool .pro-code-output {
    font-size: 13px;
    line-height: 1.55;
}

.kiv-pro-tool .pro-field-help,
.kiv-pro-tool .pro-note,
.kiv-pro-tool .pro-local-banner,
.kiv-pro-tool .pro-status,
.kiv-pro-tool .pro-empty,
.kiv-pro-tool .pro-list li,
.kiv-pro-tool .pro-findings,
.kiv-pro-tool .pro-validation-list li,
.kiv-pro-tool .pro-report-list li,
.kiv-identity-tool .identity-definition dt,
.kiv-identity-tool .identity-definition dd,
.kiv-identity-tool .identity-findings li,
.kiv-identity-tool .identity-table,
.kiv-identity-tool .identity-domain-result {
    font-size: 13px;
    line-height: 1.52;
}

.kiv-pro-tool .pro-form-help,
.kiv-identity-tool .identity-table th,
.kiv-identity-tool .identity-chip,
.kiv-identity-tool .identity-uri,
.kiv-identity-tool .identity-inline-status {
    font-size: 12px;
    line-height: 1.5;
}

.kiv-pro-tool .pro-toolbar .pro-file-label span,
.kiv-pro-tool .pro-check,
.kiv-pro-tool .pro-segmented button {
    font-size: 13px;
}

@media (max-width: 767px) {
    .kiv-api-tool .tool-intro h1 {
        font-size: 22px;
        letter-spacing: 0;
        line-height: 1.34;
    }

    .kiv-api-tool .tool-intro p {
        font-size: 15px;
        line-height: 1.6;
    }

    /* 16px prevents automatic focus zoom in mobile Safari and gives long
     * translated values a calmer, more touch-friendly reading size. */
    .kiv-pro-tool .pro-select,
    .kiv-pro-tool .pro-text-input,
    .kiv-pro-tool .pro-form-group input[type="text"],
    .kiv-pro-tool .pro-form-group input[type="number"],
    .kiv-pro-tool .pro-form-group input[type="email"],
    .kiv-pro-tool .pro-form-group select {
        min-height: 42px;
        padding: 8px 10px;
        font-size: 16px;
        line-height: 1.45;
    }

    .kiv-pro-tool .pro-code-input,
    .kiv-pro-tool .pro-form-group textarea {
        padding: 10px;
        font-size: 16px;
        line-height: 1.5;
    }

    .kiv-pro-tool .pro-toolbar .btn,
    .kiv-pro-tool .pro-control-row .btn,
    .kiv-pro-tool .pro-toolbar .pro-file-label span {
        min-height: 40px;
        padding: 8px 12px;
        font-size: 15px;
        line-height: 1.4;
    }

    .kiv-pro-tool .pro-local-banner,
    .kiv-pro-tool .pro-status,
    .kiv-pro-tool .pro-field-help,
    .kiv-pro-tool .pro-note,
    .kiv-identity-tool .identity-findings li,
    .kiv-identity-tool .identity-definition dt,
    .kiv-identity-tool .identity-definition dd,
    .kiv-identity-tool .identity-table {
        line-height: 1.58;
    }
}