/* ==========================================================================
   Menel Integrated Services — modern responsive layer
   Loaded AFTER scripts/stylehome.css / style00.css to progressively
   override the legacy fixed-width table/float layout without touching
   every page's markup or content.
   ========================================================================== */

:root {
	--brand-teal-dark: #0d3b3e;
	--brand-teal: #1f6f73;
	--brand-teal-light: #4fa8ac;
	--brand-ink: #10161a;
	--brand-paper: #f5f7f7;
	--brand-white: #ffffff;
	--brand-accent: #ff9900;
	--content-max: 1000px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	background: var(--brand-paper) !important;
	font-family: "Segoe UI", Verdana, Arial, Helvetica, sans-serif;
}

img { max-width: 100%; height: auto; }

/* ---- Page shell ---------------------------------------------------- */

#container2 {
	width: 100% !important;
	max-width: var(--content-max);
	background: var(--brand-white) !important;
	box-shadow: 0 0 24px rgba(0,0,0,0.08);
	overflow: hidden; /* contain the floated sidebar so the shadow/box wraps it */
}
#container2::after { content: ""; display: table; clear: both; }

/* ---- Header / sidebar nav -------------------------------------------
   The sidebar is floated left with a fixed width; every content block
   that follows it (#header_main2, #header_main, #footer) is NOT floated
   and instead gets margin-left so it flows in the remaining column.
   This avoids the row-wrap gap that flexbox/grid produce when sibling
   blocks of different heights sit next to a fixed-width column.
   ------------------------------------------------------------------- */

#header_left {
	position: relative !important;
	float: left !important;
	width: 242px;
	background: var(--brand-teal-dark);
	padding: 16px 0 !important;
}

#logo { width: auto !important; text-align: center; padding: 0 12px; }
#logo img { max-width: 200px; }

#banner { width: auto !important; }
#banner img { display: none; } /* the decorative top/bottom nav-cap graphics */

#masterdiv { padding-top: 6px; }

.menutitle {
	width: auto !important;
	margin-left: 12px !important;
	margin-right: 12px !important;
	border: none !important;
	background: transparent !important;
	border-radius: 4px;
	font-family: "Segoe UI", Verdana, Arial, Helvetica, sans-serif !important;
	letter-spacing: .03em;
	transition: background .15s ease;
}
.menutitle:hover { background: rgba(255,255,255,0.08) !important; }
.menutitle a { display: block; padding: 2px 0; }

.submenu {
	margin-left: 12px !important;
	margin-right: 12px !important;
	background: rgba(0,0,0,0.25) !important;
	border-radius: 0 0 4px 4px;
}

/* Hamburger toggle (hidden on desktop, shown on small screens) */
#nav-toggle {
	display: none;
	width: 100%;
	background: var(--brand-teal-dark);
	color: var(--brand-white);
	border: none;
	padding: 14px 16px;
	font-size: 16px;
	font-weight: bold;
	font-family: "Segoe UI", Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	cursor: pointer;
}
#nav-toggle::after {
	content: "\2261";
	float: right;
	font-size: 20px;
	line-height: 1;
}

/* ---- Main content areas --------------------------------------------- */

#header_main,
#header_main2 {
	width: auto !important;
	float: none !important;
	margin-left: 242px;
	min-width: 0;
}

/* Nested content blocks (inside #main_content) shouldn't get a second
   indent — only the direct children of #container2 need the margin. */
#header_main3,
#main_content,
#main_content2 {
	width: auto !important;
	float: none !important;
	min-width: 0;
}

#header_main2 { height: auto !important; }

.main_content,
#main_content,
#main_content2 {
	padding: 12px 20px !important;
}

.main_content h3 {
	font-size: 20px !important;
	color: var(--brand-teal-dark) !important;
	border-bottom: 2px solid var(--brand-teal-light);
	padding-bottom: 8px !important;
	margin-bottom: 12px !important;
}

.main_content p,
.main_content ul,
.main_content ol {
	font-size: 14px !important;
	line-height: 1.6em !important;
	color: #333 !important;
}

