/*
Theme Name: Turkish Film Festival
Theme URI: 
Author: 
Author URI: 
Description: Theme for Turkish Film Festival
Requires at least: 6.0
Tested up to: 6.4.3
Requires PHP: 5.7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: spectra-one
Text Domain: turkish-film-festival
Tags: blog, full-site-editing, full-width-template, rtl-language-support, theme-options, translation-ready, 
*/


.display-none {
    display: none !important;
}


.chyron-container {
    overflow: hidden !important;
    max-width: 100%;

    .chyron-wrap {
        width: 1152px !important;
        max-width: 1152px !important;

        @media(min-width: 768px) {
            width: 3152px !important;
            max-width: 3152px !important;
        }

        p {
            white-space: nowrap;

            @media(max-width: 767px) {
                font-size: 20px !important;
            }
        }

        .repeater-text {
            display: inline-block !important;
            width: auto !important;
            padding-left: 30px;
            padding-right: 30px;
        }
    }
}

.header-navigation,
.footer-navigation {
    margin-top: 0px !important;

    .wp-block-navigation__container {
        row-gap: 5px!important;

        li {
            line-height: 1.1;
            text-decoration: underline;
            &:hover {
                text-decoration: none;
            }
        }
    }
}

.header-wrap-responsive {
    
    br {
        display: none;
    }
    
    span {
        font-size: 16px;
        
        @media(max-width: 768px) {
            font-size: 12px;
            
        }
    }
}


.header-logo-responsive {
    width: 220px !important;
    height: 45px !important;

    @media(min-width: 768px) {
        width: 493px!important;
        height: 120px !important; 
    }

    img {
        height: 120px !important;
            @media(max-width: 767px) {
                height: 45px !important;
        }
    }
}

.header-row-sizing {
    padding: 15px 15px 15px 15px!important;
    position: relative;

    @media(min-width: 768px) {
        padding: 30px 30px 30px 30px!important;
    }
}

.popup-spacing {
    padding-left: 15px;
    padding-right: 15px;

    @media(min-width: 768px) {
        padding-left: 30px;
        padding-right: 30px;
    }
}

.popup-spacing-header-columns {
    padding-left: 0px;
    padding-right: 0px;

    @media(min-width: 768px) {
        padding-left: 30px;
        padding-right: 30px;
    }
}

.popup-spacing-archive-columns {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 50px;

    @media(min-width: 768px) {
        padding-left: 30px;
        padding-right: 30px;
        margin-bottom: 100px;
    }
}

.footer-logo-img {
    img {
        @media(max-width: 768px) {
        max-width: 110px !important;
        }
    }   
}

.logo-footer-big {
    img {
        width: 225px !important ;
        @media(min-width: 768px) {
            width: 310px !important;
        }
    }
}

