/* ------------------------------------------------------------------
   Responsive layout for the /uusi version of the site.
   Loaded on TOP of the shared psa_style.css + edit_schedule.css, which
   still style the inner content (tables, timetable, pricelist, etc.).
   This file owns the outer shell (wrapper / logo / nav / footer) and the
   mobile behaviour. It uses its own uusi_* ids so it never collides with
   the fixed-width #container/#header/#navi rules in psa_style.css.
   ------------------------------------------------------------------ */

* { box-sizing: border-box; }

body {
	margin: 0;
	background: #810c90;
	font-family: Verdana, sans-serif;
}

#uusi_wrap {
	max-width: 820px;
	margin: 0 auto;
	background: #fff;
	border: 9px groove #BE82B8;
}

/* --- Logo across the top, full width --- */
#uusi_header {
	background: #fff;
	text-align: center;
	line-height: 0;
}
#uusi_header a { display: block; line-height: 0; }
.uusi_logo {
	display: block;
	width: 310px;        /* original logo size on desktop */
	max-width: 100%;
	height: auto;
	margin: 0 auto;      /* centred on the white header */
}

/* --- Navigation (desktop: horizontal bar) --- */
#uusi_nav {
	background: #fff;
	border-bottom: 3px solid #b900b9;
}
.uusi_nav_toggle { display: none; }   /* hidden checkbox that drives the menu */
.uusi_hamburger  { display: none; }   /* shown only on mobile */

.uusi_menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.uusi_menu a {
	display: block;
	padding: 14px 18px;
	font-size: 14px;
	font-weight: bold;
	color: #b900b9;
	text-decoration: none;
}
.uusi_menu a:hover { text-decoration: underline; }

/* --- Content --- */
#uusi_content {
	padding: 12px;
	font-family: Verdana, sans-serif;
	font-size: 13px;
	color: #000;
	overflow-x: auto;          /* very wide inner tables/timetable scroll instead of breaking layout */
}
#uusi_content img { max-width: 100%; height: auto; }
#uusi_content h2 { color: #b900b9; margin: 20px 0 10px; }

/* Decorative images shown below the content (natural size, wrap on narrow screens) */
.uusi_content_images {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	clear: both;          /* flow below any floated content (e.g. the equipment text) */
}
.uusi_content_images img { max-width: 100%; height: auto; }
/* Equipment page shows two images — make them fill the row (larger) on desktop */
.uusi_content_images--both img { flex: 1 1 45%; }

/* Form fields: the browser default border is almost invisible (very light gray,
   especially on iOS/Chrome). Give them a clear, darker border. */
#uusi_content input[type="text"],
#uusi_content input[type="email"],
#uusi_content input[type="tel"],
#uusi_content textarea {
	-webkit-appearance: none;   /* iOS ignores custom borders on the native style */
	appearance: none;
	border: 1px solid #555;
	border-radius: 2px;
	background: #fff;
	color: #000;
	font-size: 16px;            /* >= 16px stops iOS zooming in on focus */
}
#uusi_content select {
	border: 1px solid #555;     /* keep native appearance so the dropdown arrow stays */
	border-radius: 2px;
	background: #fff;
	color: #000;
	font-size: 16px;
}
#uusi_content input:focus,
#uusi_content textarea:focus,
#uusi_content select:focus {
	border-color: #b900b9;      /* brand colour when focused */
	outline: none;
}

/* Contact page: simple stacked form — label above each field, full-width fields.
   Behaves the same on desktop and mobile (fluid up to a 420px max width). */
#uusi_content #contact_form {
	float: none;
	width: auto;
	max-width: 420px;
	height: auto;
}
.uusi_field { margin-bottom: 12px; }
.uusi_field label {
	display: block;
	font-weight: bold;
	margin-bottom: 3px;
}
#uusi_content .uusi_field input[type="text"],
#uusi_content .uusi_field input[type="email"],
#uusi_content .uusi_field input[type="tel"],
#uusi_content .uusi_field select,
#uusi_content .uusi_field textarea {
	width: 100%;
}
.uusi_submit {
	margin-top: 4px;
	padding: 8px 20px;
	font-size: 16px;
	cursor: pointer;
}

/* --- Footer --- */
#uusi_footer {
	background: #b900b9;
	color: #fff;
	text-align: center;
	padding: 14px 10px;
	font-family: Verdana, sans-serif;
	font-size: 15px;
}

/* ===================== MOBILE ===================== */
@media (max-width: 640px) {
	#uusi_wrap { border-width: 4px; }

	/* logo spans the full width on mobile */
	.uusi_logo { width: 100%; }

	/* equipment images stack full-width on mobile */
	.uusi_content_images--both img { flex-basis: 100%; }

	/* hamburger toggle */
	.uusi_hamburger {
		display: block;
		padding: 14px 16px;
		font-size: 18px;
		font-weight: bold;
		color: #b900b9;
		cursor: pointer;
		user-select: none;
	}
	.uusi_menu {
		display: none;
		flex-direction: column;
	}
	.uusi_nav_toggle:checked ~ .uusi_menu { display: flex; }
	.uusi_menu a {
		border-top: 1px solid #eee;
		padding: 15px 16px;
		font-size: 16px;
	}

	/* neutralize the fixed-width floated top-level columns in the shared
	   content fragments (main.php / contact.html / equipment.html) so they
	   stack. Scoped to direct children so the timetable grid is untouched. */
	#uusi_content > div[style*="float"] {
		float: none !important;
		width: auto !important;
		max-width: 100% !important;
	}

	#uusi_content input,
	#uusi_content select,
	#uusi_content textarea { max-width: 100%; }

	#uusi_footer { font-size: 13px; }
}