/* ===================================================================
   ATW blog — bridge layer over main.css (the ported old "Standard-2015"
   theme). This file loads AFTER main.css and holds only:
     1. a search-submit bridge (new markup uses input[type=submit],
        the old CSS targeted input[type=button]),
     2. light polish for the related-posts list + social bar,
     3. the mobile widget-bar improvements — same look as the old blue
        bar, but with robust mechanics replacing the old sticky top:21vw
        offsets, the 120px max-height clip, and the jQuery toggle.
   Everything else (palette, cards, featured hero, dot-grid, pager,
   widgets) comes straight from main.css.
   =================================================================== */

/* --- Search widget: bridge input[type=submit] to the old [type=button] look --- */
.search input[type=submit] { float: right; border: none; padding: 0; height: 40px; width: 25%; background-color: #005b86; color: #fff; border-radius: 4px; border: 1px solid #005b86; font-weight: 700; cursor: pointer; }
.search input[type=submit]:hover { background-color: #fff; color: #005b86; }
.widget.search #searchbox form:after { content: ""; display: block; clear: both; }

/* --- Social share bar (ShareThis supplies its own button styling) --- */
.social { margin-top: 25px; }

/* --- Related posts: the old theme barely styled these; light polish only --- */
.related-posts { margin-top: 35px; padding-top: 20px; border-top: 1px solid #ddd; }
.related-posts h3 { color: #005b86; font-size: 1.6em; font-weight: bold; margin: 0 0 12px; }
.related-posts ul { list-style: none; padding: 0; margin: 0; }
.related-posts ul li { margin-bottom: 12px; }
.related-posts ul li a { color: #005a86; font-weight: 700; text-decoration: none; }
.related-posts ul li a:hover { color: #062939; }

/* ===================================================================
   Blog widget bar (#blognav) — compact filter bar matching the old blog:
   Search box · Category dropdown · Month dropdown · Login button, laid
   out in one blue row. main.css supplies the blue background + white
   widget headers. Desktop drops the old position:sticky/top:155px.
   =================================================================== */
/* light-grey bar (override main.css's blue) to separate it from the footer */
.sidebar-wrapper { position: static; top: auto; background-color: #efefef; }

/* centre + pad the bar; lay the widgets in a bottom-aligned row */
#blognav .container { padding-top: 35px; padding-bottom: 35px; }
#blognav .widgetzone { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px; width: 100%; max-width: 1400px; margin: 0 auto; }
#blognav .widget { width: auto; max-width: none; flex: 1 1 240px; margin: 0; padding: 0; }
#blognav .widget.administration { flex: 0 0 auto; margin-left: auto; }

/* dark header (label) above each control — contrast on the light-grey bar */
#blognav .widget .widget-header { color: #005b86; font-size: 1em; font-weight: 600; margin: 0 0 8px; opacity: 1; }

/* search box — white field + bordered so it reads against the grey bar,
   with a solid-blue search button for contrast */
#blognav .searchbox { display: flex; align-items: center; height: 44px; background: #fff; border: 1px solid #c9c9c9; border-radius: 3px; overflow: hidden; }
#blognav .searchbox > input { flex: 1; height: 44px; width: 100%; border: none; padding: 0 14px; outline: none; font-size: 0.95em; }
#blognav .searchbox .search-ico { width: 46px; height: 44px; border: none; background: #005b86; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#blognav .searchbox .search-ico:hover { background: #062939; color: #fff; }

/* category / month dropdowns — white "Select..." boxes, bordered + chevron */
#blognav .blog-filter-select { width: 100%; height: 44px; border: 1px solid #c9c9c9; border-radius: 3px; background-color: #fff; color: #333; padding: 0 38px 0 14px; font-size: 0.95em; cursor: pointer; outline: none;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23005b86'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center; }

/* login / dashboard buttons (pushed right) — solid blue for contrast */
#blognav .widget.administration .widget-content { display: flex; gap: 10px; }
#blognav .blog-login-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; background: #005b86; color: #fff !important; border-radius: 3px; font-weight: 700; text-decoration: none !important; white-space: nowrap; }
#blognav .blog-login-btn:hover { background: #062939; color: #fff !important; }

/* Mobile "Blog Menu" header row — hidden on desktop */
.blognav-mobhead { display: none; }

/* ===================================================================
   Mobile widget bar (< 768px) — blue bar, hamburger, collapsed by
   default; controls stack full width. Robust mechanics (no vw sticky
   offset, no 120px clip, vanilla-JS toggle).
   =================================================================== */
@media screen and (max-width: 767px) {
    .sidebar-wrapper { position: static !important; top: auto !important; max-height: none !important; overflow: visible !important; }
    .sidebar-wrapper .rel.shut { max-height: none; overflow: visible; }

    /* header row: "Blog Menu" bar carrying the hamburger (dark for contrast on grey) */
    .blognav-mobhead { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; color: #062939; font-size: 1.2em; font-weight: 700; cursor: pointer; user-select: none; }
    .sidebar-wrapper .blognav-mobhead .hburg { position: static; top: auto; right: auto; color: #005b86; font-size: 1.4em; }

    /* collapsed (default .shut) hides the widgets; expanded shows them.
       The main.css .fa-bars / .fa-times swap (keyed off .shut) still applies. */
    .sidebar-wrapper .rel.shut > .container { display: none; }
    .sidebar-wrapper .rel > .container { display: block; }

    /* stack the controls full width */
    #blognav .widgetzone { gap: 16px; }
    #blognav .widget, #blognav .widget.administration { flex: 1 1 100%; margin-left: 0; }
}

/* ===================================================================
   Form-post enquiry form (rendered on posts flagged IsFormPost)
   =================================================================== */
.blog-enquiry { margin: 40px 0; padding: 40px; background-color: #f0f0f0; border-radius: 4px; }
.blog-enquiry-title { margin: 0 0 20px; color: #005b86; font-weight: bold; font-size: 1.6em; }
.blog-enquiry-title i { margin-right: 8px; }

.blog-enquiry-success { padding: 18px 20px; background: #ebffe5; border: 1px solid #c0e0b2; border-radius: 4px; color: #2f6b18; font-size: 1.1em; }
.blog-enquiry-error { margin-bottom: 18px; padding: 12px 16px; background: #fdecea; border: 1px solid #f5c2c0; border-radius: 4px; color: #a4231f; }
.blog-enquiry-error:empty { display: none; }
.blog-enquiry-form .bef-err:empty { display: none; }

.blog-enquiry-form .bef-row { display: flex; flex-wrap: wrap; gap: 20px; }
.blog-enquiry-form .bef-field { flex: 1 1 240px; margin-bottom: 18px; display: flex; flex-direction: column; }
.blog-enquiry-form .bef-full { flex-basis: 100%; }
.blog-enquiry-form label { margin-bottom: 6px; font-weight: 700; color: #062939; font-size: 0.95em; }
.blog-enquiry-form input[type=text],
.blog-enquiry-form textarea { width: 100%; border: 1px solid #c9c9c9; border-radius: 3px; padding: 10px 12px; font-size: 0.95em; outline: none; background: #fff; }
.blog-enquiry-form input[type=text]:focus,
.blog-enquiry-form textarea:focus { border-color: #005b86; }
.blog-enquiry-form textarea { min-height: 110px; resize: vertical; }
.blog-enquiry-form .bef-err { margin-top: 5px; color: #d0021b; font-size: 0.85em; font-weight: 700; }

.blog-enquiry-form .bef-captcha-row { align-items: flex-start; }
.blog-enquiry-form .bef-captcha-imgs { flex-direction: row; align-items: center; gap: 4px; padding: 8px 12px; background: #fff; border: 1px solid #c9c9c9; border-radius: 3px; flex: 0 0 auto; align-self: flex-end; margin-bottom: 18px; }
.blog-enquiry-form .bef-captcha-imgs img { display: inline-block; }

.blog-enquiry-form .bef-submit { margin-top: 8px; }
.blog-enquiry-form .bef-submit button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 34px; background-color: #f7941d; color: #fff; border: 0; border-radius: 3px; font-weight: 700; font-size: 1em; cursor: pointer; }
.blog-enquiry-form .bef-submit button:hover { background-color: #005b86; }

@media screen and (max-width: 599px) {
    .blog-enquiry { padding: 25px; }
    .blog-enquiry-form .bef-field { flex-basis: 100%; }
}

/* ===================================================================
   Search results page — the stock markup left the field borderless and
   the submit button (input[type=submit].btn) unstyled. Restyle to a
   clean bordered field + solid-blue Search button, and polish results.
   =================================================================== */
.search-page .page-global-title { color: #005b86; }

.search-page .search-page-searchbox { background: transparent; border: 0; padding: 0; margin-bottom: 28px; }
.search-page .search-page-searchbox form { display: flex; gap: 10px; max-width: 620px; }
.search-page .search-page-searchbox input[type=text] { flex: 1 1 auto; width: auto; height: 46px; border: 1px solid #c9c9c9; border-radius: 3px; padding: 0 14px; font-size: 1em; outline: none; background: #fff; }
.search-page .search-page-searchbox input[type=text]:focus { border-color: #005b86; }
.search-page .search-page-searchbox input[type=submit] { float: none; width: auto; height: 46px; padding: 0 30px; border: 0; border-radius: 3px; background-color: #005b86; color: #fff; font-weight: 700; font-size: 1em; cursor: pointer; margin: 0px; }
.search-page .search-page-searchbox input[type=submit]:hover { background-color: #062939; }

.search-page .searchresult { padding: 16px 0; }
.search-page .searchresult a { color: #005b86; font-weight: 700; font-size: 1.15em; text-decoration: none; }
.search-page .searchresult a:hover { color: #f7941d; }
.search-page .searchresult span.url { color: #7a7a7a; }

.search-page .searchpage ul.paging li { border-radius: 3px; }
.search-page .searchpage ul.paging li a { color: #005b86; }
.search-page .searchpage ul.paging li.active { background: #005b86; border-color: #005b86; }
.search-page .searchpage ul.paging li.active a { color: #fff; }

/* ===================================================================
   Prev/next post navigation (shown when ShowPostNavigation is enabled)
   =================================================================== */
.post-nav { display: flex; justify-content: space-between; gap: 20px; margin: 35px 0; padding-top: 25px; border-top: 1px solid #ddd; }
.post-nav a { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; text-decoration: none; padding: 14px 18px; border: 1px solid #e3e3e3; border-radius: 4px; transition: border-color 0.15s ease, background 0.15s ease; }
.post-nav a:hover { border-color: #005b86; background: #f6faff; }
.post-nav .post-nav-next { text-align: right; margin-left: auto; }
.post-nav .post-nav-dir { font-size: 0.85em; font-weight: 700; color: #005b86; text-transform: uppercase; letter-spacing: 0.03em; }
.post-nav .post-nav-title { color: #212c52; font-weight: 700; line-height: 1.3; }
.post-nav a:hover .post-nav-title { color: #005b86; }

@media screen and (max-width: 599px) {
    .post-nav { flex-direction: column; }
    .post-nav .post-nav-next { text-align: left; margin-left: 0; }
}