/**
 * Component Styles
 */

/**
 * Top Bar
 */
.top-bar {
	background-color: var(--base-5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	padding: 0.75rem 0;
	width: 100%;
}

.inside-top-bar {
	margin: 0 auto;
	max-width: var(--container-width, 77.5rem);
	padding: 0 1rem;
}

.top-bar-content {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

.top-bar-align-left .top-bar-content {
	justify-content: flex-start;
}

.top-bar-align-right .top-bar-content {
	justify-content: flex-end;
}

.top-bar-align-center .top-bar-content {
	justify-content: center;
}

.top-bar-text {
	color: var(--base-5);
	font-size: clamp(0.875rem, 1.25vw, 1rem);
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
}

.top-bar-text p {
	margin: 0;
}

.top-bar-text a {
	color: var(--accent);
	text-decoration: underline;
	transition: color 0.3s ease;
}

.top-bar-text a:hover {
	color: var(--accent-alt);
}

.button.top-bar-button,
.button.top-bar-button:hover {
	background-color: var(--base-5);
	border-radius: 0.5rem;
	font-size: clamp(0.75rem, 1vw, 0.875rem);
	padding: 0.5rem 1.725rem;
}

/* Top Bar Responsive */
@media (max-width: 768px) {
	.top-bar {
		padding: 1rem 0;
	}

	.top-bar-content {
		flex-direction: column;
		gap: 0.75rem;
		text-align: center;
	}

	.top-bar-align-left .top-bar-content,
	.top-bar-align-right .top-bar-content {
		justify-content: center;
	}

	.top-bar-button {
		width: 100%;
	}
}

/* Buttons */
.button,
.button-primary,
.button-secondary,
.button-small,
.button-large {
	align-items: center;
	background-color: var(--accent);
	border: 0;
	border-radius: 0.5rem;
	color: var(--contrast);
	cursor: pointer;
	display: inline-flex;
	font-size: 1rem;
	font-weight: 700;
	gap: var(--spacing-sm);
	justify-content: center;
	padding: 0.725rem 2rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: all var(--transition-speed) var(--transition-easing);
	white-space: nowrap;
}

.button:hover,
.button-primary:hover {
	background-color: var(--accent-alt);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.button-secondary {
	background-color: var(--base-2);
	color: var(--contrast-3);
}

.button-secondary:hover {
	background-color: var(--base);
	color: var(--contrast);
}

.button-small {
	font-size: 0.875rem;
	padding: var(--spacing-sm) var(--spacing-base);
}

.button-large {
	font-size: 1.125rem;
	padding: 1rem 2.5rem;
}

/* Cards */
.card {
	background-color: var(--base-4);
	border-radius: 1rem;
	box-shadow: var(--shadow-md);
	padding: var(--spacing-lg);
	transition: transform var(--transition-speed) var(--transition-easing);
}

.card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-5px);
}

/* Widgets */
.widget {
	background-color: var(--base-4);
	border-radius: 0.5rem;
	margin-bottom: var(--spacing-base);
	padding: var(--spacing-base);
}

.widget-title {
	font-size: 1.25rem;
	margin-bottom: var(--spacing-md);
}

.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget li {
	border-bottom: 1px solid var(--base-3);
	padding: var(--spacing-sm) 0;
}

.widget li:last-child {
	border-bottom: 0;
}

.widget a {
	color: var(--contrast-2);
	text-decoration: none;
}

.widget a:hover {
	color: var(--accent);
}

/* Footer */
.site-footer {
	background-color: var(--base-3);
	color: var(--contrast-3);
	padding: 120px 20px;
}

.footer-widgets {
	border-bottom: 1px solid var(--base-2);
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-lg);
}

.footer-widgets-grid {
	display: grid;
	gap: var(--spacing-lg);
	grid-template-columns: repeat(3, 1fr);
}

.footer-widget-area {
	color: var(--contrast-3);
}

.footer-widget-area .widget-title {
	color: var(--accent);
	font-size: 1.125rem;
}

.footer-bottom-inner {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-base);
	justify-content: space-between;
}

.site-info {
	font-size: 0.875rem;
	line-height: 1.8;
}

.site-info a {
	color: var(--contrast-3);
	text-decoration: none;
}

.site-info a:hover {
	color: var(--accent);
}

.social-links {
	display: flex;
	gap: var(--spacing-md);
}

