/*
Theme Name: TempSlate Child
Theme URI: https://newharvest.ca/
Description: Rather than customize Tempslate itself, use this child theme instead. That way, we can actually update Tempslate in the future, without having to do a bunch of migration work.
Author: Karyl Gilbertson, New Harvest Media
Author URI: https://newharvest.ca/who-we-are/
Template: tempslate
Version: 3.3
License: GPLv2
License URI: https://wordpress.org/about/gpl/
Text Domain: tempslate
Tags: two-columns, right-sidebar
*/


/* ==== GENERAL ==== */

.logged-in #wp-admin-bar-support-link {
    display: none;
}

:root {
    --lt-purple: #948ca1;
    --md-purple: #706682;
    --dk-purple: #291a44;
    --lt-green: #a9cdb8;
    --md-green: #5ea67e;
    --dk-green: #0d793e;
    --orange: #e19632;
}

body {
    font-size: 18px;
    line-height: 1.5;
}

.row-wrapper>* {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--dk-green);
    line-height: 1;
}

.alignleft {
    margin: 0 2em 1em 0;
}

.alignright {
    margin: 0 0 1em 2em;
}


/* ==== TURNING OFF FILE TYPE ICONS ==== */

#content .entry-content a:after {
    content: '';
    margin: 0;
}


/* ==== ONE-CLICK ACCESSIBILITY ==== */

#pojo-a11y-toolbar {
    top: 88%;
}

#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
    border-radius: 50% 0 0 50%;
}

/* ==== HEADER - CONTAINERS ==== */

.header-wrapper {
    position: absolute;
    width: 100%;
    z-index: 99;
    background: url('images/top_bar2.svg#svgView(preserveAspectRatio(none))') 0 0 no-repeat;
    background-size: 100% 183px;
}

.fl-responsive-preview-enabled .header-wrapper {
    display: none;
}

header {
    font-size: 1em;
    line-height: 1;
}

header ul.sid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
}

header ul.sid li.widget-container {
    width: auto;
    margin: 0;
}

/* ==== HEADER - LOGO & NAV ==== */

header #site-branding {
    flex-grow: 1;
    color: #fff;
    padding: 1em 0 1em 1em;
}

header #site-branding p {
    margin: 0;
}

header #site-branding img.site-logo {
    margin: 0 1em 0 0;
}

header #site-branding h2.site-title {
    font-size: 1.5em;
    margin: 0 0 .5em;
    line-height: .9;
}

header #site-branding h2.site-title a {
    color: var(--lt-green);
    text-decoration: none;
}

header #site-branding p.site-tagline {
    font-size: 1.1vw;
}

header #header-menu {
    margin: 0;
}

header #header-menu ul.menu {
    display: flex;
    justify-content: flex-end;
    padding: 0 .85em;
    font-size: .9em;
    line-height: 1em;
    letter-spacing: 1px;
    text-transform: uppercase;
}

header #header-menu ul.menu li a {
    padding: 1.33em .67em;
    transition: all .2s ease;
}

header #header-menu ul.menu li:hover>a {
    color: var(--lt-green);
    background: none;
}

/* Dropdowns */

header #header-menu ul.menu li ul.sub-menu {
    display: none;
    position: absolute;
    background: var(--dk-purple);
    width: 300px;
    padding: .5em 0;
    margin: 0 0 0 -.55em;
    border-radius: .5em;
    border-top: 3px solid var(--dk-green);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
    z-index: 9999;
}

header #header-menu ul.menu li ul.sub-menu::before {
    content: '\f0d8';
    color: var(--dk-green);
    font: bold 1.5em 'Font Awesome 5 Free';
    position: absolute;
    top: -.75em;
    right: calc(66.67% - .3333em);
}

header #header-menu ul.menu li ul.sub-menu li a {
    padding: .5em 1em;
    line-height: 1.2;
    text-transform: capitalize;
}

