/* Custom CSS */
/* ------------------------------------------------------------
   Responsive Spacing Helpers for Bulma
   Mur‑Style Extension
   Adds: -tablet-* and -desktop-* spacing classes
   ------------------------------------------------------------ */

/* Spacing scale (matches Bulma: 0–6) */
:root {
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 3rem;
}

/* ------------------------------------------------------------
   Base responsive spacing generator
   ------------------------------------------------------------ */

@media (min-width: 769px) {
    /* Tablet breakpoint */
    [class*="p-tablet-"], [class*="m-tablet-"] {
        /* No-op: classes defined below */
    }
}

@media (min-width: 1024px) {
    /* Desktop breakpoint */
    [class*="p-desktop-"], [class*="m-desktop-"] {
        /* No-op: classes defined below */
    }
}

/* ------------------------------------------------------------
   Utility macro generator (manual CSS expansion)
   px-tablet-N, py-tablet-N, p-tablet-N, etc.
   px-desktop-N, py-desktop-N, p-desktop-N, etc.
   ------------------------------------------------------------ */

/* ---------- TABLET SPACING ---------- */
@media (min-width: 769px) {

    /* Padding */
    .p-tablet-0 {
        padding: var(--space-0);
    }

    .p-tablet-1 {
        padding: var(--space-1);
    }

    .p-tablet-2 {
        padding: var(--space-2);
    }

    .p-tablet-3 {
        padding: var(--space-3);
    }

    .p-tablet-4 {
        padding: var(--space-4);
    }

    .p-tablet-5 {
        padding: var(--space-5);
    }

    .p-tablet-6 {
        padding: var(--space-6);
    }

    .px-tablet-0 {
        padding-left: var(--space-0);
        padding-right: var(--space-0);
    }

    .px-tablet-1 {
        padding-left: var(--space-1);
        padding-right: var(--space-1);
    }

    .px-tablet-2 {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    .px-tablet-3 {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    .px-tablet-4 {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .px-tablet-5 {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

    .px-tablet-6 {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }

    .py-tablet-0 {
        padding-top: var(--space-0);
        padding-bottom: var(--space-0);
    }

    .py-tablet-1 {
        padding-top: var(--space-1);
        padding-bottom: var(--space-1);
    }

    .py-tablet-2 {
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
    }

    .py-tablet-3 {
        padding-top: var(--space-3);
        padding-bottom: var(--space-3);
    }

    .py-tablet-4 {
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
    }

    .py-tablet-5 {
        padding-top: var(--space-5);
        padding-bottom: var(--space-5);
    }

    .py-tablet-6 {
        padding-top: var(--space-6);
        padding-bottom: var(--space-6);
    }

    /* Margin */
    .m-tablet-0 {
        margin: var(--space-0);
    }

    .m-tablet-1 {
        margin: var(--space-1);
    }

    .m-tablet-2 {
        margin: var(--space-2);
    }

    .m-tablet-3 {
        margin: var(--space-3);
    }

    .m-tablet-4 {
        margin: var(--space-4);
    }

    .m-tablet-5 {
        margin: var(--space-5);
    }

    .m-tablet-6 {
        margin: var(--space-6);
    }

    .mx-tablet-0 {
        margin-left: var(--space-0);
        margin-right: var(--space-0);
    }

    .mx-tablet-1 {
        margin-left: var(--space-1);
        margin-right: var(--space-1);
    }

    .mx-tablet-2 {
        margin-left: var(--space-2);
        margin-right: var(--space-2);
    }

    .mx-tablet-3 {
        margin-left: var(--space-3);
        margin-right: var(--space-3);
    }

    .mx-tablet-4 {
        margin-left: var(--space-4);
        margin-right: var(--space-4);
    }

    .mx-tablet-5 {
        margin-left: var(--space-5);
        margin-right: var(--space-5);
    }

    .mx-tablet-6 {
        margin-left: var(--space-6);
        margin-right: var(--space-6);
    }

    .my-tablet-0 {
        margin-top: var(--space-0);
        margin-bottom: var(--space-0);
    }

    .my-tablet-1 {
        margin-top: var(--space-1);
        margin-bottom: var(--space-1);
    }

    .my-tablet-2 {
        margin-top: var(--space-2);
        margin-bottom: var(--space-2);
    }

    .my-tablet-3 {
        margin-top: var(--space-3);
        margin-bottom: var(--space-3);
    }

    .my-tablet-4 {
        margin-top: var(--space-4);
        margin-bottom: var(--space-4);
    }

    .my-tablet-5 {
        margin-top: var(--space-5);
        margin-bottom: var(--space-5);
    }

    .my-tablet-6 {
        margin-top: var(--space-6);
        margin-bottom: var(--space-6);
    }
}

/* ---------- DESKTOP SPACING ---------- */
@media (min-width: 1024px) {

    /* Padding */
    .p-desktop-0 {
        padding: var(--space-0);
    }

    .p-desktop-1 {
        padding: var(--space-1);
    }

    .p-desktop-2 {
        padding: var(--space-2);
    }

    .p-desktop-3 {
        padding: var(--space-3);
    }

    .p-desktop-4 {
        padding: var(--space-4);
    }

    .p-desktop-5 {
        padding: var(--space-5);
    }

    .p-desktop-6 {
        padding: var(--space-6);
    }

    .px-desktop-0 {
        padding-left: var(--space-0);
        padding-right: var(--space-0);
    }

    .px-desktop-1 {
        padding-left: var(--space-1);
        padding-right: var(--space-1);
    }

    .px-desktop-2 {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    .px-desktop-3 {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    .px-desktop-4 {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .px-desktop-5 {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

    .px-desktop-6 {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }

    .py-desktop-0 {
        padding-top: var(--space-0);
        padding-bottom: var(--space-0);
    }

    .py-desktop-1 {
        padding-top: var(--space-1);
        padding-bottom: var(--space-1);
    }

    .py-desktop-2 {
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
    }

    .py-desktop-3 {
        padding-top: var(--space-3);
        padding-bottom: var(--space-3);
    }

    .py-desktop-4 {
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
    }

    .py-desktop-5 {
        padding-top: var(--space-5);
        padding-bottom: var(--space-5);
    }

    .py-desktop-6 {
        padding-top: var(--space-6);
        padding-bottom: var(--space-6);
    }

    /* Margin */
    .m-desktop-0 {
        margin: var(--space-0);
    }

    .m-desktop-1 {
        margin: var(--space-1);
    }

    .m-desktop-2 {
        margin: var(--space-2);
    }

    .m-desktop-3 {
        margin: var(--space-3);
    }

    .m-desktop-4 {
        margin: var(--space-4);
    }

    .m-desktop-5 {
        margin: var(--space-5);
    }

    .m-desktop-6 {
        margin: var(--space-6);
    }

    .mx-desktop-0 {
        margin-left: var(--space-0);
        margin-right: var(--space-0);
    }

    .mx-desktop-1 {
        margin-left: var(--space-1);
        margin-right: var(--space-1);
    }

    .mx-desktop-2 {
        margin-left: var(--space-2);
        margin-right: var(--space-2);
    }

    .mx-desktop-3 {
        margin-left: var(--space-3);
        margin-right: var(--space-3);
    }

    .mx-desktop-4 {
        margin-left: var(--space-4);
        margin-right: var(--space-4);
    }

    .mx-desktop-5 {
        margin-left: var(--space-5);
        margin-right: var(--space-5);
    }

    .mx-desktop-6 {
        margin-left: var(--space-6);
        margin-right: var(--space-6);
    }

    .my-desktop-0 {
        margin-top: var(--space-0);
        margin-bottom: var(--space-0);
    }

    .my-desktop-1 {
        margin-top: var(--space-1);
        margin-bottom: var(--space-1);
    }

    .my-desktop-2 {
        margin-top: var(--space-2);
        margin-bottom: var(--space-2);
    }

    .my-desktop-3 {
        margin-top: var(--space-3);
        margin-bottom: var(--space-3);
    }

    .my-desktop-4 {
        margin-top: var(--space-4);
        margin-bottom: var(--space-4);
    }

    .my-desktop-5 {
        margin-top: var(--space-5);
        margin-bottom: var(--space-5);
    }

    .my-desktop-6 {
        margin-top: var(--space-6);
        margin-bottom: var(--space-6);
    }
}

.icon-text {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    vertical-align: middle;
}

    .icon-text .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        flex-shrink: 0;
    }

        .icon-text .icon svg {
            display: block;
            height: 1em;
            width: 1em; 
            flex-shrink: 0;
        }

.has-text-centered.icon-text-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
}

    .list-style-none {
        list-style: none;
        padding-left: 0;
        margin-left: 0;
    }

    .anchor {
        display: block;
        height: 50px; /* same height as header */
        margin-top: -50px; /* same height as header */
        visibility: hidden;
    }

    .anchor-offset {
        position: relative;
        display: block;
        /* Adjust this to match your navbar height */
        top: -4rem;
        visibility: hidden;
    }

    .nav-icon {
        width: 20px;
        height: 20px;
        margin-right: 8px;
        vertical-align: middle;
        color: currentColor;
    }

    .social-icon {
        width: 24px;
        height: 24px;
        margin: 0 6px;
        color: #666;
        transition: color 0.2s;
    }

        .social-icon:hover {
            color: #2c2c2c;
        }

    .cta-icon {
        width: 18px;
        height: 18px;
        margin-right: 6px;
        vertical-align: middle;
    }
    /* Search Results */
    .search-result-item:hover {
        background: rgba(50, 115, 220, 0.05) !important;
    }
    .search-result-item a:hover h4 {
        color: #1a4d8a !important;
    }
    /* Search modal */
    #searchModal .modal-card {
        margin: 20px;
    }
    #searchModal .modal-card-body {
        padding: 24px;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
    /* Search input */
    #searchInput {
        border-radius: 50px;
        padding-right: 50px;
    }
        #searchInput:focus {
            box-shadow: 0 0 0 3px rgba(50, 115, 220, 0.25);
        }
    /* Search results scrollbar */
    #searchResultList::-webkit-scrollbar {
        width: 6px;
    }
    #searchResultList::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    #searchResultList::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }
        #searchResultList::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        .search-result-item {
            border-bottom-color: rgba(255, 255, 255, 0.05) !important;
        }
            .search-result-item:nth-child(even) {
                background: rgba(255, 255, 255, 0.02) !important;
            }
            .search-result-item:hover {
                background: rgba(50, 115, 220, 0.15) !important;
            }
        #searchStatus .has-text-grey {
            color: #999 !important;
        }
    }

