/*
 * Information pages (template-parts/page/info-page.php): About us, Contact us,
 * Customer care, Shipping & delivery, Returns & refunds and FAQs, after the
 * reference store's Brand Story, Store Locator and FAQ pages. Values marked
 * [ref] were read from those pages' published CSS.
 */

/* Sand page band with the centred title, content on the same background. [ref] */
.info-page {
	background: var(--qilaada-color-sand);
}

.info-page__header {
	margin-bottom: var(--qilaada-section-spacing);
	text-align: center;
}

.info-page__title {
	margin: 0;
	font-size: var(--qilaada-text-h2);
	line-height: 1.4;
	overflow-wrap: anywhere;
}

/* Readable text column. [ref] 680px */
.info-page__content {
	max-width: var(--qilaada-container-xs);
	margin-inline: auto;
	overflow-wrap: anywhere;
}

.info-page__content > * {
	margin-block: 0;
}

.info-page__content > * + * {
	margin-block-start: var(--qilaada-space-4);
}

.info-page__content h2 {
	font-size: var(--qilaada-text-h4);
	line-height: 1.6;
}

.info-page__content > * + h2 {
	margin-block-start: 2.5rem;
}

.info-page__content :is(ul, ol) {
	display: grid;
	row-gap: 0.4em; /* [ref] */
	padding-inline-start: 1.25rem;
}

@media (min-width: 1024px) {
	.info-page__content > * + * {
		margin-block-start: var(--qilaada-space-5); /* [ref] 20px on desktop */
	}

	.info-page__content > * + h2 {
		margin-block-start: var(--qilaada-space-12);
	}
}

/* Contact us: the contact details as a card, each line with its icon. [ref] store card */
.info-page .contact-details {
	padding: var(--qilaada-space-6);
	border: 1px solid var(--qilaada-color-border-warm);
	border-radius: 0.5rem;
	background: var(--qilaada-color-white);
}

/* Classic themes wrap a Group's blocks in .wp-block-group__inner-container. */
.info-page :is(.contact-details, .contact-details > .wp-block-group__inner-container) {
	display: grid;
	gap: var(--qilaada-space-3);
}

.info-page .contact-details .contact-details__item {
	margin: 0;
}

.contact-details__item {
	position: relative;
	padding-inline-start: 1.75rem;
}

.contact-details__item::before {
	content: "";
	position: absolute;
	inset-block-start: 0.25em;
	inset-inline-start: 0;
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: var(--contact-icon) center / contain no-repeat;
	mask: var(--contact-icon) center / contain no-repeat;
}

.contact-details__item--whatsapp {
	--contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h3l1.5 4.5-2 1.5a11 11 0 0 0 5.5 5.5l1.5-2 4.5 1.5v3a2 2 0 0 1-2 2A16.5 16.5 0 0 1 4.5 5.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}

.contact-details__item--email {
	--contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='1'/%3E%3Cpath d='M4 6.5l8 6 8-6'/%3E%3C/svg%3E");
}

.contact-details__item--hours {
	--contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
}

.contact-details__item--social {
	--contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='4.5'/%3E%3Ccircle cx='12' cy='12' r='3.75'/%3E%3Cpath d='M16.75 7.25v.01'/%3E%3C/svg%3E");
}

