/*
 * NS ISI — pixel-matched to NS Support Figma
 *   Collapsed: node 8631-8130  (component set 8631:8131 "Indication and ISI",
 *                               Property 1=default)
 *   Expanded:  node 8631-8132  (Property 1=Expanded)
 *   Designed width: 1116px
 *
 * === COLLAPSED (8631:8130) ===
 *   Root: flex column, hug height
 *   Heading Container (8631:8120): padding 20px 30px; gap 10px;
 *                                  fill = Grey Gradient
 *                                  linear-gradient(270deg,
 *                                    rgba(234,236,238,0.2) 0%, #EAECEE 100%)
 *   Heading and button (8631:8113): flex row; justify-content:space-between;
 *                                   align-items:center; align-self:stretch
 *     Heading (8631:8114): Desktop/Heading/H4 → Source Sans Pro 600 21px/24px,
 *                          Navy #00406D
 *     Button (8631:8194): flex row; align-items:center; gap 6px
 *       Label (8631:8183): Button Label → 600 18px/24px, Navy — "Expand"
 *       Icon slot (8631:8184): 14×24 box; glyph 13×24;
 *                              Font Awesome Solid 900 14px/24px, Navy — "+"
 *
 * === EXPANDED (8631:8132) ===
 *   Heading Container (8631:8133): same padding 20px 30px, same gradient
 *     Label (8631:8230): "Collapse"
 *     Icon  (8631:8238): glyph 16×24; Font Awesome Regular 400 18px/24px — "−"
 *   Content Container (8631:8137): padding 0px 30px 30px; gap 10px;
 *                                  SAME Grey Gradient (continuous card, no seam)
 *     Content (8631:8138): flex column; align-self:stretch; gap 20px
 *       Indication (8631:8139): flex column; gap 8px
 *         H5   (8631:8140): Desktop/Heading/H5 → 600 18px/24px, #000
 *         Body (8631:8141): Source Sans Pro 400 16px/20px, #000,
 *                           paragraphSpacing 24
 *       ISI (8631:8142): flex column; gap 8px
 *         H5   (8631:8143): 600 18px/24px, #000
 *         Body (8631:8144): 400 18px/24px, #000, paragraphSpacing 12,
 *                           boldWeight 600; inline runs include 16/20 (ts1),
 *                           semibold (ts2) and semibold+underline link (ts3)
 *
 *   NOTE: the two body ramps genuinely differ in the design (Indication 16/20
 *   vs ISI 18/24). That is preserved via the per-section `size` attribute —
 *   .nscb-isi__section--small / --large. Do not normalise them.
 *
 * Toggle hover/focus colour: #00ADEE (Light Blue).
 *
 * === MOBILE (<= 768px) ===
 * From file 9EUwzu183qmPuyk9rkN5bm, component set 8899:12655
 * "Patient, Indication and ISI", designed width 320px:
 *   Collapsed: node 8912-12701
 *   Expanded:  node 8912-12721
 *
 *   Heading Container (8899:12657): padding 10px (all sides); gap 10px;
 *                                   same Grey Gradient
 *   Heading and button (8899:12658): row; space-between; align-items:center
 *     Heading (8899:12659): Mobile/Heading/H4 → 600 18px/21px, Navy #00406D;
 *                           sizing horizontal:fill (wraps, no nowrap)
 *     Button (8899:12660): row; align-items:center; gap 6px
 *       → ICON ONLY. The mobile component drops the "Expand"/"Collapse"
 *         text run entirely; the Slot (14×24 box, 13×24 glyph, FA Solid
 *         900 14px/24px Navy) is the button's only child.
 *   Content Container (8899:12661): padding 0px 10px 10px; gap 10px
 *     Content (8899:12662): column; gap 20px  (unchanged from desktop)
 *       Section (8899:12663 / 12666): column; gap 8px  (unchanged)
 *         Section title (8899:12664 / 12667): Mobile/Heading/H4 → 600 18/21
 *                                             (desktop uses H5 18/24)
 *         Body (8899:12665 / 12668): Mobile/Paragraph/Small → 400 14px/20px
 *                                    for BOTH sections — the desktop 16/20 vs
 *                                    18/24 split collapses to one ramp here.
 */

