/**
 * Commercial hub reading column (/travel-gear/, /travel-services/, /travel-money/).
 *
 * The hub copy is stored in the commercial_category term description and Kadence
 * renders it inside div.archive-description, in the entry-hero header band. That
 * band is built for a one-line archive blurb, not for a 2,900-word pillar, so it
 * centres text and inherits hero spacing. This file turns that container into a
 * body-copy column.
 *
 * Scope: page chrome for the .qot-hub wrapper only. This is NOT block CSS, so it
 * does not touch the Section 1 block-CSS contract (plugin owns block chrome, the
 * theme owns token values). Colour, type and spacing come from --brand-* tokens
 * only; zero hex literals.
 *
 * @package QotTheme
 * @since 1.1.6
 */

/* Undo the hero band's centring for the commercial archives. */
.commercial_category-archive-hero-section .archive-description,
.qot_commercial-archive-hero-section .archive-description {
	text-align: left;
	max-width: none;
}

/*
 * CMO render review 2026-08-17. The Kadence archive hero paints a pale tint
 * behind the title, which is fine for a one-line blurb. With a 2,900-word pillar
 * inside it, that tint became a full-page coloured panel, and it is not one of
 * the six brand colours. Reset the band to the brand page background so the
 * pillar reads as page body.
 */
.commercial_category-archive-hero-section,
.qot_commercial-archive-hero-section,
.commercial_category-archive-hero-section .entry-hero-container-inner,
.qot_commercial-archive-hero-section .entry-hero-container-inner {
	background: var(--brand-bg-page);
	background-image: none;
}

.commercial_category-archive-hero-section .hero-section-overlay,
.qot_commercial-archive-hero-section .hero-section-overlay {
	display: none;
}

/*
 * Same review: the archive H1 rendered small and centred above a left-aligned
 * column, which read as a label rather than the title of a pillar. Bring the
 * header into the same reading column and give it the display scale.
 *
 * KNOWN OPEN 2026-08-17: the size and colour land, the LEFT ALIGNMENT DOES NOT.
 * Four attempts (class rule, body-class specificity, !important, header
 * max-width) all left the H1 centred, so Kadence is not centring it with
 * text-align at all (most likely a flex/justify rule on the header). The
 * remaining defect is cosmetic. If picking this up, read the computed style on
 * the h1 FIRST and find the real centring mechanism; do not add a fifth
 * text-align override.
 */
.commercial_category-archive-hero-section .entry-header,
.qot_commercial-archive-hero-section .entry-header {
	text-align: left;
}

.commercial_category-archive-hero-section .page-title.archive-title,
.qot_commercial-archive-hero-section .page-title.archive-title {
	font-family: var(--brand-font-display);
	font-size: var(--brand-text-4xl);
	line-height: var(--brand-line-height-display);
	color: var(--brand-text);
	margin: 0 0 var(--brand-space-5);
}

/*
 * Kadence sets the archive title alignment from the customizer with a selector
 * that out-specifies a plain class rule (the title-align-inherit contract), so
 * the left alignment is re-asserted at body-class specificity. Measured, not
 * assumed: the 1.0.1 rule lost the cascade and the H1 stayed centred over a
 * left-aligned column.
 */
body.tax-commercial_category .entry-hero .entry-header,
body.tax-commercial_category .entry-hero .page-title.archive-title,
body.tax-commercial_category .entry-hero .archive-description {
	text-align: left !important;
}

/*
 * Width: normal site container, NOT a narrow measure. JL 2026-08-18: the 72ch
 * reading column read as too tight against the rest of the site. The hub now
 * inherits the Kadence content width like every other page.
 */
.qot-hub {
	text-align: left;
	font-family: var(--brand-font-body);
	font-weight: var(--brand-font-weight-body);
	color: var(--brand-text-body);
	line-height: var(--brand-line-height-body);
}

.qot-hub p {
	margin: 0 0 var(--brand-space-4);
	font-size: var(--brand-text-lg);
}

.qot-hub h2 {
	font-family: var(--brand-font-display);
	font-size: var(--brand-text-3xl);
	line-height: var(--brand-line-height-display);
	color: var(--brand-text);
	margin: var(--brand-space-7) 0 var(--brand-space-4);
}

.qot-hub h3 {
	font-family: var(--brand-font-display);
	font-size: var(--brand-text-2xl);
	line-height: var(--brand-line-height-display);
	color: var(--brand-text);
	margin: var(--brand-space-6) 0 var(--brand-space-3);
}

.qot-hub ul {
	margin: 0 0 var(--brand-space-5);
	padding-left: var(--brand-space-5);
	list-style: disc;
}

.qot-hub li {
	margin-bottom: var(--brand-space-3);
	font-size: var(--brand-text-lg);
	line-height: var(--brand-line-height-body);
}

.qot-hub strong {
	font-weight: var(--brand-font-weight-semibold);
	color: var(--brand-text);
}

.qot-hub a {
	color: var(--brand-primary);
	text-decoration: underline;
}

.qot-hub a:hover,
.qot-hub a:focus {
	color: var(--brand-emphasis);
}

