/* Changes from the old site (Nikola, 2026-11-05). Colours, sizes and buttons follow the
   Zerif Lite theme: red #e96656, green #34d293, blue #3ab0e2, yellow #f7d861. */

/* ---------- Logo (Nikola, 2026-11-08): the sharp file instead of the squashed 321x75
   one, with the small "инотек алати" line cut off (588x84). The img has width/height
   attributes; with both sizes auto and both caps set, the browser shrinks it to fit and
   keeps its shape (on phones too). */
.navbar-brand > img {
	width: auto;
	height: auto;
	max-width: 100%;
	/* 280px wide. zerif.js puts the menu on a second row when logo + menu are wider than
	   the 940px container (992 to 1199px screens); the menu is 638px, so the logo may be
	   287px at most. The old logo was 265px. */
	max-height: 40px;
	margin-top: -1px; /* level with the menu text (the theme's line-height halves the shift) */
}

/* ---------- Menu (Nikola, 2026-11-08, option Г of six): dark semi-bold text, a red
   line slides in under the item pointed at and under the current page; only Контакт
   (#menu-item-31, renamed from "Контакт информации") is a red button.
   Width budget: zerif.js puts the menu under the logo when logo + menu are wider than
   the 940px container (992 to 1199px screens), so gaps are 16px. ---------- */
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li.current > a,
.navbar-inverse .navbar-nav > li.this-open > a {
	position: relative;
	color: #1a1a1a !important;
	background: transparent;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
	color: #e30613 !important;
	background: transparent;
}
/* no ▾ after Производи (Nikola, 2026-11-08); the dropdown still opens on hover, and on
   phones from the black box on the right */
.nav li#menu-item-263.has_children > a:after {
	content: none;
}
ul.nav > li > a:before,
ul.nav > li.current > a:before {
	background: #e30613 !important;
}
/* Контакт: the one red button */
.navbar-inverse .navbar-nav > li#menu-item-31 > a {
	color: #fff !important;
	background: #e30613;
	border-radius: 3px;
}
.navbar-inverse .navbar-nav > li#menu-item-31 > a:hover,
.navbar-inverse .navbar-nav > li#menu-item-31 > a:focus {
	color: #fff !important;
	background: #b5050f;
}
ul.nav > li#menu-item-31 > a:before {
	display: none !important;
}
@media (min-width: 768px) {
	.navbar-inverse .navbar-nav > li {
		margin-right: 16px;
	}
	.navbar-inverse .navbar-nav > li:last-child {
		margin-right: 0;
	}
	.navbar-inverse .navbar-nav > li > a {
		padding: 0;
		font-size: 15px;
		font-weight: 600;
	}
	/* the theme's underline, red, growing from the left on hover; full width on the
	   current page (the theme hides it on Почетна) */
	ul.nav > li > a:before,
	ul.nav > li.current > a:before {
		content: "" !important;
		display: block;
		position: absolute;
		height: 3px !important;
		bottom: -3px !important;
		left: 0 !important;
		width: 0 !important;
		transition: width 0.2s;
	}
	ul.nav > li.current > a:before,
	ul.nav > li.current-menu-item > a:before,
	ul.nav > li > a:hover:before {
		content: "" !important;
		width: 100% !important;
	}
	.navbar-inverse .navbar-nav > li#menu-item-31 > a {
		padding: 0 16px;
	}
	/* Производи: one list of all 12 categories (Nikola, 2026-11-08: no ПРВ ДЕЛ / ВТОР ДЕЛ
	   step), wide enough that each name stays on one line */
	.navbar-inverse .navbar-nav > li#menu-item-263 > ul.sub-menu {
		width: 300px;
		padding: 6px 0;
	}
	.navbar-inverse .navbar-nav > li#menu-item-263 > ul.sub-menu > li {
		padding: 4px 16px;
	}
	.navbar-inverse .navbar-nav > li#menu-item-263 > ul.sub-menu > li > a {
		font-size: 14px;
		line-height: 28px;
		white-space: nowrap;
	}
}

/* ---------- Language switch МК | EN (Nikola, 2026-11-08): taken out of the page list
   (it was the first item, "EN", also on the English page) and put after Контакт behind
   a thin divider. The current language is red and underlined. ---------- */
