/* --- Force plain white, undecorated category links in mobile menu --- */
@media (max-width: 767.98px) {
    .custom_category_menu .desktop-category-link,
    .custom_category_menu .desktop-category-link[data-has-articles="1"] {
        background: none !important;
        color: #fff !important;
        font-weight: 400 !important;
        text-transform: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        letter-spacing: normal !important;
        text-decoration: none !important;
        display: inline !important;
        font-size: 0.9rem !important;
        font-family: inherit !important;
        padding: 0.44rem 0.82rem !important;
    }
    .custom_category_menu .desktop-category-link:hover,
    .custom_category_menu .desktop-category-link:focus,
    .custom_category_menu .desktop-category-link[data-has-articles="1"]:hover,
    .custom_category_menu .desktop-category-link[data-has-articles="1"]:focus {
        background: none !important;
        color: #fff !important;
        text-decoration: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
}
@media (max-width: 767.98px) {
    .custom_category_menu .desktop-category-link[data-has-articles="1"] {
        background: none !important;
        color: var(--bs-body-color, #212529) !important;
        font-weight: 400 !important;
        text-transform: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        letter-spacing: normal !important;
        text-decoration: none !important;
        display: inline !important;
    }
    .custom_category_menu .desktop-category-link[data-has-articles="1"]:hover {
        background: none !important;
        color: var(--bs-primary, #0d6efd) !important;
        text-decoration: underline !important;
    }
}
/* --- Mobile Overflow Menu Category Link Reset --- */
@media (max-width: 767.98px) {
    .custom_category_menu .desktop-category-link {
        font-family: inherit !important;
        font-size: 1rem !important;
        font-weight: 400 !important;
        text-transform: none !important;
        background: none !important;
        color: var(--bs-body-color, #212529) !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0.44rem 0.82rem !important;
        letter-spacing: normal !important;
        display: inline !important;
    }
    .custom_category_menu .desktop-category-link:hover {
        background: none !important;
        color: var(--bs-primary, #0d6efd) !important;
        text-decoration: underline !important;
    }
}
    .navbar-shell {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        padding: 0 1rem !important;
        margin-top: 0 !important;
        gap: 0 !important;
        position: relative;
        z-index: 2;
    }
    .mobile-site-brand {
        position: static;
        transform: none;
        top: auto;
        left: auto;
        width: auto !important;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 auto;
        min-width: 0;
    }
    .mobile-site-brand .site-logo {
        width: 96px !important;
        max-width: 96px !important;
        min-width: 96px !important;
        filter: drop-shadow(0 4px 12px rgba(5, 10, 18, 0.3));
        margin: 0 auto;
        display: block;
    }
    .navbar-shell .navbar-toggler {
        position: static;
        margin: 0 0 0 0.5rem;
        transform: none;
        align-self: center;
        z-index: 3;
        flex-shrink: 0;
    }
    bottom: 2.5rem;
    z-index: 50001;
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(35,65,95,0.08);
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s, background 0.2s, color 0.2s;
    padding: 0;
}


/* Back to Top button: always fixed, sized, and SVG constrained */
.back-to-top {
    overflow: hidden !important;
    position: fixed !important;
    right: 1.5rem !important;
    bottom: 2.5rem !important;
    width: 3.2rem !important;
    height: 3.2rem !important;
    min-width: 3.2rem !important;
    min-height: 3.2rem !important;
    max-width: 3.2rem !important;
    max-height: 3.2rem !important;
    z-index: 10001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(35,65,95,0.08);
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s, background 0.2s, color 0.2s;
    padding: 0;
}

.back-to-top svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block;
}

.back-to-top:hover, .back-to-top:focus {
    background: #23415f;
    color: #fff;
    opacity: 1;
}
.back-to-top:hover svg circle,
.back-to-top:focus svg circle {
    stroke: #fff;
    fill: #23415f;
}
.back-to-top:hover svg path,
.back-to-top:focus svg path {
    stroke: #fff;
}

.back-to-top:hover, .back-to-top:focus {
    background: #23415f;
    color: #fff;
    opacity: 1;
}

/* Smooth logo scaling in header */
/* .site-logo: !important removed for maintainability */
.site-logo {
    width: 160px;
    height: auto;
    max-width: 160px;
    min-width: 160px;
    display: block;
    margin-bottom: 3.5rem;
    position: relative;
    z-index: 10;
    transition: none;
}
.is-header-shrunk .site-logo {
    transform: none;
}
.menu-jump-link {
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
}
.menu-jump-link:active, .menu-jump-link:focus, .menu-jump-link:hover {
    color: #0066cc;
    text-decoration: none;
}
.mobile-category-message a {
    text-decoration: underline;
    color: #2a4a7a;
    font-weight: 600;
    font-size: 1em;
}
@media (max-width: 767.98px) {
    .desktop-category-message { display: none; }
    .mobile-category-message { display: block; }
}
@media (min-width: 768px) {
    .desktop-category-message { display: block; }
    .mobile-category-message { display: none; }
}
@media (max-width: 767.98px) {
    #content-area-inner h1, .page-content h1 {
        margin-bottom: 1.4rem;
    }
}
@media (max-width: 767.98px) {
    .navbar-toggler.d-md-none {
        position: absolute;
        top: 18px;
        right: 10px;
        margin: 20px;
        z-index: 5000;
    }
}
/* Constrain images in the content area to the width of the content container */
#content-area-inner img,
.page-content img,
.content-column img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/************************************************************************************
 * BS5SIMPLYBLOG CUSTOM.CSS - BEGINNER FRIENDLY, WELL-COMMENTED, PERFORMANCE-OPTIMIZED
 *
 * TABLE OF CONTENTS:
 * 1. FONT IMPORTS
 * 2. CSS VARIABLES (COLORS, SIZES)
 * 3. GLOBAL RESETS & LAYOUT
 * 4. TYPOGRAPHY HELPERS
 * 5. HEADER & NAVBAR
 */

/* Fix nav bar link hover color for visibility */
.navbar a,
.navbar a:visited,
.navbar a:focus {
    color: #0066cc;
}
.navbar a:hover,
.navbar a:active {
    color: #0066cc;
    text-decoration: underline;
}
/*
 * 6. SIDEBAR
 * 7. MAIN CONTENT AREA
 * 8. FOOTER (DESKTOP & MOBILE)
 * 9. HOMEPAGE SPECIAL STYLES
 * 10. MOBILE OVERRIDES
 * 11. UTILITY CLASSES
 * 12. PLUGIN & MISC STYLES
*/

/* ========================= 1. FONT IMPORTS ========================= */

@font-face {
    font-family: "Style Script Local";
    src: url('/bl-content/fonts/Style_Script/StyleScript-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: "Archivo Black Local";
    src: url('/bl-content/fonts/Archivo_Black/ArchivoBlack-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ========================= 2. CSS VARIABLES (COLORS, SIZES) ========================= */

:root {
    --theme-shell-max: 1460px;
    --theme-ink: #102234;
    --theme-panel: #f6f8fb;
    --theme-accent: #7a4b35;
    --theme-accent-soft: #c88f62;
    --sidebar-sticky-gap: 14px;
    --header-full-h: clamp(165px, 16vw, 190px);
    --header-shrunk-h: clamp(125px, 12vw, 148px);
    --footer-h: 44px;
    --mobile-footer-h: 42px;
    --sidebar-overlay-top: rgba(46, 30, 54, 0.95);
    --sidebar-overlay-bottom: rgba(62, 39, 73, 0.93);
    --sidebar-heading: #f1f7ff;
    --sidebar-heading-soft: #d8e8ff;
    --sidebar-text: rgba(242, 248, 255, 0.96);
    --sidebar-link: #ffffff;
    --sidebar-link-hover: #ffe5c8;
    --offcanvas-overlay-opacity: 0.64;
    --header-overlay-left: rgba(9, 15, 26, 0.66);
    --header-overlay-mid: rgba(9, 14, 24, 0.3);
    --header-overlay-right: rgba(20, 31, 44, 0.63);
}

/* ========================= 3. GLOBAL RESETS & LAYOUT ========================= */

/* RESET BODY AND HTML FOR FLEX LAYOUT AND NO HORIZONTAL SCROLL */
html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    touch-action: pan-y;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* background removed to allow later override */
}

/* FLEX CONTAINER FOR MAIN PAGE STRUCTURE */
.container-fluid.p-0.flex-grow-1 {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: var(--footer-h);
}

/* ========================= 4. TYPOGRAPHY HELPERS ========================= */

/* SCRIPT FONT FOR SPECIAL HEADINGS */
.style-script-regular {
    font-family: "Style Script Local", cursive;
    font-weight: 400;
    font-style: normal;
}

/* BOLD SANS FOR TITLES */


/* Let the Bootstrap container and row participate in the vertical flex layout. */
.container-fluid.p-0.flex-grow-1 {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: var(--footer-h);
}

@media (min-width: 992px) {
    html,
    body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
    }

    .container-fluid.p-0.flex-grow-1 {
        height: auto;
        min-height: 100vh;
        padding-bottom: var(--footer-h);
    }

    .row.gx-md-5 {
        flex: 1 1 auto;
        min-height: 0;
        margin: 0 auto;
        overflow: visible;
        align-items: flex-start;
    }

    .content-column {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    #content-area-inner {
        flex: 1 1 auto;
        min-height: 0;
        overflow: visible;
    }
}

@media (max-width: 767.98px) {
    .container-fluid.p-0.flex-grow-1 {
        padding-bottom: 0;
    }

    .row.gx-md-5 {
        width: 98%;
        margin-left: auto;
        margin-right: auto;
    }

    .content-column,
    .sidebar-column {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }
}

/* ********************************************************************************************************** */
/* Controls the content container size and placement. */
.row.gx-md-5 {
    flex: 1 1 auto;
    align-items: stretch;
    width: min(94%, var(--theme-shell-max));
    margin: auto;
}

@media (min-width: 992px) {
    .row.gx-md-5 {
        margin: 0 auto;
        height: auto;
        max-height: none;
    }

    #content-area,
    .content-column {
        min-height: 0;
    }

    #content-area-inner {
        height: auto;
        max-height: none;
    }
}
/* ********************************************************************************************************** */

/* Header and branding tweaks. */
.site-header {
    color: #fff;
    width: auto;
    flex: 0 0 auto;
}

.site-logo {
    height: auto;
    display: block;
    padding-top: 0;
    padding-left: 0;
    margin-bottom: 3.5rem; /* Push everything below logo further down */
    position: relative;   /* REQUIRED for z-index */
    z-index: 10;
}

.mobile-site-brand .site-logo {
    width: 160px;
    max-width: 160px;
    min-width: 160px;
    margin-bottom: 3.5rem;
}


/* Remove all responsive logo sizing */

.mobile-site-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
    margin-bottom: 2.2rem; /* Add space below logo/header */
}

@media (max-width: 767.98px) {
    .mobile-site-brand {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        gap: 0;
        margin-bottom: 2.2rem; /* Add space below logo/header on mobile */
    }

    .mobile-site-brand .site-logo {
        filter: drop-shadow(0 8px 24px rgba(5, 10, 18, 0.35));
        width: 160px;
        max-width: 160px;
        min-width: 160px;
    }
}

@media (min-width: 768px) {
    .mobile-site-brand {
        display: none;
    }
}

.navbar-shell {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    width: min(96%, var(--theme-shell-max));
    height: 100%;
    margin: 0 auto;
    padding: 1rem clamp(0.9rem, 2vw, 1.8rem);
}



@media (max-width: 767.98px) {
    .header-hero-copy {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .navbar-shell {
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
    }

    .header-hero-copy {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
    }
}

.header-hero-brand {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 115px;
    height: 115px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 28px rgba(7, 13, 20, 0.18);
}

.header-hero-logo {
    width: 115px;
    height: 115px;
    object-fit: contain;
    display: block;
}

.header-hero-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #bcd9f5;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.header-hero-title {
    margin: 0;
    font-family: "Style Script Local", cursive;
    font-size: clamp(2rem, 3.2vw, 3.35rem);
    letter-spacing: 0.01em;
    line-height: 0.9;
    color: #ffffff;
    font-weight: 400;
    text-align: center;
}

.header-hero-subtitle {
    margin: 0;
    font-size: clamp(0.9rem, 1.16vw, 1.02rem);
    line-height: 1.2;
    color: rgba(239, 247, 255, 0.92);
    max-width: none;
    text-align: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(229, 240, 252, 0.65);
}

.header-hero-caption {
    margin: 0;
    font-size: clamp(0.8rem, 0.95vw, 0.92rem);
    line-height: 1.2;
    color: rgba(230, 241, 252, 0.88);
    text-align: center;
}

/* The slogan is suppressed because the logo and header art carry the branding. */
.site-slogan {
    display: none;
}

/* Footer styling and utility link treatment. */

/* Footer: fixed to viewport bottom, always visible. */
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--footer-h);
    z-index: 1019;
    background: #1a3f52;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    display: flex;
    align-items: center;
}

