/*
Theme Name: Truenso
Theme URI: https://truenso.com
Author: Truenso
Author URI: https://truenso.com
Description: Block theme built from the Truenso Figma design. Coral and ink palette, pill buttons, card-based sections.
Version: 1.5.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: truenso
Tags: blog, one-column, block-patterns, full-site-editing, wide-blocks, custom-colors, custom-logo, custom-menu
*/

/* ---- Pill buttons with arrow badge ---- */
.wp-element-button,
.wp-block-button__link {
	font-weight: 600;
	letter-spacing: -0.01em;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	opacity: 0.92;
}

.is-style-arrow .wp-block-button__link::after,
.wp-block-button.is-style-arrow .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 34px;
	height: 34px;
	margin-left: 14px;
	margin-right: -14px;
	vertical-align: middle;
	border-radius: 999px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231F1F24' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* ---- Eyebrow labels (OUR EXPERTISE / SERVICES / LET'S BUILD) ---- */
.truenso-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
}

/* ---- Checklist rows ---- */
.truenso-check ul,
ul.truenso-check {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.truenso-check li {
	position: relative;
	padding-left: 34px;
	margin-bottom: 14px;
	line-height: 1.5;
}

.truenso-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background-color: #1f1f24;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.truenso-check-coral li::before {
	background-color: #eb5951;
}

/* ---- Cards ---- */
.truenso-card {
	height: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.truenso-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(31, 31, 36, 0.08);
}

/* ---- Highlighted words ---- */
.wp-block-heading mark {
	padding: 0.02em 0.16em;
	border-radius: 4px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Outlined pill words in the dark section */
.truenso-dark .wp-block-heading mark {
	padding: 0.05em 0.5em;
	border: 2px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	background-color: transparent;
}

/* ---- Anchor navigation ---- */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Stop anchored sections hiding under the sticky header */
#expertise,
#approach,
#about,
#services,
#contact {
	scroll-margin-top: 100px;
}

/* ---- Sticky header ----
   Delete this whole block if you prefer the header to scroll away. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: blur(10px);
	background-color: rgba(255, 255, 255, 0.88);
}

/* Mark the section you are currently reading */
.wp-block-navigation .current-menu-item > a {
	color: #eb5951;
}

/* ---- Header ---- */
.wp-block-navigation a:where(:not(.wp-element-button)) {
	text-decoration: none;
	font-weight: 500;
}

.wp-block-navigation a:where(:not(.wp-element-button)):hover {
	color: #eb5951;
}

/* ---- Dark section form fields ---- */
.truenso-dark input[type="text"],
.truenso-dark input[type="email"],
.truenso-dark textarea {
	width: 100%;
	background: #2b2b32;
	border: 1px solid #3a3a43;
	border-radius: 16px;
	padding: 20px 26px;
	color: #fff;
	font-size: 16px;
	font-family: inherit;
}

.truenso-dark input::placeholder,
.truenso-dark textarea::placeholder {
	color: #8c8c98;
}

/* ---- Accessibility floor ---- */
:where(a, button, input, textarea, .wp-block-button__link):focus-visible {
	outline: 3px solid #eb5951;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---- Mobile ---- */
@media (max-width: 781px) {
	.truenso-hero-media {
		margin-top: 32px;
	}
}