/**
 * Custom CSS
 *
 * This file is for your custom styles.
 * You can add any CSS rules here to customize the Ghost theme.
 *
 * Note: Changes made directly to this file may be overwritten during theme updates.
 * It's recommended to use the Code Injection feature in Ghost for persistent customizations.
 */

/* Your custom CSS goes below this line */

/*
 * Keep the post tag list centered now that the author and date have been
 * removed from the post meta. With only the tags item left, it would
 * otherwise stretch full-width and align left. Matches the centered title
 * at the "sm" breakpoint (540px); mobile stays left-aligned like the title.
 */
@media (min-width: 540px) {
	.template-default .post-meta:has(> li:only-child) {
		justify-content: center;
	}

	.template-default .post-meta:has(> li:only-child) > li:only-child {
		align-items: center;
	}
}

/*
 * Custom footer (migrated from a previous theme).
 * Markup lives in partials/layout/footer-custom.hbs. These styles replace the
 * old Bootstrap utility classes / hard-coded white text so the footer inherits
 * the theme's colors, spacing and light/dark color scheme.
 */
.footer-custom {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-7);
	color: var(--color-contrast);
}

/* Row 1 — large social icons. */
.footer-custom-social ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-custom-social .footer-social a {
	display: inline-flex;
	color: var(--color-contrast);
	font-size: 1.75rem;
	line-height: 1;
	text-decoration: none;
	transition: color 0.2s var(--transition-easing);
}

.footer-custom-social .footer-social a:hover {
	color: var(--color-accent);
}

/* Row 2 — copyright / slogan / paw link. */
.footer-custom-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
    padding-right: 112px;
}

.footer-custom-bottom p {
	margin: 0;
	font-size: var(--font-small);
	color: var(--color-secondary);
}

.footer-custom-bottom .social-icons {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-5);
}

.footer-custom-bottom .social-icons a {
	color: var(--color-contrast);
	font-size: 1.15rem;
	line-height: 1;
	text-decoration: none;
	transition: color 0.2s var(--transition-easing);
}

.footer-custom-bottom .social-icons a:hover {
	color: var(--color-accent);
}

@media (max-width: 540px) {
	/* Stack the bottom row on three lines: slogan, copyright, then paw. */
	.footer-custom-bottom {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.footer-custom-bottom #footer-slogan {
		order: 1;
	}

	.footer-custom-bottom #footer-copyright {
		order: 2;
	}

	.footer-custom-bottom .social-icons {
		order: 3;
	}
}