/* ===================================================================================

* Theme Name: Choicy Child
* Theme URI: https://themexriver.com/wp/choicy
* Author: ThemeXriver
* Author URI: https://themeforest.net/user/themexriver
* Description: Digital Marketing Agency WordPress Theme
* Version: 2.0.3
* Template: choicy
* Text Domain: choicy-child
* License: GNU General Public License version 3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
* Tags: one-column, right-sidebar, left-sidebar, custom-menu, featured-images, post-formats, sticky-post, translation-ready

* We encourage you to create Child theme for any modifications you will want to do.

* Why use Child theme?

* Because of choicy updates we may provide for this theme that will overwrite your
* modifications and all your custom work.

* If you are not familiar with Child Themes, you can read about it here:
* http://codex.wordpress.org/Child_Themes
* http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/

====================================================================================== */


/* ------------------------------------------------------------------------------------
 * Legal strip — statutory registration details, printed below the footer.
 * Rendered by mosaic_legal_footer() in functions.php.
 * ---------------------------------------------------------------------------------- */

.mosaic-legal {
	background: #0c2e2c;
	color: rgba(255, 255, 255, 0.72);
	font-size: 13px;
	line-height: 1.6;
	padding: 14px 20px;
	text-align: center;
}

.mosaic-legal__inner {
	margin: 0 auto;
	max-width: 1140px;
}

.mosaic-legal__name {
	color: rgba(255, 255, 255, 0.9);
}

.mosaic-legal__sep {
	opacity: 0.45;
}

/* Inline via [mosaic_company_details]: inherit the surrounding page instead. */
.mosaic-legal--inline {
	background: none;
	color: inherit;
	padding: 0;
	text-align: inherit;
}

.mosaic-legal--inline .mosaic-legal__name {
	color: inherit;
	font-weight: 600;
}

/* Stack the parts on small screens so the identifiers stay readable. */
@media (max-width: 600px) {
	.mosaic-legal__sep {
		display: block;
		height: 0;
		overflow: hidden;
	}

	.mosaic-legal__name,
	.mosaic-legal__address,
	.mosaic-legal__id {
		display: block;
	}
}


/* ------------------------------------------------------------------------------------
 * The parent theme applies text-transform: capitalize to headings. In English that is
 * merely a style choice; in Serbian it mangles ordinary sentence case into
 * "Sadržaj Koji Ljudi Zaista Pogledaju". Headings should render as written.
 * ---------------------------------------------------------------------------------- */

.elementor-widget-heading .elementor-heading-title,
.elementor-heading-title,
h1, h2, h3, h4, h5, h6 {
	text-transform: none;
}

/* The theme sets capitalize on its own title classes, which outranks the
   element selectors above. Small-caps subtitles are left alone — those are a
   deliberate label style and read fine in Serbian. */
[class*="chy-title"],
[class*="tx-title"],
[class*="chy-split-text"],
.chy-sec-title,
.section-title-wrap h1,
.section-title-wrap h2,
.section-title-wrap h3,
.section-title-wrap h4 {
	text-transform: none !important;
}

/* The split-text animation puts every character in its own div, and the theme
   capitalizes the first one of each word — so a heading written in sentence
   case still rendered as "Brend Se Ne Gradi Objavama". */
.split-line div div:nth-child(1) {
	text-transform: none !important;
}

/* Section eyebrows: "O Nama" should read "O nama". Only the capitalize variant
   is touched — the chy-subtitle-* classes set uppercase, which is a deliberate
   label style and reads fine. */
.subtitle,
.tx-subTitle:not([class*="chy-subtitle"]) {
	text-transform: none !important;
}

/* Demo badges we emptied rather than deleted (an emptied control is safe where
   removing a repeater entry is not) still render an <img> with no source. */
img[src=""] {
	display: none !important;
}


/* ------------------------------------------------------------------------------------
 * Contact Form 7 ships unstyled, which left labels colliding with their inputs.
 * ---------------------------------------------------------------------------------- */

.wpcf7 label {
	color: #3A4440;
	display: block;
	font-weight: 600;
	margin-bottom: 16px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	background: #fff;
	border: 1px solid #D8DBD8;
	border-radius: 6px;
	display: block;
	font: inherit;
	font-size: 16px;
	margin-top: 6px;
	padding: 12px 14px;
	width: 100%;
}

