/*!
Theme Name: NewFayl
Theme URI: http://newfayl.me/
Author: S.A Studio
Author URI: https://fayl.cfd
Description: The «NewFayl» theme from «S.A Studio» is meticulously designed to provide flexibility, versatility, and adaptability for any website. The template meets a wide variety of needs, whether you represent a business, run blogs, write articles, or showcase creative works. Thanks to simple color and typography settings, the «NewFayl» theme opens up a multitude of possibilities. This theme offers a wide range of style variations and a complete page design, simplifying the process of creating your website. Fully compatible with the site editor, it also uses the latest design tools presented in WordPress 6.4.3.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: newfayl
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

NewFayl is based on Fayl https://fayl.cfd/, (C) 2012-2020 Automattic, Inc.
Fayl is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* Reset styles */
/* Apply a universal box-sizing rule and remove default padding and margin for all elements */
*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Set the height of the html and body elements to 100% to enable full-height layouts */
html,
body {
    height: 100%;
}

body {
    font-family: 'Open Sans', sans-serif;
}

/* Site layout styles */
/* Make the site container a flexbox with column direction and minimum height of 100% */
.site {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Make the page wrapper a flex item that can grow and shrink to fill the available space */
.wrap-conteiner {
    flex: 1 1 auto;
    /* To pin the footer to the bottom of the page. */
}

/* Add some padding to the header and footer wrappers */
.header-wrapper,
.footer-wrapper {
    padding: 10px 0;
}

/* Top Bar Styles */
/* Make the top bar a flex container with space-between alignment and center alignment */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    color: #000000;
    border: 0px solid #e8e8e8;
    box-shadow: 0px 5px 25px rgb(0 0 0 / 8%);
}

/* Add some margin to the right of the top bar sections */
.top-bar-section {
    margin-right: 20px;
}

/* Make the date-time and email elements bold */
.date-time,
.email {
    font-weight: bold;
}

/* Remove the list style and margin and padding for the social icons list */
.social-icons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

/* Add some margin to the right of the social icons list items */
.social-icons li {
    margin-right: 10px;
}

/* Remove the text decoration and set the color and font size for the social icons links */
.social-icons a {
    text-decoration: none;
    color: black;
    font-size: 18px;
}

/* Site branding styles */
/* Add some padding to the site branding element */
.site-branding {
    padding: 5px 10px;
}

img.logo {
    max-width: 150px;
    height: auto;
}

/* Adjust the margin of the custom logo link */
.custom-logo-link {
    margin-top: 3px;
}

/* Site header and footer styles */
/* Make the site header and footer flex containers with column direction and set the maximum width and center them on the page */
.site-header,
.site-footer {
    display: flex;
    flex-direction: column;
    max-width: 1420px;
    /* Set the maximum width of the container. */
    margin: 0 auto;
    /* Center the container on the page. */
    border: 0px solid #e8e8e8;
    box-shadow: 0px 5px 25px rgb(0 0 0 / 8%);
}

/* Wrap container styles */
/* Make the wrap container a flex container with wrap and space-between alignment and set the maximum width and center it on the page */
.page-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1420px;
    /* Set the maximum width of the container. */
    margin: 0 auto;
    /* Center the container on the page. */
}

/* Site main styles */
/* Make the site main element a flex item that occupies two-thirds of the available width and add some margin and padding and border and box shadow */
.site-main {
    flex: 2;
    /* The main content occupies two-thirds of the available width. */
    padding: 10px;
    border: 0px solid #e8e8e8;
    box-shadow: 0px 5px 25px rgb(0 0 0 / 8%);
}

/* Widget styles */
/* Add some padding and border and box shadow to the widget elements */
section.widget {
    padding: 5px 10px;
    border-bottom: 0px solid #e8e8e8;
    box-shadow: 0px 5px 25px rgb(0 0 0 / 8%);
}

.pro-button {
    letter-spacing: 1px;
}

/* Add some padding to the bottom of the search inside wrapper element */
.wp-block-search__inside-wrapper {
    padding-bottom: 20px;
}

/* Site info styles */
/* Make the site info element a flex container with space-between and center alignment */
.site-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Hide the hed description element */
.hed-description {
    display: none;
}

/* Footer container styles */
/* Make the footer container a flex container with space-between alignment and wrap */
.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Make the footer widget element a flex item */
.footer-widget {
    flex: 1;
}

