/*
Theme Name: Župa Rovinj
Author: Augustin Ravnic
Author URI: http://www.playdigital.hr
*/


/* === Variables === */

:root {
	--font-family: "Mulish", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Jadran + stari grad Rovinj */
	--blue-lighter: #38b2c8;  /* Jadransko tirkizno */
	--blue-light:   #1a84a0;  /* Srednji Jadran */
	--blue:         #0d6080;  /* Duboki Jadran */
	--blue-dark:    #0c3d55;  /* Luka u sumrak */
	--blue-darker:  #071f2c;  /* Noćno more */

	--lightblue: #afe5ff;     /* Blijedi Jadran */
	--yellow:    #f4ca5c;     /* Mediteransko zlato */

	--lightgray: #f0f2f4;     /* Čista neutralna */
	--blue-mid:  #1a5983;     /* Srednji Jadran, slider */

	--white:      #ffffff;
	--text-dark:  #333333;
	--text-muted: #cccccc;

	--body-text: 15px;

	--pad-xl: 40px;
	--pad-lg: 30px;
	--pad-md: 20px;
	--pad-sm: 10px;

	--radius-lg: 12px;
	--radius-sm: 6px;

	--transition:      all 250ms linear;
	--transition-ease: all 250ms ease-in-out;

	--table-border: 2px solid var(--blue-dark);

	/* Semantic aliases */
	--body-bg:     var(--lightgray);
	--news-bg:     var(--lightblue);
	--slider-bg:   var(--blue-mid);
	--head-notice: var(--yellow);
	--archive-list: var(--yellow);
	--credits-bg:  var(--blue-dark);
}


/* === Container & Grid === */

@media (min-width: 1400px) {
	.container { width: 1370px; }
}

@media (min-width: 1600px) {
	.container { width: 1570px; }
}

@media (max-width: 767px) {
	.container {
		margin-left: 0;
		margin-right: 0;
	}
}

@media (max-width: 499px) {
	.container {
		padding-left: 0;
		padding-right: 0;
	}

	.container > .navbar-header,
	.container-fluid > .navbar-header,
	.container > .navbar-collapse,
	.container-fluid > .navbar-collapse {
		margin-left: 0;
		margin-right: 0;
	}
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	padding-left: 0;
	padding-right: 0;
}

.row {
	margin-left: 0;
	margin-right: 0;
}


/* === Base === */

body {
	background: var(--body-bg);
	font-family: var(--font-family);
	font-size: var(--body-text);
	line-height: 1.6;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	line-height: 1.4;
	font-family: var(--font-family);
	font-weight: 700;
	font-style: normal;
	letter-spacing: .03ch;
}

blockquote {
	font-size: 15px;
}

@media (max-width: 499px) {
	h2 {
		font-size: 24px;
		margin: 6px 0 12px;
	}

	h3 {
		font-size: 18px;
		margin: 6px 0 12px;
	}
}


/* === Header === */

.header {
	background: var(--blue-dark) url('/wp-content/themes/zupa_2026/img/bg_header.png') center center / cover no-repeat;
}

.brand {
	    padding: var(--pad-md) var(--pad-md) 0;
	position: relative;
	text-align: center;
	display: flex;
	justify-content: space-between;
}

.brand-img {
	display: none;
	@media (min-width: 767px) {
		display: inline;
	}
}

.brand-img-positiv {
	display: inline;
	width: clamp(20rem, 60vw, 30rem);
	@media (min-width: 767px) {
		display: none;
	}
}

.brand .title {
	margin: 28px 0 0 30px;
	float: left;
	font-size: 48px;
	font-weight: 700;
	color: var(--text-dark);
}

.brand .title span {
	color: #999;
}

.brand img {
    width: 100%;
    max-width: 30rem;
}

@media (max-width: 1199px) {
	.brand img { width: 360px; }
}

@media (max-width: 991px) {
	.brand {
		padding: var(--pad-sm);
	}

	.brand img { width: 240px; }

	.brand .title {
		margin: 20px 0 0 20px;
		font-size: 30px;
	}
}

.header_contact {
	display: flex;
	flex-direction: column;
	text-align: right;
	justify-content: center;
	gap: 5px;
}

.header_contact a {
	color: var(--text-dark);
	font-weight: bold;
	align-self: self-end;
	display: flex;
	align-items: center;
	gap: 5px;
}

.header_contact a .rounded_icon {
	width: 36px;
	height: 36px;
	background: #e5e5e5;
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header_contact a .rounded_icon img {
	width: 18px;
	height: 18px;
}

.header_contact a:hover {
	text-decoration: none;
}

.header_contact a span {
	position: relative;
}

.header_contact a span::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 3px;
	border-radius: 2px;
	background-color: var(--text-dark);
	bottom: -2px;
	left: 0;
	transform-origin: right;
	transform: scaleX(0);
	transition: transform .3s ease-in-out;
}

