/*
Theme Name: MRN
Description: Tema em blocos da MRN Editora. Leve, mantido no repositorio e com os modelos protegidos contra alteracao acidental.
Version: 0.2.0
Author: MRN Editora
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: mrn
*/

/*
 * Design tokens live in theme.json, never here. This file styles only what
 * theme.json cannot express: layout scaffolding, component internals, and the
 * classes that plugins outside this theme rely on.
 *
 * Sections, in order:
 *   1. Scaffolding and the grid classes mrn-events depends on
 *   2. Header, notice bar, navigation
 *   3. Breadcrumbs
 *   4. Footer
 *   5. Responsive layout
 *   6. Full-bleed content
 *   7. Form controls
 *
 * Phase 1 ships the scaffolding only. Sections 2-6 arrive with the theme build.
 */

/* ---------------------------------------------------------------- 1. Scaffolding */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * Setting `display` on an element that uses the `hidden` attribute silently
 * defeats it - author styles beat the UA's `[hidden] { display: none }`. The
 * search overlay and the mobile drawer both set `display`, so without this they
 * render open on every page, and the search panel's near-opaque white backdrop
 * covers the entire site.
 */
[hidden] {
	display: none !important;
}

/*
 * mrn-events renders through get_header()/get_footer() and wraps its output in
 * `.site-content.col-12`, and its stylesheet targets `.container` and the
 * Bootstrap-style column classes WoodMart provided. Those classes have to keep
 * working or both event pages lose their layout. See inc/compat.php for the
 * template-loading half of the same problem.
 */
/*
 * The root gutter, in one place. It was written as a literal 15px in three
 * rules, which is fine until something needs to cancel it - see .mrn-bleed.
 */
:root {
	--mrn-gutter: 15px;
}

.container {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1222px);
	margin-inline: auto;
	padding-inline: var(--mrn-gutter);
}

/*
 * Full-bleed ground.
 *
 * A section that carries a background has to reach both edges of the window,
 * or it reads as a coloured stripe framed by two thin margins of page. Inside
 * `.site-content.col-12` every child is inset by the root gutter, so a banded
 * section was landing 15px short on each side.
 *
 * Cancelling the known gutter rather than the usual `width: 100vw` trick: 100vw
 * counts the scrollbar, so on any platform that reserves scrollbar width the
 * bleed overshoots and the page scrolls sideways. This cannot overshoot,
 * because it removes exactly what the parent added.
 *
 * Put `.container` inside a bleed to bring content back to the shell.
 */
.mrn-bleed {
	margin-inline: calc(-1 * var(--mrn-gutter));
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-inline: -15px;
}

[class*="col-"] {
	width: 100%;
	padding-inline: var(--mrn-gutter);
}

.col-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 576px) {
	.col-sm-6 { flex: 0 0 50%; max-width: 50%; }
}

@media (min-width: 768px) {
	.col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.col-md-6 { flex: 0 0 50%; max-width: 50%; }
}

@media (min-width: 992px) {
	.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
	.col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
	.col-lg-9 { flex: 0 0 75%; max-width: 75%; }
}

.site-content {
	padding-block: var(--wp--preset--spacing--60, 60px);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* Visible only to screen readers, and to keyboard users once focused. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 9999;
	width: auto;
	height: auto;
	padding: 12px 20px;
	clip-path: none;
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--primary, #ea6801);
}

/* ------------------------------------------------- 2. Notice bar and header */

/*
 * Hidden before first paint by the inline script in wp_head, so dismissing the
 * bar never causes a flash or a 40px jump on the next page load.
 */
:root[data-mrn-notice="off"] .mrn-notice-bar { display: none; }

.mrn-notice-bar {
	background: var(--wp--preset--color--banner, #dd9933);
	color: rgba(255, 255, 255, .92);
	font-size: 14px;
}

.mrn-notice-bar__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--header--banner-height, 40px);
	max-width: var(--wp--style--global--content-size, 1222px);
	margin-inline: auto;
	padding: 6px 40px;
	text-align: center;
}

.mrn-notice-bar__text { color: inherit; text-decoration: none; }
.mrn-notice-bar__text:hover { text-decoration: underline; }

.mrn-notice-bar__close {
	position: absolute;
	right: 8px;
	padding: 4px 10px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.mrn-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1222px);
	margin-inline: auto;
	padding-inline: 15px;
}

