/**
 * Quick Fix Force — shared cross-page blocks
 * Source: src/components/shared/*.jsx — used by nearly every page beyond
 * the homepage (service/area/guide/landing/static pages all compose these).
 */

/* ===== Breadcrumb ===== */
.qff-breadcrumb { padding-top: 1.25rem; }
.qff-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: 12px; color: var(--qff-charcoal-50); }
.qff-breadcrumb a:hover { color: var(--qff-navy); }
.qff-breadcrumb li[aria-current="page"] { font-weight: 500; color: var(--qff-charcoal-80); }
.qff-breadcrumb .qff-crumb-sep { display: inline-flex; width: 0.75rem; height: 0.75rem; color: var(--qff-charcoal-35); }

/* ===== Page hero (service/area/guide/landing/static page top banner) ===== */
.qff-page-hero { padding-top: var(--qff-header-height); background: #fff; }
.qff-page-hero__inner { padding-top: 1.5rem; padding-bottom: 2.5rem; }
@media (min-width: 640px) { .qff-page-hero__inner { padding-top: 3.5rem; padding-bottom: 3.5rem; } }
@media (min-width: 1024px) { .qff-page-hero__inner { padding-top: 4rem; padding-bottom: 4rem; } }
.qff-page-hero__content { max-width: 48rem; }
.qff-page-hero__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--qff-action); margin-bottom: 1.25rem; }
.qff-page-hero__title { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 32px; line-height: 1.08; letter-spacing: -0.02em; }
@media (min-width: 640px) { .qff-page-hero__title { font-size: 48px; } }
@media (min-width: 1024px) { .qff-page-hero__title { font-size: 52px; } }
.qff-page-hero__intro { margin-top: 1.5rem; font-size: 16px; color: var(--qff-charcoal-65); line-height: 1.7; }
@media (min-width: 640px) { .qff-page-hero__intro { font-size: 17px; } }
.qff-page-hero__actions { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .qff-page-hero__actions { flex-direction: row; } }
.qff-page-hero__trust { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.625rem 1.25rem; }
.qff-page-hero__trust li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 13.5px; font-weight: 500; color: var(--qff-charcoal-60); }
.qff-page-hero__trust svg { width: 1rem; height: 1rem; color: var(--qff-action); flex-shrink: 0; }

