/*
Theme Name: Venditel
Theme URI: https://venditel.com/
Author: 2C North
Author URI: https://2cnorth.com/
Description: Tema za sajt kompanije Venditel: jedna početna stranica sa delovima o kompaniji, uslugama, karijeri, kontakt formi i kontaktu.
Version: 0.1.7
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: venditel
*/

/* Page-level behaviour */

html {
	scroll-padding-top: 6rem;
	accent-color: var(--wp--preset--color--brand);
	scrollbar-color: var(--wp--preset--color--line) transparent;
}

::selection {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}

a {
	text-underline-offset: 0.18em;
}

@media (prefers-reduced-motion: no-preference) {
	a,
	.wp-element-button {
		transition: color 0.15s ease-out, background-color 0.15s ease-out, border-color 0.15s ease-out;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

h1,
h2,
h3 {
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Core's skip link is a grey box; give it the site's colours. */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	border-radius: 6px;
	box-shadow: none;
	outline: 3px solid var(--wp--preset--color--sky);
	outline-offset: 2px;
}

/* Header */

.vt-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 20;
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.vt-header {
	padding-block: 0.875rem;
}

.vt-header__bar {
	gap: 1.5rem;
}

.vt-logo {
	flex-shrink: 0;
	margin: 0;
}

.vt-logo img {
	display: block;
	height: auto;
}

.vt-nav .wp-block-navigation__container {
	gap: 0.5rem 1.75rem;
}

/* Link colour comes from theme.json (core sets nav links to inherit); 44px tall targets. */
.vt-nav .wp-block-navigation-item > .wp-block-navigation-item__content {
	text-decoration: none;
	padding-block: 0.625rem;
}

.vt-nav .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--brand-dark);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.4em;
}

.vt-nav .wp-block-navigation__responsive-container-open,
.vt-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
	min-inline-size: 44px;
	min-block-size: 44px;
	justify-content: center;
	align-items: center;
}

.vt-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
}

/* Core switches to the full menu at 600px; five links and the logo need about 900px. */
@media (min-width: 600px) and (max-width: 899px) {
	.vt-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.vt-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

.vt-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.vt-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
}

.vt-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.25rem;
	padding-block-start: 1rem;
}

.vt-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	padding-block: 0.375rem;
}

/* Sections */

.vt-section {
	padding-block: clamp(3rem, 1.5rem + 5vw, 6rem);
}

.vt-section > * + * {
	margin-block-start: var(--wp--preset--spacing--50);
}

.vt-lead {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
	max-width: 38rem;
}

.wp-block-columns.vt-split {
	column-gap: var(--wp--preset--spacing--60);
	row-gap: var(--wp--preset--spacing--30);
}

.vt-split h2,
.vt-split .vt-lead {
	margin-block-start: 0;
}

/* Hero: the logo's blue bar, carried in from the left edge of the page */

