/* ==========================================================================
   Tekstil-ka – dodatni stilovi (većina stilova je u theme.json)
   ========================================================================== */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

:where(.wp-site-blocks) > * { margin-block-start: 0; }
.wp-block-post-content > .alignfull { margin-block: 0; }
[id] { scroll-margin-top: 96px; }

:focus-visible { outline: 3px solid var(--wp--preset--color--cyan); outline-offset: 3px; border-radius: 4px; }

/* ---------- Tanke "niti" u bojama logotipa ---------- */
.tk-threads { position: relative; }
.tk-threads::before {
	content: "";
	position: absolute; inset: 0 0 auto 0; height: 4px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--cyan) 0 25%,
		var(--wp--preset--color--pink) 25% 50%,
		var(--wp--preset--color--yellow) 50% 75%,
		var(--wp--preset--color--primary) 75% 100%);
}

/* ---------- Zaglavlje ---------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky; top: 0; z-index: 100;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; }
}
.tk-header {
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.tk-header .wp-block-site-logo img { width: clamp(150px, 18vw, 200px); height: auto; }
.tk-header .wp-block-navigation a:not(.wp-element-button) { text-decoration: none; }
.tk-header .wp-block-navigation a:hover { color: var(--wp--preset--color--pink); }
.tk-header .wp-block-button__link { padding: .6rem 1.15rem; font-size: .95rem; }
@media (max-width: 781px) {
	.tk-header .tk-header__cta { display: none; }
}

/* ---------- Opći elementi ---------- */
.tk-eyebrow {
	display: inline-flex; align-items: center; gap: .6rem;
	font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.tk-eyebrow::before {
	content: ""; width: 28px; height: 3px; border-radius: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--cyan) 0 33%, var(--wp--preset--color--pink) 33% 66%, var(--wp--preset--color--yellow) 66%);
}
.has-text-align-center.tk-eyebrow { display: flex; justify-content: center; }
.tk-lead { color: var(--wp--preset--color--muted); max-width: 40rem; }
.tk-muted { color: var(--wp--preset--color--muted); }
.tk-section-head { margin-bottom: var(--wp--preset--spacing--50); }
.tk-section-head > * { margin-block: 0; }
.tk-section-head > * + * { margin-block-start: 1rem; }

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor; background: transparent; color: var(--wp--preset--color--primary);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary); color: #fff; border-color: var(--wp--preset--color--primary);
}
.wp-block-button__link { transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); }

/* ---------- Hero ---------- */
.tk-hero { overflow: hidden; }
.tk-hero h1 { margin-block: 1rem 1.25rem; }
.tk-hero h1 mark { background: none; }
.tk-mosaic {
	display: grid; gap: 14px;
	grid-template-columns: 1.15fr 1fr;
	grid-template-rows: 1fr 1fr;
	min-height: 460px;
}
.tk-mosaic > * { margin: 0 !important; }
.tk-mosaic .wp-block-image { border-radius: var(--wp--custom--radius--large); overflow: hidden; box-shadow: var(--wp--custom--shadow--card); }
.tk-mosaic .wp-block-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }
.tk-mosaic .tk-m1 { grid-row: 1 / span 2; }
.tk-mosaic .tk-m3 {
	border-radius: var(--wp--custom--radius--large);
	display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem;
	padding: 1.5rem;
}
.tk-mosaic .tk-m3 p { margin: 0; }
.tk-mosaic .tk-m3 .tk-big { font-family: var(--wp--preset--font-family--heading); font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1; }
@media (max-width: 781px) {
	.tk-mosaic { min-height: 0; grid-template-rows: 200px 170px; }
}

.tk-stats { border-top: 1px solid var(--wp--preset--color--line); padding-top: var(--wp--preset--spacing--40); }
.tk-stat > * { margin: 0; }
.tk-stat .tk-stat__num { font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.1; color: var(--wp--preset--color--primary-dark); }
.tk-stat .tk-stat__label { font-size: .9rem; color: var(--wp--preset--color--muted); }

/* ---------- Kartice ---------- */
.tk-card, .is-style-tk-kartica {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--medium);
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow--card);
	transition: transform .25s ease, box-shadow .25s ease;
}
.is-style-tk-kartica { padding: var(--wp--preset--spacing--40); }
.tk-card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(43,41,70,.06), 0 22px 44px -16px rgba(43,41,70,.28); }
.tk-card > .wp-block-image { margin: 0; }
.tk-card > .wp-block-image img { border-radius: 0; width: 100%; display: block; transition: transform .6s ease; }
.tk-card:hover > .wp-block-image img { transform: scale(1.04); }
.tk-card > .wp-block-image { overflow: hidden; }
.tk-card__body { padding: 1.1rem 1.25rem 1.4rem; }
.tk-card__body > * { margin-block: 0; }
.tk-card__body > * + * { margin-block-start: .4rem; }
.tk-card__body p { font-size: .95rem; color: var(--wp--preset--color--muted); line-height: 1.55; }

