/* =========================================================================
   Brand hub — WoodMart
   -------------------------------------------------------------------------
   These are the pages that have to win bare brand head terms: `la roche posay`
   is 18,100/mo in Morocco, and the market leader defends it with a bare
   product grid from position #17. A grid is not a page that wins an 18,100/mo
   term — this template adds the editorial, the trust claim and the FAQ.

   Design per the approved spec: pharmacy green as the trust anchor, neutral
   ground, one warm accent reserved for price and promo.

   Loaded ONLY on product_brand archives — see functions.php.
   ========================================================================= */

.para-hub {
	--para-green: #0e7a57;
	--para-green-dark: #0a5b41;
	--para-green-tint: #e7f2ee;
	--para-ink: #14201b;
	--para-ink-soft: #55635c;
	--para-ink-faint: #8b978f;
	--para-surface: #f5f7f6;
	--para-rule: rgba(20, 32, 27, 0.12);
	--para-accent: #d9531e;
	--para-measure: 70ch;
}

/* ------------------------------------------------------------- masthead */

.para-hub__masthead {
	background: var(--para-surface);
	border-inline-start: 4px solid var(--para-green);
	border-radius: 4px;
	padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 3.5vw, 2.25rem);
	margin-block-end: 1rem;
}

.para-hub__kicker {
	margin: 0 0 0.6rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--para-green);
}

.para-hub__title {
	margin: 0;
	color: var(--para-ink);
	font-size: clamp(1.75rem, 4vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.para-hub__standfirst {
	max-width: 56ch;
	margin: 0.7rem 0 0;
	color: var(--para-ink-soft);
	font-size: 1rem;
	line-height: 1.6;
}

.para-hub__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2.25rem;
	margin: 1.4rem 0 0;
	padding-block-start: 1.1rem;
	border-block-start: 1px solid var(--para-rule);
	list-style: none;
}

.para-hub__meta li {
	margin: 0;
	font-size: 0.78rem;
	color: var(--para-ink-faint);
}

.para-hub__meta b {
	display: block;
	margin-block-end: 0.1rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--para-ink);
}

/* -------------------------------------------------- authenticity strip */
/* Competitors all shout "100% authentique". A specific, checkable claim is
   more persuasive than a louder generic one — and they cannot copy it
   without the supplier accounts. */

.para-hub__placard {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.85rem 1.1rem;
	margin-block-end: 2rem;
	background: var(--para-green-tint);
	border-radius: 4px;
	font-size: 0.87rem;
	line-height: 1.45;
}

.para-hub__placard svg {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--para-green-dark);
}

.para-hub__placard strong {
	display: block;
	color: var(--para-ink);
}

.para-hub__placard span {
	color: var(--para-ink-soft);
}

/* ------------------------------------------------------------ editorial */

.para-brand-hub__intro {
	max-width: var(--para-measure);
	margin-block-end: 1.25rem;
	color: var(--para-ink-soft);
	font-size: 1rem;
	line-height: 1.72;
}

.para-brand-hub__intro > p:first-of-type {
	color: var(--para-ink);
	font-size: 1.06rem;
}

.para-reviewer {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-block: 0 2rem;
	padding: 0.45rem 0.9rem;
	background: var(--para-green-tint);
	border-radius: 100px;
	font-size: 0.8rem;
	color: var(--para-ink);
}

.para-reviewer > span:first-child {
	color: var(--para-ink-soft);
}

.para-reviewer__name {
	font-weight: 700;
}

/* ------------------------------------------------------------------ FAQ */

.para-brand-hub__faq {
	max-width: var(--para-measure);
	margin-block: 3rem 2rem;
}

.para-brand-hub__faq > h2 {
	margin: 0 0 1.1rem;
	color: var(--para-ink);
	font-size: clamp(1.35rem, 2.6vw, 1.8rem);
}

.para-brand-hub__faq details {
	border-block-end: 1px solid var(--para-rule);
}

.para-brand-hub__faq details:first-of-type {
	border-block-start: 1px solid var(--para-rule);
}

.para-brand-hub__faq summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 0;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	color: var(--para-ink);
}

.para-brand-hub__faq summary::-webkit-details-marker {
	display: none;
}

.para-brand-hub__faq summary::after {
	content: '';
	flex: 0 0 auto;
	margin-inline-start: auto;
	width: 0.48em;
	height: 0.48em;
	border-inline-end: 2px solid var(--para-green);
	border-block-end: 2px solid var(--para-green);
	transform: rotate(45deg) translateY(-0.15em);
	transition: transform 0.25s ease;
}

.para-brand-hub__faq details[open] summary::after {
	transform: rotate(-135deg) translateY(-0.15em);
}

.para-brand-hub__faq details p {
	margin: 0 0 1.1rem;
	max-width: 62ch;
	color: var(--para-ink-soft);
	line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
	.para-brand-hub__faq summary::after {
		transition: none;
	}
}

@media (max-width: 40rem) {
	.para-reviewer {
		width: 100%;
	}
}