/*!
 * LikeCottage Fixel/Orange Design Styles
 * Стилі для дизайну Fixel/Orange
 */

/* ==========================================================================
   CSS Variables Fixel/Orange
   ========================================================================== */
:root {
	--fixel-blue: #0c69a8;
	--fixel-orange: #ff7f00;
	--fixel-dark: #333333;
	--fixel-teal: #395360;
	--fixel-green: #71b715;
	--fixel-red: #e31e25;
	--fixel-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--fixel-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	--fixel-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Typography Fixel
   ========================================================================== */
body {
	font-family: "Verdana", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Fixel", "Verdana", sans-serif;
	color: var(--fixel-dark);
}

/* ==========================================================================
   Header & Navigation Fixel
   ========================================================================== */
.wp-block-navigation {
	font-family: "Verdana", sans-serif;
}

.wp-block-navigation-item a {
	color: var(--fixel-dark);
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
	transition: var(--fixel-transition);
	padding: 0.5rem 0;
}

.wp-block-navigation-item a:hover {
	color: var(--fixel-orange);
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: white;
}

.wp-block-navigation__responsive-container-content .wp-block-navigation-item a {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid #f0f0f0;
}

/* Mobile Menu */
@media (max-width: 782px) {
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		color: var(--fixel-orange);
	}
}

/* ==========================================================================
   Buttons Fixel/Orange
   ========================================================================== */
.wp-block-button__link {
	position: relative;
	z-index: 2;
	overflow: hidden;
	transition: var(--fixel-transition);
	font-family: "Fixel", "Verdana", sans-serif;
	text-transform: none;
	letter-spacing: 0;
}

/* Ефект біжучої полоси для кнопок */
.wp-block-button__link:before {
	content: "";
	position: absolute;
	width: 100px;
	height: 100%;
	background-image: -webkit-linear-gradient(330deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%);
	background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%);
	top: 0;
	left: -100px;
	opacity: 0.3;
	z-index: -1;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--fixel-shadow-hover);
}

.wp-block-button__link:hover:before {
	-webkit-animation: shine 1.5s ease-out infinite;
	animation: shine 1.5s ease-out infinite;
}

.has-fixel-orange-background-color {
	background-color: var(--fixel-orange) !important;
}

.has-fixel-blue-background-color {
	background-color: var(--fixel-blue) !important;
}

/* ==========================================================================
   Feature Cards
   ========================================================================== */
.feature-card {
	transition: var(--fixel-transition);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.feature-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--fixel-shadow-hover);
}

/* ==========================================================================
   Project Cards Fixel
   ========================================================================== */
.project-card-fixel {
	transition: var(--fixel-transition);
	box-shadow: var(--fixel-shadow);
	overflow: hidden;
}

.project-card-fixel:hover {
	transform: translateY(-6px);
	box-shadow: var(--fixel-shadow-hover);
}

.project-card-fixel .wp-block-post-featured-image img {
	transition: var(--fixel-transition);
}

.project-card-fixel:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

/* ==========================================================================
   Team Cards
   ========================================================================== */
.team-card {
	transition: var(--fixel-transition);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.team-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--fixel-shadow-hover);
}

.team-card img {
	transition: var(--fixel-transition);
}

.team-card:hover img {
	transform: scale(1.02);
}

/* ==========================================================================
   Blog Cards Fixel
   ========================================================================== */