.navbar-inverse .navbar-nav > li.jazik > a {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: #777 !important;
}
.navbar-inverse .navbar-nav > li.jazik > a:hover,
.navbar-inverse .navbar-nav > li.jazik > a:focus {
	color: #1a1a1a !important;
}
.navbar-inverse .navbar-nav > li.jazik > a.jazik-ovde {
	color: #e30613 !important;
}
ul.nav > li.jazik > a:before {
	display: none !important;
}
ul.nav > li.jazik > a.jazik-ovde:before {
	content: "" !important;
	display: block !important;
	width: 100% !important;
}
.jazik-crta {
	display: inline-block;
	width: 1px;
	height: 14px;
	margin: 0 8px;
	vertical-align: middle;
	background: #ccc;
}
@media (min-width: 768px) {
	.navbar-inverse .navbar-nav > li.jazik {
		margin-left: 2px;
		padding-left: 18px;
		border-left: 1px solid #ddd;
	}
}

/* ---------- Phones: logo left and smaller, menu button right on the same row, three
   black lines instead of the grey box (Nikola, 2026-11-08). ---------- */
.navbar-toggle,
.navbar-toggle.collapsed,
.navbar-toggle.active,
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
	background-color: transparent !important;
	border: 0;
	box-shadow: none;
}
.navbar-inverse .navbar-toggle .icon-bar {
	width: 28px;
	height: 4px;
	border-radius: 1px;
	background-color: #000;
	transition: background-color 0.2s;
}
.navbar-toggle .icon-bar + .icon-bar {
	margin-top: 5px;
}
/* red while the menu is open. Bootstrap drops "collapsed" while it is open; the theme's
   own "active" class is not cleared when a menu link closes the menu, so it is not used. */
.navbar-inverse .navbar-toggle:not(.collapsed) .icon-bar {
	background-color: #e30613;
}
@media (hover: hover) {
	.navbar-inverse .navbar-toggle:hover .icon-bar {
		background-color: #e30613; /* mouse only: on phones a tap left the lines red */
	}
}
/* Computers: the same freeze. A window made narrow enough for the menu to wrap onto two
   rows and then wide again kept the white bar 112px tall, the logo and menu sitting at
   its top (Nikola, 2026-11-08). The bar now keeps the theme's 75px minimum and follows
   its content. */
#main-nav {
	min-height: 75px !important;
}
/* .header is the space kept under the fixed bar, so the content of inner pages starts
   below it; it follows the bar's normal height instead of the frozen one. (At 0 the
   bar covered the top of Производи and other pages.) */
.header {
	min-height: 76px !important;
}
@media (max-width: 767px) {
	/* zerif.js (setminHeightHeader) freezes the header's height on every resize. On phones
	   the address bar sliding away is a resize, so with the menu open the header stayed
	   ~500px tall after the menu closed: a white gap between the logo and the photo. */
	#main-nav,
	.header {
		min-height: 0 !important;
	}
	.header .responsive-logo {
		width: 100%;
		text-align: left;
	}
	.header .responsive-logo > a.navbar-brand {
		float: left;
		display: block;
	}
	.navbar-brand > img {
		max-height: 31px; /* about 217px wide */
		margin-top: 0;
	}
	.navbar-toggle {
		float: right;
		margin: 17px 7px 0 0; /* lines level with the logo, right edge in line with its left margin */
		padding: 10px 8px;
	}
	/* the opened list: dark text, thin lines between, the current page red, Контакт a
	   full-width red button at the end */
	.navbar-inverse .navbar-nav {
		padding-left: 0;
	}
	.navbar-inverse .navbar-nav > li {
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #eee;
	}
	.navbar-inverse .navbar-nav > li > a {
		padding: 12px 4px;
		font-weight: 600;
	}
	/* not the homepage links: WordPress marks Почетна, За нас and Контакт all current
	   on the homepage (the theme hides their underline on desktop for the same reason) */
	.navbar-inverse .navbar-nav > li.current-menu-item:not(.menu-item-home) > a {
		color: #e30613 !important;
	}
	ul.nav > li > a:before {
		display: none !important; /* the red text marks the current page in the list */
	}
	.navbar-inverse .navbar-nav > li#menu-item-31 {
		margin: 10px 0 12px;
		border-bottom: 0;
	}
	.navbar-inverse .navbar-nav > li#menu-item-31 > a {
		text-align: center;
	}
	.navbar-inverse .navbar-nav > li#menu-item-31 {
		margin-bottom: 4px;
	}
	.navbar-inverse .navbar-nav > li.jazik {
		margin-bottom: 10px;
		border-bottom: 0;
		text-align: center;
	}
	.navbar-inverse .navbar-nav > li.jazik > a {
		padding: 10px 12px;
		font-size: 14px;
	}
	.jazik-crta {
		margin: 0;
	}
	.dropdownmenu {
		top: 7px;
		right: 8px;
		background-color: #000;
	}
	.navbar-inverse .navbar-nav ul.sub-menu {
		background: #fff;
	}
}

