/*
* Theme Name: The Finger Players
* Author: Undertide LLP
* Author URI: https://undertide.co/
* Description: The Finger Players is a custom child theme of Varia, built for The Finger Players.
* Requires at least: WordPress 4.9.6
* Template: varia
* Text Domain: thefingerplayers
*/

/* Import fonts */
@font-face {
    font-display: swap;
    font-family: "Avenir";
    font-weight: 900;
    src        : url(fonts/AvenirLTStd-Heavy.otf);
}
@font-face {
    font-display: swap;
    font-family: "Avenir";
    font-weight: bold;
    src        : url(fonts/AvenirLTStd-Medium.otf);
}
@font-face {
    font-display: swap;
    font-family: "Avenir";
    font-weight: normal;
    src        : url(fonts/AvenirLTStd-Book.otf);
}

@font-face {
    font-display: swap;
    font-family: "Avenir Roman";
    font-weight: normal;
    src        : url(fonts/AvenirLTStd-Roman.otf);
}

/* Define colors */
:root {
    --green: #6b913d;
    --brand-green: #8bb853;
    --body: #f7f6f8;
    --dark: #333333;
    --light: #a5a5a5;
}

* {
    font-family: "Avenir", "Arial", "Helvetica", sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--body);
    letter-spacing: 0.23px;
    font-size: 18px;
}
#page {
    width: 100%;
}

.screen-reader-text, .hide-visually {
    display: none;
}

/* Link */
a {
    text-decoration: none;
    color: var(--dark);
}
#content a {
    color: var(--green);
}
/* Colored underlines */
#content a:hover, 
#content a:active,
footer#colophon a:hover, 
footer#colophon a:active
{
    border-bottom: 1px solid var(--green);
}
/* Exceptions to the underline and color rule */
#content .tfp-post a, /* Card */
#content .posts-archive-header a /* search and blog pagination */
{
    color: var(--dark);
}
#content .tfp-post a:hover, #content .tfp-post a:active, /* Card */
#content .posts-archive-header a:hover, #content .posts-archive-header a:active, /* search and blog pagination */
#content .tfp-carousel a:hover, #content .tfp-carousel a:active /* Carousel items */
{
    border: none !important;
}

/* button */
a.wp-block-button__link {
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 0 !important;
}
a.wp-block-button__link:hover,
a.wp-block-button__link:active {
    border: 2px solid var(--green);
}

/* Global classes */
.font-weight-normal {
    font-weight: normal;
}
.d-flex {
    display: flex;
}
.align-i-center {
    align-items: center;
}
.flex-basis-auto {
    flex-basis: auto !important;
}
.flex-grow-1 {
    flex-grow: 1 !important;
}
.ml-0 {
    margin-left: 0;
}
.mt-auto {
    margin-top: auto;
}
.mt-0 {
    margin-top: 0 !important;
}
.mt-1 {
    margin-top: .5rem;
}
.mt-2 {
    margin-top: 1rem;
}
.mt-3 {
    margin-top: 1.5rem;
}
.mt-5 {
    margin-top: 3rem;
}
.mb-0 {
    margin-bottom: 0;
}
.mb-3 {
    margin-bottom: 1.5rem;
}
.mb-5 {
    margin-bottom: 3rem !important;
}
.fw-normal {
    font-weight: normal;
}
.av-roman {
    font-family: "Avenir Roman";
}

p {
    margin-bottom: 1.5rem;
    line-height: 30px;
}
.line-height-normal {
    line-height: 44px;
}

main ul, main ol, .tfp-post-list {
    padding: 0 0 0 1.1rem;
}

/* Headings */
h2, h3, h4, h5 {
    margin-bottom: .5rem;
    font-weight: 900;
    letter-spacing: 0.3px;
}
h6 {
    margin-bottom: .5rem;
    font-weight: bold;
    font-size: 13px;
}
h1, h1.entry-title, .green {
    color: var(--green);
    font-size: 2em;
    font-weight: 900;
    margin-bottom: 1.5rem;
    letter-spacing: 0.53px;
}
.green-underline {
    color: var(--dark);
    padding-bottom: .2rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--green);
    display: inline-block;
}