.social-link {
	align-items: center;
	background-color: var(--base-4);
	border-radius: 50%;
	color: var(--contrast-2);
	display: flex;
	height: 40px;
	justify-content: center;
	transition: all var(--transition-speed) var(--transition-easing);
	width: 40px;
}

.social-link:hover {
	background-color: var(--accent);
	color: var(--contrast);
	transform: translateY(-3px);
}

/* Back to Top Button */
.back-to-top {
	align-items: center;
	background-color: var(--accent);
	border: 0;
	border-radius: 50%;
	bottom: var(--spacing-base);
	box-shadow: var(--shadow-md);
	color: var(--contrast);
	cursor: pointer;
	display: flex;
	height: 50px;
	justify-content: center;
	opacity: 0;
	padding: 0;
	position: fixed;
	right: var(--spacing-base);
	transform: translateY(20px);
	transition: all var(--transition-speed) var(--transition-easing);
	visibility: hidden;
	width: 50px;
	z-index: 999;
}

.back-to-top.visible {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

.back-to-top:hover {
	background-color: var(--base-5);
	box-shadow: var(--shadow-lg);
	transform: translateY(-5px);
}

/* Breadcrumbs */
.breadcrumbs {
	color: var(--base);
	font-size: 0.875rem;
	padding: var(--spacing-md) 0;
}

.breadcrumbs a {
	color: var(--base);
}

.breadcrumbs a:hover {
	color: var(--accent);
}

.breadcrumb-separator {
	margin: 0 var(--spacing-xs);
}

/* Pagination */
.pagination {
	align-items: center;
	display: flex;
	gap: var(--spacing-sm);
	justify-content: center;
	margin: var(--spacing-2xl) 0;
}

.page-numbers {
	align-items: center;
	background-color: var(--base-4);
	border-radius: 0.25rem;
	color: var(--contrast-2);
	display: inline-flex;
	height: 40px;
	justify-content: center;
	min-width: 40px;
	padding: var(--spacing-xs) var(--spacing-md);
	text-decoration: none;
	transition: all var(--transition-speed) var(--transition-easing);
}

.page-numbers:hover,
.page-numbers.current {
	background-color: var(--accent);
	color: var(--contrast);
}

/* Comments */
.comments-area {
	background-color: var(--base-4);
	border-radius: 1rem;
	margin: var(--spacing-2xl) auto;
	max-width: 64rem;
}

.comments-area h2,
.comments-area h3 {
	color: var(--contrast);
	font-size: clamp(28px, 1.5vw, 36px);
	margin-bottom: 20px;
}

.comments-title {
	margin-bottom: var(--spacing-lg);
}

.comment-list {
	list-style: none;
	margin: 0 0 var(--spacing-2xl);
	padding: 0;
}

.comment {
	background-color: var(--base-5);
	border-radius: 0.5rem;
	margin-bottom: var(--spacing-base);
	padding: var(--spacing-base);
}

.comment-body {
	display: flex;
	gap: var(--spacing-base);
}

.comment-author img {
	border-radius: 50%;
}

.comment-content {
	flex: 1;
}

.comment-meta {
	color: var(--base);
	font-size: 0.875rem;
	margin-bottom: var(--spacing-sm);
}

.comment-reply-link {
	color: var(--accent);
	font-size: 0.875rem;
}

.children {
	list-style: none;
	margin-top: var(--spacing-base);
	padding-left: var(--spacing-lg);
}

.comment-respond {
	background-color: var(--base-3);
	border-radius: 0.5rem;
	padding: var(--spacing-lg);
}

.comment-form label {
	display: block;
	font-weight: 700;
	margin-bottom: var(--spacing-xs);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	margin-bottom: var(--spacing-base);
	width: 100%;
}

#cancel-comment-reply-link {
	font-size: 16px;
	font-weight: 400;
	margin-left: 16px;
}

/* Search Form */
.search-form {
	display: flex;
	gap: var(--spacing-sm);
	margin: 0 auto;
	max-width: 600px;
}

.search-field {
	flex: 1;
}

.search-submit {
	align-items: center;
	background-color: var(--accent);
	border: 0;
	border-radius: 0.5rem;
	color: var(--contrast);
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	padding: var(--spacing-sm) var(--spacing-base);
	transition: all var(--transition-speed) var(--transition-easing);
}

