/* =============================================================
   TopTier — Components
   Buttons, inputs, cards, accordions, header, footer, etc.
   ============================================================= */

/* ===== Buttons ===== */
.tt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 24px;
	font-size: var(--tt-fs-sm);
	font-weight: 600;
	letter-spacing: -0.005em;
	border-radius: var(--tt-r-md);
	line-height: 1;
	transition: all var(--tt-t-fast) var(--tt-ease);
	position: relative;
	white-space: nowrap;
	user-select: none;
}

.tt-btn--primary {
	background: var(--tt-blue-500);
	color: #fff;
	box-shadow: 0 4px 14px rgba(30, 94, 255, 0.32);
}
.tt-btn--primary:hover {
	background: var(--tt-blue-600);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(30, 94, 255, 0.38);
}
.tt-btn--primary:active { transform: translateY(0); }

.tt-btn--ghost {
	background: transparent;
	color: var(--tt-ink-900);
	border: 1px solid var(--tt-ink-200);
}
.tt-btn--ghost:hover {
	border-color: var(--tt-ink-900);
	color: var(--tt-ink-900);
}

.tt-btn--dark {
	background: var(--tt-ink-900);
	color: #fff;
}
.tt-btn--dark:hover { background: var(--tt-ink-800); color: #fff; }

.tt-btn--light {
	background: #fff;
	color: var(--tt-ink-900);
	box-shadow: var(--tt-shadow-md);
}
.tt-btn--light:hover { color: var(--tt-ink-900); box-shadow: var(--tt-shadow-lg); }

.tt-btn--link {
	padding: 0;
	background: transparent;
	color: var(--tt-blue-600);
	font-weight: 600;
}
.tt-btn--link::after {
	content: '→';
	transition: transform var(--tt-t-fast) var(--tt-ease);
}
.tt-btn--link:hover::after { transform: translateX(4px); }

.tt-btn--lg { padding: 18px 32px; font-size: var(--tt-fs-base); }
.tt-btn--sm { padding: 10px 16px; font-size: var(--tt-fs-xs); }
.tt-btn--block { width: 100%; }

.tt-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ===== Badges / tags ===== */
.tt-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	font-size: var(--tt-fs-xs);
	font-weight: 600;
	border-radius: var(--tt-r-pill);
	background: var(--tt-blue-50);
	color: var(--tt-blue-700);
	letter-spacing: 0.02em;
}
.tt-badge--neutral { background: var(--tt-ink-100); color: var(--tt-ink-700); }
.tt-badge--dark    { background: rgba(255,255,255,0.1); color: #fff; }

/* ===== Cards ===== */
.tt-card {
	background: #fff;
	border: var(--tt-border);
	border-radius: var(--tt-r-lg);
	padding: var(--tt-space-5);
	transition: border-color var(--tt-t-med) var(--tt-ease),
	            box-shadow var(--tt-t-med) var(--tt-ease),
	            transform var(--tt-t-med) var(--tt-ease);
}
.tt-card:hover {
	border-color: var(--tt-ink-200);
	box-shadow: var(--tt-shadow-lg);
	transform: translateY(-2px);
}
.tt-card--flat:hover { transform: none; box-shadow: var(--tt-shadow-sm); }
.tt-card--dark {
	background: var(--tt-ink-800);
	border-color: var(--tt-ink-700);
	color: var(--tt-ink-100);
}
.tt-card--dark:hover { border-color: var(--tt-ink-500); }

.tt-card__title {
	font-family: var(--tt-font-display);
	font-size: var(--tt-fs-lg);
	font-weight: 500;
	color: var(--tt-ink-900);
	margin-bottom: 8px;
	line-height: 1.25;
}
.tt-card--dark .tt-card__title { color: #fff; }

.tt-card__meta {
	display: flex; gap: 12px; flex-wrap: wrap;
	font-size: var(--tt-fs-sm);
	color: var(--tt-ink-500);
	margin-top: 12px;
}

.tt-card__icon {
	width: 48px; height: 48px;
	display: grid; place-items: center;
	border-radius: var(--tt-r-md);
	background: var(--tt-blue-50);
	color: var(--tt-blue-600);
	margin-bottom: var(--tt-space-4);
}

.tt-card__media {
	margin: calc(var(--tt-space-5) * -1);
	margin-bottom: var(--tt-space-5);
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--tt-r-lg) var(--tt-r-lg) 0 0;
	background: var(--tt-ink-50);
}
.tt-card__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform var(--tt-t-slow) var(--tt-ease);
}
.tt-card:hover .tt-card__media img { transform: scale(1.04); }