/* ============================================================
   ACTIVE NAV ITEM
   Green text + subtle tinted background.
   Applies to both leaf links (navbar-item) and dropdown parents
   (navbar-link). The wrapper div carries is-active separately to
   drive the dropdown-reveal rule below.
   ============================================================ */
.navbar-item.is-active.has-text-success,
.navbar-link.is-active.has-text-success {
    color: hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l)) !important;
    background-color: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 0.08);
}

    /* Icon inherits the link color */
    .navbar-item.is-active.has-text-success .icon,
    .navbar-link.is-active.has-text-success .icon {
        color: inherit !important;
    }

/* ============================================================
   ACTIVE NAV ITEM
   Green text + subtle tinted background.
   ============================================================ */
.navbar-item.is-active.has-text-success,
.navbar-link.is-active.has-text-success {
    color: hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l)) !important;
    background-color: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 0.08);
}

    .navbar-item.is-active.has-text-success .icon,
    .navbar-link.is-active.has-text-success .icon {
        color: inherit !important;
    }

/* ============================================================
   DROPDOWN REVEAL — click-to-open pattern
   ============================================================ */
.navbar-item.has-dropdown.is-active > .navbar-dropdown {
    display: block;
}
/* Hide Bulma's CSS arrow — the SVG chevron replaces it */
.navbar-item.has-dropdown > .navbar-link:not(.is-arrowless)::after {
    display: none;
}

