/* ==========================================================================
   Ghost 6 additions, loaded after main.min.css (the original Ghostium build,
   left untouched). Editor cards styled to fit Ghostium.
   Breakpoints as in src/assets/_scss/modules/_vars.scss: medium 1023px,
   small 767px.
   ========================================================================== */

/* Normal image cards keep Ghostium's figure styles (caption in the left
   margin on wide screens). Wide and full-width cards break out of the
   700px post column. */
.kg-width-wide,
.kg-width-full {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.kg-width-wide {
    width: 85vw;
    max-width: 1040px;
}

.kg-width-full {
    width: 100vw;
}

.kg-width-wide img,
.kg-width-full img {
    width: 100%;
}

/* A caption in the left margin would end up off-screen next to a wide
   image: put it centred below, like Ghostium does on smaller screens. */
.kg-width-wide figcaption,
.kg-width-full figcaption {
    position: relative;
    left: 0;
    width: 100%;
    margin-top: 10px;
    padding: 0 15px;
    text-align: center;
}

.kg-width-wide figcaption:before,
.kg-width-full figcaption:before {
    display: none;
}

/* .wrapper scrolls with overflow: auto, so 100vw (which includes a
   vertical scrollbar where scrollbars take up space) must not add a
   sideways scrollbar. */
.wrapper-post {
    overflow-x: hidden;
}

/* Embeds (YouTube, tweets, ...) centred like images */
.kg-embed-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Bookmark cards in the theme's title font instead of the system font */
.kg-bookmark-card,
.kg-bookmark-card * {
    font-family: "Open Sans", "Myriad Pro", "Lucida Grande", "Lucida Sans Unicode",
        "Lucida Sans", Geneva, Verdana, sans-serif;
}

@media only screen and (max-width: 767px) {
    /* The post column is the full screen width minus 15px padding: wide
       images go edge to edge, like full-width ones. */
    .kg-width-wide {
        width: 100vw;
    }
}

/* Bluesky share button: the butterfly logo as inline SVG inside the same
   Font Awesome box as the Twitter and Facebook icons (Font Awesome 4.1 has
   no Bluesky glyph). overflow: visible keeps Safari from clipping the wing
   tips (normalize sets svg { overflow: hidden }). */
.fa-bluesky svg {
    width: 0.84em;
    height: 0.74em;
    fill: currentColor;
    overflow: visible;
    vertical-align: -0.02em;
}