.search-submit:hover {
	background-color: var(--accent-alt);
}

/* Video Container */
.video-container {
	box-shadow: var(--shadow-md);
	perspective: 2000px;
	position: relative;
	width: fit-content;
}

.video-container video {
	display: block;
	height: auto;
	transform: rotateX(25deg);
	transition: transform 0.5s ease;
	width: 100%;
}

.video-container video:hover {
	transform: rotateX(0);
}

.video-container .play-button {
	align-items: center;
	background-color: rgba(255, 255, 255, 0.9);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	height: 80px;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: all var(--transition-speed) var(--transition-easing);
	width: 80px;
}

.video-container .play-button:hover {
	background-color: var(--accent);
	transform: translate(-50%, -50%) scale(1.1);
}

.video-container .play-button::after {
	border-bottom: 12px solid transparent;
	border-left: 20px solid var(--base-3);
	border-top: 12px solid transparent;
	content: '';
	height: 0;
	margin-left: 5px;
	width: 0;
}

/* Responsive */
@media (max-width: 1024px) {
	.footer-widgets-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/**
 * Sidebar & Widgets
 */

/* Sidebar Container */
.widget-area {
	background-color: transparent;
}

/* Widget Base Styles */
.widget {
	background-color: var(--base-3);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 1rem;
	box-shadow: var(--shadow-cards);
	margin-bottom: 2rem;
	overflow: hidden;
	padding: 2rem;
}

.widget:last-child {
	margin-bottom: 0;
}

/* Widget Titles */
.widget-title,
.widgettitle {
	color: var(--accent);
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 1.75vw, 1.5rem);
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 1.5rem;
	margin-top: 0;
	text-transform: uppercase;
}

/* Widget Content */
.widget p {
	color: var(--base);
	font-size: clamp(0.875rem, 1.25vw, 1rem);
	line-height: 1.8;
	margin-bottom: 1rem;
}

.widget p:last-child {
	margin-bottom: 0;
}

/* Widget Links */
.widget a {
	color: var(--accent);
	text-decoration: none;
	transition: color 0.3s ease;
}

.widget a:hover {
	color: var(--accent-alt);
	text-decoration: underline;
}

/* Widget Lists */
.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget ul li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	line-height: 1.6;
	margin-bottom: 0;
	padding: 0.75rem 0;
}

.widget ul li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.widget ul li:first-child {
	padding-top: 0;
}

.widget ul li a {
	color: var(--base);
	display: block;
	text-decoration: none;
	transition: all 0.3s ease;
}

.widget ul li a:hover {
	color: var(--accent);
	padding-left: 0.5rem;
}

/* Nested Lists */
.widget ul ul {
	margin-left: 1rem;
	margin-top: 0.75rem;
}

.widget ul ul li {
	border-bottom: none;
	padding: 0.5rem 0;
}

/* Widget Search Form */
.widget_search .search-form {
	display: flex;
	gap: 0.5rem;
	position: relative;
}

.widget_search .search-field {
	background-color: var(--base-5);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.5rem;
	color: var(--contrast);
	flex: 1;
	font-size: clamp(0.875rem, 1vw, 1rem);
	padding: 0.75rem 1rem;
	transition: border-color 0.3s ease;
}

.widget_search .search-field:focus {
	border-color: var(--accent);
	outline: none;
}

.widget_search .search-submit {
	background-color: var(--accent);
	border: none;
	border-radius: 0.5rem;
	color: var(--contrast);
	cursor: pointer;
	font-size: clamp(0.875rem, 1vw, 1rem);
	font-weight: 700;
	padding: 0.75rem 1.5rem;
	text-transform: uppercase;
	transition: all 0.3s ease;
}

.widget_search .search-submit:hover {
	background-color: var(--accent-alt);
	transform: translateY(-2px);
}

/* Widget Calendar */
.widget_calendar table {
	border-collapse: collapse;
	width: 100%;
}

.widget_calendar caption {
	caption-side: top;
	color: var(--contrast);
	font-weight: 700;
	margin-bottom: 1rem;
	text-align: center;
}

.widget_calendar th,
.widget_calendar td {
	border: 1px solid rgba(255, 255, 255, 0.05);
	padding: 0.5rem;
	text-align: center;
}

.widget_calendar th {
	background-color: var(--base-5);
	color: var(--accent);
	font-weight: 700;
}

