/* ==========================================================================
   Inner Resources · Workshop page components
   Accordions, Tabs, Tier Guide popover, Checklist, Steps, At-a-glance card

   Targets core WordPress blocks as they render on innerresourcestraining.org:
   core/accordion, core/tabs, core/list, core/group.
   Tab selectors use role/aria attributes, not class names, so they keep
   working if the (still young) core Tabs block changes its classes.

   File: /wp-content/themes/irti/assets/css/ir-components.css
   Enqueued on the front end and in the editor by ir-components.php.

   BEFORE THIS WILL LOOK RIGHT: apply the button fix in section 0 to the
   theme's style.css. Without it, the theme's global `button` rules
   (berry fill, 40px radius, black inset hover shadow, all !important)
   keep painting over the accordion toggles and tab buttons.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. THE FIX FOR style.css  (copy, don't uncomment here)
   --------------------------------------------------------------------------
   In themes/irti/style.css, two selector lists start with
   `a.button, button, ...` and `a.button:hover, a.button:focus,
   a.button:active, button:hover, button:focus, button:active, ...`.

   Replace every bare `button` in those two lists with the scoped version:

     button:where(:not(.wp-block-accordion-heading__toggle, [role="tab"], .ir-plain))

   and the state versions:

     button:where(:not(.wp-block-accordion-heading__toggle, [role="tab"], .ir-plain)):hover
     button:where(:not(.wp-block-accordion-heading__toggle, [role="tab"], .ir-plain)):focus
     button:where(:not(.wp-block-accordion-heading__toggle, [role="tab"], .ir-plain)):active

   The :where() wrapper matters. A plain :not() raises the selector's
   specificity, and in testing that turned the blue Add to Cart button and
   the clear mini-cart icon berry. :where() keeps it exactly as weak as the
   original `button`, so every other button on the site (Add to Cart,
   Forminator, search, Sensei, mini-cart) keeps its current look.
   `.ir-plain` is an opt-out class for any future custom <button>.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   1. TOKENS
   Everything below reads from theme.json presets, with hex fallbacks.
   -------------------------------------------------------------------------- */
