/* ===============================
   Thumbnail grid + cards
=============================== */
.thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.thumb-card {
    padding: .5rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

    .thumb-card.is-inactive {
        opacity: .55;
        filter: grayscale(.25);
    }

.thumb-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.06);
}

.thumb-meta {
    font-size: .85rem;
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    color: #333;
}

.thumb-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thumb-when {
    opacity: .7;
}

.thumb-toggle {
    margin-top: .25rem;
}

/* Header collapse for small screens */
@media (max-width: 600px) {
    .app-card__header {
        flex-direction: column;
        align-items: stretch !important;
    }

        .app-card__header .btn {
            width: 100%;
            text-align: center;
        }
}

/* ===============================
   Upload layout
=============================== */
.upload-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 900px) {
    .upload-grid {
        grid-template-columns: 320px minmax(360px, 1fr);
        align-items: start;
        column-gap: 1.25rem;
    }
}

/* Make the file input full width (override any global 280px limit) */
.upload-grid .text-input {
    max-width: 100% !important;
}

.preview-col {
    display: grid;
    gap: .75rem;
    width: min(92vw, 520px);
}

/* ===============================
   Square crop preview
=============================== */
.crop-stage {
    position: relative;
    width: min(92vw, 520px);
    aspect-ratio: 1 / 1; /* perfect square */
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6; /* light gray */
    border: 1px solid rgba(0,0,0,.08);
}

    /* Placeholder text when empty */
    .crop-stage.empty::before {
        content: "Choose a photo…";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: #666;
        font-size: .95rem;
    }

    /* The image being panned/zoomed (works for #cropImg or any img inside stage) */
    .crop-stage img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) scale(1);
        transform-origin: center;
        will-change: transform;
        user-select: none;
        pointer-events: none; /* dragging occurs on the stage */
        max-width: none; /* allow large originals to scale */
        display: block !important; /* ensure it’s not hidden by any old rules */
    }

/* Remove any legacy overlay that could block the view */
/*.crop-mask {
    display: none !important;
}*/

/* Fixed crop box (frost everything outside) */
#cropBox {
    position: absolute;
    inset: 12px; /* margin from edges of the stage */
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 10px;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.35);
}

/* ===============================
   Zoom control row
=============================== */
/*.zoom-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    width: min(92vw, 520px);
}*/
.zoom-row {
    display: grid;
    grid-template-columns: auto 1fr; /* [label] [range] */
    align-items: center;
    column-gap: .5rem;
    margin-top: .75rem;
}

    /*.zoom-row input[type="range"] {
        flex: 1;
    }*/
    /* Make the track fill the whole space (no UA margins) */
    .zoom-row input[type="range"] {
        width: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
    }

        /* -------- WebKit styling (Chrome/Edge/Safari) -------- */
        .zoom-row input[type="range"]::-webkit-slider-runnable-track {
            height: 6px;
            border-radius: 999px;
            background: rgba(0,0,0,.15);
        }

        .zoom-row input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none; /* use only the vendor-prefixed prop */
            width: 16px;
            height: 16px;
            border-radius: 50%;
            margin-top: -5px; /* centers thumb on 6px track */
            background: var(--colorMainDark);
            border: 1px solid rgba(0,0,0,.25);
        }

        /* OPTIONAL: Firefox styling — editor may warn but browsers support it */
        .zoom-row input[type="range"]::-moz-range-track {
            height: 6px;
            border-radius: 999px;
            background: rgba(0,0,0,.15);
        }

        .zoom-row input[type="range"]::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--colorMainDark);
            border: 1px solid rgba(0,0,0,.25);
        }

/* Keep Upload button aligned to preview left edge */
.preview-col .actions {
    display: flex;
    justify-content: flex-start;
}

/* Constrain to card width instead of viewport */
.preview-col,
.crop-stage,
.zoom-row {
    width: min(100%, 520px);
}

@media (min-width: 900px) {
    .upload-grid {
        grid-template-columns: 320px minmax(360px, 520px);
        justify-content: center; /* center the grid tracks */
        align-items: start;
        column-gap: 1.25rem;
    }
}

/* Header: keep content inside card and wrap nicely */
.app-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}



/* Helper text */
.hint {
    font-size: .9rem;
    color: rgba(0,0,0,.6);
    margin-top: .35rem;
}


/* Make card content obey the card’s box (clips tiny overhangs) */
.app-card {
    overflow: hidden;
}

/* Header layout stays inside the card and wraps cleanly */
.app-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

    .app-card__header > * {
        min-width: 0;
    }
