/*!
Theme Name: Brave
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
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: brave
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.

Brave is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores 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/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
/* Styles for WYSIWYG Editor in Simple Content Layout */

    @font-face {
    font-family: 'Couture Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Couture Bold'), url('fonts/couture-bld.woff') format('woff');
    }


.simple-content-editor h3 {
    color: #ffffff;
    font-size: 1.75rem; 
    font-weight: 400;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.27;
    font-family: 'Couture Bold';
}
.project-card:hover .group-hover\:bg-darken-filter,
.js-insight-card .relative:hover .group-hover\:bg-darken-filter,
.insight-card a:hover .group-hover\:bg-darken-filter,
.project-image-inner:hover .group-hover\:bg-darken-filter {
    background-color: rgba(0, 0, 0, .4);
}
/* Убираем отступ сверху у первого заголовка */
.simple-content-editor h3:first-child {
    margin-top: 0;
}

.simple-content-editor p {
    color: #FFF; 
    font-size: 1.25rem; /* 20px */
    line-height: 1.4;
    margin-bottom: 1.5rem;
}

.simple-content-editor ul {
    color: #e5e5e5;
    font-size: 1.25rem; /* 16px */
    line-height: 1.4;
    margin-bottom: 1.5rem;
    padding-left: 1.2rem;
    list-style-type: disc;
}

/* Styles for H2 inside Simple Content Editor */
.simple-content-editor h2 {
    color: #ffffff;
    font-size: 4rem; /* 32px */
    font-weight: 700;
    line-height: 1;
    margin-top: 0;
    margin-bottom: 6.56rem;
}

/* Делаем заголовок огромным на десктопе, как на макете */
@media (min-width: 768px) {
    .simple-content-editor h2 {
        font-size: 2.875rem; /* 46px */
    }
}

/* На всякий случай скрываем системные стрелки Swiper, если они вылезут */
.custom-gallery-swiper .swiper-button-next,
.custom-gallery-swiper .swiper-button-prev {
    display: none !important;
}
/* Contact form styles */
.brave-contact-form form, #contact-popup form {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* gap-8 */
    width: 100%;
    font-family: "Helvetica Neue", sans-serif;
}
.brave-contact-form label, #contact-popup label {
    display: block;
    font-size: 16px;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}
#contact-popup label {
    color: #fff;
}
.wpcf7-form-control-wrap {
    margin-bottom: 10px;
}
.wpcf7-spinner {
    display: none!important;
}
/* Styles for text, tel, and email inputs */
.brave-contact-form input[type="text"],
.brave-contact-form input[type="tel"],
.brave-contact-form input[type="email"],
#contact-popup input[type="text"],
#contact-popup input[type="tel"],
#contact-popup input[type="email"]  {
    width: 100%;
    border-bottom: 1px solid #1a1a1a;
    background-color: transparent;
    padding-bottom: 0.5rem; /* pb-2 */
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s ease;
}
#contact-popup input[type="text"],
#contact-popup input[type="tel"],
#contact-popup input[type="email"]  {
    border-bottom: 1px solid #fff;
}
.brave-contact-form input[type="text"]:focus,
.brave-contact-form input[type="tel"]:focus,
.brave-contact-form input[type="email"]:focus,
#contact-popup input[type="text"]:focus,
#contact-popup input[type="tel"]:focus,
#contact-popup input[type="email"]:focus {
    border-color: #767676;
}
#contact-popup input[type="text"]:focus,
#contact-popup input[type="tel"]:focus,
#contact-popup input[type="email"]:focus {
    border-color: #fff;
}
/* Styles for textarea */
.brave-contact-form textarea,
#contact-popup textarea {
    width: 100%;
    border: 1px solid #1a1a1a;
    background-color: transparent;
    padding: 1rem; /* p-4 */
    font-size: 16px;
    outline: none;
    min-height: 200px;
    resize: vertical;
    transition: border-color 0.3s ease;
    border-radius: 0px;
}
#contact-popup textarea {
    border: 1px solid #fff;
}
.brave-contact-form textarea:focus,
#contact-popup textarea:focus  {
    border-color: #767676;
}
#contact-popup textarea:focus  {
    border-color: #fff;
}
/* Placeholder color styling */
.brave-contact-form input::placeholder,
.brave-contact-form textarea::placeholder,
#contact-popup input::placeholder,
#contact-popup textarea::placeholder {
    color: #1a1a1a;
    opacity: 1; /* Ensures color is solid in Firefox */
}
#contact-popup input::placeholder,
#contact-popup textarea::placeholder {
    color: #fff;
    opacity: 1; /* Ensures color is solid in Firefox */
}
/* Focus states */
.brave-contact-form input:focus,
.brave-contact-form textarea:focus,
#contact-popup input:focus,
#contact-popup textarea:focus {
    border-color: #767676;
}
#contact-popup input:focus,
#contact-popup textarea:focus {
    border-color: #fff;
}
/* Styles for submit button */
.brave-contact-form input[type="submit"],
#contact-popup input[type="submit"] {
    width: 100%;
    border: 1px solid #1a1a1a;
    padding-top: 1rem;
    padding-bottom: 1rem; /* py-4 */
    font-size: 16px;
    font-weight: 500;
    color: #1a1a1a;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 0px;
}
#contact-popup input[type="submit"] {
    border: 1px solid #fff;
    color: #fff;
    padding: 7px 10px;
}
#contact-popup .wpcf7 form .wpcf7-response-output {
    margin: 0;
    color: #fff;
}
.brave-contact-form input[type="submit"]:hover,
#contact-popup input[type="submit"]:hover {
    background-color: #1a1a1a;
    color: #F8F8F8;
}
#contact-popup input[type="submit"]:hover {
    background-color: #fff;
    color: #000;
}
/* Fix for CF7 default span wrappers */
.wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    margin-bottom: 0;
}
/* Hero styles */
.js-hero-title span.block {
    display: block;
    line-height: 1.3;
}
.title-font {
    font-family:'Couture Bold';
}
/* Ensure the video doesn't have black bars on small screens */
video.object-cover {
    object-position: center;
}
/* Fix margins for animated paragraph wrappers */
.js-about-paragraph {
    margin: 0 !important; /* Reset WP default margins to use container gap */
}

