/*
 * SRX Product Tabs - Accordion Styles
 *
 * Author:  MJ Bomar
 * Version: 1.1.0
 *
 * The look of the product information accordion on the product page: a light gray band
 * holding a centered heading above a white card, one row per tab with a hairline between
 * rows (none under the last), the title on the left
 * and a chevron on the right that turns when the row opens, and a hairline between an
 * open title and its content. Two-column rows sit side by side on wide screens and stack
 * on phones. WordPress's core Accordion block handles the opening and closing; this file
 * is only the look. Loaded only on pages where the accordion prints.
 *
 * Everything hangs off the srx-product-tabs class so nothing here leaks into the FAQs or
 * Resource Center accordions, which keep their own skin.
 *
 * Changelog:
 * 1.1.0 (2026-11-05) - Team feedback: an open row's title bar fills with the deep
 *   brand purple (#371D4F) with white text and chevron, and returns to the plain look
 *   when the row closes. The bar now reaches 12px past the title on each side so the
 *   color has room around the text while the title stays lined up with its content.
 * 1.0.6 (2026-11-04) - Band tint eased from 60% to 40%.
 * 1.0.5 (2026-11-04) - The band behind the section is now the footer's rose quartz
 *   (#EEEBE6) at 60% opacity instead of the light gray, so it matches the footer while
 *   staying subtle.
 * 1.0.4 (2026-11-04) - The slide transitions only switch on once the section carries
 *   the is-ready class (added by the renderer after the page has loaded). Before that
 *   the accordion's script re-applied the hidden attribute as it took over, and with
 *   transitions armed that one frame played as a quick open-and-close on refresh.
 * 1.0.3 (2026-11-04) - Images inside a tab (a Drug Facts label, for instance) always fit
 *   their column.
 * 1.0.2 (2026-11-04) - Smooth open and close. The core block hides a closed panel with
 *   the hidden attribute (display:none, nothing to animate), so a closed panel now stays
 *   in the layout as a grid row of zero height and slides open over 0.3 seconds, padding
 *   and opacity following. Closed panels stay invisible to screen readers and the
 *   keyboard. Visitors who ask for reduced motion get no animation.
 * 1.0.1 (2026-11-04) - Two fixes from the first look on Local: the last row no longer
 *   draws a line under itself, and the whole section sits on a light gray band (the
 *   site's light gray preset) so the white card stands off the white page the way the
 *   reference design does. Also the title weight and the chevron turn now hold their
 *   own against the theme's site-wide button rule and the core block's own icon
 *   rotation (see the comments on those rules).
 * 1.0.0 (2026-11-04) - First version, matched to the approved mockup.
 */

/* ===== The section ===== */
/* A soft band behind the heading and the card, so the white card stands off the white
   page instead of washing into it. The color is the footer's rose quartz (#EEEBE6,
   the site preset) at 40% so it reads as a faint tint that matches the footer without
   pulling attention away from the tabs. */
.srx-product-tabs {
	margin: 0;
	background: rgba(238, 235, 230, .4);
	border-radius: 12px;
	padding: 32px 40px 40px;
}

/* The heading above the card. */
.srx-product-tabs__heading {
	font-weight: 500;
	color: #371d4f;
	font-size: 1.4rem;
	text-align: center;
	margin: 0 0 16px;
	line-height: 1.3;
	text-wrap: balance;
}

/* The card: white, small rounding, no border, a soft shadow, padding on all sides. */
.srx-product-tabs__card {
	background: #fff;
	border: 0;
	border-radius: 8px;
	padding: 16px 24px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

/* ===== The rows ===== */
/* Every row draws its line underneath except the last one, and nothing above the first,
   so the card's own edges frame the list. */
.srx-product-tabs .wp-block-accordion {
	margin: 0;
}
.srx-product-tabs .wp-block-accordion-item {
	border-bottom: 1px solid #ebe6ee;
	margin: 0;
}
.srx-product-tabs .wp-block-accordion-item:last-child {
	border-bottom: 0;
}

/* The title row. The heading tag is there for structure and screen readers; visually
   the button inside it is the whole row, so the heading gets no margin and hands its
   font settings down to the button. */
.srx-product-tabs .wp-block-accordion-heading {
	margin: 0;
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.4;
}
/* The bar reaches 12px past the title's left and right edges (the negative margins)
   so that when it fills with purple on an open row the color has some room around the
   text, while the title itself stays lined up with the content below it. */
.srx-product-tabs .wp-block-accordion-heading__toggle {
	width: calc(100% + 24px);
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: #371d4f;
	text-align: left;
	cursor: pointer;
	padding: 8px 16px;
	margin: 0 -12px;
	font: inherit;
	/* The theme sets every button on the site to the light weight with an !important
	   flag (wp-custom-styles.css), so the medium weight needs the same flag to win. */
	font-weight: 500 !important;
	transition: background .2s ease, color .2s ease;
}
.srx-product-tabs .wp-block-accordion-heading__toggle:hover {
	background: #f4f1f6;
}
/* An open row's title bar fills with the deep brand purple and its text and chevron
   turn white; it goes back to the plain look when the row closes. */
.srx-product-tabs .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle,
.srx-product-tabs .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle:hover {
	background: #371d4f;
	color: #fff;
}
/* The core block underlines the title on hover; this design does not. */
.srx-product-tabs .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}
.srx-product-tabs .wp-block-accordion-heading__toggle-title {
	min-width: 0;
}

