/*
Theme Name: Scrawl Child
Template: scrawl
Description: A child theme for Scrawl with a sticky header and infinite scroll.
Author: Richard M Gademan
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: scrawl-child
*/

/* ---------- Easy-to-change settings ---------- */
:root {
    --sticky-bg: #fffdfd;   /* Scrawl's page background, so the header blends in */
    --sticky-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ---------- Sticky header ---------- */
/* Make Scrawl's own header (#masthead) sticky. */
.site-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;            /* below Scrawl's menu button (1005) and slide menu (1000) */
    background-color: var(--sticky-bg);
    transition: box-shadow 0.3s ease;
}

.site-header.scrolled {
    box-shadow: var(--sticky-shadow);
}

/* Logged in: sit below the WordPress admin bar. */
.admin-bar .site-header { top: 46px; }
@media screen and (min-width: 48.9375em) {   /* 783px+, same breakpoint Scrawl uses */
    .admin-bar .site-header { top: 32px; }
}
@media screen and (max-width: 600px) {       /* admin bar scrolls away on small phones */
    .admin-bar .site-header { top: 0; }
}

/* On desktop Scrawl fades the whole header to 30% opacity, which made the
   sticky header see-through so post text showed behind it. Keep the
   header solid and fade only its contents, so it still looks like Scrawl. */
@media screen and (min-width: 48.9375em) {
    .site-header,
    .site-header:hover,
    .sidebar-open .site-header {
        opacity: 1;
    }
    .site-header .site-branding {
        opacity: 0.3;
        transition: opacity 0.3s ease-in-out;
    }
    .site-header:hover .site-branding,
    .site-header.scrolled .site-branding,
    .sidebar-open .site-header .site-branding {
        opacity: 1;
    }
}

/* Single posts with a featured image: Scrawl locks the page wrapper to the
   window height, so a sticky header stops sticking after one screen.
   Let the wrapper grow, and size the featured image by the window instead. */
.single.has-thumbnail .site {
    height: auto;
}
.single.has-thumbnail .featured-header-image {
    height: 40vh;
}
@media screen and (min-width: 58em) {
    .single.has-thumbnail .featured-header-image {
        height: 90vh;
    }
}

/* ---------- Infinite scroll ---------- */
.scrawl-infinite-status {
    clear: both;
    min-height: 1px;
    padding: 1.5em 0 3em;
    text-align: center;
    color: #8f9699;
    font-style: italic;
}
.scrawl-infinite-status:empty {
    padding: 0;
}
.scrawl-infinite-status.is-loading::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto .75em;
    border: 3px solid #e2e7e8;
    border-top-color: #cc523e;      /* Scrawl's accent red */
    border-radius: 50%;
    animation: scrawl-spin .8s linear infinite;
}
@keyframes scrawl-spin { to { transform: rotate(360deg); } }