/* Fixes and additions layered on top of theme.css (the verbatim Blogger theme).
   Loaded after it, so anything here is a deliberate change. */

/* Footer: the theme leaves #jugas_footer absolutely positioned with no positioned
   ancestor, so it lands ~780px down every page instead of below the content. */
#outer-wrapper {
  position: relative;
  padding-bottom: 115px; /* matches #jugas_footer's height */
}

#jugas_footer {
  left: 0;
  right: 0;
  width: auto;
  margin-left: 0;
}

/* Header: #header's 10px symmetric padding leaves an uneven gap, because
   #header-inner is inline-block and its baseline descender adds ~6px under the
   logo but nothing above it. Measured on the wide layout the icon row sits 30px
   above the wordmark and the first card 20px below; +10px evens it up. The
   narrow layout already zeroes the bottom padding and is left alone. */
@media only screen and (min-width: 769px) {
  #header {
    padding-bottom: 20px;
  }
}

/* Below 1200px the theme adds margin-top: 15px to #main-wrapper, which lands in
   the same gap; the header gives back those 15px so it stays 26px. */
@media only screen and (min-width: 769px) and (max-width: 1200px) {
  #header {
    padding-bottom: 5px;
  }
}

/* Post and page layouts open with padding: 30px 0 30px on #main-wrapper; the
   header already carries the gap under the logo, so the top half goes. */
.item #main-wrapper,
.statc_page #main-wrapper {
  padding-top: 0;
}

/* The compact bar, on every page: 78px tall, with both children centred on its
   midline. The theme positions them absolutely from the bar's top edge, so each
   offset is set by hand — the wordmark is 38px tall, and the icon table is 60px
   with its glyphs riding 29px down its own line box. The post-page bar is a
   flex row (see below) and centres the wordmark itself. */
.bottomMenu {
  height: 78px;
}

.bottomMenu img {
  margin-top: 20px; /* (78 - 38) / 2 */
}

.bottomMenu .socialsearch {
  margin-top: 10px; /* 39 - 29, putting the glyphs on the midline */
}

/* Post pages use the compact bar as their header: no masthead, no top bar, and
   the bar stays put instead of fading in on scroll. The theme hides it below
   768px, where it falls back to the icons-plus-magnifier row it already has. */
.item .bottomMenu.header-static {
  display: block;
  visibility: visible;
  opacity: 1;
  transition: none;
}

/* The bar is position: fixed, so the emptied header reserves its 58px. */
.item #header-wrapper {
  height: 78px;
}

/* The theme pins the wordmark left and the icons right absolutely, which is
   fine for a 1190px bar but overlaps below ~650px. As a flex row the wordmark
   shrinks instead. Both children keep their own internal metrics, so the icons
   and the search box sit exactly where they do in the scroll-triggered bar. */
.item .bottomMenu.header-static {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 0;
}

.item .bottomMenu.header-static > a {
  min-width: 0;
  flex: 0 1 auto;
  line-height: 0;
}

.item .bottomMenu.header-static img {
  position: static;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.item .bottomMenu.header-static .socialsearch {
  position: static;
  flex: 0 0 auto;
  align-self: flex-start; /* same 5px offset the index bar gets, to the pixel */
  padding: 0;
}

/* the 15px the theme gives the bar's contents everywhere the layout is gutter-
   aligned; above 1250px the bar is 1190px wide and flush with the content */
@media only screen and (max-width: 1250px) {
  .item .bottomMenu.header-static {
    padding: 0 15px;
  }
}

/* the panel drops out of the bar rather than out of the top-bar row */
.item .bottomMenu.header-static .mobile-search {
  top: 39px;
  right: 15px;
  width: calc(100% - 30px);
}

@media only screen and (min-width: 1251px) {
  .item .bottomMenu.header-static .mobile-search {
    right: 0;
    width: 100%;
  }
}

/* The theme sets the post's date line in italic Roboto. */
.post-meta {
  font-style: normal;
}

/* A little air after the calendar glyph. Both selectors, because the Font
   Awesome kit swaps the <i class="fa"> for an <svg class="svg-inline--fa">,
   dropping the bare "fa" the theme's own 5px rule matches on — so once the kit
   loads that rule stops applying and the glyph sits flush against the date. */
.post-timestamp .fa,
.post-timestamp .svg-inline--fa {
  margin-right: 5px;
}

/* A post's opening video is hoisted above the date and title, so it carries the
   gap the first paragraph would otherwise have left under the header. */
.post-lead-video {
  margin-bottom: 20px;
}

/* The theme sizes .responsivevid object; the dead Flash embeds are now iframes. */
.responsivevid iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The theme floats cards at a percentage width plus a fixed pixel gutter, so the
   third card wrapped just below each breakpoint (770-775, 885-910, 985-995px).
   Grid subtracts the gutters before sizing the columns. */
.index .post-grid,
.archive .post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  align-items: start;
}

