/*
Theme Name: Teak Deck
Theme URI: https://www.teakdeck.hr/
Author: ATT Nautica
Description: Block theme za teakdeck.hr. Bez page buildera — tokeni u theme.json, template datoteke i patterni.
Version: 0.17.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: teakdeck
*/

/* --------------------------------------------------------------------------
   Osnove. Sve vrijednosti dolaze iz theme.json kao custom propertyji;
   ovdje se ne uvodi nijedna nova boja ni razmak.
   -------------------------------------------------------------------------- */

::selection {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, select, textarea):focus-visible,
.wp-block-navigation a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* WP umece blockGap izmedu blokova najvise razine, sto ostavlja bijelu prugu
   izmedu zadnje sekcije i footera. U ovom dizajnu svaka sekcija nosi vlastiti
   razmak, pa je razmak izmedu njih nula. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Isto vrijedi unutar post-contenta: sekcije stranice nisu izravna djeca
   <main> nego omotaca .wp-block-post-content, gdje WP ubacuje isti razmak.
   Ciljano samo na sekcije teme — obicni odlomci u clancima zadrzavaju svoj. */
.wp-block-post-content > [class*="td-"],
.entry-content > [class*="td-"] {
	margin-block-start: 0;
}

/* Mono labele — eyebrow, CTA, natpisi. */
.td-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 400;
	text-transform: uppercase;
}

.td-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.td-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 20;
	background: var(--wp--preset--color--base);
	padding-block: clamp(18px, 2.4vw, 34px);
	padding-inline: var(--wp--preset--spacing--gutter);
	transition: padding var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

/* WP omata template part u <header class="wp-block-template-part">, visok
   tocno koliko i traka, pa sticky na .td-header nije imao gdje kliziti i
   header je na unutarnjim stranicama odlazio s ekrana. Sticky ide na omotac.
   Tamni header na naslovnici je fixed, omotac mu je visok 0 i ovo ga ne dira. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
	z-index: 20;
}

/* Nakon 40 px skrola traka se stisne i dobije crtu. Atribut postavlja
   assets/js/header.js. */
.td-header[data-td-scrolled] {
	padding-block: clamp(12px, 1.6vw, 20px);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.td-header .td-logo,
.td-header .td-logo a {
	display: inline-flex;
	align-items: center;
	margin: 0;
	line-height: 0;
}

.td-header .td-logo img {
	display: block;
	height: clamp(36px, 3.2vw, 52px);
	width: auto;
	object-fit: contain;
}

.td-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--cta);
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	text-transform: uppercase;
}

.td-header .wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
	color: inherit;
}

/* Blok navigacije sam postavlja blockGap (43 px na 1440), zbog cega se
   osam stavki i gumb ne stanu u red. Dizajn trazi clamp(12px,2vw,32px). */
.td-header .wp-block-navigation__container,
.td-header .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	gap: clamp(12px, 2vw, 32px);
}

.td-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.td-header .wp-block-navigation .current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

/* Dropdown panel: kvadratna bijela kartica s crnim obrubom (README, Header). */
.td-header .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
	padding-block: 6px;
	min-width: 260px;
}

.td-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 18px;
}

/* Zadnja stavka je gumb: ispuna akcentom, bijeli tekst, negativna vertikalna
   margina da ne poveća visinu reda. */
.td-header .td-nav-cta > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	padding: 11px 20px;
	margin-block: -11px;
}

/* Hover invertira: crna ispuna, mesing natpis. Oba smjera 4,96:1. */
.td-header .td-nav-cta > .wp-block-navigation-item__content:hover,
.td-header .td-nav-cta > .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--base);
}

/* Tamna varijanta — header leži preko tamnog heroja. */
.td-header--dark {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 20;
	background: transparent;
	color: var(--wp--preset--color--base);
}

/* Predlozak page-dark (Refit, Removal): u artboardu je tamni header dio
   tamnog bloka heroja, ne prozirni sloj preko fotografije. Zato je ovdje
   puna crna traka u toku stranice, a sticky ga drzi omotac. */
.page-template-page-dark .td-header--dark {
	position: static;
	background: var(--wp--preset--color--ink);
}

/* Preko heroja je proziran; kad hero prode, postaje puna crna traka —
   inace su bijele stavke na bijelom sadrzaju. */
