/* ============================================================
   NovaStudios – responsive layer (added 2026, modernization)
   Desktop look unchanged; rules only apply below 980px.
   ============================================================ */

/* Hamburger button – hidden on desktop */
.menu-toggle {
	display: none;
	background: rgba(255,255,255,0.9);
	border: 1px solid rgba(0,0,0,0.15);
	border-radius: 6px;
	color: #333;
	font-size: 22px;
	line-height: 1;
	padding: 8px 14px;
	cursor: pointer;
}

/* Content images never overflow their container */
#left-area img,
.post img,
.entry img,
.slide img,
.service img { max-width: 100%; height: auto; }

/* ---------- Tablet and below ---------- */
@media (max-width: 980px) {
	.container {
		width: auto;
		max-width: 960px;
		padding-left: 18px;
		padding-right: 18px;
		box-sizing: border-box;
	}
	#top-bottom .container { height: auto; }
	#top-center { background-size: contain; }

	/* Featured slider becomes fluid */
	#featured { padding: 0 40px; }
	#featured_content,
	#featured_content .slide { width: auto; }
	.slide .description,
	.pngimage .description { width: auto !important; }

	/* Tablet: stack the fixed-width float columns so they never overflow
	   (services are 3x265px = ~955px and would overflow a <980px viewport) */
	.service { float: none; width: auto; margin-right: 0; margin-bottom: 36px; }
	#content-area { background-image: none; }
	#content-top { background-image: none; }
	#left-area,
	#sidebar,
	.fullwidth #left-area { width: auto !important; float: none; }
	#sidebar { margin-top: 30px; }
	.post { padding-right: 0; }
}

/* ---------- Phones / small tablets ---------- */
@media (max-width: 768px) {
	/* Header / logo / slogan stack */
	#header { padding-top: 18px; }
	#logo { float: none; display: block; margin: 0 0 6px; max-width: 70%; height: auto; }
	p#slogan { float: none; padding-top: 0; margin-bottom: 8px; }

	/* Strip the decorative menu "pill" chrome on mobile */
	#menu { float: none; background: none; height: auto; margin-top: 6px; padding-left: 0; }
	#menu-right { background: none; padding-right: 0; height: auto; }
	#menu-content { background: none; height: auto; }

	/* Show hamburger, hide menu until toggled */
	.menu-toggle { display: inline-block; }
	ul#top-menu { display: none; }
	body.menu-open ul#top-menu {
		display: block !important;
		background: #ffffff !important;
		border-radius: 8px;
		box-shadow: 0 6px 24px rgba(0,0,0,0.25);
		padding: 4px 0;
		margin-top: 10px;
		overflow: hidden;
		position: relative;
		z-index: 50;
	}
	ul#top-menu li {
		float: none !important;
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border-bottom: 1px solid rgba(0,0,0,0.07);
	}
	ul#top-menu li:last-child { border-bottom: none; }
	ul#top-menu a {
		display: block;
		float: none !important;
		padding: 13px 18px;
		font-size: 16px;
		text-shadow: none;
		color: #2b2b2b;
		width: auto !important;
	}
	ul#top-menu > li.current_page_item > a { font-style: normal; color: #5a6b6d !important; }

	/* Sub-menus expand inline (no hover on touch) */
	ul#top-menu ul {
		position: static !important;
		display: block !important;
		visibility: visible !important;
		width: 100% !important;
		top: auto !important;
		left: auto !important;
		background: #f1f1f1;
		border: none !important;
		padding: 0 !important;
		box-shadow: none;
	}
	ul#top-menu ul li { padding: 0 !important; margin: 0 !important; border-bottom: 1px solid rgba(0,0,0,0.05); }
	ul#top-menu ul li a {
		float: none !important;
		width: auto !important;
		background: none !important;
		padding: 11px 18px 11px 34px;
		font-size: 15px;
		color: #555;
	}

	/* Hero CTA buttons: out of absolute positioning, centered.
	   The desktop button is a fixed-width PNG that clips long Czech text on
	   narrow screens, so on mobile we rebuild it as a fluid CSS button in the
	   same teal — keeps the look, text always fits. */
	#top-buttons { position: static; left: auto; bottom: auto; text-align: center; margin: 18px 0 4px; }
	#top-buttons a.button {
		float: none;
		display: inline-block;
		margin: 6px 5px;
		background: linear-gradient(#5aa9af, #3d8a90) !important;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0,0,0,0.3);
		height: auto !important;
		line-height: 1.25 !important;
		padding: 13px 20px !important;
		font-size: 18px;
	}
	#top-buttons a.button span {
		background: none !important;
		display: inline !important;
		height: auto !important;
		padding: 0 !important;
	}

	/* Home services: single column */
	.service { float: none; width: auto; margin-right: 0; margin-bottom: 40px; }

	/* Content + sidebar stack; drop the vertical separator bg */
	#content-area { background-image: none; }
	#content-top { background-image: none; }
	#left-area,
	#sidebar,
	.fullwidth #left-area { width: auto !important; float: none; }
	#sidebar { margin-top: 30px; }
	.post { padding-right: 0; }

	/* Featured slider stacks image over text */
	#featured { padding: 0 24px; margin-top: 36px; overflow: hidden; }
	.featured-img,
	#featured .description-left .featured-img { float: none; margin: 0 auto 12px; text-align: center; }
	.slide .description,
	#featured .description-left .description { float: none; width: auto; padding-top: 8px; }
	/* keep image slides compact so they don't overflow onto the CTA buttons */
	#featured .featured-img img,
	#featured .slide img { max-width: 130px !important; height: auto !important; }
	#featured .featured-img span.overlay,
	#featured .slide span.overlay { display: none !important; }
	#featured a#left-arrow,
	#featured a#right-arrow { display: none !important; }
	.slide h2.title { font-size: 26px; }
	.slide .description { font-size: 16px; }

	/* Footer widgets stack */
	.footer-widget { float: none !important; width: auto !important; margin-bottom: 24px; }
	#footer-bottom .bottom-nav { float: none; }
	#footer-bottom #copyright { float: none; margin-top: 10px; }
}