/* Header */
.custom-logo {
    width: 170px;
    height: auto;
    transition: all .25s;
}
#masthead {
    padding: 2rem 5vw;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-flow: row wrap;
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    background-color: var(--body);
}
#masthead.scrolled .custom-logo {
    width: 100px;
    transition: all .25s;
}

/* Home Promo */
.home-promo  .wp-block-cover__inner-container {
    position: absolute;
    right: 5vw;
    width: auto;
    bottom: 2rem;
}
.home-promo  .wp-block-cover__inner-container::before {
    content: "";
    display: block;
    background-color: #fff;
    width: 35%;
    height: 3px;
    transform: translateX(-60%) rotate(-65deg);
}
.home-promo .read-more a {
    color: #fff;
}
.home-promo .read-more::after {
    border-left-color: #fff;
}

/* Nav menus */
#masthead nav {
    position: relative;
}
#masthead nav, .menu-primary-container {
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    flex: 1 1;
	justify-content: end;
}
.main-menu {
    margin: 0;
    padding: 0;
    display: flex;
}
.main-menu .menu-item {
    list-style: none;
}
.main-menu > .menu-item a {
    border: 2px solid transparent;
}

.main-menu .current-menu-ancestor a,
.main-menu > .current-menu-item  a{
    border-bottom: 2px solid var(--green);
}

.menu-item a {
    display: block;
    padding: .75rem 1rem .65rem;
    font-weight: 900;
    font-size: 16px;
}
.menu-item:hover a {
    border: 2px solid var(--green);
}

.menu-item-has-children {
    position: relative;
}

.sub-menu {
    display: none;
    background-color: rgba(247, 246, 248, 0.9);
    transition: all .25s;

    width: 200%;
    position: absolute;
    top: calc(100% - 2px);
    left: 0; /* Account for border*/
}
.sub-menu a {
    margin: 0;
    font-weight: bold;
    transition: all .25s;
}
.sub-menu .menu-item:not(:last-child) a {
    border-bottom: 0;
}

.menu-item-has-children:hover .sub-menu {
    display: block;
}
.menu-item-has-children:last-child:hover .sub-menu {
    left: initial;
    right: 0;
}

/* Common hover effect for button and submenu */
a.wp-block-button__link:hover, a.wp-block-button__link:active,
.sub-menu a:hover, .sub-menu a:active {
    color: var(--body) !important;
    transition: all .25s;
}
a.wp-block-button__link:hover, a.wp-block-button__link:active,
.sub-menu a:hover, .sub-menu a:active {
    background-color: var(--green) !important;
    transition: all .25s;
}

/* Toggle menu - ported from Varia */
#toggle, #toggle + label { 
    position: absolute;
    display: none; 
}

#masthead #toggle + label {
    top: -3rem;
    z-index: 2;
}

/*** Inactive state ***/
#toggle+label {
    flex-direction: column;
    justify-content: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.bar {
    height: 3px;
    background-color: var(--dark);
    margin-bottom: 5px;
}
.bar:nth-child(4) {
    margin-bottom: 0;
}
#toggle+label:hover .bar {
    background-color: var(--green);
    transition: background-color cubic-bezier(0.4, 0, 0.2, 1) .25s;
}
/*** Activated state ***/
#toggle:checked+label .bar {
    background-color: var(--green);
    margin-bottom: 0;
}
#toggle:checked+label .bar:nth-child(3) {
    height: 0;
    transition: height cubic-bezier(0.4, 0, 0.2, 1) .1s;
}