.widget_calendar td {
	color: var(--base);
}

.widget_calendar td a {
	color: var(--accent);
	display: block;
	font-weight: 700;
}

.widget_calendar td a:hover {
	background-color: var(--base-5);
	text-decoration: none;
}

/* Widget Tag Cloud */
.widget_tag_cloud .tagcloud,
.wp-block-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.widget_tag_cloud a,
.wp-block-tag-cloud a {
	background-color: var(--base-5);
	border-radius: 0.25rem;
	color: var(--base);
	display: inline-block;
	font-size: clamp(0.75rem, 1vw, 0.875rem) !important;
	font-weight: 700;
	padding: 0.5rem 1rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: all 0.3s ease;
}

.widget_tag_cloud a:hover,
.wp-block-tag-cloud a:hover {
	background-color: var(--accent);
	color: var(--contrast);
	transform: translateY(-2px);
}

/* Widget Categories */
.widget_categories select,
.widget_archive select {
	background-color: var(--base-5);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.5rem;
	color: var(--contrast);
	font-size: clamp(0.875rem, 1vw, 1rem);
	padding: 0.75rem 1rem;
	width: 100%;
}

.widget_categories ul li,
.widget_archive ul li {
	display: flex;
	justify-content: space-between;
}

.widget_categories ul li .count,
.widget_archive ul li .count {
	color: var(--accent);
	font-weight: 700;
}

/* Widget Recent Posts */
.widget_recent_entries ul li {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.widget_recent_entries .post-date {
	color: var(--base-2);
	font-size: clamp(0.75rem, 1vw, 0.875rem);
}

/* Widget Recent Comments */
.widget_recent_comments ul li {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.widget_recent_comments .comment-author-link {
	color: var(--accent);
	font-weight: 700;
}

/* Widget RSS */
.widget_rss ul li {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.widget_rss .rss-date {
	color: var(--base-2);
	font-size: clamp(0.75rem, 1vw, 0.875rem);
}

.widget_rss .rssSummary {
	color: var(--base);
	font-size: clamp(0.875rem, 1vw, 1rem);
}

.widget_rss cite {
	color: var(--accent);
	font-style: normal;
}

/* Widget Text */
.widget_text img {
	border-radius: 0.5rem;
	height: auto;
	max-width: 100%;
}

/* Widget Media */
.widget_media_image img,
.widget_media_gallery img {
	border-radius: 0.5rem;
	height: auto;
	max-width: 100%;
}

.widget_media_gallery .gallery {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(3, 1fr);
}

/* Widget Navigation Menu */
.widget_nav_menu ul {
	margin: 0;
	padding: 0;
}

.widget_nav_menu ul li {
	padding: 0.75rem 0;
}

.widget_nav_menu ul li a {
	color: var(--base);
	display: block;
	padding: 0;
	text-decoration: none;
	transition: all 0.3s ease;
}

.widget_nav_menu ul li a:hover {
	color: var(--accent);
	padding-left: 0.5rem;
}

.widget_nav_menu ul ul {
	margin-left: 1rem;
	margin-top: 0.5rem;
}

/* Widget Meta */
.widget_meta ul li a::before {
	color: var(--accent);
	content: "→";
	margin-right: 0.5rem;
}

/* Widget Pages */
.widget_pages ul li a::before {
	content: "📄";
	margin-right: 0.5rem;
}

/* Responsive Sidebar */
@media (max-width: 1024px) {
	.widget {
		padding: 1.5rem;
	}
}

@media (max-width: 768px) {
	.widget-area {
		margin-top: 3rem;
	}

	.widget {
		margin-bottom: 1.5rem;
		padding: 1.5rem 1rem;
	}

	.widget-title,
	.widgettitle {
		font-size: clamp(1.125rem, 2vw, 1.25rem);
		margin-bottom: 1rem;
	}

	.widget_search .search-form {
		flex-direction: column;
	}

	.widget_search .search-submit {
		width: 100%;
	}

	.widget_media_gallery .gallery {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-widgets-grid {
		grid-template-columns: 1fr;
	}

	.footer-bottom-inner {
		flex-direction: column;
		text-align: center;
	}

	.button,
	.button-primary,
	.button-secondary {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.widget {
		border-radius: 0.75rem;
		padding: 1rem;
	}

	.widget_media_gallery .gallery {
		grid-template-columns: 1fr;
	}
}