/* IamBroker public site. One stylesheet, no framework, no build step (AD-011). */

@font-face {
	font-family: "Archivo";
	src: url("fonts/archivo-latin-var.woff2") format("woff2");
	font-weight: 400 700;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("fonts/jetbrains-mono-latin-var.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

:root {
	--ultramarine: #2033c4;
	--ink: #16233b;
	--paper: #fafaf8;
	--rule: #c9ceda;
	--ochre: #a8761f;

	--font-sans: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
	--font-mono:
		"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	/* 1.333 scale, fluid between 360px and 1280px. */
	--text-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--text-lead: clamp(1.15rem, 1.02rem + 0.6vw, 1.5rem);
	--text-title: clamp(1.5rem, 1.2rem + 1.5vw, 2.37rem);
	--text-display: clamp(1.9rem, 1.2rem + 2.2vw, 3.25rem);

	--measure: 68ch;
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--shell: 76rem;
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--text-body);
	line-height: 1.6;
	/* A long route name or a CNPJ must wrap instead of widening the page. */
	overflow-wrap: break-word;
}

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

a {
	color: var(--ultramarine);
	text-underline-offset: 0.18em;
}

a:focus-visible,
:focus-visible {
	outline: 2px solid var(--ultramarine);
	outline-offset: 2px;
}

h1,
h2,
h3 {
	font-stretch: 125%;
	font-weight: 600;
	line-height: 1.1;
	margin: 0 0 0.6em;
}

h1 {
	font-size: var(--text-display);
	letter-spacing: -0.01em;
}

h2 {
	font-size: var(--text-title);
}

h3 {
	font-size: var(--text-lead);
}

p,
li {
	max-width: var(--measure);
}

code,
kbd,
samp,
pre {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

.shell {
	max-width: var(--shell);
	margin: 0 auto;
	padding-inline: var(--gutter);
}

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	position: static;
	display: inline-block;
	padding: 0.5rem 0;
}

/* --- masthead --------------------------------------------------------- */

.masthead {
	border-bottom: 1px solid var(--rule);
}

.masthead__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem 1.5rem;
	padding-block: 1.1rem;
}

.masthead__brand {
	font-stretch: 125%;
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--ink);
	text-decoration: none;
	margin-right: auto;
}

.masthead__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
}

.masthead__nav a {
	text-decoration: none;
}

.masthead__nav a:hover {
	text-decoration: underline;
}

/* --- hero: the one bold move ------------------------------------------ */

.hero {
	background: var(--ultramarine);
	color: var(--paper);
	padding-block: clamp(2.5rem, 7vw, 5.5rem);
}

.hero__grid {
	display: grid;
	gap: clamp(1.75rem, 5vw, 3rem);
}

.hero__title {
	margin-bottom: 0.4em;
}

.hero__lede {
	font-size: var(--text-lead);
	max-width: 46ch;
	margin: 0;
}

.hero a {
	color: var(--paper);
}

.hero__payload {
	font-family: var(--font-mono);
	font-size: 0.95rem;
	line-height: 1.8;
	border: 1px solid rgb(250 250 248 / 45%);
	padding: 1.1rem 1.25rem;
	overflow-x: auto;
	margin: 0;
}

.hero__payload dt {
	font-weight: 600;
}

.hero__payload dd {
	margin: 0 0 0.5rem;
}

.payload__route {
	display: block;
	padding-bottom: 0.7rem;
	margin-bottom: 0.7rem;
	border-bottom: 1px solid rgb(250 250 248 / 45%);
}

.payload__status {
	display: block;
	opacity: 1;
}

.payload__mark {
	color: #f0c675;
}

@media (min-width: 720px) {
	.hero__grid {
		grid-template-columns: 7fr 5fr;
		align-items: start;
	}
}

/* The one animation: the status line arrives in three beats on load. */
@media (prefers-reduced-motion: no-preference) {
	.payload__status {
		opacity: 0;
		animation: payload-reveal 0.5s ease-out forwards;
	}

	.payload__status:nth-of-type(1) {
		animation-delay: 0.25s;
	}

	.payload__status:nth-of-type(2) {
		animation-delay: 0.75s;
	}

	.payload__status:nth-of-type(3) {
		animation-delay: 1.25s;
	}
}

@keyframes payload-reveal {
	from {
		opacity: 0;
		transform: translateY(0.35rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* --- sections --------------------------------------------------------- */

main {
	display: block;
}

.section {
	padding-block: clamp(2.25rem, 6vw, 4rem);
	border-bottom: 1px solid var(--rule);
}

.section:last-of-type {
	border-bottom: 0;
}

.section__title {
	margin-bottom: 1rem;
}

.steps {
	display: grid;
	gap: 1.5rem;
	padding-left: 1.2rem;
	margin: 0;
}

.steps li {
	padding-left: 0.4rem;
}

.steps h3 {
	margin-bottom: 0.3em;
}

.steps p {
	margin: 0;
}

@media (min-width: 860px) {
	.steps {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}
}

/* --- prose (legal pages) ---------------------------------------------- */

.prose {
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.prose h2 {
	margin-top: 2.2rem;
}

.prose dt {
	font-weight: 600;
	margin-top: 1rem;
}

.prose dd {
	margin: 0.2rem 0 0;
	max-width: var(--measure);
}

.lead {
	font-size: var(--text-lead);
	max-width: var(--measure);
}

.updated {
	color: var(--ink);
	opacity: 0.7;
	font-size: 0.9rem;
}

/* --- api reference ---------------------------------------------------- */

.routes {
	overflow-x: auto;
	margin-block: 1.5rem;
}

.routes table {
	border-collapse: collapse;
	width: 100%;
	min-width: 34rem;
}

.routes th,
.routes td {
	text-align: left;
	vertical-align: top;
	padding: 0.6rem 1rem 0.6rem 0;
	border-bottom: 1px solid var(--rule);
}

.routes th {
	font-stretch: 125%;
	font-weight: 600;
	white-space: nowrap;
}

.routes code {
	font-family: var(--font-mono);
	white-space: nowrap;
}

.method {
	color: var(--ochre);
	font-family: var(--font-mono);
	font-weight: 600;
}

pre.sample {
	border-left: 2px solid var(--rule);
	padding: 0.9rem 1.1rem;
	overflow-x: auto;
	background: none;
}

/* --- colophon --------------------------------------------------------- */

.colophon {
	border-top: 1px solid var(--rule);
	padding-block: 2rem 3rem;
	font-size: 0.95rem;
}

.colophon p {
	margin: 0 0 0.4rem;
	max-width: none;
}

.colophon__legal {
	color: var(--ink);
	opacity: 0.8;
}

.colophon__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-bottom: 1.2rem;
	padding: 0;
	list-style: none;
}

.colophon__nav li {
	max-width: none;
}