/*
Theme Name:   Twenty Seventeen Child
Theme URI:    https://elizagriffey.com/
Description:  Child theme of Twenty Seventeen for elizagriffey.com. Holds custom responsive tweaks (front-page header image behavior on mobile).
Author:       Jason Griffey
Author URI:   https://jasongriffey.net/
Template:     twentyseventeen
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  twentyseventeen-child
*/

/* ==========================================================================
   Front-page custom header on mobile
   --------------------------------------------------------------------------
   Twenty Seventeen treats the front-page header as a full-bleed hero: the
   image is object-fit:cover inside a .custom-header forced to 75vh tall, with
   the site title overlaid at the bottom. On a narrow phone that cover-crops a
   designed banner badly. Below we let the header size to the image's natural
   height and show the whole banner, scaled to width, while keeping the title
   overlaid on the bottom of the image (where the design intends it) so it stays
   legible over the gradient and doesn't leave an empty gap above the content.
   ========================================================================== */

@media (max-width: 767px) {

  /* Header sizes to the image and acts as the positioning context for the title */
  .twentyseventeen-front-page.has-header-image .custom-header {
    display: block;
    position: relative;
    height: auto;
    margin-bottom: 0;
  }

  /* Image container flows so the header height matches the image */
  .twentyseventeen-front-page.has-header-image .custom-header-media {
    position: relative;
    height: auto;
  }

  /* Show the whole banner, scaled to width, instead of cover-cropping it */
  .has-header-image .custom-header-media img {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    object-fit: initial;
    transform: none;
  }

  /* Overlay the name + tagline on the bottom of the image, as on desktop.
     z-index 3 keeps it above the .custom-header-media:before gradient (z-index 2),
     which the parent theme draws for text legibility. Pulling the title out of
     flow also removes the empty space that was appearing above the content. */
  .twentyseventeen-front-page.has-header-image .site-branding {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    margin: 0;
    padding-bottom: 0.5em;
  }

}