#toggle:checked+label .bar:nth-child(2) {
    transform: translate(0, 1.5px) rotate(45deg);
}
#toggle:checked+label .bar:nth-child(4) {
    transform: translate(0, -1.5px) rotate(-45deg);
}
#toggle:checked+label .bar:nth-child(2),
#toggle:checked+label .bar:nth-child(4) {
    transition: transform cubic-bezier(0.52, 1.64, 0.37, 0.66) .25s;
}

/* Main content */
.content-area, .template-content-area,
.no-padding-content-area {
    /* for single-color pages */
    padding: 5rem 5vw 3rem;
    background-color: #fff;
}
.error404 .content-area {
    min-height: 100vh;
}
.home .no-title-content-area {
    padding-top: 10rem;
}
.no-title-content-area,
.no-padding-content-area  {
    padding: 5rem 0 0;
}
.no-title-content-area > *,
.no-padding-content-area > * {
    //padding: 0 5vw;
}

.site-content ol, 
.site-content ul {
    padding-left: 1.25rem;
    margin: 1.5rem 0;
}

.no-title-content-area > ol, 
.no-title-content-area > ul,
.no-padding-content-area > ol, 
.no-padding-content-area > ul {
    padding-left: calc(5vw + 1.25rem);
}

.site-content ol li, 
.site-content ul li, 
.site-content ol p, 
.site-content ul p {
    margin-bottom: .5rem;
}

.is-style-none {
	list-style: none;
	padding-left: 0 !important;
}

/* Layouts */
.no-space * {
    margin: 0 0 .5rem;
    line-height: 1;
}

/* Careers page */
.container-with-sidebar {
    display: flex;
    flex-wrap: wrap;
}
.left-sidebar {
    flex: 0.2 0 150px;
    position: relative;
}
.left-sidebar .sticky {
    position: sticky;
    top: 17rem;
}
.left-sidebar + .content {
    flex: 1;
    padding: 0 0 0 1.5rem;
}
.left-sidebar .green-underline {
    padding-bottom: .5rem;
    display: block;
}
.left-sidebar .triangle-right::after {
    border-left-color: var(--green);
}

/* Production Header */
.single-prod-header {
    display: flex;
    justify-content: space-between;
}

/* Posts container (for cards outputted by shortcodes
and the cards-list template) */
.tfp-posts-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.tfp-posts-container {
    column-gap: 1rem;
    row-gap: 1.5rem;
}
.tfp-post-permalink {
    height: 100%;
}
.tfp-post-permalink, .tfp-post-content {
    display: flex;
    flex-direction: column;
}
.tfp-post-thumbnail {
    padding-top: 55%;
    background-color: var(--brand-green);
    background-size: cover;
    background-position: center;
}
.tfp-post-content {
    padding: 1rem;
    padding-left: 0;
    flex-grow: 1;
}

.tfp-posts-pagination {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
}

.tfp-post-tag {
	border: 1px solid #6b913d;
	background-color: #8bb853;
	font-size: 0.6em;
	text-transform: uppercase;
	padding: 2px 10px;
	border-radius: 15px;
	display: inline-block;
	color: white;
    font-weight: 900;
    margin-bottom: 1rem;
}

/* For coming soon */
.tfp-post-thumbnail.coming-soon {
    height: 100%;
}

/* For style like past productions */
.tfp-post.large {
    position: relative;
}
.tfp-post.large .tfp-post-thumbnail {
    position: relative;
    z-index: 1;
    padding-top: 150%;
    filter: grayscale(0);
	will-change: filter;
    transition: all .25s;
}
.tfp-post.large .tfp-post-content {
    position: absolute;
    bottom: 0;
    z-index: 1;
    padding: 1rem;
    color: #fff;
}
.tfp-post.large:hover .tfp-post-thumbnail {
    filter: grayscale(100) brightness(0.5);
    transition: all .25s;
}
.tfp-post.large .read-more::after {
    border-left-color: #fff;
}

/* This pagination appears in 
the search results page */
.posts-archive-header, .posts-navigation .nav-links {
    display: flex;
    align-items: center;
}
.posts-archive-header {
    justify-content: space-between;
    margin-bottom: 2rem;
}

