/* ─────────────────────────────────────────────────────────────────────────────
 * Museum Elmina — corrections for small screens.
 *
 * app.css is generated by `npm run css` and would overwrite anything added
 * there, so phone corrections live here and load after it.
 *
 * Most readers of this site are on a phone, on Ghanaian mobile data. The
 * sizes below were measured at 375px, not guessed.
 * ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 639px) {

	/* Section eyebrows were 0.6rem, which is 9.6px. Half an em of tracking
	   makes small type look smaller still, so the tracking comes down as the
	   size goes up and the label occupies about the same width. */
	.eyebrow {
		font-size: 0.72rem;
		letter-spacing: 0.3em;
	}

	/* The descriptions on the map cards are body copy, and were 11.5px. */
	p.me-clamp,
	p.me-clamp-2 {
		font-size: 0.82rem;
	}

	/* Footer links stood 23px tall. They are the only way to several pages,
	   and unlike the map pins there is room to make them comfortable. */
	footer ul a,
	footer .footer-legal-link {
		display: inline-block;
		padding: 10px 0;
		min-height: 24px;
	}

	footer ul {
		gap: 2px !important;
	}

	/* The menu button was 38 by 32. */
	[data-me-menu-toggle] {
		min-width: 44px;
		min-height: 44px;
		align-items: center;
		justify-content: center;
	}

	/* The small tracked labels set by class. Those set inline in block
	   markup, about twenty seven of them, are deliberately left alone: a
	   blanket pass over the render files is how 46 PHP files were corrupted
	   once before, and the sizes are right on a desktop. They want a proper
	   responsive type scale, considered as its own change. */
	.text-\[0\.60rem\],
	.text-\[0\.62rem\],
	.text-\[0\.65rem\],
	.text-\[0\.68rem\],
	.text-\[0\.70rem\],
	.text-\[0\.72rem\] {
		font-size: 0.8rem;
	}

	.me-stories-all,
	.me-pin-link {
		font-size: 0.8rem;
	}

	/* Safari on iOS zooms the whole page whenever a field's text is smaller
	   than 16px, and then leaves the reader zoomed in. The fields were
	   14.08px, so every form on the site did it: Contact, Partners and Plan
	   your visit. 16px is the threshold, not a preference. */
	body input,
	body textarea,
	body select,
	/* The fields carry their own classes, which outrank a plain type
	   selector. [class] matches any of them and wins on specificity
	   without reaching for !important. */
	body input[class],
	body textarea[class],
	body select[class] {
		font-size: 16px;
	}

	/* Links sitting in running text, which were 17 to 20px tall. */
	.cp-notice-link,
	.pv-notice-link,
	.pv-or a,
	a.pv-or {
		display: inline-block;
		padding: 11px 0;
	}
}

/* ---------------------------------------------------------------------------
   Eyebrow labels, tags and badges set in block stylesheets
   ---------------------------------------------------------------------------
   Sixty-seven label rules across twenty-one blocks sit between 0.52rem and
   0.65rem, which is 8.3px to 10.4px: legible on a desktop monitor at reading
   distance, not on a phone held in one hand. Their inline counterparts were
   given a clamp() in the block markup; these live in real stylesheets, so one
   grouped override does the same job.

   Every selector is prefixed with `body` so the rule outranks the block's own
   declaration whatever order the stylesheets load in, including the copies
   repeated inside each block's own max-width media queries.

   .ri-card-badge is left alone: at 0.52rem it sits in a 7px-inset absolute
   box and is hidden at this width anyway.
   --------------------------------------------------------------------------- */
@media (max-width: 639px) {

	body .me-team-badge,
	body .ca-banner-note,
	body .ca-episode,
	body .ca-card-label,
	body .ca-coming-status,
	body .ca-archive-label,
	body .ca-lightbox-label,
	body .cp-small-label,
	body .cp-social-label,
	body .cp-label,
	body .exa-back,
	body .me-divider-label,
	body .exh-badge-open,
	body .exh-badge-digital,
	body .exh-card-eyebrow,
	body .exh-tags span,
	body .exh-badge-soon,
	body .exh-soon-eyebrow,
	body .exh-tags--soon span,
	body .exh-virtual-status,
	body .exh-virtual-eyebrow,
	body .exh-tags--virtual span,
	body .fo-meta-label,
	body .fo-card-img span,
	body .fo-card-note,
	body .fo-voice-label,
	body .dv-type,
	body .dv-frame-hint span,
	body .dv-caption,
	body .dv-registry-cols span,
	body .dv-reg-label,
	body .dv-credits-eyebrow,
	body .dv-credits-label,
	body .dv-vlightbox-label,
	body .le-pill,
	body .le-clear,
	body .le-status,
	body .le-tag,
	body .le-year,
	body .le-partner-type,
	body .le-partner-status,
	body .le-cite summary,
	body .le-cite-copy,
	body .le-archive-title em,
	body .le-archive-read,
	body .pt-label,
	body .pe-lb-count,
	body .pe-hero-eyebrow,
	body .pe-label,
	body .ri-label,
	body .ri-now-source span:first-child,
	body .ri-count,
	body .ri-card-label,
	body .me-stories-all,
	body .me-story-read,
	body .me-ghost-label span,
	body .me-ghost-credit,
	body .me-tc-card-index,
	body .me-tc-card-stage,
	body .me-tc-card-year,
	body .to-badge360 span,
	body .to-tag,
	body .to-lightbox-caption p,
	body .pv-primary,
	body .pv-exp-stage,
	body .pv-day-tag,
	body .pv-flabel {
		font-size: 0.72rem;
	}
}