.header_contact a:hover span::before {
	transform-origin: left;
	transform: scaleX(1);
}


/* === Navbar === */

.navbar {
	background: var(--white);
	border: none;
	margin-bottom: 0;
	border-radius: 0;
}

.navbar-collapse {
	padding-left: 0;
	padding-right: 0;
}

.nav > li > a {
	font-size: 14px;
	font-weight: 700;
	line-height: 56px;
	color: var(--text-dark);
	background: url(../zupa_2026/img/separator_nav.png) no-repeat right center;
	padding: 0 var(--pad-md);
	display: block;
}

.nav > li.current_page_item > a {
	border-bottom: 5px solid var(--yellow);
	margin-bottom: -5px;
	border-radius: 0 0 5px 5px;
}

.nav > li > a:hover,
.nav > li > a:focus {
	text-decoration: none;
	background-color: #eee;
}

.nav li ul {
	display: none;
	position: absolute;
	z-index: 100000;
	top: 100%;
	list-style: none;
	padding-left: 0;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	overflow: hidden;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
}

.nav li ul li {
	clear: both;
}

.nav li ul li a {
	color: var(--text-dark);
	display: block;
	padding: 15px var(--pad-md);
	width: 280px;
	background: var(--white);
	font-weight: bold;
}

.nav li ul li:not(:last-child) a {
	border-bottom: 1px solid #ddd;
}

.nav li ul li a:hover {
	text-decoration: none;
	background-color: #eee;
}

@media (max-width: 1199px) {
	.nav > li > a {
		font-size: 13px;
		padding-inline: 12px;
	}
}

@media (max-width: 991px) {
	.nav > li > a {
		font-weight: bold;
		padding-inline: 8px;
		line-height: 50px;
	}
}

