/*
Theme Name: SFAI WP Theme
Theme URI: https://www.sfailegacyarchive.org/
Author: Daniel Morgan
Author URI: https://www.sfailegacyarchive.org/
Description: A custom WordPress block theme for the SFAI Legacy Foundation + Archive, preserving and sharing the 150-year legacy of the San Francisco Art Institute. Developed by Daniel Morgan, built upon the Koinonia block theme by the Automattic Theme Team (ThemeShaper) — original theme design and structure credit to Automattic.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 5.7
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: koinonia
Tags: wide-blocks, featured-images, full-site-editing, rtl-language-support, style-variations, threaded-comments, translation-ready
*/

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

/*
 * 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: .0625em !important;
	text-underline-offset: .15em;
}

.skip-link:focus {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1000;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/*
 * Form input styling
 * Native form controls (used by embedded forms like the newsletter
 * signup) otherwise render with tiny, inconsistent browser defaults.
 * This gives them a larger, standard look using the theme's colors,
 * spacing, and radius tokens.
 */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="search"]:not(.wp-block-search__input),
textarea,
select {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--haskoy);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
	border-radius: 5px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

select {
	cursor: pointer;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="search"]:not(.wp-block-search__input):focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--wp--preset--color--contrast);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
}

input::placeholder,
textarea::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent);
}

label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--plus-jakarta);
	font-size: 0.875rem;
	font-weight: 600;
}

/*
 * Newsletter signup form (Mailchimp embed on Get Involved & Contact)
 * The embed ships only enough inline CSS to size its container; the
 * fields themselves rely on the generic input styles above. This adds
 * the layout/spacing and button treatment to match the rest of the site.
 */
html body #mc_embed_signup {
	max-width: 100%;
	/* Mailchimp's anti-spam honeypot field ships as position:absolute;
	 * left:-5000px, which escapes an unpositioned ancestor and widens the
	 * whole page. Make this the containing block and clip it. */
	position: relative;
	overflow: hidden;
}

#mc_embed_signup .mc-field-group {
	margin-bottom: var(--wp--preset--spacing--40);
}

#mc_embed_signup .indicates-required {
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: 0.875rem;
	color: color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent);
}

#mc_embed_signup .asterisk {
	color: var(--wp--preset--color--contrast);
}

#mc_embed_signup input[type="submit"] {
	display: inline-block;
	width: auto;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	font-family: var(--wp--preset--font-family--plus-jakarta);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0.25rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#mc_embed_signup input[type="submit"]:hover,
#mc_embed_signup input[type="submit"]:focus {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
}