/* ==== HEADER - SEARCH BUTTON & FORM ==== */

header #header-search {
    flex-grow: 0;
    margin: 0;
    border-left: 1px solid #fff;
    border-image: linear-gradient(to top, transparent, rgba(255, 255, 255, .5)) 1;
}

header #header-search .search-toggle-button {
    color: #fff;
    cursor: pointer;
    padding: 1.1em 1.5em;
    line-height: 1.2;
}

header #header-search .search-toggle-button.active {
    color: #fff;
}

header #header-search .search-wrapper {
    display: none;
    position: absolute;
    width: 300px;
    background: var(--dk-purple);
    padding: 1em;
    /* Negative margin offset by button padding + half of icon */
    margin: 0 0 0 calc(-150px + 1.5em + .5em);
    border-radius: .5em;
    border-top: 3px solid var(--dk-green);
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .33);
    z-index: 999;
}

header #header-search .search-wrapper::before {
    content: '\f0d8';
    color: var(--dk-green);
    font: bold 1.5em 'Font Awesome 5 Free';
    position: absolute;
    top: -.75em;
    right: calc(50% - .3333em);
}

header #header-search .search-wrapper #search-form #search-input,
header #header-search .search-wrapper #search-form #search-submit {
    margin: 0;
    padding: .25em .5em;
    font-size: 1em;
    line-height: 1;
    border: 1px solid var(--dk-green);
}

header #header-search .search-wrapper #search-form #search-input {
    border-right: none;
}

header #header-search .search-wrapper #search-form #search-submit {
    color: #fff;
    background: var(--dk-green);
}

/* ==== TRANSLATION STUFF ==== */

header #header-gtranslate {
    display: none;
}

header #header-flags {
    margin: 0;
    padding: 1.15em 1.5em;
    border-left: 1px solid #fff;
    border-image: linear-gradient(to top, transparent, rgba(255, 255, 255, .5)) 1;
}

header #header-flags div.textwidget {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5em;
}

header #header-flags div.can-lang-popup {
    display: none;
    position: absolute;
    color: #ccc;
    background: #fff;
    margin: 2.1em 0 0 -3.67em;
    font-size: .8em;
    padding: .67em;
    border-radius: .5em;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
}

header #header-flags div.can-lang-popup:before {
    content: '\f0d8';
    font: bold 1em 'Font Awesome 5 Free';
    color: #fff;
    position: absolute;
    top: -.6em;
    left: calc(50% - .33em);
}

header #header-flags a.flag {
    width: 30px;
    height: 18px;
    display: inline-block;
    background: url('images/flags_spritesheet.png') 0 0 no-repeat;
    background-size: auto 100%;
    font-size: 0;
    margin: 0 .5em;
}

header #header-flags a.flag.french {
    background-position: -30px 0;
}

header #header-flags a.flag.spanish {
    background-position: -60px 0;
}

header #header-flags a.flag.german {
    background-position: -90px 0;
}

header #header-flags a.flag.italian {
    background-position: -120px 0;
}

header #header-flags a.flag.chinese {
    background-position: -150px 0;
}


/* ==== FULL-WIDTH ==== */

main.full-width {
    max-width: 100%;
}

#content {
    padding: 0;
}

.post-thumbnail-wrapper {
    position: relative;
    height: 500px;
    overflow: hidden;
    margin: 0 0 4rem;
}

.post-thumbnail-wrapper #post-thumbnail-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('images/banner_overlay.svg') center bottom no-repeat;
    background-size: cover;
}

.post-thumbnail-wrapper #post-thumbnail-image {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
}

.page-title {
    color: var(--dk-green);
    max-width: 1200px;
    margin: 0 auto .5em;
    padding: 0;
    font-size: 3em;
    letter-spacing: -2px;
    line-height: 1.5em;
    border-bottom: 2px solid var(--lt-green);
}

.home .page-title {
    display: none;
}

