/**
 * Structural styles for the Hire Fixer Nepal blocks.
 *
 * This file owns layout only. Grid tracks, gaps, ratios, list resets. Every colour,
 * font size, radius and shadow comes from the theme's `theme.json` custom properties,
 * so the plugin never dictates the design and the theme can restyle a block without
 * touching the plugin.
 *
 * Fallback values are supplied for every custom property so the blocks still lay out
 * sensibly under a third-party theme that does not define the Hire Fixer tokens.
 */

/* -------------------------------------------------------------------------- */
/* Grid                                                                       */
/* -------------------------------------------------------------------------- */

.hfn-grid {
	display: grid;
	gap: var(--wp--preset--spacing--50, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {

	.hfn-grid--2,
	.hfn-grid--3,
	.hfn-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {

	.hfn-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hfn-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------- */
/* Cards                                                                      */
/* -------------------------------------------------------------------------- */

.hfn-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 0.75rem);
	min-width: 0;
	padding: 32px 28px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	background: #121212;
	transition: all 0.25s ease;
}

.hfn-card:hover {
	border-color: rgba(255, 230, 0, 0.4);
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 230, 0, 0.08);
}

.hfn-card__content {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 0.5rem);
}

.hfn-card__title {
	margin: 0;
	font-family: 'Outfit', sans-serif;
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: #FFFFFF;
	line-height: 1.3;
}

.hfn-card__link {
	color: #FFFFFF;
	text-decoration: none;
	transition: color 0.2s ease;
}

.hfn-card__link:hover {
	color: #FFE600;
}

.hfn-card__eyebrow {
	margin: 0;
	color: #FFE600;
	font-family: 'Outfit', sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hfn-card__text {
	margin: 0;
	color: #A1A1AA;
	font-size: 14.5px;
	line-height: 1.6;
}

.hfn-card__cta {
	margin-top: auto;
	font-family: 'Outfit', sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #A1A1AA;
	transition: color 0.2s ease;
}

.hfn-card:hover .hfn-card__cta {
	color: #FFE600;
}

.hfn-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #1A1A1A;
	border: 1px solid rgba(255, 230, 0, 0.35);
	color: #FFE600;
	flex: none;
}

.hfn-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--20, 0.5rem);
	margin: 0;
	padding: 0;
	color: var(--wp--preset--color--muted, #B9B2C9);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	list-style: none;
}

/* A separator that is decorative, so it is generated rather than typed into content. */
.hfn-card__facts li + li::before {
	content: "·";
	margin-inline-end: var(--wp--preset--spacing--20, 0.5rem);
}

.hfn-card__contact {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

/* -------------------------------------------------------------------------- */
/* Media ratios                                                               */
/* -------------------------------------------------------------------------- */

/* A declared ratio reserves the space before the image loads, which is what keeps
   cumulative layout shift at zero in a grid of cards. */
.hfn-ratio {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md, 6px);
	background-color: var(--wp--custom--line, rgb(255 255 255 / 9%));
}

.hfn-ratio img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hfn-ratio--16-9 { aspect-ratio: 16 / 9; }

.hfn-ratio--4-3 { aspect-ratio: 4 / 3; }

.hfn-ratio--3-2 { aspect-ratio: 3 / 2; }

.hfn-ratio--1-1 { aspect-ratio: 1 / 1; }

.hfn-ratio--3-4 { aspect-ratio: 3 / 4; }

.hfn-ratio--21-9 { aspect-ratio: 21 / 9; }

/* -------------------------------------------------------------------------- */
/* Media placeholders                                                         */
/* -------------------------------------------------------------------------- */

/*
 * Drawn wherever an image belongs but none has been uploaded yet. It occupies the same
 * box the real photograph will occupy, so swapping the picture in later shifts nothing.
 *
 * It is deliberately quiet: a faint panel and a line icon. Anything more decorative
 * starts to read as intentional artwork, and the point is that something is missing.
 */
