/* ==========================================================================
   Viyana Brief — Client Brief template (header, document area, footer)
   Logical properties (inline-start/end) make the layout mirror in RTL.
   ========================================================================== */
body.vb-brief { display: flex; flex-direction: column; min-height: 100vh; }

/* Skip link */
.vb-skip {
	position: absolute; inset-inline-start: 16px; top: -100px; z-index: 1000;
	padding: 10px 16px; background: var(--vb-navy); color: #fff !important;
	border-radius: var(--vb-radius); font-weight: 600; text-decoration: none;
}
.vb-skip:focus { top: 12px; }

/* ---------- Header ---------- */
/* Not sticky on purpose: Fluent Forms scrolls to the step/error position itself,
   and a pinned header would cover the progress bar and the first error. */
.vb-header {
	position: relative;
	z-index: 90;
	background: var(--vb-surface);
	border-bottom: 1px solid var(--vb-border-soft);
}

.vb-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1fr);
	grid-template-areas: "brand title lang";
	align-items: center;
	gap: 24px;
	max-width: var(--vb-wide-width);
	min-height: var(--vb-header-h);
	margin-inline: auto;
	padding: 10px var(--vb-gutter);
}
.vb-header__brand { grid-area: brand; display: flex; align-items: center; min-width: 0; }
.vb-header__title { grid-area: title; min-width: 0; text-align: center; }
.vb-header__lang  { grid-area: lang; display: flex; justify-content: flex-end; }

.vb-logo { display: block; width: 132px; height: auto; max-width: 100%; }
.vb-logo-text { font-weight: 800; font-size: 20px; color: var(--vb-navy); }

.vb-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--vb-heading);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
html[dir="rtl"] .vb-title { font-size: 18px; line-height: 1.5; }

/* Language switcher: EN | AR */
.vb-lang {
	display: inline-flex; align-items: center;
	padding: 3px; gap: 2px;
	background: var(--vb-bg);
	border: 1px solid var(--vb-border-soft);
	border-radius: var(--vb-radius-pill);
	direction: ltr;                     /* keep EN | AR order identical in both languages */
	font-family: var(--vb-font-en);
}
.vb-lang__item {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; min-height: 30px; padding: 0 12px;
	font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em;
	color: var(--vb-text) !important; text-decoration: none !important;
	border-radius: var(--vb-radius-pill);
	transition: background var(--vb-ease), color var(--vb-ease);
}
a.vb-lang__item:hover { background: #fff; color: var(--vb-navy) !important; box-shadow: var(--vb-shadow-sm); }
.vb-lang__item.is-current { background: var(--vb-navy); color: #fff !important; }
.vb-lang__item.is-disabled { opacity: 0.4; cursor: not-allowed; }
.vb-lang__sep { display: none; }

/* ---------- Document area ---------- */
.vb-main { flex: 1 0 auto; width: 100%; }
.vb-main:focus { outline: none; }
.vb-doc {
	max-width: calc(var(--vb-doc-width) + 2 * var(--vb-gutter));
	margin-inline: auto;
	padding: clamp(24px, 5vw, 48px) var(--vb-gutter) 56px;
}
.vb-intro { margin: 0 0 20px; font-size: var(--vb-text-md); color: var(--vb-text); }
.vb-intro p { margin: 0; }

.vb-sheet {
	background: var(--vb-surface);
	border: 1px solid var(--vb-border-soft);
	border-radius: var(--vb-radius-lg);
	box-shadow: var(--vb-shadow-sm);
	padding: clamp(20px, 4.5vw, 44px);
}
.vb-sheet__body > :first-child { margin-top: 0; }
.vb-sheet__body > :last-child { margin-bottom: 0; }

.vb-assurance {
	margin: 16px 0 0; text-align: center;
	font-size: 12.5px; color: var(--vb-muted);
}

/* ---------- Footer ---------- */
.vb-footer { border-top: 1px solid var(--vb-border-soft); background: var(--vb-surface); }
.vb-footer__inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
	max-width: var(--vb-wide-width); margin-inline: auto;
	padding: 18px var(--vb-gutter);
	font-size: 12.5px; color: var(--vb-muted);
}
.vb-footer__copy { margin: 0; }
.vb-footer__link { color: var(--vb-muted) !important; }
.vb-footer__link:hover { color: var(--vb-navy) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.vb-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; }
	.vb-logo { width: 116px; }
}

/* Mobile: two rows — [logo … EN|AR] then the full-width title (max 2 lines). */
@media (max-width: 720px) {
	.vb-header__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "brand lang" "title title";
		gap: 10px 12px;
		min-height: 0;
		padding-block: 12px 14px;
	}
	.vb-header__title { text-align: start; padding-top: 10px; border-top: 1px solid var(--vb-border-soft); }
	.vb-title { font-size: 16px; }
	html[dir="rtl"] .vb-title { font-size: 17px; }
	.vb-logo { width: 104px; }
	.vb-lang__item { min-width: 38px; min-height: 30px; padding: 0 10px; }
	.vb-footer__inner { justify-content: center; text-align: center; }
	.vb-sheet { border-radius: var(--vb-radius); }
}

/* Astra's floating scroll-to-top button is off-brand on briefs */
body.vb-brief #ast-scroll-top { display: none !important; }