/*
Theme Name: Raconteur
Theme URI: https://themeshaper.com/raconteur/
Author: Automattic
Author URI: https://automattic.com
Description: A theme to promote marvelous stories, Raconteur displays enlarged imagery and typography on a practical layout to attract readers to your narrative.
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 5.7
Version: 1.0.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: raconteur
Tags: blog, two-columns, block-patterns, block-styles, featured-images, full-site-editing, rtl-language-support, threaded-comments, translation-ready, three-columns, style-variations, full-width-template

/* Progresive enhancement to reduce widows and orphans.
/* https://github.com/WordPress/gutenberg/issues/55190
*/

h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption {
    text-wrap: balance;
}
p {
    text-wrap: pretty;
}

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

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

/*
 * Button Block
 * 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--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/*
 * 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;
}

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

/*
 * Slideshow Block
 * The Jetpack Slideshow block sizes its images to 100vw on wide/full
 * alignment, assuming the block reaches the true viewport edge. Raconteur's
 * single post template nests content inside a fixed-width two-rail column
 * layout that never spans the full viewport (even on mobile, where the
 * columns don't stack), so the 100vw image overflows past the page.
 * Constrain it to the block's own width instead.
 * DOTTHEM-401
 */
:is(.wp-block-jetpack-slideshow.alignfull, .wp-block-jetpack-slideshow.alignwide) .wp-block-jetpack-slideshow_image {
	width: 100%;
	max-width: 100%;
}

/*
 * Post Content
 * The single post template (patterns/single.php) wraps Post Content in a
 * vertical flex container for its stacked layout. As a flex item, Post
 * Content should stretch to the container's full cross-axis width, but if
 * it contains content with a large fixed pixel width (e.g. the Slideshow
 * block's Swiper instance, which sets an inline width matching whatever
 * viewport it initialized at), the browser keeps Post Content sized to that
 * content's intrinsic width instead of stretching -- so a later viewport
 * change (window resize, orientation change) leaves Post Content, and
 * everything inside it, wider than its column and overflowing the page.
 * DOTTHEM-401
 */
.wp-block-post-content {
	width: 100%;
}