.index .post-grid-item,
.archive .post-grid-item {
  width: auto;
  float: none;
  margin: 0;
}

.related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* 15px column gap matches the post grid, so the columns are the same width */
  gap: 20px 15px;
  align-items: start;
  list-style: none;
  margin: 0;
  padding: 0;
}

.related li {
  width: auto;
  float: none;
  margin: 0;
  min-height: 0;
}

/* The theme crops these to 180px while the post grid uses 260px, so the two
   read as different shapes. Same height, same column width, same ratio. */
.related-thumb,
.related li .related-img {
  height: 260px;
}

@media only screen and (max-width: 880px) {
  .index .post-grid,
  .archive .post-grid,
  .related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 600px) {
  .index .post-grid,
  .archive .post-grid,
  .related {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The hover title overlay is pinned to a hard-coded 260px in the theme; tie it
   to the card instead so it keeps covering the thumbnail at any size. */
.block-image .retitle {
  height: 100%;
  width: 100%;
}

/* The theme hides #hbz-searchbox below 480px and puts nothing in its place. Below
   that width a magnifier opens the panel defined further down. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* the toggle only exists where the theme has hidden the search box */
.search-toggle-cell { display: none; }

/* Baseline-aligned like the sibling <a> glyphs; the padding gives a 34px tap
   target, since an icon-only button collapses to 0x0 if the icon kit is blocked. */
.search-toggle {
  display: inline-block;
  vertical-align: baseline;
  width: auto;
  height: auto;
  padding: 9px;
  margin: -9px 0;
  border: 0;
  background: none;
  color: #bbb;
  font-size: inherit;
  line-height: 0;
  cursor: pointer;
  transition: color 0.3s;
}
.search-toggle:hover,
.search-toggle[aria-expanded='true'] { color: #fff; }
.search-toggle:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }

/* the drop-down panel: black, with the field on a plain white underline */
/* Anchored to the icon row it replaces, not the viewport: a full-width fixed bar
   was 63px tall and there are only 51px above the masthead, so it clipped the
   logo. Centred on the row and sized to the toggle it stands in for. */
.mobile-search {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: calc(100vw - 30px); /* #outer-wrapper's 15px padding each side */
  height: 34px;              /* the height of .search-toggle */
  z-index: 1000000;          /* above the theme's sticky .bottomMenu (999999) */
  background: #000;
  padding: 0;
}
.mobile-search[hidden] { display: none; }

.mobile-search form {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  margin: 0;
}

/* Bootstrap 2.3.2's input[type="search"] (0,1,1) outranks a lone class selector,
   forcing white, a radius, an inset shadow and a 10px bottom margin. Hence the
   two-class selectors and the explicit resets. */
.mobile-search .mobile-search-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 34px;
  margin: 0;
  padding: 0 2px;
  box-sizing: border-box;
  vertical-align: middle;
  color: #fff;
  font-family: Roboto, sans-serif;
  font-size: 16px; /* keeps iOS from zooming the page on focus */
  line-height: 34px;
  background: transparent;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid #fff;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  caret-color: #fff;
  -webkit-appearance: none;
  appearance: none;
  transition: none;
}

.mobile-search .mobile-search-input:focus {
  color: #fff;
  background: transparent;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid #fff;
  border-color: transparent transparent #fff;
  box-shadow: none;
  outline: none;
}

.mobile-search .mobile-search-input::placeholder {
  color: #777;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85em;
}

/* the theme also paints every autofilled input white; keep this one black */
.mobile-search .mobile-search-input:-webkit-autofill,
.mobile-search .mobile-search-input:-webkit-autofill:hover,
.mobile-search .mobile-search-input:-webkit-autofill:focus,
.mobile-search .mobile-search-input:autofill {
  -webkit-box-shadow: 0 0 0 1000px #000 inset;
  box-shadow: 0 0 0 1000px #000 inset;
  -webkit-text-fill-color: #fff;
}

/* drop the browser's own clear button on type=search */
.mobile-search .mobile-search-input::-webkit-search-cancel-button,
.mobile-search .mobile-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.mobile-search .mobile-search-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #bbb;
  font-size: 16px;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  transition: color 0.3s;
}
.mobile-search .mobile-search-btn:hover { color: #fff; }
.mobile-search .mobile-search-btn:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }

