/*
 * About us (page-templates/full-width.php, inc/about.php, parts/ds-about.php).
 *
 * Laid out after thebrandbrew.in/about-us, section for section:
 *   dark banner (title, one line, rule, Home | About us)
 *   light band: small caps eyebrow, bold lead, paragraph, big mark on the right,
 *               then Deepali's photo with the story beside it
 *   FAQ band: "FAQs" / "KNOW THE PROCESS", pill rows with a round chevron
 * in the D Story palette (ink, cream, gold) and type (Inter, Fira Sans). The
 * banner and the FAQ band sit on the brand gold (#b9903d) with ink type — cream
 * type on that gold would not be readable at body sizes.
 *
 * Both renderings share these rules: the Elementor layout and the theme's own
 * markup use the same class names. Selectors stay at low specificity so the
 * style controls in Elementor (per-element CSS) still override them.
 */

.dsa-page {
	--dsa-gutter: 40px;
	--dsa-pad: var(--dsa-gutter);
	--dsa-dark: #242820;
	--dsa-dark-2: #2d3129;
	--dsa-light: #fffcf6;
	--dsa-on-dark: #eee7da;
	--dsa-on-dark-soft: rgba(238, 231, 218, 0.72);
	--dsa-line-dark: rgba(238, 231, 218, 0.4);
	--dsa-gold: #b9903d;
	--dsa-on-gold: #242820;
	--dsa-on-gold-soft: rgba(36, 40, 32, 0.82);
	--dsa-line-gold: rgba(36, 40, 32, 0.32);
	--dsa-faq-open: #eee7da;
}

.dsa-page > .elementor,
.dsa-native {
	width: 100%;
}

/* ---------- Full-width bands ----------
 * As on the reference, every band runs edge to edge; the text inside keeps to
 * the site's 1200px grid. 100vw includes the scrollbar, hence the clip. */

body.page-template-page-templates-full-width {
	overflow-x: clip;
}

.dsa-page.dsa-page :is(.dsa-hero, .dsa-intro, .dsa-split, .dsa-faq),
.dsa-page.dsa-page .ds-dark {
	--dsa-pad: max(var(--dsa-gutter), calc(50vw - 600px + var(--dsa-gutter)));
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.dsa-page .ds-dark {
	padding-inline: var(--dsa-pad);
}

/* ---------- Containers ---------- */

.dsa-page .e-con {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 0px;
	/* Elementor spaces widgets with its own row/column gap (20px by default);
	   tie them to --gap so both renderings space things the same way. */
	--row-gap: var(--gap);
	--column-gap: var(--gap);
	--widgets-spacing-row: var(--gap);
	--widgets-spacing-column: var(--gap);
}

/* Elementor lays out its own containers; the theme's markup needs the same box. */
.dsa-native .e-con {
	display: flex;
	flex-direction: var(--flex-direction, column);
	align-items: var(--align-items, stretch);
	justify-content: var(--justify-content, flex-start);
	gap: var(--gap);
	width: 100%;
	padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
}

.dsa-page .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

.dsa-page .elementor-heading-title {
	margin: 0;
}

.dsa-page :is(.dsa-body, .dsa-hero__lead, .dsa-crumbs) p {
	margin: 0;
}

.dsa-page .dsa-body p + p {
	margin-top: 14px;
}

/* ---------- Dark banner ---------- */

.dsa-page .dsa-hero {
	--padding-top: 132px;
	--padding-right: var(--dsa-pad);
	--padding-bottom: 0px;
	--padding-left: var(--dsa-pad);
	background: var(--dsa-gold);
	color: var(--dsa-on-gold);
}

.dsa-page .dsa-hero__title .elementor-heading-title {
	font: 700 clamp(40px, 5vw, 60px) / 1.1 var(--ds-inter);
	letter-spacing: -0.025em;
	color: var(--dsa-on-gold);
}

.dsa-page .dsa-hero__lead {
	margin-top: 14px;
	font: 400 18px/1.5 var(--ds-fira);
	color: var(--dsa-on-gold);
}

.dsa-page .dsa-crumbs {
	/* The rule runs on to the right edge of the band, as on the reference. */
	--container-widget-width: calc(100% + var(--dsa-pad));
	width: calc(100% + var(--dsa-pad));
	max-width: none;
	margin: 36px 0 0;
	padding: 22px 0 24px;
	border-top: 1px solid var(--dsa-line-gold);
	font: 700 13px/1 var(--ds-fira);
	color: var(--dsa-on-gold);
}

/* Elementor caps widgets at max-width:100% with a four-class selector. */
.dsa-page.dsa-page .dsa-hero .dsa-crumbs.dsa-crumbs {
	max-width: none;
}

.dsa-page .dsa-crumbs a {
	color: var(--dsa-on-gold);
	text-decoration: none;
	transition: color 0.2s ease;
}

.dsa-page .dsa-crumbs a:hover {
	color: var(--ds-cream, #fffcf6);
}

.dsa-page .dsa-crumbs span::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 13px;
	margin: 0 20px;
	background: var(--dsa-line-gold);
	vertical-align: -2px;
}

/* ---------- Light band: intro, photos, story ---------- */

.dsa-page :is(.dsa-intro, .dsa-split) {
	background: var(--dsa-light);
	color: var(--ds-ink);
}

.dsa-page .dsa-intro {
	--flex-direction: row;
	--align-items: flex-start;
	--justify-content: space-between;
	--padding-top: 56px;
	--padding-right: var(--dsa-pad);
	--padding-bottom: 20px;
	--padding-left: var(--dsa-pad);
	--gap: 40px;
}

.dsa-page .dsa-intro__copy {
	--flex-direction: column;
	--width: auto;
	flex: 1 1 0;
	max-width: 640px;
}

.dsa-page .dsa-eyebrow .elementor-heading-title {
	font: 700 12px/1.3 var(--ds-fira);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ds-ink);
}

