/*
Theme Name: OPAL
Theme URI: https://www.opal-uk.com/
Author: OPAL
Author URI: https://www.opal-uk.com/
Description: The OPAL UK site as a WordPress block theme. Built on the structure of Twenty Twenty-Five, restyled to the OPAL design system: the OPAL palette, self-hosted Montserrat, a 1272px measure, and patterns for the section shapes the site uses. Pages are built from core blocks, so every standard editor control still applies.
Update URI: https://www.opal-uk.com/
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.2
Version: 1.7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: opal
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, translation-ready, wide-blocks, block-styles, accessibility-ready, business
*/

/*
 * Base styles only. The design system lives in theme.json, and the block
 * level styling that makes core block output read as OPAL lives in
 * assets/css/opal.css, which functions.php enqueues after this file.
 */

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

/* Focus. Teal reaches 4.15:1 on white, clearing the 3:1 a non-text
   indicator needs. Dark grounds swap to the lighter teal. */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
	outline-color: var(--wp--preset--color--teal);
	outline-offset: 2px;
}

.opal-header :where(*:focus),
.is-style-opal-hero :where(*:focus),
.has-dark-background-color :where(*:focus),
.opal-footer :where(*:focus) {
	outline-color: var(--wp--preset--color--teal-light);
}

/* Reduce widows and orphans.
   https://github.com/WordPress/gutenberg/issues/55190 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/* Prevents unnecessary scrollbars around long preformatted lines.
   https://core.trac.wordpress.org/ticket/63875 */
:where(pre) {
	overflow-x: auto;
}