/* For latest press release */
.latest-press .news-header {
    margin-top: 100%;
}

/* For Media releases */
.card figure {
    height: calc(0.55 * ((90vw - 2rem)/3));
    overflow: hidden;
    margin-bottom: 1rem;
}
.card .wp-block-image img {
    object-position: center 29%;
    object-fit: cover;
    height: 100%;
}

/* Single post */
.single-post {
    display: flex;
    flex-flow: row wrap;
}
.single-post-header + .attachment-post-thumbnail {
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
}
.single-post-content {
    margin-right: 1.5rem;
    flex: 1 1 60vw
}
.single-post-sidebar {
    flex: 1 1 15vw;
    position: relative;
}
.single-post-sidebar .sticky {
    padding: .5rem;
    top: 53px; /* 43px + 16px - (8px of .sticky padding) */
    position: relative;
}

/* Social links */
ul.social-links-menu {
    display   : flex;
    padding   : 0;
}

ul.social-links-menu li {
    padding: 0 .5rem;
    margin-left: 0;
}

ul.social-links-menu li svg {
    width : 40px;
    height: 40px;
}

/* Contact forms - consider putting this in Additional CSS */
.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 .5rem;
}
.contact-form label {
    display: none !important;
}
#comments input,
#comments textarea,
.contact-form input,
.contact-form textarea, 
.contact-form select,
.form-control {
    margin-bottom: .5rem !important;
    padding: .5rem .75rem;
    border: 2px solid var(--green);
    background: transparent;
    width: 100% !important;
    font-size: 1rem !important;
}

#comments input,
#comments textarea,
.contact-form input:focus,
.contact-form textarea:focus, .contact-form select:focus,
.form-control:focus, .search-input:focus {
    outline: none;
}
.grunion-field-wrap.grunion-field-textarea-wrap {
    grid-column: 1/3;
}
.contact-form .contact-submit {
    grid-column: 2/3;
    text-align: right;
}
.contact-form .wp-block-button__link {
    background-color: transparent;
    border: 2px solid var(--green);
    color: var(--green);
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 0;
}

.blog .tfp-tag-filter {
    width: auto !important;
    margin-bottom: 0 !important;
    margin-left: auto;
    margin-right: 1rem;
    flex: 0 1 auto;
}

/* Footer#colophon version */
footer#colophon .social-links-menu li {
    padding: 0 .25rem;
}

footer#colophon .social-links-menu li svg {
    width : 30px;
    height: 30px;
}

/* Past productions */
.past-productions {
    position: relative;   
}
.past-productions .prev, .past-productions .next {
    position: absolute;
    top: calc(1.5rem + 50%);
    z-index: 1;
    cursor: pointer;
}
.past-productions .prev {
    left: 0.5rem;
}
.past-productions .next {
    right: 1.5rem;
}
.tfp-carousel-pagination {
    padding: 1rem;
    display: flex;
    justify-content: center;
}
.circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--light);
    margin-right: .5rem;
    cursor: pointer;
}
.circle.active {
    background-color: var(--dark);
}
.circle:last-child {
    margin-right: 0;
}
.tfp-carousel {
    display: flex;
    overflow: hidden;
}
.tfp-carousel-item {
    position: relative;
    margin-right: 1rem;
    color: #fff;
    min-height: 40vw;
    background-size: cover;
    background-position: center;
    background-color: transparent;
    background-blend-mode: overlay;
    transition: all .25s;
}
.single-year-title, .single-year ul li a {
    display: block;
    padding: 1rem;
}
.tfp-carousel-item:hover {
    background-color: rgb(20, 20, 20, 0.5);
    transition: all .25s;
}
.tfp-carousel-item:hover ul {
    bottom: 0;
    transition: all .25s;
}
.tfp-carousel-item ul {
    list-style: none;
    max-height: 75%;
    overflow-y: scroll;
    scrollbar-width: none;
    position: absolute;
    left: 0;
    bottom: -100%;
    right: 0;
    transition: all .25s;
    margin: 0 !important;
    padding: 0 !important;
}
.tfp-carousel-item ul::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}
.tfp-carousel-item ul li {
    border: 2px solid var(--green);
    font-weight: 900;
    background-color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}