.site-footer-inner {
    width: min(94%, var(--theme-shell-max));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
}

.site-footer-nav-column {
    min-width: 0;
    text-align: center;
}

.site-footer-meta-column {
    text-align: center;
    color: #7a95b0;
    font-size: 0.74rem;
    margin-top:-13px;
}

.site-footer-note {
    opacity: 0.8;
}

.site-footer-credit {
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 0.55;
}

/* Hide footer on mobile devices */
@media (max-width: 767.98px) {
    .site-footer {
        display: none !important;
    }
}

/* Mobile footer is part of page flow and sits at the page bottom within the same content frame. */
.mobile-footer {
    position: relative;
    width: 98%;
    height: var(--mobile-footer-h);
    margin: auto auto calc(env(safe-area-inset-bottom, 0px) + 2px);
    margin-top: auto;
    z-index: 1021;
    background: linear-gradient(180deg, #0a1628 0%, #162444 60%, #1a2e5a 100%);
    border-top: 2px solid gold;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-footer-nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

.mobile-footer-link,
.mobile-footer-link:visited {
    color: #cfe4f2;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none !important;
}

.mobile-footer-link:hover,
.mobile-footer-link:active,
.mobile-footer-link:focus {
    color: #ffffff;
    text-decoration: underline;
}

.footer-state-menu {
    font-size: 0.9rem;
    line-height: 1.4;
}

/***********************************************************************************************/
/* Mobile off-canvas menu */
/***********************************************************************************************/
/* Bring the mobile menu above the rest of the page and apply the alternate background. */
.offcanvas {
    z-index: 50000; /* legacy: must override Bootstrap for offcanvas layering */
    background-image:
        linear-gradient(rgba(0, 0, 0, var(--offcanvas-overlay-opacity)), rgba(0, 0, 0, var(--offcanvas-overlay-opacity))),
        url('/bl-content/uploads/background_pink_pasley3.webp');
    background-size: 100px;
    background-position: center;
    background-repeat: repeat;
    max-width:300px;
}

.offcanvas-backdrop {
    z-index: 49900; /* legacy: must override Bootstrap for offcanvas layering */
}

/* Keep off-canvas layers above all page UI elements when open. */
.offcanvas.show,
.offcanvas.showing {
    z-index: 50000; /* legacy: must override Bootstrap for offcanvas layering */
}

.offcanvas-backdrop.show {
    z-index: 49900; /* legacy: must override Bootstrap for offcanvas layering */
}

/* Remove empty top bar space and start menu content near the top edge. */
.offcanvas-header {
    display: none;
}

.offcanvas-body.menu-area {
    padding-top: 24px !important;
}

/* Hide the built-in title because the menu uses custom branded text instead. */
.offcanvas-title {
display:none;
}

/* Replace the default toggler icon with a custom high-contrast hamburger icon. */
.navbar-toggler-icon {
    filter: none !important;
    margin-right: 0;
    width: 1.25rem !important;
    height: 1.25rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent !important;
}

/* Keep the toggler visible on top of the video header. */
.navbar-toggler {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 3;
    border: none !important;
    border-color: transparent !important;
    padding: 0.55rem 0.7rem !important;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: all 260ms ease;
    opacity: 1 !important;
}

.navbar-toggler:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25) !important;
}

