/*
 * GoalPress Pro — mobile & navigation-overlay refinements.
 *
 * Loaded LAST (see inc/enqueue.php) so these overrides win the cascade over
 * component sheets that load conditionally (entity.css, dashboard.css, …).
 * Synthesized from two independent design reviews; every selector verified
 * against the real theme CSS. Tokens only (no hex), logical properties for RTL,
 * and every rule is gated behind a media query or a min-inline-size guard, so
 * the desktop layout is untouched.
 */

/* ═══════════════════════════════════════════════════════════════════════
   1) STRUCTURAL OVERFLOW GUARDS (all viewports)
   A bare `1fr`/`auto` grid track keeps its implicit min-width:auto (= the
   intrinsic width of a long Arabic name), so the row grows wider than its
   card and the name is clipped by the card's own overflow:hidden (used for
   the rounded gradient surfaces). minmax(0,…) + min-inline-size:0 let the
   track shrink and the text ellipsis/wrap instead. Harmless on wide screens.
   ═══════════════════════════════════════════════════════════════════════ */
.gp-match__row { grid-template-columns: auto minmax(0, 1fr) auto; }
.gp-match__row > *,
.gp-grid > *,
.gp-dash__grid > *,
.gp-lc__grid > * { min-inline-size: 0; }
.gp-match__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gp-hero__teams { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.gp-hero__team { min-inline-size: 0; }
.gp-hero__name { overflow-wrap: anywhere; }

.gp-sb__grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.gp-sb__name,
.gp-team-cover__name,
.gp-league-head__title,
.gp-player-card__name,
.gp-dash__title,
.wp-block-post-title { overflow-wrap: anywhere; word-break: break-word; min-inline-size: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   2) MOBILE NAV OVERLAY (core/navigation, overlayMenu:"mobile")
   The theme ships zero CSS for .wp-block-navigation__responsive-container, so
   the panel is WP core default: white bg, black text, and left-aligned (the
   header's justifyContent:"right" → flex-end, which in an RTL column is the
   physical left). We give it a branded dark surface and logical start
   alignment (= right under dir=rtl). Scoped to .is-menu-open → desktop safe.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 781.98px) {

	/* hamburger + close: 44px branded tap targets */
	.wp-block-navigation__responsive-container-open {
		inline-size: 44px; block-size: 44px;
		display: inline-flex; align-items: center; justify-content: center;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 10px;
		color: var(--wp--preset--color--text) !important;
		background: transparent;
	}
	.wp-block-navigation__responsive-container-open svg { inline-size: 24px; block-size: 24px; }

	/* the opened panel: branded dark gradient + top accent hairline */
	.wp-block-navigation__responsive-container.is-menu-open {
		background: linear-gradient(180deg, var(--wp--preset--color--bg-deep), var(--wp--preset--color--scoreboard)) !important;
		color: var(--wp--preset--color--scoreboard-text);
	}
	.wp-block-navigation__responsive-container.is-menu-open::before {
		content: ""; position: absolute; inset-inline: 0; inset-block-start: 0;
		block-size: 3px;
		background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--accent));
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding: var(--wp--preset--spacing--60) clamp(1.25rem, 6vw, 2rem) var(--wp--preset--spacing--50);
	}

	/* column list, full width, right-aligned (logical start) */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: flex; flex-direction: column;
		align-items: flex-start; inline-size: 100%; gap: 0;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		inline-size: 100%; margin: 0;
		border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--scoreboard-text) 12%, transparent);
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child { border-block-end: 0; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
		display: block; inline-size: 100%;
		padding: 0.95rem 0.25rem;
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--lg);
		font-weight: 700;
		text-align: start; text-decoration: none;
		color: var(--wp--preset--color--scoreboard-text) !important;
		transition: color .15s ease;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:focus-visible {
		color: var(--wp--preset--color--accent) !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a {
		color: var(--wp--preset--color--accent) !important;
	}

	/* close button: tidy 44px circle */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		inline-size: 44px; block-size: 44px;
		display: grid; place-items: center; padding: 0; margin: 0.25rem;
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--scoreboard-text) 25%, transparent);
		border-radius: 50%;
		color: var(--wp--preset--color--scoreboard-text) !important;
		background: transparent; cursor: pointer;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
		border-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--accent) !important;
	}

	@media (prefers-reduced-motion: no-preference) {
		.wp-block-navigation__responsive-container.is-menu-open { animation: gp-nav-in .22s ease-out; }
	}
}
@keyframes gp-nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   3) COMPACT HEADER on phones. patterns/header.php styles the topbar/ticker/
   main rows inline (padding, search width:200px), so overriding padding needs
   !important — scoped to ≤600px only.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
	/* Reorder the stacked header rows into a clean mobile hierarchy: brand +
	   hamburger first, then the live-score ticker, then search last. */
	.gp-header { display: flex; flex-direction: column; }
	.gp-header__main   { order: 1; }
	.gp-header__ticker { order: 2; }
	.gp-header__topbar { order: 3; }

	.gp-header__topbar { flex-wrap: wrap; row-gap: 0.35rem; padding: 0.4rem 1rem !important; border-block-start: 1px solid var(--wp--preset--color--border); }
	.gp-header__topbar > div:first-child { display: none; }        /* decorative tagline */
	.gp-header__topbar > div:last-child { flex: 1 1 auto; }
	.gp-header__topbar form { flex: 1 1 auto; }
	.gp-header__topbar input[type="search"] { width: 100% !important; min-inline-size: 0; }

	.gp-header__ticker { padding: 0.3rem 1rem !important; font-size: var(--wp--preset--font-size--xs) !important; }

	.gp-header__main { padding: 0.6rem 1rem !important; gap: 0.5rem; }
	.gp-header__main .wp-block-site-title { font-size: 1.3rem !important; }
	.gp-header__main .gp-theme-toggle { width: 36px; height: 36px; }
	.gp-brand-mark svg { width: 32px; height: 32px; }
	.gp-header__brand .custom-logo { max-height: 32px; width: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   4) TYPOGRAPHY & GRID at phone widths — titles clamp so a bold 900-weight
   Arabic word never overruns a 360–390px screen; dense card grids collapse
   to a single column.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 782px) {
	body h1, body .wp-block-post-title { font-size: clamp(1.7rem, 7.5vw, 2.4rem); line-height: 1.25; max-inline-size: 100%; }
	body h2 { font-size: clamp(1.4rem, 6vw, 2rem); }
	.gp-dash__title, .gp-league-head__title, .gp-team-cover__name { font-size: clamp(1.6rem, 7vw, 2.2rem); }
	.gp-league-head, .gp-team-cover, .gp-player-card { padding: var(--wp--preset--spacing--40); }
}