/* allow children to shrink if needed */

@media (max-width: 720px) {
    .app-card__header {
        gap: .5rem;
    }

        .app-card__header .btn {
            width: 92.5%;
        }
    /* full-width button on phones */
}


/* Keep file input inside the card width on all browsers */
input[type="file"].text-input {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* some UAs honor this */
    white-space: nowrap; /* and this */
}

/* Tweak the mini “Choose file” button on WebKit so it doesn’t bloat */
input[type="file"]::-webkit-file-upload-button {
    font: inherit;
    padding: .5rem .8rem;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.75);
    cursor: pointer;
}


/* Home slideshow square */
/*.home-ss {*/
    /* tweak size if you want; it scales on small screens automatically */
    /*--ss-size: min(75vw, 520px);
    width: var(--ss-size);
    aspect-ratio: 1 / 1;
    position: relative;
    border-radius: 8px;*/ /* ever so slightly rounded */
    /*overflow: hidden;*/ /* crop to square */
    /*background: rgba(0,0,0,.06);*/ /* subtle backdrop while first image loads */
    /*box-shadow: 0 10px 24px rgba(0,0,0,.12);*/ /* soft modern shadow */
    /*margin: 0 auto;*/ /* center the square */
/*}*/

    /* Two layers for crossfade */
    /*.home-ss .layer {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;*/ /* fill the square without distortion */
        /*opacity: 0;
        transition: opacity .6s ease;
    }*/

/* Slideshow wrapper now supports desktop side-by-side layout */
.home-ss-row {
    display: block;
    margin: 0 auto; /* center on narrow */
    max-width: min(92vw, 1200px); /* page edge padding */
    padding: 0 .5rem;
}

/* Square slideshow */
.home-ss {
    --ss-size: min(92vw, 520px);
    --fade-ms: 1400ms; /* slower, smoother fade */
    width: var(--ss-size);
    aspect-ratio: 1 / 1;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0,0,0,.06);
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

    .home-ss img {
        backface-visibility: hidden;
        will-change: opacity;
    }

    /* Two image layers that crossfade */
    .home-ss .layer {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity var(--fade-ms) cubic-bezier(.22,.61,.36,1); /* smooth ease-out */
        will-change: opacity;
    }

    .home-ss .ss-layer.is-visible {
        opacity: var(--ss-opacity);
    }

    /* make either class name fade */
    .home-ss .layer,
    .home-ss .ss-layer {
        opacity: 0;
        transition: opacity var(--fade-ms, 1200ms) ease;
    }

        .home-ss .layer.is-visible,
        .home-ss .ss-layer.is-visible {
            opacity: var(--ss-opacity, 0.9);
        }

    /* Frosted glass overlay + slight veil to make images feel softer */
    .home-ss .ss-frost {
        position: absolute;
        inset: 0;
        pointer-events: none;
        /*backdrop-filter: blur(1.5px);*/
        -webkit-backdrop-filter: blur(1.5px);
        background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.12));
    }