.dsa-page .dsa-intro__lead {
	margin-top: 36px;
}

.dsa-page .dsa-intro__lead .elementor-heading-title {
	font: 700 16px/1.45 var(--ds-fira);
	letter-spacing: 0;
	color: var(--ds-ink);
}

.dsa-page .dsa-intro .dsa-body {
	margin-top: 36px;
}

.dsa-page .dsa-body {
	font: 400 16px/1.7 var(--ds-fira);
	color: rgba(36, 40, 32, 0.84);
}

.dsa-page .dsa-body strong {
	font-weight: 700;
	color: var(--ds-ink);
}

.dsa-page .dsa-intro__mark {
	--container-widget-width: 230px;
	flex: 0 0 230px;
	width: 230px;
	line-height: 0;
}

.dsa-page .dsa-intro__mark img {
	width: 100%;
	height: auto;
	opacity: 0.35;
	filter: grayscale(1);
	transition: opacity 0.5s ease, filter 0.5s ease;
}

.dsa-page .dsa-intro__mark:hover img {
	opacity: 1;
	filter: none;
}

/* Deepali's photo on the left, the story beside it. */
.dsa-page .dsa-split {
	--flex-direction: row;
	--align-items: center;
	--padding-top: 24px;
	--padding-right: var(--dsa-pad);
	--padding-bottom: 64px;
	--padding-left: var(--dsa-pad);
	--gap: 56px;
	align-items: center;
}

.dsa-page .dsa-split__img {
	--container-widget-width: auto;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	border-radius: 4px;
	line-height: 0;
}

.dsa-page .dsa-split__img img {
	display: block;
	width: 100%;
	height: auto;
	/* Square: a portrait loses nothing, and a landscape swapped in via Elementor
	   is cropped from the middle. */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: scale 0.8s ease;
}

.dsa-page .dsa-split__copy {
	--container-widget-width: auto;
	flex: 1 1 0;
	min-width: 0;
}

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

.dsa-page .dsa-faq {
	--padding-top: 40px;
	--padding-right: var(--dsa-pad);
	--padding-bottom: 96px;
	--padding-left: var(--dsa-pad);
	background: var(--dsa-gold);
	color: var(--dsa-on-gold);
}

.dsa-page .dsa-faq__title .elementor-heading-title {
	font: 700 44px/1.1 var(--ds-inter);
	letter-spacing: -0.02em;
	color: var(--dsa-on-gold);
}

.dsa-page .dsa-faq__sub .elementor-heading-title {
	font: 700 30px/1.15 var(--ds-inter);
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--dsa-on-gold);
}

.dsa-page .dsa-accordion {
	margin-top: 40px;
}

.dsa-page .dsa-accordion :is(.elementor-accordion, .elementor-toggle) {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dsa-page .dsa-accordion :is(.elementor-accordion-item, .elementor-toggle-item),
.dsa-page .dsa-accordion .elementor-accordion-item + :is(.elementor-accordion-item, .elementor-toggle-item) {
	margin: 0;
	border: 1px solid var(--dsa-line-gold);
	border-radius: 30px;
	overflow: hidden;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.dsa-page .dsa-accordion :is(.elementor-accordion-item, .elementor-toggle-item):has(.elementor-active),
.dsa-page .dsa-accordion :is(.elementor-accordion-item, .elementor-toggle-item)[open] {
	border-color: var(--dsa-on-gold);
	background: var(--dsa-faq-open);
	box-shadow: 0 14px 30px -18px rgba(36, 40, 32, 0.55);
}

.dsa-page .dsa-accordion .elementor-tab-title {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	padding: 8px 9px 8px 38px;
	border: 0;
	font: 700 16px/1.35 var(--ds-fira);
	color: var(--dsa-on-gold);
	cursor: pointer;
	list-style: none;
}

.dsa-page .dsa-accordion summary::-webkit-details-marker {
	display: none;
}

.dsa-page .dsa-accordion :is(.elementor-accordion-title, .elementor-toggle-title) {
	color: var(--dsa-on-gold);
	text-decoration: none;
}

.dsa-page .dsa-accordion :is(.elementor-accordion-icon, .elementor-toggle-icon) {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--dsa-line-gold);
	border-radius: 50%;
	font-size: 12px;
	color: var(--dsa-on-gold);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, rotate 0.3s ease;
}

.dsa-page .dsa-accordion :is(.elementor-accordion-icon, .elementor-toggle-icon) svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}