.td-header--dark[data-td-scrolled] {
	background: var(--wp--preset--color--ink);
	border-block-end: 1px solid var(--wp--custom--on-dark--line);
}

.td-header--dark[data-td-scrolled] .td-nav-cta > .wp-block-navigation-item__content:hover,
.td-header--dark[data-td-scrolled] .td-nav-cta > .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

.td-header--dark .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
}

/* Gumb je iznimka: pravilo iznad ima istu specificnost i dolazi kasnije, pa
   je gumbu u tamnom headeru vracalo bijeli natpis — 3,99:1 na mesingu.
   Crni natpis na mesingu je 4,96:1, isto kao .td-cta. */
.td-header--dark .td-nav-cta > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
}

.td-header--dark .td-nav-cta > .wp-block-navigation-item__content:hover,
.td-header--dark .td-nav-cta > .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--base);
}

/* Panel padajuceg izbornika je bijel i na tamnom headeru, pa stavke u njemu
   moraju ostati tamne — inace su bijele na bijelom i nevidljive. */
.td-header--dark .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.td-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
}

.td-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.td-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* Telefon i e-mail postoje samo u mobilnom izborniku. */
.td-header .td-nav-mob { display: none; }

/* Mobilni header i izbornik — krug 4, 4B. Header: logo 34 px, gumb "MENU" s dvije
   crte (44 px), crta #EAEAEA. Izbornik: bijeli list preko cijelog ekrana (WP overlay:
   fokus zarobljen, Esc zatvara, aria-expanded), stavke Archivo 200 / 28 px, Services
   otvoren u mjestu (mono 12 px), na dnu REQUEST A QUOTE, telefon i e-mail.
   WP prikazuje gumb izbornika ispod 600 px. */
/* Sedam stavki (Charter, 17.10.) ne stane u jedan red ispod 1280 px. 1100-1279 i 1024-1099: stisnuto;
   ispod 1024 px izbornik s gumbom MENU kao na mobitelu (WP overlay inace se ukljucuje tek ispod 600 px). */
@media (min-width: 1100px) and (max-width: 1279px) {
	.td-header .wp-block-navigation { letter-spacing: .12em; }
	.td-header .wp-block-navigation__container { gap: 18px; }
	.td-header .td-nav-cta > .wp-block-navigation-item__content { padding-inline: 16px; }
}
@media (min-width: 1024px) and (max-width: 1099px) {
	.td-header .wp-block-navigation { font-size: 11px; letter-spacing: .12em; }
	.td-header .wp-block-navigation__container { gap: 16px; }
	.td-header .td-nav-cta > .wp-block-navigation-item__content { padding-inline: 14px; }
}
@media (min-width: 600px) and (max-width: 1023px) {
	.td-header .wp-block-navigation__responsive-container-open { display: inline-flex !important; }
	.td-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}

