/*
 * Site header of nashemisto.if.ua: logo left, guest login right (details.nmlogin), Nov 2026.
 * One file for the portal (templates/xp.winupdate.like/index.php) and the forum and blogs (skin set 4,
 * global_board_header), so the header looks the same everywhere. Desktop basics are in layout.css.
 * Phones (860 px and below): logo + "Вхід" button; the guest form folds into a drop-down under the header.
 * Rules: square corners, no all-caps captions, no serif fonts.
 */

/* the same box on every page, whatever the page's own base font */
table.header {
	font: 15px verdana, arial, sans-serif;
}

table.header > tbody > tr > td:nth-child(2) img {
	vertical-align: top;
}

/* guest login form: the site's square fields and accent button, on every page and width.
 * #nmpage table.header outranks the forum's general form and table rules (forum.css), so both draw it the same */
#nmpage table.header details.nmlogin input.inputbox {
	box-sizing: border-box;
	width: 140px;
	height: 26px;
	min-height: 0;
	margin: 2px;
	padding: 3px 6px;
	border: 1px solid #c3cedb;
	border-radius: 0;
	background: #fff;
	color: var(--nm-ink);
	font: 13px/1.4 Verdana, Geneva, Arial, sans-serif;
}

#nmpage table.header details.nmlogin input.inputbox:focus {
	border-color: var(--nm-accent);
	outline: 2px solid rgba(56, 92, 136, .18);
	outline-offset: 0;
}

#nmpage table.header details.nmlogin input.button {
	box-sizing: border-box;
	height: 26px;
	min-height: 0;
	margin: 2px;
	padding: 3px 12px;
	border: 1px solid var(--nm-accent-dk);
	border-radius: 0;
	background: var(--nm-accent);
	color: #fff;
	font: 600 13px/1.4 var(--nm-head);
	cursor: pointer;
}

#nmpage table.header details.nmlogin input.button:hover {
	background: var(--nm-accent-dk);
}

#nmpage table.header details.nmlogin td {
	font-size: 13px;
	vertical-align: middle;
}

@media (max-width: 860px) {
	/* ---------- header: logo left, Вхід right ---------- */

	table.header,
	table.header > tbody {
		display: block;
		width: auto;
		height: auto;
	}

	table.header > tbody > tr {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 10px 12px 9px;
	}

	table.header > tbody > tr > td {
		display: block;
		padding: 0;
	}

	table.header > tbody > tr > td[width] {
		display: none;
	}

	table.header > tbody > tr > td:nth-child(2) {
		flex: 0 1 auto;
		min-width: 0;
	}

	table.header > tbody > tr > td:nth-child(2) img {
		display: block;
		width: 230px;
		max-width: 100%;
		height: auto;
	}

	details.nmlogin img {
		width: 16px;
		height: 16px;
	}

	table.header > tbody > tr > td:nth-child(3) {
		flex: none;
		position: static;
	}

	/* guest login: a button that opens the old form as a square drop-down under the header */
	table.header > tbody > tr {
		position: relative;
	}

	details.nmlogin > summary,
	details.nmlogin:not([open]) > summary {
		display: inline-block;
		padding: 8px 14px;
		background: var(--nm-accent);
		color: #fff;
		font: 600 15px/1.3 var(--nm-head);
		cursor: pointer;
		list-style: none;
		user-select: none;
	}

	details.nmlogin[open] > summary {
		background: var(--nm-accent-dk);
	}

	details.nmlogin > table {
		position: absolute;
		z-index: 60;
		top: 100%;
		left: 8px;
		right: 8px;
		float: none;
		box-sizing: border-box;
		padding: 12px;
		border: 1px solid var(--nm-line);
		border-top: 3px solid var(--nm-accent);
		background: #fff;
		box-shadow: 0 8px 24px rgba(15, 23, 42, .15);
	}

	details.nmlogin > table table {
		float: none;
		width: 100%;
	}

	/* the form keeps its rows and columns (the forum's phone rules turn other tables into blocks) */
	#nmpage table.header details.nmlogin > table {
		display: table;
	}

	#nmpage table.header details.nmlogin > table table {
		display: table;
		width: 100%;
	}

	#nmpage table.header details.nmlogin tbody {
		display: table-row-group;
	}

	#nmpage table.header details.nmlogin tr {
		display: table-row;
	}

	#nmpage table.header details.nmlogin td {
		display: table-cell;
		width: auto;
		padding: 3px 2px;
		font-size: 14px;
		text-align: left;
		vertical-align: middle;
	}

	/* finger-sized fields; 16 px stops phones from zooming in */
	#nmpage table.header details.nmlogin input.inputbox {
		width: 100%;
		height: 38px;
		font-size: 16px;
	}

	#nmpage table.header details.nmlogin input.button {
		height: 38px;
		padding: 6px 14px;
		font-size: 15px;
	}
}

/* narrow phones */
@media (max-width: 380px) {
	table.header > tbody > tr > td:nth-child(2) img {
		width: 190px;
	}
}