.dsa-page .dsa-accordion :is(.elementor-accordion-icon, .elementor-toggle-icon) > svg {
	fill: none;
}

.dsa-page .dsa-accordion .elementor-active :is(.elementor-accordion-icon, .elementor-toggle-icon),
.dsa-page .dsa-accordion [open] :is(.elementor-accordion-icon, .elementor-toggle-icon) {
	border-color: var(--dsa-on-gold);
	background: var(--dsa-on-gold);
	color: var(--dsa-gold);
}

.dsa-page .dsa-accordion [open] :is(.elementor-accordion-icon, .elementor-toggle-icon) {
	rotate: 180deg;
}

.dsa-page .dsa-accordion .elementor-tab-content {
	padding: 0 38px 24px;
	border: 0;
	font: 400 16px/1.65 var(--ds-fira);
	color: var(--dsa-on-gold-soft);
}

.dsa-page .dsa-accordion .elementor-tab-content :is(p, ul) {
	margin: 0;
}

.dsa-page .dsa-accordion .elementor-tab-content ul {
	display: grid;
	gap: 8px;
	padding-left: 1.2em;
}

.dsa-page .dsa-accordion .elementor-tab-content li::marker {
	color: var(--dsa-on-gold);
}

.dsa-page .dsa-accordion .elementor-tab-content strong {
	color: var(--dsa-on-gold);
}

.dsa-page .dsa-accordion .elementor-tab-content a {
	color: var(--dsa-on-gold);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Room above the call-to-action band that follows the FAQs. */
.dsa-page .ds-dark {
	padding-top: 72px;
}

/* ---------- Motion ---------- */

@media (hover: hover) {
	.dsa-page .dsa-split__img:hover img {
		scale: 1.05;
	}

	.dsa-page .dsa-accordion :is(.elementor-accordion-item, .elementor-toggle-item):hover {
		border-color: var(--dsa-on-gold);
	}

	.dsa-page .dsa-accordion .elementor-tab-title:hover :is(.elementor-accordion-icon, .elementor-toggle-icon) {
		border-color: var(--dsa-on-gold);
		background: var(--dsa-on-gold);
		color: var(--dsa-gold);
	}
}

/* ---------- Tablets ---------- */

@media (max-width: 1199.98px) {
	.dsa-page .dsa-intro__mark {
		--container-widget-width: 180px;
		flex-basis: 180px;
		width: 180px;
	}

	.dsa-page .dsa-split {
		--gap: 36px;
	}
}

/* ---------- Phones ---------- */

@media (max-width: 809.98px) {
	.dsa-page {
		--dsa-gutter: 20px;
	}

	.dsa-page .dsa-hero {
		--padding-top: 72px;
	}

	.dsa-page .dsa-hero__lead {
		font-size: 16px;
	}

	.dsa-page .dsa-crumbs {
		margin-top: 28px;
	}

	/* One column: plain block flow rather than flex. On iPhones the intro's text
	   was laid out side by side (the lead pushed right of the eyebrow and off the
	   screen, the paragraph out of view), and block flow cannot do that whatever
	   Elementor's container settings say. The mark is hidden here anyway. */
	.dsa-page .dsa-intro.dsa-intro,
	.dsa-page .dsa-intro__copy.dsa-intro__copy,
	.dsa-page .dsa-split.dsa-split {
		display: block;
	}

	.dsa-page .dsa-intro {
		--padding-top: 40px;
	}

	.dsa-page .dsa-intro__copy.dsa-intro__copy,
	.dsa-page .dsa-intro__copy > *,
	.dsa-page .dsa-split > * {
		width: 100%;
		max-width: none;
	}

	.dsa-page .dsa-intro__copy {
		max-width: none;
	}

	.dsa-page .dsa-intro__lead,
	.dsa-page .dsa-intro .dsa-body {
		margin-top: 22px;
	}

	/* The big D mark is decoration; on phones it only pushes the text down. */
	.dsa-page .dsa-intro__mark {
		display: none;
	}

	.dsa-page .dsa-split {
		--padding-top: 12px;
		--padding-bottom: 40px;
	}

	.dsa-page .dsa-split__copy {
		margin-top: 24px;
	}

	.dsa-page .dsa-faq {
		--padding-top: 40px;
		--padding-bottom: 64px;
	}

	.dsa-page .dsa-faq__title .elementor-heading-title {
		font-size: 36px;
	}

	.dsa-page .dsa-faq__sub .elementor-heading-title {
		font-size: 22px;
	}

	.dsa-page .dsa-accordion {
		margin-top: 28px;
	}

	.dsa-page .dsa-accordion .elementor-tab-title {
		padding: 8px 8px 8px 22px;
		font-size: 15px;
	}

	.dsa-page .dsa-accordion :is(.elementor-accordion-item, .elementor-toggle-item) {
		border-radius: 26px;
	}

	.dsa-page .dsa-accordion .elementor-tab-content {
		padding: 0 22px 20px;
		font-size: 15px;
	}
}