.archive .entry-title {
    max-width: 1200px;
    margin: 2em auto .5em;
}

.entry-meta {
    max-width: 1200px;
    margin: 0 auto;
}

.entry-content,
.archive #content {
    /* margin: 0 0 5rem; */
}

.home .entry-content {
    margin: 0;
}

.archive .entry-summary {
    max-width: 1200px;
    margin: 0 auto;
}

.entry-utility {
    background: rgba(41, 26, 68, .1);
    max-width: 1200px;
    margin: 0 auto 2em;
    border-radius: 10px;
}

span.edit-link {
    display: none;
}

.pillar-projects h2 a {
    text-decoration: none;
}

.pillar-projects h2 a:hover {
    text-decoration: underline;
}

.pillar-projects img {
    box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
}


/* ==== PHOTO GALLERIES ==== */

#content .gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: top;
    justify-content: space-between;
}

#content .gallery br {
    display: none;
}

#content .gallery .gallery-item {
    float: none;
    max-height: 120px;
    margin: 10px 0 0;
    overflow: hidden;
}

#content .gallery .gallery-item .gallery-icon img {
    display: inline-block;
}

#content .gallery .gallery-item .gallery-icon.portrait img {
    margin-top: -60px;
}

form.post-password-form {
    max-width: 1200px;
    margin: 0 auto;
}

.fl-social-buttons {
    line-height: 1;
}

.fl-social-buttons .fl-social-button.fl-fb {
    top: 0;
}

.fl-social-buttons .fl-social-button.fl-fb span,
.fl-social-buttons .fl-social-button.fl-twitter,
.fl-social-buttons .fl-social-button.fl-fb iframe,
.fl-social-buttons .fl-social-button.fl-twitter iframe {
    height: 20px !important;
    vertical-align: top;
}


/* ==== SEARCH RESULTS ==== */

.search #content {
    max-width: 1200px;
    margin: 235px auto;
}

.search #content>div {
    margin: 2em 0;
}


/* ==== FOOTER ==== */

footer {
    font-size: 1em;
    padding: 0 20px;
}

.footer-1-wrapper,
.footer-1-wrapper footer {
    background: var(--md-purple);
}

#footer-1 .widget-container,
#footer-1 .widget-container:first-child {
    padding: 40px 20px;
}

footer .widget-title {
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

footer a.button {
    color: #fff;
    padding: 1em 2em;
    text-align: center;
    box-shadow: none;
}

#footer-1,
#footer-1 a,
#footer-1 .widget-title {
    color: #fff;
}

#footer-contact strong {
    float: left;
    margin: 0 .5em 0 0;
    width: 20%;
}

#footer-contact strong:first-child {
    margin-bottom: 1.5em;
}

#footer-1 a.button {
    display: block;
    background: #4b3f62;
}

#footer-2 ul.sid {
    align-items: center;
}

#footer-2 .widget-container,
#footer-2 .widget-container:first-child {
    padding: 20px;
}

#footer-2 #custom_html-4 {
    text-align: left;
}

#footer-2 #text-3 {
    text-align: center;
}

#footer-2 #text-3 p,
#footer-2 .alignright {
    margin: 0;
}

#footer-2 a.button {
    margin: 0;
    color: #fff;
    background: var(--dk-green);
    letter-spacing: normal;
    text-transform: none;
}


/* ==== RESPONSIVE ==== */

@media all and (max-width: 1470px) and (min-width: 1276px) {
    header ul.sid li.widget-container {
        width: unset;
    }
    header ul.sid li.menu-item-home {
        display: none;
    }
    header #site-branding {
        flex-grow: 0;
    }
    header #header-menu {
        flex-grow: 1;
    }
}

