/* Buttercup Childcare - FAQ accordion.

   The skin below is measured off the live Squarespace/Elfsight accordion at
   https://www.buttercupchildcare.ie/faqs on 21 Aug 2026 (probes:
   scrape/faq-skin-probe2.js, scrape/faq-skin-ours.js). Live's own numbers,
   identical at 1440 and 390 - the widget carries no breakpoint rule:

     item        background #fff, margin-bottom 10px, overflow hidden,
                 no border, no radius, no shadow
     question    background rgb(233,206,176), colour rgb(84,53,78),
                 19px / 600 / 26px line-height, 24px padding,
                 0.3s transition, icon 16px at the 24px right inset
     opened      question turns #fff with black type, the plus rotates 45deg,
                 the item gains 0 3px 6px rgba(0,0,0,.1) and its
                 margin-bottom grows 10px -> 20px
     hover       nothing at all (cursor: pointer is the only affordance)
     answer      #fff, 16px / 28px line-height, padding 0 26px 30px
     category    24px / 600 / 31.2px line-height, black, margin 40px 0 38px

   Where we deliberately differ from live, and why:
     - question/answer type uses the site ink token rather than pure black;
       the two are indistinguishable (16.13:1 vs 21:1 on white) and it keeps
       the FAQ page on the same token as every other page.
     - the disclosure icon sits at 0.7 opacity, not live's 0.3. At 0.3 the
       plus measures ~1.5:1 against the sand panel, below the 3:1 WCAG 1.4.11
       floor for a meaningful graphic. 0.7 measures 3.55:1 on sand and 8.5:1
       on white and still reads as a soft, light plus.
     - answer body type is 400, not the site's 300. Live's widget sets 400 and
       ours read washed out beside it at 16px.
     - answer links are ink with an accent underline, not accent-coloured
       text. Accent orange on white measures 2.48:1, well under 4.5:1. Live's
       own answer links are body-coloured with no underline at all, which is
       worse: they are not identifiable as links. Ink + underline is both
       readable and identifiable.

   Measured contrast, all AA or better:
     question plum rgb(84,53,78) on sand rgb(233,206,176)  6.97:1
     question ink  #1d2129      on white when open        16.13:1
     answer   ink  #1d2129      on white                  16.13:1
     answer link underline accent on white (non-text)      2.48:1 - decorative
     category ink  #1d2129      on white                  16.13:1
     search field border rgba(29,33,41,.55) on white       3.69:1
     search placeholder rgba(29,33,41,.62) on white        4.54:1 */

:root {
	/* Live's accordion palette, sampled from the rendered widget. */
	--bc-faq-panel: rgb(233, 206, 176);
	--bc-faq-panel-ink: rgb(84, 53, 78);
}

/* Live's accordion measures 1016px wide (x=213 to x=1229), the same 1015px
   text column every other section on the site uses. */
.bc-faqs {
	max-width: 1015px;
	margin: 0 auto;
}

/* --- search ---------------------------------------------------------------
   Live's widget ships a search bar too, but with the
   eapps-faq-search-bar-container-hide class on it. We keep ours visible: 49
   questions across 5 groups is a lot to scan, and "parents cannot find
   things" is the complaint that started this job. */
.bc-faq-search {
	margin: 0;
}

