body { font-family:var(--site-font, system-ui); font-size:var(--site-font-size,16px); background-color:var(--site-bg,var(--bs-body-bg)); color:var(--bs-body-color); }
.container {max-width:var(--site-width,1140px);}
.btn-primary {--bs-btn-bg:var(--site-accent);--bs-btn-border-color:var(--site-accent);}
.navbar-brand,.content-flow a {color:var(--site-accent);}
    .navbar-brand img {
        max-height: 40px;
        max-width: 240px;
        width: auto;
        height: auto;
        object-fit: contain;
    }
.header-centered .navbar>.container {flex-direction:column;}
.header-centered .navbar-nav {margin:auto !important;}
.admin-sort-item {cursor:grab; user-select:none;} .admin-sort-item.dragging {opacity:.45;}
.admin-sort-item .drag-handle {font-size:1.4rem; cursor:grab;}
.media-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;}
.media-thumb {height:140px;width:100%;object-fit:cover;}
body { min-height:100vh; display:flex; flex-direction:column; } main { flex:1; } .content-flow { max-width:1000px; } .content-text { white-space:pre-line; font-size:1.075rem; line-height:1.85; margin:1.5rem 0; } .content-image { max-height:680px; object-fit:contain; } .gallery-image { height:245px; object-fit:cover; } .admin-preview { max-height:190px; max-width:100%; } .login-box { max-width:440px; } .navbar-brand { letter-spacing:.02em; }

/* Accessible clickable images and responsive full-size lightbox */
.image-lightbox-trigger { display:inline-block; padding:0; margin:0; border:0; background:transparent; cursor:zoom-in; max-width:100%; }
.image-lightbox-trigger:focus-visible { outline:3px solid var(--site-accent,#0d6efd); outline-offset:3px; }
.gallery-lightbox-trigger { display:block; width:100%; }
.gallery-lightbox-trigger img { display:block; width:100%; }
.lightbox-full-image { display:block; max-width:100%; max-height:calc(100dvh - 170px); width:auto; height:auto; object-fit:contain; margin:auto; }

/* Rich text authoring and display */
#rich-editor { min-height: 220px; font-size: 1rem; }
#rich-editor .ql-editor { min-height: 220px; }
#rich-editor-wrap .ql-toolbar, #rich-editor-wrap .ql-container { border-color: var(--bs-border-color); }
[data-bs-theme="dark"] #rich-editor-wrap .ql-editor { color: var(--bs-body-color); }
[data-bs-theme="dark"] #rich-editor-wrap .ql-stroke { stroke: var(--bs-body-color); }
[data-bs-theme="dark"] #rich-editor-wrap .ql-fill { fill: var(--bs-body-color); }
[data-bs-theme="dark"] #rich-editor-wrap .ql-picker { color: var(--bs-body-color); }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text blockquote { border-left: 3px solid var(--bs-primary); padding-left: 1rem; }
.rich-text a { overflow-wrap: anywhere; }

/* Responsive YouTube (16:9) and TikTok (portrait) video blocks */
.video-block { max-width: 100%; }
.video-player { position: relative; width: 100%; overflow: hidden; border-radius: .75rem; background: #000; }
.video-player-youtube { aspect-ratio: 16 / 9; }
.video-player-tiktok { aspect-ratio: 9 / 16; width: min(100%, 420px); }
.video-player iframe { display: block; width: 100%; height: 100%; border: 0; }

/* v3.6 - Safe text wrapping for public page content.
   Keep this section at the END of site.css (after theme/video styling). */
.content-flow,
.content-text,
.rich-text {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Some pasted/edited HTML retains nowrap styling; override it for normal text.
   <br> and separate paragraphs from Quill still create intentional line breaks. */
.content-text.rich-text,
.content-text.rich-text :where(p, div, span, em, i, strong, b, a, li, blockquote, h1, h2, h3, h4, h5, h6) {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    max-width: 100%;
}

/* Plain-text content, if any, keeps its typed newline characters. */
.content-text:not(.rich-text) {
    white-space: pre-line;
}

.rich-text img,
.rich-text video,
.rich-text iframe {
    max-width: 100%;
    height: auto;
}

/* Prevent long code snippets or preformatted text from forcing page overflow. */
.rich-text pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* underline menu item */
/* Selected navigation menu item */

/* Active navigation menu underline */

.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
    font-weight: 600;
}

/* Optional subtle hover underline */
.navbar .nav-link:hover {
    text-decoration: underline;
    text-underline-offset: 7px;
}