/*
Theme Name: Brawand Consulting
Description: Custom theme for brawand.com. Reproduces the Astra + Spectra design without either.
Author: Infinite Web Consulting
Version: 1.0.0
Requires PHP: 7.4
Text Domain: brawand-modern
*/

:root {
	--red: #dd183b;
	--navy: #0f172a;
	--text: #3a3a3a;
	--font: "Courier Prime", "Courier New", Courier, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--red); font: 700 20px/1.65 var(--font); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: underline; }
a:hover, a:focus { color: var(--navy); }
p { margin: 0 0 1.6em; }
em { font-style: italic; }
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 8px; top: 8px; z-index: 10; padding: 8px 14px; background: #fff; color: var(--navy); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.br-page { width: min(1200px, calc(100% - 16px)); margin: 0 auto; padding-bottom: 6px; text-align: center; }
.br-logo { width: 504px; margin: 0 auto 20px; }
.br-line { font-size: 18px; line-height: 33px; margin: 0 0 28.8px; }
.br-letter { padding: 10px 0; font-size: 16px; line-height: 33px; color: var(--navy); }
.br-letter p { margin: 0; overflow-wrap: anywhere; }
.br-letter a:hover, .br-letter a:focus { color: var(--red); }
.br-qr { display: flex; justify-content: center; align-items: flex-start; gap: 0 180px; } /* the original's 132px spacer plus 24px column gaps */
.br-qr figure { margin: 0; width: 150px; }
.br-qr img { width: 150px; }
.br-qr figcaption { margin-top: 24px; font-size: 18px; line-height: 33px; }
.br-footer { width: 700px; margin: 0 auto 20px; }

/* Ordinary pages and posts, if any are added later */
.br-content { width: min(780px, calc(100% - 32px)); margin: 40px auto; color: var(--text); font-size: 18px; text-align: left; }
.br-content h1 { color: var(--navy); font-size: 2rem; line-height: 1.2; }
.br-content a { color: var(--red); }

@media (max-width: 921px) {
	.br-qr { gap: 0 clamp(24px, 14vw, 180px); }
}
@media (max-width: 544px) {
	.br-page { width: calc(100% - 16px); }
	.br-logo { width: 87%; }
	.br-qr { justify-content: space-around; gap: 0; }
	.br-qr figure { width: auto; }
	.br-qr img { width: 64px; margin: 0 auto; }
	.br-qr figcaption { margin-top: 18px; }
	.br-footer { width: calc(100% - 24px); }
}