/* Subscribe form styles */
/* Make the subscribe form element a flex container */
.subscribe-form {
    display: flex;
}

/* Make the subscribe form input element a flex item that can grow and shrink and add some padding */
.subscribe-form input {
    flex: 1;
    padding: 5px;
}

/* Set the background color, color, padding, border, cursor, and margin for the subscribe form button element */
.subscribe-form button {
    background-color: #838996;
    color: aliceblue;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    margin-left: 5px;
}

/* Change the background color and color of the subscribe form button element on hover */
.subscribe-form button:hover {
    background-color: #A9B0C1;
    color: aquamarine;
}

/* Set the color and margin for the social icons links */
.social-icons a {
    color: #000000;
    margin-right: 10px;
}

/* Change the color of the social icons links on hover */
.social-icons a:hover {
    color: blue;

}

/* Footer widget styles */
/* Add some border and box shadow and padding to the footer widget element */
.footer-widget {
    border-bottom: 0px solid #e8e8e8;
    box-shadow: 0px 5px 25px rgb(0 0 0 / 8%);
    padding: 5px 10px;
}

/* Add some margin and padding and text alignment and border and box shadow to the copyright element */
.copyright {
    margin-top: 5px;
    padding-top: 20px;
    text-align: center;
    border-bottom: 0px solid #e8e8e8;
    box-shadow: 0px 5px 25px rgb(0 0 0 / 8%);
}

/* Sets padding for comment links */
.comments-link {
    padding: 0px 5px;
}

/* Creates a container with flexible layout of elements that are evenly distributed and aligned in the center */
.branding-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Takes up 1 part of the available space in a flex container */
.site-branding {
    flex: 1;
}

/* Takes up 2 parts of the available space in a flex container */
.shop-navigation {
    flex: 2;
}

/* Creates a flexible list inside shop navigation, items of which are aligned to the right */
.shop-navigation ul {
    display: flex;
    justify-content: end;
    padding-right: 20px;
}

/* Sets padding for list items in shop navigation */
.shop-navigation ul li {
    padding: 25px 20px 0;
}

/* Positions the top banner relative to its normal position */
.baner-top {
    background-repeat: no-repeat;
    position: relative;
}

a .baner-top {
    margin: 0 10px;
}

/* Creates an article element with a flexible layout, items of which are aligned to the left */
.article-elem {
    display: flex;
    justify-content: start;
    flex: 1;
}

/* Takes up 2 parts of the available space in a flex container */
.index-text {
    flex: 2;
}

/* Centers the text of the title */
h4.index-title {
    text-align: center;
}

/* Sets padding for the edit link */
.edit-link {
    padding: 0 5px;
}

/* Aligns post images and post thumbnails to the left and sets padding */
.wp-post-image,
.post-thumbnail {
    float: left;
    padding: 10px 15px 5px 0;
    max-width: 350px;
    height: auto;
}

/* Basic Button Styles */
button {
    display: online-block;
    user-select: none;
    /* So that the text does not stand out */
    line-height: 1.5;
    /* So that browser styles are not applied */
    font-size: 1rem;
    letter-spacing: 1px;
}

/* This class defines the styles for the "Read More" button. It sets the top margin, 
padding, background color, text color, border style, border radius, and transition effect. 
*/
.btn-more {
    margin-top: 20px;
    padding: 5px 15px;
    background-color: #858895;
    color: white;
    border: solid 1px #56596B;
    border-radius: 4px;
    transition: 0.5s ease;
}

/* This class changes the background color and text color of the button when the 
mouse pointer is over it. It also changes the cursor type. 
*/
.btn-more:hover {
    background-color: #8287A3;
    color: aliceblue;
    cursor: pointer;
}

/* This class changes the background color and text color of the button when it is in focus. 
It also removes the outline around the button. 
*/
.btn-more:focus {
    background-color: #858895;
    color: white;
    outline: none;
}

/* This class sets the top margin for the horizontal line. */
hr.idx {
    margin-top: 10px;
}

/*====================*/
.sidebar-right {
    flex: 1;
    max-width: 400px;
    padding: 10px;
    border: 0px solid #e8e8e8;
    box-shadow: 0px 5px 25px rgb(0 0 0 / 8%);
}

.sidebar-left {
    flex: 1;
    max-width: 400px;
    padding: 10px;
    border: 0px solid #e8e8e8;
    box-shadow: 0px 5px 25px rgb(0 0 0 / 8%);
}