/* The custom menu does not use Bootstrap's default close button. */
.btn-close {
    display:none;
}

/* Branded heading style used inside the off-canvas content blocks. */
div.h5 {
    font-family: "Style Script Local", cursive;
        font-size: 1.6rem;
        font-weight:700;
    color: var(--sidebar-heading);
    text-shadow: 0 1px 2px rgba(8, 15, 24, 0.48);
    padding-top: 15px;
    }

/* Keep the custom activities heading on one line in the mobile off-canvas menu. */
.offcanvas .menu-heading-compact {
    font-size: 1.6rem;
    white-space: nowrap;
    line-height: 1.1;
}

/* Apply the script font to plugin headings inside the mobile menu. */
.offcanvas .plugin-label::before {
    font-family: "Style Script Local", cursive;
    font-weight: 700;
    font-size: 1em;
}

/* Hide the stock label text and inject the site's preferred title copy. */
.offcanvas .plugin-label {
    visibility: hidden;
    position: relative;
    font-family: "Style Script Local", cursive;
    font-size:1em;
    color: var(--sidebar-heading-soft);
}

.offcanvas .plugin-label::after {
    content: "Siem Reap Inside Asia";
    font-weight:bold;
    font-size: 1em;
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
}

/* Hide the "Search" heading label above the search input in the sidebar. */
.plugin-search .plugin-label {
    display: none;
}

