/**
 * The WordPress adaptation layer.
 *
 * Loaded after theme.css. Everything in here either replaces CSS the Webflow
 * export inlined into its HTML, or styles output that only exists once the site
 * runs on WordPress (comments, pagination, alignment classes, form responses).
 *
 * Nothing in normalize.css, webflow.css or theme.css was modified — this is the
 * only stylesheet that is ours.
 */

/* -------------------------------------------------------------------------
 * 1. Interaction start states
 *
 * The export's home page carried an 8 KB inline <style> in <head> that hid every
 * element an interaction was about to animate in, listed one data-w-id at a time
 * — sixteen selectors per breakpoint, four breakpoints. Every one of those ids
 * belonged to either .services-arrow or .services-video-card, so two class
 * selectors do the same job, and they keep working when the services list is
 * edited rather than only covering the eight cards the design shipped with.
 * ---------------------------------------------------------------------- */

@media (min-width: 768px) {
	html.w-mod-js:not(.w-mod-ix) .services-arrow {
		opacity: 0;
	}

	html.w-mod-js:not(.w-mod-ix) .services-video-card {
		width: 0;
	}
}

@media (max-width: 767px) {
	html.w-mod-js:not(.w-mod-ix) .services-arrow {
		opacity: 0;
	}

	html.w-mod-js:not(.w-mod-ix) .services-video-card {
		width: 0;
		height: 0;
	}
}

/* -------------------------------------------------------------------------
 * 2. The scrolling call to action
 *
 * From the export's .cta-code embed.
 * ---------------------------------------------------------------------- */

.cta-curve {
	transform-origin: center;
	animation: tnc-rotate 20s linear infinite;
}

.cta-wrap {
	animation: tnc-marquee 30s linear infinite;
}

.cta-block:hover > .cta-wrap {
	animation-play-state: paused;
}

@keyframes tnc-rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes tnc-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

/**
 * The "Our Journey" marquee, from the export's .journey-code embed.
 *
 * Both embeds named their animation `scroll`, so on the about page — which
 * carries both — the second definition silently overrode the first and the
 * journey band scrolled with the call to action's distance instead of its own.
 * Naming them apart restores the intended `calc(-100% - 1rem)` offset.
 */
.journey-text {
	animation: tnc-journey-marquee 30s linear infinite;
}

.journey-loop:hover > .journey-text {
	animation-play-state: paused;
}

@keyframes tnc-journey-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-100% - 1rem));
	}
}

