/* ============================================================
   ALZERIA — MOBILE RESPONSIVE  (additive, loaded LAST)
   Every rule lives inside a max-width media query, so this file
   ONLY affects screens <= 900px. Desktop (>900px) is untouched.
   To fully revert: delete this file + its <link> in header.php.
   ============================================================ */

/* ---- Tablets & large phones (<= 900px) ---- */
@media (max-width: 900px) {

	/* 3-column grid -> single column; show the page content ABOVE the side menu */
	/* No page-level sideways scroll: shrink the single grid column to the screen,
	   cap content media, and clip any residual bleed so every box fits edge-to-edge. */
	html, body { overflow-x: hidden; }
	#page {
		grid-template-columns: minmax(0, 1fr);   /* minmax(0,..) lets the column shrink BELOW wide children */
		width: 100%;
	}
	#content {
		order: -1;
		min-width: 0;
		border-left: none;
		border-right: none;
	}
	#lmenu { min-width: 0; border-right: none; border-top: 1px solid #1e1e1e; }
	#rmenu { min-width: 0; }
	#content img, .column_content img { max-width: 100% !important; height: auto; }
	.column_content { overflow-wrap: break-word; }

	/* Header wraps onto multiple rows and stops sticking, so the taller
	   bar scrolls away instead of eating the screen */
	#hdr        { height: auto; position: static; }
	#hdr-inner  { flex-wrap: wrap; height: auto; justify-content: center; padding: 8px 0; gap: 4px 6px; }
	#hdr-logo   { width: auto; height: auto; padding: 4px; }
	#hdr-right  { width: auto; order: 2; }
	#hdr-nav    { order: 3; flex-basis: 100%; height: auto; flex-wrap: wrap; }
	.nav-btn    { height: auto; min-width: 0; padding: 8px 14px; }
	.nav-divider{ display: none; }

	/* Wide data tables (highscores, guilds, characters) scroll sideways
	   instead of blowing the page width out */
	#content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Keep forms/inputs inside the screen */
	#content input, #content select, #content textarea { max-width: 100%; }

	.column_content { padding: 14px 12px; }

	/* Hero: full width + stacked CTA buttons so nothing is cramped or clipped.
	   JOIN NOW -> register.php (create account) is the primary CTA; DOWNLOAD is the
	   teal 2nd button (.hbtn-dl) that was overflowing the fixed height before. */
	#hero { height: auto; min-height: 190px; margin: 10px; }
	#hero::before { background: rgba(0,0,0,.62); }   /* uniform dark so centred text stays readable over the image */
	.hero-c { max-width: 100%; padding: 22px 20px; text-align: center; }
	.hero-c h1 { font-size: 32px; }
	.hbtn { display: flex; width: 100%; justify-content: center; margin: 8px 0 0 !important; }

	/* Footer: stack its 4 sections (logo / copy / links / social) vertically + centre */
	#ftr {
		flex-direction: column;
		text-align: center;
		gap: 10px;
		padding: 16px;
	}
	#ftr-links { flex-wrap: wrap; justify-content: center; flex: none; }
	#ftr-copy  { white-space: normal; }

	/* Cookie banner is also a space-between flex row -> stack text + button */
	.cookie-container { flex-direction: column; gap: 8px; padding: 12px 16px; text-align: center; }
}

/* ---- Phones (<= 560px) ---- */
@media (max-width: 560px) {
	body            { font-size: 16px; }
	#hdr-logo img   { height: 64px; width: auto; }
	.nav-sub        { display: none; }   /* hide the small descriptions to save space */
	.nav-btn        { padding: 6px 10px; }
	.nav-label      { font-size: 11px; }
	.hero-c h1      { font-size: 26px; }
	.column_content { padding: 12px 10px; }
}