/* The chevron. The block's default icon is a plus sign character. Shrink that away and
   draw a chevron in its place; it points down while closed and turns to point up when
   the row opens. It uses the title color, so it stays purple like the title.
   The core block rotates the icon box itself when a row opens (to turn its plus into a
   cross), so the box is pinned here and the turn happens on the drawn chevron instead,
   which the block never touches. */
.srx-product-tabs .wp-block-accordion-heading__toggle-icon {
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	font-size: 0;
	display: inline-grid;
	place-items: center;
	transform: none !important;
	transition: none;
}
.srx-product-tabs .wp-block-accordion-heading__toggle-icon::before {
	content: "";
	width: 10px;
	height: 10px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
	transition: transform .25s ease;
}
.srx-product-tabs .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon::before {
	transform: translateY(3px) rotate(225deg);
}

/* While a row is open, a hairline separates its title from its content, the same weight
   as the lines between rows, so the open section reads as its own block. */
.srx-product-tabs .wp-block-accordion-item.is-open .wp-block-accordion-heading {
	border-bottom: 1px solid #ebe6ee;
}

/* ===== The content ===== */
/* The core block closes a panel by putting the hidden attribute on it, which the browser
   renders as display:none, so there is nothing to animate. These rules keep a closed
   panel in the layout at zero height instead: the panel is a one-row grid whose row
   shrinks from its content's height to nothing, and the padding and opacity follow. The
   content box clips so nothing shows while the row is collapsing. A closed panel is also
   made invisible to screen readers and the keyboard (visibility), with a small delay so
   it disappears after the collapse finishes rather than before it starts. */
.srx-product-tabs .wp-block-accordion-panel {
	display: grid;
	grid-template-rows: 1fr;
	padding: 20px 16px 24px;
	margin: 0;
	color: #1f1f1f;
	font-weight: 300;
	line-height: 1.6;
	opacity: 1;
	visibility: visible;
}
.srx-product-tabs .wp-block-accordion-panel > .srx-product-tabs__content {
	min-height: 0;
	overflow: hidden;
}
.srx-product-tabs .wp-block-accordion-panel[hidden] {
	display: grid;
	grid-template-rows: 0fr;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
	visibility: hidden;
	content-visibility: visible;
}
/* The slide only runs once the page has finished loading and the accordion's own
   script has taken over (the section gets the is-ready class then). Before that,
   the script re-applies the hidden attribute as it takes over, and with transitions
   armed that single frame played as a quick open and close on refresh. */
.srx-product-tabs.is-ready .wp-block-accordion-panel {
	transition: grid-template-rows .3s ease, padding .3s ease, opacity .25s ease .05s, visibility 0s linear 0s;
}
.srx-product-tabs.is-ready .wp-block-accordion-panel[hidden] {
	transition: grid-template-rows .3s ease, padding .3s ease, opacity .2s ease, visibility 0s linear .3s;
}
.srx-product-tabs .wp-block-accordion-panel > :first-child,
.srx-product-tabs__col > :first-child {
	margin-top: 0;
}
.srx-product-tabs .wp-block-accordion-panel > :last-child,
.srx-product-tabs__col > :last-child {
	margin-bottom: 0;
}

/* Images inside a tab (a Drug Facts label, for instance) always fit their column. */
.srx-product-tabs .wp-block-accordion-panel img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* A one-column row keeps its text at a comfortable reading width. */
.srx-product-tabs__content--single {
	max-width: 78ch;
}

/* A two-column row: equal columns side by side, stacking on narrow screens. Each column
   keeps a minimum width of zero so long words wrap inside it instead of pushing it out. */
.srx-product-tabs__content--two {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px 40px;
}
.srx-product-tabs__col {
	min-width: 0;
}

/* ===== Phones ===== */
@media (max-width: 640px) {
	.srx-product-tabs {
		padding: 20px 12px 24px;
		border-radius: 10px;
	}
	.srx-product-tabs__heading {
		font-size: 1.25rem;
	}
	.srx-product-tabs__card {
		padding: 8px 16px;
	}
	.srx-product-tabs .wp-block-accordion-heading {
		font-size: 1.05rem;
	}
	.srx-product-tabs .wp-block-accordion-heading__toggle {
		min-height: 56px;
		padding: 8px 12px;
		margin: 0 -10px;
		width: calc(100% + 20px);
	}
	.srx-product-tabs .wp-block-accordion-panel {
		padding: 16px 8px 20px;
	}
	.srx-product-tabs__content--two {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Respect visitors who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
	.srx-product-tabs .wp-block-accordion-heading__toggle,
	.srx-product-tabs .wp-block-accordion-heading__toggle-icon::before,
	.srx-product-tabs.is-ready .wp-block-accordion-panel,
	.srx-product-tabs.is-ready .wp-block-accordion-panel[hidden] {
		transition: none;
	}
}