/* Option card used in multi-step hire form */
.tt-option {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px;
	border: 1.5px solid var(--tt-ink-100);
	border-radius: var(--tt-r-md);
	background: #fff;
	cursor: pointer;
	transition: all var(--tt-t-fast) var(--tt-ease);
	text-align: left;
}
.tt-option:hover { border-color: var(--tt-blue-300); background: var(--tt-blue-50); }
.tt-option.is-selected {
	border-color: var(--tt-blue-500);
	background: var(--tt-blue-50);
	box-shadow: 0 0 0 3px rgba(30, 94, 255, 0.15);
}
.tt-option__icon {
	flex: 0 0 40px;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border-radius: 10px;
	background: var(--tt-blue-50);
	color: var(--tt-blue-600);
}
.tt-option.is-selected .tt-option__icon {
	background: var(--tt-blue-500);
	color: #fff;
}
.tt-option__label {
	font-weight: 600;
	color: var(--tt-ink-900);
	font-size: var(--tt-fs-base);
	display: block;
	margin-bottom: 4px;
}
.tt-option__desc {
	color: var(--tt-ink-500);
	font-size: var(--tt-fs-sm);
	line-height: 1.5;
}

/* ===== Form controls ===== */
.tt-field { display: block; margin-bottom: var(--tt-space-4); }
.tt-field__label {
	display: block;
	font-size: var(--tt-fs-sm);
	font-weight: 600;
	color: var(--tt-ink-700);
	margin-bottom: 6px;
}
.tt-field__hint { font-size: var(--tt-fs-xs); color: var(--tt-ink-500); margin-top: 6px; }
.tt-field__error { font-size: var(--tt-fs-xs); color: var(--tt-danger); margin-top: 6px; display: none; }
.tt-field.has-error .tt-field__error { display: block; }
.tt-field.has-error .tt-input,
.tt-field.has-error .tt-textarea,
.tt-field.has-error .tt-select { border-color: var(--tt-danger); }

.tt-input, .tt-textarea, .tt-select {
	width: 100%;
	padding: 13px 16px;
	background: #fff;
	border: 1.5px solid var(--tt-ink-100);
	border-radius: var(--tt-r-md);
	color: var(--tt-ink-900);
	font-size: var(--tt-fs-base);
	transition: border-color var(--tt-t-fast) var(--tt-ease),
	            box-shadow var(--tt-t-fast) var(--tt-ease);
	line-height: 1.4;
}
.tt-input:hover, .tt-textarea:hover, .tt-select:hover { border-color: var(--tt-ink-200); }
.tt-input:focus, .tt-textarea:focus, .tt-select:focus { border-color: var(--tt-blue-500); box-shadow: var(--tt-shadow-focus); }
.tt-input::placeholder, .tt-textarea::placeholder { color: var(--tt-ink-400); }
.tt-textarea { resize: vertical; min-height: 120px; }

.tt-search {
	position: relative;
	max-width: 560px;
}
.tt-search .tt-input {
	padding-left: 48px;
	background: #fff;
}
.tt-search__icon {
	position: absolute;
	left: 16px; top: 50%; transform: translateY(-50%);
	color: var(--tt-ink-400);
	pointer-events: none;
}

/* ===== Accordion ===== */
.tt-accordion__item {
	border-bottom: var(--tt-border);
}
.tt-accordion__trigger {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding: 24px 0;
	font-size: var(--tt-fs-lg);
	font-weight: 500;
	color: var(--tt-ink-900);
	text-align: left;
	font-family: var(--tt-font-display);
	line-height: 1.3;
	transition: color var(--tt-t-fast) var(--tt-ease);
}
.tt-accordion__trigger:hover { color: var(--tt-blue-600); }
.tt-accordion__icon {
	flex-shrink: 0;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border: 1.5px solid var(--tt-ink-100);
	border-radius: 50%;
	transition: all var(--tt-t-fast) var(--tt-ease);
}
.tt-accordion__icon::before,
.tt-accordion__icon::after {
	content: ''; position: absolute;
	background: currentColor;
	transition: transform var(--tt-t-med) var(--tt-ease);
}
.tt-accordion__icon::before { width: 14px; height: 1.5px; }
.tt-accordion__icon::after  { width: 1.5px; height: 14px; }
.tt-accordion__item[open] .tt-accordion__icon {
	background: var(--tt-blue-500);
	border-color: var(--tt-blue-500);
	color: #fff;
}
.tt-accordion__item[open] .tt-accordion__icon::after { transform: scaleY(0); }
.tt-accordion__content {
	padding: 0 0 24px;
	max-width: 70ch;
	color: var(--tt-ink-700);
	line-height: 1.7;
}