/* ==========================================================================
 * Card container
 * ========================================================================== */
.wp-block-ns-custom-isi.nscb-isi {
	/* ---------------------------------------------------------------------- *
	 * Defaults for the block. The editor may override any of these via inline
	 * `style="--nscb-isi-*: ..."` on the wrapper (see getWrapperStyle in
	 * index.js). Kept here so the front end has a canonical baseline even when
	 * no editor overrides are emitted.
	 * ---------------------------------------------------------------------- */
	--nscb-isi-heading-color:  #00406D; /* Navy */
	--nscb-isi-text-color:     #000000;
	--nscb-isi-hover-color:    #00ADEE; /* Light Blue */
	--nscb-isi-gradient-color: #EAECEE;
	--nscb-isi-bg: linear-gradient( 270deg, rgba( 234, 236, 238, 0.2 ) 0%, var(--nscb-isi-gradient-color) 100% );

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--nscb-isi-bg);
	color: var(--nscb-isi-text-color);
	font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
	margin-bottom: 50px;
}

.nscb-isi *,
.nscb-isi *::before,
.nscb-isi *::after {
	box-sizing: border-box;
}

/* ==========================================================================
 * Heading row — Figma "Heading Container" 8631:8120 / 8631:8133
 * ========================================================================== */
.nscb-isi__head {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	gap: 10px;
	padding: 20px 30px;
	margin: 0;
}

/* Heading — Desktop/Heading/H4 (8631:8114) */
.nscb-isi__title {
	margin: 0;
	padding: 0;
	color: var(--nscb-isi-heading-color);
	font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
	font-size: 21px;
	font-style: normal;
	font-weight: 600;
	line-height: 24px; /* 114.286% */
}

/* ==========================================================================
 * Expand / Collapse button — Figma "Button" 8631:8194 / 8631:8242
 * ========================================================================== */
.nscb-isi__toggle {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	flex: 0 0 auto;
	gap: 6px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	color: var(--nscb-isi-heading-color);
	font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 24px; /* 133.333% */
	text-align: left;
	white-space: nowrap;
	transition: color 150ms ease-in-out;
	-webkit-appearance: none;
	appearance: none;
}

/* Hover / focus — Light Blue. Both the label and the glyph shift together
 * because the icon inherits currentColor. */
.nscb-isi__toggle:hover,
.nscb-isi__toggle:focus-visible {
	color: var(--nscb-isi-hover-color);
	box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.125) !important;
	
}

.nscb-isi__toggle:focus-visible {
	outline: 2px solid var(--nscb-isi-hover-color);
	outline-offset: 3px;
}

.nscb-isi__toggle-label {
	display: inline-block;
	color: inherit;
}

/* Icon slot — Figma reserves a 14×24 box (8631:8184 / 8631:8231). */
.nscb-isi__toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 14px;
	height: 24px;
	color: inherit;
}

.nscb-isi__icon-svg {
	display: block;
	color: inherit;
}

.nscb-isi__icon-svg path {
	fill: currentColor;
}

/* Collapsed glyph: Solid 900 14px "+" (13×24 artwork). */
.nscb-isi__icon-svg--plus {
	width: 13px;
	height: 13px;
}

/* Expanded glyph: Regular 400 18px "−" (16×24 artwork). */
.nscb-isi__icon-svg--minus {
	width: 16px;
	height: 16px;
}

/* Only one glyph shows at a time, keyed off the button's own ARIA state so
 * view.js never has to touch the icons. */
.nscb-isi__toggle[aria-expanded="true"] .nscb-isi__icon-svg--plus,
.nscb-isi__toggle[aria-expanded="false"] .nscb-isi__icon-svg--minus {
	display: none;
}

/* ==========================================================================
 * Content panel — Figma "Content Container" 8631:8137
 * ========================================================================== */