/* Add spacing between stacked plugin blocks in the mobile menu. */
.plugin-content {
    padding-bottom:25px;
}

/* Give search and action buttons a more polished, branded treatment. */
input[type="button"] {
    margin-top: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 5px;
    padding: 8px 16px;
    font-weight: bold;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

input[type="button"]:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Keep the search field readable against the patterned off-canvas background. */
#jspluginSearchText {
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #333;
    padding: 8px 12px;
    width: 100%;
    box-sizing: border-box;
}

#jspluginSearchText::placeholder {
    font-style: italic;
    font-size: 10pt;
    color: #666;
}

/* Centre the search widget and separate it from the navigation menus with a divider. */
.plugin.plugin-search .plugin-label {
    display: none;
}

.plugin.plugin-search .plugin-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    margin-bottom: 0.9rem;
}

.plugin.plugin-search .plugin-content::before {
    content: "Siem Reap Inside Asia";
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 0.35rem;
    font-family: "Style Script Local", cursive;
    font-size: 1.52rem;
    font-weight: 700;
    color: var(--sidebar-heading-soft);
    text-shadow: 0 1px 2px rgba(8, 15, 24, 0.48);
}

.plugin.plugin-search input[type="button"] {
    width: 80%;
    padding: 0.38rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.88rem;
    background: rgba(93, 52, 122, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff !important;
    cursor: pointer;
    transition: background 150ms ease;
}

.plugin.plugin-search input[type="button"]:hover {
    background: rgba(93, 52, 122, 1);
}


/***********************************************************************************************/
/* Header video layering */
/***********************************************************************************************/
/* Establish the navbar as the stacking context for the video background. */
.navbar {
    position: relative;
    height: var(--header-full-h);
    overflow: hidden;
    z-index: 1;
    transition: height 120ms ease, box-shadow 120ms ease;
}

@media (max-width: 767.98px) {
    .navbar {
        height: clamp(82px, 14vw, 92px);
        overflow: hidden;
        background: linear-gradient(180deg, #0a1628 0%, #162444 60%, #1a2e5a 100%);
        border-bottom: 2px solid gold;
    }

    .navbar-video-wrapper {
        display: none !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .navbar::before,
    .navbar::after {
        display: none !important;
    }

    .navbar-shell {
        position: relative;
        inset: auto;
        width: min(100%, var(--theme-shell-max));
        height: 100%;
        display: flex !important;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        padding: 0px 3rem 0 !important;
        margin-top:-25px !important;
        gap: 0 !important;
        z-index: 2;
    }

    .mobile-site-brand {
        position: static;
        transform: none;
        top: auto;
        left: auto;
        width: 75px !important;
    }

    .mobile-site-brand .site-logo {
           width: 96px !important;
           max-width: 96px !important;
           min-width: 96px !important;
           filter: drop-shadow(0 4px 12px rgba(5, 10, 18, 0.3));
    }

    .navbar-shell .navbar-toggler {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        margin-top:10px;
        transform: translateY(-50%);
    }
}

.site-sticky-header {
    z-index: 1020;
}

/* Desktop: replaces the bg-body class removed from the template */
.site-sticky-header > .col-12 {
    background-color: var(--bs-body-bg, #fff);
}

.navbar-shell,
.header-hero-copy,
.header-hero-title,
.header-hero-subtitle,
.header-hero-caption,
.header-hero-kicker,
.header-hero-brand,
.header-hero-logo {
    transition: all 120ms ease;
}

body.is-header-shrunk .navbar {
    height: var(--header-shrunk-h);
    box-shadow: 0 8px 22px rgba(8, 16, 29, 0.22);
}

body.is-header-shrunk .header-hero-copy {
    padding: 0.72rem 5rem 0.72rem 1rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(9, 18, 31, 0.62) 0%, rgba(12, 25, 43, 0.78) 100%);
}

body.is-header-shrunk .header-hero-kicker {
    font-size: 0.65rem;
}

body.is-header-shrunk .header-hero-title {
    font-size: clamp(1.7rem, 2.7vw, 2.7rem);
}

body.is-header-shrunk .header-hero-subtitle {
    font-size: clamp(0.78rem, 1.02vw, 0.92rem);
}

body.is-header-shrunk .header-hero-caption {
    font-size: clamp(0.72rem, 0.86vw, 0.82rem);
}

body.is-header-shrunk .header-hero-brand {
    width: 60px;
    height: 60px;
    right: 0.85rem;
    bottom: 0.65rem;
}

body.is-header-shrunk .header-hero-logo {
    width: 46px;
}

/* Keep interactive header content above the background video and overlay. */
.navbar > * {
    position: relative;
    z-index: 2;
}

/* The wrapper fills the navbar so the video can cover the whole header area.
   The background gradient shows during the brief pre-play moment, matching the
   video's opening tones so there is no visible flash. */
.navbar-video-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, #132c3a 0%, #1a3f52 100%);
}

/* Cover the full header without distorting the video.
   Fade in so the transition from background to live video is invisible. */
.navbar-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    animation: headerVideoFadeIn 0.6s ease-in forwards;
}

@keyframes headerVideoFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Add a subtle dark overlay so the logo and controls stay legible. */
.navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(94deg, var(--header-overlay-left) 0%, var(--header-overlay-mid) 44%, var(--header-overlay-right) 100%);
    z-index: 1;
}

.navbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    background: linear-gradient(180deg, rgba(9, 15, 26, 0) 0%, rgba(9, 15, 26, 0.64) 100%);
    z-index: 1;
}

/* Desktop category rail rendered as a floating shelf above the footer bar. */
.desktop-category-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 2px);
    z-index: 1020;
    background: rgba(209, 178, 42, 0.85);
    border-top: 1px solid rgba(255, 233, 172, 0.7);
    border-bottom: none;
    box-shadow: 0 12px 28px rgba(20, 29, 38, 0.22);
}

.desktop-category-strip-inner {
    width: min(84%, var(--theme-shell-max));
    margin: 0 auto;
    padding: 0.4rem 0.35rem;
}

.desktop-category-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    overflow-x: visible !important;
    padding-left: 0.2rem !important;
    padding-right: 0.2rem !important;
    white-space: nowrap;
    text-decoration: none !important;
}

.desktop-category-link,
    /* Remove border for category nav buttons */
.desktop-category-link,
.desktop-category-link:visited,
.desktop-category-link:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1f3f5a !important;
    border: none;
    border-radius: 8px;
    background: linear-gradient(180deg, #fcfeff 0%, hsl(208, 64%, 23%) 100%);
    padding: 0.44rem 0.82rem;
    box-shadow: 0 3px 9px rgba(26, 63, 82, 0.16);
    transition: all 170ms ease;
}

