/*
Theme Name: Yartenclub 
Theme URI: https://example.com/
Author: sergeyvk
Author URI: https://example.com/
Description: Yartenclub тема WordPress.
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: club-blank
*/
/* ============ RESET ============ */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
color: #222;
line-height: 1.5;
background: #01b450;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* ============ NEWS TICKER ============ */
.news-ticker {
	background: #03210f;
	color: #fff;
}

.news-ticker-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 7px 24px;
}

.news-ticker-label {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #f5c518;
}

.news-ticker-track {
	flex: 1;
	overflow: hidden;
}

.news-ticker-scroll {
	display: flex;
	width: max-content;
	animation: news-ticker-scroll 28s linear infinite;
}

.news-ticker-track:hover .news-ticker-scroll {
	animation-play-state: paused;
}

.news-ticker-list {
	display: flex;
	gap: 40px;
	padding-right: 40px;
	white-space: nowrap;
}

.news-ticker-list a {
	font-size: 13px;
	color: #fff;
	opacity: 0.85;
}

.news-ticker-list a:hover {
	opacity: 1;
	text-decoration: underline;
}

@keyframes news-ticker-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.news-ticker-scroll {
		animation: none;
	}
}

@media (max-width: 782px) {
	.news-ticker-label {
		display: none;
	}
}

/* ============ SITE HEADER ============ */
.site-header {
border-bottom: 1px solid #00632c;
background: #00632c;
}
.site-header-inner {
display: flex;
align-items: stretch;
justify-content: space-between;
flex-wrap: wrap;
padding: 0;
}
.site-branding {
display: flex;
align-items: center;
gap: 12px;
}

.site-title-block{
	color: var(--white) !important;
	font-size: 1rem;
	line-height: 1.1;
	font-weight: 800;
	text-transform: uppercase;
	margin: 0;
}
.site-header-spacer {
	width: 150px;
	flex-shrink: 0;
}
.site-logo {
width: 70px;
height: 70px;
object-fit: contain;
flex-shrink: 0;
margin: 18px auto;
}
.site-branding .site-title {
font-size: 16px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
line-height: 1.3;
margin: 0;
color: #fff;
}
.site-branding .site-title a {
color: #fff;
}
.site-branding .site-description {
font-size: 13px;
color: rgba(255, 255, 255, 0.75);
margin: 2px 0 0;
}
/* ============ PRIMARY NAV ============ */
.menu-toggle {
display: none;
background: none;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 4px;
padding: 8px 10px;
cursor: pointer;
}
.menu-toggle span {
display: block;
width: 20px;
height: 2px;
background: #fff;
margin: 4px 0;
}
.site-header-sidebar-spacer {
	width: 348px;
	flex-shrink: 0;
}
.primary-navigation {
width: 100%;
flex: 1;
border-bottom: none !important;
display: flex;
}
.primary-menu {
display: flex;
gap: 4px;
justify-content: flex-end;
}
.primary-menu > li {
position: relative;
}
.primary-menu > li > a {
display: flex;
height: 100%;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 4px;
color: #fff !important;
transition: background 0.15s ease;
padding: 10px 25px;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.2;
text-decoration: none;
min-width: 120px;
box-sizing: border-box;
}
.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a {
background: rgba(255, 255, 255, 0.15);
}

.menu-item-title {
	display: block;
}

.menu-item-description {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.7;
}
.menu-item {
position: relative;
transition: background-color 0.2s;
display: flex;
} 

.menu-item:hover {
	background: rgba(255,255,255,0.1) !important;
}


.widget-area .widget:last-child {
	border-bottom: none;
}