/* Animated open/close — CSS only, no change to view.js.
 *
 * view.js toggles the `hidden` property, i.e. `display: none`, which normally
 * cannot animate. `allow-discrete` holds the box on screen for the duration
 * instead of dropping it on frame one, and `@starting-style` gives the opening
 * direction a value to animate from.
 *
 * The row track goes 0fr <-> 1fr, so the panel moves to its real content
 * height with no max-height ceiling to outgrow. Padding rides along or the
 * closed card keeps a gap under the heading.
 *
 * The transition is spelled out in BOTH states on purpose. A transition is
 * read from the state being animated to, so the closing direction needs its
 * own copy on [hidden] — with the declaration only on the base rule the panel
 * opened smoothly but snapped shut.
 *
 * Durations are written literally, NOT via a shared custom property. A
 * var() inside the transition shorthand resolves too late for the browser to
 * register the animation, so factoring these into one --var silently disables
 * the whole effect. Keep the four numbers in sync by hand.
 *
 * Needs Chrome/Edge 117+, Safari 17.4+, Firefox 129+; older browsers ignore it
 * and the panel simply snaps as it always did. */
.nscb-isi__content {
	align-self: stretch;
	display: grid;
	grid-template-rows: 1fr;
	padding: 0 30px 30px;
	/* Same gradient as the head so the card reads as one continuous surface. */
	background: transparent;
	overflow: hidden;
	transition:
		grid-template-rows 350ms ease,
		padding 350ms ease,
		display 350ms allow-discrete;
}

/* Collapsed. */
.nscb-isi__content[hidden] {
	/* Kept, not commented out: `allow-discrete` above defers this until the
	 * collapse has finished, and without it the panel stays in the layout and
	 * the a11y tree while closed. */
	/* display: none; */
	grid-template-rows: 0fr;
	padding: 0 30px;
	transition:
		grid-template-rows 350ms ease,
		padding 350ms ease,
		display 350ms allow-discrete;
}

@starting-style {
	.nscb-isi__content {
		grid-template-rows: 0fr;
		padding: 0 30px;
	}
}

/* The grid child must be allowed to shrink to zero, or its content props the
 * row open and the collapse does nothing. */
.nscb-isi__content > * {
	min-height: 0;
}

/* Content stack (8631:8138) — gap 20px between sections. */
.nscb-isi__content-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-self: stretch;
	gap: 20px;
}

/* Each section (8631:8139 / 8631:8142) — gap 8px title → body. */
.nscb-isi__section {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-self: stretch;
	gap: 8px;
}

/* Section title — Desktop/Heading/H5 (8631:8140 / 8631:8143). */
.nscb-isi__section-title {
	margin: 0;
	padding: 0;
	color: var(--nscb-isi-text-color);
	font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 24px; /* 133.333% */
}

.nscb-isi__section-body {
	margin: 0;
	padding: 0;
	color: var(--nscb-isi-text-color);
	font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
	font-style: normal;
	font-weight: 400;
}

.nscb-isi__section-body p {
	margin: 0;
}

/* Figma marks bold runs inside the ISI copy at weight 600, not 700. */
.nscb-isi__section-body strong,
.nscb-isi__section-body b {
	font-weight: 600;
}

/* Links (e.g. "Prescribing Information") — semibold + underline per ts3. */
.nscb-isi__section-body a ,
.nscb-isi__section-body p a {
	color: #000;
	font-weight: 600;
	text-decoration: underline;
	text-underline-position: from-font;
	text-decoration-thickness: from-font;
}
.entry-content .nscb-isi__section-body p a {
	color: #000 !important;
}

.nscb-isi__section-body a:hover,
.nscb-isi__section-body a:focus-visible {
	color: var(--nscb-isi-hover-color) !important;
}

/* -- Small ramp — Indication body 8631:8141: 400 16/20, paragraphSpacing 24 -- */
.nscb-isi__section--small .nscb-isi__section-body,
.nscb-isi__section--small .nscb-isi__section-body p {
	font-size: 16px;
	line-height: 20px; /* 125% */
}

.nscb-isi__section--small .nscb-isi__section-body p + p {
	margin-top: 12px;
}


/* -- Large ramp — ISI body 8631:8144: 400 18/24, paragraphSpacing 12 ------- */
.nscb-isi__section--large .nscb-isi__section-body ,
.nscb-isi__section--large .nscb-isi__section-body p {
	font-size: 18px;
	line-height: 24px; /* 133.333% */
}