/* Answer-capsule opener: slightly larger, sets the register. */
.qot-hub__intro p:first-child {
	font-size: var(--brand-text-xl);
	color: var(--brand-text);
}

/*
 * Brand-thread quote. Mirrors the .jab-quote-card treatment (sage edge, pearl
 * pullquote fill, display face) without reusing the block's classes, so the
 * plugin keeps sole ownership of block chrome.
 */
.qot-hub__quote {
	background: var(--brand-pullquote-bg);
	border-left: 4px solid var(--brand-success);
	border-radius: var(--brand-radius-md);
	padding: var(--brand-space-5) var(--brand-space-6);
	margin: var(--brand-space-7) 0;
}

.qot-hub__quote blockquote {
	border: 0;
	margin: 0;
	padding: 0;
	background: transparent;
}

.qot-hub__quote blockquote p {
	font-family: var(--brand-font-display);
	font-size: var(--brand-text-2xl);
	font-style: italic;
	line-height: var(--brand-line-height-display);
	color: var(--brand-text);
	margin: 0 0 var(--brand-space-4);
}

/* Attribution + the editorial note sit small and muted under the quote. */
.qot-hub__quote > p {
	font-size: var(--brand-text-sm);
	color: var(--brand-text-muted);
	margin: 0 0 var(--brand-space-2);
}

.qot-hub__quote > p:last-child {
	margin-bottom: 0;
}

.qot-hub__quote > p a {
	color: var(--brand-success-text);
}

/*
 * "The guides in this section" card row (JL 2026-08-18).
 *
 * The native Kadence archive loop renders the same roundups, but it sits in
 * #primary BELOW the whole hero band, so on a 2,900-word pillar the actual
 * money posts were buried under every category section. CSS cannot reorder
 * across those two containers, so the cards are rendered inline in the term
 * description at the right point in the reading order (after the newsletter,
 * before the category notes) and the native loop is hidden to avoid showing
 * the same guides twice.
 *
 * Card chrome is inherited from the existing .qot-related-listicles rules in
 * style.css; only the image and the note are new here.
 */
body.tax-commercial_category #archive-container,
body.tax-commercial_category .content-area .kadence-pagination {
	display: none;
}

body.tax-commercial_category #primary .content-container {
	padding-top: 0;
	padding-bottom: 0;
}

.qot-hub__guides {
	margin: 0 0 var(--brand-space-7);
}

/*
 * Three across (JL 2026-08-18). style.css ships the shared
 * .qot-related-listicles grid at 2 columns for in-post use; the hub runs the
 * same card chrome at 3 so a filled section reads as a proper index. Steps
 * down to 2 on tablet and 1 on phone.
 */
.qot-hub__guides .qot-related-listicles__grid {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
	.qot-hub__guides .qot-related-listicles__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.qot-hub__guides .qot-related-listicles__grid {
		grid-template-columns: 1fr;
	}
}

.qot-hub__guide-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--brand-radius-sm);
	margin: 0 0 var(--brand-space-4);
}

.qot-hub__guides-note {
	margin: var(--brand-space-4) 0 0;
	font-size: var(--brand-text-sm);
	color: var(--brand-text-muted);
}

/*
 * Branded FAQ (JL 2026-08-18). The plugin's acf/qot-faq-accordion block cannot
 * be used here: term descriptions are kses-filtered and the filter strips the
 * attribute payload off a block comment, so there is no way to pass the
 * questions in. Native <details> / <summary> survives kses, needs no JS, is
 * keyboard accessible by default, and is crawlable. Chrome matches the
 * .jab-faq-accordion card treatment in style.css (white card on pearl,
 * hairline border, navy semibold question) without borrowing its classes, so
 * the plugin keeps sole ownership of block chrome.
 */
.qot-hub__faq {
	background: var(--brand-surface);
	border: 1px solid var(--brand-border-strong);
	border-radius: var(--brand-radius-md);
	box-shadow: var(--brand-shadow-sm);
	padding: var(--brand-space-4) var(--brand-space-5);
	margin: 0 0 var(--brand-space-3);
}

.qot-hub__faq > summary {
	cursor: pointer;
	font-family: var(--brand-font-display);
	font-size: var(--brand-text-2xl);
	line-height: var(--brand-line-height-display);
	font-weight: var(--brand-font-weight-semibold);
	color: var(--brand-text);
}

.qot-hub__faq > summary:hover,
.qot-hub__faq > summary:focus {
	color: var(--brand-emphasis);
}

.qot-hub__faq[open] > summary {
	margin-bottom: var(--brand-space-3);
}

.qot-hub__faq > p {
	margin: 0 0 var(--brand-space-3);
}

.qot-hub__faq > p:last-child {
	margin-bottom: 0;
}

@media (max-width: 782px) {
	.commercial_category-archive-hero-section .page-title.archive-title,
	.qot_commercial-archive-hero-section .page-title.archive-title {
		font-size: var(--brand-text-3xl);
	}

	.qot-hub h2 {
		font-size: var(--brand-text-2xl);
		margin-top: var(--brand-space-6);
	}

	.qot-hub p,
	.qot-hub li {
		font-size: var(--brand-text-base);
	}

	.qot-hub__intro p:first-child {
		font-size: var(--brand-text-lg);
	}
}