/*
 * Modern/responsive patch layer.
 * Keep changes mostly additive/override-only so the legacy theme keeps working
 * while improving mobile layout and basic ergonomics.
 */

/* Global sanity */
html { -webkit-text-size-adjust: 100%; }
img, video, iframe { max-width: 100%; height: auto; }

/* Avoid changing legacy layout math globally; apply border-box only where we need it */
.nav-toggle,
.topmenu .sf-menu,
#form .input,
#form select,
#form textarea,
a.button {
	box-sizing: border-box;
}

/* Slightly better defaults without fighting the theme too much */
body { text-rendering: optimizeLegibility; }

/* Better focus styles (keyboard users) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid #1d4ed8;
	outline-offset: 2px;
}

/* Make link underlines clearer on hover without relying on color alone */
a:hover { text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* Prevent long strings/URLs from blowing up layouts */
#content, #content_full, #content_large { overflow-wrap: anywhere; }

/* Tables should not overflow the viewport on small screens */
#content table,
#content_full table,
#content_large table {
	max-width: 100%;
}

/* Replace image-based "button" styling with CSS */
a.button {
	background-image: none !important;
	background: #3E4B2D !important;
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 999px;
	color: #fff !important;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	height: auto !important;
	padding: 10px 14px !important;
	text-transform: none !important;
	font-size: 12px !important;
	line-height: 1.2 !important;
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
a.button span {
	background: none !important;
	padding: 0 !important;
	line-height: inherit !important;
}
a.button:hover { filter: brightness(1.05); text-decoration: none; }

/* Replace image-based sidebar menu items with CSS (desktop + mobile) */
#sidebar ul.subnav li a,
#sidebar_right ul.subnav li a,
#sidebar ul.subnav li li a,
#sidebar_right ul.subnav li li a {
	background-image: none !important;
	background: #ffffff;
	border: 1px solid #ddd;
	border-radius: 12px;
	height: auto !important;
	line-height: 1.3 !important;
	padding: 10px 12px !important;
	margin: 0 0 10px 0;
	box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
#sidebar ul.subnav li.current a,
#sidebar_right ul.subnav li.current a {
	border-color: rgba(153,51,51,0.55);
	box-shadow: 0 0 0 3px rgba(153,51,51,0.12);
}
#sidebar ul.subnav li a:hover,
#sidebar_right ul.subnav li a:hover {
	background: #f7f7f7;
	text-decoration: none !important;
}

/* Footer text is a bit low-contrast against the background image */
.footerlistbox, .footerlistboxlast { color: rgba(255,255,255,0.85) !important; }

@media (max-width: 1000px) {
	/* Replace fixed pixel widths with fluid max-widths */
	#Wrapper,
	#header,
	#footer,
	#subheader,
	.sliderbg,
	.followus,
	#copyright .content {
		width: auto !important;
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
	}

	#Wrapper { padding-left: 16px; padding-right: 16px; }

	/* Theme sets #main to a fixed 960px; make it fluid */
	#main {
		width: auto !important;
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
		height: auto;
	}

	/* Header shouldn't be a fixed height on smaller screens */
	#header { height: auto !important; }
	#subheader { height: auto !important; }

	/* Slider container shouldn't force a fixed height */
	.sliderbg { height: auto !important; }

	/* Top bar: switch from floats to a simple wrap */
	#topbar {
		height: auto !important;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		align-items: flex-start;
		justify-content: space-between;
		padding: 6px 0;
	}
	.irenslogan,
	.clientlogin { float: none !important; margin: 0 !important; }
}

@media (max-width: 760px) {
	/* Hide the toggle on larger screens; show on mobile only */
	.nav-toggle { display: inline-flex; }

	/* Improve readability on phones */
	body { font-size: 14px !important; line-height: 1.6 !important; }
	h1 { font-size: 22px !important; line-height: 1.2 !important; }
	h2 { font-size: 18px !important; line-height: 1.25 !important; }

	/* Stack main columns */
	#sidebar,
	#sidebar_right,
	#content,
	#content_full,
	#content_large {
		float: none !important;
		width: auto !important;
		margin: 0 !important;
	}

	/* Legacy content padding assumes desktop gutters */
	#content,
	#content_full,
	#content_large { padding: 12px 0 24px !important; }
	.box { padding: 0 !important; }
	#content ul,
	#content ol { margin-left: 18px !important; }

	/* Menu: allow wrapping; avoid off-screen dropdowns */
	.topmenu { float: none !important; margin-top: 12px !important; }
	.nav-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		border: 1px solid #ddd;
		border-radius: 12px;
		background: #fff;
		padding: 10px 12px;
		font: inherit;
		cursor: pointer;
	}
	.topmenu .sf-menu {
		float: none !important;
		display: flex;
		flex-direction: column;
		gap: 6px;
		margin-top: 10px;
		padding: 8px;
		border: 1px solid #ddd;
		border-radius: 14px;
		background: rgba(255,255,255,0.95);
	}
	/* Progressive enhancement: hide the menu only when JS is enabled */
	.js .topmenu .sf-menu { display: none; }
	.js .topmenu.is-open .sf-menu { display: flex; }
	.sf-menu li { float: none !important; }
	.sf-menu a { padding: 10px 10px !important; border-radius: 10px; }
	.sf-menu a:hover { background: #f3f4f6; text-decoration: none; }

	/* Make dropdown submenus usable on touch: render them inline */
	.sf-menu ul {
		position: static !important;
		top: auto !important;
		left: auto !important;
		width: auto !important;
		display: block !important;
		margin: 0 0 8px 0 !important;
		padding-left: 12px !important;
	}
	.sf-menu ul li { width: auto !important; }

	/* Sidebar nav backgrounds are image-based and don't scale well on mobile */
	ul.subnav li a,
	ul.subnav li li a {
		/* already handled above, keep this block as a no-op on purpose */
	}

	/* Forms: make inputs fluid */
	#form label {
		width: auto !important;
		display: block !important;
		margin-bottom: 6px !important;
	}
	#form .input,
	#form select,
	#form textarea {
		width: 100% !important;
		max-width: 100%;
	}
	#form textarea { height: 160px !important; }
	#form .indent { padding-left: 0 !important; }

	/* Footer: drop fixed columns */
	.footerlistbox,
	.footerlistboxlast {
		float: none !important;
		width: auto !important;
	}

	/* Follow bar width */
	.followus { padding-left: 0 !important; }

	/* Make wide tables scroll instead of overflowing */
	#content table,
	#content_full table,
	#content_large table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (min-width: 761px) {
	.nav-toggle { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}