/*
 * SSCResult - responsive refinements
 *
 * main.css holds the 320px layout. This file only widens it. Reading the two
 * together, nothing here is required for the site to be usable: every rule is
 * an improvement for a larger viewport, not a fix for a broken small one.
 *
 * Breakpoints, and why each exists:
 *   480px   two-column cards, roomier status block
 *   768px   horizontal navigation, tablet grids
 *   1024px  sidebar beside content
 *   1280px  final typographic breathing room
 */

/* ==========================================================================
   480px and up: small phone landscape, large phones
   ========================================================================== */

@media (min-width: 480px) {
	.result-status {
		padding: var(--sscr-space-4);
	}

	.result-status__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.button--lg {
		width: auto;
		min-width: 18rem;
	}

	.card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.source-list__item,
	.update-list__item {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--sscr-space-3);
	}

	.source-list__label {
		flex: 0 0 auto;
	}

	.result-status__stamps {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.375rem var(--sscr-space-3);
	}
}

/* ==========================================================================
   768px and up: horizontal navigation
   ========================================================================== */

@media (min-width: 768px) {
	.site-header__inner {
		grid-template-columns: auto 1fr;
		padding-block: var(--sscr-space-3);
	}

	.nav-toggle {
		display: none;
	}

	/* Always visible from here up, whatever the toggle state was. */
	.sscr-js .site-nav,
	.site-nav {
		display: block;
		grid-column: auto;
		justify-self: end;
	}

	.menu--primary {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: 0.125rem;
		padding-top: 0;
		border-top: 0;
	}

	.menu--primary .menu-item a {
		padding: 0.5rem 0.6875rem;
		font-size: 0.9375rem;
	}

	.menu--primary .menu-item a[aria-current="page"],
	.menu--primary .current-menu-item > a {
		box-shadow: inset 0 -3px 0 var(--sscr-primary);
	}

	/* Second-level items sit inline; a hover-only flyout is a mobile trap. */
	.menu--primary .sub-menu {
		display: flex;
		flex-wrap: wrap;
		padding-left: 0;
	}

	.site-title {
		font-size: 1.25rem;
	}

	.site-main {
		padding-block: var(--sscr-space-5) var(--sscr-space-6);
	}

	.panel {
		padding-top: var(--sscr-space-5);
	}

	.hero__intro {
		font-size: 1.125rem;
	}

	.card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.def-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sscr-space-4);
	}

	.steps {
		gap: var(--sscr-space-4);
	}

	.steps__item {
		grid-template-columns: 2.25rem 1fr;
		gap: var(--sscr-space-3);
	}

	.steps__number {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 0.9375rem;
	}

	.footer-widgets__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sscr-space-4);
	}

	.site-footer__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		gap: var(--sscr-space-3) var(--sscr-space-5);
		align-items: start;
	}

	.site-footer__inner > * + * {
		margin-top: 0;
	}

	.site-footer__note,
	.site-footer__independence,
	.site-footer__copyright {
		grid-column: 1 / -1;
	}

	.menu--footer {
		justify-content: flex-end;
	}

	/* The mobile-only slot stops rendering visually from tablet up. */
	.ad-slot--mobile {
		display: none;
	}
}

/* ==========================================================================
   1024px and up: sidebar beside content
   ========================================================================== */

@media (min-width: 1024px) {
	.layout--with-sidebar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 20rem;
		gap: var(--sscr-space-5);
		align-items: start;
	}

	.sidebar {
		margin-top: 0;
		position: sticky;
		top: var(--sscr-space-3);
	}

	.site-header--sticky ~ .site-main .sidebar {
		top: 5.5rem;
	}

	.card-grid {
		gap: var(--sscr-space-4);
	}

	.info-table {
		font-size: 1rem;
	}

	.entry--single .entry__content,
	.entry--page .entry__content,
	.faq__answer,
	.page-header__intro {
		max-width: 44rem;
	}
}

/* ==========================================================================
   1280px and up
   ========================================================================== */

@media (min-width: 1280px) {
	.container {
		padding-inline: var(--sscr-space-4);
	}

	.result-status {
		padding: var(--sscr-space-5);
	}

	.hero {
		padding-bottom: var(--sscr-space-4);
	}
}

/* ==========================================================================
   User preferences
   ========================================================================== */

/* Respect a stated preference for more contrast. */
@media (prefers-contrast: more) {
	:root {
		--sscr-muted: #2c3742;
		--sscr-border: #98a4b3;
		--sscr-border-strong: #6b7787;
	}

	a {
		text-decoration-thickness: 2px;
	}

	.card,
	.result-status,
	.widget {
		border: 2px solid var(--sscr-text);
	}
}