.hfn-media-placeholder {
	display: flex;

	/*
	 * Inline-size rather than size containment. Size containment would make the box
	 * ignore its own contents for layout, and a placeholder that lost its aspect-ratio
	 * for any reason would then collapse to nothing, which is the exact failure this
	 * component exists to prevent.
	 */
	container-type: inline-size;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem;
	border: 1px dashed var(--wp--custom--line-strong, rgb(255 255 255 / 16%));
	background-color: var(--wp--custom--glass, rgb(255 255 255 / 3.5%));
	color: var(--wp--preset--color--dim, #8A8399);
	text-align: center;
}

.hfn-media-placeholder__icon {
	width: 2rem;
	height: 2rem;
	flex: none;
	opacity: 0.75;
}

/* Portraits and logos sit in smaller boxes, so the icon scales down with them. */
.hfn-media-placeholder--portrait .hfn-media-placeholder__icon,
.hfn-media-placeholder--logo .hfn-media-placeholder__icon {
	width: 1.75rem;
	height: 1.75rem;
}

.hfn-media-placeholder__label {
	max-width: 22ch;
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	line-height: 1.35;
}

/* In a narrow box the label would crowd the icon out entirely, so it is dropped and the
   icon alone carries the message. */
@container (max-width: 12rem) {

	.hfn-media-placeholder__label {
		display: none;
	}
}

/* -------------------------------------------------------------------------- */
/* Definition lists                                                           */
/* -------------------------------------------------------------------------- */

.hfn-facts__list,
.hfn-card__meta {
	display: grid;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	margin: 0;
}

.hfn-definition {
	display: grid;
	gap: 0.125rem;
}

@media (min-width: 40rem) {

	.hfn-facts__list .hfn-definition {
		grid-template-columns: minmax(8rem, 14rem) 1fr;
		gap: var(--wp--preset--spacing--30, 0.75rem);
		align-items: baseline;
		padding-block: var(--wp--preset--spacing--20, 0.5rem);
		border-bottom: 1px solid var(--wp--custom--line, rgb(255 255 255 / 9%));
	}
}

.hfn-definition dt {
	color: var(--wp--preset--color--muted, #B9B2C9);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 600;
}

.hfn-definition dd {
	margin: 0;
}

.hfn-facts__review {
	margin-block-start: var(--wp--preset--spacing--40, 1rem);
	color: var(--wp--preset--color--muted, #B9B2C9);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.hfn-facts__map {
	margin-block-start: var(--wp--preset--spacing--30, 0.75rem);
}

/* -------------------------------------------------------------------------- */
/* Section headings                                                           */
/* -------------------------------------------------------------------------- */

.hfn-section__heading {
	margin-block: 0 var(--wp--preset--spacing--40, 1rem);
}

/* -------------------------------------------------------------------------- */
/* Contact card                                                               */
/* -------------------------------------------------------------------------- */

.hfn-contact-card__list {
	display: grid;
	gap: var(--wp--preset--spacing--30, 0.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hfn-contact-card__row {
	display: grid;
	gap: 0.125rem;
}

.hfn-contact-card__label {
	color: var(--wp--preset--color--muted, #B9B2C9);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 600;
}

.hfn-contact-card__value {
	font-style: normal;
}

/* -------------------------------------------------------------------------- */
/* Process steps                                                              */
/* -------------------------------------------------------------------------- */

.hfn-process__list {
	display: grid;
	gap: var(--wp--preset--spacing--50, 1.5rem);
	margin: 0;
	padding: 0;
	counter-reset: hfn-step;
	list-style: none;
}

@media (min-width: 48rem) {

	.hfn-process__list {
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	}
}

.hfn-process__item {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	counter-increment: hfn-step;
}

/* The number is generated from the list position, so reordering steps in the editor
   cannot leave a stale hard-typed number behind. It is decorative, the ordered list
   already conveys sequence to assistive technology. */
.hfn-process--numbered .hfn-process__item::before {
	content: counter(hfn-step);
	display: flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary, #F59E0B);
	color: #fff;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 700;
}

.hfn-process__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--md, 1.125rem);
}

.hfn-process__description {
	margin: 0;
	color: var(--wp--preset--color--muted, #B9B2C9);
}

/* -------------------------------------------------------------------------- */
/* Trust bar                                                                  */
/* -------------------------------------------------------------------------- */

.hfn-trust__list {
	display: grid;
	gap: var(--wp--preset--spacing--40, 1rem);
	margin: 0;
	padding: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
}

@media (min-width: 48rem) {

	.hfn-trust--3 .hfn-trust__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.hfn-trust--4 .hfn-trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.hfn-trust--5 .hfn-trust__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }

	.hfn-trust--6 .hfn-trust__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.hfn-trust__item {
	display: grid;
	gap: 0.125rem;
}

.hfn-trust__value {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg, 1.5rem);
	font-weight: 700;
	line-height: 1.1;
}

.hfn-trust__label {
	margin: 0;
	color: var(--wp--preset--color--muted, #B9B2C9);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

/* -------------------------------------------------------------------------- */
/* Testimonials                                                               */
/* -------------------------------------------------------------------------- */

.hfn-testimonials__list {
	display: grid;
	gap: var(--wp--preset--spacing--50, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {

	.hfn-testimonials--grid .hfn-testimonials__list {
		grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	}
}

.hfn-testimonial {
	display: flex;
	height: 100%;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 0.75rem);
	margin: 0;
}

.hfn-testimonial__quote {
	margin: 0;
	font-size: var(--wp--preset--font-size--md, 1.125rem);
	line-height: 1.55;
}

.hfn-testimonial__quote p {
	margin: 0;
}

.hfn-testimonial__attribution {
	margin-top: auto;
	color: var(--wp--preset--color--muted, #B9B2C9);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.hfn-testimonials__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30, 0.75rem);
	margin-block-start: var(--wp--preset--spacing--40, 1rem);
}

.hfn-testimonials__button {
	display: flex;
	/* 44px minimum: WCAG 2.2 target size. */
	min-width: 2.75rem;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--wp--custom--line, rgb(255 255 255 / 9%));
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.hfn-testimonials__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #F59E0B);
	outline-offset: 2px;
}

.hfn-testimonials__status {
	margin: 0;
	color: var(--wp--preset--color--muted, #B9B2C9);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------- */
/* Breadcrumbs                                                                */
/* -------------------------------------------------------------------------- */

.hfn-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--wp--preset--spacing--20, 0.5rem);
	margin: 0;
	padding: 0;
	color: var(--wp--preset--color--muted, #B9B2C9);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	list-style: none;
}

.hfn-breadcrumbs__item + .hfn-breadcrumbs__item::before {
	content: "/";
	margin-inline-end: var(--wp--preset--spacing--20, 0.5rem);
	opacity: 0.6;
}

/* -------------------------------------------------------------------------- */
/* Enquiry form                                                               */
/* -------------------------------------------------------------------------- */

.hfn-brief__form {
	display: grid;
	gap: var(--wp--preset--spacing--50, 1.5rem);
}

.hfn-brief__group {
	display: grid;
	min-width: 0;
	gap: var(--wp--preset--spacing--40, 1rem);
	margin: 0;
	padding: 0;
	border: 0;
}

.hfn-brief__legend {
	margin-block-end: var(--wp--preset--spacing--20, 0.5rem);
	padding: 0;
	font-size: var(--wp--preset--font-size--md, 1.125rem);
	font-weight: 700;
}

.hfn-field {
	display: grid;
	gap: 0.375rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.hfn-field__label {
	font-weight: 600;
}

.hfn-field__required {
	color: var(--wp--preset--color--muted, #B9B2C9);
	font-weight: 400;
}

.hfn-field__help {
	margin: 0;
	color: var(--wp--preset--color--muted, #B9B2C9);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

/* Errors carry an icon-free text prefix and a border, not colour alone. */
.hfn-field__error {
	margin: 0;
	color: var(--wp--preset--color--danger, #F26D6D);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 600;
}

.hfn-field__control {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--custom--line, rgb(255 255 255 / 9%));
	border-radius: var(--wp--custom--radius--sm, 4px);
	background-color: var(--wp--preset--color--surface, #F4F2F8);
	color: inherit;
	font-family: inherit;
	font-size: inherit;
}

.hfn-field__control:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #F59E0B);
	outline-offset: 1px;
}

.hfn-field--error .hfn-field__control {
	border-color: var(--wp--preset--color--danger, #F26D6D);
	border-width: 2px;
}

textarea.hfn-field__control {
	min-height: 6rem;
	resize: vertical;
}

.hfn-field__choices {
	display: grid;
	gap: 0.5rem;
}

@media (min-width: 40rem) {

	.hfn-field__choices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.hfn-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.hfn-choice input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	margin-block-start: 0.125rem;
}

.hfn-brief__errors {
	padding: var(--wp--preset--spacing--40, 1rem);
	border: 2px solid var(--wp--preset--color--danger, #F26D6D);
	border-radius: var(--wp--custom--radius--md, 6px);
}

.hfn-brief__errors:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #F59E0B);
	outline-offset: 2px;
}

.hfn-brief__errors-title {
	margin-block: 0 0.5rem;
	font-size: var(--wp--preset--font-size--md, 1.125rem);
}

.hfn-brief__errors-list {
	margin: 0;
	padding-inline-start: 1.25rem;
}

.hfn-brief__status--success {
	padding: var(--wp--preset--spacing--40, 1rem);
	border: 2px solid var(--wp--preset--color--ok, #45D6A4);
	border-radius: var(--wp--custom--radius--md, 6px);
}

.hfn-brief__status--success p {
	margin: 0;
}

.hfn-brief__actions {
	display: grid;
	gap: 0.5rem;
	justify-items: start;
}

.hfn-brief__submit {
	min-height: 2.75rem;
	padding: 0.625rem 1.5rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--gradient--button, linear-gradient(180deg, #FBBF24 0%, #F59E0B 55%, #D97706 100%));
	box-shadow: var(--wp--preset--shadow--btn, 0 10px 34px rgb(131 36 255 / 45%));
	color: #fff;
	cursor: pointer;
	font-size: inherit;
	font-weight: 500;
}

.hfn-brief__submit[aria-busy="true"] {
	cursor: progress;
	opacity: 0.7;
}

.hfn-brief__note {
	margin: 0;
	color: var(--wp--preset--color--muted, #B9B2C9);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

/* The honeypot: removed from the layout without display:none, which some bots detect,
   and hidden from assistive technology via aria-hidden on the wrapper. */
.hfn-brief__hp {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------- */
/* Search                                                                     */
/* -------------------------------------------------------------------------- */

.hfn-search__highlight {
	padding: 0 0.15em;
	background-color: var(--wp--preset--color--emerald-soft, #34D399);
	color: inherit;
}