@media (max-width: 767px) {
	.navbar-header {
		background: linear-gradient(to bottom, var(--white) 0%, #ebebeb 100%);
	}

	.navbar-nav, .menu {
		margin: 0;
	}

	.nav > li {
		border-bottom: 1px solid #eee;
	}

	.nav > li > a {
		font-size: 14px;
		text-align: right;
		padding-inline: 25px;
	}

	.nav > li.current_page_item > a {
		margin-bottom: 0;
		border-bottom: none;
	}

	.nav > li > ul,
	.nav li ul {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.hidden-sm { display: none; }
}

.navbar-brand {
	padding: 5px 15px 0;
	width: 275px;
	height: 60px;
	
	    display: block;
    height: 55px;
    width: auto;
    margin-top: auto;
}

.navbar-brand img {
    height: 55px;
    width: auto;
    margin-top: auto;
}

.navbar-brand h1 {
	margin: 10px 0 10px 10px;
	font-size: 18px;
	float: left;
	font-weight: 700;
	color: var(--text-dark);
}

.navbar-brand h1 span {
	color: #999;
}

.navbar-toggle {
	margin-top: 13px;
	margin-bottom: 13px;
}

.navbar-toggle .icon-bar {
	background: #555;
}


/* === Slider === */

.slider_carousel {
	overflow: hidden;
	margin-block: var(--pad-lg);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.slider_carousel .item {
	overflow: hidden;
	aspect-ratio: 899/432;
}

.slider_carousel .item img {
	object-fit: cover;
	display: block;
	width: 100%;
	height: 100%;
}

.slider_text {
	color: var(--white);
	background: var(--slider-bg);
	padding: var(--pad-xl) var(--pad-xl) 0;
	margin-block: var(--pad-lg);
	height: 432px;
	position: relative;
	border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.slider_text h2 {
	margin-bottom: var(--pad-xl);
}

.slider_text .new-caption-area {
	position: absolute;
	bottom: var(--pad-xl);
	right: 0;
	background-image: linear-gradient(90deg, #0d3b59, transparent), url("/wp-content/themes/zupa_2026/img/slider_arrow.png");
	background-repeat: no-repeat;
	background-position: center, right 10px center;
	padding: var(--pad-md) var(--pad-lg);
	font-size: 18px;
	border-radius: var(--radius-lg) 0 0 var(--radius-lg);
	width: calc(100% - var(--pad-xl));
	text-align: left;
	background-size: auto 120%;
}

@media (max-width: 1599px) {
	.slider_text { height: 376px; }
	.slider_text .new-caption-area { bottom: var(--pad-md); }
}

@media (max-width: 1399px) {
	.slider_text {
		height: 320px;
		padding: var(--pad-xl) var(--pad-lg) 0;
	}

	.slider_text h2 { font-size: 20px; }
	.slider_text .new-caption-area { display: none; }
}

@media (max-width: 1199px) {
	.slider_text {
		height: 264px;
		padding: var(--pad-sm) var(--pad-lg) 0;
	}

	.slider_text h2 { margin-bottom: var(--pad-md); }
}

@media (max-width: 991px) {
	.slider_carousel {
		margin-block: var(--pad-md);
		border-radius: var(--radius-lg);
	}

	.slider_text {
		height: 202px;
		padding: 5px var(--pad-md);
		margin-block: var(--pad-md);
	}

	.slider_text h2 {
		font-size: 18px;
		margin-bottom: 15px;
	}
}

@media (max-width: 767px) {
	.slider_carousel { margin-top: var(--pad-md); }

	.slider_text {
		margin-top: 0;
		height: auto;
		padding: 5px var(--pad-lg) 15px;
		display: none;
	}

	.slider_text h2 { font-size: 20px; }
}

@media (max-width: 499px) {
	.slider_carousel {
		margin-top: 0;
		border-radius: 0;
	}

	.slider_text {
		padding: var(--pad-sm);
		border-radius: 0;
	}

	.slider_text h2 {
		font-size: 18px;
		margin: 0;
		text-align: center;
	}

	.slider_text p { display: none; }
}


/* === Index main === */

.index_main {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: linear-gradient(90deg, var(--blue-mid) 41.65%, var(--white) 41.65%);
	margin-bottom: var(--pad-lg);
}

@media (max-width: 991px) {
	.index_main { margin-bottom: var(--pad-md); }
}

@media (max-width: 499px) {
	.index_main {
		margin-bottom: 0;
		border-radius: 0;
	}
}


/* === Heading section === */

.heading_section {
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--white);
	padding: var(--pad-md) var(--pad-xl);
}

.heading_section span {
	margin-right: var(--pad-sm);
}

@media (max-width: 1399px) {
	.heading_section { padding: 15px var(--pad-lg); }
}

@media (max-width: 991px) {
	.heading_section { padding: 15px var(--pad-md); }
}


/* === Sections === */

.section h3 {
	font-weight: 700;
	margin-top: 0;
}

.section h3 a {
	color: var(--text-dark);
}

.section_light_gray_wimage img {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 140px;
}

.section_news {
	background: var(--news-bg);
	padding: var(--pad-xl);
}

.section_light_gray {
	background: var(--white);
	padding: var(--pad-xl);
}

.section_dark_gray {
	background: transparent;
	padding: var(--pad-xl);
	color: #eee;
}

@media (max-width: 1399px) {
	.section_news,
	.section_light_gray,
	.section_dark_gray { padding: var(--pad-lg); }
}

@media (max-width: 991px) {
	.section_news,
	.section_light_gray,
	.section_dark_gray { padding: var(--pad-md); }
}

.section_gray {
	color: var(--white);
	background: var(--blue-light);
	padding: var(--pad-md);
}

.section_gray a,
.section_gray h3 a { color: var(--white); }

.section_dark_gray a,
.section_dark_gray h3 a { color: #f4f4f4; }

.section_dark_gray img,
.section_gray img,
.section_light_blue img {
	width: 100%;
	margin-bottom: var(--pad-md);
	height: auto;
	border-radius: var(--radius-sm);
}

.section_poboznosti {
	margin-block: var(--pad-lg);
	border-radius: var(--radius-lg);
	background: var(--white);
}

.section_poboznosti img {
	height: 200px;
}

@media (max-width: 991px) {
	.section_poboznosti { margin-block: var(--pad-md); }
}

@media (max-width: 499px) {
	.section_poboznosti {
		margin-block: 0;
		border-radius: 0;
	}
}

.block-w-image {
	display: flex;
	align-items: flex-start;
	margin: var(--pad-xl);
}

.block-w-image img {
	margin-right: var(--pad-md);
}

@media (max-width: 991px) {
	.block-w-image { margin: var(--pad-md); }
	.block-w-image img { display: none; }
}


/* === Notices table === */

.section_obavijesti h3,
.section_content:has(.single-content--notice) h2 {
	background: var(--head-notice);
	border-radius: var(--radius-sm);
	text-align: center;
	padding: var(--pad-md);
	margin-bottom: var(--pad-md);
}

.section_obavijesti ul,
.section_obavijesti ol {
	padding-inline-start: var(--pad-md);
}

.section_obavijesti ul li,
.section_obavijesti ol li {
	padding-inline-start: .5ch;
	margin-bottom: var(--pad-sm);
}

:is(.section_obavijesti, .single-content--notice) table {
	line-height: 1.4;
	margin-bottom: var(--pad-md);
	width: 100%;
}

:is(.section_obavijesti, .single-content--notice) table tr:nth-child(even) {
	background: #f4f4f4;
}

:is(.section_obavijesti, .single-content--notice) table tr td {
	padding: 4px;
	border: var(--table-border);
	vertical-align: top;
}

:is(.section_obavijesti, .single-content--notice) table tr td:first-child {
	width: 30%;

	p { margin-bottom: unset; }
}

:is(.section_obavijesti, .single-content--notice) table tr td:nth-child(2) {
	width: 70%;
	padding: 0;
}

@media (min-width: 1400px) {
	.single-content--notice ul,
	.single-content--notice ol {
		max-width: 800px;
		margin-left: auto;
	}
}

@media (max-width: 499px) {
	:is(.section_obavijesti, .single-content--notice) table tr:nth-child(even) {
		background: unset;
	}

	:is(.section_obavijesti, .single-content--notice) table tr td:first-child {
		background: #e8e8e8;
		border-top: var(--table-border);
		border-bottom: unset;
		font-size: 16px;
	}

	:is(.section_obavijesti, .single-content--notice) table tr {
		display: flex;
		flex-direction: column;
		margin-bottom: var(--pad-sm);
	}

	:is(.section_obavijesti, .single-content--notice) table tbody tr:last-child {
		margin-bottom: 0;
	}

	:is(.section_obavijesti, .single-content--notice) table tr td {
		width: 100% !important;
		position: relative;
		border-bottom: var(--table-border);
		border-left: var(--table-border);
		border-right: var(--table-border);
	}

	:is(.section_obavijesti, .single-content--notice) table tr td:empty {
		display: none;
	}
}


/* === Masa rows === */

.masa-row {
	display: flex;
	align-items: stretch;
}

.masa-row:not(:last-child) {
	border-bottom: 1px solid var(--blue-dark);
}

.masa-lokacija {
	width: 38%;
	padding: 2px 4px;
	border-right: 1px solid var(--blue-dark);
}

.masa-nakana {
	flex: 1;
	padding: 2px 4px;
}

@media (max-width: 499px) {
	.masa-lokacija { width: 42%; }
}


/* === Articles === */

.article {
	clear: both;
	width: 100%;
}

.article:not(:last-child) {
	margin-bottom: var(--pad-md);
}

.article .article_date {
	width: 100%;
	height: 80px;
	padding: var(--pad-sm) 0;
	color: #777;
	background: #eee;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	position: relative;
}

.article .article_day {
	font-size: 36px;
	line-height: 36px;
	display: block;
	padding-top: 2px;
	color: #555;
}

.article .article_month {
	font-size: 12px;
}

.article .article_img {
	width: 100%;
	aspect-ratio: 16/10;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.article .article_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: .2s ease-in-out transform;
	transform: scale(1);
}

.article a:hover .article_img img {
	transform: scale(1.05);
}

.article .article_text {
	margin: 0 0 var(--pad-sm) var(--pad-md);
}

.article a span {
	display: block;
}

.article a h4 {
	display: inline;
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	text-wrap: balance;
	background-image: linear-gradient(var(--blue-dark), var(--blue-dark));
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: 0% 2px;
	transition: background-size .4s ease-in-out;
}

.article a:hover h4 {
	background-size: 100% 2px;
	color: inherit;
}

.article a,
.article a:hover {
	color: var(--text-dark);
	text-decoration: none;
}

@media (max-width: 1399px) {
	.article .article_text { margin: 0 var(--pad-sm) 0 var(--pad-md); }

	.article a h4 {
		font-size: 18px;
		margin: 0 0 4px;
	}
}

@media (max-width: 767px) {
	.article .article_date {
		height: 60px;
		padding: 5px 0;
	}

	.article .article_day {
		font-size: 24px;
		line-height: 24px;
	}

	.article .article_month { font-size: 10px; }
	.article .article_img { overflow: hidden; }
	.article .article_text h4 { font-size: 15px; }
}


/* === Breadcrumb === */

.breadcrumb {
	background: var(--blue-dark);
	margin-bottom: var(--pad-lg);
	color: var(--white);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	padding: 14px var(--pad-md);
	font-size: 13px;
}

.breadcrumb a {
	color: var(--text-muted);
	padding: 0;
}

.breadcrumb span {
	font-size: 13px;
}

.breadcrumb span span {
	padding: 0;
}

@media (max-width: 767px) {
	.breadcrumb { margin-bottom: var(--pad-md); }
}

@media (max-width: 499px) {
	.breadcrumb {
		border-radius: 0;
		margin-bottom: 0;
	}
}


/* === Table wrapper === */

.table_wrapper {
	border: 6px solid #eee;
	padding: var(--pad-sm) var(--pad-md);
	border-radius: var(--radius-sm);
	margin-bottom: var(--pad-md);
}

.table_wrapper .table {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.table_wrapper { padding: 0; }
	.table_wrapper .table { border: none; }
}


/* === Section content === */

.section_content {
	background: var(--white);
	padding: var(--pad-md) var(--pad-xl);
	margin-right: var(--pad-md);
	border-radius: var(--radius-lg);
	margin-bottom: var(--pad-lg);
}

.section_content h1 {
	padding-bottom: var(--pad-md);
	margin-bottom: var(--pad-md);
	border-bottom: 5px solid var(--lightblue);
}

.section_content h2,
.section_content h3,
.section_content h4 {
	font-weight: 700;
	text-wrap: pretty;
}

.section_content img.aligncenter {
	margin: 0 auto var(--pad-md);
	display: block;
}

.section_content img.alignnone,
.section_content img.alignleft {
	float: left;
	margin: 0 var(--pad-md) var(--pad-md) 0;
	max-width: 100%;
	height: auto;
}

.section_content img.alignright {
	float: right;
	margin: 0 0 var(--pad-md) var(--pad-md);
	max-width: 100%;
	height: auto;
}

.section_content .section_content_date {
	margin-bottom: var(--pad-md);
	display: block;
}

.section_content .featured_img {
	display: block;
	border-radius: var(--radius-sm);
	overflow: hidden;
	margin-bottom: var(--pad-xl);
}

.section_content .featured_img img {
	width: 100%;
	height: auto;
}

.section_content .gallery {
	clear: both;
}

.section_content_list_pages ul {
	padding: 0;
	list-style: none;
}

.section_content_list_pages ul li {
	width: 33%;
	float: left;
	padding: var(--pad-sm);
}

.section_content_list_pages ul li a {
	color: var(--text-dark);
	border: 1px solid var(--text-muted);
	padding: var(--pad-sm);
	box-sizing: border-box;
	display: table-cell;
	vertical-align: middle;
	height: 180px;
	width: 1000px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	background: #f4f4f4;
}

.section_content_list_pages ul li a:hover {
	background: #eee;
	text-decoration: none;
}

@media (max-width: 1199px) {
	.section_content_list_pages ul li a {
		height: 150px;
		font-size: 16px;
	}
}

@media (max-width: 991px) {
	.section_content_list_pages ul li a {
		height: 120px;
		font-size: 14px;
	}
}

@media (max-width: 499px) {
	.section_content_list_pages ul li a {
		height: 100px;
		font-size: 12px;
	}
}

.section_content_map {
	padding: var(--pad-md) !important;
	margin: 0;
}

.section_content_map iframe {
	border: 0;
	width: 100%;
	display: block;
	aspect-ratio: 16/12;
}

@media (max-width: 1399px) {
	.section_content { padding: var(--pad-md) var(--pad-lg); }
	.section_content .featured_img { margin-bottom: var(--pad-lg); }
}

@media (max-width: 991px) {
	.section_content {
		padding: var(--pad-md);
		margin-right: 0;
		margin-bottom: var(--pad-md);
	}

	.section_content .featured_img { margin-bottom: var(--pad-md); }
}

@media (max-width: 767px) {
	.section_content {
		height: auto !important;
		padding: var(--pad-sm) var(--pad-md);
		margin-bottom: var(--pad-md);
	}

	.section_content img.alignnone,
	.section_content img.aligncenter,
	.section_content img.alignleft,
	.section_content img.alignright {
		float: none;
		margin: 0 auto var(--pad-md);
		display: block;
		width: 100%;
		height: auto;
	}
}

@media (max-width: 499px) {
	.section_content {
		margin-bottom: 0;
		border-radius: 0;
	}
}


/* === Sidebar / Aside === */

.aside {
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: var(--pad-xl);
}

@media (max-width: 991px) {
	.aside { margin-bottom: var(--pad-md); }
}

@media (max-width: 499px) {
	.aside {
		border-radius: 0;
		margin-bottom: 0;
	}
}

.aside .section_dark_gray img,
.aside .section_gray img { width: 100%; }

.sidebar ul {
	padding-left: 0;
	margin-bottom: var(--pad-md);
}

.sidebar ul li {
	margin-bottom: 5px;
	display: block;
}

.sidebar ul li::before {
	content: "\e080";
	font-family: 'Glyphicons Halflings';
	font-size: 9px;
	float: left;
	margin-left: 14px;
	color: var(--yellow);
	margin-top: 18px;
}

.sidebar ul li.current_page_item {
	display: none;
}

.sidebar ul li a {
	background: var(--blue-dark);
	font-size: 14px;
	padding: 14px 14px 14px 30px;
	color: var(--white);
	display: block;
	transition: var(--transition);
}

.sidebar ul li a:hover {
	background: var(--blue-light);
	padding-left: 40px;
	text-decoration: none;
	transition: var(--transition);
}

.sidebar .section_light_gray {
	margin-bottom: var(--pad-md);
}

.single-content {
	max-width: 800px;
	margin-left: auto;
}


/* === Archive list === */

.section_archive-list {
	padding: var(--pad-xl);
	background: var(--archive-list);
	border-radius: var(--radius-lg);
	margin-bottom: var(--pad-lg);
}

@media (max-width: 1399px) {
	.section_archive-list { padding: var(--pad-lg); }
}

@media (max-width: 991px) {
	.section_archive-list { padding: var(--pad-md); }
}

@media (max-width: 499px) {
	.section_archive-list {
		margin-bottom: 0;
		border-radius: 0;
	}
}

.list-buttons {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: var(--pad-sm);

	.btn-group {
		width: 100%;

		.btn { width: 100%; }
	}
}


/* === Buttons / Dropdown === */

.btn-black-outline {
	font-weight: bold;
	border: 2px solid var(--text-dark);
	background: transparent;
	transition: var(--transition);
}

.btn-black-outline:hover {
	background: rgba(0,0,0,.1);
}

.open > .dropdown-menu {
	display: flex;
}

.dropdown-menu {
	padding: 0;
	flex-direction: column;
	width: 100%;
	border: unset;
	background: var(--blue-dark);

	a {
		border: unset;
		padding: 6px 12px;
		color: var(--white);
		transition: var(--transition);
	}

	a:hover {
		text-decoration: none;
		background: var(--blue-light);
	}

	a:not(:last-child) {
		border-bottom: 1px solid var(--blue-light);
	}
}


/* === Footer === */

.footer {
	background: var(--lightblue);
	margin-top: auto;
	color: var(--text-dark);
	padding: var(--pad-xl) 0;
}

.footer ul {
	list-style: none;
	padding: 5px var(--pad-md);
	margin-bottom: 0;
}

.footer ul li {
	font-weight: 700;
	line-height: 18px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.footer ul li ul {
	padding: 0;
	margin-top: var(--pad-sm);
}

.footer ul li ul li {
	font-weight: 400;
	margin-left: var(--pad-md);
	line-height: 18px;
	display: block;
	padding-bottom: 4px;
	padding-top: 4px;
}

.footer ul li ul li a {
	color: var(--text-dark);
}

.footer_info {
	padding: var(--pad-md);
}

.footer_info img {
	width: 100%;
	max-width: 300px;
}

.footer_info h3 {
	float: left;
	margin-left: var(--pad-sm);
}

.footer_info h4 {
	border-top: 1px solid var(--blue-mid);
	margin-top: var(--pad-md);
	padding-top: var(--pad-md);
}

.credits {
	background: var(--credits-bg);
}

.credits p {
	font-size: 12px;
	line-height: 50px;
	margin: 0;
	color: #eee;
}

.whomadethis {
	color: var(--white);
	font-size: 12px;
	line-height: 50px;
	float: right;
}

.whomadethis span.red {
	color: var(--white);
}

.whomadethis:hover,
.whomadethis:hover span.red {
	color: #1099D5;
	cursor: pointer;
	text-decoration: none;
}

.whomadethis span {
	color: var(--text-muted);
	cursor: text;
}

@media (max-width: 767px) {
	.footer ul { padding: var(--pad-sm); }

	.credits { text-align: center; }

	.credits p { border-bottom: 1px solid var(--body-bg); }

	.whomadethis {
		float: none;
		text-align: center;
	}
}

.footer_contact {
	display: flex;
	align-items: flex-end;
}

.footer_contact .brand {
	padding: var(--pad-sm) 0;
	text-align: left;
}


@media (max-width: 991px) {
	.footer_contact {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.footer_contact .brand {
		text-align: center;
		display: block;
		margin-bottom: 15px;
	}
}


/* === Menu === */

@media (min-width: 768px) {
	.menu-item {
		float: left;
		position: relative;
		display: block;
	}

	#menu-glavni-izbornik {
		float: left;
		margin: 0;
	}
}

.menu-item > a {
	color: var(--white);
	font-size: 14px;
	font-weight: bold;
	padding: var(--pad-md);
	position: relative;
	display: block;
}

@media (max-width: 991px) {
	.menu-item > a {
		font-size: 12px;
		padding: 15px 8px 15px 10px;
	}
}

.current-menu-item > a {
	background: var(--lightblue);
	color: var(--blue-dark);
}

.menu-item a,
.menu-item a:hover {
	transition: var(--transition);
}

.menu-item > a:hover,
.menu-item > a:focus {
	text-decoration: none;
	background-color: var(--yellow);
}

.menu-item ul {
	position: absolute;
	z-index: 100000;
	top: 51px;
	box-shadow: 0 0 5px rgba(0,0,0,.2);
	list-style: none;
	padding-left: 0;
	display: none;
}

.menu-item ul li {
	clear: both;
	background: var(--white);
}

.menu-item ul li a {
	font-size: 14px;
	font-weight: bold;
	padding: 15px 15px 15px var(--pad-md);
	color: var(--text-dark);
	border-bottom: 1px solid #ddd;
	display: block;
	width: 200px;
	background: url(../zupa_2026/images/arrow_list.png) no-repeat 15px 14px;
	transition: var(--transition-ease);
}

.menu-item li a:hover {
	text-decoration: none;
	border-bottom: 1px solid #ddd;
	background: #f8f8f8 url(../zupa_2026/images/arrow_list.png) no-repeat 25px 14px;
	transition: var(--transition-ease);
}

@media (max-width: 767px) {
	.navbar-nav,
	.menu { margin: 0; }

	.menu-item { border-bottom: 1px solid #eee; }

	.menu-item > a { text-align: right; }

	.current-menu-item > a { margin-bottom: 0; }
}

#menu-glavni-izbornik {
	padding-left: 0;
	list-style: none;
}

#menu-glavni-izbornik::before {
	display: table;
	content: " ";
}


/* === Subpage nav === */

.subpage_nav ul {
	list-style: none;
	padding: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.subpage_nav.subpage_nav_archive ul {
	column-count: 4;
}

@media (max-width: 991px) {
	.subpage_nav.subpage_nav_archive ul { column-count: 3; }
}

@media (max-width: 767px) {
	.subpage_nav.subpage_nav_archive ul { column-count: 2; }
}

@media (max-width: 499px) {
	.subpage_nav { padding: var(--pad-md); }
}

.subpage_nav > ul > li > a > div.con {
	float: right;
	margin: var(--pad-sm);
	transition: all 0.2s ease;
	display: none;
}

.subpage_nav > ul > li.page_item_has_children > a > div.con {
	display: block;
}

.subpage_nav > ul > li > a > div.con::before,
.subpage_nav > ul > li > a > div.con::after {
	transition: all 0.2s ease;
	width: 10px;
	height: 2px;
	background: var(--red);
	opacity: 1;
	display: block;
	content: "";
	position: absolute;
}

.subpage_nav ul ul {
	margin-bottom: 4px;
	display: none;
}

.subpage_nav > ul > li > a {
	background: var(--blue-mid);
	display: flex;
	padding: 16px var(--pad-md);
	color: var(--white);
	font-weight: 500;
	transition: all 0.2s ease;
}

.subpage_nav > ul > li:not(:last-child) > a {
	border-bottom: 1px solid var(--body-bg);
}

.subpage_nav > ul > li > a:hover,
.subpage_nav > ul > li.current_page_item a {
	background: var(--blue-dark);
	color: var(--white);
	padding-left: var(--pad-lg);
	text-decoration: none;
	transition: all 0.2s ease;
}

.subpage_nav ul ul li a {
	color: #000;
	font-weight: 300;
	display: block;
	background: #f0f0f0;
	padding: 1rem 1.5rem;
}

.subpage_nav ul ul li a .con {
	background: var(--red);
	height: 2px;
	width: 20px;
	display: inline-block;
	margin-bottom: 6px;
	margin-right: var(--pad-sm);
	transition: all 0.2s ease;
}

.subpage_nav ul ul li a .con::before,
.subpage_nav ul ul li a .con::after {
	transition: all 0.2s ease;
	width: 0;
	height: 0;
	background: var(--red);
	display: block;
	content: "";
}

.subpage_nav ul ul li a:hover {
	font-weight: 500;
	text-decoration: none;
}

.subpage_nav ul ul li a:hover .con {
	width: 30px;
	display: inline-block;
	margin-bottom: 6px;
	margin-right: var(--pad-sm);
	transition: all 0.2s ease;
}

.subpage_nav ul ul li a:hover .con::before,
.subpage_nav ul ul li a:hover .con::after {
	transition: all 0.2s ease;
	width: 10px;
	height: 2px;
	background: var(--red);
	opacity: 1;
	display: block;
	content: "";
}


/* === Gallery === */

.nivo-lightbox-theme-default.nivo-lightbox-overlay {
	background: rgba(0,0,0,.85) !important;
}

.gallery {
	margin: var(--pad-md) -.5rem 0 -.5rem !important;
}

.gallery .gallery-item {
	margin: 0 !important;
}

.gallery.gallery-columns-2 .gallery-item  { width: 50% !important; }
.gallery.gallery-columns-3 .gallery-item  { width: 33.33333% !important; }
.gallery.gallery-columns-4 .gallery-item  { width: 25% !important; }
.gallery.gallery-columns-5 .gallery-item  { width: 20% !important; }
.gallery.gallery-columns-6 .gallery-item  { width: 16.66666% !important; }
.gallery.gallery-columns-7 .gallery-item  { width: 14.28571% !important; }
.gallery.gallery-columns-8 .gallery-item  { width: 12.5% !important; }
.gallery.gallery-columns-9 .gallery-item  { width: 11.11111% !important; }

.gallery .gallery-icon a {
	width: 100%;
	padding-top: 75%;
	overflow: hidden;
	position: relative;
	display: block;
}

.gallery .gallery-icon a img {
	border: 0 !important;
	object-fit: cover;
	object-position: center center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	text-align: center;
	width: 100%;
	height: 100%;
	padding: .5rem;
}


/* === Contact === */

.section_contact--first {
	background: var(--lightblue);
	padding: var(--pad-md) var(--pad-xl);
	margin-right: var(--pad-md);
	border-radius: var(--radius-lg);
	margin-bottom: var(--pad-lg);
}

.section_contact--second {
	background: var(--white);
	padding: var(--pad-md) var(--pad-xl);
	border-radius: var(--radius-lg);
	margin-bottom: var(--pad-lg);
}

@media (max-width: 1399px) {
	.section_contact--first,
	.section_contact--second { padding: var(--pad-md) var(--pad-lg); }
}

@media (max-width: 991px) {
	.section_contact--first,
	.section_contact--second {
		padding: var(--pad-md);
		margin-right: 0;
		margin-bottom: var(--pad-md);
	}
}

@media (max-width: 499px) {
	.section_contact--first,
	.section_contact--second {
		padding: var(--pad-md);
		margin-right: 0;
		border-radius: 0;
		margin-bottom: 0;
	}
}

.section_contact--second img {
	width: 100%;
	border-radius: var(--radius-lg);
	margin-bottom: 12px;
	aspect-ratio: 16/10;
	object-fit: cover;
}

@media (min-width: 992px) {
	.section_contact--second .row .col-md-6:first-child { padding-right: var(--pad-sm); }
	.section_contact--second .row .col-md-6:last-child  { padding-left: var(--pad-sm); }
}


/* === News list === */

.news_list {
	gap: var(--pad-md);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

@media (max-width: 1199px) {
	.news_list { margin: 0 0 var(--global-padding) 0; }
}

.news_list article {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.news_list article:last-child {
	border-bottom: none;
}

.news_list article .article_content {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: #f8f8f8;
	padding: 15px;
}

.news_list small {
	color: #999;
	display: block;
}

.news_list article .article_img {
	padding: 0;
	aspect-ratio: 3/2;
	width: 100%;
	overflow: hidden;
}

.news_list article .article_img img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: .3s all ease-in-out;
	scale: 1;
}

.news_list article .article_img img:hover {
	scale: 1.05;
}


/* === Banners === */

.banners {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--pad-lg);
	margin-bottom: var(--pad-lg);
}

.banner-item {
	aspect-ratio: 210/297;
}

.banner-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: drop-shadow(6px 6px 6px rgba(0,0,0,.2));
	border-radius: var(--radius-sm);
}

.banner-item a img {
	transition: .2s scale ease-in-out;
	scale: 1;
}

.banner-item a:hover img {
	scale: 1.03;
}


/* === Misc === */

.logo-text { color: #000; }

.crkva img {
	width: 100%;
	height: auto;
}

.crkva div {
	margin: 0 0 var(--pad-sm);
}


/* === Fancy link === */

@media (min-width: 992px) {
	.fancy_link {
		text-decoration: none !important;
		background-image: linear-gradient(currentColor, currentColor);
		background-repeat: no-repeat;
		background-position: bottom left;
		background-size: 0% 3px;
		transition: background-size .4s ease-in-out;
	}

	.fancy_link:hover {
		background-size: 100% 3px;
		color: inherit;
	}
}