.desktop-category-link:hover {
    background: linear-gradient(180deg, hsl(208, 64%, 23%) 0%, #fcfeff 100%);
    color: #446a89 !important;
    box-shadow: 0 6px 14px rgba(26, 63, 82, 0.24);
    transform: translateY(-2px);
}

.content-column {
    padding-left: 0;
}

.sidebar-column {
    padding-right: 0;
}

body:not(.is-homepage) .content-column #content-area-inner {
    padding: clamp(1rem, 2vw, 1.4rem);
}

.sidebar-column.bg-body {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 34px rgba(20, 29, 38, 0.18);
    --sidebar-top-offset: calc(var(--header-full-h) + var(--sidebar-sticky-gap));
    --sidebar-max-height: calc(100dvh - var(--header-full-h) - var(--footer-h) - (var(--sidebar-sticky-gap) * 2));
}

@media (min-width: 992px) {
    .sidebar-column.bg-body {
        position: sticky;
        top: var(--sidebar-top-offset);
        align-self: flex-start;
        z-index: 2;
    }

    body.is-header-shrunk .sidebar-column.bg-body {
        --sidebar-top-offset: calc(var(--header-shrunk-h) + var(--sidebar-sticky-gap));
        --sidebar-max-height: calc(100dvh - var(--header-shrunk-h) - var(--footer-h) - (var(--sidebar-sticky-gap) * 2));
    }
}

.sidebar-column-inner {
    width: 100%;
}

@media (min-width: 992px) {
    .sidebar-column-inner {
        min-height: 200px;
        max-height: var(--sidebar-max-height);
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 0.4rem;
    }
}

.sidebar-ad-slot {
    margin-top: 1rem;
}

.sidebar-ad-slot:empty {
    display: none;
}

/***********************************************************************************************/
/* Typography and link cleanup */
/***********************************************************************************************/

/* Typography hooks can be added here later if headings or blockquotes need custom treatment. */

/* Footer navigation is displayed inline as a compact legal/utility menu. */
ul.footer-nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-top: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
}

ul.footer-nav li {
    display: inline-flex;
    margin-right: 0;
}

ul.footer-nav a {
    font-size: 0.78rem;
    color: #a8c4d8;
    text-decoration: none;
}

ul.footer-nav a:hover {
    color: #04283d;
    text-decoration: underline;
}

/* Center-align paragraph copy to match the site's editorial style. */
p {
    text-align:center;
    font-weight:normal;
    color: inherit;
}

/* Remove default list styling from custom homepage navigation blocks. */
 .custom_homepage_link {
     list-style-type:none;
     padding:0;
     text-align:center;
     text-decoration:none;
}

/* Adjust TOC container to bring in background by 15px on the right */
.keep-exploring-tocbox, .tocbox, .toc-container, .table-of-contents {
    box-sizing: border-box;
    padding-right: 15px !important;
    margin-right: 15px !important;
    width: calc(100% - 15px) !important;
    max-width: calc(100% - 15px) !important;
}

/* Keep category and static page menus visually clean and unbulleted. */
.custom_category_menu {
	list-style-type:none;
	padding:0;
    text-decoration:none;
}

.static_pages_menu {
	list-style-type:none;
	padding:0;
    text-decoration:none;
}

.static_pages_menu a {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Force a consistent white, underline-free link treatment across the theme. */
a,
a:hover,
a:focus,
a:visited,
a:active {
	text-decoration: none !important;
	font-weight: bold;
	color: white !important;
}

/* Utility helper for selectively removing underlines. */
.no_underline {
    text-decoration: none !important;
}

/* Archive and category listing cards */
.bs5simplyblog-listing {
    display: grid;
    gap: 1.5rem;
    padding-bottom: 2rem;
}

.bs5simplyblog-archive-header {
    padding: 1.5rem 1.6rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 240, 244, 0.96) 0%, rgba(242, 248, 255, 0.95) 100%);
    border: 1px solid rgba(147, 189, 233, 0.3);
    box-shadow: 0 14px 34px rgba(62, 71, 89, 0.08);
}

