/*
 * HSCResult — breakpoint rules.
 *
 * main.css is the mobile layout. Everything here is an enhancement for wider
 * viewports, so 320px is the baseline rather than an afterthought.
 *
 * Checked at 320, 360, 375, 390, 412, 768, 1024 and 1280+ px.
 */

/* ==========================================================================
   Very narrow phones (320–359px)
   ========================================================================== */

@media (max-width: 359px) {
	:root {
		--hsc-gap: 0.875rem;
		--hsc-section-gap: 1.5rem;
	}

	.hsc-container {
		padding-inline: 0.75rem;
	}

	.hsc-hero__title {
		font-size: 1.5rem;
	}

	.hsc-status__headline {
		font-size: 1.0625rem;
	}

	.hsc-page-title {
		font-size: 1.3125rem;
	}

	.hsc-brand__name {
		font-size: 1rem;
	}

	.hsc-nav-toggle__text {
		display: none;
	}

	/* Stacked label and value keep long values from overflowing. */
	.hsc-status__meta dt,
	.hsc-source__item dt {
		min-width: 100%;
	}

	.hsc-footer__menu {
		grid-template-columns: 1fr;
	}

	.hsc-table tbody th[scope="row"],
	.hsc-table--facts tbody th[scope="row"] {
		width: 45%;
	}

	.hsc-faq__answer {
		padding-left: 1rem;
	}
}

/* ==========================================================================
   Larger phones (480px and up)
   ========================================================================== */

@media (min-width: 30rem) {
	.hsc-btn--cta {
		width: auto;
		min-width: 18rem;
	}

	/* Two-column card only when there is actually an image to show. */
	.hsc-entry--has-media {
		display: grid;
		grid-template-columns: 9.5rem minmax(0, 1fr);
		gap: 1rem;
		align-items: start;
	}

	.hsc-entry__media {
		margin-bottom: 0;
	}
}

/* ==========================================================================
   Tablets (768px and up)
   ========================================================================== */

@media (min-width: 48rem) {
	:root {
		--hsc-section-gap: 2.25rem;
	}

	body {
		font-size: 1.0625rem;
	}

	h1 {
		font-size: 2rem;
	}

	h2 {
		font-size: 1.5rem;
	}

	h3 {
		font-size: 1.1875rem;
	}

	.hsc-container {
		padding-inline: 1.5rem;
	}

	.hsc-layout {
		padding-block: 1.5rem 3rem;
	}

	.hsc-header__inner {
		padding-block: 0.875rem;
	}

	.hsc-brand__logo img {
		max-height: 52px;
	}

	.hsc-brand__name {
		font-size: 1.375rem;
	}

	/* Horizontal navigation: the toggle is no longer needed. */
	.hsc-nav-toggle,
	.hsc-js .hsc-nav-toggle {
		display: none;
	}

	.hsc-nav,
	.hsc-js .hsc-nav,
	.hsc-js .hsc-nav.is-open {
		display: block;
		width: 100%;
		border-top: 1px solid var(--hsc-border);
	}

	.hsc-nav__list,
	.hsc-nav > ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0 1.125rem;
	}

	.hsc-nav ul li a {
		padding: 0.625rem 0;
		border-bottom: 3px solid transparent;
	}

	.hsc-nav ul li a:hover,
	.hsc-nav ul li a:focus {
		border-bottom-color: var(--hsc-border-strong);
		text-decoration: none;
	}

	.hsc-nav .current-menu-item > a,
	.hsc-nav .current_page_item > a {
		padding-left: 0;
		box-shadow: none;
		border-bottom-color: var(--hsc-accent);
	}

	/* Submenus stay in the flow: no hover-only content, no JS needed. */
	.hsc-nav .sub-menu {
		display: flex;
		flex-wrap: wrap;
		gap: 0 1rem;
		width: 100%;
		padding: 0 0 0.5rem;
		font-size: 0.875rem;
	}

	.hsc-status,
	.hsc-section,
	.hsc-source,
	.hsc-related,
	.hsc-disclaimer,
	.hsc-page-header,
	.hsc-content--intro,
	.hsc-comments,
	.hsc-search-form-wrap,
	.navigation.pagination,
	.hsc-postnav,
	.hsc-entry,
	.hsc-widget {
		padding: 1.5rem;
	}

	.hsc-hero {
		padding: 2rem 1.75rem;
	}

	.hsc-hero__title {
		font-size: 2.125rem;
	}

	.hsc-page-title {
		font-size: 1.875rem;
	}

	.hsc-status__headline {
		font-size: 1.3125rem;
	}

	.hsc-status__meta {
		grid-template-columns: 1fr 1fr;
	}

	.hsc-status__meta-item {
		border-right: 1px solid var(--hsc-border);
	}

	.hsc-status__meta-item:nth-child(2n) {
		border-right: 0;
	}

	.hsc-status__meta dt {
		min-width: 100%;
		font-size: 0.8125rem;
		text-transform: uppercase;
		letter-spacing: 0.03em;
	}

	.hsc-cards {
		grid-template-columns: repeat(3, 1fr);
	}

	.hsc-two-col {
		grid-template-columns: 1fr 1fr;
		gap: var(--hsc-gap-lg);
	}

	.hsc-related__list {
		grid-template-columns: 1fr 1fr;
	}

	.hsc-postnav .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.hsc-footer__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	}

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

	.hsc-table tbody th[scope="row"] {
		width: 32%;
	}

	.hsc-table--facts tbody th[scope="row"] {
		width: 30%;
	}
}