/* Ensure font rendering is smooth during animation */
.js-about-paragraph {
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}


/* Make navigation arrows subtle */
.home-hero-swiper .swiper-button-prev,
.home-hero-swiper .swiper-button-next {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.home-hero-swiper .swiper-button-prev:hover,
.home-hero-swiper .swiper-button-next:hover {
    opacity: 1;
}

/* Ensure font is elegant */
.home-hero-swiper p {
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}
/* Custom slider button with gradient and thin border */
.custom-slider-btn {
    display: inline-block;
    padding: 7px 10px;
    border-radius: 0px;
    border: 0.5px solid #FFF;
    background: linear-gradient(90deg, #FFF -22.28%, rgba(153, 153, 153, 0.00) -14.36%);
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.4s ease;
}
.custom-slider-btn:hover {
	background-color: #fff;
	color: #1a1a1a;
}
/* Pagination dots style from Frame 158 */
.swiper-pagination-custom .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.swiper-pagination-custom .swiper-pagination-bullet-active {
    width: 28px; /* Stretched pill shape for active dot */
    background: rgba(255, 255, 255, 0.2);
}
.swiper-pagination-bullet .bullet-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: #fff; /* цвет заполнения */
    pointer-events: none;
    border-radius: 30px;
}
/* Styling for external arrows */
.swiper-button-prev-home,
.swiper-button-next-home {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure section has relative positioning for arrows */
.home-slider-section {
    position: relative;
}

/* Initial state for animation to prevent flickering */
.js-project-anim {
    will-change: transform, opacity;
}

/* Image hover zoom effect */
.project-item img {
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Initial hidden/transparent state */
.js-header-glass {
    width: 100%;
    height: 60px;
    background: transparent;
}

/* Ensure centering and responsiveness */
@media (max-width: 1200px) {
    .home .js-header-glass.is-active-glass {
        width: calc(100% - 2rem);
    }
}
.header-blur-bg {
    position: fixed;
    top: 1.5rem; /* то же что top-6 */
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 60px;
    border-radius: 0px;
    border: 0.59px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 99; /* ниже хедера */
    pointer-events: none; /* клики не перехватывает */
    opacity: 0;
    transition: opacity 0.7s ease;
}

.header-blur-bg.is-active {
    opacity: 1;
}

/* Хедер — без backdrop-filter, с mix-blend-mode */
.js-header-glass {
    backdrop-filter: none !important;
    z-index: 100;
}

/* 1. Header glass style for Home Page */
.js-header-glass.is-active-glass {
    width: 900px;
    height: 60px;
    border-radius: 0px;
    border: 0.59px solid rgba(255, 255, 255, 0.15);
    background: transparent; /* убираем фон отсюда */
    position: relative;
}

/* Стеклянный фон — на ::before */
.js-header-glass.is-active-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20.66px);
    -webkit-backdrop-filter: blur(20.66px);
    z-index: 0; /* под контентом */
}

/* Контент поверх псевдоэлемента */
.js-header-glass .logo,
.js-header-glass nav {
    position: relative;
    z-index: 1;
}

.js-header-glass .logo svg path,
.js-header-glass nav ul li a {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Default state (e.g. on Video) */
.js-header-glass .logo svg path { fill: #ffffff; transition: fill 0.5s ease; }
.js-header-glass nav ul li a { color: #ffffff; transition: color 0.5s ease; }

/* State: On Light Background (About, Projects) 
.js-header-glass.is-on-light .logo svg path {
    fill: #000000 !important;
}
.js-header-glass.is-on-light nav ul li a {
    color: #000000 !important;
}

.js-header-glass.is-on-light {
    border-color: rgba(0, 0, 0, 0.1);
}

.js-header-glass.is-on-dark .logo svg path {
    fill: #ffffff !important;
}
.js-header-glass.is-on-dark nav ul li a {
    color: #ffffff !important;
}
.js-header-glass.is-on-dark {
    border-color: rgba(255, 255, 255, 0.2);
}*/
/* Smooth color transition for logo and nav */
.js-header-glass .logo svg path,
.js-header-glass nav ul li a {
    transition: fill 0.5s ease, color 0.5s ease;
}

/* Light Background: Header must be BLACK */
/*
.is-on-light .logo svg path { fill: #000000 !important; }
.is-on-light nav ul li a { color: #000000 !important; }
.is-on-light { border-color: rgba(0, 0, 0, 0.1); }


.is-on-dark .logo svg path { fill: #ffffff !important; }
.is-on-dark nav ul li a { color: #ffffff !important; }
.is-on-dark { border-color: rgba(255, 255, 255, 0.2); } */
.project-masonry-gallery {
    column-fill: balance;
}

.break-inside-avoid {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    /* This prevents the card from splitting between columns */
    display: block; 
    width: 100%;
}

@media (max-width: 767px) {
    .project-mask {
    max-height: 400px;
}
.project-image-inner img {
    max-height: 100%;
}
.js-header-glass.is-active-glass {
    max-width: 1116px;
    width: auto!important;
    height: 60px;
}
#contact-popup textarea {
    max-height: 100px;
    min-height: 1px;
}
}

.project-video {
    transform: scale(1.2) !important;
}

@media (min-width: 768px) {
    .project-video {
        transform: scale(var(--video-scale)) !important;
    }
}