@media only screen and (max-width: 480px) {
  /* The theme zeroes .smallelement's right padding here, so the whole gap comes
   from this side: 1px plus the button's own 9px matches the other icons' 10px. */
  .search-toggle-cell { display: table-cell; padding-left: 1px; }
  /* the popup anchors to this row so it lands in the band it replaces */
  .top-bar-social { position: relative; }

  /* The panel is 34px in a 51px band, so it would sit 14px below the top edge
     and only 3px above the masthead. While it is open, drop the masthead by the
     difference so the gaps match. Closed, the layout is untouched. */
  .search-open #header { margin-top: 11px; }
  #header { transition: margin-top 0.18s ease; }
}

/* above the breakpoint the theme's own search box is back, so neither the
   toggle nor the panel should ever appear */
@media only screen and (min-width: 481px) {
  .search-toggle-cell,
  .mobile-search { display: none !important; }
}

/* The pager is real markup and works with JS off. .pager-enhanced retires it once
   the script is driving the feed; a failed fetch removes the class again. */
#feed-sentinel {
  width: 100%;
  height: 1px;
}

.feed-status.is-empty {
  min-height: 0;
  margin: 0;
}

.feed-status {
  clear: both;
  min-height: 1.2em;
  margin: 10px 0 0;
  color: #bbb;
  font-family: Roboto, sans-serif;
  font-size: 0.85em;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
}

#blog-pager.pager-enhanced { display: none; }

/* The theme reveals a card's title only on hover, so a phone showed unlabelled
   thumbnails. Where there is no hover to give, show it over a gradient instead. */
@media (hover: none), (pointer: coarse) {
  .post-grid-item .block-image .retitle,
  .post-grid-item .block-image:hover .retitle {
    opacity: 1;
    background-color: transparent;
    background-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.72) 28%,
      rgba(0, 0, 0, 0.25) 58%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  /* display:table sizes to its content, so long titles ran past the card and
   clipped instead of wrapping. */
  .post-grid-item .block-image .retitle,
  .post-grid-item .block-image:hover .retitle {
    display: flex;
    align-items: flex-end;
  }

  .post-grid-item .block-image .post-retitle {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .post-grid-item .block-image .post-retitle h2 {
    width: 100%;
    /* the theme does not set a global border-box, so width:100% plus padding
       would push the text past the edge of the card */
    box-sizing: border-box;
    margin: 0;
    padding: 0 14px 13px;
    line-height: 1.2; /* the theme's 0.8em collides on a two-line title */
    overflow-wrap: break-word;
  }

  .post-grid-item .block-image .post-retitle h2 a {
    color: #fff; /* permanent text over a photo needs the extra contrast */
    font-size: 16px;
  }
}

/* The theme absolutely positions .home-link (left:50% + translate) straight onto
   the chevrons. Three columns instead. The row is pinned because .home-link comes
   last in the markup and would otherwise auto-place onto a second row. */
#blog-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 12px;
}