.bs5simplyblog-archive-kicker {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7c6d74;
}

.bs5simplyblog-archive-title {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    line-height: 1.05;
    color: #241c22;
}

.bs5simplyblog-archive-description {
    max-width: 60ch;
    color: #564b52;
    text-align: left;
}

.bs5simplyblog-post-card {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(249, 247, 244, 0.96) 100%);
    border: 1px solid rgba(129, 65, 65, 0.14);
    box-shadow: 0 18px 42px rgba(45, 36, 40, 0.12);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.bs5simplyblog-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 56px rgba(45, 36, 40, 0.16);
    border-color: rgba(122, 75, 53, 0.24);
}

.bs5simplyblog-post-card-media {
    display: block;
    min-height: 100%;
    background: linear-gradient(135deg, #f4c9d3 0%, #d8e7f8 100%);
}

.bs5simplyblog-post-card-image {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    display: block;
}

.bs5simplyblog-post-card-body {
    padding: 1.45rem 1.5rem 1.6rem;
}

.bs5simplyblog-post-taxonomy {
    margin-bottom: 0.8rem;
}

.bs5simplyblog-post-category {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: #814141;
    color: #fff7f7 !important;
}

.bs5simplyblog-post-title {
    margin: 0;
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    line-height: 1.1;
    text-wrap: balance;
}

.bs5simplyblog-post-title a {
    color: #1e1a1a !important;
}

.bs5simplyblog-post-meta {
    margin-top: 0.8rem;
}

.bs5simplyblog-post-excerpt,
.bs5simplyblog-post-excerpt p,
.bs5simplyblog-post-excerpt div,
.bs5simplyblog-post-excerpt span {
    color: #2d2328 !important;
    text-align: left;
}

.bs5simplyblog-post-excerpt {
    font-size: 1rem;
    line-height: 1.7;
}

.bs5simplyblog-post-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.72rem 1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-accent-soft) 100%);
    color: #fff8f8 !important;
    box-shadow: 0 10px 24px rgba(122, 75, 53, 0.24);
}

.bs5simplyblog-post-link::after {
    content: ">";
    font-size: 0.95rem;
}

.bs5simplyblog-pagination .pagination {
    margin-bottom: 0;
}

.bs5simplyblog-pagination .page-link {
    color: #814141 !important;
    background: #fff !important;
    border-color: rgba(129, 65, 65, 0.18) !important;
}

.bs5simplyblog-pagination .page-link:hover {
    background: #f8ece8 !important;
}

.bs5simplyblog-page-shell {
    max-width: min(100%, 100ch);
    margin: 0 auto;
    padding-bottom: 8rem;
}

.bs5simplyblog-page-header {
    margin-bottom: 1.35rem;
    padding: 1.15rem 1.2rem 0.2rem;
    text-align: left;
}

.bs5simplyblog-page-kicker,
.bs5simplyblog-supporting-label {
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7d6a5d !important;
    font-weight: 700;
}

.bs5simplyblog-page-title {
    margin: 0.45rem 0 0;
    color: var(--theme-ink);
    font-size: clamp(2rem, 4.2vw, 3.3rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
    text-wrap: balance;
    text-transform: capitalize;
}

.bs5simplyblog-page-cover-wrap {
    margin: 1.3rem 0 1rem;
}

.bs5simplyblog-cover-img {
    display: block;
    width: 70%;
    margin: 0 auto;
    text-align: center;
    border-radius: 24px;
    border: 1px solid rgba(16, 34, 52, 0.1);
    box-shadow: 0 22px 46px rgba(25, 35, 48, 0.14);
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(243,246,249,0.92) 100%);
}

.bs5simplyblog-page-meta {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.2rem 1.2rem 0;
}

.bs5simplyblog-page-content {
    padding: 0 1.2rem;
}

.bs5simplyblog-page-content,
.bs5simplyblog-page-content p,
.bs5simplyblog-page-content div,
.bs5simplyblog-page-content span {
    color: #23384f !important;
}

.bs5simplyblog-page-content p {
    width: min(100%, 72ch);
    margin: 0 auto 1.2rem;
    font-size: 1.05rem;
    line-height: 1.9;
    text-align: left;
}

.bs5simplyblog-page-content h2,
.bs5simplyblog-page-content h3,
.bs5simplyblog-page-content h4 {
    width: min(100%, 72ch);
    margin: 2rem auto 0.85rem;
    color: #162b3f;
    text-align: left;
}

.bs5simplyblog-page-content ul,
.bs5simplyblog-page-content ol,
.bs5simplyblog-page-content blockquote,
.bs5simplyblog-page-content pre,
.bs5simplyblog-page-content table {
    width: min(100%, 72ch);
    margin-left: auto;
    margin-right: auto;
}

.bs5simplyblog-page-content a {
    color: var(--theme-accent) !important;
}

