/*
 * SRX - Shared Accordion Skin
 *
 * Author:  MJ Bomar
 * Version: 1.0.0
 *
 * The one site-wide look for accordions built on the WordPress core Accordion block:
 * soft rounded lavender bars, the open section filled with the deep brand purple with
 * white text, and a chevron that rotates when a section opens. Matched to the product
 * tabs accordion on mobile product pages so every accordion on the site reads as one
 * design. Applies at every screen size.
 *
 * Every rule hangs off the srx-accordion class, so nothing here leaks anywhere else.
 * To use the skin, give a core Accordion block the extra class "srx-accordion" (or
 * print it on the block's wrapper when rendering from PHP). Used today on the FAQs
 * page (markup from build/srx-faqs/srx-faqs.php) and the Resource Center page (the
 * Accordion block in the Resources template). Enqueued from functions.php on those
 * pages only.
 *
 * Changelog:
 * 1.0.0 (2026-07-13) - First version. Promoted from build/srx-faqs/srx-faqs.css 1.0.0
 *   (retired, backed up) when the Resource Center became the second page to need the
 *   same look. The rules are the FAQ skin rescoped from .srx-faqs to .srx-accordion,
 *   plus one addition at the bottom: card grids inside accordion panels relax to two
 *   columns on tablets and one on phones (they were built four-across in the editor,
 *   which never fit small screens). The colors, radius, and chevron are the same
 *   values as srx-product-tabs.css 1.1.0.
 */

/* ===== The bars ===== */
/* Space between sections. */
.srx-accordion .wp-block-accordion-item {
	margin: 0 0 10px;
}

/* The h3 around each section title. The heading tag is there for structure and screen
   readers; visually the button inside it is the whole bar, so the heading itself
   gets no margin and hands its font settings down to the button. */
.srx-accordion .wp-block-accordion-heading {
	margin: 0;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 300;
	line-height: 1.4;
}

/* The closed bar: soft lavender, rounded, deep purple text. Same values as the
   product tabs accordion. The core block already makes the button fill the full
   width with the title on the left and the icon on the right. */
.srx-accordion .wp-block-accordion-heading__toggle {
	background: #F4F1F6;
	border-radius: 10px;
	color: #371D4F;
	padding: 14px 16px;
	transition: background .25s ease;
}

/* The core block underlines the title on hover; the product tabs look does not,
   so turn that off. */
.srx-accordion .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

/* The open bar: fills with the deep brand purple, text goes white, and the bottom
   corners square off so the bar and its panel read as one connected card. */
.srx-accordion .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle {
	background: #371D4F;
	color: #fff;
	border-radius: 10px 10px 0 0;
	font-weight: 400;
}

/* ===== The content panel ===== */
/* The open content under the purple bar. Rounded on the bottom to finish the card.
   WordPress handles the actual showing and hiding; this is only the look. */
.srx-accordion .wp-block-accordion-panel {
	background: #FAF8FB;
	border-radius: 0 0 10px 10px;
	padding: 14px 16px;
	color: #1f1f1f;
	margin: 0;
}

/* Panel content brings its own spacing, so trim the extra space it would add at
   the very top and bottom of the panel. */
.srx-accordion .wp-block-accordion-panel > :first-child {
	margin-top: 0;
}
.srx-accordion .wp-block-accordion-panel > :last-child {
	margin-bottom: 0;
}

/* ===== The chevron ===== */
/* The block's default icon is a plus sign character. Shrink that character away and
   draw our chevron in its place, exactly like the product tabs accordion: it points
   down while the section is closed and rotates to point up when it opens. It uses
   the bar's text color, so it turns white on the open purple bar automatically.
   One catch: the block sizes the icon box in em units, so the font-size of zero that
   hides the plus sign would also collapse the box and let the chevron sit on top of
   long titles. The fixed width, height, and gap here keep the box open. */
.srx-accordion .wp-block-accordion-heading__toggle-icon {
	font-size: 0;
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-left: 12px;
}
.srx-accordion .wp-block-accordion-heading__toggle-icon::before {
	content: "\276F";
	font-size: .9rem;
	display: inline-block;
	line-height: 1;
	transform: rotate(90deg);
	transition: transform .3s ease;
}
.srx-accordion .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon::before {
	transform: rotate(-90deg);
}

/* ===== Card grids inside panels ===== */
/* The Resource Center's download cards are laid out by the editor as a fixed
   four-column grid, and a fixed count never adapts on its own, so phones were
   getting four squeezed columns. Desktop keeps the four-across design exactly as
   built; tablets relax to two columns and phones to one. Scoped to accordions
   wearing this skin, so no other grid on the site changes. */
@media (max-width: 781px) {
	.srx-accordion .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 480px) {
	.srx-accordion .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}