/* =============================================
   SITE BRANDING & LOGO STYLES
   ============================================= */

/* Center site branding elements */
.site-branding {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Tighten up spacing on title and description */
.site-title,
.site-description {
	margin: 0;
	padding: 0;
}

.site-description {
	margin-top: 6px;
}


/* =============================================
   LOGO ANIMATION & EFFECTS
   ============================================= */

/* Logo wrapper with entry animation */
.custom-logo-link {
	position: relative;
	display: inline-block;
	opacity: 0;
	transform: translateY(-50px);
	animation: fadeSlideIn .6s ease-out forwards;
	animation-delay: .2s;
}

/* Circular profile image styling */
.custom-logo-link img {
	position: relative;
	z-index: 2;
	display: block;
	width: 80px;
	height: 80px;
	object-fit: cover;
	margin-bottom: 5px;
	border: 3px solid #ccc;
	border-radius: 50%;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* Logo hover effects */
.custom-logo-link:hover img {
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Rainbow ring around the image */
.custom-logo-link::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: -4px;
	left: -4px;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: conic-gradient(
		red,
		orange,
		yellow,
		green,
		blue,
		indigo,
		violet,
		red
	);
	opacity: 0;
	transition: opacity .3s ease;
}

/* Make the rainbow ring appear and spin on hover */
.custom-logo-link:hover::before {
	opacity: 1;
	animation: spin 2s linear infinite;
}


/* =============================================
   ANIMATIONS
   ============================================= */

@keyframes fadeSlideIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

body {
	animation: pageFadeIn 1s ease;
}

@keyframes pageFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}


/* =============================================
   REDUCED MOTION ACCESSIBILITY
   ============================================= */

@media (prefers-reduced-motion: reduce) {
	body {
		animation: none;
	}

	.custom-logo-link {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.custom-logo-link:hover img {
		transform: none;
	}

	.custom-logo-link:hover::before {
		animation: none;
	}

	.custom-logo-link img,
	.custom-logo-link::before,
	.tags-links a,
	.tag-cloud-link {
		transition: none;
	}
}


/* =============================================
   TAG AND AUTHOR STYLING
   ============================================= */

/* Clean author box */
.entry-author {
	margin-top: 2em;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
}

/* Tag styling */
.tags-links a {
	display: inline-block;
	margin: 3px 3px 0 0;
	padding: 4px 8px;
	border: 1px solid #444 !important;
	border-radius: 4px;
	background-color: #1a1a1a !important;
	color: #eee !important;
	text-decoration: none;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.tags-links a:hover {
	border-color: #ffd966 !important;
	background-color: #ffd966 !important;
	color: #111 !important;
}


/* =============================================
   LEGACY SHARING SECTION CLEANUP
   ============================================= */

/*
 * Older Jetpack-style sharing markup.
 * Retained in case it is still used elsewhere.
 */

.sd-title {
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: none !important;
}

.sharedaddy,
.sd-block {
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: none !important;
	background: none !important;
	box-shadow: none !important;
}

.sd-block::before,
.sharedaddy::before,
.sd-title::before {
	content: none !important;
	display: none !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
}


/* =============================================
   SIDEBAR STRUCTURE
   ============================================= */

/*
 * Penscratch 2 adds borders and generous spacing to widgets.
 * Remove internal widget separators so grouped content behaves
 * as a single visual section.
 */
.site-content .widget-area .widget {
	border-bottom: none !important;
}

/*
 * Remove Penscratch's borders between individual list entries.
 */
.site-content .widget-area .widget:not(.widget_text) li {
	border-top: none !important;
}

/*
 * Give slightly more space below a section than above the
 * following one. This visually associates the heading with
 * the content beneath it.
 */
.site-content .widget-area > .widget {
	margin-bottom: 14px !important;
	padding-bottom: 0 !important;
}

/*
 * Add a separator only between TOP-LEVEL sidebar sections.
 *
 * The incoming section gets only modest top padding; the
 * larger spacing belongs to the section that just ended.
 */
.site-content .widget-area > .widget + .widget {
	padding-top: 8px !important;
	border-top: 1px solid #eee !important;
}

/* No unnecessary trailing whitespace after final section */
.site-content .widget-area > .widget:last-child {
	margin-bottom: 0 !important;
}


/* =============================================
   SIDEBAR TITLES
   ============================================= */

/*
 * Penscratch 2 normally gives widget titles 14px above and
 * below. Because our section already has explicit top spacing,
 * the title's top margin would make that gap unnecessarily
 * large.
 *
 * Keep the native 14px below the title, but remove the extra
 * margin above it.
 */
.site-content .widget-area .widget-title {
	margin-top: 0 !important;
	margin-bottom: 14px !important;
}


/* =============================================
   SIDEBAR TEXT SPACING
   ============================================= */

.site-content .widget-area .widget p {
	line-height: 1.5 !important;
	margin-top: 0 !important;
	margin-bottom: 10px !important;
}


/* =============================================
   SIDEBAR LIST SPACING
   ============================================= */

.site-content .widget-area .widget:not(.widget_text) li {
	margin: 0 !important;
	padding: 2px 0 !important;
	line-height: 1.4;
}

/*
 * Preserve useful indentation for genuinely nested lists,
 * while keeping vertical spacing compact.
 */
.site-content .widget-area .widget:not(.widget_text) li li a {
	padding-left: 14px;
}

.site-content .widget-area .widget:not(.widget_text) li li li a {
	padding-left: 28px;
}

.site-content .widget-area .widget:not(.widget_text) li li li li a {
	padding-left: 32px;
}


/* =============================================
   SHARING / SOCIAL BUTTON LAYOUT
   ============================================= */

/*
 * Sharing buttons are technically list items, but should not
 * inherit ordinary sidebar-list spacing or indentation.
 */
.site-content .widget-area .jetpack-sharing-buttons__services-list {
	margin: 0 !important;
	padding-left: 0 !important;
}

.site-content .widget-area .widget:not(.widget_text)
.jetpack-sharing-buttons__services-list > li,
.site-content .widget-area .widget:not(.widget_text)
.jetpack-sharing-button__list-item,
.site-content .widget-area .widget:not(.widget_text)
li.wp-social-link {
	margin: 0 !important;
	padding: 0 !important;
	line-height: normal !important;
	border: none !important;
}


/* =============================================
   TAG CLOUD STRUCTURE
   ============================================= */

.tag-cloud-link {
	display: inline-block;
	margin: 3px;
	padding: 4px 8px;
	border: 1px solid #ddd !important;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}


/* =============================================
   INFINITE SCROLL STRUCTURE
   ============================================= */

.infinite-view {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
}

.infinite-view::before,
.infinite-view::after,
.infinite-wrap::before,
.infinite-wrap::after {
	content: none !important;
	display: none !important;
}

.infinite-wrap article {
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: none !important;
}

.infinite-wrap {
	border-top: 1px solid #eee !important;
}

.infinite-wrap hr,
.infinite-view hr,
.infinite-loader hr {
	height: 1px !important;
}


/* =============================================
   DARK MODE STYLES
   ============================================= */

@media (prefers-color-scheme: dark) {

	/* ---------- Base colours ---------- */

	body,
	.site,
	.site-content,
	.site-main,
	.site-footer {
		background-color: #1a1a1a !important;
		color: #eee !important;
	}


	/* ---------- Text colours ---------- */

	.site-title a,
	.site-description,
	.entry-title a,
	.entry-content,
	.entry-header,
	.entry-footer,
	.comments-area,
	.comment-content {
		color: #eee !important;
	}

	.entry-meta {
		color: #aaa !important;
	}


	/* ---------- Links ---------- */

	a {
		color: #b39ddb !important;
	}

	a:hover {
		color: #ffd966 !important;
	}


	/* ---------- Logo ---------- */

	.custom-logo-link img {
		border-color: #eee;
	}

	.custom-logo-link::before {
		background: conic-gradient(
			#ff0055,
			#ff9900,
			#ffee00,
			#00dd55,
			#0099ff,
			#9900ff,
			#ff0055
		);
	}


	/* ---------- General separator colours ---------- */

	hr,
	.post-navigation,
	.site-footer,
	.comment-reply-title,
	.entry-header,
	.entry-footer,
	.hentry,
	.post {
		border-color: #444 !important;
	}

	.entry-content hr,
	.site hr,
	.site-footer hr,
	.footer hr {
		border-color: #444 !important;
		background-color: #444 !important;
	}


	/* ---------- Sidebar ---------- */

	.widget-title {
		color: #ccc !important;
		border-color: #444 !important;
	}

	.widget {
		background-color: #1a1a1a !important;
		color: #ddd !important;
	}

	.site-content .widget-area > .widget + .widget {
		border-top-color: #444 !important;
	}

	.widget ul,
	.widget ul li,
	.widget ul li a {
		color: #ccc !important;
		background-color: transparent !important;
	}

	.widget ul li a:hover {
		color: #ffd966 !important;
		text-decoration: underline;
	}


	/* ---------- Tag cloud ---------- */

	.tag-cloud-link {
		border-color: #444 !important;
		background-color: #1a1a1a !important;
		color: #eee !important;
	}

	.tag-cloud-link:hover {
		border-color: #ffd966 !important;
		background-color: #ffd966 !important;
		color: #111 !important;
	}


	/* ---------- Navigation ---------- */

	.main-navigation,
	.site-header {
		border-color: #444 !important;
	}


	/* ---------- Footer ---------- */

	.site-info-wrapper {
		border-color: #444 !important;
	}

	.site-info a {
		color: #b39ddb !important;
	}

	.site-info a:hover {
		color: #ffd966 !important;
	}


	/* ---------- Infinite scroll ---------- */

	.infinite-wrap,
	.infinite-scroll .infinite-loader hr,
	.infinite-wrap hr,
	.infinite-view hr,
	.infinite-loader hr {
		border-color: #444 !important;
		background-color: #444 !important;
	}


	/* ---------- Code ---------- */

	pre,
	code {
		background-color: #222 !important;
		color: #ccc !important;
	}
}