/*
 * layout.css — header, footer, drawer, container widths.
 *
 * Phase 10 UX alignment (0.6.0) replaces the Phase-5 placeholder chrome
 * with a header/footer that mirror the visual language of
 * bushraa-web-app/src/components/app-header.tsx and
 * bushraa-web-app/src/components/app-footer.tsx without shipping their
 * authenticated-user controls.
 */

/* -- Main container ---------------------------------------------- */

.site-main {
	max-width: 1120px;
	margin-inline: auto;
	padding-inline: var(--bushraa-gap-4);
	padding-block: var(--bushraa-gap-6);
}

@media (min-width: 640px) {
	.site-main {
		padding-inline: var(--bushraa-gap-6);
	}
}

@media (min-width: 1024px) {
	.site-main {
		padding-inline: var(--bushraa-gap-8);
	}
}

/* -- Header ------------------------------------------------------- */

.bushraa-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 40;
	background-color: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-block-end: 1px solid var(--bushraa-border-subtle);
}

.bushraa-header__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--bushraa-gap-4);
	padding-block: var(--bushraa-gap-3);
	display: flex;
	align-items: center;
	gap: var(--bushraa-gap-3);
}

@media (min-width: 640px) {
	.bushraa-header__inner {
		padding-inline: var(--bushraa-gap-6);
	}
}

@media (min-width: 1024px) {
	.bushraa-header__inner {
		padding-inline: var(--bushraa-gap-8);
		padding-block: var(--bushraa-gap-4);
		gap: var(--bushraa-gap-4);
	}
}

/* Brand lockup — mark + name + tagline. Shared by header + drawer + footer. */

.bushraa-header__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--bushraa-gap-3);
	color: inherit;
	text-decoration: none;
	min-width: 0;
}

.bushraa-header__brand:hover,
.bushraa-header__brand:focus-visible {
	text-decoration: none;
	color: inherit;
}

.bushraa-header__brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background-color: var(--bushraa-brand-primary);
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
	box-shadow: 0 12px 24px rgba(2, 48, 71, 0.18);
}

.bushraa-header__brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	min-width: 0;
}

.bushraa-header__brand-name {
	font-size: 18px;
	font-weight: 700;
	color: var(--bushraa-brand-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bushraa-header__brand-tagline {
	font-size: 12px;
	font-weight: 400;
	color: var(--bushraa-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Drawer toggle — visible < 768px only. */

.bushraa-header__drawer-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--bushraa-border-subtle);
	border-radius: var(--bushraa-radius-md);
	background-color: #ffffff;
	color: var(--bushraa-brand-primary);
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.bushraa-header__drawer-toggle:hover,
.bushraa-header__drawer-toggle:focus-visible {
	background-color: var(--bushraa-surface-muted);
	border-color: var(--bushraa-border-elevated);
}

.bushraa-header__drawer-icon {
	width: 20px;
	height: 20px;
}

/* Desktop nav — hidden on mobile, inline from 768px. */

.bushraa-header__nav {
	display: none;
	flex: 1 1 auto;
	min-width: 0;
	justify-content: center;
}

.bushraa-nav__list,
.bushraa-nav__list--fallback {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bushraa-gap-4);
}

.bushraa-nav__list a,
.bushraa-nav__link {
	color: var(--bushraa-text-default);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	padding: 6px 10px;
	border-radius: var(--bushraa-radius-sm);
	transition: color 160ms ease, background-color 160ms ease;
}

.bushraa-nav__list a:hover,
.bushraa-nav__link:hover,
.bushraa-nav__list a:focus-visible,
.bushraa-nav__link:focus-visible {
	color: var(--bushraa-brand-primary);
	background-color: rgba(2, 48, 71, 0.06);
	text-decoration: none;
}

@media (min-width: 768px) {
	.bushraa-header__drawer-toggle {
		display: none;
	}

	.bushraa-header__nav {
		display: flex;
	}
}

/* Header CTA — always visible, pushes to inline-end. */

.bushraa-header__cta {
	margin-inline-start: auto;
	flex-shrink: 0;
}

.bushraa-header__cta-btn {
	font-size: 14px;
	padding: 10px 16px;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.bushraa-header__cta-btn {
		padding: 11px 20px;
		font-size: 15px;
	}
}

/* -- Mobile drawer ------------------------------------------------- */

.bushraa-drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: block;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
}

.bushraa-drawer[hidden] {
	display: none;
}

.bushraa-drawer__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	background: rgba(2, 48, 71, 0.35);
	cursor: pointer;
	opacity: 0;
	transition: opacity 200ms ease;
}

.bushraa-drawer[data-open="true"] .bushraa-drawer__backdrop {
	opacity: 1;
}

