/* Aston Cross Housing — FAQ accordions.
   Colours come from Elementor's global palette where available, with the brand
   hexes as fallbacks so the shortcode still looks right outside Elementor. */

.ach-faqs {
	--ach-green: var(--e-global-color-primary, #065C39);
	--ach-navy: var(--e-global-color-secondary, #0A2D45);
	--ach-body: var(--e-global-color-text, #4A5560);
	--ach-surface: #F7F9FA;
	--ach-hairline: #E3E8EC;

	display: grid;
	gap: 14px 22px;
	align-items: start;
}

.ach-faqs--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ach-faqs--cols-1 { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 767px) {
	.ach-faqs--cols-2 { grid-template-columns: minmax(0, 1fr); }
}

.ach-faq {
	background: var(--ach-surface);
	border-radius: 5px;
	overflow: hidden;
}

.ach-faq__heading {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.ach-faq__question {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 16px 18px;
	border: 0;
	background: none;
	color: var(--ach-green);
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	/* Hello Elementor's reset puts `white-space: nowrap` on every <button> -- the
	   same declaration block as the #c36 pink below. Inherited by the label span,
	   it stopped questions wrapping, and `.ach-faq { overflow: hidden }` then
	   clipped the overhang instead of showing a scrollbar, so longer questions
	   simply lost their ending on narrow screens with nothing to show for it. */
	white-space: normal;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

/* Hello Elementor's reset paints bare <button> with #c36 (pink) on :hover AND
   :focus, so both states must be claimed here, not just :hover.
   Its `[type=button]:hover` selector ties this on specificity (0,2,0), which
   would leave the winner decided by stylesheet order -- fragile. The extra
   `.ach-faqs` ancestor takes it to (0,3,0) so this wins outright. */
.ach-faqs .ach-faq__question:hover,
.ach-faqs .ach-faq__question:focus,
.ach-faqs .ach-faq__question:active {
	background: var(--ach-green);
	color: #fff;
	text-decoration: none;
}

.ach-faqs .ach-faq__question:hover .ach-faq__marker,
.ach-faqs .ach-faq__question:focus .ach-faq__marker {
	border-color: #fff;
	color: #fff;
}

.ach-faqs .ach-faq__question:hover .ach-faq__chevron,
.ach-faqs .ach-faq__question:focus .ach-faq__chevron {
	border-right-color: #fff;
	border-bottom-color: #fff;
}

.ach-faqs .ach-faq__question:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* The circled question mark */
.ach-faq__marker {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 27px;
	height: 27px;
	border: 1.5px solid var(--ach-green);
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

/* min-width defaults to `auto` on a flex item, so this refuses to shrink
   below its longest unbroken text and pushes past the card -- which
   `.ach-faq { overflow: hidden }` then clips rather than wraps. On a phone
   that silently cut the end off longer questions. */
.ach-faq__text { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }

.ach-faq__chevron {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-left: 6px;
	border-right: 1.5px solid var(--ach-navy);
	border-bottom: 1.5px solid var(--ach-navy);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .18s ease;
}

.ach-faq.is-open .ach-faq__chevron {
	transform: rotate(225deg) translate(-2px, -2px);
}

.ach-faq__answer-inner {
	padding: 0 18px 16px 56px;
	color: var(--ach-body);
	font-size: 13.5px;
	line-height: 1.65;
	border-top: 1px solid var(--ach-hairline);
	padding-top: 13px;
}

.ach-faq__answer-inner > :first-child { margin-top: 0; }
.ach-faq__answer-inner > :last-child { margin-bottom: 0; }
.ach-faq__answer-inner ul { margin: 6px 0 0; padding-left: 17px; }
.ach-faq__answer-inner li { margin-bottom: 3px; }

/* 13.5px answer copy is fine beside a desktop question but too small to read
   comfortably on a phone. */
@media (max-width: 767px) {
	.ach-faq__answer-inner { font-size: 15px; padding-left: 18px; }
	.ach-faq__question { font-size: 15.5px; padding: 15px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.ach-faq__chevron { transition: none; }
}