/* ===== Tabs / anchor subnav ===== */
.tt-subnav {
	position: sticky;
	top: 68px;
	z-index: 40;
	background: rgba(255,255,255,0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: var(--tt-border);
}
.tt-subnav__inner {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
}
.tt-subnav__inner::-webkit-scrollbar { display: none; }
.tt-subnav__link {
	padding: 18px 4px;
	margin-right: 24px;
	font-size: var(--tt-fs-sm);
	font-weight: 600;
	color: var(--tt-ink-500);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color var(--tt-t-fast) var(--tt-ease), border-color var(--tt-t-fast) var(--tt-ease);
}
.tt-subnav__link:hover { color: var(--tt-ink-900); }
.tt-subnav__link.is-active {
	color: var(--tt-ink-900);
	border-color: var(--tt-blue-500);
}

/* ===== Header ===== */
.tt-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(10, 22, 40, 0.06);
}
.tt-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 72px;
	width: 100%;
	max-width: 100%;
}
.tt-header__logo {
	font-family: var(--tt-font-display);
	font-weight: 600;
	font-size: 1.4rem;
	letter-spacing: -0.02em;
	color: var(--tt-ink-900);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	min-width: 0;
}
/* Logo image — handle both direct img and WP's wrapper */
.tt-header__logo img,
.tt-header__logo .custom-logo {
	max-height: 36px !important;
	width: auto !important;
	height: auto;
}
/* WordPress wraps custom logos in an anchor — neutralize it */
.tt-header__logo .custom-logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.tt-header__nav {
	display: flex;
	align-items: center;
	gap: 36px;
	flex: 1;
	justify-content: center;
}
.tt-header__nav a {
	font-size: var(--tt-fs-sm);
	font-weight: 500;
	color: var(--tt-ink-700);
	position: relative;
	white-space: nowrap;
}
.tt-header__nav a:hover { color: var(--tt-ink-900); }
.tt-header__nav a.is-active { color: var(--tt-ink-900); }
.tt-header__nav a.is-active::after {
	content: ''; position: absolute;
	bottom: -24px; left: 0; right: 0;
	height: 2px; background: var(--tt-blue-500);
}

.tt-header__actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-shrink: 0;
}

/* Hamburger — hidden on desktop */
.tt-header__burger {
	display: none;
	width: 44px; height: 44px;
	border-radius: 10px;
	border: 1.5px solid var(--tt-ink-100);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 0;
	background: #fff;
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
	position: relative;
	z-index: 110;
	flex-shrink: 0;
}
.tt-header__burger span {
	display: block;
	width: 20px; height: 2px;
	background: var(--tt-ink-900);
	border-radius: 1px;
	transition: transform var(--tt-t-fast) var(--tt-ease), opacity var(--tt-t-fast) var(--tt-ease);
	transform-origin: center;
}
.tt-header.is-open .tt-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tt-header.is-open .tt-header__burger span:nth-child(2) { opacity: 0; }
.tt-header.is-open .tt-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile CTA container — hidden on desktop */
.tt-header__mobile-cta { display: none; }

/* ========= MOBILE ========= */
@media (max-width: 1024px) {
	.tt-header {
		position: sticky;
		top: 0;
		z-index: 999;
	}
	.tt-header__inner {
		justify-content: space-between;
		gap: 12px;
	}
	/* Hide desktop nav + desktop CTA buttons */
	.tt-header__nav {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		padding: 0;
		background: #fff;
		align-items: stretch;
		z-index: 999;
		max-height: calc(100vh - 72px);
		overflow-y: auto;
		box-shadow: 0 16px 40px rgba(0,0,0,0.12);
		border-bottom: 1px solid var(--tt-ink-100);
		transition: opacity 0.2s ease, visibility 0.2s ease;
		pointer-events: none;
	}
	.tt-header__actions .tt-btn { display: none; }
	.tt-header__burger { display: flex; }

	/* Open state */
	.tt-header.is-open .tt-header__nav {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}
	.tt-header.is-open .tt-header__nav > a,
	.tt-header__nav > a {
		display: block;
		padding: 20px 24px;
		border-bottom: 1px solid var(--tt-ink-100);
		font-size: var(--tt-fs-md);
		font-weight: 500;
		color: var(--tt-ink-900);
		text-align: left;
	}
	.tt-header__nav > a.is-active::after { display: none; }
	.tt-header__nav > a:hover,
	.tt-header__nav > a:active {
		background: var(--tt-ink-50);
		color: var(--tt-blue-600);
	}

	/* Mobile CTAs — inside nav */
	.tt-header__mobile-cta {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 24px;
		background: var(--tt-ink-50);
		border-top: 1px solid var(--tt-ink-100);
	}
	.tt-header__mobile-cta .tt-btn {
		width: 100%;
		justify-content: center;
		padding: 16px 24px;
		font-size: var(--tt-fs-base);
	}

	/* Prevent body scroll when menu open */
	body.has-menu-open { overflow: hidden; }
}