.bushraa-drawer__panel {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	height: 100%;
	width: 88vw;
	max-width: 360px;
	background-color: #ffffff;
	border-inline-end: 1px solid var(--bushraa-border-subtle);
	box-shadow: -24px 0 60px rgba(2, 48, 71, 0.2);
	padding: var(--bushraa-gap-4);
	display: flex;
	flex-direction: column;
	gap: var(--bushraa-gap-5);
	transform: translateX(100%);
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Panel is anchored at inline-start (physical right in RTL since the
 * theme forces dir=rtl). translateX(100%) moves it physically right,
 * off-screen. Open state restores it to its resting position. */

.bushraa-drawer[data-open="true"] .bushraa-drawer__panel {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.bushraa-drawer__panel,
	.bushraa-drawer__backdrop {
		transition: none;
	}
}

.bushraa-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bushraa-gap-3);
}

.bushraa-drawer__brand .bushraa-header__brand-mark {
	width: 40px;
	height: 40px;
	font-size: 16px;
}

.bushraa-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--bushraa-border-subtle);
	border-radius: 999px;
	background-color: #ffffff;
	color: var(--bushraa-brand-primary);
	cursor: pointer;
	flex-shrink: 0;
}

.bushraa-drawer__close svg {
	width: 18px;
	height: 18px;
}

.bushraa-drawer__close:hover,
.bushraa-drawer__close:focus-visible {
	background-color: var(--bushraa-surface-muted);
}

.bushraa-drawer__nav {
	flex: 1 1 auto;
	overflow-y: auto;
}

.bushraa-drawer__list,
.bushraa-drawer__list--fallback {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bushraa-gap-1);
}

.bushraa-drawer__list a,
.bushraa-drawer__link {
	display: block;
	padding: 12px 14px;
	border-radius: var(--bushraa-radius-md);
	color: var(--bushraa-text-strong);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

.bushraa-drawer__list a:hover,
.bushraa-drawer__link:hover,
.bushraa-drawer__list a:focus-visible,
.bushraa-drawer__link:focus-visible {
	background-color: var(--bushraa-surface-muted);
	color: var(--bushraa-brand-primary);
	text-decoration: none;
}

.bushraa-drawer__cta {
	margin-block-start: auto;
	text-align: center;
	width: 100%;
}

@media (min-width: 768px) {
	.bushraa-drawer[hidden] {
		display: none;
	}
}

body.bushraa-drawer-open {
	overflow: hidden;
}

/* -- Footer ------------------------------------------------------- */

.bushraa-footer {
	margin-block-start: var(--bushraa-gap-10);
	border-block-start: 1px solid var(--bushraa-border-subtle);
	background-color: #ffffff;
}

.bushraa-footer__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--bushraa-gap-4);
	padding-block: var(--bushraa-gap-8);
	display: flex;
	flex-direction: column;
	gap: var(--bushraa-gap-8);
}

@media (min-width: 640px) {
	.bushraa-footer__inner {
		padding-inline: var(--bushraa-gap-6);
		padding-block: 48px;
	}
}

@media (min-width: 1024px) {
	.bushraa-footer__inner {
		padding-inline: var(--bushraa-gap-8);
	}
}

.bushraa-footer__top {
	display: flex;
	flex-direction: column;
	gap: var(--bushraa-gap-8);
}

@media (min-width: 640px) {
	.bushraa-footer__top {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--bushraa-gap-8);
	}
}

.bushraa-footer__brand-block {
	display: flex;
	flex-direction: column;
	gap: var(--bushraa-gap-3);
	max-width: 360px;
}

.bushraa-footer__tagline {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--bushraa-text-default);
}

.bushraa-footer__links-heading {
	margin: 0 0 var(--bushraa-gap-3);
	color: var(--bushraa-brand-primary);
	font-size: 14px;
	font-weight: 700;
}

.bushraa-footer__list,
.bushraa-footer__list--fallback {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--bushraa-gap-8);
	row-gap: var(--bushraa-gap-2);
}

.bushraa-footer__list a {
	color: var(--bushraa-text-default);
	font-size: 14px;
	text-decoration-color: rgba(45, 45, 45, 0.32);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 160ms ease, text-decoration-color 160ms ease;
}

.bushraa-footer__list a:hover,
.bushraa-footer__list a:focus-visible {
	color: var(--bushraa-brand-primary);
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

@media (min-width: 640px) {
	.bushraa-footer__list,
	.bushraa-footer__list--fallback {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.bushraa-footer__widgets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bushraa-gap-6);
}

.bushraa-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: var(--bushraa-gap-3);
	padding-block-start: var(--bushraa-gap-6);
	border-block-start: 1px solid var(--bushraa-border-subtle);
}

@media (min-width: 640px) {
	.bushraa-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.bushraa-footer__copy {
	margin: 0;
	font-size: 12px;
	color: var(--bushraa-text-muted);
}

.bushraa-footer__legal {
	display: flex;
	align-items: center;
	gap: var(--bushraa-gap-4);
}

.bushraa-footer__legal a {
	font-size: 12px;
	color: var(--bushraa-text-muted);
	text-decoration-color: rgba(79, 79, 79, 0.34);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 160ms ease, text-decoration-color 160ms ease;
}

.bushraa-footer__legal a:hover,
.bushraa-footer__legal a:focus-visible {
	color: var(--bushraa-brand-primary);
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}