/* ---------- Buttons in the logo colours (Nikola, 2026-11-08): КОНТАКТ and ПРЕБАРАЈ red,
   ЛОКАЦИЈА black like the INOTEK letters. ---------- */
.red-btn {
	background: #e30613;
}
.red-btn:hover,
.red-btn:focus {
	background: #b5050f;
}
.header-content-wrap .green-btn {
	background: #000;
}
.header-content-wrap .green-btn:hover,
.header-content-wrap .green-btn:focus {
	background: #333;
}

/* ---------- Tools photo zoomed out (Nikola, 2026-11-08, twice): it was the body
   background at its full 1876x1182 size, so a laptop saw only its top-left corner. On
   the homepage the whole photo now shows at the top area's height, centred, on plain
   white; the theme's dark layer lies over both. On phones the photo is 1.5x the screen
   wide, white above and below. ---------- */
html body.home.custom-background {
	background-image: none;
}
.home .home-header-wrap {
	position: relative;
	overflow: hidden;
	background: #fff; /* plain white beside the photo (Nikola: no blur) */
}
.home .home-header-wrap:after {
	/* the whole photo, its edges fading into the white; 50px lower than the top
	   (Nikola: it sat a little high; tried 30px and 60px) */
	content: "";
	position: absolute;
	top: 50px;
	bottom: -50px;
	left: 50%;
	aspect-ratio: 1876 / 1182;
	transform: translateX(-50%);
	background: url("/wp-content/uploads/2016/10/ferramentas-manuais-1.jpg") center / 100% 100% no-repeat;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}
.home .header-content-wrap {
	z-index: 1; /* the theme's dark layer and the text above both photo layers */
}
@media (max-width: 767px) {
	/* phones: back to the original look, the photo at full size as the page background
	   (Nikola, 2026-11-08: the zoomed-out version only on computers) */
	html body.home.custom-background {
		background-image: url("/wp-content/uploads/2016/10/ferramentas-manuais-1.jpg");
	}
	.home .home-header-wrap {
		background: transparent;
	}
	.home .home-header-wrap:after {
		display: none;
	}
}

/* ---------- Map right above the footer on the homepage (Nikola, 2026-11-08), in place of
   the client list. Контакт (menu and the red button) lands on #mapa-kontakt, so the map
   and the contact details below it show together. Keyless Google Maps embed, same point
   as the Мапа page; loads only when scrolled near. ---------- */
.mapa-kontakt {
	background: #272727; /* the footer's colour, so no white seam */
}
.mapa-kontakt iframe {
	display: block;
	width: 100%;
	height: 380px;
	border: 0;
}
@media (max-width: 767px) {
	.mapa-kontakt iframe {
		height: 300px;
	}
}

/* ---------- Пребарај производи (homepage, above "Кој е нашиот фокус?") ---------- */
/* Its own light grey band with a line under it, so it reads apart from "Кој е нашиот
   фокус?" (Nikola, 2026-11-08). */
.prebaraj {
	padding-top: 60px; /* keeps the bar on the first screen of a laptop */
	padding-bottom: 60px;
	background: #f5f5f5;
	border-bottom: 1px solid #e2e2e2;
}
.prebaraj + .focus {
	padding-top: 70px;
}
.prebaraj .section-header {
	float: none; /* the theme floats it on small screens, which squeezed the form */
	padding-bottom: 30px;
}
.prebaraj-forma {
	clear: both;
	display: flex;
	max-width: 720px;
	margin: 0 auto;
}
.prebaraj-forma .prebaraj-pole {
	flex: 1;
	min-width: 0;
	box-sizing: border-box; /* the theme's normalize.css gives search fields content-box */
	height: 50px;
	padding: 0 16px;
	font-size: 16px;
	color: #404040;
	background: #fff;
	border: 1px solid #d5d5d5;
	border-right: 0;
	border-radius: 4px 0 0 4px;
	outline: none;
	-webkit-appearance: none;
	box-shadow: none;
}
/* lighter example text (Nikola, 2026-11-08: it was too black). The theme forces every
   placeholder to #000 !important with prefixed rules, so these are prefixed too and
   kept apart (one unknown selector would drop a grouped rule). */