.wpcf7 textarea {
	min-height: 150px;
	resize: vertical;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
	border-color: #103D3A;
	box-shadow: 0 0 0 3px rgba(16, 61, 58, 0.12);
	outline: none;
}

.wpcf7 input[type="submit"] {
	background: #D9AE63;
	border: 0;
	border-radius: 6px;
	color: #103D3A;
	cursor: pointer;
	font-weight: 700;
	padding: 16px 34px;
	transition: background 0.15s ease;
}

.wpcf7 input[type="submit"]:hover {
	background: #C99F55;
}

/* Space the hero's side-by-side buttons apart. */
.elementor-widget-button[data-widget_type="button.default"] + .elementor-widget-button {
	margin-left: 12px;
}

/* Hero call-to-action buttons sit side by side rather than stacking. */
.mosaic-hero .elementor-widget-button {
	display: inline-block;
	margin-right: 12px;
	vertical-align: top;
	width: auto;
}


/* ------------------------------------------------------------------------------------
 * Typography
 *
 * Replaces the theme's Syne (extended-width, used for footer headings) and Urbanist
 * with Manrope, which carries the full Serbian Latin set. The previous fonts dropped
 * to a system fallback for đ, so a single character in "Vođenje" rendered in a
 * different typeface.
 * ---------------------------------------------------------------------------------- */

:root {
	--mosaic-font: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body,
p, li, td, th, blockquote, label,
a, span, strong, em, small, div,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-text-editor,
.elementor-button {
	font-family: var(--mosaic-font) !important;
}

/* Re-assert icon fonts, which the rule above would otherwise clobber. */
i, .fa, .fas, .far, .fab, .fal,
.fa-solid, .fa-regular, .fa-brands,
[class^="fa-"], [class*=" fa-"] {
	font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands",
	             "Font Awesome 5 Free", "Font Awesome 5 Brands",
	             FontAwesome, sans-serif !important;
}

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

/* Footer links slid sideways on hover, which read as a glitch. Colour is enough. */
footer a,
footer a:hover,
footer li a,
footer li a:hover {
	letter-spacing: normal !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
	transform: none !important;
	transition: color 0.15s ease !important;
}

footer a:hover,
footer li a:hover {
	color: #D9AE63 !important;
}

/* The newsletter field and its button were overlapping. */
footer .wpcf7 form,
footer form.wpcf7-form {
	align-items: stretch;
	display: flex;
	gap: 8px;
}

footer .wpcf7 input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	margin-top: 0;
}

footer .wpcf7 button[type="submit"] {
	background: #D9AE63;
	border: 0;
	border-radius: 6px;
	color: #103D3A;
	cursor: pointer;
	flex: 0 0 auto;
	font-weight: 700;
	padding: 12px 22px;
	white-space: nowrap;
}

footer .wpcf7 button[type="submit"]:hover {
	background: #C99F55;
}

/* Navigation labels as written: "O nama", not "O Nama". Same capitalize rule
   as the headings, applied to menus. */
nav a,
.menu-item > a,
ul.main-menu li a,
.chy-main-menu li a {
	text-transform: none !important;
}

/* The newsletter field was too narrow to show its own placeholder, and kept
   the theme's display font. */
footer input[type="email"],
footer .wpcf7 input[type="email"] {
	font-family: var(--mosaic-font) !important;
	min-width: 240px;
	width: 100% !important;
}

footer input[type="email"]::placeholder,
footer .wpcf7 input[type="email"]::placeholder {
	font-family: var(--mosaic-font) !important;
	letter-spacing: normal !important;
}


/* The removed TikTok entry is blanked rather than deleted (deleting it from the
   Elementor repeater breaks the theme's widgets — see README), which leaves an
   empty list item and a gap in the social icons. Collapse it. */
li:has(> a[href=""]) {
	display: none !important;
}

/* Client logo grid. Logos arrive at wildly different aspect ratios, so cap the
   height and centre them; the slight fade keeps a wall of competing brand
   colours from overpowering the page. */
.mosaic-logo img {
	filter: saturate(0.9);
	max-height: 62px;
	object-fit: contain;
	opacity: 0.82;
	transition: opacity 0.15s ease, filter 0.15s ease;
	width: auto;
}

.mosaic-logo img:hover {
	filter: none;
	opacity: 1;
}