.footer-spacing-columns {
    padding-left: 15px !important;
    padding-right: 15px !important;

    @media(min-width: 768px) {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

:root {
  --button-background-color: #000;
  --button-border-radius: 0;
  --button-border: 0;
  --button-box-shadow: none;
  --button-color: #fff;
  --button-font-family: inherit;
  --button-font-size: 1.2rem;
  --button-font-weight: 400;
  --button-hover-background-color: #fff;
  --button-hover-border-radius: 0;
  --button-hover-border: 0;
  --button-hover-box-shadow: none;
  --button-hover-color: #000;
  --button-letter-spacing: 1px;
  --button-margin-top: 1rem;
  --button-padding: 5px 20px;
  --button-transition-duration: 300ms;
  --checkbox-gap: 2px 20px;
  --form-color: #fff;
  --input-background: #fff;
  --input-border: 0;
  --input-border-radius: 0;
  --input-box-shadow: none;
  --input-color: #000;
  --input-focus-border: 0;
  --input-focus-border-radius: 0;
  --input-focus-box-shadow: none;
  --input-focus-color: #000;
  --input-font-family: inherit;
  --input-font-size: 1rem;
  --input-padding: 10px 15px;
  --input-placeholder-color: #333;
  --input-placeholder-opacity: 0.8;
  --label-color: #000;
  --link-color: #00f;
}

/* Stop touching the code!!! */
/* #region Button Design */
form.wpcf7-form input.wpcf7-submit {
  background-color: var(--button-background-color);
  border-radius: var(--button-border-radius);
  border: var(--button-border);
  box-shadow: var(--button-box-shadow);
  cursor: pointer;
  color: var(--button-color);
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  letter-spacing: var(--button-letter-spacing);
  margin-top: var(--button-margin-top);
  padding: var(--button-padding);
  text-transform: var(--button-text-transform);
  transition: all var(--button-transition-duration) ease;
}
form.wpcf7-form input.wpcf7-submit:hover {
  background-color: var(--button-hover-background-color);
  border-radius: var(--button-hover-border-radius, var(--button-border-radius));
  border: var(--button-hover-border, var(--button-border));
  box-shadow: var(--button-hover-box-shadow, var(--button-box-shadow));
  color: var(--button-hover-color, var(--button-color));
  padding: var(--button-hover-padding, var(--button-padding));
}

/* #endregion Button Design */
/* #region Placeholder Pseudo Class */
form.wpcf7-form input[type=email]::-webkit-input-placeholder, form.wpcf7-form input[type=text]::-webkit-input-placeholder, form.wpcf7-form input[type=tel]::-webkit-input-placeholder, form.wpcf7-form input[type=password]::-webkit-input-placeholder, form.wpcf7-form textarea::-webkit-input-placeholder {
  color: var(--input-placeholder-color);
  opacity: var(--input-placeholder-opacity);
}
form.wpcf7-form input[type=email]::-moz-placeholder, form.wpcf7-form input[type=text]::-moz-placeholder, form.wpcf7-form input[type=tel]::-moz-placeholder, form.wpcf7-form input[type=password]::-moz-placeholder, form.wpcf7-form textarea::-moz-placeholder {
  color: var(--input-placeholder-color);
  opacity: var(--input-placeholder-opacity);
}
form.wpcf7-form input[type=email]:-ms-input-placeholder, form.wpcf7-form input[type=text]:-ms-input-placeholder, form.wpcf7-form input[type=tel]:-ms-input-placeholder, form.wpcf7-form input[type=password]:-ms-input-placeholder, form.wpcf7-form textarea:-ms-input-placeholder {
  color: var(--input-placeholder-color);
  opacity: var(--input-placeholder-opacity);
}
form.wpcf7-form input[type=email]:-moz-placeholder, form.wpcf7-form input[type=text]:-moz-placeholder, form.wpcf7-form input[type=tel]:-moz-placeholder, form.wpcf7-form input[type=password]:-moz-placeholder, form.wpcf7-form textarea:-moz-placeholder {
  color: var(--input-placeholder-color);
  opacity: var(--input-placeholder-opacity);
}

/* #endregion */
form.wpcf7-form {
  color: var(--form-color);
}
form.wpcf7-form input[type=email], form.wpcf7-form input[type=text], form.wpcf7-form input[type=tel], form.wpcf7-form input[type=password], form.wpcf7-form textarea {
  background: var(--input-background);
  border: var(--input-border);
  border-radius: var(--input-border-radius);
  box-shadow: var(--input-box-shadow);
  color: var(--input-color);
  font-family: var(--input-font-family);
  font-size: var(--input-font-size);
  padding: var(--input-padding);
  width: 100%;
}
form.wpcf7-form input[type=email]:focus, form.wpcf7-form input[type=text]:focus, form.wpcf7-form input[type=tel]:focus, form.wpcf7-form input[type=password]:focus, form.wpcf7-form textarea:focus {
  background: var(--input-focus-background, var(--input-background));
  border: var(--input-focus-border, var(--input-border));
  border-radius: var(--input-focus-border-radius, var(--input-border-radius));
  box-shadow: var(--input-focus-box-shadow, var(--input-box-shadow));
  color: var(--input-focus-color, var(--input-color));
}
form.wpcf7-form a {
  color: var(--link-color);
}
form.wpcf7-form label {
  color: var(--label-color);
}
form.wpcf7-form .wpcf7-checkbox {
  display: flex;
  flex-flow: row wrap;
  gap: var(--checkbox-gap);
}
form.wpcf7-form .wpcf7-checkbox > .wpcf7-list-item {
  margin-left: 0;
}
form.wpcf7-form .dscf7 .wpcf7-checkbox {
  display: inline-block;
}

.contact-form-home {
    max-width: 900px;

    .uagb-forms-main-form {
        input[type=text] {
            font-family: "Obviously Regular";
        }

        input[type=email] {
            font-family: "Obviously Regular";
        }
    }

    .wp-block-uagb-forms-textarea {
        
        margin-bottom: 0 !important;

        .uagb-forms-textarea-input {
            resize: none;
            font-family: "Obviously Regular";
        }
    }

    .uagb-forms-main-submit-button {
        padding: 0 !important;

        &:hover {
            text-decoration: underline;
        }
    }
}

.faq-block-container {
    h4 {
        text-align: center;
        padding: 0 20px;

    }
    svg {
        height: 30px !important;
        width: 40px !important;
    }
}

.soundcloud-container {
    text-align: center;
}

.news-post-grid {

    .uagb-post-grid-byline {
        padding-bottom: 0 !important;
    }
    .uagb-post__inner-wrap {
        align-self: flex-end;
    }
    .uagb-post__excerpt {
        font-family: "Obviously Wide Bold";
        padding-bottom: 30px !important;

        @media(min-width: 768px) {
            padding-bottom: 40px !important;
        }

        @media(min-width: 992px) {
            padding-bottom: 50px !important;
        }

    }
    .uagb-post__cta {
        bottom: 0px !important;
        left: 15px !important;

        @media(min-width: 768px) {
            bottom: 5px !important;
            left: 30px !important;

        }
    }
}

/*Films - archive styles post grid*/

.films-listing {
    .uagb-post__cta {
        float: right;
    }
}


/*Films - Query loop*/

.films-query-loop {

    ul {
        align-items: flex-end;
        padding-left: 0px !important;
        padding-right: 0px !important;
        column-gap: 30px !important;
        row-gap: 80px !important;

        @media (max-width: 992px) {
            grid-template-columns: 1fr !important;
            column-gap: 20px !important;
            row-gap: 65px !important;
        }
    }

    .taxonomy-post_tag {
        pointer-events: none;
        float: left;
    }

    .wp-block-read-more {

        float: right;

        &:hover {
        text-decoration: underline;}
    }
}

.post-slider-homepage {
    .slick-track {

        .uagb-post__inner-wrap {
            position: relative;
        }
    }
    
    .slick-dots {
        li {
            margin-left: 10px !important;
            margin-right: 10px !important;
            button {

                &:before {
                    font-size: 50px !important;
                    
                }
            }
        }
    }
}

/*Breadcrumbs*/
.breadcrumbs-seo {
    span,a {
        font-family: "Obviously Regular";
        font-size: 12px;
        line-height: 16.8px;
        letter-spacing: 0.05em;

        @media(min-width: 768px) {
            font-size: 16px;
            line-height: 22.4px;
        }
    }
}

.wp-block-navigation-item__content {
    font-family: inherit;
}

.query-loop-tags {
    a {
        font-family: inherit;
    }
    
}

.wpml-ls-item {
    position:relative;
}
 
.wpml-ls-item::after {
    content: "/";
    position: absolute !important;
    right: -4px !important;
    top: -1px !important;
    color: #ffffff;

    @media(min-width: 768px) {
        right: -6px !important;
        top: -2px !important;
    }
}
 
.wpml-ls-item + .wpml-ls-item::after {
    content: '';
}

.wpml-ls-current-language {
    :hover {
        text-decoration: none;
    }
}

.wpml-ls-item:not(.wpml-ls-current-language) { 
  a {
    color: gray;
    text-decoration: underline;

    &:hover {
        color: #ffffff;
    }
  }
}

.menu-chyron {
    position: absolute !important;
    bottom: 0px !important;
}


/*Films query loop text hover and link effects*/
.film-item-target {
   
    .type-film {
        a {
            text-decoration: underline;
        }

        &:hover {
            cursor: pointer;

            .film-title-target {
                text-shadow: 4px 4px 8px rgba(0,0,8, 0.4);
            }

            .film-excerpt-target {
                text-shadow: 4px 4px 8px rgba(0,0,8, 0.3);
            }

            img {
                box-shadow: 4px 4px 8px 0px #00000066;

            }
            a {
                text-decoration: none;
            }
        }
    }
}

/*News blog listing text hover and link effects*/

#post-grid-target {
    article {
        .uagb-post__cta {
            a {
                text-decoration: underline;
            }
        }
        &:hover {
            cursor: pointer !important;

            .uagb-post__title {
                a {
                    text-shadow: 4px 4px 8px rgba(0,0,8, 0.4);
                    transition-duration: 0s;
                }   
            }

            .uagb-post__excerpt {
                text-shadow: 4px 4px 8px rgba(0,0,8, 0.3);
            }
            .uagb-post__cta {
                a {
                    text-decoration: none;
                }
            }
           
        }

        .uagb-post__title {
            a {
                
                transition-duration: 0s;
            }   
        }
    }
}

.eyes-container {
    display: flex;
    gap: 77px; /* adjust this to change the space between the eyes */
    position: absolute;
    top: 69px;
    left: 70px;

    @media(max-width: 768px) {
        display: none;
    }
}

.eye {
    width: 41px;
    height: 41px;
    background: white;
    border-radius: 50%;
    position: relative;
}

.pupil {
    width: 21px;
    height: 21px;
    background: black;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 20px;
}

.header-content-right {
    margin-right: 0px !important;
}

/* Remove border on every button (as designed) untill we find a better solution (spectra allways asign at least 1px border on button element untill reset) */
.wp-block-button__link {
    border: none !important;
}

.wpml-ls-statics-shortcode_actions {
    display: none;
}