/*
 * GRZ Gaming — responsive behaviour.
 *
 * Every media query in the theme lives here so viewport behaviour can be read
 * in one place. header.css and footer.css describe the wide-viewport
 * presentation; this file adapts it downwards.
 *
 * Breakpoints, and why:
 *
 *   1260px  the highlight strip drops its descriptive text before it truncates
 *   1120px  navigation breakpoint — the reference switches to the drawer here
 *    1024px footer drops to three columns
 *    768px  footer drops to two columns, strips become scrollable
 *    390px  footer drops to a single column so long FR/AR labels never overflow
 *
 * The theme is verified down to 320px and at 200% zoom, which is equivalent to
 * a 640px-wide layout viewport.
 */

/* ---- Highlight strip text ------------------------------------------------ */

@media (max-width: 1259.98px) {
	.grz-highlights__text {
		display: none;
	}
}

/* ---- Navigation breakpoint: drawer mode ---------------------------------- */

@media (max-width: 1119.98px) {

	.grz-utility {
		display: none;
	}

	.grz-header__inner {
		min-block-size: 3.625rem;
		gap: var(--grz-space-3xs);
	}

	.grz-brand {
		margin-inline-end: auto;
	}

	.grz-nav-toggle,
	.grz-search-toggle {
		display: inline-flex;
	}

	.grz-nav-toggle[aria-expanded="true"] .grz-icon--menu {
		display: none;
	}

	.grz-nav-toggle[aria-expanded="true"] .grz-icon--toggle-close {
		display: inline-flex;
	}

	.grz-search--desktop {
		display: none;
	}

	.grz-mobile-search {
		display: block;
	}

	/* One accessible name per control: the label clips instead of duplicating. */
	.grz-label-md {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.grz-account-link {
		padding-inline: var(--grz-space-2xs);
	}

	/* -- The panel becomes an off-canvas drawer -- */

	.grz-nav-panel {
		--grz-drawer-hidden: 105%;

		position: fixed;
		inset-block: var(--grz-admin-bar-height) 0;
		inset-inline-end: 0;
		z-index: var(--grz-z-drawer);
		display: flex;
		flex: 0 0 auto;
		flex-direction: column;
		align-items: stretch;
		gap: var(--grz-space-md);
		inline-size: min(88vw, 25.625rem);
		padding: var(--grz-space-md);
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: var(--grz-surface);
		box-shadow: var(--grz-shadow-md);
		visibility: hidden;
		transform: translateX(var(--grz-drawer-hidden));
		transition:
			transform var(--grz-transition-slow),
			visibility 0s linear var(--grz-drawer-exit-delay);
	}

	[dir="rtl"] .grz-nav-panel {
		--grz-drawer-hidden: -105%;
	}

	.grz-nav-panel.is-open {
		visibility: visible;
		transform: translateX(0);
		transition:
			transform var(--grz-transition-slow),
			visibility 0s linear 0s;
	}

	.grz-nav-panel__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--grz-space-sm);
		padding-block-end: var(--grz-space-sm);
		border-block-end: 1px solid var(--grz-border);
	}

	.grz-nav-panel__extra {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--grz-space-sm);
		margin-block-start: auto;
		padding-block-start: var(--grz-space-sm);
		border-block-start: 1px solid var(--grz-border);
	}

	.grz-nav-panel__utility .grz-menu--panel-utility {
		display: flex;
		flex-direction: column;
		gap: var(--grz-space-3xs);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.grz-nav-panel__utility a {
		display: inline-flex;
		align-items: center;
		min-block-size: 2.5rem;
		color: var(--grz-text-soft);
		font-size: var(--grz-font-size-sm);
		font-weight: var(--grz-weight-semibold);
		text-decoration: none;
	}

	.grz-primary-nav {
		inline-size: 100%;
	}

	.grz-menu--primary {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.grz-menu--primary li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.grz-menu--primary li > a {
		flex: 1 1 auto;
		min-block-size: 2.75rem;
		font-size: var(--grz-font-size-sm);
		white-space: normal;
	}

	.grz-nav-panel .grz-submenu-toggle {
		inline-size: 2.75rem;
		block-size: 2.75rem;
	}

	/*
	 * In drawer mode a submenu is a stacked block that the toggle button shows
	 * and hides. Only .grz-is-open changes `display`, so the hover and
	 * :focus-within rules that open submenus on wide screens cannot reopen one
	 * here.
	 */
	.grz-nav-panel .grz-submenu {
		order: 3;
		position: static;
		display: none;
		inline-size: 100%;
		min-inline-size: 0;
		margin-block-start: 2px;
		padding: 0;
		padding-inline-start: var(--grz-space-sm);
		border: 0;
		border-inline-start: 2px solid var(--grz-border);
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	.grz-nav-panel .grz-menu--primary li.grz-is-open > .grz-submenu {
		display: flex;
	}

	/* -- Scrim -- */

	.grz-nav-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: var(--grz-z-scrim);
		background-color: var(--grz-scrim);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			opacity var(--grz-transition),
			visibility 0s linear var(--grz-drawer-exit-delay);
	}

	.grz-nav-scrim.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition:
			opacity var(--grz-transition),
			visibility 0s linear 0s;
	}

	/*
	 * The JavaScript-disabled fallback for this block is delivered in a
	 * <noscript> element from inc/compatibility.php, so that it is never
	 * applied — even briefly — when scripts are available.
	 */
}

