/*
Theme Name: Twenty Seventeen SM
Theme URI: https://pokalbiaisirdies.lt
Description: Child theme of Twenty Seventeen for pokalbiaisirdies.lt customizations (Recoleta font, header layout, Lithuanian footer)
Author: SMHOST
Template: twentyseventeen
Version: 2.36
*/

/*
 * Full customizations ported from twentyseventeen-sm-39 (working v3.8)
 * to override twentyseventeen v4.1 parent.
 * Reference: /www/pokalbiaisirdies.lt/snapshot-sm39/CUSTOMIZATIONS.md
 *
 * The working theme used a technique of renaming selectors to
 * .has-header-image1 / .custom-header-media1 (non-existent HTML classes)
 * to neutralize stock rules. This child theme instead directly overrides
 * the real selectors — child CSS loads after parent, so same-specificity
 * rules win.
 */

/*--------------------------------------------------------------
1. Custom font: Recoleta
--------------------------------------------------------------*/

@font-face {
    font-display: swap;
    font-family: recoleta-web;
    font-weight: 400;
    src: url(https://s1.wp.com/i/fonts/recoleta/400.woff2) format("woff2")
}

/*--------------------------------------------------------------
2. Body typography
--------------------------------------------------------------*/

body,
button,
input,
select,
textarea {
    font-family: recoleta-web, Georgia, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 18px;
    font-size: 1.2375rem;
}

/*--------------------------------------------------------------
3. Entry content
--------------------------------------------------------------*/

.entry-content {
    text-align: justify;
}

/*--------------------------------------------------------------
4. Layout: .wrap padding
--------------------------------------------------------------*/

.wrap {
    padding-left: 1em;
    padding-right: 1em;
}

/*--------------------------------------------------------------
5. Site branding position
--------------------------------------------------------------*/

.site-branding {
    position: absolute;
    bottom: 0;
}

/*--------------------------------------------------------------
6. Custom header min-height
   Progressive fallbacks: 500px -> 420px -> 70vh
--------------------------------------------------------------*/

.custom-header {
    min-height: 500px;
    min-height: 420px;
    min-height: 70vh;
}

/*--------------------------------------------------------------
7. Front page / home header height
   FP: 84vh (70vh + 20%)
   Also override v4.1 addition of height:100% on front-page site-branding
   (v3.8 working theme did not have this — it breaks mobile layout).
--------------------------------------------------------------*/

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
    height: 84vh;
}

@media screen and (max-width: 29.99em) {

    .has-header-image.twentyseventeen-front-page .custom-header,
    .has-header-video.twentyseventeen-front-page .custom-header,
    .has-header-image.home.blog .custom-header,
    .has-header-video.home.blog .custom-header {
        height: 75vh;
    }
}

.has-header-image.twentyseventeen-front-page .site-branding,
.has-header-video.twentyseventeen-front-page .site-branding,
.has-header-image.home.blog .site-branding,
.has-header-video.home.blog .site-branding {
    height: auto;
}

/*--------------------------------------------------------------
8. Secondary pages: override stock secondary rule
   Desktop: centered, full width (base rule values)
   Mobile (< 30em): shifted left and up, shorter header
--------------------------------------------------------------*/

.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    position: fixed;
    bottom: auto;
    top: 40%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header {
    min-height: 300px;
    min-height: 59vh;
}

/* non Front Page */
@media screen and (max-width: 29.99em) {
    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header {
        min-height: 39vh;
    }

    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
        position: absolute;
        top: 62%;
        left: 25%;
        width: 200%;
        height: auto;
    }

    .has-header-image.twentyseventeen-front-page .custom-header-media img,
    .has-header-video.twentyseventeen-front-page .custom-header-media video,
    .has-header-image.home.blog .custom-header-media img,
    .has-header-video.home.blog .custom-header-media video {
        top: 39%;
    }
}

/*--------------------------------------------------------------
9. Header image: @supports object-fit
   Override parent @supports top/left/width/height for FP.
--------------------------------------------------------------*/

@supports (object-fit: cover) {

    .has-header-image .custom-header-media img,
    .has-header-video .custom-header-media video {
        position: fixed;
        -o-object-fit: cover;
        object-fit: cover;
        top: 40%;
        left: 20%;
        -ms-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        width: 200%;
        height: 80%;
        min-height: 40%;
    }
}

/*--------------------------------------------------------------
10. Header image: @media min-width 30em (EXACT copy from sm39)
--------------------------------------------------------------*/

@media screen and (min-width: 30em) {

    .has-header-image .custom-header-media img,
    .has-header-video .custom-header-media video {
        position: fixed;
        -o-object-fit: cover;
        object-fit: cover;
        -ms-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        transform: none;
        width: 100%;
        left: 0;
        top: auto;
        bottom: -7%;
        height: 120%;
        min-height: 40%;
    }
}

/*--------------------------------------------------------------
11. Header image: @media min-width 48em (EXACT copy from sm39)
--------------------------------------------------------------*/

@media screen and (min-width: 48em) {

    .has-header-image .custom-header-media img,
    .has-header-video .custom-header-media video {
        position: fixed;
        -o-object-fit: cover;
        object-fit: cover;
        -ms-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        transform: none;
        width: 100%;
        left: 0;
        top: auto;
        bottom: 0%;
        height: 100%;
        min-height: 200px;
    }
}

/*--------------------------------------------------------------
12. Typography: @media min-width 30em
--------------------------------------------------------------*/

@media screen and (min-width: 30em) {

    body,
    button,
    input,
    select,
    textarea {
        font-size: 20px;
        font-size: 1.325rem;
    }

    h1 {
        font-weight: 300;
    }
}

/*--------------------------------------------------------------
13. Typography: @media min-width 48em
--------------------------------------------------------------*/

@media screen and (min-width: 48em) {

    body,
    button,
    input,
    select,
    textarea {
        font-size: 18px;
        font-size: 1.2rem;
    }

    .navigation-top {
        font-size: 18px;
        font-size: 1.175rem;
    }
}

/*--------------------------------------------------------------
14. Layout: @media min-width 48em
--------------------------------------------------------------*/

@media screen and (min-width: 48em) {
    .site-branding {
        position: absolute;
        bottom: 0;
    }

    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media,
    .has-header-video:not(.twentyseventeen-front-page):not(.home) .custom-header-media {
        min-height: 488px;
    }

    .twentyseventeen-front-page.has-header-image .site-branding,
    .twentyseventeen-front-page.has-header-video .site-branding,
    .home.blog.has-header-image .site-branding,
    .home.blog.has-header-video .site-branding {
        margin-bottom: 0px;
    }

    .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
    .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
    .admin-bar.home.blog.has-header-image .custom-header-media,
    .admin-bar.home.blog.has-header-video .custom-header-media {
        height: calc(100vh - 100px);
    }
}

/*--------------------------------------------------------------
15. Print
--------------------------------------------------------------*/

@media print {

    .twentyseventeen-front-page.has-header-image .site-branding,
    .twentyseventeen-front-page.has-header-video .site-branding,
    .home.blog.has-header-image .site-branding,
    .home.blog.has-header-video .site-branding {
        position: absolute;
    }
}

/*--------------------------------------------------------------
16. Mobile front page content padding
--------------------------------------------------------------*/

@media screen and (max-width: 29.99em) {

    .entry-content li {
        position: relative;
        margin-left: 0.6em;
    }
}