.mrn-header { background: #fff; }

.mrn-header__general {
	display: flex;
	align-items: center;
	min-height: var(--wp--custom--header--general-height, 105px);
	transition: min-height .25s ease;
}

.mrn-header__logo img {
	display: block;
	width: var(--wp--custom--header--logo-width, 250px);
	height: auto;
	transition: width .25s ease;
}

.mrn-header__tools { display: flex; align-items: center; gap: 4px; }

.mrn-header__search-toggle,
.mrn-header__burger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--entity, #333);
	cursor: pointer;
}

.mrn-header__burger { display: none; flex-direction: column; gap: 4px; }
.mrn-header__burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	transform-origin: center;
	transition: transform .35s ease, opacity .2s ease;
}

.mrn-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mrn-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mrn-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mrn-header__bottom {
	min-height: var(--wp--custom--header--bottom-height, 50px);
	border-top: 1px solid var(--wp--custom--rule, rgba(0, 0, 0, .106));
	display: flex;
	align-items: center;
}

/* navigation */

.mrn-nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0; padding: 0; list-style: none; }

.mrn-nav__link {
	display: inline-block;
	padding: 6px 10px;
	color: var(--wp--preset--color--entity, #333);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
}

.mrn-nav__link:hover,
.mrn-nav__link:focus-visible,
.mrn-nav__link.is-current { color: var(--wp--preset--color--primary, #ea6801); }

.mrn-nav--footer,
.mrn-nav--drawer { flex-direction: column; gap: 0; }

.mrn-nav--footer .mrn-nav__link { padding: 3px 0; color: var(--wp--preset--color--body, #767676); }
.mrn-nav--footer .mrn-nav__link:hover { color: var(--wp--preset--color--primary, #ea6801); }
.mrn-nav--drawer .mrn-nav__link { padding: 10px 0; font-size: 13px; }

/*
 * Sticky: the nav row alone pins at 50px and the logo row shrinks, matching
 * WoodMart's sticky_height of 50. The class is set by an IntersectionObserver,
 * never by a scroll handler.
 */
.mrn-header__bottom { position: sticky; top: 0; z-index: 90; background: #fff; }

:root.is-header-stuck .mrn-header__bottom { box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
:root.is-header-stuck .mrn-header__general { min-height: 76px; }
:root.is-header-stuck .mrn-header__logo img { width: 190px; }

/* search overlay and mobile drawer */

.mrn-search {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 18vh;
	background: rgba(255, 255, 255, .97);
}

.mrn-search__inner { display: flex; gap: 10px; width: min(680px, 90vw); }
.mrn-search__inner form { flex: 1; display: flex; gap: 8px; }
.mrn-search__close { border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; }

.mrn-drawer { position: fixed; inset: 0; z-index: 100000; }
.mrn-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity .4s ease;
}

.mrn-drawer__panel {
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 1;
	width: min(320px, 85vw);
	padding: 24px 20px;
	overflow-y: auto;
	background: #fff;
	transform: translateX(-100%);
	transition: transform .4s cubic-bezier(.23, 1, .32, 1);
	will-change: transform;
}

.mrn-drawer.is-open .mrn-drawer__panel { transform: translateX(0); }
.mrn-drawer.is-open .mrn-drawer__backdrop { opacity: 1; }

.mrn-drawer__close { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; }

:root.is-overlay-open { overflow: hidden; }

/* ------------------------------------------------------------- 3. Page heroes */

.mrn-page-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 260px;
	background-image: linear-gradient(90deg, rgba(104, 38, 0, .76), rgba(20, 20, 20, .25)), var(--mrn-hero-image);
	background-position: center;
	background-size: cover;
	color: #fff;
}

.mrn-page-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wp--custom--layout--shell, 1222px);
	margin-inline: auto;
	padding: 45px 15px;
}

.mrn-page-hero__title {
	max-width: 900px;
	margin: 0;
	color: #fff;
	font-size: clamp(40px, 5vw, 62px);
	font-weight: 400;
	line-height: 1.08;
	text-transform: uppercase;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .2);
}

/* Page titles move into the photographic hero only on mapped routes. */
.page-id-4400 main > .wp-block-post-title,
.page-id-2 main > .wp-block-post-title { display: none; }

/* ------------------------------------------------------------- 4. Breadcrumbs */

/*
 * No fill. The breadcrumb bar used to carry Papel Quente, which made it a lone
 * warm strip between a white header and white content - a band of colour that
 * marked nothing, on the one element whose whole job is to be unobtrusive.
 *
 * The house rule now: paper is a stage behind an object, or it marks a block of
 * a genuinely different kind. Wayfinding is neither. A hairline is enough to
 * separate the trail from the page.
 */
.mrn-breadcrumbs {
	border-bottom: 1px solid var(--wp--custom--rule, rgba(0, 0, 0, 0.106));
	color: var(--wp--preset--color--body, #767676);
	font-size: 13px;
}

.mrn-breadcrumbs__inner {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1222px);
	margin-inline: auto;
	padding: 11px 15px;
}

.mrn-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mrn-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

.mrn-breadcrumbs__item + .mrn-breadcrumbs__item::before {
	content: "/";
	margin-right: 8px;
	color: #6e6459;
}

.mrn-breadcrumbs a {
	color: var(--wp--preset--color--primary, #ea6801);
	text-decoration: none;
}

.mrn-breadcrumbs a:hover,
.mrn-breadcrumbs a:focus-visible {
	color: var(--wp--preset--color--primary-dark, #c25601);
	text-decoration: underline;
}

.mrn-breadcrumbs [aria-current="page"] {
	word-break: break-word;
}

/* ---------------------------------------------------------------- 5. Blog */

.mrn-blog-index,
.mrn-blog-query { width: 100%; }

.mrn-blog-index {
	max-width: var(--wp--custom--layout--contact, 1140px);
	margin-inline: auto;
}
.mrn-blog-grid { gap: 42px 30px; }

/*
 * The border and the shadow were doing the same job twice. Depth alone reads as
 * a sheet on paper; a hairline rectangle around it reads as a diagram.
 */
.mrn-blog-grid > li {
	overflow: hidden;
	border: 0;
	border-radius: var(--wp--custom--radius--card, 22px);
	background: #fff;
	box-shadow: var(--wp--custom--shadow--card, 0 14px 40px rgba(36, 32, 28, .06));
	transition: box-shadow .35s ease, transform .35s ease;
}

.mrn-blog-grid > li:hover,
.mrn-blog-grid > li:focus-within {
	box-shadow: var(--wp--custom--shadow--lift, 0 18px 55px rgba(36, 32, 28, .11));
	transform: translateY(var(--wp--custom--lift, -4px));
}

@media (prefers-reduced-motion: reduce) {
	.mrn-blog-grid > li { transition: none; }
	.mrn-blog-grid > li:hover { transform: none; }
}

.mrn-blog-card__image { margin: 0 !important; }
.mrn-blog-card__image img { transition: transform .45s ease; }
.mrn-blog-grid > li:hover .mrn-blog-card__image img { transform: scale(1.025); }

.mrn-blog-card__body { padding: 28px 30px 30px; }
.mrn-blog-card__terms { margin: 0 0 10px; color: var(--wp--preset--color--primary, #ea6801); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.mrn-blog-card__terms a { color: inherit; }
.mrn-blog-card__title { margin: 0 0 10px; font-size: clamp(22px, 2.2vw, 28px) !important; line-height: 1.25; }
.mrn-blog-card__date { margin: 0 0 14px; color: var(--wp--preset--color--body, #767676); }
.mrn-blog-card__excerpt { margin: 0; color: var(--wp--preset--color--body, #767676); font-size: 14px; line-height: 1.7; }
.mrn-blog-card__excerpt .wp-block-post-excerpt__more-link { color: var(--wp--preset--color--primary, #ea6801); font-size: 12px; font-weight: 600; text-transform: uppercase; }

.single-post .mrn-article > .mrn-article__terms,
.single-post .mrn-article > .mrn-article__title,
.single-post .mrn-article > .mrn-article__meta,
.single-post .mrn-article > .wp-block-post-content,
.single-post .mrn-article > .mrn-article__rule,
.single-post .mrn-article > .mrn-article__navigation {
	width: min(calc(100% - 30px), 820px) !important;
	margin-inline: auto !important;
}

.single-post .mrn-article > .wp-block-post-featured-image {
	width: min(calc(100% - 30px), var(--wp--custom--layout--media, 900px)) !important;
	margin-inline: auto !important;
}

.mrn-article__terms { margin-bottom: 10px !important; color: var(--wp--preset--color--primary, #ea6801); font-size: 12px; font-weight: 600; text-align: center; text-transform: uppercase; }
.mrn-article__terms a { color: inherit; }
.mrn-article__title { margin-top: 0 !important; margin-bottom: 12px !important; font-size: clamp(30px, 4vw, 44px) !important; text-align: center; }
.mrn-article__meta { gap: 8px 18px; margin-bottom: 30px !important; color: var(--wp--preset--color--body, #767676); }
.mrn-article__meta > * { margin: 0; }
.mrn-article .wp-block-post-content { font-size: 16px; line-height: 1.75; }
.mrn-article__rule { margin-top: 45px !important; margin-bottom: 24px !important; }
.mrn-article__navigation { gap: 30px; font-size: 14px; }
.mrn-article__navigation > * { flex: 1; }
.mrn-article__navigation > :last-child { text-align: right; }
.mrn-article__navigation a { color: var(--wp--preset--color--entity, #333); font-weight: 600; }
.mrn-article__navigation a:hover { color: var(--wp--preset--color--primary, #ea6801); }

/* ---------------------------------------------------------------- 6. Footer */

.mrn-footer { background: #fff; border-top: 1px solid var(--wp--custom--rule, rgba(0, 0, 0, .106)); }

.mrn-footer__inner {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1222px);
	margin-inline: auto;
	padding-inline: 15px;
}

.mrn-footer__columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	padding-block: 45px;
}

/* Orange uppercase, measured from the live footer - not the #333 the audit
   reported, which is the sidebar widget title. */
.mrn-footer__title {
	margin: 0 0 12px;
	color: var(--wp--preset--color--primary, #ea6801);
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
}

.mrn-footer__column--brand img { max-width: 184px; height: auto; }

.mrn-footer__posts,
.mrn-footer__contact { margin: 0; padding: 0; list-style: none; }

.mrn-footer__posts li { margin-bottom: 12px; font-size: 14px; line-height: 1.5; }
.mrn-footer__posts a,
.mrn-footer__contact a { color: var(--wp--preset--color--body, #767676); text-decoration: none; }
.mrn-footer__posts a:hover,
.mrn-footer__contact a:hover { color: var(--wp--preset--color--primary, #ea6801); }
.mrn-footer__date { display: block; color: var(--wp--preset--color--body, #767676); font-size: 13px; }
.mrn-footer__contact li { margin-bottom: 6px; font-size: 14px; }

.mrn-footer__copyright {
	border-top: 1px solid var(--wp--custom--rule, rgba(0, 0, 0, .106));
	padding-block: 18px;
	color: var(--wp--preset--color--body, #767676);
	font-size: 14px;
	text-align: center;
}

/* ----------------------------------------------------------- 7. Responsive */

@media (max-width: 1024px) {
	.mrn-footer__columns { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
	.mrn-header__burger { display: flex; }
	.mrn-header__bottom { display: none; }
	.mrn-header__inner {
		display: grid;
		grid-template-columns: 42px minmax(0, 1fr) 42px;
		gap: 10px;
	}
	.mrn-header__logo { justify-self: center; }
	.mrn-header__logo img,
	:root.is-header-stuck .mrn-header__logo img { width: 180px; }
	.mrn-header__tools { justify-self: end; }
}

@media (max-width: 767px) {
	.mrn-page-hero { min-height: 180px; }
	.mrn-page-hero__inner { padding-block: 32px; }
	.mrn-page-hero__title { font-size: clamp(30px, 10vw, 40px); }
	.mrn-blog-grid { grid-template-columns: 1fr !important; gap: 28px; }
	.mrn-blog-card__body { padding: 24px 22px 26px; }
	.mrn-article__navigation { align-items: flex-start !important; gap: 18px; }
	.mrn-article__navigation a { font-size: 13px; }

	.mrn-header__general { min-height: 76px; }
	.mrn-header__logo img,
	:root.is-header-stuck .mrn-header__logo img { width: 140px; }

	.mrn-footer__columns { grid-template-columns: 1fr; gap: 0; padding-block: 25px; }
	.mrn-footer__column { border-bottom: 1px solid var(--wp--custom--rule, rgba(0, 0, 0, .106)); padding-block: 14px; }
	.mrn-footer__column--brand {
		border-bottom: 0;
		padding-top: 4px;
		padding-bottom: 24px;
		text-align: center;
	}
	.mrn-footer__column--brand img { max-width: 160px; }

	.mrn-footer__title { margin: 0; }
	.mrn-footer__column--collapsible .mrn-footer__title { cursor: pointer; }
	.mrn-footer__title[role="button"]::after { content: "+"; float: right; font-weight: 400; }
	.mrn-footer__column.is-open .mrn-footer__title::after { content: "\2212"; }

	/* Collapsed by default on small screens; the heading stays visible. */
	.mrn-footer__column--collapsible .mrn-footer__posts,
	.mrn-footer__column--collapsible nav { display: none; }
	.mrn-footer__column--collapsible.is-open .mrn-footer__posts,
	.mrn-footer__column--collapsible.is-open nav { display: block; padding-top: 12px; }
	.mrn-footer__column--contact .mrn-footer__contact { padding-top: 12px; }
}

/* ----------------------------------------------------- 8. Editorial widths */

/*
 * The migration originally let every page inherit the 1222px shell. Keep that
 * shell for purpose-built grids, but give ordinary prose and media a readable
 * measure. Custom section wrappers can still opt into their own composition.
 */
.page:not(.home) .wp-block-post-content > :where(p, h2, h3, h4, h5, h6, ul, ol, blockquote, table) {
	width: min(100%, var(--wp--custom--layout--reading, 886px));
}

.page:not(.home) .wp-block-post-content > .wp-block-image {
	width: min(100%, var(--wp--custom--layout--media, 900px));
}

.single-post main > :where(.wp-block-post-title, .wp-block-post-date, .wp-block-post-content) {
	width: min(calc(100% - 30px), var(--wp--custom--layout--reading, 886px)) !important;
	margin-inline: auto !important;
}

.single-post main > .wp-block-post-featured-image {
	width: min(calc(100% - 30px), var(--wp--custom--layout--media, 900px)) !important;
	margin-inline: auto !important;
}

/* ------------------------------------------------- 9. Full-bleed in content */

/*
 * Core's constrained layout sets `margin-left: auto !important` on every direct
 * child, which killed the slider's full-bleed. The homepage escaped it only
 * because front-page.html uses a flow layout, so the same slider was correct on
 * / and pushed 640px off-screen on /em-destaque/, forcing horizontal scroll and
 * shrinking the mobile viewport to about 66%.
 *
 * mrn-slides already has the right technique - position: relative, left: 50%,
 * width: 100vw, margin-left: -50vw. Only the margin is being overridden, so only
 * the margin needs restoring. An earlier attempt here used
 * calc(50% - 50vw), which double-counts: `left: 50%` has already applied the
 * 50%, so the element landed 611px right instead of 0. !important is required
 * either way, because core's rule is !important too.
 */
.is-layout-constrained > .mrn-slider,
.entry-content > .mrn-slider,
.mrn-slider {
	margin-left: -50vw !important;
	margin-right: 0 !important;
}

/* ------------------------------------------------------------ 10. Controls */

/*
 * Every form control on the site was rendering with raw user-agent chrome -
 * 13.3px Arial, inset borders, the textarea in monospace. theme.json cannot
 * reach form fields, so they need real rules. Values are the measured WoodMart
 * ones: #F9F9F9 fill, 1px hairline, 35px radius, 42px tall, 14px text.
 *
 * 16px on touch matters: anything smaller makes iOS Safari zoom the page on
 * focus and the visitor has to pinch back out.
 */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
	width: 100%;
	padding: 0 15px;
	height: var(--wp--custom--field--height, 42px);
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: var(--wp--custom--radius--field, 35px);
	background: var(--wp--preset--color--field, #f9f9f9);
	color: var(--wp--preset--color--entity, #333);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	appearance: none;
}

textarea {
	height: auto;
	min-height: 140px;
	padding: 12px 15px;
	border-radius: 18px;
	font-family: inherit;
	resize: vertical;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #ea6801);
	outline-offset: 1px;
	border-color: transparent;
}

/*
 * #aaa on the #f9f9f9 field measured 2.2:1 - placeholders are text and WCAG
 * asks for 4.5:1. This warm grey is the fifth step of the ink ramp and measures
 * 5.5:1 on the same fill. The body token #777 was the obvious candidate and
 * misses at 4.25:1.
 */
input::placeholder,
textarea::placeholder { color: #6e6459; }

/*
 * The pill is the house signature. It carries a real border in its own colour,
 * so the outline variant is the same silhouette with the fill removed and
 * nothing shifts by a pixel between them.
 *
 * Target submit controls, NOT the bare `button` element. Half the buttons on
 * this site are icon-only - burger, search toggle, three closes, the slider's
 * arrows and dots - and none of them is a pill. A bare `button` selector here
 * put min-height: 46px on the slider dots, which are 10px circles, and stretched
 * them into 28x46 capsules. Everything else the rule sets was already overridden
 * by the more specific plugin styles, so the breakage surfaced only in the one
 * property those styles happened not to declare. Keep this list explicit.
 */
button[type="submit"],
input[type="submit"],
.search-submit,
.wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--control--height, 46px);
	padding: var(--wp--custom--control--padding, 12px 24px);
	border: 1px solid var(--wp--preset--color--primary, #ea6801);
	border-radius: var(--wp--custom--radius--button, 999px);
	background: var(--wp--preset--color--primary, #ea6801);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--wp--custom--control--tracking, .045em);
	line-height: 1.4;
	text-transform: uppercase;
	cursor: pointer;
	appearance: none;
	transition: background-color var(--wp--custom--transition, .25s ease),
		border-color var(--wp--custom--transition, .25s ease),
		transform var(--wp--custom--transition, .25s ease);
}

/*
 * The hover list has to match the rule above exactly. It used to read
 * `button:hover`, unqualified, which painted every bare <button> on the site
 * solid dark orange on hover - disclosure toggles, copy controls, anything that
 * was not a submit. The icon-only header buttons were each exempted by hand
 * below, which is what kept the bug hidden: the exemptions looked like the
 * whole problem. Qualify, do not exempt.
 */
button[type="submit"]:hover,
input[type="submit"]:hover,
.search-submit:hover,
.wp-block-search__button:hover {
	background: var(--wp--preset--color--primary-dark, #c25601);
	border-color: var(--wp--preset--color--primary-dark, #c25601);
}

/*
 * The header buttons are icon-only and must keep their bare look. They never
 * matched the pill rule above, but they still need the user-agent button chrome
 * stripped off.
 */
.mrn-header__search-toggle,
.mrn-header__burger,
.mrn-notice-bar__close,
.mrn-search__close,
.mrn-drawer__close {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--entity, #333);
	/*
	 * The pill rule above carries `font-family: inherit`, and it stopped
	 * matching these when its selector narrowed to submit controls. Without
	 * this, every icon-only button falls back to the user-agent font and the
	 * close glyphs stop being Rubik.
	 */
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	transition: color var(--wp--custom--transition, .25s ease);
}

.mrn-header__search-toggle:hover,
.mrn-header__burger:hover,
.mrn-notice-bar__close:hover,
.mrn-search__close:hover,
.mrn-drawer__close:hover {
	background: none;
	color: var(--wp--preset--color--primary, #ea6801);
}

.mrn-notice-bar__close { color: inherit; }

/* Core's search form wraps its input in a <label>, which was collapsing the
   field to its intrinsic 153px inside the flex overlay. */
.mrn-search__inner form { align-items: center; }
.mrn-search__inner label { flex: 1; display: block; }
.mrn-search__inner .search-submit { flex: none; }

@media (max-width: 782px) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="search"],
	select,
	textarea { font-size: 16px; }
}

/* ------------------------------------------- 11. The two-voice typography */

/*
 * Literata carries the display voice - headlines, book titles, quotes - and
 * Rubik carries the interface. theme.json points every h1-h6 at Literata, so
 * this section does only the two things it cannot:
 *
 *   1. adds the serif to display text that is not a heading element;
 *   2. hands Rubik back to the elements that are headings in the markup but
 *      labels in the design. A 16px uppercase 600 column title is a label
 *      whatever tag it happens to use, and setting it in a serif would blur the
 *      distinction the pairing exists to draw.
 */

.mrn-page-hero__title,
.mrn-quote__text,
.mrn-slide__heading {
	font-family: var(--wp--preset--font-family--literata, Literata, Georgia, serif);
}

.mrn-tile__title,
.mrn-footer__title,
.mrn-author__name,
.mrn-author__works h3,
.mrn-section-title,
.mrn-home-instagram__handle,
.mrn-events-kicker,
.mrn-book__seal-name,
.mrn-catalog__filter,
.mrn-blog-card__terms,
.mrn-article__terms {
	font-family: var(--wp--preset--font-family--rubik, Rubik, Arial, sans-serif);
}

/*
 * Optical sizing is why this face was chosen over a static serif: the same file
 * draws a sturdier letter at caption size and a finer one at 62px.
 */
.mrn-page-hero__title,
.mrn-article__title,
.mrn-book__title { font-optical-sizing: auto; }