/* Overlay caption (mobile / narrow) */
.home-ss-caption {
    --cap-color: #ffffff;
    --cap-shadow: 0 2px 18px rgba(0,0,0,.45);
    --cap-bg: rgba(0,0,0,.22);
    position: absolute;
    inset: auto 10px 10px 10px;
    padding: .5rem .75rem;
    border-radius: 8px;
    color: var(--cap-color);
    font-weight: 700;
    text-align: center;
    text-shadow: var(--cap-shadow);
    background: var(--cap-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    letter-spacing: .3px;
    pointer-events: none; /* tap goes through */
}

/* Desktop side caption (separate block) */
.home-ss-sidecaption {
    display: none; /* narrow: hidden */
}

/* On wider screens: square left, text right */
@media (min-width: 900px) {
    .home-ss-row {
        display: grid;
        grid-template-columns: auto 1fr; /* square | text */
        gap: 1.25rem;
        align-items: center;
        max-width: 1200px; /* keeps it elegant */
    }

    /* left-align the square naturally inside the grid */
    .home-ss {
        margin: 0;
    }

    /* move caption to the side (not overlay) */
    .home-ss-caption {
        display: none;
    }

    .home-ss-sidecaption {
        display: block;
    }

        .home-ss-sidecaption .kicker {
            color: rgba(0,0,0,.55);
            font-weight: 600;
            letter-spacing: .04em;
            text-transform: uppercase;
            margin: 0 0 .25rem;
        }

        .home-ss-sidecaption .headline {
            margin: 0 0 .5rem;
            font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
            line-height: 1.15;
            font-weight: 800;
            color: #1a1a1a;
        }

        .home-ss-sidecaption .subtle {
            color: rgba(0,0,0,.65);
            font-size: 1rem;
        }
}



/* --- Home hero layout (text above on narrow, text right on wide) --- */
.home-hero {
    /* optional per-page top spacing via CSS var if you want */
    margin-top: var(--home-hero-mt, 0);
}

.home-hero-inner {
    display: grid;
    grid-template-columns: 1fr; /* stacked by default */
    gap: 1rem;
    align-items: center;
    justify-items: center; /* center both blocks on narrow */
}

/* Text styling: use your existing .header-title / .header-text classes.
   Just center on narrow, left-align on wide. */
.home-hero-text {
    text-align: center;
}

/* Slideshow square sizing */
.home-hero-slideshow .home-ss {
    /* tweak to taste: a responsive square */
    --ss-size: min(82vw, 420px);
    width: var(--ss-size);
    aspect-ratio: 1 / 1;
    border-radius: 10px; /* “ever so slightly” rounded */
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 24px rgba(0,0,0,.12); /* gentle shadow */
}

/* Make images slightly transparent (no blur) */
.home-ss .layer {
    --img-alpha: 0.88; /* 0.85–0.93 is a good range */
    filter: opacity(var(--img-alpha));
}

/* If you previously had a frost overlay, ensure it’s off */
.home-ss .ss-frost {
    display: none !important;
}

/* Wide layout: slideshow left, text right */
@media (min-width: 900px) {
    .home-hero-inner {
        grid-template-columns: auto auto; /* two columns side-by-side */
        column-gap: 2rem;
        justify-content: center; /* center the whole pair */
    }

    .home-hero-text {
        text-align: left;
    }
}


/* ========== NARROW SCREENS (text above slideshow) ========== */
@media (max-width: 899.98px) {
    /* Tighten the space above/below each heading line */
    .home-hero-text .header-title {
        margin: .25rem 0 .15rem; /* was larger; reduce */
        line-height: 1.05;
    }

    .home-hero-text .header-text {
        margin: .1rem 0 0; /* minimal spacing under the second line */
        line-height: 1.15;
    }
}

/* ========== WIDE SCREENS (slideshow left, text right) ========== */
@media (min-width: 900px) {
    .home-hero-inner {
        grid-template-columns: 1fr 1fr; /* split the area into two equal halves */
        column-gap: 10rem; /* bigger space between slideshow & text */
        justify-content: center;
        align-items: center;
    }

    /* Keep the slideshow toward the left of its half */
    .home-hero-slideshow {
        justify-self: start;
    }

    /* Center the text within its own half and center-align the lines */
    .home-hero-text {
        justify-self: center;
        text-align: center;
    }
}


/* Base layout */
.home-hero-inner {
    display: grid;
    row-gap: .6rem; /* vertical breathing room on narrow */
    justify-items: center; /* center items by default (narrow) */
}

/* Name + “are getting married” block */
.home-hero-text {
    text-align: center;
}

/* The third line (date + venue) */
.home-hero-subline {
    text-align: center;
    margin: .25rem 0 0;
}

/* ----- Narrow screens: text above, slideshow, then subline under slideshow ----- */
@media (max-width: 899.98px) {
    .home-hero-inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "text"
            "slideshow"
            "subline";
    }

    .home-hero-text {
        grid-area: text;
    }

    .home-hero-slideshow {
        grid-area: slideshow;
    }

    .home-hero-subline {
        grid-area: subline;
    }
}

/* ----- Wide screens: slideshow left, text right, subline under the text ----- */
@media (min-width: 900px) {
    .home-hero-inner {
        grid-template-columns: 1fr 1fr;
        column-gap: 4rem; /* space between slideshow & text side */
        align-items: center;
        justify-items: stretch; /* let columns fill their halves */
        grid-template-areas:
            "slideshow text"
            "slideshow subline"; /* subline sits beneath the text */
    }

    .home-hero-slideshow {
        grid-area: slideshow;
        justify-self: end;
    }

    .home-hero-text {
        grid-area: text;
        text-align: center;
        justify-self: center;
    }

    .home-hero-subline {
        grid-area: subline;
        text-align: center;
        justify-self: center;
        margin-top: .5rem;
    }
}


/* Config page table */

.page-title {
    margin-bottom: .75rem;
}

