/*
Theme Name: Impressionist
Theme URI: 
Author: Automattic
Author URI: https://automattic.com/
Description: Impressionist is a block theme about the impressionist art movement.
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 5.7
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: impressionist
Tags: blog, one-column, wide-blocks, block-patterns, featured-images, full-site-editing, rtl-language-support, threaded-comments, translation-ready
*/

/*
 * Control the hover stylings of outline block style.
 * Unnecessary once block styles are configurable via theme.json
 * https://github.com/WordPress/gutenberg/issues/42794
 */
.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--secondary);
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 0.8px !important;
	text-underline-offset: 0.2em;
}

/*
 * Form field styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
::placeholder {
	color: var(--wp--preset--color--contrast);
	opacity: 1; /* Firefox */
}

input:not([type="submit"]):not([type="checkbox"]),
textarea,
.wp-block-post-comments-form input:not([type=submit]),
.wp-block-post-comments-form textarea {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

input:not([type="submit"]):not([type="checkbox"]):focus,
textarea:focus {
	outline-style: solid;
	outline-color: var(--wp--preset--color--contrast);
}

/*
 * Navigation Block
 * Reset the padding from List block
 * https://github.com/WordPress/gutenberg/issues/50486
 */
.wp-block-navigation ul {
	padding: unset;
}

/*
 * Pull quote Block
 * Reset the browser default margins for blockquote element
 * https://github.com/WordPress/gutenberg/issues/44129
 */
.wp-block-pullquote blockquote,
.wp-block-pullquote p {
	margin: 0;
}


/*
 * -----------------------------------------------------------------------------
 * Single blog post page: mobile padding & layout fixes.
 * -----------------------------------------------------------------------------
 * The single.html template uses 4vw horizontal padding on its sections. On a
 * 320-400px phone that resolves to ~12-16px, which is uncomfortably tight for
 * body copy. On mobile we bump it to a more readable 1.25rem (~20px) and add
 * the same padding to the post-title section (which previously had none, so
 * the title hugged the screen edges).
 *
 * We also let the previous / next post navigation wrap on narrow screens, so
 * long post titles do not push the layout off-screen.
 */

@media (max-width: 600px) {

	.single main.wp-block-group,
	.single .impressionist-post-header,
	.single .wp-block-comments {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}

	.single .impressionist-post-header {
		padding-top: 2.5rem !important;
		padding-bottom: 0.25rem !important;
	}

	/*
	 * Collapse the root-flow gap between the post header (title + byline)
	 * and the <main> that holds the featured image. The default
	 * --wp--style--block-gap of 1.5rem stacked on top of the header's own
	 * bottom padding adds up to ~50px of empty space on phones, which
	 * reads as a hole between the byline and the image. Shrink the gap
	 * to a single 0.75rem on mobile only.
	 */
	.single .impressionist-post-header + main.wp-block-group {
		margin-block-start: 0.75rem !important;
	}

	.single .wp-block-post-title {
		font-size: clamp(1.75rem, 7vw, 2.5rem);
		line-height: 1.2;
		word-wrap: break-word;
	}

	.single .impressionist-post-nav {
		flex-wrap: wrap !important;
		gap: 1.25rem !important;
		justify-content: flex-start !important;
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
	}

	.single .impressionist-post-nav .wp-block-post-navigation-link {
		max-width: 100%;
		flex: 1 1 100%;
	}

	/*
	 * Spacer blocks on mobile: content authors set explicit heights
	 * (e.g. 40px, 50px, 100px) that look balanced on desktop but pile
	 * onto the already-comfortable 1.5rem inter-block gap on phones,
	 * leaving large empty gaps between heading groups and body copy
	 * (see the Goretti page subtitle->intro gap as a typical example).
	 * Collapse spacers entirely on small screens — the regular block
	 * gap already provides plenty of breathing room, and display:none
	 * also removes the spacer's own margin-block-start contribution.
	 */
	.wp-block-spacer {
		display: none !important;
	}
}

/*
 * Single blog post: rounded corners on the featured image, matching the
 * 6px radius used on the About Me portrait (.about-portrait-print).
 * overflow:hidden is required so the inner <img> (which uses object-fit:cover
 * to fill the 16:9 figure) is clipped to the rounded corners.
 */
.single .wp-block-post-featured-image {
	border-radius: 6px;
	overflow: hidden;
}

/*
 * Single blog post body copy: dial the paragraph size down from the global
 * "medium" preset (which maxes at 1.4rem / 22.4px and reads as oversized for
 * long-form articles) to a more comfortable fluid 1rem -> 1.2rem range
 * (~16-19px). Scoped to .single .wp-block-post-content so other pages /
 * blocks that use the medium preset are unaffected.
 *
 * Inline-only selector targets the post-content block itself and its leaf
 * text nodes (paragraphs, list items, blockquotes). Headings keep their own
 * sizes from the heading scale.
 */
.single .wp-block-post-content.has-medium-font-size,
.single .wp-block-post-content p,
.single .wp-block-post-content li,
.single .wp-block-post-content blockquote {
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
	line-height: 1.7;
}

/*
 * Heading level 1: dial down from the theme's x-large preset (2.52rem /
 * ~40px) to a more comfortable fluid 1.75rem -> 2.1rem range (~28-33.6px).
 * Scoped via .wp-site-blocks so we beat theme.json's `h1` selector specificity
 * (0,1,1 vs 0,0,1). The site-title on the front page is also marked x-large
 * but it's a <p>, not an <h1>, so it is unaffected by this rule.
 */
.wp-site-blocks h1,
.wp-site-blocks .wp-block-post-title {
	font-size: clamp(1.75rem, calc(1.5rem + 1vw), 2.1rem);
	line-height: 1.2;
	text-wrap: balance;
}