/* ============================================================
   DROPDOWN CHEVRON (SVG)
   ============================================================ */

/* Reserve horizontal space for the chevron and lay out the link
   as a flex row so the icon, label, and chevron align cleanly. */
.navbar-item.has-dropdown > .navbar-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding-right: 2.5em;
}

/* Chevron: positioned absolutely inside the reserved padding. */
.nav-dropdown-chevron {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    margin-top: -0.5em;
    width: 1em;
    height: 1em;
    transition: transform 0.15s ease;
    pointer-events: none;
}

/* Rotate 180° when the dropdown is open */
.navbar-item.has-dropdown:hover > .navbar-link .nav-dropdown-chevron,
.navbar-item.has-dropdown.is-active > .navbar-link .nav-dropdown-chevron {
    transform: rotate(180deg);
}

/* Green chevron when the parent link is active */
.navbar-link.has-text-success .nav-dropdown-chevron {
    color: hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l));
}

/* ============================================================
   DROPDOWN CHILDREN — visual distinction from top-level items
   ============================================================ */

/* Base styling for items inside a .navbar-dropdown */
.navbar-dropdown .navbar-item {
    /* Reset Bulma's flat default — give the child items weight */
    color: hsl(var(--bulma-text-strong-h), var(--bulma-text-strong-s), var(--bulma-text-strong-l));
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, border-left-color 0.15s ease, color 0.15s ease;
}

    /* Icon tint for dropdown children — muted by default */
    .navbar-dropdown .navbar-item .icon {
        color: hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-light-l));
        transition: color 0.15s ease;
    }

    /* Hover state — the child link gets a light grey background and
   a soft blue accent bar on the left */
    .navbar-dropdown .navbar-item:hover {
        background-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), 96%);
        border-left-color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l));
        color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l));
    }

        .navbar-dropdown .navbar-item:hover .icon {
            color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l));
        }

    /* Active child (the one with is-active) — uses Bulma's info color
   so it visually contrasts with the parent's success green */
    .navbar-dropdown .navbar-item.is-active {
        background-color: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 0.08);
        border-left-color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l));
        color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
        font-weight: 600;
    }

        .navbar-dropdown .navbar-item.is-active .icon {
            color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l));
        }

    /* Tag styling inside dropdowns — lighter weight, right-aligned */
    .navbar-dropdown .navbar-item .tag {
        background-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), 94%);
        color: hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-light-l));
        font-weight: 500;
        font-size: 0.7rem;
    }

    .navbar-dropdown .navbar-item.is-active .tag {
        background-color: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 0.15);
        color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l));
    }
/* Reserve layout space for all icon svgs so the page doesn't shift
   when the sprite resolves and <use> references start rendering. */
.icon svg,
.icon.is-small svg {
    width: 1em;
    height: 1em;
    display: block;
}

.navbar-link .icon svg,
.navbar-item .icon svg {
    width: 1em;
    height: 1em;
}

/* Chevron used in dropdown parents */
.nav-dropdown-chevron svg {
    width: 1em;
    height: 1em;
    display: block;
}

/* Ensure the wrapper around each svg has an explicit box model */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#copy-template-btn.is-copied {
    background-color: #effaf3;
    border-color: #48c774;
    color: #257942;
}

    #copy-template-btn.is-copied:hover {
        background-color: #def4e6;
    }

.field-value {
    transition: background-color 0.15s ease;
}

    .field-value:hover {
        background-color: rgba(0, 209, 178, 0.08);
        border-radius: 3px;
    }
.mur-logo-small {
    font-size: 0.65em;
    font-weight: inherit;
    vertical-align: baseline;
}