.mosaic-logo .elementor-widget-container {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 90px;
}

/* The demo about blocks carry a price badge ("$14.99"). There is no published
   pricing, so the emptied badge rendered as a stray "$" in a box. */
.price-value {
	display: none !important;
}

/* More of the theme title-cases its list items and buttons, which mangles
   Serbian ("Vođenje Društvenih Mreža"). Scoped to the theme's own wrappers so
   deliberate all-caps labels are left alone. */
[class*="chy-"] li,
[class*="chy-"] button,
[class*="chy-"] .btn,
a[class*="chy-pr-btn"],
.tx-button,
.tx-listItems li,
.elementor-widget-container li {
	text-transform: none !important;
}

/* ------------------------------------------------------------------------------------
 * Call-to-action card (Usluge)
 *
 * The theme's style_2 CTA prints its heading in the near-black it gives every
 * heading, over a background photo. The demo paired it with a dark image and hid the
 * clash; ours is a bright office shot, so the heading was unreadable either way. A
 * scrim over the photo plus a light heading fixes both, and gives the gold button
 * something solid to sit on.
 * ---------------------------------------------------------------------------------- */

.chy-cta-1-wrap {
	position: relative;
}

.chy-cta-1-wrap::before {
	background: linear-gradient(90deg, rgba(16, 61, 58, 0.92) 0%, rgba(16, 61, 58, 0.55) 60%, rgba(16, 61, 58, 0.25) 100%);
	border-radius: inherit;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.chy-cta-1-content {
	position: relative;
	z-index: 2;
}

.chy-cta-1-content .chy-title-1,
.chy-cta-1-content .chy-subtitle-1 {
	color: #FFFFFF !important;
}

/* Gold button, dark label — white on gold is unreadable. */
.chy-pr-btn-1,
.chy-pr-btn-1 .text,
.chy-pr-btn-1 .icon {
	color: #103D3A !important;
}


/* ------------------------------------------------------------------------------------
 * Contact page details
 *
 * Two colours are hardcoded in the parent stylesheet rather than taken from the theme
 * options, so changing the accents there left them behind: a lavender behind the icon
 * circles and a purple at the end of the bar beside the block.
 * ---------------------------------------------------------------------------------- */

.contact-page-contact-list .icon {
	background: rgba(229, 195, 113, 0.25) !important;
}

.border-left::after,
.contact-page-content .border-left::after {
	background: linear-gradient(87deg, #103D3A 57.32%, #E5C371 97.15%) !important;
}

/* An address and an email address are not title case. */
.contact-page-contact-list .text {
	text-transform: none !important;
}

/* A contact entry blanked rather than deleted still prints its wrapper and its
   icon circle, leaving the circle sitting on its own next to nothing. Written
   as show-what-has-a-title rather than hide-what-does-not, because :has()
   nested inside :not() is not reliably supported; the @supports guard keeps
   every entry visible in a browser without :has() at all. */
@supports selector(:has(*)) {
	.contact-page-contact-list .item {
		display: none !important;
	}

	.contact-page-contact-list .item:has(.title) {
		display: flex !important;
	}
}


/* ------------------------------------------------------------------------------------
 * Blog, archives and single posts
 *
 * These are theme templates rather than Elementor pages, so they inherit whatever the
 * page is given rather than painting their own backgrounds.
 * ---------------------------------------------------------------------------------- */

/* The breadcrumb banner reserves 280px for the header. That suits the demo's single-row
   header; ours is the two-row branded one, which is taller, so the page title was
   sitting behind the logo. */
.breadcrumb-area {
	padding-top: 360px !important;
}

@media (max-width: 1199px) {
	.breadcrumb-area {
		padding-top: 160px !important;
		padding-bottom: 120px !important;
	}
}

@media (max-width: 767px) {
	.breadcrumb-area {
		padding-top: 130px !important;
		padding-bottom: 90px !important;
	}
}

/* Post titles are sentence case, here as everywhere else: "Novi sajt je uživo", not
   "Novi Sajt Je Uživo". */
.breadcrumb-title,
.breadcrumb-list,
.breadcrumb-list a,
.tx-blog-box .title,
.tx-blog-box .title a,
.sidebar-box .title,
.sidebar-box .title a,
.widget_tc-latest-posts a,
.tx-cat-list a {
	text-transform: none !important;
}