/* ==========================================================================
   Small laptops and up (1024px and up)
   ========================================================================== */

@media (min-width: 64rem) {
	/* Sidebar layout, only when a sidebar is actually rendered. */
	.hsc-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 20rem;
		gap: var(--hsc-gap-lg);
		align-items: start;
	}

	.hsc-no-sidebar .hsc-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.hsc-sidebar {
		margin-top: 0;
		position: sticky;
		top: 6rem;
	}

	.hsc-sticky-header .hsc-header__inner {
		flex-wrap: nowrap;
	}

	/* Brand and menu share one row on wide screens. */
	.hsc-nav,
	.hsc-js .hsc-nav,
	.hsc-js .hsc-nav.is-open {
		width: auto;
		border-top: 0;
	}

	.hsc-nav__list,
	.hsc-nav > ul {
		justify-content: flex-end;
		gap: 0 1.25rem;
	}

	.hsc-nav .sub-menu {
		display: none;
	}

	.hsc-nav li:hover > .sub-menu,
	.hsc-nav li:focus-within > .sub-menu {
		position: absolute;
		z-index: 60;
		display: block;
		min-width: 14rem;
		margin-top: 0;
		padding: 0.375rem 0.75rem;
		background: var(--hsc-surface);
		border: 1px solid var(--hsc-border);
		border-radius: var(--hsc-radius-sm);
		box-shadow: var(--hsc-shadow);
	}

	.hsc-nav .menu-item-has-children {
		position: relative;
	}

	.hsc-main--wide {
		max-width: 52rem;
	}

	.hsc-status__meta {
		grid-template-columns: repeat(3, 1fr);
	}

	.hsc-status__meta-item:nth-child(2n) {
		border-right: 1px solid var(--hsc-border);
	}

	.hsc-status__meta-item:nth-child(3n) {
		border-right: 0;
	}

	.hsc-related__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   Wide screens (1280px and up)
   ========================================================================== */

@media (min-width: 80rem) {
	.hsc-hero__title {
		font-size: 2.375rem;
	}

	.hsc-entries {
		gap: var(--hsc-gap-lg);
	}
}

/* ==========================================================================
   Mobile-only ad slot
   ========================================================================== */

@media (min-width: 48rem) {
	.hsc-ad--mobile {
		display: none;
	}
}

/* ==========================================================================
   Forced colours / high contrast
   ========================================================================== */

@media (forced-colors: active) {
	.hsc-status__dot {
		forced-color-adjust: none;
		border: 1px solid CanvasText;
	}

	.hsc-btn {
		border: 1px solid ButtonText;
	}
}