.tfp-carousel-item ul li:not(:last-child) {
    border-bottom: 0;
}
.tfp-carousel-item li a  {
    color: var(--green);
}

/* Components */
.read-more {
    font-weight: bold;
    display: inline-flex;
    align-items: center;
}
.read-more:hover, .triangle-left:hover,
.triangle-left-large:hover, .triangle-right:hover,
.triangle-right-large:hover {
    border-bottom: none !important;
}

.read-more::after, .triangle-right::after,
.triangle-left::before, .triangle-right-large::after, 
.triangle-left-large::before {
    content: "";
    display: inline-block !important;
    width: 0;
    height: 0;
    margin: 0 .5em;
}
.triangle-left::before {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: none;
    border-right: 10px solid var(--dark);
}
.triangle-left-large::before {
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 12px solid var(--dark);
}

.read-more::after, .triangle-right::after {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: none;
    border-left: 10px solid var(--dark);
}
.triangle-right-large::after {
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: none;
    border-left: 12px solid var(--dark);
}

.green-card {
    border: 2px solid var(--green);
    padding: 1.25rem;
}
.green-card h2 {
    color: var(--green);
    margin-bottom: 1.5rem;
}

/* Images */
.wp-block-image {
    margin: 0 0 2.5rem;
}
.wp-block-image img {
    width: 100%;
}

/* Footer#colophon */
/* Main layout */
footer#colophon {
    background-color: var(--body);
    padding: 2rem 5vw;
}
footer#colophon .widget-title {
    color: var(--light);
    font-size: 1.17em;
    margin-bottom: 1rem;
}
/* Hide thin footer when at Home,
Hide thick footer when NOT at Home */
.home .footer-widget-area-thin-others,
body:not(.home) .footer-widget-area-thin-home,
body:not(.home) .footer-widget-area:first-child {
    display: none;
}
.footer-widget-area:first-child {
    margin-bottom: 2.5rem;
}
.footer-widget-area {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
/* Styling for the thin footer#colophon */
.footer-widget-area-thin-others,
.footer-widget-area-thin-home {
    font-weight: bold;
}

.footer-widget-area-thin-others {
    align-items: center;
}
.footer-widget-area-thin-others > .widget:not(:last-child) {
    margin-right: 1rem;
}
.footer-widget-area-thin-others > .widget:last-child {
    margin-left: auto;
}
.footer-widget-area-thin-others .widget.widget_text .textwidget p,
.footer-widget-area-thin-others .jetpack_widget_social_icons ul {
    margin-bottom: 0;
}

/* Search */
.searchform {
    display: flex;
    flex-flow: row-reverse;
    align-items: center;
    justify-content: start;
	transition: flex .5s ease-out;
    padding: .375rem .35rem .35rem;
}
.search-input {
    font-size: 1rem !important;
    font-weight: bold;
    border: none;
    width: 0;
    transition: flex .5s ease-out;
    background-color: transparent;
    padding-top: 1px;
}
.search-btn {
    background-size: 100%;
    background-image: url(images/search_icon.svg);
    background-color: transparent;

    border: none;
    padding: 0;
    margin-right: .5rem;
    display: block;
    width: 26px;
    height: 26px;
}
/* Search Expanded form */
.searchform.expanded {
    max-width: 200px;
    border: 2px solid var(--green);
    flex: 1 0;
}
.searchform.expanded .search-input {
    flex: 1 0 auto;
}
.searchform.expanded .search-btn {
    background-image: url(images/search_icon_green.svg);
}

.brown-bg {
    background-color: var(--body);
}
.white-bg {
    background-color: #fff;
}
.wp-block-group.white-bg,
.wp-block-group.brown-bg {
    margin-top: 3rem;
    padding: 3rem 5vw;
}
.white-bg .brown-bg {
    padding: 5vw 2.5rem 2vw;
}

/* Comments */
#comments {
    margin-top: 2rem;
}
#comments ol {
    padding: 0;
    list-style: none;
}
#comments .comment {
    margin-top: 1rem;
    padding: 1.5rem;
    background-color: var(--body);
}
#comments .comment.depth-2 {
    background-color: #fff;
}
#comments .reply {
    margin: 1.5rem 0 2rem;
}

