/**
 * Footer widgets. Structure is in layout.css; this is their appearance.
 *
 * The markup is core's — whatever widget the client places — so these rules
 * reach the block editor's own classes as well as the widget wrapper.
 */

@layer components {
	.hauto-site-footer__widget-title {
		margin: 0 0 var(--wp--preset--spacing--30);
		color: var(--wp--preset--color--base);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 650;
	}

	.hauto-site-footer__widget {
		/* Core's list widgets and the navigation widget all render a <ul>. */
		& ul {
			display: flex;
			flex-direction: column;
			gap: var(--wp--preset--spacing--20);
			margin: 0;
			padding: 0;
			list-style: none;
		}

		& p {
			margin: 0 0 var(--wp--preset--spacing--20);
		}

		/* The base-layer link colour is a mid blue that does not carry on the
		   dark footer, so links here take the footer's own text colour. */
		& a {
			color: inherit;
			text-decoration: none;
		}

		& a:hover {
			color: var(--wp--preset--color--base);
		}
	}
}