.blog-card-fixel {
	transition: var(--fixel-transition);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

.blog-card-fixel:hover {
	transform: translateY(-4px);
	box-shadow: var(--fixel-shadow-hover);
}

.blog-card-fixel .wp-block-post-featured-image img {
	transition: var(--fixel-transition);
}

.blog-card-fixel:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

/* ==========================================================================
   Swiper Sliders Fixel
   ========================================================================== */
.projects-swiper {
	padding: 40px 0 !important;
}

.swiper-button-prev,
.swiper-button-next {
	color: var(--fixel-orange) !important;
	background: white;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	box-shadow: var(--fixel-shadow);
	transition: var(--fixel-transition);
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
	background: var(--fixel-orange);
	color: white !important;
	transform: scale(1.1);
}

.swiper-button-prev::after,
.swiper-button-next::after {
	font-size: 18px;
	font-weight: 700;
}

.swiper-pagination-bullet {
	background: var(--fixel-dark);
	opacity: 0.3;
	transition: var(--fixel-transition);
}

.swiper-pagination-bullet-active {
	background: var(--fixel-orange);
	opacity: 1;
	transform: scale(1.2);
}

/* ==========================================================================
   Newsletter Form Fixel
   ========================================================================== */
.newsletter-form-fixel button {
	position: relative;
	z-index: 2;
	overflow: hidden;
}

/* Ефект біжучої полоси для кнопки newsletter */
.newsletter-form-fixel button:before {
	content: "";
	position: absolute;
	width: 100px;
	height: 100%;
	background-image: -webkit-linear-gradient(330deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%);
	background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%);
	top: 0;
	left: -100px;
	opacity: 0.3;
	z-index: -1;
}

.newsletter-form-fixel input:focus {
	outline: none;
	border-color: var(--fixel-orange);
	background: rgba(255,255,255,0.2);
}

.newsletter-form-fixel button:hover {
	background: var(--fixel-blue);
	transform: translateY(-2px);
	box-shadow: var(--fixel-shadow);
}

.newsletter-form-fixel button:hover:before {
	-webkit-animation: shine 1.5s ease-out infinite;
	animation: shine 1.5s ease-out infinite;
}

/* ==========================================================================
   Stats Strip
   ========================================================================== */
.has-fixel-teal-background-color {
	background-color: var(--fixel-teal) !important;
}

/* ==========================================================================
   Icon Circles
   ========================================================================== */
.feature-card svg,
.team-card svg {
	transition: var(--fixel-transition);
}

.feature-card:hover svg {
	transform: rotate(360deg);
}

/* ==========================================================================
   Social Links Fixel
   ========================================================================== */
.wp-block-social-links.is-style-logos-only .wp-social-link:hover {
	background-color: var(--fixel-orange) !important;
	transform: translateY(-3px);
}

/* ==========================================================================
   Responsive Fixel
   ========================================================================== */
@media (max-width: 782px) {
	.wp-block-columns {
		flex-direction: column !important;
	}
	
	.wp-block-column {
		flex-basis: 100% !important;
	}
	
	.newsletter-form-fixel {
		flex-direction: column !important;
	}
	
	.newsletter-form-fixel input,
	.newsletter-form-fixel button {
		width: 100% !important;
	}
	
	.swiper-button-prev,
	.swiper-button-next {
		display: none !important;
	}
}

@media (max-width: 600px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
	
	h1 {
		font-size: 32px !important;
	}
	
	h2 {
		font-size: 28px !important;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
	.swiper-button-prev,
	.swiper-button-next,
	.swiper-pagination,
	.newsletter-form-fixel {
		display: none;
	}
}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Анімація біжучої полоси для кнопок */
@-webkit-keyframes shine {
	0% {
		left: -100px;
	}
	60% {
		left: 100%;
	}
	to {
		left: 100%;
	}
}

@keyframes shine {
	0% {
		left: -100px;
	}
	60% {
		left: 100%;
	}
	to {
		left: 100%;
	}
}

.feature-card,
.project-card-fixel,
.team-card,
.blog-card-fixel {
	animation: fadeInUp 0.6s ease-out;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */
.wp-block-button__link:focus,
.newsletter-form-fixel input:focus,
.newsletter-form-fixel button:focus {
	outline: 2px solid var(--fixel-orange);
	outline-offset: 2px;
}

/* ==========================================================================
   Dark Mode Support (Optional)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
	:root {
		--fixel-dark: #f5f5f5;
	}
}