@media (max-width: 1023px) {

	.td-header,
	.td-header[data-td-scrolled] {
		padding: 6px 8px 6px 20px;
		border-block-end: 1px solid var(--wp--preset--color--line);
	}
	.td-header--dark:not([data-td-scrolled]) { border-block-end-color: transparent; }
	.page-template-page-dark .td-header--dark { border-block-end-color: #2A2A2A; }
	.td-header .td-logo img { height: 34px; }

	.td-header .wp-block-navigation__responsive-container-open,
	.td-header .wp-block-navigation__responsive-container-close {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 44px;
		padding: 0 12px;
		font-family: var(--wp--preset--font-family--mono);
		font-size: 11px;
		letter-spacing: .16em;
		text-transform: uppercase;
		color: inherit;
	}
	.td-header .wp-block-navigation__responsive-container-open::before { content: "Menu"; }
	.td-header .wp-block-navigation__responsive-container-close::before { content: "Close"; }
	.td-header .wp-block-navigation__responsive-container-open svg { width: 20px; height: 20px; }
	.td-header .wp-block-navigation__responsive-container-close svg { width: 18px; height: 18px; }

	/* list */
	.td-header .wp-block-navigation__responsive-container.is-menu-open {
		padding: 0;
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--ink);
	}
	.td-header .is-menu-open .wp-block-navigation__responsive-close,
	.td-header .is-menu-open .wp-block-navigation__responsive-dialog { height: 100%; }
	.td-header .is-menu-open .wp-block-navigation__responsive-dialog {
		display: flex;
		flex-direction: column;
		padding-block-start: 57px;
	}
	/* gornja traka lista: logo + CLOSE, ista kao header */
	.td-header .is-menu-open .wp-block-navigation__responsive-dialog::before {
		content: "";
		position: absolute;
		inset: 0 0 auto;
		height: 56px;
		border-block-end: 1px solid var(--wp--preset--color--line);
		background: url(assets/img/logo-black.png) no-repeat 20px 50% / auto 34px;
	}
	.td-header .is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: 6px;
		right: 8px;
		z-index: 1;
	}
	/* WP daje sadrzaju overlaya padding-top 56 px; dizajn ima 8 px ispod trake lista. */
	.td-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		flex: 1;
		padding: 8px 24px 24px;
		align-items: stretch;
		overflow-y: auto;
	}
	.td-header .is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: repeat(7, auto) 1fr auto;  /* 7 stavki od 17.10. (Charter) */
		gap: 0;
		width: 100%;
		min-height: 100%;
		align-items: stretch;
	}
	.td-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		grid-column: 1 / -1;
		display: block;
		border-block-end: 1px solid var(--wp--preset--color--line);
	}
	.td-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(7) { border: 0; }
	.td-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		min-height: 56px;
		padding: 0;
		font-family: var(--wp--preset--font-family--sans);
		font-weight: 200;
		font-size: 28px;
		letter-spacing: -.03em;
		text-transform: none;
		color: var(--wp--preset--color--ink);
	}
	.td-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(-n+2) > .wp-block-navigation-item__content { min-height: 60px; }
	.td-header .is-menu-open .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
	.td-header .is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content { color: var(--wp--preset--color--accent); }

	/* Services otvoren u mjestu */
	.td-header .is-menu-open .has-child { padding-block-end: 12px; }
	.td-header .is-menu-open .has-child .wp-block-navigation__submenu-icon { display: none; }
	.td-header .is-menu-open .wp-block-navigation__submenu-container {
		position: static;
		min-width: 0;
		padding: 0 !important;
		border: 0;
		background: none;
		gap: 0;
		align-items: stretch !important;
	}
	.td-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { align-items: flex-start; text-align: start; }
	.td-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		min-height: 36px;
		padding: 0 !important;
		font-family: var(--wp--preset--font-family--mono);
		font-size: 12px;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--wp--preset--color--ink);
	}

	/* dno lista: gumb, telefon, e-mail */
	.td-header .is-menu-open .wp-block-navigation__container > .td-nav-cta {
		align-self: end;
		margin: 0 -24px;
		padding: 16px 24px 14px;
		border-block-start: 1px solid var(--wp--preset--color--line);
		border-block-end: 0;
	}
	.td-header .is-menu-open .wp-block-navigation__container > .td-nav-cta > .wp-block-navigation-item__content {
		justify-content: center;
		min-height: 52px;
		margin: 0;
		padding: 0 20px;
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--base);
		font-family: var(--wp--preset--font-family--mono);
		font-weight: 400;
		font-size: 12px;
		letter-spacing: .16em;
		text-transform: uppercase;
	}
	.td-header .is-menu-open .td-nav-cta .wp-block-navigation-item__label::after { content: " →"; }
	.td-header .is-menu-open .wp-block-navigation__container > .td-nav-mob {
		display: block;
		grid-column: auto;
		border: 0;
	}
	.td-header .is-menu-open .wp-block-navigation__container > .td-nav-mob > .wp-block-navigation-item__content {
		min-height: 44px;
		font-weight: 400;
		font-size: 14px;
		letter-spacing: 0;
	}
	.td-header .is-menu-open .wp-block-navigation__container > .td-nav-mob:last-child > .wp-block-navigation-item__content { justify-content: flex-end; }
}

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

.td-footer {
	background: var(--wp--preset--color--surface-footer);
	color: var(--wp--preset--color--ink);
	border-top: 2px solid var(--wp--preset--color--ink);
	padding-block: clamp(34px, 5vw, 72px) clamp(20px, 2.4vw, 32px);
	padding-inline: var(--wp--preset--spacing--gutter);
}