/* ===== Language switcher ===== */
.tt-lang-switcher {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--tt-ink-100);
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 8px 22px rgba(10, 22, 40, 0.04);
}
.tt-lang-switcher a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 32px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: var(--tt-fs-xs);
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--tt-ink-600);
}
.tt-lang-switcher a:hover { color: var(--tt-ink-900); background: var(--tt-ink-50); }
.tt-lang-switcher a.is-active { background: var(--tt-ink-900); color: #fff; }
.tt-lang-switcher a.is-active::after { display: none; }
.tt-header__mobile-cta .tt-lang-switcher { justify-content: center; margin-bottom: 8px; }

/* ===== Cookie banner ===== */
.tt-cookie-banner {
	position: fixed;
	left: 24px;
	right: 24px;
	bottom: 24px;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: 960px;
	margin: 0 auto;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid rgba(10, 22, 40, 0.12);
	border-radius: var(--tt-r-lg);
	box-shadow: 0 20px 60px rgba(10, 22, 40, 0.18);
}
.tt-cookie-banner[hidden] { display: none; }
.tt-cookie-banner strong { color: var(--tt-ink-900); }
.tt-cookie-banner p {
	margin: 4px 0 0;
	font-size: var(--tt-fs-sm);
	color: var(--tt-ink-600);
	line-height: 1.55;
}
.tt-cookie-banner__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	flex-shrink: 0;
}
.tt-cookie-banner__actions a,
.tt-cookie-banner__actions button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 10px 14px;
	border-radius: 999px;
	border: 1px solid var(--tt-ink-100);
	background: #fff;
	color: var(--tt-ink-800);
	font-size: var(--tt-fs-xs);
	font-weight: 700;
	cursor: pointer;
}
.tt-cookie-banner__actions button[data-cookie-choice="accept"] {
	background: var(--tt-ink-900);
	border-color: var(--tt-ink-900);
	color: #fff;
}
@media (max-width: 1024px) {
	.tt-header__actions { gap: 8px; }
	.tt-header__actions .tt-lang-switcher { display: inline-flex; }
}
@media (max-width: 720px) {
	.tt-cookie-banner { flex-direction: column; align-items: flex-start; left: 16px; right: 16px; bottom: 16px; }
	.tt-cookie-banner__actions { width: 100%; }
	.tt-cookie-banner__actions a,
	.tt-cookie-banner__actions button { flex: 1 1 auto; }
}
@media (max-width: 420px) {
	.tt-header__actions .tt-lang-switcher a { min-width: 30px; padding: 0 8px; }
}

/* ===== Footer ===== */
.tt-footer {
	background: var(--tt-ink-900);
	color: var(--tt-ink-200);
	padding: var(--tt-space-9) 0 var(--tt-space-6);
}
.tt-footer__top {
	display: grid;
	grid-template-columns: 1.2fr repeat(3, 1fr);
	gap: var(--tt-space-6);
	padding-bottom: var(--tt-space-7);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tt-footer__col h6 {
	color: #fff;
	font-size: var(--tt-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 20px;
}
.tt-footer__col a {
	display: block;
	padding: 6px 0;
	font-size: var(--tt-fs-sm);
	color: var(--tt-ink-300);
}
.tt-footer__col a:hover { color: #fff; }
.tt-footer__brand {
	font-family: var(--tt-font-display);
	font-size: 1.4rem;
	font-weight: 600;
	color: #fff;
	margin-bottom: 16px;
	display: inline-flex; align-items: center; gap: 8px;
}
.tt-footer__tag { font-size: var(--tt-fs-sm); color: var(--tt-ink-300); max-width: 36ch; }
.tt-footer__bottom {
	display: flex; justify-content: space-between; align-items: center;
	padding-top: var(--tt-space-5);
	font-size: var(--tt-fs-xs);
	color: var(--tt-ink-400);
	flex-wrap: wrap; gap: 16px;
}
.tt-footer__legal { display: flex; gap: 24px; }
.tt-footer__legal a { color: var(--tt-ink-400); }
.tt-footer__legal a:hover { color: #fff; }

@media (max-width: 900px) {
	.tt-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.tt-footer__top { grid-template-columns: 1fr; }
}

/* ===== Notifications (form success/error) ===== */
.tt-notice {
	padding: 16px 20px;
	border-radius: var(--tt-r-md);
	font-size: var(--tt-fs-sm);
	border: 1px solid transparent;
	display: flex; align-items: flex-start; gap: 12px;
}
.tt-notice--success {
	background: #E9F8EF;
	color: #055E3B;
	border-color: #BCE3CC;
}
.tt-notice--error {
	background: #FEEAEA;
	color: #8E1D1D;
	border-color: #F2C2C2;
}