:root {
	--ir-blue:       var(--wp--preset--color--the-blue, #2D3E58);
	--ir-berry:      var(--wp--preset--color--berry, #6D1B4C);
	--ir-eggplant:   var(--wp--preset--color--eggplant, #4A354F);
	--ir-olive:      var(--wp--preset--color--olive, #8E9459);
	--ir-ink:        var(--wp--preset--color--wet-stone, #4D4D4F);
	--ir-stone:      var(--wp--preset--color--stone, #77726B);
	--ir-dark-sand:  var(--wp--preset--color--dark-sand, #C0B4A1);
	--ir-sand:       var(--wp--preset--color--sand, #E5E5DA);
	--ir-light-sand: var(--wp--preset--color--light-sand, #F1F0E8);
	--ir-base:       var(--wp--preset--color--base, #F9F9F9);

	--ir-sans:  var(--wp--preset--font-family--brandon-grotesque, brandon-grotesque, Arial, sans-serif);
	--ir-serif: var(--wp--preset--font-family--libre-baskerville, "Libre Baskerville", Georgia, serif);

	--ir-radius: 14px;
	--ir-ease: cubic-bezier(.22, .61, .36, 1);

	/* The colour of whatever a component sits on. Set per background below,
	   so ring "gaps" and icon fills always match their surroundings. */
	--ir-surface: var(--ir-base);
}

.has-base-background-color       { --ir-surface: var(--ir-base); }
.has-light-sand-background-color { --ir-surface: var(--ir-light-sand); }
.has-sand-background-color       { --ir-surface: var(--ir-sand); }
.has-the-blue-background-color   { --ir-surface: var(--ir-blue); }
.has-eggplant-background-color   { --ir-surface: var(--ir-eggplant); }
.has-berry-background-color      { --ir-surface: var(--ir-berry); }

@keyframes ir-reveal {
	from { opacity: 0; transform: translateY(-.4rem); }
	to   { opacity: 1; transform: none; }
}

/* Visitors who ask their device for less motion get instant changes */
@media (prefers-reduced-motion: reduce) {
	:is(.wp-block-accordion, .wp-block-tabs, .ir-popover) *,
	:is(.wp-block-accordion, .wp-block-tabs, .ir-popover) *::before,
	:is(.wp-block-accordion, .wp-block-tabs, .ir-popover) *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}


/* --------------------------------------------------------------------------
   2. ACCORDION  (core/accordion)
   Styles: Sand cards (default) · Hairlines (is-style-ir-lines) ·
           On dark (is-style-ir-on-dark, also automatic on dark Groups)
   Behaviour: card lifts and turns white when open, the ring icon fills
   and its plus turns into a minus, the panel fades down.
   -------------------------------------------------------------------------- */
.wp-block-accordion {
	--acc-bg:          var(--ir-light-sand);
	--acc-bg-hover:    var(--ir-sand);
	--acc-bg-open:     #fff;
	--acc-border:      var(--ir-sand);
	--acc-border-open: var(--ir-dark-sand);
	--acc-title:       var(--ir-blue);
	--acc-text:        var(--ir-ink);
	--acc-icon:        var(--ir-blue);
	--acc-icon-on:     var(--ir-base);
	--acc-shadow:      0 14px 32px -20px rgba(45, 62, 88, .45);

	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.wp-block-accordion > .wp-block-accordion-item {
	margin: 0;
	background: var(--acc-bg);
	border: 1px solid var(--acc-border);
	border-radius: var(--ir-radius);
	transition:
		background-color .3s var(--ir-ease),
		border-color .3s var(--ir-ease),
		box-shadow .4s var(--ir-ease);
}
.wp-block-accordion > .wp-block-accordion-item:not(.is-open):hover {
	background: var(--acc-bg-hover);
}
.wp-block-accordion > .wp-block-accordion-item.is-open {
	background: var(--acc-bg-open);
	border-color: var(--acc-border-open);
	box-shadow: var(--acc-shadow);
}

/* Question line: sentence case serif reads warmer than all-caps for FAQs */
.wp-block-accordion .wp-block-accordion-heading {
	margin: 0;
	font-family: var(--ir-serif);
	font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem);
	font-weight: 400;
	font-style: normal;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--acc-title);
}

.wp-block-accordion .wp-block-accordion-heading__toggle {
	gap: 1rem;
	padding: 1.1rem 1.25rem 1.1rem 1.5rem;
	border-radius: calc(var(--ir-radius) - 1px);
	background: none;
	color: inherit;
	box-shadow: none;
}
.wp-block-accordion .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}
.wp-block-accordion .wp-block-accordion-heading__toggle:focus-visible {
	outline: 2px solid var(--acc-icon);
	outline-offset: 3px;
}

/* Ring icon: the "+" glyph core prints is hidden and redrawn as two bars.
   The long selector out-ranks core's own icon transition rule. */
.wp-block-accordion .wp-block-accordion-item > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	flex: none;
	position: relative;
	width: 2rem;
	height: 2rem;
	border: 1.5px solid var(--acc-icon);
	border-radius: 50%;
	color: var(--acc-icon);
	font-size: 0;
	transition:
		background-color .3s var(--ir-ease),
		color .3s var(--ir-ease),
		transform .5s var(--ir-ease);
}
.wp-block-accordion .wp-block-accordion-heading__toggle-icon::before,
.wp-block-accordion .wp-block-accordion-heading__toggle-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: .8rem;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
	translate: -50% -50%;
	transition: rotate .5s var(--ir-ease);
}
.wp-block-accordion .wp-block-accordion-heading__toggle-icon::after {
	rotate: 90deg;
}
.wp-block-accordion .wp-block-accordion-item:not(.is-open) .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon {
	background: color-mix(in srgb, var(--acc-icon) 10%, transparent);
}
.wp-block-accordion .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	transform: rotate(180deg);            /* replaces core's 45deg "x" */
	background: var(--acc-icon);
	color: var(--acc-icon-on);
}
.wp-block-accordion .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::after {
	rotate: 0deg;                         /* plus becomes minus */
}

.wp-block-accordion .wp-block-accordion-panel {
	padding: 0 1.5rem 1.4rem;
	color: var(--acc-text);
	font-size: .95em;
}
.wp-block-accordion .wp-block-accordion-panel > :first-child { margin-top: 0; }
.wp-block-accordion .wp-block-accordion-panel > :last-child  { margin-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
	.wp-block-accordion .wp-block-accordion-item.is-open > .wp-block-accordion-panel {
		animation: ir-reveal .45s var(--ir-ease) both;
	}
}

/* Hairlines: for long policy lists where cards would feel heavy */
.wp-block-accordion.is-style-ir-lines { gap: 0; }
.wp-block-accordion.is-style-ir-lines > .wp-block-accordion-item {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ir-dark-sand);
	border-radius: 0;
	box-shadow: none;
}
.wp-block-accordion.is-style-ir-lines > .wp-block-accordion-item:first-child {
	border-top: 1px solid var(--ir-dark-sand);
}
.wp-block-accordion.is-style-ir-lines .wp-block-accordion-heading__toggle {
	padding-inline: .25rem;
	border-radius: 4px;
}
.wp-block-accordion.is-style-ir-lines .wp-block-accordion-panel {
	padding-inline: .25rem 3.25rem;
}

/* On dark: chosen as a style, or automatic inside a blue/eggplant/berry Group */
.wp-block-accordion.is-style-ir-on-dark,
:is(.has-the-blue-background-color, .has-eggplant-background-color, .has-berry-background-color) .wp-block-accordion {
	--acc-bg:          rgba(255, 255, 255, .06);
	--acc-bg-hover:    rgba(255, 255, 255, .11);
	--acc-bg-open:     rgba(255, 255, 255, .12);
	--acc-border:      rgba(255, 255, 255, .16);
	--acc-border-open: rgba(255, 255, 255, .38);
	--acc-title:       var(--ir-base);
	--acc-text:        rgba(249, 249, 249, .9);
	--acc-icon:        var(--ir-base);
	--acc-icon-on:     var(--ir-surface);
	--acc-shadow:      none;
}
.wp-block-accordion.is-style-ir-on-dark { --ir-surface: var(--ir-eggplant); }


/* --------------------------------------------------------------------------
   3. TABS  (core/tabs)
   Styles: Pebble (default) · Brushstroke · Folder · Ripple
   Any Tabs block with no style chosen gets Pebble.
   Extra class: add "ir-vertical" (Advanced > Additional CSS class) to
   Pebble or Brushstroke for side-by-side tabs on wide screens.
   -------------------------------------------------------------------------- */
.wp-block-tabs {
	--tab-ink:          var(--ir-blue);
	--tab-muted:        var(--ir-stone);
	--tab-accent:       var(--ir-berry);
	--tab-track:        var(--ir-light-sand);
	--tab-track-border: var(--ir-sand);
	--tab-pill:         var(--ir-blue);
	--tab-pill-ink:     var(--ir-base);
	--tab-folder:       var(--ir-light-sand);
	--tab-line:         var(--ir-dark-sand);

	/* lets the tab row scroll instead of pushing a Grid/Row parent wider */
	min-width: 0;
	max-width: 100%;
}
:is(.has-the-blue-background-color, .has-eggplant-background-color, .has-berry-background-color) .wp-block-tabs {
	--tab-ink:          var(--ir-base);
	--tab-muted:        rgba(249, 249, 249, .72);
	--tab-accent:       var(--ir-dark-sand);
	--tab-track:        rgba(255, 255, 255, .08);
	--tab-track-border: rgba(255, 255, 255, .16);
	--tab-pill:         var(--ir-base);
	--tab-pill-ink:     var(--ir-surface);
	--tab-folder:       rgba(255, 255, 255, .09);
	--tab-line:         rgba(255, 255, 255, .32);
}

/* Shared: one row that scrolls sideways on phones instead of wrapping */
.wp-block-tabs > .wp-block-tab-list {
	display: flex;
	flex-wrap: nowrap;
	gap: .25rem;
	margin: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.wp-block-tabs > .wp-block-tab-list::-webkit-scrollbar { display: none; }

.wp-block-tabs > .wp-block-tab-list > [role="tab"] {
	flex: none;
	position: relative;
	margin: 0;
	padding: .75rem 1.1rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--tab-muted);
	font-family: var(--ir-sans);
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
	scroll-snap-align: start;
	cursor: pointer;
	transition: color .25s ease, background-color .3s var(--ir-ease), box-shadow .3s var(--ir-ease);
}
.wp-block-tabs > .wp-block-tab-list > [role="tab"]:hover,
.wp-block-tabs > .wp-block-tab-list > [role="tab"][aria-selected="true"] {
	color: var(--tab-ink);
}
.wp-block-tabs > .wp-block-tab-list > [role="tab"]:focus-visible {
	outline: 2px solid var(--tab-ink);
	outline-offset: 2px;
	border-radius: 6px;
}

.wp-block-tabs > .wp-block-tab-panels > .wp-block-tab-panel {
	padding-block: 1.75rem .5rem;
}
.wp-block-tabs > .wp-block-tab-panels > .wp-block-tab-panel > :first-child { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
	.wp-block-tabs > .wp-block-tab-panels > .wp-block-tab-panel:not([hidden]) {
		animation: ir-reveal .4s var(--ir-ease) both;
	}
}

/* 3a. BRUSHSTROKE (style: ir-brushstroke) ----------------------------------
   Quiet uppercase labels on a hairline. The active tab gets a hand-painted
   berry stroke that "paints" in from the left, echoing the swirl artwork. */
.wp-block-tabs.is-style-ir-brushstroke > .wp-block-tab-list {
	box-shadow: inset 0 -1px 0 var(--tab-track-border);
}
.wp-block-tabs.is-style-ir-brushstroke > .wp-block-tab-list > [role="tab"] {
	padding: .9rem 1.1rem 1.1rem;
}
.wp-block-tabs.is-style-ir-brushstroke > .wp-block-tab-list > [role="tab"]::before {
	content: "";
	position: absolute;
	left: .6rem;
	right: .6rem;
	bottom: .2rem;
	width: auto;
	height: .6rem;
	border: 0;
	background: var(--tab-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5C30 6.5 70 4.8 118 5.2c42 .3 87 1.8 119 .3 1.5-.1 2 2.1.6 2.5-32.6 3-77.6 2.2-119.6 2.4-42 .3-84 2.4-113 3.2-2.4.1-3.4-2.8-2-3.1Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5C30 6.5 70 4.8 118 5.2c42 .3 87 1.8 119 .3 1.5-.1 2 2.1.6 2.5-32.6 3-77.6 2.2-119.6 2.4-42 .3-84 2.4-113 3.2-2.4.1-3.4-2.8-2-3.1Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	clip-path: inset(0 100% 0 0);
	transition: clip-path .55s var(--ir-ease);
	pointer-events: none;
}
.wp-block-tabs.is-style-ir-brushstroke > .wp-block-tab-list > [role="tab"][aria-selected="true"]::before {
	clip-path: inset(0 0 0 0);
}

/* 3b. PEBBLE (default; also style: ir-pebble) -------------------------------
   A sand track with the active tab as a solid blue pill: the site's pill
   buttons, made into a segmented control. Clearest "this is clickable". */
:is(.wp-block-tabs:not([class*="is-style-"]), .wp-block-tabs.is-style-default, .wp-block-tabs.is-style-ir-pebble) > .wp-block-tab-list {
	display: inline-flex;
	max-width: 100%;
	gap: .25rem;
	padding: .35rem;
	background: var(--tab-track);
	border: 1px solid var(--tab-track-border);
	border-radius: 999px;
}
:is(.wp-block-tabs:not([class*="is-style-"]), .wp-block-tabs.is-style-default, .wp-block-tabs.is-style-ir-pebble) > .wp-block-tab-list > [role="tab"] {
	padding: .65rem 1.25rem;
	border-radius: 999px;
}
:is(.wp-block-tabs:not([class*="is-style-"]), .wp-block-tabs.is-style-default, .wp-block-tabs.is-style-ir-pebble) > .wp-block-tab-list > [role="tab"]::before { display: none; }
:is(.wp-block-tabs:not([class*="is-style-"]), .wp-block-tabs.is-style-default, .wp-block-tabs.is-style-ir-pebble) > .wp-block-tab-list > [role="tab"]:not([aria-selected="true"]):hover {
	background: color-mix(in srgb, var(--tab-ink) 8%, transparent);
}
:is(.wp-block-tabs:not([class*="is-style-"]), .wp-block-tabs.is-style-default, .wp-block-tabs.is-style-ir-pebble) > .wp-block-tab-list > [role="tab"][aria-selected="true"] {
	background: var(--tab-pill);
	color: var(--tab-pill-ink);
	box-shadow: 0 6px 16px -9px rgba(29, 35, 50, .8);
}

/* 3c. FOLDER (round-out tabs) ----------------------------------------------
   The active tab is the same sand as the panel and curves outward into it,
   like a folder tab or a doorway. Works best on a white/base background. */
.wp-block-tabs.is-style-ir-folder { --r: 16px; }
.wp-block-tabs.is-style-ir-folder > .wp-block-tab-list {
	gap: .15rem;
	padding-inline: var(--r);
}
.wp-block-tabs.is-style-ir-folder > .wp-block-tab-list > [role="tab"] {
	padding: .85rem 1.3rem .8rem;
	border-radius: var(--r) var(--r) 0 0;
}
.wp-block-tabs.is-style-ir-folder > .wp-block-tab-list > [role="tab"]:not([aria-selected="true"]):hover {
	background: color-mix(in srgb, var(--tab-folder) 60%, transparent);
}
.wp-block-tabs.is-style-ir-folder > .wp-block-tab-list > [role="tab"][aria-selected="true"] {
	background: var(--tab-folder);
}
.wp-block-tabs.is-style-ir-folder > .wp-block-tab-list > [role="tab"]::before,
.wp-block-tabs.is-style-ir-folder > .wp-block-tab-list > [role="tab"]::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: var(--r);
	height: var(--r);
	border: 0;
	background: transparent;
	pointer-events: none;
}
.wp-block-tabs.is-style-ir-folder > .wp-block-tab-list > [role="tab"]::before { left: calc(var(--r) * -1); }
.wp-block-tabs.is-style-ir-folder > .wp-block-tab-list > [role="tab"]::after  { right: calc(var(--r) * -1); left: auto; }
.wp-block-tabs.is-style-ir-folder > .wp-block-tab-list > [role="tab"][aria-selected="true"]::before {
	background: radial-gradient(circle at 0 0, transparent calc(var(--r) - .5px), var(--tab-folder) var(--r));
}
.wp-block-tabs.is-style-ir-folder > .wp-block-tab-list > [role="tab"][aria-selected="true"]::after {
	background: radial-gradient(circle at 100% 0, transparent calc(var(--r) - .5px), var(--tab-folder) var(--r));
}
.wp-block-tabs.is-style-ir-folder > .wp-block-tab-panels {
	margin-block-start: 0;
	padding: clamp(1.25rem, 3vw, 2.25rem);
	background: var(--tab-folder);
	border-radius: var(--r);
}
.wp-block-tabs.is-style-ir-folder > .wp-block-tab-panels > .wp-block-tab-panel { padding-block: 0; }

/* 3d. RIPPLE ----------------------------------------------------------------
   Each tab is a small ring on a thin path; the active ring fills and
   ripples outward like the concentric circles in the logo. Good for
   content that reads as a journey (Before you come / The day / After). */
.wp-block-tabs.is-style-ir-ripple > .wp-block-tab-list {
	gap: 0;
	padding-top: .75rem;
}
.wp-block-tabs.is-style-ir-ripple > .wp-block-tab-list > [role="tab"] {
	flex: 1 0 6rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .85rem;
	padding: .25rem .75rem .5rem;
	isolation: isolate;
	text-align: center;
	white-space: normal;
}
.wp-block-tabs.is-style-ir-ripple > .wp-block-tab-list > [role="tab"]::before {
	content: "";
	position: relative;
	left: auto;
	bottom: auto;
	box-sizing: border-box;
	width: 1.1rem;
	height: 1.1rem;
	border: 2px solid var(--tab-line);
	border-radius: 50%;
	background: var(--ir-surface);
	box-shadow: 0 0 0 0 var(--ir-surface), 0 0 0 0 transparent;
	transition: background-color .3s ease, border-color .3s ease, box-shadow .55s var(--ir-ease);
}
.wp-block-tabs.is-style-ir-ripple > .wp-block-tab-list > [role="tab"]::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(.25rem + .55rem);
	left: 50%;
	width: 100%;
	height: 1px;
	background: var(--tab-line);
}
.wp-block-tabs.is-style-ir-ripple > .wp-block-tab-list > [role="tab"]:last-child::after { display: none; }
.wp-block-tabs.is-style-ir-ripple > .wp-block-tab-list > [role="tab"]:hover::before {
	border-color: var(--tab-ink);
}
.wp-block-tabs.is-style-ir-ripple > .wp-block-tab-list > [role="tab"][aria-selected="true"]::before {
	border-color: var(--tab-ink);
	background: var(--tab-ink);
	box-shadow:
		0 0 0 4px var(--ir-surface),
		0 0 0 5.5px var(--tab-ink),
		0 0 0 9px var(--ir-surface),
		0 0 0 10px color-mix(in srgb, var(--tab-ink) 35%, transparent);
}

/* 3e. VERTICAL (add class "ir-vertical"; Pebble or Brushstroke) -------------- */
@media (min-width: 782px) {
	.wp-block-tabs.ir-vertical {
		display: grid;
		grid-template-columns: minmax(11rem, 15rem) 1fr;
		align-items: start;
		gap: clamp(1.5rem, 4vw, 3rem);
	}
	.wp-block-tabs.ir-vertical > .wp-block-tab-list {
		flex-direction: column;
		overflow: visible;
		box-shadow: inset -1px 0 0 var(--tab-track-border);
	}
	.wp-block-tabs.ir-vertical > .wp-block-tab-list > [role="tab"] {
		width: 100%;
		text-align: left;
		white-space: normal;
	}
	.wp-block-tabs.ir-vertical > .wp-block-tab-panels { margin-block-start: 0; }
	.wp-block-tabs.ir-vertical > .wp-block-tab-panels > .wp-block-tab-panel { padding-block: .5rem; }

	.wp-block-tabs.ir-vertical:is(:not([class*="is-style-"]), .is-style-default, .is-style-ir-pebble) > .wp-block-tab-list {
		display: flex;
		border-radius: 22px;
		box-shadow: none;
	}
}


/* --------------------------------------------------------------------------
   4. TIER GUIDE POPOVER
   A Group block with class "ir-popover" and an HTML anchor (e.g. tier-guide).
   ir-components.php turns it into a native popover and adds a close button.
   Open it from a Custom HTML block:
     <button type="button" class="ir-plain ir-tier-link" popovertarget="tier-guide">Which tier is right for me?</button>
   Desktop: centred card. Phones: slides up as a bottom sheet.
   -------------------------------------------------------------------------- */
.ir-popover[popover] {
	box-sizing: border-box;
	width: min(46rem, calc(100vw - 2rem));
	max-height: min(86vh, 54rem);
	margin: auto;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	overflow: auto;
	overscroll-behavior: contain;
	border: 0;
	border-radius: 22px;
	background: var(--ir-base);
	color: var(--ir-ink);
	box-shadow: 0 30px 90px -24px rgba(29, 35, 50, .6);
}
.ir-popover[popover]:not(:popover-open) { display: none; }
.ir-popover[popover]::backdrop {
	background: rgba(45, 62, 88, .5);
	-webkit-backdrop-filter: blur(3px);
	        backdrop-filter: blur(3px);
}
@media (prefers-reduced-motion: no-preference) {
	.ir-popover[popover] {
		opacity: 0;
		translate: 0 1rem;
		transition:
			opacity .3s ease,
			translate .4s var(--ir-ease),
			overlay .4s allow-discrete,
			display .4s allow-discrete;
	}
	.ir-popover[popover]:popover-open { opacity: 1; translate: 0 0; }
	@starting-style {
		.ir-popover[popover]:popover-open { opacity: 0; translate: 0 1rem; }
	}
}
@media (max-width: 600px) {
	.ir-popover[popover] {
		width: 100%;
		max-width: none;
		max-height: 88vh;
		margin: auto 0 0;
		border-radius: 22px 22px 0 0;
	}
}

/* close button (added by PHP) */
.ir-popover__close {
	position: sticky;
	top: 0;
	float: right;
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	margin: -.5rem -.5rem .5rem 1rem;
	padding: 0;
	border: 1.5px solid var(--ir-blue);
	border-radius: 50%;
	background: var(--ir-base);
	color: var(--ir-blue);
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, rotate .4s var(--ir-ease);
}
.ir-popover__close::before,
.ir-popover__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1rem;
	height: 1.5px;
	background: currentColor;
	translate: -50% -50%;
	rotate: 45deg;
}
.ir-popover__close::after { rotate: -45deg; }
.ir-popover__close:hover { background: var(--ir-blue); color: var(--ir-base); rotate: 90deg; }
.ir-popover__close:focus-visible { outline: 2px solid var(--ir-blue); outline-offset: 3px; }

/* the trigger: reads as a quiet link with a small "i" ring */
.ir-tier-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .25rem 0;
	border: 0;
	background: none;
	color: var(--ir-blue);
	font: italic 400 .95rem/1.4 var(--ir-serif);
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-decoration-color: var(--ir-dark-sand);
	text-decoration-thickness: 1px;
	text-underline-offset: .25em;
	cursor: pointer;
	transition: color .2s ease, text-decoration-color .2s ease;
}
.ir-tier-link::before {
	content: "i";
	display: grid;
	place-items: center;
	flex: none;
	width: 1.35rem;
	height: 1.35rem;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	font: italic 700 .8rem/1 var(--ir-serif);
}
.ir-tier-link:hover { color: var(--ir-berry); text-decoration-color: currentColor; }
.ir-tier-link:focus-visible { outline: 2px solid var(--ir-blue); outline-offset: 3px; border-radius: 4px; }

/* the four tier cards: a Grid group with class "ir-tiers", one Group per tier */
.ir-tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin-block: 1.5rem;
}
.ir-tiers > * {
	--tier: var(--ir-blue);
	margin: 0 !important;
	padding: 1.25rem 1.35rem 1.35rem;
	background: #fff;
	border: 1px solid var(--ir-sand);
	border-top: 4px solid var(--tier);
	border-radius: 12px;
	font-size: .92rem;
	line-height: 1.55;
}
.ir-tiers > :nth-child(1) { --tier: var(--ir-berry); }
.ir-tiers > :nth-child(2) { --tier: var(--ir-blue); }
.ir-tiers > :nth-child(3) { --tier: var(--ir-olive); }
.ir-tiers > :nth-child(4) { --tier: var(--ir-stone); }
.ir-tiers > * > :is(h3, h4) {
	margin: 0 0 .35rem;
	color: var(--tier);
	font: 700 .85rem/1.3 var(--ir-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.ir-tiers > * > p:first-of-type { margin-top: 0; font-style: italic; }
.ir-tiers ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.ir-tiers li { margin-block: .2rem; }

/* editor only: show where the hidden popover lives */
.editor-styles-wrapper .ir-popover {
	outline: 2px dashed var(--ir-dark-sand);
	outline-offset: 6px;
	border-radius: 12px;
}


/* --------------------------------------------------------------------------
   5. CHECKLIST  (core/list, style "Checklist")
   Ring-and-tick markers in olive for packing lists and "what's included".
   -------------------------------------------------------------------------- */
.wp-block-list.is-style-ir-checklist {
	display: grid;
	gap: .65rem;
	padding-left: 0;
	list-style: none;
}
.wp-block-list.is-style-ir-checklist > li {
	position: relative;
	padding-left: 2.2rem;
	line-height: 1.5;
}
.wp-block-list.is-style-ir-checklist > li::before,
.wp-block-list.is-style-ir-checklist > li::after {
	content: "";
	position: absolute;
	box-sizing: border-box;
}
.wp-block-list.is-style-ir-checklist > li::before {
	left: 0;
	top: .12em;
	width: 1.35rem;
	height: 1.35rem;
	border: 1.5px solid var(--ir-olive);
	border-radius: 50%;
	background: color-mix(in srgb, var(--ir-olive) 12%, transparent);
}
.wp-block-list.is-style-ir-checklist > li::after {
	left: .5rem;
	top: calc(.12em + .3rem);
	width: .38rem;
	height: .65rem;
	border-right: 2px solid var(--ir-olive);
	border-bottom: 2px solid var(--ir-olive);
	rotate: 45deg;
}
@media (min-width: 700px) {
	.wp-block-list.is-style-ir-checklist.ir-two-col { display: block; columns: 2; column-gap: 2.5rem; }
	.wp-block-list.is-style-ir-checklist.ir-two-col > li { break-inside: avoid; margin-bottom: .65rem; }
}


/* --------------------------------------------------------------------------
   6. STEPS  (Group with class "ir-steps", containing Heading + Paragraph pairs)
   Headings get an automatic numbered ring, so they can say "Card making"
   instead of "STEP 1".
   -------------------------------------------------------------------------- */
.ir-steps { counter-reset: ir-step; }
.ir-steps > :is(h2, h3, h4) {
	counter-increment: ir-step;
	display: flex;
	align-items: center;
	gap: .9rem;
	margin-top: 1.75rem;
}
.ir-steps > :is(h2, h3, h4):first-child { margin-top: 0; }
.ir-steps > :is(h2, h3, h4)::before {
	content: counter(ir-step);
	flex: none;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	font: italic 400 1.1rem/1 var(--ir-serif);
	letter-spacing: 0;
	box-shadow: 0 0 0 4px var(--ir-surface), 0 0 0 5px var(--ir-dark-sand);
}
.ir-steps > :is(h2, h3, h4) + p {
	margin-top: .5rem;
	padding-left: 3.3rem;
}


/* --------------------------------------------------------------------------
   7. AT-A-GLANCE CARD  (Group with class "ir-glance")
   Paragraphs written as "<strong>Date</strong> Sunday, January 3, 2027".
   The label becomes a small caps line above the value.
   -------------------------------------------------------------------------- */
.ir-glance {
	display: grid;
	gap: 1rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border-radius: var(--ir-radius);
}
.ir-glance > p { margin: 0; line-height: 1.45; }
.ir-glance > p > strong:first-child {
	display: block;
	margin-bottom: .15rem;
	font: 700 .72rem/1.3 var(--ir-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .75;
}