@media (max-width: 560px) {
	.gp-dash__grid, .gp-lc__grid { grid-template-columns: 1fr; }
	.gp-match { padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); }
	.gp-match__name, .gp-match__sc { font-size: var(--wp--preset--font-size--small); }
}

/* Today-matches strip (Sports plugin .wc-today-strip) is already a horizontal
   flex scroller — add snap + a slim scrollbar so the partial next card reads as
   an intentional "swipe for more" carousel rather than a clipped edge. */
@media (max-width: 600px) {
	.wc-today-strip { scroll-snap-type: x proximity; scroll-padding-inline: 1rem; }
	.wc-today-strip > * { scroll-snap-align: start; }
	.wc-today-strip::-webkit-scrollbar { block-size: 4px; }
	.wc-today-strip::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--wp--preset--color--scoreboard-text) 30%, transparent); border-radius: 4px; }
}

@media (max-width: 480px) {
	.gp-hero__inner { padding: 1rem; }
	.gp-hero__teams { gap: var(--wp--preset--spacing--20); }
	.gp-hero__flag { inline-size: 2.8rem; block-size: 2.1rem; }
	.gp-hero__name { font-size: var(--wp--preset--font-size--small); }
	.gp-hero__score { font-size: var(--wp--preset--font-size--3xl); }
	.gp-hero__countdown { font-size: var(--wp--preset--font-size--xl); }
	.gp-sb__name { font-size: var(--wp--preset--font-size--base); }
}