/*
    Overt blog theme overrides.
    Desktop (>=992px): old Overt horizontal widget bar (.widgets-inner), styled by main.css.
    Mobile  (<=991px): the widgets collapse into a slide-up bottom-sheet (.bl-filter-panel).
*/

/* Homepage banner - centre the heading/subheading over the dark body */
.blog--homebanner { text-align: center; }
.blog--homebanner .container { text-align: center; }
.blog--homebanner .maw-600 { max-width: 600px; margin-left: auto; margin-right: auto; }

/* Stacking: keep the widget bar (and its hover dropdowns) above the post cards */
.widgets-inner { position: relative; z-index: 20; padding: 15px 0; }
.blog-body .content-wrapper { position: relative; z-index: 1; padding-bottom: 50px; }

/* Space between the site header and the blog content.
   On the home page the banner separates them, so cancel it there. */
.blog-body { padding-top: 35px; box-sizing: border-box; }
.blog--homebanner + .blog-body { padding-top: 0; }

/* Sticky/reveal footer: the site <footer> is normal-flow, so make the page a flex
   column and let the content grow. On short posts this pushes the footer to the
   bottom of the viewport (.btm-foot flush at the bottom, the fixed .fixed-foot
   revealed above it) with no dead space and no scroll; long posts are unaffected. */
body { min-height: 100vh; display: flex; flex-direction: column; }
#aspnetForm { flex: 1 0 auto; }
body > footer { flex-shrink: 0; }

/* Bar layout: don't let Archives stretch into a hover dead-zone; pin search right. */
.widgets-inner .monthlist { flex-grow: 0; border: none; }
.widgets-inner .widget.search { flex: 0 0 360px; max-width: 360px; margin-left: auto; border: none; }

/* Search widget in the horizontal bar - the partial renders input[type=submit],
   whereas the old theme styled input[type=button]; replicate the old look. */