@media all and (max-width: 1275px) {

    .logged-in .display-name {
        display: none;
    }

    .header-wrapper {
        position: static;
        background: var(--dk-purple);
        background: linear-gradient(135deg, #5d4d7a 0%, #291a44 100%);
        overflow: auto;
    }

    header ul.sid {
        display: grid; 
        grid-template-columns: 262px 2fr 1fr; 
        grid-template-rows: 1fr 1fr; 
        gap: 0px 0px; 
        grid-template-areas: 
          "branding search lang"
          "branding nav nav";
    }

    header #site-branding {
        max-width: 310px;
        grid-area: branding;
    }

    header #site-branding img.site-logo {
        max-width: min(95px, 30.7%);
        width: auto;
    }

    header #site-branding h2.site-title {
        font-size: 1.1em;
        line-height: 1.2;
    }

    header #site-branding p.site-tagline {
        font-size: 0.9em;
    }

    header #header-menu {
        grid-area: nav;
        align-self: flex-end;
    }

    header #header-menu ul.menu li a {
        letter-spacing: normal;
    }

    header #header-menu ul.menu li ul.sub-menu {
        right: 0;
    }

    header #header-menu ul.menu li ul.sub-menu::before {
        right: 30%;
    }

    header #header-search {
        grid-area: search;
        text-align: right;
        border-left: none;
    }

    header #header-search .search-toggle-button {
        display: inline-block;
    }

    header #header-search .search-wrapper {
        margin: 0.1em 0 0 4.4em;
    }

    header #header-gtranslate,
    header #header-flags {
        grid-area: lang;
    }

    .home .fl-row:first-child {
        margin-top: 0;
    }

    .post-thumbnail-wrapper {
        height: 250px;
        margin: 0 0 1rem;
    }

    .page-title {
        margin: 0 2rem .5em;
    }

    .home .entry-content .fl-row-full-width.fl-row-bg-none:first-child {
        padding-left: 0;
        padding-right: 0;
    }

    #footer-1 .widget-container {
        min-width: 50%;
        flex-basis: 1 1 50%;
    }

    #footer-2 {
        font-size: .8em;
    }
}

/* 782px is where the WP admin bar switches to "mobile mode" */

@media all and (max-width: 782px) {

    /* Fixing the weird GTranslate <html> added margin thing */

    .logged-in html[lang] {
        margin-top: 0 !important;
    }

    .logged-in body {
        padding-top: 46px !important;
    }
}

@media all and (max-width: 767px) {

    header ul.sid {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    header #site-branding h2.site-title {
        font-size: 1.33em;
        line-height: 1.21;
    }

    header #site-branding p.site-tagline {
        font-size: 1.1em;
    }

    header #header-menu ul.menu {
        justify-content: space-between;
        line-height: 1.2;
    }

    header #header-menu ul.menu > li:first-child {
        text-align: center;
    }

    header #header-menu ul.menu > li > a {
        font-size: min(4vw, 1em);
        text-align: center;
        max-width: 23vw;
    }

    header #header-menu ul.menu li ul.sub-menu,
    header #header-search .search-wrapper {
        width: 100%;
        left: 0;
        margin: 0;
        padding: 1em;
    }
    
    header #header-menu ul.menu li ul.sub-menu::before {
        right: 17%;
    }

    header #header-search .search-wrapper::before {
        left: 12%;
        right: auto;
    }

    header #header-menu ul.menu li ul.sub-menu li a {
        padding: .75em .5em;
        text-align: left;
    }

    header #header-search,
    header #header-flags {
        border-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .5)) 1;
    }

    header #header-search .search-toggle-button,
    header #header-flags {
        padding: 1em 5vw;
    }

    header #header-flags a.flag {
        margin: 2px .5em;
    }

    #footer-1 .widget-container {
        width: 100%;
    }

    #footer-contact strong {
        width: 30%;
    }

    #footer-contact strong:first-child {
        margin-bottom: 2.5em;
    }

    .page-title {
        font-size: 2.75em;
        margin: 0 20px 20px;
    }
}