/*
Theme Name:        Artisan
Theme URI:         https://www.artisaninteractive.com/
Author:            Artisan Interactive Consulting
Author URI:        https://www.artisaninteractive.com/
Description:       Custom block theme for Artisan Interactive. Paper, ink and one accent; Fraunces for headlines and the human layer, IBM Plex Sans for everything else.
Version:           1.0.1
Requires at least: 6.9
Tested up to:      7.1
Requires PHP:      8.0
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       artisan
*/

/* ---------- Base ---------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-variant-numeric: tabular-nums;
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.wp-element-button,
.wp-block-button__link {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	text-align: center;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

/* ---------- Header ---------- */

.site-header {
	border-bottom: 1px solid var(--wp--preset--color--ink);
}

.site-brand .wp-block-image {
	margin: 0;
}

.site-brand .wp-block-image img {
	width: 36px;
	height: 36px;
	object-fit: contain;
	display: block;
}

.wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}

.wp-block-navigation a {
	text-decoration: none;
}

.wp-block-navigation a:hover,
.wp-block-site-title a:hover {
	color: var(--wp--preset--color--accent);
}

/* ---------- Footer ---------- */

.site-footer {
	border-top: 1px solid var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
}

.site-footer .site-brand .wp-block-image img {
	width: 28px;
	height: 28px;
}

.site-footer .wp-block-site-title {
	font-size: 19px;
}

.site-footer a {
	text-decoration: none;
}

.site-footer .footer-label {
	font-weight: 600;
}

.site-footer .footer-legal {
	border-top: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--x-small);
}

.site-footer .footer-legal a {
	color: var(--wp--preset--color--slate);
}

/* ---------- Block styles (the Direction B devices) ---------- */

/* Human note: the red italic decision in the ledger. Use only for the human layer. */
.is-style-note {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 500;
	color: var(--wp--preset--color--accent);
	line-height: 1.35;
}

/* Machine proposal, struck through by the human. */
.is-style-strike {
	color: var(--wp--preset--color--struck);
	text-decoration: line-through;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
}

/* Small label above a heading. */
.is-style-eyebrow {
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--slate);
	letter-spacing: 0;
}

/* The ledger: white sheet, ink rule, offset shadow. */
.wp-block-group.is-style-ledger {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 4px;
	box-shadow: 6px 6px 0 var(--wp--preset--color--ink);
	padding: 26px 28px 22px;
}

/* Plain card: same sheet without the offset. */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 4px;
	padding: 30px;
}

/* Ledger row: two columns separated by a hairline. */
.wp-block-columns.is-style-ledger-row {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding: 13px 0;
	margin: 0;
	gap: 20px;
	font-size: 14px;
	line-height: 1.45;
}

/* ---------- Sections on ink ---------- */

.has-ink-background-color {
	color: var(--wp--preset--color--paper);
}

.has-ink-background-color :where(h1, h2, h3, h4, h5, h6, a) {
	color: var(--wp--preset--color--paper);
}

.has-ink-background-color .is-style-note {
	color: var(--wp--preset--color--accent-light);
}

.has-ink-background-color .is-style-eyebrow {
	color: var(--wp--preset--color--mist);
}

.has-ink-background-color .wp-block-columns.is-style-ledger-row {
	border-top-color: rgba(245, 242, 235, 0.15);
}

.has-ink-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--paper);
}

.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--paper);
}

.has-ink-background-color .wp-block-button > .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--accent);
}

/* ---------- Small screens ---------- */

@media (max-width: 781px) {
	.wp-block-columns.is-style-ledger-row {
		gap: 6px;
	}
}