/*!
 * LikeCottage Child Theme Styles
 * Додаткові стилі для блокової теми
 */

/* ==========================================================================
   CSS Variables з LikeCottage
   ========================================================================== */
:root {
	--lc-theme-color: #1C2D37;
	--lc-theme-color2: #EED26E;
	--lc-theme-color3: #423A2F;
	--lc-title-color: #0D0D0C;
	--lc-body-color: #6E7070;
	--lc-white-color: #ffffff;
	--lc-border-radius: 8px;
	--lc-transition: all 0.3s ease;
}

/* ==========================================================================
   Block Refinements
   ========================================================================== */

/* Кнопки */
.wp-block-button__link {
	position: relative;
	z-index: 2;
	overflow: hidden;
	transition: var(--lc-transition);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Ефект біжучої полоси для кнопок */
.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: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

/* Навігація */
.wp-block-navigation__container {
	gap: 2rem;
}

.wp-block-navigation-item a {
	transition: var(--lc-transition);
	font-weight: 500;
}

.wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--theme-secondary) !important;
}

/* Підменю */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray);
	border-radius: var(--lc-border-radius);
	padding: 1rem 0;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1.5rem;
}

/* Заголовки постів */
.wp-block-post-title a {
	transition: var(--lc-transition);
}

.wp-block-post-title a:hover {
	color: var(--wp--preset--color--theme-secondary) !important;
}

/* Featured Image */
.wp-block-post-featured-image {
	overflow: hidden;
	border-radius: var(--lc-border-radius);
}

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

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

/* Query Loop Cards */
.wp-block-post-template {
	list-style: none;
}

/* Картки проектів */
.project-card {
	transition: var(--lc-transition);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.project-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	transform: translateY(-4px);
}

/* Cover Block Overlay */
.wp-block-cover__inner-container {
	max-width: 1296px;
	margin: 0 auto;
}

/* Separator */
.wp-block-separator {
	opacity: 0.5;
}

/* Columns responsive */
@media (max-width: 782px) {
	.wp-block-columns {
		flex-direction: column !important;
	}
	
	.wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ==========================================================================
   Footer Styles
   ========================================================================== */
.wp-block-social-links.is-style-logos-only .wp-social-link {
	background-color: transparent;
	color: var(--wp--preset--color--white);
	border: 1px solid rgba(255, 255, 255, 0.3);
	transition: var(--lc-transition);
}

.wp-block-social-links.is-style-logos-only .wp-social-link:hover {
	background-color: var(--wp--preset--color--theme-secondary);
	color: var(--wp--preset--color--theme-primary);
	border-color: var(--wp--preset--color--theme-secondary);
}

/* Footer Links */
.is-style-list-plain {
	list-style: none;
	padding-left: 0 !important;
}

.is-style-list-plain li {
	margin-bottom: 0.75rem;
}

.is-style-list-plain a {
	transition: var(--lc-transition);
}

.is-style-list-plain a:hover {
	color: var(--wp--preset--color--theme-secondary) !important;
	padding-left: 0.5rem;
}

/* ==========================================================================
   Comments Styles
   ========================================================================== */
.wp-block-comments-area {
	margin-top: 3rem;
}

.wp-block-comment-template {
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--wp--preset--color--gray);
}

.wp-block-avatar img {
	border-radius: 50%;
}

.wp-block-comment-reply-link a {
	font-size: 0.875rem;
	color: var(--wp--preset--color--theme-primary);
	text-decoration: none;
	transition: var(--lc-transition);
}

.wp-block-comment-reply-link a:hover {
	color: var(--wp--preset--color--theme-secondary);
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.wp-block-query-pagination {
	margin-top: 3rem;
	gap: 0.5rem;
}

.wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.5rem;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--gray);
	border-radius: 4px;
	transition: var(--lc-transition);
	text-decoration: none;
}

.wp-block-query-pagination a:hover,
.wp-block-query-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--theme-primary);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--theme-primary);
}

/* ==========================================================================
   Search Form
   ========================================================================== */
.wp-block-search__button {
	background-color: var(--wp--preset--color--theme-primary);
	color: var(--wp--preset--color--white);
	border: none;
	transition: var(--lc-transition);
}

.wp-block-search__button:hover {
	background-color: var(--wp--preset--color--theme-secondary);
	color: var(--wp--preset--color--theme-primary);
}

/* ==========================================================================
   Sidebar Widgets
   ========================================================================== */
.wp-block-latest-posts__featured-image img {
	border-radius: 4px;
}

.wp-block-categories,
.wp-block-archives {
	list-style: none;
	padding-left: 0;
}

.wp-block-categories li,
.wp-block-archives li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--gray);
}

.wp-block-categories a,
.wp-block-archives a {
	transition: var(--lc-transition);
}

.wp-block-categories a:hover,
.wp-block-archives a:hover {
	color: var(--wp--preset--color--theme-secondary);
	padding-left: 0.5rem;
}

.wp-block-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.wp-block-tag-cloud a {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background-color: var(--wp--preset--color--gray-light);
	border-radius: 20px;
	font-size: 0.875rem !important;
	text-decoration: none;
	transition: var(--lc-transition);
}

.wp-block-tag-cloud a:hover {
	background-color: var(--wp--preset--color--theme-primary);
	color: var(--wp--preset--color--white);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.has-border-radius {
	border-radius: var(--lc-border-radius);
}

.has-shadow {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.has-shadow-hover {
	transition: var(--lc-transition);
}

.has-shadow-hover:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Mobile Optimization
   ========================================================================== */
@media (max-width: 782px) {
	.wp-block-cover {
		min-height: 400px !important;
	}
	
	.wp-block-cover h1 {
		font-size: 2rem !important;
	}
	
	.wp-block-buttons .wp-block-button {
		width: 100%;
	}
	
	.wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

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

/* ==========================================================================
   Animations
   ========================================================================== */
@-webkit-keyframes shine {
	0% {
		left: -100px;
	}
	60% {
		left: 100%;
	}
	to {
		left: 100%;
	}
}

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

/* ==========================================================================
   Accessibility
   ========================================================================== */
.wp-block-button__link:focus,
.wp-block-navigation-item a:focus,
.wp-block-search__button:focus {
	outline: 2px solid var(--wp--preset--color--theme-secondary);
	outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 1rem;
	background-color: var(--wp--preset--color--theme-primary);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.skip-to-content:focus {
	left: 50%;
	transform: translateX(-50%);
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
	.wp-block-navigation,
	.wp-block-buttons,
	.wp-block-search,
	.wp-block-social-links {
		display: none;
	}
}