/* Social profile text links ([qilaada_social_links]). */
.social-link {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* About us: story sections scrolling past a sticky photo card. [ref] images-with-text-scroll */
.story {
	display: grid;
	justify-items: center;
	row-gap: var(--qilaada-space-8);
}

.story__card {
	width: min(56vw, 27.5rem); /* [ref] */
	aspect-ratio: 2 / 3; /* [ref] portrait photo */
	overflow: hidden;
	background: var(--qilaada-color-placeholder);
}

.story__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.info-page--about .story__items {
	display: grid;
	row-gap: var(--qilaada-space-12);
	width: 100%;
	max-width: 26rem; /* [ref] 375px text column, widened for the longer copy */
	font-size: 0.9375rem; /* [ref] 15px */
	text-align: center;
}

.info-page__content.story__items > * + * {
	margin-block-start: 0;
}

.story__item > * {
	margin-block: 0;
}

.story__item > * + * {
	margin-block-start: var(--qilaada-space-4);
}

.info-page--about .story__item h2 {
	font-size: clamp(1.375rem, 1.146rem + 0.976vw, 2rem); /* [ref] h1 */
	font-weight: 700;
	line-height: 1.3;
}

.story__item ul {
	display: grid;
	row-gap: var(--qilaada-space-3);
	padding: 0;
	list-style: none;
}

/* Phones: each section fades in as it scrolls into view. */
.story--animated .story__item {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.story--animated .story__item.is-revealed {
	opacity: 1;
	transform: none;
}

@media (min-width: 1024px) {
	/* Photo card held in the middle of the screen while the sections scroll past it;
	   the section beside it is shown, the others fade out. */
	.story {
		--story-card-height: min(calc(100svh - var(--qilaada-header-height) - 6rem), 36rem);
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
		column-gap: var(--qilaada-space-12);
		max-width: calc(var(--qilaada-container-md) + 2 * var(--qilaada-gutter));
	}

	.story__media {
		width: 100%;
	}

	.story__card {
		position: sticky;
		inset-block-start: calc(var(--qilaada-header-height) + (100svh - var(--qilaada-header-height) - var(--story-card-height)) / 2);
		width: auto;
		height: var(--story-card-height);
		margin-inline: auto;
	}

	.info-page--about .story__items {
		row-gap: 30svh;
		padding-block-end: calc((100svh - var(--qilaada-header-height) - var(--story-card-height)) / 2);
	}

	.story__item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: var(--story-card-height);
	}

	.story--animated .story__item,
	.story--animated .story__item.is-revealed {
		opacity: 0.15;
		transform: none;
		transition: opacity 0.5s ease-out;
	}

	.story--animated .story__item.is-selected {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.story--animated .story__item {
		transition: none;
	}
}

/* FAQs: section menu beside the questions (desktop), section headings with
   icons, questions as accordions. [ref] 650px column, 1px rules, plus/minus toggle */
.info-page--faq .info-page__content {
	max-width: 40.625rem;
}

.faq__toc {
	display: none;
}

.faq__toc-item {
	font-size: var(--qilaada-text-sm);
	text-decoration: none;
	text-transform: uppercase;
	background: linear-gradient(currentColor, currentColor) 0 min(100%, 1.35em) / 0 1px no-repeat; /* [ref] */
	transition: background-size 0.3s ease-in-out;
}

.faq__toc-item:hover,
.faq__toc-item.is-active {
	color: inherit;
	background-size: 100% 1px;
}

@media (min-width: 1024px) {
	.faq {
		display: flex;
		align-items: start;
		justify-content: center;
		column-gap: 3.75rem; /* [ref] */
		max-width: calc(var(--qilaada-container-md) + 2 * var(--qilaada-gutter));
	}

	.faq__toc {
		position: sticky;
		inset-block-start: calc(var(--qilaada-header-height) + 1.25rem);
		display: grid;
		flex: 0 1 18.75rem; /* [ref] 150px to 300px */
		min-width: 9.375rem;
		align-content: start;
		justify-items: start;
		gap: 0.75rem;
	}

	.info-page--faq .faq__content {
		flex: 0 1 40.625rem;
		margin-inline: 0;
	}
}

.faq-category {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 1rem;
	scroll-margin-block-start: calc(var(--qilaada-header-height) + 1.25rem);
}

.faq-category::before {
	content: "";
	flex: none;
	width: 2rem;
	height: 2rem;
	background: currentColor;
	-webkit-mask: var(--faq-icon) center / contain no-repeat;
	mask: var(--faq-icon) center / contain no-repeat;
}

.faq-category:not([class*="faq-category--"])::before {
	content: none;
}

.faq-category--box {
	--faq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5l8.5-4 8.5 4v9l-8.5 4-8.5-4z'/%3E%3Cpath d='M3.5 7.5l8.5 4 8.5-4M12 11.5v9'/%3E%3C/svg%3E");
}

.faq-category--plane {
	--faq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 3.5L3.5 10.5l6.5 2.5 2.5 7.5z'/%3E%3Cpath d='M10 13l5-4.5'/%3E%3C/svg%3E");
}

.faq-category--return {
	--faq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5v4.5H8'/%3E%3Cpath d='M4 9.5A8.5 8.5 0 1 1 3.5 13'/%3E%3C/svg%3E");
}

.faq-category--mail {
	--faq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='1'/%3E%3Cpath d='M4 6.5l8 6 8-6'/%3E%3C/svg%3E");
}

.faq__content > h2 + .wp-block-details {
	margin-block-start: 1.25rem; /* [ref] */
}

.faq__content > .wp-block-details + h2 {
	margin-block-start: var(--qilaada-space-12); /* [ref] 48px */
}

.info-page--faq .info-page__content > .wp-block-details + .wp-block-details {
	margin-block-start: 0;
}

.info-page .wp-block-details {
	border-block: 1px solid var(--qilaada-color-border-warm);
}

.info-page .wp-block-details + .wp-block-details {
	border-block-start-width: 0;
}

.info-page .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 0.625rem;
	padding-block: 1.25rem;
	font-size: var(--qilaada-text-lg);
	line-height: 1.5;
	cursor: pointer;
	list-style: none;
}

.info-page .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.info-page .wp-block-details > summary::after {
	content: "";
	flex: none;
	width: 0.625rem;
	height: 0.625rem;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
	transition: background-size 0.25s ease-in-out;
}

.info-page .wp-block-details[open] > summary::after {
	background-size: 100% 1px, 1px 0;
}

.info-page .wp-block-details > :not(summary) {
	margin-block: var(--qilaada-space-4) 0;
	padding-inline-end: 1.25rem;
}

.info-page .wp-block-details > summary + * {
	margin-block-start: -0.25rem;
}

.info-page .wp-block-details > :last-child:not(summary) {
	padding-block-end: 1.25rem;
}

@media (min-width: 1024px) {
	.info-page .wp-block-details > summary {
		padding-block: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.info-page .wp-block-details > summary::after {
		transition: none;
	}
}