/* ---------- Narrow phones ---------- */
@media (max-width: 480px) {
	.slide h2.title { font-size: 28px; }
	h1.category-title { font-size: 30px; }
	/* shrink CTA text so it fits the fixed-width button graphic */
	#top-buttons a.button,
	#top-buttons a.button span { font-size: 17px; }
	.container { padding-left: 14px; padding-right: 14px; }
}

/* ---------- Very narrow phones ---------- */
@media (max-width: 360px) {
	#top-buttons a.button,
	#top-buttons a.button span { font-size: 15px; }
	.slide h2.title { font-size: 24px; }
}

/* ============================================================
   v2 – full responsive pass: media, forms, portfolio, gallery,
   search, sitemap, tables, comments, recent-projects.
   ============================================================ */

/* Global: media never overflows its container (all viewports) */
img, iframe, embed, object, video { max-width: 100%; }
img { height: auto; }
#left-area iframe, .post iframe, .et-contact iframe, #et-contact iframe { width: 100% !important; }

@media (max-width: 980px) {
	/* kill any horizontal scroll caused by legacy fixed-width blocks */
	html, body { overflow-x: hidden; }
	/* fluid content/sidebar already handled; cap the wide legacy boxes */
	#et-search { width: auto !important; height: auto !important; background-image: none !important; }
	#et-search-left { width: 100% !important; float: none !important; }
	#et-searchinput { width: 100% !important; box-sizing: border-box; background-image: none !important; background: #f7f7f7 !important; border: 1px solid #ccc !important; }
	.et_pt_portfolio_item,
	.et_portfolio_large .et_pt_portfolio_item,
	.et_portfolio_small .et_pt_portfolio_item { width: auto !important; }
}

@media (max-width: 768px) {
	/* ---- Contact form: stack the two columns, full-width fields ---- */
	#et_contact_left,
	#et_contact_right { width: 100% !important; float: none !important; margin-left: 0 !important; margin-top: 18px; }
	#et-contact p input,
	#et-contact p textarea,
	input.input,
	textarea.input { width: 100% !important; max-width: 100%; box-sizing: border-box; }
	textarea.input { height: 120px; }

	/* ---- Search results page ---- */
	#et-search-inner { padding: 14px; }
	#et-search-right { float: none !important; width: auto !important; text-align: left; margin-top: 8px; }
	p#et_choose_posts, p#et_choose_pages, p#et_choose_date, p#et_choose_cat { float: none; display: block; margin: 0 0 8px; }
	select#et-month-choice, select#et-cat { width: 100% !important; max-width: 240px; }

	/* ---- Portfolio template: one item per row ---- */
	#et_pt_portfolio_gallery,
	.et_portfolio_small,
	.et_portfolio_large { margin-left: 0 !important; }
	.et_pt_portfolio_item,
	.et_portfolio_small .et_pt_portfolio_item,
	.et_portfolio_large .et_pt_portfolio_item { width: 100% !important; float: none !important; margin-left: 0 !important; margin-bottom: 28px; text-align: center; }
	.et_pt_portfolio_item img { display: inline-block; max-width: 100%; height: auto; }
	#et_pt_portfolio_gallery .page-nav { margin-left: 0 !important; }

	/* ---- Gallery template ---- */
	#et_pt_gallery { margin-left: 0 !important; }
	.et_pt_gallery_entry { width: 100% !important; height: auto !important; float: none !important; margin: 0 0 24px 0 !important; background-image: none !important; text-align: center; }
	.et_pt_item_image { height: auto !important; }
	.et_pt_item_image img.portfolio { max-width: 100%; height: auto; }
	.et_pt_item_image span.overlay { display: none !important; }

	/* ---- Blog template thumbnails ---- */
	div.et_pt_thumb { float: none !important; width: auto !important; height: auto !important; margin: 0 0 14px 0 !important; text-align: center; }
	div.et_pt_thumb span.overlay { display: none !important; }
	div.et_pt_thumb img { max-width: 100%; height: auto; }
	.et_pt_blogentry a.readmore { float: none; display: inline-block; margin-top: 10px; }

	/* ---- Sitemap template ---- */
	.sitemap-col { width: 100% !important; float: none !important; margin: 0 0 18px 0 !important; }

	/* ---- Home: recent-projects strip wraps instead of fixed strip ---- */
	#recent-projects,
	#recent-projects-right,
	#recent-projects-content { height: auto !important; background-image: none !important; padding: 0 !important; }
	#recent-projects .project { float: none !important; display: inline-block; margin: 8px !important; }

	/* ---- Content tables scroll instead of overflowing ---- */
	.post table, .entry table, #left-area table { display: block; width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }

	/* ---- Comments form ---- */
	#commentform textarea#comment { width: 100% !important; box-sizing: border-box; }
	#commentform input[type=text] { width: 100% !important; max-width: 320px; box-sizing: border-box; }
	.comment ul.children { padding-left: 18px; }
	.comment-body { padding-left: 18px; }
	.avatar-box { position: static; margin-bottom: 10px; }

	/* ---- Long words / URLs don't force overflow ---- */
	#left-area, .post, .entry, p { word-wrap: break-word; overflow-wrap: break-word; }
}