/* Stupci idu 1 / 2 / 4, nikad 3 — na tri stupca cetvrti visi sam. */
.td-footer-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(28px, 4vw, 60px);
}

.td-footer-cols > * { margin-block-start: 0; }

@media (min-width: 620px) {
	.td-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cetiri jednaka stupca, kao na SiteFooter artboardu (255,2 px svaki, razmak
   57,6). Bilo je 1.35fr 1fr 1fr 1.15fr, bez obrazloženja — provjera lijevih
   rubova 02.10.2026. pokazala je da stupci 2, 3 i 4 pocinju 52, 23 i 6 px
   dalje nego u dizajnu. */
@media (min-width: 1080px) {
	.td-footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.td-footer .td-footer-logo {
	margin: 0;
	line-height: 0;
}

.td-footer .td-footer-logo img {
	display: block;
	height: 58px;
	width: auto;
	object-fit: contain;
}

.td-footer p {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.8;
	color: var(--wp--preset--color--text-body-2);
	text-wrap: pretty;
}

/* Naslovi stupaca su obični tekst, nikad heading — jedan od kvarova
   koje postojeći sajt ima i koji se ovdje ispravlja. */
.td-footer .td-col-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--cta);
	letter-spacing: var(--wp--custom--tracking--eyebrow-sub);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted-2);
	margin: 0;
}

.td-footer ul {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 11px;
	font-size: var(--wp--preset--font-size--small);
}

.td-footer ul a {
	color: var(--wp--preset--color--text-strong);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-underline-offset: .28em;
}

.td-footer .td-address {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.9;
	color: var(--wp--preset--color--text-strong);
}

/* SiteFooter.dc.html: telefon i e-mail su 15 px, adresa iznad 14,5. */
.td-footer .td-address p:last-child { font-size: 15px; line-height: 1.9; }

.td-footer .td-social a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--cta);
	letter-spacing: .14em;
	/* Akcent na #E8E5DE daje samo 3,97:1 i nakon tamnjenja, pa ovdje ide
	   tamni tekst. Jedino mjesto gdje akcent ustupa boju. */
	color: var(--wp--preset--color--text-strong);
	text-decoration: none;
	text-transform: uppercase;
}

/* Certifikati u vlastitom redu, copyright sam na dnu. Prije su bili
   stisnuti u isti red pa se brojevi lomili u logotipe. */
.td-footer .td-cert-row {
	display: flex;
	align-items: center;
	gap: clamp(18px, 3vw, 40px);
	flex-wrap: wrap;
	margin-top: clamp(26px, 3vw, 44px);
	padding-top: clamp(18px, 2vw, 26px);
	border-top: 1px solid var(--wp--preset--color--line-footer);
}

.td-footer .td-cert-row > * { margin-block-start: 0; }

.td-footer .td-footer-bottom {
	margin-top: clamp(16px, 2vw, 24px);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--cta);
	letter-spacing: .14em;
	color: var(--wp--preset--color--text-muted-2);
	text-transform: uppercase;
}

/* .td-footer p (0,1,1) je ovdje gazio veličinu i boju s retka, pa je
   copyright bio 14,5 px umjesto 12. Ista zamka kao kod .td-certs__caption. */
.td-footer .td-footer-bottom p {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.td-footer .td-footer-bottom a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .28em;
}

.td-footer .td-certs img {
	width: auto;
	object-fit: contain;
}

/* Natpis ispod marki. `.td-footer p` (0,1,1) je specificnijih od
   `.td-certs__caption` (0,1,0) iz patterns.css, pa je tihо gasio patternovu
   velicinu i tracking — 14,5 px umjesto 12. Ovo vraca patternu njegovo. */
.td-footer .td-certs__caption {
	font-size: var(--wp--preset--font-size--cta);
	letter-spacing: var(--wp--custom--tracking--caption);
	color: var(--wp--preset--color--text-muted-2);
	line-height: 1.8;
}

/* Obje marke na istu opticku visinu. Logotipi su trasirani iz rastera —
   pravi vektori jos nedostaju. */
.td-footer .td-certs .td-cert-sgs img { height: 46px; }
.td-footer .td-certs .td-cert-fsc img { height: 74px; }