/* dropdown */
.primary-menu .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: #fff;
border: 1px solid #eaeaea;
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
padding: 6px;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: all 0.15s ease;
z-index: 100;
}
.primary-menu li:hover > .sub-menu,
.primary-menu li.show-submenu > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.primary-menu .sub-menu li a {
display: block;
padding: 8px 10px;
font-size: 13px;
font-weight: 400;
text-transform: none;
border-radius: 4px;
white-space: nowrap;
}
.primary-menu .sub-menu li a:hover {
background: #f2f2f2;
}
.primary-menu li.menu-item-has-children > a::after {
content: "▾";
display: inline-block;
margin-left: 4px;
font-size: 10px;
}
/* ============ RESPONSIVE ============ */
@media (max-width: 782px) {
.site-branding {
flex-wrap: wrap;
    }
.site-header-spacer {
display: none;
    }
.site-header-sidebar-spacer {
display: none;
    }
.primary-navigation {
width: 100%;
    }
.primary-menu {
flex-direction: column;
align-items: stretch;
    }
.primary-menu .sub-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
display: none;
padding-left: 14px;
    }
.primary-menu li.show-submenu > .sub-menu {
display: block;
    }
}
/* ============ MAIN LAYOUT (placeholder) ============ */
.site-main {
padding: 48px 0;
min-height: 40vh;
background: #fff;
}

.content-wrap {
	display: flex;
	align-items: flex-start;
	gap: 48px;
}

.read-more {
	display: block;
	margin-top: 8px;
	color: #f5a623;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-align: right;
}

.read-more:hover {
	text-decoration: underline;
}

.hero-slider {
	position: relative;
	width: 100%;
	height: 250px;
	overflow: hidden;
	border-radius: 8px;
	margin-bottom: 32px;
}

.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.hero-slide.is-active {
	opacity: 1;
}

.hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-slide-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 16px 20px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}

.hero-slide-caption-text {
	margin: 0;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}

.hero-slide-caption-link {
	flex-shrink: 0;
	padding: 8px 18px;
	border-radius: 999px;
	background: #f5a623;
	color: #1a1a1a;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: background 0.15s ease;
}

.hero-slide-caption-link:hover {
	background: #d98c12;
}

.hero-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease;
}

.hero-slider-arrow:hover {
	background: rgba(0, 0, 0, 0.65);
}

.hero-slider-prev {
	left: 12px;
}

.hero-slider-next {
	right: 12px;
}

.hero-slider-dots {
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
}

.hero-slider-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	cursor: pointer;
}

.hero-slider-dot.is-active {
	background: #fff;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	background: #f5a623;
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 700;
	transition: background 0.15s ease;
}

.pagination .page-numbers:hover {
	background: #d98c12;
}

.pagination .page-numbers.current {
	background: #00632c;
	color: #fff;
}

.pagination .page-numbers.dots {
	background: none;
	color: #888;
	min-width: auto;
	padding: 0 4px;
}

.archive-title,
.page-title {
	padding-bottom: 12px;
	margin: 0 0 28px;
	border-bottom: 4px solid #00632c;
}

.archive-title {
	font-size: 22px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.content-area,
.content-area-single {
	flex: 1;
	min-width: 0;
}

.widget-area {
	width: 300px;
	flex-shrink: 0;
}

.widget-area .widget {
	margin-bottom: 24px;
	padding-bottom: 12px;
}

.widget-area .widget:nth-child(even) {
	border-bottom: 2px solid #f5c518;
} 

.widget-area .widget:last-child {
	border-bottom: none;
}

.widget-title {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 14px;
}

@media (max-width: 782px) {
	.content-wrap {
		flex-direction: column;
		gap: 32px;
	}

	.widget-area {
		width: 100%;
	}
}

.site-footer {
border-top: 1px solid #eaeaea;
padding: 32px 0;
font-size: 13px;
color: #888;
}

.back-to-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: max-content;
	margin: 20px auto 0;
	padding: 10px 18px;
	border-radius: 6px;
	background: #00632c;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: background 0.15s ease;
}

.back-to-top:hover {
	background: #04451f;
}

.back-to-top-arrow {
	font-size: 16px;
	line-height: 1;
}

.post-categories,
.tag-cloud-link, .post-categories a{
	font-size: 13px;
}

.tag-cloud-link, .post-categories a{
	background: #f5a623;
	color: rgb(26, 26, 26) !important;
	font-weight: 700;
}

.content-area .post {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
}

.post-thumb img {
  max-width: 150px;
  object-fit: cover;
}

.post-info {
  align-self: center;
}