/* ---------- Popisi ---------- */
ul.tk-checklist { list-style: none; padding-left: 0; }
ul.tk-checklist li { position: relative; padding-left: 2rem; margin-block: .55rem; }
ul.tk-checklist li::before {
	content: ""; position: absolute; left: 0; top: .2em;
	width: 1.3rem; height: 1.3rem; border-radius: 50%;
	background: var(--wp--preset--color--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat;
}

ol.tk-steps { list-style: none; padding-left: 0; counter-reset: tk; }
ol.tk-steps li { counter-increment: tk; position: relative; padding-left: 3rem; margin-block: 1rem; min-height: 2.2rem; }
ol.tk-steps li::before {
	content: counter(tk); position: absolute; left: 0; top: -.1rem;
	width: 2.2rem; height: 2.2rem; border-radius: 50%;
	display: grid; place-items: center;
	font-weight: 800; color: #fff; background: var(--wp--preset--color--pink);
}

/* ---------- O nama ---------- */
.tk-about-img { position: relative; }
.tk-about-img .wp-block-image img { border-radius: var(--wp--custom--radius--large); width: 100%; box-shadow: var(--wp--custom--shadow--card); }
.tk-badge {
	position: absolute; right: -12px; bottom: 28px; margin: 0 !important;
	border-radius: var(--wp--custom--radius--medium);
	padding: 1rem 1.25rem; box-shadow: var(--wp--custom--shadow--card);
	line-height: 1.2;
}
.tk-badge p { margin: 0; }
@media (max-width: 781px) { .tk-badge { right: 12px; } }

/* ---------- Prednosti ---------- */
.tk-feature { border-top: 4px solid var(--wp--preset--color--cyan); padding-top: 1.25rem; }
.tk-feature > * { margin-block: 0; }
.tk-feature > * + * { margin-block-start: .5rem; }
.tk-feature p { color: var(--wp--preset--color--muted); font-size: .98rem; }
.tk-feature--pink { border-top-color: var(--wp--preset--color--pink); }
.tk-feature--yellow { border-top-color: var(--wp--preset--color--yellow); }
.tk-feature--navy { border-top-color: var(--wp--preset--color--primary); }

/* ---------- Tamna sekcija (veleprodaja) ---------- */
.tk-dark { color: #e7e6f2; }
.tk-dark :where(h1, h2, h3, h4) { color: #fff; }
.tk-dark .tk-eyebrow { color: #fff; }
.tk-dark a:not(.wp-element-button) { color: #fff; }
.tk-dark .tk-muted, .tk-dark .tk-lead { color: #c9c7df; }
.tk-dark ul.tk-checklist li::before { background-color: var(--wp--preset--color--pink); }
.tk-dark .tk-card, .tk-dark .is-style-tk-kartica { color: var(--wp--preset--color--contrast); }
.tk-dark .is-style-tk-kartica :where(h2, h3) { color: var(--wp--preset--color--primary-dark); }
.tk-dark .is-style-tk-kartica a:not(.wp-element-button) { color: var(--wp--preset--color--primary); }
.tk-dark .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; }
.tk-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--primary-dark); border-color: #fff; }

/* ---------- Poslovnice ---------- */
.tk-store { padding: var(--wp--preset--spacing--40); display: flex; flex-direction: column; }
.tk-store > * { margin-block: 0; }
.tk-store > * + * { margin-block-start: .75rem; }
.tk-store h3 { font-size: var(--wp--preset--font-size--x-large); font-weight: 500; letter-spacing: -.01em; }
.tk-store .tk-store__row { font-size: .98rem; }
.tk-store .tk-store__row strong { display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.tk-store .wp-block-buttons { margin-top: auto; padding-top: .5rem; }
.tk-store--cyan { border-top: 5px solid var(--wp--preset--color--cyan); }
.tk-store--pink { border-top: 5px solid var(--wp--preset--color--pink); }
.tk-store--yellow { border-top: 5px solid var(--wp--preset--color--yellow); }

/* ---------- Kontakt ---------- */
.tk-contact { border-radius: var(--wp--custom--radius--large); overflow: hidden; }
.tk-contact .wp-block-social-links { gap: .75rem; }

/* ---------- Podnožje ---------- */
.tk-footer { color: #c9c7df; font-size: .95rem; }
.tk-footer :where(h2, h3, h4) { color: #fff; font-family: var(--wp--preset--font-family--body); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.tk-footer a { color: #fff; text-decoration: none; }
.tk-footer a:hover { color: var(--wp--preset--color--yellow); text-decoration: underline; }
.tk-footer p { margin-block: .35rem; }
.tk-footer .tk-footer__logo img { width: 210px; height: auto; }
.tk-footer .tk-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; }
.tk-footer .wp-block-social-links .wp-social-link { background: rgba(255,255,255,.1); color: #fff; }
.tk-dark .is-style-tk-kartica .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--primary); }
.tk-dark .is-style-tk-kartica .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--primary); color: #fff; border-color: var(--wp--preset--color--primary); }

@media (max-width: 600px) {
	.tk-card__body { padding: .8rem .85rem 1rem; }
	.tk-card__body h3 { font-size: 1rem; }
	.tk-card__body p { font-size: .82rem; }
}