.vt-hero {
	--vt-bleed: max(var(--wp--style--root--padding-left), (100vw - var(--wp--style--global--wide-size)) / 2);
	overflow-x: clip;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

.wp-block-columns.vt-hero__grid {
	column-gap: var(--wp--preset--spacing--60);
	row-gap: var(--wp--preset--spacing--50);
}

.vt-hero__title {
	max-width: 12ch;
	margin-block-start: 0;
}

.vt-hero__title::before {
	content: "";
	display: block;
	width: calc(var(--vt-bleed) + 8rem);
	height: 0.875rem;
	margin-inline-start: calc(-1 * var(--vt-bleed));
	margin-block-end: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border-radius: 0 999px 999px 0;
	background: var(--wp--preset--color--brand);
}

.vt-hero .vt-lead {
	margin-block-start: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.vt-hero__actions {
	margin-block-start: var(--wp--preset--spacing--40);
	gap: 0.75rem;
}

/* On phones the two buttons stack; give them one width instead of a ragged edge. */
@media (max-width: 32rem) {
	.vt-hero__actions .wp-block-button {
		flex: 1 1 100%;
	}

	.vt-hero__actions .wp-block-button__link {
		width: 100%;
	}
}

/* Yettel partnership: a quiet line with the partner's badge under the hero buttons. */
.vt-partner {
	gap: 0.75rem;
	margin-block-start: var(--wp--preset--spacing--40);
}

.vt-partner p {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

.vt-partner__logo {
	margin: 0;
}

/* The badge links to yettel.rs; the focus ring follows its rounded corners. */
.vt-partner__logo a {
	display: block;
	border-radius: 6px;
}

.vt-partner__logo img {
	display: block;
	height: auto;
	border-radius: 6px;
}

/* Photos */

.vt-photo {
	margin: 0;
}

.vt-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/* Keep the agent's face in frame when the hero photo is cropped to 4:3 on phones. */
.vt-photo--hero img {
	object-position: 50% 0%;
}

/* On phones the photo leads: it sits above the heading instead of after the buttons. */
@media (max-width: 781px) {
	.vt-hero__grid > .wp-block-column:last-child {
		order: -1;
	}

	/* On tablets the 4:3 crop would push the heading far down, so the height is capped. */
	.vt-photo--hero img {
		aspect-ratio: 4 / 3 !important;
		max-height: 24rem;
	}
}

/* Item lists: services, principles, contact */

.vt-points {
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.vt-item {
	border-top: 2px solid var(--wp--preset--color--line);
	padding-top: 1.25rem;
}

.vt-item :is(h3, h4) {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--medium);
}

/* Line icons (Feather, MIT; see assets/icons) above items and before the call-direction titles.
   A mask keeps them in the theme's brand colour. */
.vt-icon::before,
.vt-icon-inline::before {
	content: "";
	display: block;
	flex-shrink: 0;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	background: var(--wp--preset--color--brand);
	-webkit-mask: var(--vt-icon) center / contain no-repeat;
	mask: var(--vt-icon) center / contain no-repeat;
}

.vt-icon::before {
	inline-size: 2rem;
	block-size: 2rem;
	margin-block-end: 0.75rem;
}

.vt-icon-inline {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.vt-icon--obuka {
	--vt-icon: url("assets/icons/obuka.svg");
}

.vt-icon--evidencija {
	--vt-icon: url("assets/icons/evidencija.svg");
}

.vt-icon--ne-zovi {
	--vt-icon: url("assets/icons/ne-zovi.svg");
}

.vt-icon--prodaja {
	--vt-icon: url("assets/icons/prodaja.svg");
}

.vt-icon--podsetnici {
	--vt-icon: url("assets/icons/podsetnici.svg");
}

.vt-icon--ankete {
	--vt-icon: url("assets/icons/ankete.svg");
}

.vt-icon--podrska {
	--vt-icon: url("assets/icons/podrska.svg");
}

.vt-icon--tehnicka {
	--vt-icon: url("assets/icons/tehnicka.svg");
}

.vt-icon--zakazivanje {
	--vt-icon: url("assets/icons/zakazivanje.svg");
}

.vt-icon--odlazni {
	--vt-icon: url("assets/icons/odlazni.svg");
}

.vt-icon--dolazni {
	--vt-icon: url("assets/icons/dolazni.svg");
}

/* Services come in two named groups: outbound and inbound calls. */
.vt-service-group {
	margin-block-start: var(--wp--preset--spacing--50);
}

.vt-group-title {
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 1.25rem;
}

.vt-item p {
	margin: 0;
	color: var(--wp--preset--color--steel);
}

.vt-contact .vt-item p {
	color: var(--wp--preset--color--graphite);
	font-size: var(--wp--preset--font-size--medium);
}

/* Phone, e-mail and map links are primary actions here: give them 44px tall targets. */
.vt-contact .vt-item a {
	display: inline-block;
	padding-block: 0.375rem;
}

/* Buttons */

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent;
	color: var(--wp--preset--color--ink);
	padding: calc(0.8em - 2px) calc(1.35em - 2px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* Careers: the one dark section */

.vt-dark h2,
.vt-dark h3 {
	color: var(--wp--preset--color--white);
}

.vt-dark p,
.vt-dark li {
	color: var(--wp--preset--color--on-ink);
}

.vt-dark a:not(.wp-element-button) {
	color: var(--wp--preset--color--sky);
}

.vt-dark :focus-visible {
	outline-color: var(--wp--preset--color--sky);
}

.vt-careers__grid h3 {
	margin-block-start: var(--wp--preset--spacing--40);
	margin-block-end: 0.5rem;
}

.vt-list {
	padding-inline-start: 1.25rem;
	margin-block-start: 0;
}

.vt-list li + li {
	margin-block-start: 0.25rem;
}

.vt-list li::marker {
	color: var(--wp--preset--color--sky);
}

/* Job ad: a light card inside the dark section, laid out like a posting on a job board. */
.vt-job {
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
}

/* Ads for several positions sit close together, as one list. */
.vt-job + .vt-job {
	margin-block-start: 1rem;
}

.vt-dark .vt-job :where(h3) {
	color: var(--wp--preset--color--ink);
}

.vt-dark .vt-job :where(p, li) {
	color: var(--wp--preset--color--graphite);
}

.vt-dark .vt-job a:not(.wp-element-button) {
	color: var(--wp--preset--color--brand-dark);
}

.vt-dark .vt-job :focus-visible {
	outline-color: var(--wp--preset--color--brand);
}

/* The position's title opens the ad (core details block); the chevron shows its state. */
.vt-job > .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-block-size: 44px;
	list-style: none;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.25;
}

.vt-job > .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.vt-job > .wp-block-details > summary::after {
	--vt-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	content: "";
	flex-shrink: 0;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	background: var(--wp--preset--color--brand);
	-webkit-mask: var(--vt-chevron) center / contain no-repeat;
	mask: var(--vt-chevron) center / contain no-repeat;
}

.vt-job > .wp-block-details[open] > summary::after {
	transform: rotate(180deg);
}

.vt-job > .wp-block-details > summary:hover {
	color: var(--wp--preset--color--brand-dark);
}

@media (prefers-reduced-motion: no-preference) {
	.vt-job > .wp-block-details > summary::after {
		transition: transform 0.2s ease-out;
	}
}

.wp-block-columns.vt-job__grid {
	column-gap: var(--wp--preset--spacing--50);
	row-gap: 1.5rem;
	margin-block-start: var(--wp--preset--spacing--30);
}

.vt-job h3 {
	margin: 1.5rem 0 0.5rem;
	font-size: var(--wp--preset--font-size--medium);
}

.vt-job h3 + :is(p, .wp-block-list) {
	margin-block-start: 0;
}

.vt-job .vt-list li::marker {
	color: var(--wp--preset--color--brand);
	font-weight: 700;
}

.vt-job .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40);
}

.vt-job .vt-job__note {
	margin-block: 1rem 0;
	font-size: var(--wp--preset--font-size--small);
}

/* Facts about the position as tags (VENDITEL_JOB_FACTS in functions.php). */
.vt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.vt-job .vt-chips > li {
	margin: 0;
	padding: 0.375rem 0.875rem;
	border-radius: 1rem;
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
}

.vt-button-light > .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.vt-button-light > .wp-block-button__link:hover {
	background: var(--wp--preset--color--sky);
	color: var(--wp--preset--color--ink);
}

/* Contact: details stacked under the intro, the form (Forminator form 114) on a white panel beside them. */
.vt-contact {
	display: grid;
	gap: 1.25rem;
	margin-block-start: var(--wp--preset--spacing--40);
}

.wp-block-column.vt-form {
	align-self: flex-start;
	padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
}

/* Local preview only: plain text where Forminator renders the form on the live site. */
.vt-form-placeholder {
	color: var(--wp--preset--color--steel);
}

.vt-form-placeholder p {
	margin: 0;
}

/* Inner pages */

.vt-page {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

.vt-page__title {
	font-size: var(--wp--preset--font-size--x-large);
}

/* Inside a page the lead spans the text column instead of sitting indented in it. */
.vt-page .vt-lead {
	max-width: none;
}

.vt-page h2 {
	font-size: var(--wp--preset--font-size--large);
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Footer */

.vt-site-footer {
	border-top: 4px solid var(--wp--preset--color--brand);
}

.vt-footer {
	padding-block: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--steel);
}

.vt-footer__grid {
	gap: 1.5rem 3rem;
}

/* One 44px line rhythm for all three columns, so links are full-height targets and the columns align. */
.vt-footer p {
	margin: 0;
	line-height: 2.75rem;
}

.vt-footer .vt-logo {
	margin-block-end: 0.5rem;
}

.vt-footer a {
	display: inline-block;
	color: var(--wp--preset--color--ink);
}