/*
 * HELP-PAGES-01 (#711, Master Design v1 section 4): Contact, FAQ and Delivery & Payment.
 * Hand-written, loaded on those pages only (inc/help-pages.php), scoped to .ra-help. No build step.
 * Home v3 look: one latte ground, cards #fffdf9 with a 1px hairline, radius 14 for cards, 8 for the
 * button and the fields, 999 for the chips; Josefin Sans for the title, chips and button, Lato for the
 * text. The colours are listed once, here, light then dark (html[data-theme="dark"], the Home v3 dark
 * block); tests/themes/HelpPagesTest.php computes the 4.5:1 text contrast of every pair. Mobile first.
 */

.ra-help {
	--ra-help-bg: #f5f0e8;
	--ra-help-card: #fffdf9;
	--ra-help-line: #e4dbcd;
	--ra-help-chip-line: #cfc4b3;
	--ra-help-ink: #3e4546;
	--ra-help-text: #5c6364;
	--ra-help-muted: #5f6667;
	--ra-help-link: #7a5395;
	--ra-help-action: #875fa3;
	--ra-help-on-action: #ffffff;
	--ra-help-chip-on: #3e4546;
	--ra-help-on-chip: #f5f0e8;
	--ra-help-tab-line: #875fa3; /* the hairline of an inactive tab: the one purple fill (delta 18; C9 had a lilac #b9a3cf), the same in both schemes */
	--ra-help-sand: #e2d9ca;
	--ra-help-on-sand: #3e4546;
	--ra-help-olive: #5e7352;
	--ra-help-on-olive: #ffffff;
	--ra-help-faq-scrim-rgb: 32, 44, 27;
	--ra-help-head: 'Josefin Sans', 'Century Gothic', Futura, 'Trebuchet MS', Arial, sans-serif;

	background: var(--ra-help-bg);
	box-sizing: border-box;
	color: var(--ra-help-text);
	font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

html[data-theme='dark'] .ra-help {
	--ra-help-bg: #1a1917;
	--ra-help-card: #26231f;
	--ra-help-line: #3a3631;
	--ra-help-chip-line: #4a453f;
	--ra-help-ink: #f5f0e8;
	--ra-help-text: #d9d3c9;
	--ra-help-muted: #b4ada2;
	--ra-help-link: #b196cb;
	--ra-help-action: #875fa3;
	--ra-help-on-action: #ffffff;
	--ra-help-chip-on: #f5f0e8;
	--ra-help-on-chip: #1a1917;
	--ra-help-sand: #302c27;
	--ra-help-on-sand: #f5f0e8;
	--ra-help-olive: #5e7352;
	--ra-help-on-olive: #ffffff;
	--ra-help-faq-scrim-rgb: 32, 44, 27;
}

.ra-help *,
.ra-help *::before,
.ra-help *::after {
	box-sizing: inherit;
}

.ra-help__inner {
	margin: 0 auto;
	max-width: 1320px;
	padding: 28px 16px 56px;
}

/* Shared header: title and the three tab chips */
.ra-help__head {
	margin: 0 0 32px;
	text-align: center;
}

.ra-help .ra-help__title {
	color: var(--ra-help-ink);
	font-family: var(--ra-help-head);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 16px;
}

.ra-help__tabs ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ra-help .ra-help__chip {
	align-items: center;
	border: 1px solid var(--ra-help-chip-line);
	border-radius: 999px;
	color: var(--ra-help-ink);
	display: inline-flex;
	font-family: var(--ra-help-head);
	font-size: 15px;
	font-weight: 600;
	min-height: 44px;
	padding: 0 20px;
	text-decoration: none;
}

.ra-help .ra-help__chip[aria-current='page'] {
	background: var(--ra-help-chip-on);
	border-color: var(--ra-help-chip-on);
	color: var(--ra-help-on-chip);
}

/* The page tabs (Contact / FAQ / Delivery) are purple (Master design delta 17, item 9): the current one the action purple with white text,
   the others a lilac hairline with purple text. The FAQ's topic chips share the base chip above and stay ink: these rules are scoped to
   the tabs' own <nav>. The purple text is the same `--ra-help-link` the links use (lightened in the dark scheme). */
.ra-help .ra-help__tabs .ra-help__chip {
	border-color: var(--ra-help-tab-line);
	color: var(--ra-help-link);
}

.ra-help .ra-help__tabs .ra-help__chip[aria-current='page'] {
	background: var(--ra-help-action);
	border-color: var(--ra-help-action);
	color: var(--ra-help-on-action);
}

.ra-help .ra-help__chip:focus-visible,
.ra-help .ra-help-channel__link:focus-visible,
.ra-help .ra-help-form .wpcf7-submit:focus-visible {
	outline: 2px solid var(--ra-help-link);
	outline-offset: 2px;
}

/* Contact: the number band across the top, then the channel cards on the left and the form card on the right */
/* One column that may shrink: a grid with no template has an `auto` track, which is as wide as its widest item's minimum content, so the
   number band, the six channel cards and the form were 342px wide in a 248px column on a phone, 23px past the screen (PARITY-02 audit,
   #783 6251908651: the Telegram and Email cards and the form's right edge were cut off). `minmax(0, 1fr)` lets the track follow the column. */
.ra-help-contact {
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 1fr);
}

