/* SITE CHROME — navbar + footer, shared by EVERY page (homepage, /faq, and the legal pages once they
   are retrofitted). Page-specific styling lives elsewhere: the homepage keeps its .reveal/.memory
   choreography inline, document pages load inc/doc.css.

   Rendered markup comes from inc/site.php (site_navbar_badges / site_footer), so component and styles
   change together. */

/* ------------------------------------------------------------------ navbar */

.navbar {
	z-index: 99;
	/* Frosted "liquid glass": a Gaussian blur of the content scrolling behind + a slight
	   saturation boost, over a translucent white. -webkit- prefix for Safari. */
	background-color: rgba(255, 255, 255, 0.8);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	overflow: hidden;
	position: fixed;
	top: 0;
	font-family: "Arial";
	height: 100px;
	width: 100%;
}

/* The logo. On sub-pages it is wrapped in an <a> home; two things have to be right for that to be
   clickable, and both are easy to get wrong because the logo LOOKS fine either way:
     (1) the FLOAT belongs on the wrapper, not on the <object> — floating the object takes it out of
         flow and collapses the <a> to zero height, so there is nothing to hit;
     (2) `pointer-events: none` on the <object> — an embedded SVG document swallows the click instead
         of letting it reach the ancestor <a>.
   `.brand` is the wrapper on sub-pages; on the homepage the object is its own float (no link — the
   page is already home), so .Header keeps a float there via .navbar > .Header. */
.navbar .brand { display: block; float: left; height: 100px; padding-left: 5%; }
.navbar .brand .Header { display: block; height: 100%; pointer-events: none; }
.navbar > .Header { height: 100px; float: left; padding-left: 5%; }

/* Download badge = 50% of the navbar height (100px → 50px), vertically centered ((100−50)/2 = 25).
   width:auto keeps the Apple badge's proportions; the ~25px (50%) clear space is well above the
   guidelines' 1/10-of-badge-height minimum. */
.navbar .right { float: right; margin-top: 25px; margin-right: 50px; }
.navbar .right img { height: 50px; width: auto; margin-left: 10px; vertical-align: middle; }

/* Device-adaptive download badge — mirrors the screenshot rule (width OR touch): a narrow viewport
   OR any touch device (iPhone/iPad, incl. iPad-landscape ~1366px via `pointer: coarse`) → App Store
   badge; a wide mouse/trackpad Mac → Mac App Store badge. The width half also lets a desktop preview
   the switch by resizing. Both link to the one universal listing. */
.navbar .right .dl-mac { display: inline; }
.navbar .right .dl-ios { display: none; }
@media (max-width: 1024px), (pointer: coarse) {
	.navbar .right .dl-mac { display: none; }
	.navbar .right .dl-ios { display: inline; }
}

@media only screen and (max-width: 800px) {
	.navbar { height: 50px; }
	.navbar .brand, .navbar > .Header { height: 50px; padding-left: 10px; }
	/* 50% of the 50px mobile bar = 25px, centered ((50−25)/2 = 13). */
	.navbar .right { margin-top: 13px; margin-right: 10px; }
	.navbar .right img { height: 25px; }
}

/* ------------------------------------------------------------------ footer */

.site-footer { background: #f7f8fa; color: #3c4250; padding: 70px 8% 30px; font-size: 1.0em; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; max-width: 1200px; margin: 0 auto; }
.footer-brand .footer-logo { display: flex; align-items: center; gap: 12px; }
.footer-brand .footer-logo img { width: 40px; height: 40px; border-radius: 9px; }
.footer-brand .footer-logo span { font-size: 1.4em; font-weight: bold; color: #1c2430; }
.footer-tagline { color: #7a828f; margin: 16px 0 0; max-width: 260px; line-height: 1.5em; }
.footer-col h4 { font-size: 1.05em; font-weight: bold; color: #1c2430; margin: 0 0 18px; }
.footer-col a { display: block; color: #6b7280; text-decoration: none; margin: 0 0 14px; transition: color .15s; }
.footer-col a:hover { color: #1c2430; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
	max-width: 1200px; margin: 50px auto 0; padding-top: 26px; border-top: 1px solid #e3e6eb; }
.footer-copy { color: #8a919c; }
.footer-langs a { color: #8a919c; text-decoration: none; margin-left: 14px; }
.footer-langs a:hover { color: #1c2430; }
.footer-social a { color: #9aa1ac; margin-left: 16px; display: inline-flex; transition: color .15s; }
.footer-social a:hover { color: #1c2430; }

@media only screen and (max-width: 800px) {
	.site-footer { padding: 40px 6% 24px; }
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
	.footer-brand { grid-column: 1 / -1; }
	.footer-bottom { justify-content: center; text-align: center; }
}