#comments #wp-comment-cookies-consent,
#comments #submit {
    width: initial !important;
}
#cancel-comment-reply-link {
    margin: 0 1rem;
}
#comments .comment #reply-title {
    margin-bottom: 2rem;
}
#comments .reply,
#comments .reply a,
#cancel-comment-reply-link
#comments #submit {
    display: inline-block;
}
#comments .reply a, #cancel-comment-reply-link,
#comments #submit {
    padding: .75rem 1rem;
    border: 2px solid var(--green);
    color: var(--green);
    font-weight: bold;
    text-transform: uppercase;
    transition: all .25s;
    cursor: pointer;
}
#comments .reply a:hover, #cancel-comment-reply-link:hover,
#comments #submit:hover {
    background-color: var(--green);
    color: #fff;
    transition: all .25s;
}
#comments .comment-metadata {
    font-size: small;
    margin: .5rem 0 1rem;
}


@media screen and (min-width: 900px) {
    .tfp-carousel-item {
        flex: 1 0 calc((100vw - 10vw - 3rem - 2px)/3);
    }
}
@media screen and (min-width: 475px) and (max-width: 900px) {
    .tfp-carousel-item {
        flex: 1 0 calc((100vw - 10vw - 3rem - 1px)/2);
    }
    .tfp-posts-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 474px) {
    .tfp-carousel-item {
        flex: 1 0 calc(100vw - 10vw - 2rem);
    }
    .tfp-posts-container {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 900px) {
    /* Careers */
    .left-sidebar {
        flex: 1 1 100%;
        margin-bottom: 1.5rem;
    }
	
    /* Media releases */
    .card figure {
        height: 200px;
    }

    .single-post-sidebar .sticky {
        top: 0;
    }

    .searchform.expanded {
        border: 2px solid transparent;
    }
    .searchform {
        width: 100%;
        border: 2px solid var(--green);
        margin-top: 1rem;
    }
    .searchform .search-btn {
        background-image: url(images/search_icon_green.svg);
    }
    .searchform .search-input,
    .searchform.expanded .search-input {
        width: calc(100% - 2rem);
    }
    .searchform.expanded .search-btn {
        background-image: url(images/search_icon.svg);
    }
    
    /*** Menu ***/
    #masthead nav {
        justify-content: flex-end;
    }
    #masthead nav, .menu-primary-container {
        flex: 1 0 100%;
    }    
    .menu-primary-container {
        max-height: 0;
        overflow: hidden;
        transition: max-height cubic-bezier(0.4, 0, 0.2, 1) .25s;

        -ms-overflow-style: none; /* IE 11 */
        scrollbar-width: none; /* Firefox 64 */
    }
    /* Hide scrollbars */
    .menu-primary-container::-webkit-scrollbar { display: none; }
    
    .main-menu {
        flex: 1 1 100%;
        flex-direction: column;
    }
    #toggle:checked+label+.menu-primary-container {
        max-height: calc(100vh - 91px);
        overflow-y: scroll;
        padding-top: 1rem;
        transition: max-height cubic-bezier(0.52, 1.64, 0.37, 0.66) .5s;
    }


    /*** CSS Toggler ***/
    #toggle+label {
        display: flex;
    }

    /* Submenu */
    .menu-item-has-children:hover .sub-menu {
        width: 100%;
        z-index: 1;
    }
}