/* ---- Homepage info cards (replaces the old catalog.jpg screenshot) --- */

.info-card {
	background: var(--brand-paper);
	border-left: 4px solid var(--brand-teal);
	border-radius: 4px;
	padding: 16px 18px !important;
	margin: 18px 0 !important;
}
.info-card h4 {
	margin: 0 0 10px !important;
	font-size: 16px;
	color: var(--brand-teal-dark);
}
.info-card p { margin: 0 0 8px !important; }
.info-card p:last-child { margin-bottom: 0 !important; }

.service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 8px;
}
.service-block h5 {
	margin: 0 0 6px !important;
	font-size: 13px;
	color: var(--brand-teal);
	text-transform: uppercase;
	letter-spacing: .03em;
}
.service-block ul {
	margin: 0 !important;
	padding-left: 18px !important;
	list-style: disc;
}
.service-block li {
	font-size: 13px !important;
	line-height: 1.5em !important;
	color: #333;
	margin-bottom: 4px;
}

@media (max-width: 480px) {
	.info-card { padding: 12px !important; }
}

/* Legacy inline tables used for layout: let them shrink instead of overflow */
table { max-width: 100%; }
#header_main table,
.main_content table {
	width: 100% !important;
}

/* ---- Footer ----------------------------------------------------------- */

#footer {
	float: none !important;
	clear: both;
	width: 100% !important;
	height: auto !important;
	background: var(--brand-ink) !important;
	padding: 14px 20px !important;
	line-height: 1.8em;
}
#footer a:hover { color: var(--brand-accent) !important; }

/* ---- Hero carousel (homepage) ----------------------------------------- */

.hero-carousel {
	position: relative;
	width: 100%;
	aspect-ratio: 753 / 165;
	overflow: hidden;
	background: var(--brand-ink);
}
.hero-carousel .slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .8s ease;
}
.hero-carousel .slide.is-active { opacity: 1; }
.hero-carousel .slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: none;
}
.hero-carousel .slide-caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	background: linear-gradient(transparent, rgba(0,0,0,0.75));
	color: var(--brand-white);
	font-family: "Segoe UI", Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	padding: 24px 16px 10px;
}
.hero-carousel .carousel-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,0.4);
	color: #fff;
	border: none;
	width: 34px;
	height: 44px;
	font-size: 20px;
	cursor: pointer;
	z-index: 2;
}
.hero-carousel .carousel-nav:hover { background: rgba(0,0,0,0.7); }
.hero-carousel .carousel-prev { left: 0; }
.hero-carousel .carousel-next { right: 0; }
.hero-carousel .carousel-dots {
	position: absolute;
	right: 10px; bottom: 8px;
	z-index: 2;
	display: flex;
	gap: 6px;
}
.hero-carousel .carousel-dots button {
	width: 8px; height: 8px; border-radius: 50%;
	border: 1px solid #fff; background: transparent; padding: 0; cursor: pointer;
}
.hero-carousel .carousel-dots button.is-active { background: #fff; }

@media (max-width: 480px) {
	.hero-carousel .slide-caption { font-size: 11px; padding: 16px 10px 8px; }
}

/* ---- Responsive breakpoints -------------------------------------------- */

@media (min-width: 701px) {
	#masterdiv { display: block !important; }
}

@media (max-width: 700px) {
	body { padding: 0 !important; }
	#container2 { box-shadow: none; }

	#header_left { float: none !important; width: 100%; padding: 0 !important; }
	#logo { padding: 12px; }

	#nav-toggle { display: block; }
	#masterdiv { display: none; padding-top: 0; }
	#masterdiv.is-open { display: block; }
	.menutitle { margin-left: 0 !important; margin-right: 0 !important; border-radius: 0; }
	.submenu { margin-left: 0 !important; margin-right: 0 !important; }

	#header_main, #header_main2 { margin-left: 0 !important; }

	.main_content, #main_content, #main_content2 { padding: 12px !important; }

	#footer { text-align: center; font-size: 11px !important; }
}