.bc-faq-search input[type="search"] {
	width: 100%;
	padding: 14px 16px;
	font-family: var(--bc-font, inherit);
	font-size: 16px;
	line-height: 26px;
	border: 1px solid rgba(29, 33, 41, 0.55);
	border-radius: 4px;
	background: var(--bc-white, #fff);
	color: var(--bc-ink, #1d2129);
}

.bc-faq-search input[type="search"]::placeholder {
	color: rgba(29, 33, 41, 0.62);
	opacity: 1;
}

.bc-faq-search input[type="search"]:focus-visible {
	outline: 3px solid var(--bc-ink, #1d2129);
	outline-offset: 2px;
}

.bc-faq-noresults {
	margin: 14px 0 0;
	color: var(--bc-ink, #1d2129);
	font-weight: 500;
}

/* --- category -------------------------------------------------------------
   Live: category block margin-top 40px, title 24px/600/31.2px black with a
   38px bottom margin. 40 + 31.2 + 38 = the 109.19px gap measured between the
   last panel of one group and the first panel of the next. No breakpoint
   rule: 24px sits cleanly under the 35px page H1 at 390 and clearly above the
   19px questions, so the mobile ladder reads 35 / 24 / 19 / 16. */
.bc-faq-category {
	margin: 40px 0 0;
	scroll-margin-top: 190px;
}

.bc-faq-category-title {
	font-family: var(--bc-font, inherit);
	font-size: 24px;
	font-weight: 600;
	line-height: 31.2px;
	color: var(--bc-ink, #1d2129);
	text-align: left;
	margin: 0 0 38px;
	border: 0;
	padding: 0;
}

.bc-faq-items {
	border: 0;
}

/* --- panel ---------------------------------------------------------------- */
.bc-faq-item {
	background: var(--bc-white, #fff);
	border: 0;
	border-radius: 0;
	margin: 0 0 10px;
	overflow: hidden;
	transition: box-shadow 0.3s ease, margin-bottom 0.3s ease;
}

.bc-faq-items > .bc-faq-item:last-child {
	margin-bottom: 0;
}

/* Open panel: live lifts it off the page with a soft shadow and opens the
   10px stack gap to 20px. The class is set by faq.js; the :has() twin keeps
   the treatment correct if a stale faq.js is still cached. */
.bc-faq-item--open,
.bc-faq-item:has(.bc-faq-q[aria-expanded="true"]) {
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
}

.bc-faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 34px;
	padding: 24px;
	background: var(--bc-faq-panel, rgb(233, 206, 176));
	border: 0;
	text-align: left;
	cursor: pointer;
	font-family: var(--bc-font, inherit);
	font-size: 19px;
	font-weight: 600;
	line-height: 26px;
	color: var(--bc-faq-panel-ink, rgb(84, 53, 78));
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Live does nothing on hover - the pointer cursor is the whole affordance -
   so neither do we. Deliberate: a colour shift here would be a redesign. */

.bc-faq-q[aria-expanded="true"] {
	background: var(--bc-white, #fff);
	color: var(--bc-ink, #1d2129);
}

.bc-faq-q:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -3px;
}

.bc-faq-q-text {
	display: block;
	text-wrap: pretty;
}

/* Plus that rotates into a cross when the panel opens, as live's does. */
.bc-faq-q-icon {
	position: relative;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	opacity: 0.7;
	transition: transform 0.3s ease;
}

.bc-faq-q-icon::before,
.bc-faq-q-icon::after {
	content: "";
	position: absolute;
	background: currentColor;
}

.bc-faq-q-icon::before {
	top: 7px;
	left: 0;
	width: 16px;
	height: 2px;
}

.bc-faq-q-icon::after {
	top: 0;
	left: 7px;
	width: 2px;
	height: 16px;
}

.bc-faq-q[aria-expanded="true"] .bc-faq-q-icon {
	transform: rotate(45deg);
}

/* --- answer --------------------------------------------------------------- */
.bc-faq-a {
	background: var(--bc-white, #fff);
}

.bc-faq-a[hidden] {
	display: none;
}

.bc-faq-a-inner {
	padding: 0 26px 30px;
	font-size: 16px;
	/* The site body is 300 by design, matching live's page copy. Live's FAQ
	   answers are 400 and read appreciably darker inside the panel; at 300 on
	   16px ours looked washed out beside them. 400 here only. */
	font-weight: 400;
	line-height: 28px;
	color: var(--bc-ink, #1d2129);
}

.bc-faq-a-inner > *:first-child {
	margin-top: 0;
}

.bc-faq-a-inner > *:last-child {
	margin-bottom: 0;
}

/* Live stacks an answer's lines on line-height alone - every block inside the
   answer carries margin 0, so consecutive lines sit 28px apart. The imported
   answers use <div> per line, so those get 0 to match. A <p> keeps a 14px
   gap: that is what Georgina produces when she types a fresh paragraph in
   wp-admin, and paragraphs there really are separate thoughts. */
.bc-faq-a-inner p {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
}

.bc-faq-a-inner div {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
}

/* wpautop leaves an empty paragraph wherever the imported answer opens with a
   block element. It is invisible but it still spends its 14px. */
.bc-faq-a-inner p:empty {
	display: none;
}

.bc-faq-a-inner ul,
.bc-faq-a-inner ol {
	margin: 0;
	padding-left: 22px;
}

.bc-faq-a-inner li {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
}

/* Ink type with an accent underline. Accent-coloured link text measures
   2.48:1 on white and fails AA; the underline carries the affordance instead
   so the type can stay readable. */
.bc-faq-a-inner a {
	color: var(--bc-ink, #1d2129);
	text-decoration: underline;
	text-decoration-color: var(--bc-accent, #f48847);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.bc-faq-a-inner a:hover,
.bc-faq-a-inner a:focus-visible {
	color: var(--bc-accent-dark, #d96f30);
	text-decoration-color: var(--bc-accent-dark, #d96f30);
}

.bc-faq-item[hidden],
.bc-faq-category[hidden] {
	display: none;
}

/* Live carries no breakpoint rule on this widget: 19px questions, 24px
   padding, 16px/28px answers and the 24px category label are identical at
   390. Only the scroll offset changes, because our sticky header is shorter
   on mobile than the desktop one. */
@media (max-width: 620px) {
	.bc-faq-category {
		scroll-margin-top: 150px;
	}
}