.bs5simplyblog-page-content-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0 1.2rem;
}

.bs5simplyblog-page-content-tags .post-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.78rem;
    border-radius: 999px;
    background: rgba(122, 75, 53, 0.08);
    border: 1px solid rgba(122, 75, 53, 0.14);
    color: var(--theme-accent) !important;
}

.bs5simplyblog-children,
.bs5simplyblog-nextprevpages {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    margin: 2rem auto !important;
    padding: 2.5rem 1rem 2.2rem 1rem !important;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0 !important;
}

.bs5simplyblog-next-cover-img {
    max-width: 120px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    object-fit: cover;
    width: 100%;
    height: auto;
}

.bs5simplyblog-children ul,
.bs5simplyblog-nextprevpages .row {
    margin: 0;
}

.bs5simplyblog-children li,
.bs5simplyblog-nextprevpages .col-12 {
    padding: 0.45rem 0;
}

.bs5simplyblog-children a,
.bs5simplyblog-nextprevpages a {
    color: #23415f !important;
}

hr {
    width:100px;
    margin:auto;
}

/* Preserve clean link styling inside list-based menus as well. */
ul li a,
ul li a:hover,
ul li a:focus,
ul li a:visited,
ul li a:active {
    text-decoration: none !important;
}

/* Avoid inherited text decorations on list items themselves. */
li {
    text-decoration: none;
}

/* Final mobile layout overrides, placed at end so they win earlier width constraints. */
@media (max-width: 767.98px) {

    :root,
    [data-bs-theme="light"],
    [data-bs-theme="dark"] {
        /* Hazy off-pink background */
        --bs-body-bg: #fff3f7 !important;
        --bs-body-bg-rgb: #fff3f7 !important;
    }

    html,
    body {
        /* Hazy off-pink gradient */
        background: linear-gradient(135deg, #fff3f7 60%, #ffe3ed 100%, #ffe4f0 100%) !important;
        background-color: #fff3f7 !important;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .site-sticky-header > .col-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-bottom: none !important;
        background: linear-gradient(180deg, #0a1628 0%, #162444 60%, #1a2e5a 100%) !important;
    }

    .site-sticky-header,
    .site-sticky-header > .col-12,
    .site-sticky-header .rowF,
    .site-sticky-header .navbar {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .site-sticky-header .navbar {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .site-sticky-header .navbar-video-wrapper,
    .site-sticky-header .navbar-video-wrapper video {
        width: 100% !important;
        max-width: none !important;
    }

    .row.gx-md-5 {
        width: 98% !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        --bs-gutter-x: 0 !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #f6faff 60%, #e3edfa 100%, #dbeafe 100%) !important;
    }

    .row.gx-md-5 > .content-column,
    .row.gx-md-5 > #content-area {
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        float: none !important;
    }

    .content-column,
    .content-column.mt-3,
    #content-area {
        margin-top: 0 !important;
        background: linear-gradient(135deg, #f6faff 60%, #e3edfa 100%, #dbeafe 100%) !important;
    }

    .content-column.bg-body,
    #content-area.bg-body,
    .bg-body,
    .row.gx-md-5 > .bg-body,
    .container-fluid.p-0.flex-grow-1,
    .container-fluid.p-0.flex-grow-1 > .row,
    .row,
    .col-12 {
        background: linear-gradient(135deg, #f6faff 60%, #e3edfa 100%, #dbeafe 100%);        
        background-color: #f6faff;
    }

    /* Override the broad .row / .col-12 rule above for every element inside the sticky header */
    .site-sticky-header,
    .site-sticky-header > .col-12,
    .site-sticky-header .rowF,
    .site-sticky-header .navbar {
        background: linear-gradient(180deg, #0a1628 0%, #162444 60%, #1a2e5a 100%) !important;
        background-color: #0a1628 !important;
    }
    #content-area,
    #content-area-inner,
    .bs5simplyblog-listing,
    .bs5simplyblog-archive-header,
    .bs5simplyblog-post-card {
        width: 100% !important;
        max-width: none !important;
    }

    .bs5simplyblog-post-card {
        grid-template-columns: 1fr !important;
    }

    .bs5simplyblog-post-card-media {
        min-height: 200px !important;
    }

    body.is-homepage #content-area-inner {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

}
/* --- Tinge category links with articles in blue-green (teal) --- */
.desktop-category-link[data-has-articles="1"] {
    background: linear-gradient(180deg, #e0f7fa 0%, #20a8ba 100%) !important;
    color: #006064 !important;
    border: none !important;
}
.desktop-category-link[data-has-articles="1"]:hover,
.desktop-category-link[data-has-articles="1"]:focus {
    background: linear-gradient(180deg, #80deea 0%, #e0f7fa 100%) !important;
    color: #004d40 !important;
}