.widgets-inner .widget.search #searchbox,
.widgets-inner .widget.search #searchbox form { display: flex; width: 100%; }
.widgets-inner .widget.search input[type=text] { flex: 1 1 auto; background-color: #fff; border: none; padding: 0 12px; height: 40px; outline: none !important; border-radius: 4px 0 0 4px; }
.widgets-inner .widget.search input[type=submit] { flex: 0 0 55px; width: 55px; height: 40px; border: none; padding: 0; cursor: pointer; font-size: 0; color: transparent; background-color: #4333DC; border-radius: 0 4px 4px 0; background-image: url(../images/search-line-icon.svg); background-repeat: no-repeat; background-size: 45%; background-position: center; }
.widgets-inner .widget.search input[type=submit]:hover { background-color: #010026; }

/* ===== Index post cards ===== */
.post-home .post-date { letter-spacing: -0.56px; color: #FFFFFF; }
.post-home .cattitle h2 { font-size: 1.75rem !important; line-height: 2.125rem; width: 100%; min-height: 4.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-home .post-info .desc { font-size: 1rem; letter-spacing: -0.56px; width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== Single post (.post-page) - alignment, spacing & hierarchy ===== */
/* Header had its own side padding inside the padded card -> align it with the body */
.post.post-page .post-header { padding: 0; margin-bottom: 32px; }
.post.post-page .post-date { display: block; margin-bottom: 10px; }
.post.post-page .cattitle { float: none !important; }
.post.post-page .cattitle h1 { font-size: 2.2rem !important; line-height: 1.2; margin: 0 0 14px !important; }
.post.post-page .post-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; }

/* Body rhythm */
.post.post-page .post-body { margin-top: 0; line-height: 1.7; }
.post.post-page .post-body > :first-child { margin-top: 0; }
.post.post-page .post-body p { margin: 0 0 16px; }
.post.post-page .post-body h2 { font-size: 1.5rem !important; line-height: 1.3; margin: 30px 0 10px; }
.post.post-page .post-body h3 { font-size: 1.2rem !important; line-height: 1.3; margin: 24px 0 8px; }
.post.post-page .post-body ul, .post.post-page .post-body ol { margin: 0 0 16px; padding-left: 20px; }
.post.post-page .post-body img { display: block; margin: 6px 0 22px; border-radius: 6px; }

/* Tags footer separated cleanly */
.post.post-page .post-footer { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.14); }

/* ===== Search results page ===== */
.search-page .page-global-title { margin-bottom: 22px; }
/* Search box: the form renders input[type=submit] (the old CSS only styled
   input[type=button]); rebuild it as a clean inline bar. */
.search-page .search-page-searchbox { height: auto; padding: 0; border: none; background: transparent; border-radius: 0; margin-bottom: 28px; }
.search-page .search-page-searchbox form { display: flex; border-radius: 8px; overflow: hidden; max-width: 520px; }
.search-page .search-page-searchbox input[type=text] { flex: 1 1 auto; width: auto; height: 46px; border: none; border-radius: 0; padding: 0 16px; background: #fff; color: #333; outline: none !important; }
.search-page .search-page-searchbox input[type=submit] { flex: 0 0 120px; width: 120px; height: 46px; min-height: 0; padding: 0; border: none; background-color: #4333DC; color: #fff; font-weight: 700; cursor: pointer; }
.search-page .search-page-searchbox input[type=submit]:hover { background-color: #010026; }

/* Result items */
.search-page .searchresult { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.search-page .searchresult:last-child { border-bottom: none; }
.search-page .searchresult a { display: inline-block; margin-bottom: 6px; font-size: 1.15rem; font-weight: 600; color: #fff; text-decoration: none; }
.search-page .searchresult a:hover { color: #b9b2ff; text-decoration: underline; }
.search-page .searchresult span.text { display: block; white-space: normal; overflow: visible; color: rgba(255,255,255,0.72); font-size: 0.95rem; line-height: 1.55; }
.search-page .searchresult span.url { display: none; }

/* Pagination */
.search-page .searchpage ul.paging { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; padding: 0; margin: 30px 0 0; }
.search-page .searchpage ul.paging li { width: auto; height: auto; background: transparent; border: none; display: inline-flex; }
.search-page .searchpage ul.paging li a,
.search-page .searchpage ul.paging li a:link,
.search-page .searchpage ul.paging li a:visited { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid rgba(255,255,255,0.25); border-radius: 6px; background: transparent; color: #fff !important; font-weight: 600; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; }
.search-page .searchpage ul.paging li a:hover { background: rgba(255,255,255,0.12); }
.search-page .searchpage ul.paging li.active a { background: #4333DC; border-color: #4333DC; color: #fff; }

/* ===== Index / list pagination (#PostPager) - matches the search pager ===== */
#PostPager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; padding: 30px 0 0; margin: 0; background: transparent; }
#PostPager li { display: inline-flex !important; align-items: center; justify-content: center; min-width: 40px; height: 40px; margin: 0 !important; padding: 0 12px !important; border: 1px solid rgba(255,255,255,0.25) !important; border-radius: 6px !important; background: transparent !important; color: #fff !important; font-weight: 600; font-size: 1rem; box-sizing: border-box; }
#PostPager li a, #PostPager li a:link, #PostPager li a:visited { display: inline-flex; align-items: center; color: #fff !important; text-decoration: none; padding: 0 !important; }
#PostPager .PagerLink:hover { background: rgba(255,255,255,0.12) !important; }
#PostPager .PagerLinkCurrent { background: #4333DC !important; border-color: #4333DC !important; color: #fff !important; }
#PostPager .PagerLinkDisabled { opacity: 0.4; border-color: rgba(255,255,255,0.25) !important; }
#PostPager .PagerEllipses { border: none !important; min-width: 0; padding: 0 4px !important; }

/* Mobile-only chrome - hidden on desktop */
.bl-filter-togg,
.bl-filter-overlay,
.bl-filter-head { display: none; }

/* ===== Mobile: slide-up bottom-sheet nav (dark Overt theme) ===== */
@media screen and (max-width: 991px) {
    /* Bump the banner H1 so it keeps hierarchy over the post titles on mobile */
    .blog--homebanner h1 { font-size: 2.2rem !important; line-height: 1.2; }

    /* Toggle button (sits where the bar was, above the posts) */
    .blog-body .blog-nav { margin-bottom: 0; }
    .blog-nav .bl-filter-togg { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 50px; margin-bottom: 2px; padding: 0 20px; border-radius: 6px; background-color: #3D3C64; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; user-select: none; }
    .blog-nav .bl-filter-togg::after { content: ""; width: 9px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); margin-bottom: 4px; }

    /* Turn the horizontal bar into a plain vertical list inside the sheet */
    .bl-filter-panel .widgets-inner { display: block; background: transparent; padding: 0; border-radius: 0; position: static; z-index: auto; }
    .bl-filter-panel .widgets-inner .widget { display: block; width: auto; max-width: none; margin: 0; padding: 0; border: none; border-bottom: 1px solid rgba(255,255,255,0.14); position: static; flex: none; }
    .bl-filter-panel .widgets-inner .widget:last-child { border-bottom: none; }

    /* Accordion headers */
    .bl-filter-panel .widget-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; margin: 0; font-size: 16px; font-weight: 600; color: #fff; cursor: pointer; }
    .bl-filter-panel .widget-header::after { content: ""; width: 8px; height: 8px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg); transition: transform .2s ease; }
    .bl-filter-panel .widget.open > .widget-header::after { transform: rotate(135deg); }

    /* Accordion content (inline, not the desktop hover dropdown) */
    .bl-filter-panel .widgets-inner .widget .widget-content { display: none; position: static; width: auto; padding: 0 0 16px; background: transparent; color: inherit; box-shadow: none; border-radius: 0; }
    .bl-filter-panel .widgets-inner .widget.open > .widget-content { display: block; }
    .bl-filter-panel .widget-content ul { padding: 0; }
    .bl-filter-panel .widget-content ul li a { color: rgba(255,255,255,0.82); }
    .bl-filter-panel .widget-content ul li a:hover { color: #fff; }

    /* Search shown full-width at the foot of the sheet */
    .bl-filter-panel .widgets-inner .widget.search { display: block; margin: 16px 0 0; }
    .bl-filter-panel .widgets-inner .widget.search .widget-content { display: block; padding: 0; border-radius: 8px; overflow: hidden; }

    /* The bottom sheet */
    .bl-filter-panel { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 21; background-color: var(--darkest-purple); border-radius: 15px 15px 0 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s ease, opacity .2s ease; display: flex; flex-direction: column; box-shadow: 0 -8px 30px rgba(0,0,0,0.45); }
    .bl-filter-panel.open { max-height: calc(100vh - 90px); opacity: 1; }

    .bl-filter-head { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; background-color: #3D3C64; padding: 18px 15px; }
    .bl-filter-head span { color: #fff; font-size: 18px; font-weight: 700; }
    .bl-filter-head .bl-filter-close { width: 22px; height: 22px; position: relative; transform: rotate(45deg); cursor: pointer; }
    .bl-filter-head .bl-filter-close::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 100%; background-color: #fff; transform: translateX(-50%); }
    .bl-filter-head .bl-filter-close::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: #fff; transform: translateY(-50%); }

    .bl-filter-panel .filter-body.main { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 20px 30px; }

    /* Dim overlay behind the sheet */
    .bl-filter-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0; z-index: 20; cursor: pointer; transition: opacity .2s ease; }
    .bl-filter-overlay.active { display: block; opacity: 0.5; }
}