.nscb-isi__section--large .nscb-isi__section-body p + p {
	margin-top: 12px;
}

/* ==========================================================================
 * Full / wide alignment
 * ========================================================================== */
.wp-block-ns-custom-isi.alignwide,
.wp-block-ns-custom-isi.alignfull {
	max-width: none;
}

.wp-block-ns-custom-isi.alignfull {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* ==========================================================================
 * Mobile — Figma 8912-12701 (collapsed) / 8912-12721 (expanded), 320px frame
 *
 * Only spacing, type ramp and the toggle label change; the box model and the
 * DOM are identical to desktop.
 * ========================================================================== */
@media ( max-width: 768px ) {

	/* Heading Container 8899:12657 — padding drops from 20/30 to a flat 10. */
	.nscb-isi__head {
		padding: 10px;
		gap: 10px;
		/* The whole row toggles the panel on mobile (see view.js), so it reads
		   and behaves as one hit target. Desktop leaves the title as ordinary
		   selectable text and keeps the button as the only trigger. */
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	/* Stops a tap-and-hold on the title turning into a text selection instead
	   of toggling the panel. */
	.nscb-isi__head .nscb-isi__title {
		-webkit-user-select: none;
		user-select: none;
	}

	/* Heading 8899:12659 — Mobile/Heading/H4 18/21, wraps within the row. */
	.nscb-isi__title {
		font-size: 18px;
		line-height: 21px; /* 116.667% */
	}

	/* Button 8899:12660 — icon only on mobile. The label is hidden visually
	 * but kept in the accessibility tree, so the control still announces
	 * "Expand"/"Collapse" to screen readers and view.js can keep swapping its
	 * text without knowing about the breakpoint. */
	.nscb-isi__toggle-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
		clip-path: inset( 50% );
		white-space: nowrap;
		border: 0;
	}

	/* With no label the 6px gap has nothing to separate; keep the 14×24 slot
	 * as the button's whole footprint. `position: relative` anchors the
	 * visually-hidden label above so it cannot escape to a positioned
	 * ancestor and reintroduce a scrollbar. */
	.nscb-isi__toggle {
		position: relative;
		gap: 0;
	}

	/* Content Container 8899:12661 — padding 0 10px 10px.
	 * Split across the two states so the bottom padding collapses with the
	 * track, mirroring the desktop rules above. Keyed off [hidden] (not a
	 * class) for the same reason: that is what view.js actually toggles. */
	.nscb-isi__content {
		padding: 0 10px 10px;
	}

	.nscb-isi__content[hidden] {
		padding: 0 10px;
	}

	@starting-style {
		.nscb-isi__content {
			padding: 0 10px;
		}
	}

	/* Section titles 8899:12664 / 12667 — Mobile/Heading/H4 18/21
	 * (desktop uses Desktop/Heading/H5 18/24). */
	.nscb-isi__section-title {
		font-size: 18px;
		line-height: 21px;
	}

	/* Body 8899:12665 / 12668 — Mobile/Paragraph/Small 14/20 for BOTH
	 * sections; the desktop 16/20 vs 18/24 split does not exist on mobile. */
	.nscb-isi__section--small .nscb-isi__section-body,
	.nscb-isi__section--small .nscb-isi__section-body p,
	.nscb-isi__section--large .nscb-isi__section-body,
	.nscb-isi__section--large .nscb-isi__section-body p {
		font-size: 14px;
		line-height: 20px; /* 142.857% */
	}
.wp-block-ns-custom-isi.nscb-isi {
	margin-bottom: 20px;
	z-index: 20;
  position: relative;
}

}

/* ==========================================================================
 * Motion
 *
 * The icon swap is instant (display), so it does not animate. The panel
 * animates its grid track, padding and opacity (see "Content panel" above)
 * while `hidden` still governs the resting state, keeping the collapsed panel
 * out of the a11y tree. All of it is CSS — view.js is untouched.
 * ========================================================================== */
@media ( prefers-reduced-motion: reduce ) {
	.nscb-isi__toggle,
	.nscb-isi__content {
		/* `display` is dropped from the transition here too, so the panel
		 * appears and disappears immediately rather than lingering for the
		 * duration with no visible movement. */
		transition: none;
	}
}