/* ==========================================================================
   Brand Journal — page.css
   Loaded on static pages, 404, and search results.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page header (shared)
   -------------------------------------------------------------------------- */
.bj-page-header {
	padding-top: clamp(var(--bj-s-5), 7vw, var(--bj-s-6));
	padding-bottom: var(--bj-s-4);
	text-align: center;
	background: var(--bj-surface-warm);
	border-bottom: 1px solid var(--bj-hairline);
}
.bj-page-header__title { margin: var(--bj-s-1) 0 var(--bj-s-2); }
.bj-page-header__lede  { max-width: 38rem; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Generic page body
   -------------------------------------------------------------------------- */
.bj-page__hero {
	margin: var(--bj-s-4) 0;
}
.bj-page__hero-img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--bj-radius);
	background: var(--bj-surface-warm);
}
.bj-page__body {
	padding-top: var(--bj-s-4);
	padding-bottom: var(--bj-s-6);
}
.bj-page__content {
	font-size: var(--bj-fs-400);
	line-height: var(--bj-lh-relaxed);
	color: var(--bj-ink);
}
.bj-page__content > * + * { margin-top: var(--bj-s-3); }
.bj-page__content h2 { font-size: var(--bj-fs-600); margin-top: var(--bj-s-5); }
.bj-page__content h3 { font-size: var(--bj-fs-500); margin-top: var(--bj-s-4); }
.bj-page__content h4 { font-size: var(--bj-fs-400); }
.bj-page__content ul, .bj-page__content ol { padding-left: 1.5rem; }
.bj-page__content li + li { margin-top: 0.35rem; }
.bj-page__content a { color: var(--bj-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.bj-page__content a:hover { color: var(--bj-yellow-ink); text-decoration-color: var(--bj-yellow); }
.bj-page__content blockquote {
	border-left: 4px solid var(--bj-yellow);
	padding: 0.75rem 1.25rem;
	background: var(--bj-surface-warm);
	border-radius: 0 var(--bj-radius-sm) var(--bj-radius-sm) 0;
	font-size: var(--bj-fs-400);
	color: var(--bj-ink);
	margin: var(--bj-s-3) 0;
}
.bj-page__content img { border-radius: var(--bj-radius-sm); }
.bj-page__pages {
	margin-top: var(--bj-s-4);
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	font-size: var(--bj-fs-200);
}
.bj-page__pages .page-number {
	display: inline-grid;
	place-items: center;
	min-width: 36px; height: 36px;
	padding: 0 0.6rem;
	border-radius: var(--bj-radius-sm);
	border: 1px solid var(--bj-hairline);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.bj-contact {
	padding-top: var(--bj-s-5);
	padding-bottom: var(--bj-s-6);
}
.bj-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: clamp(var(--bj-s-4), 5vw, var(--bj-s-6));
	align-items: start;
}
.bj-contact__intro .bj-lede { margin-bottom: var(--bj-s-3); }
.bj-contact__copy { margin-bottom: var(--bj-s-3); color: var(--bj-ink-soft); line-height: var(--bj-lh-relaxed); }
.bj-contact__details {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--bj-s-3);
	border-top: 1px solid var(--bj-hairline);
	padding-top: var(--bj-s-3);
}
.bj-contact__details li .bj-eyebrow { display: block; margin-bottom: 0.25rem; }
.bj-contact__details a { color: var(--bj-ink); text-decoration: none; font-weight: 500; }
.bj-contact__details a:hover { color: var(--bj-yellow-ink); text-decoration: underline; text-decoration-color: var(--bj-yellow); }
.bj-contact__details address,
.bj-contact__details p { margin: 0; font-style: normal; color: var(--bj-ink); }

.bj-contact__form-wrap {
	background: var(--bj-surface);
	border: 1px solid var(--bj-hairline);
	border-radius: var(--bj-radius-lg);
	padding: clamp(var(--bj-s-3), 3vw, var(--bj-s-4));
	box-shadow: var(--bj-shadow-sm);
}

.bj-contact-form button[type="submit"] { margin-top: var(--bj-s-1); }

@media (max-width: 860px) {
	.bj-contact__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */
.bj-faq {
	padding-top: var(--bj-s-5);
	padding-bottom: var(--bj-s-6);
}
.bj-faq__intro { margin-bottom: var(--bj-s-3); }
.bj-faq__copy  { color: var(--bj-ink-soft); margin-bottom: var(--bj-s-3); }

.bj-accordion {
	display: grid;
	gap: 0.5rem;
	border-top: 1px solid var(--bj-hairline);
}
.bj-accordion__item {
	border-bottom: 1px solid var(--bj-hairline);
	padding: 0;
}
.bj-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bj-s-2);
	padding: 1.15rem 0.25rem;
	cursor: pointer;
	list-style: none;
	font-weight: 500;
	font-size: var(--bj-fs-400);
	color: var(--bj-ink);
}
.bj-accordion__summary::-webkit-details-marker { display: none; }
.bj-accordion__summary:hover { color: var(--bj-yellow-ink); }
.bj-accordion__q { flex: 1; line-height: var(--bj-lh-snug); }
.bj-accordion__icon {
	position: relative;
	width: 20px; height: 20px;
	flex: 0 0 20px;
}
.bj-accordion__icon::before,
.bj-accordion__icon::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 14px; height: 2px;
	background: var(--bj-ink);
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: transform var(--bj-dur-fast) var(--bj-ease), opacity var(--bj-dur-fast) var(--bj-ease);
}
.bj-accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.bj-accordion__item[open] .bj-accordion__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }
.bj-accordion__answer {
	padding: 0 0.25rem 1.25rem;
	color: var(--bj-ink-soft);
	line-height: var(--bj-lh-relaxed);
}
.bj-accordion__answer > :first-child { margin-top: 0; }
.bj-accordion__answer > :last-child  { margin-bottom: 0; }
.bj-accordion__answer a { color: var(--bj-ink); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.bj-404 {
	padding-top: clamp(var(--bj-s-5), 8vw, var(--bj-s-7));
	padding-bottom: var(--bj-s-6);
	text-align: center;
	background: var(--bj-surface-warm);
}
.bj-404__inner { display: grid; gap: var(--bj-s-3); justify-items: center; }
.bj-404__mark {
	width: 120px; height: 120px;
	border-radius: 50%;
	background: var(--bj-yellow);
	color: var(--bj-yellow-ink);
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: var(--bj-fs-700);
	letter-spacing: -0.02em;
	margin-bottom: var(--bj-s-2);
	box-shadow: var(--bj-shadow-md);
}
.bj-404__title { margin: 0; }
.bj-404__search { width: 100%; max-width: 28rem; }
.bj-404__actions { display: flex; gap: var(--bj-s-1); flex-wrap: wrap; justify-content: center; }
.bj-404__related { padding-top: var(--bj-s-5); padding-bottom: var(--bj-s-6); }
.bj-404__related-title { margin-bottom: var(--bj-s-3); }

/* --------------------------------------------------------------------------
   Search results
   -------------------------------------------------------------------------- */
.bj-search-empty {
	padding: var(--bj-s-5) 0;
	display: grid;
	gap: var(--bj-s-2);
	justify-items: start;
	max-width: var(--bj-reading);
}
.bj-search-results .bb-archive-header__intro { margin-top: var(--bj-s-2); }
.bj-search-results .bb-archive-header__intro .bb-search { max-width: 32rem; }