/* ---- Footer columns ------------------------------------------------------ */

/*
 * The reference makes both value strips horizontally scrollable below their
 * breakpoints. This theme wraps them instead, for two reasons:
 *
 *   1. A scroll container that is not keyboard focusable fails WCAG 2.1.1, and
 *      axe-core flags it as scrollable-region-focusable. Making it focusable
 *      would add two tab stops that do nothing on wider screens.
 *   2. A horizontal strip hides content behind a gesture many people never
 *      discover. Wrapping shows every item.
 *
 * This is a deliberate, documented departure from the reference's mobile
 * treatment of these two decorative strips. Nothing else changes.
 */
@media (max-width: 1119.98px) {
	.grz-footer-trust__track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.grz-footer-trust__item + .grz-footer-trust__item::before {
		display: none;
	}

	.grz-footer-trust__copy small {
		white-space: normal;
	}
}

@media (max-width: 1023.98px) {
	.grz-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.grz-footer-brand {
		grid-column: 1 / -1;
		max-inline-size: 34rem;
	}
}

@media (max-width: 767.98px) {
	.grz-highlights__track {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding-block: var(--grz-space-3xs);
	}

	.grz-highlights__item {
		padding-inline: var(--grz-space-2xs);
	}

	.grz-highlights__item + .grz-highlights__item::before {
		display: none;
	}

	.grz-footer__main {
		padding-block: var(--grz-space-lg) var(--grz-space-md);
	}

	.grz-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--grz-space-md) var(--grz-space-sm);
	}

	.grz-footer-bottom__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--grz-space-2xs);
	}

	.grz-content {
		padding-block: var(--grz-space-lg);
	}
}

@media (max-width: 479.98px) {
	:root {
		--grz-gutter: 1rem;
	}

	.grz-header__inner {
		min-block-size: 3.5rem;
	}

	.grz-brand__lead {
		font-size: 1.48rem;
	}

	.grz-brand__trail {
		font-size: 0.56rem;
		letter-spacing: 0.38em;
	}

	.grz-icon-button {
		min-inline-size: 2.5rem;
		padding-inline: var(--grz-space-3xs);
	}
}

@media (max-width: 389.98px) {
	.grz-footer-trust__track {
		grid-template-columns: minmax(0, 1fr);
	}

	.grz-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.grz-footer-brand {
		max-inline-size: none;
	}
}