.prebaraj-forma .prebaraj-pole::-webkit-input-placeholder {
	color: #9a9a9a !important;
}
.prebaraj-forma .prebaraj-pole::-moz-placeholder {
	color: #9a9a9a !important;
	opacity: 1;
}
.prebaraj-forma .prebaraj-pole::placeholder {
	color: #9a9a9a !important;
	opacity: 1;
}
.prebaraj-forma .prebaraj-pole:focus {
	border-color: #e96656;
}
.prebaraj-forma .custom-button {
	margin: 0;
	height: 50px;
	padding: 0 30px;
	border-radius: 0 4px 4px 0;
}
.prebaraj-rezultati {
	max-width: 720px;
	margin: 0 auto;
	text-align: left;
}
.prebaraj-rezultati ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid #e5e5e5;
	border-top: 0;
	border-radius: 0 0 4px 4px;
}
.prebaraj-rezultati li + li {
	border-top: 1px solid #eee;
}
.prebaraj-rezultati a {
	display: block;
	padding: 12px 16px;
	color: #404040;
	text-decoration: none;
}
.prebaraj-rezultati a:hover,
.prebaraj-rezultati a:focus {
	background: #f7f7f7;
}
.prebaraj-vid {
	display: block;
	margin-bottom: 2px;
	font-size: 11px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #e96656;
}
.prebaraj-rezultati strong {
	display: block;
	font-size: 15px;
	line-height: 20px;
	font-weight: 700;
}
.prebaraj-izvadok {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 18px;
	color: #777;
}
.prebaraj-rezultati mark,
.prebaraj-oznaka {
	padding: 0 1px;
	color: inherit;
	background: #f7d861;
}
.prebaraj-nema {
	margin: 0;
	padding: 14px 16px;
	color: #777;
}
@media (max-width: 992px) {
	.prebaraj {
		padding-top: 60px;
	}
	.prebaraj + .focus {
		padding-top: 50px;
	}
}
@media (max-width: 480px) {
	.prebaraj-forma {
		flex-direction: column;
	}
	.prebaraj-forma .prebaraj-pole {
		flex: none;
		width: 100%;
		border-right: 1px solid #d5d5d5;
		border-radius: 4px;
	}
	.prebaraj-forma .prebaraj-pole::placeholder {
		font-size: 14px;
	}
	.prebaraj-forma .custom-button {
		margin-top: 10px;
		border-radius: 4px;
	}
}

/* ---------- Производи: category markers for the menus and the search ---------- */
.kat-marker {
	display: block;
	height: 0;
	scroll-margin-top: 110px;
}

/* ---------- Footer: four matching columns ---------- */
#footer .company-details {
	text-align: center;
}
#footer .company-details .icon-top {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 32px;
	margin-bottom: 14px;
}
#footer .company-details .icon-top img {
	display: block;
}
/* Facebook: white "f" on Facebook blue, a rounded square the size of the phone icon */
#footer .company-details .icon-top .fb-ikona {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 30px;
	height: 30px;
	overflow: hidden;
	border-radius: 5px;
	color: #fff;
	background: #1877f2;
	transition: background 0.3s ease-in-out;
}
#footer .company-details .icon-top .fb-ikona:hover {
	color: #fff;
	background: #0b5fcc;
}
#footer .company-details .icon-top .fb-ikona .fa {
	display: block;
	font-size: 26px;
	line-height: 26px;
	margin: 0 -4px -2px 0;
}
#footer .company-details .icon-top + div {
	line-height: 24px;
}
/* the shop on Марк Твен, above the registered address (Nikola, 2026-11-09) */
#footer .adresa-prodavnica {
	display: block;
	margin-bottom: 10px;
}