@media (prefers-reduced-motion: reduce) {
	.cta-curve,
	.cta-wrap,
	.journey-text {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
 * 3. Slider navigation dots
 *
 * From the export's .choose-embed embed. Applied to both sliders rather than
 * only the one the embed happened to sit inside.
 * ---------------------------------------------------------------------- */

.choose-slider .w-slider-dot,
.review-slider .w-slider-dot {
	width: 32px;
	height: 8px;
	margin: 0;
	background-color: #d9d9d9;
	border-radius: 0;
}

.choose-slider .w-slider-dot.w-active,
.review-slider .w-slider-dot.w-active {
	background-color: #ffa16f;
}

/* -------------------------------------------------------------------------
 * 4. Accessibility helpers
 * ---------------------------------------------------------------------- */

.tnc-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 1000000;
	padding: 12px 20px;
	background: #000;
	color: #fff;
	font-family: Inter, sans-serif;
	font-size: 14px;
	text-decoration: none;
	border-radius: 8px;
	transition: top 0.2s ease;
}

.tnc-skip-link:focus {
	top: 16px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* The forms' honeypot. Never shown, never announced, never tabbed to. */
.tnc-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid #4deba1;
	outline-offset: 3px;
}

.brands-card[role="button"] {
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * 5. Form responses
 *
 * Replaces Webflow's .w-form-done / .w-form-fail panels, which only appeared
 * after a successful POST to formdata.webflow.com.
 * ---------------------------------------------------------------------- */

.tnc-form-message {
	margin-top: 16px;
	padding: 14px 18px;
	font-family: Inter, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	border-radius: 10px;
}

.tnc-form-message:focus {
	outline: none;
}

.tnc-form-message.is-success {
	background-color: #e8fbf2;
	color: #10603c;
	border: 1px solid #4deba1;
}

.tnc-form-message.is-error {
	background-color: #fdeceb;
	color: #7a1f1a;
	border: 1px solid #f0a3a0;
}

/* -------------------------------------------------------------------------
 * 6. Post content
 *
 * The design styles article bodies through .details-* classes. These rules give
 * the same treatment to whatever the block editor emits, so writers do not have
 * to know the design's class names.
 * ---------------------------------------------------------------------- */

.tnc-entry-content > * {
	margin-bottom: 24px;
}

.tnc-entry-content > *:last-child {
	margin-bottom: 0;
}

.tnc-entry-content h2,
.tnc-entry-content h3,
.tnc-entry-content h4 {
	margin-top: 40px;
	margin-bottom: 16px;
	font-family: Archivo, sans-serif;
	font-weight: 600;
	line-height: 1.25;
}

.tnc-entry-content h2 {
	font-size: 32px;
}

.tnc-entry-content h3 {
	font-size: 24px;
}

.tnc-entry-content h4 {
	font-size: 20px;
}

.tnc-entry-content p,
.tnc-entry-content li {
	font-family: Inter, sans-serif;
	font-size: 18px;
	line-height: 1.7;
	color: #333;
}

.tnc-entry-content ul,
.tnc-entry-content ol {
	padding-left: 24px;
}

.tnc-entry-content li {
	margin-bottom: 8px;
}

.tnc-entry-content a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tnc-entry-content blockquote {
	margin-left: 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid #4deba1;
	font-style: italic;
}

.tnc-entry-content img,
.tnc-entry-content iframe,
.tnc-entry-content video {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.tnc-entry-content pre {
	padding: 20px;
	overflow-x: auto;
	background: #f5f5f4;
	border-radius: 12px;
	font-size: 14px;
}

.tnc-entry-content code {
	font-size: 0.9em;
}

.tnc-entry-content table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.tnc-entry-content th,
.tnc-entry-content td {
	padding: 10px 14px;
	border: 1px solid #e5e5e4;
	text-align: left;
}

/* Core alignment and caption classes. */
.alignleft {
	float: left;
	margin: 0 24px 16px 0;
}

.alignright {
	float: right;
	margin: 0 0 16px 24px;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignwide,
.alignfull {
	max-width: 100%;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.wp-element-caption,
figcaption {
	margin-top: 8px;
	font-family: Inter, sans-serif;
	font-size: 14px;
	color: #777;
}

.sticky,
.gallery-caption,
.bypostauthor {
	/* Required by the theme review guidelines; the design has no visual state for these. */
	display: block;
}

/* -------------------------------------------------------------------------
 * 7. Pagination and comments
 *
 * The design's .pagin-* classes cover the blog archive; these fill the gaps.
 * ---------------------------------------------------------------------- */

.tnc-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
	margin-top: 48px;
	font-family: Inter, sans-serif;
}

.tnc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid #e5e5e4;
	border-radius: 999px;
	color: #000;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.tnc-pagination .page-numbers:hover,
.tnc-pagination .page-numbers.current {
	background-color: #000;
	border-color: #000;
	color: #fff;
}

.tnc-pagination .page-numbers.dots {
	border-color: transparent;
}

.tnc-comments {
	max-width: 760px;
	margin: 64px auto 0;
	font-family: Inter, sans-serif;
}

.tnc-comments ol {
	list-style: none;
	padding: 0;
}

.tnc-comments .children {
	padding-left: 32px;
}

.tnc-comments .comment-body {
	padding: 24px 0;
	border-bottom: 1px solid #e5e5e4;
}

.tnc-comments .comment-meta {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 12px;
	font-size: 14px;
	color: #777;
}

.tnc-comments .avatar {
	border-radius: 50%;
}

.tnc-comments input[type="text"],
.tnc-comments input[type="email"],
.tnc-comments input[type="url"],
.tnc-comments textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #e5e5e4;
	border-radius: 10px;
	font: inherit;
}

.tnc-comments .submit {
	padding: 14px 28px;
	background: #000;
	color: #fff;
	border: 0;
	border-radius: 999px;
	font: inherit;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * 8. Admin bar
 *
 * .page-wrapper sets z-index: 999999, which is above the admin bar's 99999 and
 * would paint over it. It is a static, non-positioned stacking context in the
 * design, so lowering it changes nothing on the front end.
 * ---------------------------------------------------------------------- */

body.admin-bar .page-wrapper {
	z-index: 1;
}

/* -------------------------------------------------------------------------
 * 9. The talent-pool photo marquee
 *
 * From the export's .pool-code embed. This was the third block to define
 * @keyframes scroll under that name — see the note on the journey marquee above.
 * ---------------------------------------------------------------------- */

.pool-card {
	animation: tnc-pool-marquee 60s linear infinite;
}

.pool-card-block:hover > .pool-card {
	animation-play-state: paused;
}

@keyframes tnc-pool-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-100% - 1rem));
	}
}

@media (prefers-reduced-motion: reduce) {
	.pool-card {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
 * 10. Webflow CDN placeholders
 *
 * theme.css is kept byte-identical to the export, and three of its rules carry
 * `background-image: url(https://d3e54v103j8qbb.cloudfront.net/...)` — Webflow's
 * stock placeholder for an unfilled background slot:
 *
 *   .theme-card            every colour variant overrides it with a local image,
 *                          so it only fires if a card has no colour set
 *   .touch-field           every modifier (.user, .envelop, .location,
 *                          .touch-area) overrides it with a local icon, so it
 *                          only fires on an unmodified field
 *   .w-embed-youtubevideo  fires on any YouTube embed in article content
 *
 * Overriding them here removes the last third-party asset requests from the
 * front end without editing the exported stylesheet.
 * ---------------------------------------------------------------------- */

.theme-card,
.touch-field,
.w-embed-youtubevideo {
	background-image: none;
}

/* Re-apply the design's own values, which the rule above would otherwise flatten. */
.theme-card.orange-theme {
	background-image: url("../images/Orange-BG.webp");
}

.theme-card.green-theme {
	background-image: url("../images/Green-BG.webp");
}

.theme-card.pink-theme {
	background-image: url("../images/Pink-BG.webp");
}

.theme-card.yellow-theme {
	background-image: url("../images/Yellow-BG.webp");
}

.touch-field.user {
	background-image: url("../images/User.svg");
}

.touch-field.envelop {
	background-image: url("../images/Envelop.svg");
}

.touch-field.location {
	background-image: url("../images/Location.svg");
}

.touch-field.touch-area {
	background-image: url("../images/Pen.svg");
}

/* -------------------------------------------------------------------------
 * 11. Password-protected content
 *
 * WordPress's equivalent of the export's 401.html. The form reuses the contact
 * page's field styling, so this only needs to give the block room to breathe
 * inside an article or page column.
 * ---------------------------------------------------------------------- */

.tnc-password-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 480px;
	margin: 32px 0;
}

.tnc-password-form .touch-form {
	gap: 20px;
}

.tnc-password-form .footer-btn {
	align-self: flex-start;
}
