/*
Theme Name: PhotoBlogster Child
Template: photoblogster
Version: 1.0.8
Description: Child theme for PhotoBlogster. Home page aesthetic tweaks: header text shadow, no pink accents, no "+" badge on thumbnails, and a lift-up hover effect on story cards.
Author: ptenser
Text Domain: photoblogster-child
*/

/* ==========================================================================
   1. Header text shadow (front-page site title)
   ========================================================================== */
.frontpage-site-title {
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   2a. Remove the "+" badge from the top-left corner of each story thumbnail
   ========================================================================== */
span.readmore-button {
    display: none;
}

/* ==========================================================================
   2b. Remove pink as a theme color
   Replacements reuse colors already present elsewhere in the theme:
   - #fff on the dark photo-overlay badges, to match .entry-title there
   - #201e2c (the theme's own dark navy overlay color) for the featured badge
     and for plain text links that were pink
   ========================================================================== */
span.featured-button {
    background: #201e2c;
}

.post-thumbnail-wrap .entry-date {
    color: #fff;
}

.frontpage-site-description {
    color: rgba(255, 255, 255, 0.85);
}

#secondary .widget #recentcomments a,
#secondary .widget .rsswidget {
    color: #201e2c;
}

.next-article a,
.next-post a,
.prev-article a,
.prev-post a {
    color: #201e2c;
}

/* ==========================================================================
   4. Lift the whole story card up slightly on mouseover
   ========================================================================== */
.post-content {
    transition: transform 0.25s ease-in-out;
}

.post-content:hover {
    transform: translateY(-8px);
}

/* ==========================================================================
   5. Widget area between the 1st and 2nd home-page story thumbnails
   Sized the same as `.article-grid-container article` (style.css:598-606)
   so it sits inline as its own slot in the story grid, not a full-width band.
   ========================================================================== */
.article-grid-container {
    /* A widget can be a different height than the fixed-height story cards;
       without this, flex's default stretch would pull cards taller too,
       leaving a blank gap below their thumbnail image. */
    align-items: flex-start;
}

.article-grid-container .home-widget-area {
    /* No padding/background here -- the widget itself supplies its own box
       styling. Adding any here would make this wrapper taller than its one
       child, so it would no longer match the thumbnail cards' height. */
    width: 100%;
    display: inline-block;
    overflow: hidden;
    max-width: 30%;
    margin-top: 0;
    margin-bottom: 35px;
    flex: 1 1 30%;
    box-sizing: border-box;
}

.home-widget-area .widget {
    margin-bottom: 0;
}

.home-widget-area .widget-title {
    margin-top: 0;
}

/* Keep the widget's column width matching the theme's own responsive
   breakpoints for .article-grid-container article (style.css:1977-1981,
   2163-2166), which go to 2-column then single-column on narrower screens. */
@media (max-width: 991px) {
    .article-grid-container .home-widget-area {
        max-width: 48%;
        flex: 1 1 48%;
    }
}

@media (max-width: 767px) {
    .article-grid-container .home-widget-area {
        max-width: 100%;
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   6. Every header/nav bar: match the footer's dark navy (#201e2c, see parent
   style.css .site-footer), with the nav switched to light-on-dark.
   Applied site-wide (not just single posts). The ".home .lh-nav-bg-transform"
   selector + !important is needed to beat the parent theme's own !important
   rule that otherwise keeps the home-page nav transparent at all times; that
   same parent CSS also forces the nav back to plain white under 900px width
   (its own responsive override), which these universal, un-scoped rules beat
   too since this stylesheet loads after the parent's.
   ========================================================================== */
.navbar-default,
.home .lh-nav-bg-transform {
    background-color: #201e2c !important;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-link,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-text {
    color: #fff;
}

.navbar-default .navbar-link:hover {
    color: rgba(255, 255, 255, 0.75);
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}