/*
Theme Name: Blockskit Base
Theme URI: https://blockskit.com/blockskit-base/
Author: BlockskitDev
Author URI: https://blockskit.com
Description: Blockskit Base is a modern and versatile WordPress theme designed for various types of websites including blogs, small businesses, startups, agencies, firms, e-commerce shops, personal portfolio sites, and more. It offers full-site-editing, allowing easy customization of all aspects of your site. With multiple templates, patterns, and style variations, it's suitable for different aesthetics. The theme is also compatible with popular plugins like Elementor, WooCommerce, and Spectra – WordPress Gutenberg Blocks, adding extra functionality to your site.
Version: 1.1.5
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 5.6
License: GPLv3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: blockskit-base
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, threaded-comments, translation-ready, wide-blocks, block-styles, blog, portfolio, education

Blockskit Base WordPress Theme, Copyright 2025 BlockskitDev
Blockskit Base is distributed under the terms of the GNU General Public License v3
*/

/* Projects Page Template Styles */
.blockskit-base-projects-page {
    padding: 40px 0;
}

.blockskit-base-projects-page .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.blockskit-base-projects-page .page-header {
    text-align: center;
    margin-bottom: 50px;
}

.blockskit-base-projects-page .page-title {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 10px;
}

.projects-grid-wrapper {
    width: 100%;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.project-item {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.project-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.project-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.project-image-wrapper {
    position: relative;
    height: 250px;
    overflow: hidden;
    background: #f8f9fa;
}

.project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.project-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-item:hover .project-overlay {
    opacity: 1;
}

.project-item:hover .project-image {
    transform: scale(1.08);
}

.project-content {
    padding: 25px;
}

.project-meta {
    margin-bottom: 12px;
}

.project-category {
    display: inline-block;
    background: #007cba;
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.project-title {
    margin: 0 0 15px 0;
    font-size: 1.4rem;
    color: #2c3338;
    line-height: 1.3;
    font-weight: 600;
}

.project-excerpt {
    margin: 0 0 20px 0;
}

.project-excerpt p {
    margin: 0;
    color: #666;
    font-size: 15px;
    line-height: 1.6;
}

.project-read-more {
    display: inline-block;
    color: #007cba;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.project-item:hover .project-read-more {
    color: #005a87;
}

.no-projects {
    text-align: center;
    padding: 60px 20px;
}

.no-projects p {
    font-size: 18px;
    color: #666;
}

/* === ВЫПАДАЮЩЕЕ МЕНЮ — КРАСИВЫЙ ДИЗАЙН === */

/* Контейнер подменю */
.wp-block-navigation__submenu-container {
    display: none !important; /* скрываем по умолчанию */
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px !important;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #e2e8f0;
    padding: 12px 0;
    margin-top: 8px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Показываем при hover над родителем */
.wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container {
    display: block !important;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Пункты меню */
.wp-block-navigation__submenu-container .wp-block-navigation-item {
    margin: 0 !important;
    padding: 0 16px;
}

/* Ссылка внутри */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    color: #1a1a1a !important;
    font-size: var(--wp--preset--font-size--x-small) !important;
    font-weight: 500;
    text-decoration: none;
    border-radius: 5px;
    margin: 0 8px;
    transition: all 0.2s ease;
    position: relative;
}

/* Hover эффект */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: #5733fe !important;
}
.wp-block-navigation__submenu-container wp-block-navigation-link:hover {
	background: #f1f5f9;
}

/* Убираем x-small шрифт (переопределяем) */
.wp-block-navigation__submenu-container .has-x-small-font-size {
    font-size: 15px !important;
}

.wp-block-navigation-link {
	padding: 5px !important;
  	border-radius: 5px;
}

.wp-block-navigation-link:hover {
	color: var(--wp--preset--color--hover);
  	background: #eee;
}


.wp-block-navigation-item:hover::after {
    border-color: #0073e6;
    opacity: 1;
}

.wp-block-navigation-item:hover::after span {
	color: #5733fe !important;
}

.header-call-action-button a {
	color: white !important;
}

header #header-logo-block {
	flex-basis: 14% !important;
}

.lastest-blogs {
	grid: inherit;
}

@media (max-width: 599px) {
	header #header-right {
		flex-basis: 25% !important;
	}
	header #header-logo-block{
		flex-basis: 12% !important;
	}
	#header-right .wp-block-group {
		flex-direction: row-reverse;
	}
}

@media (min-width: 599px) and (max-width: 768px) {
	header #header-right {
		flex-basis: content !important;
	}
	#header-logo-block{
		flex-basis: 12% !important;
	}
	
}

/* Responsive Design */
@media (max-width: 768px) {
	#header-right div {
		gap: 5px !important;
	}
	#hero-buttons {
		display: flex;
  		flex-direction: column;
		margin-top: 30px;
		margin-bottom: 0px;
	}
	.hero-buttons-footer div, p {
		margin: 0 !important;
  		padding: 0 !important;
	}
	
	.hero-buttons-footer div {
		max-width: 100%;
	}
	
	#hero-buttons div, p {
		margin: 0 !important;
  		padding: 0 !important;
	}
	
	#hero-buttons div {
		max-width: 100%;
	}
	
	#header-logo-block{
		justify-content: flex-start;
  		display: flex;
	}
	.header-logo {
		width: 25%;
	}
	#popup-choose-contact {
		flex-direction: column;
	}
	#hero-right-conteiner {
		display: none;
	}
	#hero-left-conteiner {
		display: none;
	}
	#hero-buttons {
		margin-bottom: 50px;
	}
	#hero-button-package {
		margin-top: 0px;
	}

	#why-clients-choose-us-block-column {
		flex-direction: column;
	}
	#our-services-block-one {
		flex-direction: column;
	}
	#our-services-block-two {
		flex-direction: column;
	}
	#clients-testinomals-clients {
		flex-direction: column;
	}
	#blog-right {
		display: none;
	}
	#blog-left {
		display: none;
	}
	#contact-us-call-action-right-conteiner {
		display: none;
	}
	#contact-us-call-action-left-conteiner {
		display: none;
	}
	#footer-all {
		flex-direction: column;
	}
	
	#categories-blog {
		flex-direction: column-reverse;
		width: 100%;
	}
	#categories-blog-right-sidebar {
		width: 100%;
	}
	#page_column_h1 {
		flex-basis: 100% !important;
	}
	
	.wp-block-navigation__submenu-container {
        position: static;
        box-shadow: none;
        border: none;
        background: #f8f9fa;
        border-radius: 5px;
        margin: 8px 0;
        padding: 8px 0;
        transform: none;
        opacity: 1;
        visibility: visible;
        display: none; /* скрыто, пока не нажато */
    }

    /* Показывать при клике (Gutenberg сам обрабатывает) */
    .wp-block-navigation-item.is-open > .wp-block-navigation__submenu-container {
        display: block !important;
    }

    .wp-block-navigation-item__content:hover {
        transform: none;
        background: #e2e8f0;
    }
	
    .blockskit-base-projects-page {
        padding: 20px 0;
    }

    .blockskit-base-projects-page .page-title {
        font-size: 2rem;
    }

    .projects-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }

    .project-content {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }

    .project-image-wrapper {
        height: 200px;
    }
}