/*
Theme Name: KyleB
Theme URI: https://kyleb.io
Author: KyleB
Description: Black, high-contrast child theme for a portfolio, blog, and store.
Template: twentytwentyfive
Version: 1.0.14
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kyleb
*/

/*
 * WooCommerce checkout paints selects and error notices with a light surface.
 * theme.json loads before that stylesheet, so these rules follow it.
 */

.wc-blocks-components-select .wc-blocks-components-select__container,
.wc-blocks-components-select .wc-blocks-components-select__select {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-radius: 0;
}

.wp-block-social-links.is-style-logos-only .wp-social-link {
	background: none;
	color: var(--wp--preset--color--contrast);
}

/*
 * Below this width the two footer clusters wrap into a right-aligned pile.
 * Stack them on the left edge instead. Wide screens keep identity left, actions right.
 */
@media (max-width: 50rem) {
	.is-site-footer.is-layout-flex {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.is-site-footer-actions.is-layout-flex {
		align-items: flex-start;
	}

	.is-site-footer-actions .wp-block-buttons {
		justify-content: flex-start;
	}

	.is-site-footer-actions .has-text-align-right {
		text-align: left;
	}
}

.wp-block-button.is-see-more .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-see-more .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

.is-work-list .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

.is-work-catalogue .wp-block-post-template .wp-block-group.is-layout-constrained > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.wc-block-components-notice-banner.is-error {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

/*
 * The subscribe form is rendered by mu-plugins/kyleb-subscribe.php. A core
 * block cannot call Resend without putting the API key in the page.
 */
.kyleb-subscribe-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--40);
}

.kyleb-subscribe-form label {
	flex: 1 0 100%;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.kyleb-subscribe-form input[type="email"] {
	flex: 1 1 16rem;
	margin: 0;
	padding: 0.7rem 0.8rem;
}

.kyleb-subscribe-form button[type="submit"] {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.6;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	padding: 0.7rem 1.1rem;
	cursor: pointer;
}

.kyleb-subscribe-form button[type="submit"]:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

.kyleb-subscribe-form .subscribe-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.subscribe-error {
	color: var(--wp--preset--color--muted);
}

.kyleb-subscribe-form input[type="email"]:focus-visible,
.kyleb-subscribe-form button[type="submit"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

.is-project-meta > p:empty {
	display: none;
}

.is-project-meta > p {
	margin: 0;
}

.is-project-meta > p:not(:empty) ~ p:not(:empty) {
	border-left: 1px solid var(--wp--preset--color--hairline);
	padding-left: 0.9rem;
}

.is-project-meta:not(:has(p:not(:empty))) {
	display: none;
}

.is-project .wp-block-post-content h2,
.single .wp-block-post-content h2 {
	margin-top: var(--wp--preset--spacing--50);
}

.is-project .wp-block-post-content > h2:first-child,
.single .wp-block-post-content > h2:first-child {
	margin-top: 0;
}

.is-project .wp-block-post-content h2.has-large-font-size {
	font-size: var(--wp--preset--font-size--large);
}

.is-note {
	border-left: 1px solid var(--wp--preset--color--hairline);
	padding-left: var(--wp--preset--spacing--30);
}

.is-spec-table {
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
}

.is-spec-table table {
	width: 100%;
	border-collapse: collapse;
}

figure.wp-block-table.is-spec-table :is(th, td) {
	padding: 0.65rem 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	vertical-align: baseline;
	text-align: left;
	font-weight: 400;
}

.is-spec-table th {
	width: 38%;
	padding-right: 1.25rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 40rem) {
	figure.wp-block-table.is-spec-table :is(th, td) {
		display: block;
		width: auto;
		padding-right: 0;
	}

	.is-spec-table th {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.is-spec-table td {
		padding-top: 0.15rem;
	}
}

.wp-block-post-content ul {
	padding-left: 1.15rem;
}

.wp-block-post-content li {
	margin-bottom: 0.35rem;
}

.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}