/* the chevrons sit inside spans whose line box adds leading; flex trims it so
   all three items share one vertical centre */
#blog-pager > span {
  display: flex;
  align-items: center;
}

#blog-pager #blog-pager-newer-link {
  grid-row: 1;
  grid-column: 1;
  justify-self: start;
}

#blog-pager .home-link {
  grid-row: 1;
  grid-column: 2;
  justify-self: center;
  position: static;
  left: auto;
  transform: none;
  margin: 0;
}

#blog-pager #blog-pager-older-link {
  grid-row: 1;
  grid-column: 3;
  justify-self: end;
}

/* the theme nudges the arrows sideways to clear the absolute home icon */
#blog-pager .blog-pager-newer-link,
#blog-pager .blog-pager-older-link {
  margin: 0;
}

/* Share: the theme's own buttons are display:none (the icons came from the
   ShareThis widget) and used Font Awesome 4 names the v6 kit cannot resolve.
   Related: .related-overlay covered the card and swallowed the hover. */
.share-box .share-art {
  display: flex;
  align-items: center;
  gap: 2px;
  float: none;
  clear: none;
  margin: 0;
  padding-left: 8px; /* breathing room after the "Share" label */
  text-align: left;
}

/* Monochrome, matching the header icons rather than the theme's brand pills. */
.share-box .share-art a,
.share-box .share-art button {
  background: none;
  /* an icon-only control collapses to nothing if the icon kit is blocked, so
     each one carries its own 28px box */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 28px;
  min-height: 28px;
  padding: 6px;
  margin: 0;
  border-radius: 0;
  font-size: 16px;
  line-height: 1;
  color: #bbb;
  transition: color 0.3s;
}

/* Colour only: anything restated here applies at (0,3,1) and would override the
   per-icon sizes below — that is what made Facebook and email resize on hover. */
.share-box .share-art a:hover,
.share-box .share-art button:hover,
.share-box .share-art .cpy-art.is-copied {
  background: none;
  color: #fff;
}

.share-box .share-art button {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

/* the theme hides every span inside .share-art (they were responsive labels) */
.share-box .share-art .share-feedback {
  display: inline;
  color: #bbb;
  font-family: Roboto, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* the inline X mark, sized like Font Awesome's own inline SVGs */
.x-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.related-overlay {
  pointer-events: none;
}

/* Bootstrap's a:hover underline (0,1,1) survives the theme's .related-title
   a:hover, which only sets colour. */
.related-title a:hover,
.related li .related-img:hover {
  text-decoration: none;
}

.related li:hover .related-img {
  transform: scale(1.05);
  opacity: 0.5;
}

/* The theme draws this with content:"\f1e0" in a webfont, a codepoint that
   postdates the 3.2.1 stylesheet still linked in the head. A real icon element
   renders it through the kit instead. */
.share-title::before {
  content: none;
}

.share-title i,
.share-title svg {
  margin-right: 8px;
}

/* JamComments renders inline HTML, so only the heading and spacing are ours. */
.post-comments {
  clear: both;
  margin: 30px 0 10px;
}

.post-comments-title {
  margin: 0 0 14px;
  color: #fff;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

#cusdis_thread iframe {
  width: 100%;
  border: 0;
}

/* Equal font-size is not equal apparent size. Measured ink height at 16px:
   facebook-f 16.0, reddit 14.0, link 14.0, x-twitter 13.0, envelope 12.0.
   These two nudges bring the set to a 13-14px spread. */
.share-box .share-art .fac-art {
  font-size: 14px;
}

.share-box .share-art .eml-art {
  font-size: 18px;
}

/* The theme draws the search button's magnifier from two pseudo-elements, which
   reads differently from the Font Awesome glyph the search toggle uses. Use the
   icon in both places. */
.hbz-submit::before,
.hbz-submit::after {
  content: none;
}

.hbz-submit {
  /* the theme gives this a 35px box inside a 25px slot and centres it with a
     negative margin, leaving the glyph a pixel low; fill the slot instead */
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1;
}