/* ===== Cost drivers ===== */
.qff-cost-list { margin-top: 2.25rem; display: grid; gap: 0.5rem 2rem; max-width: 56rem; }
@media (min-width: 640px) { .qff-cost-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qff-cost-list li { display: flex; gap: 0.75rem; font-size: 15px; color: var(--qff-charcoal-70); line-height: 1.7; padding: 0.5rem 0; }
.qff-cost-list svg { width: 1rem; height: 1rem; color: var(--qff-action); flex-shrink: 0; margin-top: 0.25rem; }
.qff-cost-note { margin-top: 2rem; max-width: 48rem; font-size: 15px; color: var(--qff-charcoal-60); line-height: 1.7; }

/* ===== CTA band (navy, centered) ===== */
.qff-cta-band { padding-top: 6rem; padding-bottom: 6rem; }
@media (min-width: 640px) { .qff-cta-band { padding-top: 8rem; padding-bottom: 8rem; } }
.qff-cta-band__inner { text-align: center; }
.qff-cta-band__rule { margin: 0 auto 2rem; height: 2px; width: 3rem; background: var(--qff-action); }
.qff-cta-band__title { font-family: var(--qff-font-display); font-weight: 600; color: #fff; font-size: 36px; line-height: 1.08; letter-spacing: -0.02em; }
@media (min-width: 640px) { .qff-cta-band__title { font-size: 48px; } }
@media (min-width: 1024px) { .qff-cta-band__title { font-size: 56px; } }
.qff-cta-band__sub { margin-top: 1.5rem; color: var(--qff-white-65); font-size: 18px; max-width: 28rem; margin-left: auto; margin-right: auto; line-height: 1.7; }
.qff-cta-band__actions { margin-top: 2.5rem; display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; }
@media (min-width: 640px) { .qff-cta-band__actions { flex-direction: row; } }

/* ===== CTA band (compact, in-page — distinct from home's full-bleed CTA) ===== */
.qff-cta-band-compact { padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 640px) { .qff-cta-band-compact { padding-top: 5rem; padding-bottom: 5rem; } }
.qff-cta-band-compact__content { max-width: 42rem; }
.qff-cta-band-compact h2 { font-family: var(--qff-font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; }
@media (min-width: 640px) { .qff-cta-band-compact h2 { font-size: 30px; } }
.qff-cta-band-compact p { margin-top: 1rem; font-size: 16px; line-height: 1.7; }
.qff-cta-band-compact__actions { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .qff-cta-band-compact__actions { flex-direction: row; } }

/* ===== FAQ block section wrapper ===== */
.qff-faq-section__inner { max-width: 48rem; margin: 0 auto; }
.qff-faq-section .qff-faq { margin-top: 2.5rem; }

/* ===== Process steps (navy band, 4-up) ===== */
.qff-process { background: var(--qff-navy); padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 640px) { .qff-process { padding-top: 6rem; padding-bottom: 6rem; } }
.qff-process-grid { margin-top: 2.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .qff-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .qff-process-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 3.5rem; } }
.qff-process-step { border-top: 1px solid var(--qff-white-10); padding-top: 1.25rem; height: 100%; }
.qff-process-step__num { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-action); font-size: 24px; }
.qff-process-step h3 { margin-top: 0.75rem; font-family: var(--qff-font-display); font-weight: 600; color: #fff; font-size: 17px; letter-spacing: -0.01em; }
.qff-process-step p { margin-top: 0.5rem; font-size: 14.5px; color: var(--qff-white-60); line-height: 1.7; }

/* ===== Prose sections (long-form body copy) ===== */
.qff-prose-sections { max-width: 48rem; margin: 0 auto; display: flex; flex-direction: column; gap: 3rem; }
.qff-prose-sections h2 { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 24px; line-height: 1.3; letter-spacing: -0.01em; }
@media (min-width: 640px) { .qff-prose-sections h2 { font-size: 28px; } }
.qff-prose-sections p { margin-top: 1rem; font-size: 16px; color: var(--qff-charcoal-70); line-height: 1.75; }
@media (min-width: 640px) { .qff-prose-sections p { font-size: 17px; } }

/* ===== Quick answer (AI-Overview-style extractable block) ===== */
.qff-quick-answer { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 640px) { .qff-quick-answer { padding-top: 4rem; padding-bottom: 4rem; } }
.qff-quick-answer__inner { max-width: 48rem; margin: 0 auto; border-left: 2px solid var(--qff-action); padding-left: 1.25rem; }
@media (min-width: 640px) { .qff-quick-answer__inner { padding-left: 1.75rem; } }
.qff-quick-answer__label { font-size: 11px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--qff-action); }
.qff-quick-answer__q { margin-top: 1rem; font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
@media (min-width: 640px) { .qff-quick-answer__q { font-size: 24px; } }
.qff-quick-answer__a { margin-top: 1rem; font-size: 16.5px; color: var(--qff-charcoal-75); line-height: 1.7; }
@media (min-width: 640px) { .qff-quick-answer__a { font-size: 18px; } }

/* ===== Service links block (cross-link cards) ===== */
.qff-service-links-grid { margin-top: 2rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .qff-service-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qff-service-link-card {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  background: #fff; border: 1px solid var(--qff-navy-10); border-radius: var(--qff-radius-sm);
  padding: 1.25rem; height: 100%; transition: border-color 0.2s ease;
}
.qff-service-link-card:hover { border-color: var(--qff-navy-25); }
.qff-service-link-card__title { display: block; font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 16px; letter-spacing: -0.01em; }
.qff-service-link-card__desc { display: block; margin-top: 0.375rem; font-size: 14px; color: var(--qff-charcoal-55); line-height: 1.6; }
.qff-service-link-card svg { width: 1rem; height: 1rem; color: var(--qff-navy); flex-shrink: 0; margin-top: 0.25rem; }

/* ===== Area chip links (Contact page "Where we work") ===== */
.qff-area-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; max-width: 48rem; margin: 1.5rem auto 0; }
.qff-area-chips--left { justify-content: flex-start; max-width: none; margin-left: 0; margin-top: 2rem; }
.qff-area-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border: 1px solid var(--qff-navy-10); border-radius: 9999px; font-size: 13.5px; font-weight: 500; color: var(--qff-charcoal-60); background: #fff; }
.qff-area-chip .qff-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--qff-navy); }
.qff-area-chip--link { transition: border-color 0.2s ease, color 0.2s ease; }
.qff-area-chip--link:hover { border-color: var(--qff-navy-25); color: var(--qff-navy); }
.qff-inline-link { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 14.5px; font-weight: 600; color: var(--qff-navy); transition: color 0.2s ease; }
.qff-inline-link:hover { color: var(--qff-action); }
.qff-inline-link svg { width: 1rem; height: 1rem; transition: transform 0.3s ease; }
.qff-inline-link:hover svg { transform: translate(2px, -2px); }

/* ===== Value grid (2-up feature list with top rule) ===== */
.qff-value-grid { margin-top: 2.5rem; display: grid; gap: 1.5rem 2rem; }
@media (min-width: 640px) { .qff-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 3.5rem; } }
.qff-value-grid__item { border-top: 2px solid var(--qff-navy-10); padding-top: 1.25rem; }
.qff-value-grid__item h3 { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 17px; letter-spacing: -0.01em; }
@media (min-width: 640px) { .qff-value-grid__item h3 { font-size: 18px; } }
.qff-value-grid__item p { margin-top: 0.5rem; font-size: 15px; color: var(--qff-charcoal-60); line-height: 1.7; }

/* ── Approved authority line (inc/authority.php) ──────────────────────────
   One contextual sentence under a child service page's quick answer. Uses
   logical properties (border-inline-start / padding-inline-start) so the
   Arabic RTL layer needs no override. */
.qff-authority-note { background: #fff; padding-bottom: 0.5rem; }
.qff-authority-note__p {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	border-inline-start: 2px solid var(--qff-action);
	padding-inline-start: 1rem;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(23, 26, 31, 0.7);
	margin: 0;
}
.qff-authority-note__p svg {
	margin-top: 0.125rem;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	color: var(--qff-action);
}