.config-table-wrap {
    width: 95%;
    text-align: center;
    justify-self: center;
}

.config-table {
    width: 100%;
    align-content: center;
    border: 1px solid #d9d9d9;
    border-collapse: collapse;
    background: linear-gradient(180deg, rgba(var(--colorMainRGB),0.22), rgba(var(--colorMainRGB),0.18));
    border-color: rgba(var(--colorMainRGB),0.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

    .config-table thead {
        background: linear-gradient(180deg, rgba(var(--colorMainRGB),0.45), rgba(var(--colorMainRGB),0.30));
    }

    .config-table th,
    .config-table td {
        border: 1px solid #d9d9d9;
        padding: 8px 10px;
        text-align: left;
        vertical-align: top;
        word-break: break-word; /* so long values don’t force scroll */
    }

.config-actions {
    white-space: nowrap;
}

/* Mobile: stack rows */
@media (max-width: 640px) {
    .config-table {
        border: 0;
    }

        .config-table thead {
            display: none;
        }

        .config-table tbody tr {
            display: block;
            border: 1px solid #d9d9d9;
            margin-bottom: .75rem;
            /*background: linear-gradient(180deg, rgba(var(--colorMainRGB),0.22), rgba(var(--colorMainRGB),0.18));*/
            border-color: rgba(var(--colorMainRGB),0.65);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
        }

        .config-table tbody td {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            border: 0;
            border-bottom: 1px dotted #ddd;
            padding: 6px 10px;
        }

            .config-table tbody td:last-child {
                border-bottom: 0;
            }

            .config-table tbody td::before {
                content: attr(data-label);
                font-weight: 600;
                color: #333;
            }

    .config-actions {
        white-space: normal;
    }
}

/* outer container that controls width for BOTH buttons and table */
.config-shell {
    width: 95%;
    margin: 0 auto;
}

/* header row with 2 buttons left/right */
.config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}

/* buttons */
.config-btn {
    display: inline-block;
    padding: .4rem .85rem;
    border-radius: 6px;
    background: rgba(var(--colorMainDarkerRGB), 0.85);
    border: 1px solid rgba(var(--colorMainDarkerRGB), 0.85);
    color: var(--colorMainLighter);
    text-decoration: none;
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .02em;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

    .config-btn:hover {
        background: rgba(var(--colorMainRGB), 0.75);
    }

/* now the table-wrap can be full width of the shell */
.config-table-wrap {
    width: 100%;
    text-align: center;
    justify-self: center;
}


@media (max-width: 480px) {
    .config-header {
        gap: .5rem;
    }

    .config-btn {
        font-size: .78rem;
        padding: .35rem .65rem;
    }
}



/* the RSVP details tables */
.rsvp-details-table {
    width: 45%;
    margin: 0 auto 1.1rem auto;
    /*border: 1px solid rgba(0,0,0,.15);*/
    /*border-collapse: collapse;*/
    /*background: #fff;*/
    border-radius: 8px;
    overflow: hidden;
    
    /*width: 100%;*/
    align-content: center;
    border: 1px solid #d9d9d9;
    border-collapse: collapse;
    background: linear-gradient(180deg, rgba(var(--colorMainRGB),0.22), rgba(var(--colorMainRGB),0.18));
    border-color: rgba(var(--colorMainRGB),0.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

    /* header row */
    .rsvp-details-table thead th {
        /*background: rgba(0,0,0,.04);*/
        background: linear-gradient(180deg, rgba(var(--colorMainRGB),0.45), rgba(var(--colorMainRGB),0.30));
        text-align: left;
        padding: 10px 12px;
        font-weight: 600;
        border-bottom: 1px solid rgba(0,0,0,.09);
    }

    /* body cells */
    .rsvp-details-table td {
        border-bottom: 1px solid rgba(0,0,0,.04);
        padding: 8px 12px;
    }

    /* last row no extra border */
    .rsvp-details-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* column widths: 30% + 65% (rest is padding/borders) */
    .rsvp-details-table td:first-child,
    .rsvp-details-table th:first-child {
        width: 30%;
        text-align: left;
    }

    .rsvp-details-table td:last-child,
    .rsvp-details-table th:last-child {
        width: 65%;
        text-align: left;
    }

    /* make bold labels look consistent */
    .rsvp-details-table td:first-child b {
        font-weight: 600;
    }

/* mobile: let text wrap and align right column left if too narrow */
@media (max-width: 640px) {
    .rsvp-details-table {
        width: 95%;
    }

        .rsvp-details-table td:last-child {
            text-align: left;
            word-break: break-word;
        }
}




/* make header (button + search) line up with table width */
.config-header {
    width: 95%;
    margin: 0 auto .75rem auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
}

/* search box */
.rsvp-search {
    position: relative;
    flex: 0 0 220px;
}

    .rsvp-search input {
        width: 100%;
        padding: 5px 26px 5px 8px;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: 6px;
        background: #fff;
    }

    .rsvp-search button {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        border: 0;
        background: none;
        font-size: 1.05rem;
        line-height: 1;
        cursor: pointer;
        color: rgba(0,0,0,.45);
    }

        .rsvp-search button:hover {
            color: rgba(0,0,0,.8);
        }

/* make counts clickable look like pills/buttons */
.rsvp-counts td {
    text-align: center;
}

.rsvp-count-btn {
    background: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 999px;
    padding: 3px 14px;
    cursor: pointer;
    font-weight: 600;
}

    .rsvp-count-btn.is-active {
        background: rgba(var(--colorMainRGB, 52, 120, 202), 0.15);
        border-color: rgba(var(--colorMainRGB, 52, 120, 202), 0.55);
    }

/* mobile */
@media (max-width: 640px) {
    .config-header {
        flex-wrap: wrap;
    }

    .rsvp-search {
        flex: 1 1 100%;
    }
}




/* don't stack the RSVP Attending table on mobile */
@media (max-width: 640px) {
    .config-table.no-mobile-stack {
        width: 100%;
        border: 1px solid #d9d9d9;
    }

        .config-table.no-mobile-stack thead {
            display: table-header-group;
        }

        .config-table.no-mobile-stack tbody tr {
            display: table-row;
            margin-bottom: 0;
            border: 0;
        }

        .config-table.no-mobile-stack tbody td {
            display: table-cell;
            border-bottom: 1px solid rgba(0,0,0,.05);
            padding: 6px 10px;
        }
}




.rsvp-filter-select {
    flex: 0 0 190px;
}

    .rsvp-filter-select select {
        width: 100%;
        padding: 5px 6px;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: 6px;
        background: #fff;
    }

@media (max-width: 640px) {
    .config-header {
        flex-wrap: wrap;
    }

    .rsvp-search,
    .rsvp-filter-select {
        flex: 1 1 100%;
    }
}



/* print styles for report tables - used for PDF Print */
/* print styles for report tables */
@media print {
    /* hide headers/filters/buttons */
    .config-header,
    .rsvp-search,
    .config-btn {
        display: none !important;
    }

    /* make table full width on page */
    .config-table-wrap,
    .config-table,
    .config-shell {
        width: 100% !important;
        margin: 0 !important;
    }

        /* hide actions column (header + cells) */
        .config-table th.config-actions,
        .config-table td.config-actions {
            display: none !important;
        }

        /* optional: remove background colours for cleaner pdf */
        .config-table,
        .config-table th,
        .config-table td {
            background: #fff !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
}

/*@media print {*/
    /* kill outer margins/padding that might push content */
    /*body,
    html {
        margin: 0;
        padding: 0;
    }*/

    /* if you have a shell that has margin-bottom, kill it */
    /*.config-shell,
    .config-table-wrap {
        margin: 0 !important;
        padding: 0 !important;
    }*/

    /* hide stuff we don't need */
    /*.config-header,
    .rsvp-search,
    .config-btn,
    header.timetable-hero {
        display: none !important;
    }*/

    /* table full width */
    /*.config-table,
    .config-table-wrap {
        width: 100% !important;
    }*/

        /* avoid random page breaks in rows */
        /*.config-table tr {
            page-break-inside: avoid;
        }*/

        /* optional: reduce line-height to fit more */
        /*.config-table td,
        .config-table th {
            line-height: 1.2;
        }
}*/



body.site-body {
    font-family: 'Lora', 'Poppins', 'Great Vibes', 'Times New Roman', serif;
}



.nav-links .nav-link {
    display: block;
    padding: .1rem .9rem;
    text-decoration: none;
}

    .nav-links .nav-link.is-current {
        color: #9aa0a6; /* grey */
        cursor: default;
        /* leave pointer-events enabled so the click bubbles and closes the drawer;
     we block navigation with onclick="return false;" */
    }

    .nav-links .nav-link.is-admin {
        /* optional: make admin items look distinct */
        border-top: 1px solid rgba(255,255,255,.15);
        margin-top: .35rem;
        padding-top: .75rem;
    }