.ra-help-contact__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 1fr);
}

.ra-help-contact > *,
.ra-help-contact__grid > * {
	min-width: 0;
}

.ra-help-band {
	background: var(--ra-help-olive);
	border-radius: 14px;
	color: var(--ra-help-on-olive);
	padding: 24px 20px;
	text-align: center;
}

.ra-help .ra-help-band p {
	color: var(--ra-help-on-olive);
	margin: 0;
}

.ra-help .ra-help-band__eyebrow {
	font-family: var(--ra-help-head);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ra-help .ra-help-band__number {
	font-family: var(--ra-help-head);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.3;
	margin: 6px 0;
}

.ra-help .ra-help-band__line {
	font-size: 16px;
}

.ra-help-channels {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.ra-help .ra-help-channel__link {
	background: var(--ra-help-card);
	border: 1px solid var(--ra-help-line);
	border-radius: 14px;
	color: var(--ra-help-ink);
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	min-height: 44px;
	padding: 16px;
	text-decoration: none;
}

.ra-help-channel__icon {
	align-items: center;
	background: var(--ra-help-olive);
	border-radius: 999px;
	color: var(--ra-help-on-olive);
	display: inline-flex;
	height: 44px;
	justify-content: center;
	margin-bottom: 8px;
	width: 44px;
}

.ra-help-channel__icon .ra-icon {
	height: 22px;
	width: 22px;
}

.ra-help-channel__name {
	font-family: var(--ra-help-head);
	font-size: 18px;
	font-weight: 600;
}

.ra-help-channel__hint {
	color: var(--ra-help-muted);
	font-size: 14px;
}

.ra-help-form {
	background: var(--ra-help-card);
	border: 1px solid var(--ra-help-line);
	border-radius: 14px;
	padding: 20px;
}

.ra-help .ra-help-form__title {
	color: var(--ra-help-ink);
	font-family: var(--ra-help-head);
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 16px;
}

.ra-help-form .wpcf7-form p {
	margin: 0 0 14px;
}

.ra-help-form label {
	color: var(--ra-help-ink);
	display: block;
	font-size: 14px;
}

.ra-help-form input[type='text'],
.ra-help-form input[type='email'],
.ra-help-form input[type='tel'],
.ra-help-form textarea {
	background: var(--ra-help-bg);
	border: 1px solid var(--ra-help-chip-line);
	border-radius: 8px;
	color: var(--ra-help-ink);
	font: inherit;
	min-height: 44px;
	padding: 10px 12px;
	width: 100%;
}

.ra-help-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.ra-help .ra-help-form .wpcf7-acceptance a {
	color: var(--ra-help-link);
}

.ra-help .ra-help-form .wpcf7-submit {
	background: var(--ra-help-action);
	border: 0;
	border-radius: 8px;
	color: var(--ra-help-on-action);
	cursor: pointer;
	font-family: var(--ra-help-head);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.12em;
	min-height: 50px;
	padding: 0 32px;
	text-transform: uppercase;
	width: 100%;
}

/* Wholesale line and seller block (the previous Contacts page's sections) */
.ra-help .ra-contacts__section {
	margin: 32px 0 0;
}

.ra-help .ra-contacts__heading {
	color: var(--ra-help-ink);
	font-family: var(--ra-help-head);
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 8px;
}

.ra-help .ra-contacts__section a {
	color: var(--ra-help-link);
}

.ra-help .ra-contacts__seller-row dt {
	color: var(--ra-help-muted);
}

.ra-help .ra-contacts__seller-row dd {
	margin: 0 0 8px;
}

@media (min-width: 768px) {
	.ra-help__inner {
		padding: 40px 40px 80px;
	}

	.ra-help .ra-help__title {
		font-size: 30px;
	}

	.ra-help-contact__grid {
		align-items: start;
		gap: 32px;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	}

	.ra-help-channels {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ra-help .ra-help-band__number {
		font-size: 36px;
	}

	.ra-help-form {
		padding: 28px;
	}

	.ra-help .ra-help-form .wpcf7-submit {
		width: auto;
	}
}

/* FAQ: a photo card on the left (stacked above the questions on a phone), the chips and the accordion on the right */
.ra-help-faq {
	display: grid;
	gap: 24px;
}

.ra-help-faq__photo {
	aspect-ratio: 4 / 3;
	background: var(--ra-help-olive);
	border-radius: 14px;
	overflow: hidden;
	position: relative;
}

.ra-help-faq__img {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.ra-help-faq__scrim {
	background: linear-gradient(to top, rgba(var(--ra-help-faq-scrim-rgb), 0.94) 0, rgba(var(--ra-help-faq-scrim-rgb), 0.82) 55%, rgba(var(--ra-help-faq-scrim-rgb), 0) 100%);
	bottom: 0;
	left: 0;
	padding: 56px 20px 20px;
	position: absolute;
	right: 0;
}

.ra-help .ra-help-faq__title {
	color: var(--ra-help-on-olive);
	font-family: var(--ra-help-head);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 6px;
}

.ra-help .ra-help-faq__line {
	color: var(--ra-help-on-olive);
	margin: 0;
}

.ra-help .ra-help-faq__line a {
	color: var(--ra-help-on-olive);
	text-decoration: underline;
}

.ra-help-faq__chips ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.ra-help-faq__item {
	border-bottom: 1px solid var(--ra-help-line);
}

.ra-help-faq__item summary {
	align-items: center;
	box-sizing: border-box;
	color: var(--ra-help-ink);
	cursor: pointer;
	display: flex;
	font-weight: 700;
	gap: 12px;
	justify-content: space-between;
	list-style: none;
	min-height: 44px;
	padding: 6px 0;
}

.ra-help-faq__item summary::-webkit-details-marker {
	display: none;
}

.ra-help-faq__item summary::after {
	content: '+';
	flex: none;
	font-family: var(--ra-help-head);
	font-size: 22px;
	line-height: 1;
}

.ra-help-faq__item[open] summary::after {
	content: '\2212';
}

.ra-help-faq__item summary:focus-visible,
.ra-help .ra-help-faq__line a:focus-visible,
.ra-help .ra-help-faq__chips .ra-help__chip:focus-visible {
	outline: 2px solid var(--ra-help-link);
	outline-offset: 2px;
}

.ra-help-faq__item p {
	margin: 0 0 14px;
}

.ra-help .ra-help-faq__item a {
	color: var(--ra-help-link);
}

@media (min-width: 768px) {
	.ra-help-faq {
		gap: 40px;
		grid-template-columns: 1fr 1fr;
	}

	.ra-help-faq__photo {
		aspect-ratio: auto;
		min-height: 520px;
	}

	.ra-help .ra-help-faq__title {
		font-size: 30px;
	}
}

/* Delivery & Payment: the table in a radius-14 frame with a sand header, then three cards */
.ra-help-delivery__frame {
	background: var(--ra-help-card);
	border: 1px solid var(--ra-help-line);
	border-radius: 14px;
	overflow: hidden;
}

.ra-help-delivery__table {
	border-collapse: collapse;
	margin: 0;
	width: 100%;
}

.ra-help-delivery__table thead {
	display: none;
}

.ra-help-delivery__table tr {
	display: block;
	padding: 12px 16px;
}

.ra-help-delivery__table tr + tr {
	border-top: 1px solid var(--ra-help-line);
}

.ra-help-delivery__table td {
	border: 0;
	color: var(--ra-help-ink);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 4px 0;
	text-align: right;
}

.ra-help-delivery__cell {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: right;
}

.ra-help-delivery__line {
	display: block;
}

.ra-help .ra-help-delivery__ask {
	color: var(--ra-help-link);
	font-weight: 700;
	margin-top: 4px;
}

.ra-help-delivery__table td::before {
	color: var(--ra-help-muted);
	content: attr(data-label);
	font-family: var(--ra-help-head);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-align: left;
	text-transform: uppercase;
}

.ra-help-delivery__cards {
	display: grid;
	gap: 16px;
	margin-top: 24px;
}

.ra-help-delivery__card {
	background: var(--ra-help-card);
	border: 1px solid var(--ra-help-line);
	border-radius: 14px;
	padding: 20px;
}

.ra-help .ra-help-delivery__card h3 {
	color: var(--ra-help-ink);
	font-family: var(--ra-help-head);
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 8px;
}

.ra-help-delivery__card p {
	margin: 0 0 8px;
}

.ra-help-delivery__card ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ra-help-delivery__card li {
	display: flex;
	flex-direction: column;
	margin: 0 0 10px;
}

.ra-help-delivery__card li strong {
	color: var(--ra-help-ink);
}

.ra-help .ra-help-delivery__card a {
	color: var(--ra-help-link);
}

@media (min-width: 768px) {
	.ra-help-delivery__table thead {
		display: table-header-group;
	}

	.ra-help-delivery__table th {
		background: var(--ra-help-sand);
		color: var(--ra-help-on-sand);
		font-family: var(--ra-help-head);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.16em;
		padding: 14px 20px;
		text-align: left;
		text-transform: uppercase;
	}

	.ra-help-delivery__table tr {
		display: table-row;
		padding: 0;
	}

	.ra-help-delivery__table td {
		display: table-cell;
		padding: 16px 20px;
		text-align: left;
	}

	.ra-help-delivery__table td::before {
		content: none;
	}

	.ra-help-delivery__table td {
		vertical-align: top;
	}

	.ra-help-delivery__cell {
		text-align: left;
	}

	.ra-help-delivery__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* "Popular questions" (the phone's Contact page, Master design delta 17, C10): hidden until the phone block below shows it. */
.ra-help-popular {
	display: none;
}

/* Phone (under 768px, the file's own breakpoint), Master design delta 17, C10:
   - the theme's title banner becomes a 150px photo header: the herbs photo under a dark olive gradient (never lighter than 70%, so
     white text is 4.5:1 on any photo), the eyebrow "Help & contact" (translatable: `--ra-help-eyebrow`, set inline by
     ra_help_enqueue_css()) and the page's H1 in white. It is outside `.ra-help`, so it is keyed on the body class. The banner row's
     own background (a WPBakery custom class with !important), Home v3's rule that paints it latte (also !important, specificity
     0,5,1: hence the tripled body class, 0,6,1) and its spacers' inline heights are overruled.
   - the channels are three by two, compact: the hint (the e-mail address does not fit) is not shown.
   - the "Popular questions" card, with a thumb, leads to the FAQ. */
@media (max-width: 767px) {
	body.ra-help-page.ra-help-page.ra-help-page .top_panel .vc_row.vc_row-has-fill {
		background: linear-gradient(rgba(32, 44, 27, 0.72), rgba(32, 44, 27, 0.86)), url('../home/categories/category-herbs-teas-basket-640w.webp') center / cover no-repeat !important;
		border-bottom: 0;
	}

	body.ra-help-page.ra-help-page.ra-help-page .top_panel .vc_row.vc_row-has-fill .sc_content {
		padding-block: 0;
	}

	body.ra-help-page.ra-help-page.ra-help-page .top_panel .vc_row.vc_row-has-fill .sc_content_container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 150px;
	}

	body.ra-help-page.ra-help-page.ra-help-page .top_panel .vc_row.vc_row-has-fill .vc_empty_space {
		display: none !important;
	}

	body.ra-help-page.ra-help-page.ra-help-page .top_panel .vc_row.vc_row-has-fill .sc_layouts_title_breadcrumbs {
		display: none;
	}

	body.ra-help-page.ra-help-page.ra-help-page .top_panel .vc_row.vc_row-has-fill .sc_layouts_title_title::before {
		color: #ffffff;
		content: var(--ra-help-eyebrow, '');
		display: block;
		font-family: 'Josefin Sans', 'Century Gothic', Futura, 'Trebuchet MS', Arial, sans-serif;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.18em;
		margin-bottom: 6px;
		text-transform: uppercase;
	}

	body.ra-help-page.ra-help-page.ra-help-page .top_panel .vc_row.vc_row-has-fill h1.sc_layouts_title_caption {
		color: #ffffff !important;
		font-family: 'Josefin Sans', 'Century Gothic', Futura, 'Trebuchet MS', Arial, sans-serif;
		font-size: 28px;
		font-weight: 600;
		line-height: 1.2;
		margin: 0;
		text-transform: none;
	}

	.ra-help-channels {
		gap: 8px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ra-help .ra-help-channel__link {
		align-items: center;
		padding: 12px 6px;
		text-align: center;
	}

	.ra-help-channel__icon {
		height: 40px;
		margin-bottom: 4px;
		width: 40px;
	}

	.ra-help-channel__name {
		font-size: 14px;
	}

	.ra-help-channel__hint {
		display: none;
	}

	.ra-help .ra-help-popular {
		align-items: center;
		background: var(--ra-help-card);
		border: 1px solid var(--ra-help-line);
		border-radius: 14px;
		color: var(--ra-help-ink);
		display: flex;
		gap: 12px;
		min-height: 44px;
		padding: 12px;
		text-decoration: none;
	}

	.ra-help-popular__thumb {
		border-radius: 10px;
		flex: none;
		height: 56px;
		object-fit: cover;
		width: 56px;
	}

	.ra-help .ra-help-popular__text {
		display: grid;
		gap: 2px;
	}

	.ra-help .ra-help-popular__title {
		color: var(--ra-help-ink);
		font-family: var(--ra-help-head);
		font-size: 16px;
		font-weight: 600;
	}

	.ra-help .ra-help-popular__sub {
		color: var(--ra-help-muted);
		font-size: 14px;
	}

	.ra-help .ra-help-popular:focus-visible {
		outline: 2px solid var(--ra-help-link);
		outline-offset: 2px;
	}

	/* The parent theme keeps the content in a fixed column, 280px wide with 55px margins at 390px (with !important), so the page had
	   248px for the number band, the cards and the form: the Cloudflare widget in the form is 300px wide and pushed the whole page
	   23px past the screen (PARITY-02 audit, #783 6251908651). On a phone the column is lifted, as on Our Story and the front page;
	   .ra-help__inner pads the content (16px), which leaves the form card 318px inside. */
	body.ra-help-page .page_content_wrap > .content_wrap,
	body.ra-help-page .page_content_wrap > .content_wrap > .content {
		margin: 0 !important;
		max-width: none !important;
		padding: 0 !important;
		width: 100% !important;
	}
}