/**
 * TutorAddons — design system.
 *
 * Vanilla CSS with custom properties. There is deliberately no Tailwind build in
 * this theme: the plugin ships a 235 KB compiled app.css whose utilities were
 * scanned from the PLUGIN's own templates only, so any new utility class invented
 * here simply would not exist (CLAUDE.md §5.11).
 *
 * Everything is scoped under `body.ta` — the plugin's Tailwind preflight has
 * already reset the document, and unscoped element selectors here would leak into
 * the plugin-rendered checkout/dashboard markup we do not own.
 *
 * Brand colours are read from the plugin's inline `custome_color` block via
 * var(--brand-*), with the design-spec value as the fallback. Never hard-code them.
 *
 * Contents
 *   1. Tokens
 *   2. Base
 *   3. Layout primitives
 *   4. Buttons
 *   5. Announcement bar
 *   6. Header
 *   7. Footer
 */

/* =========================================================================
 * 1. Tokens
 * ====================================================================== */

body.ta {
	/* Brand — sourced from the plugin option, design-spec value as fallback. */
	--ta-brand: var(--brand-600, #1b7fd6);
	--ta-brand-hover: var(--brand-700, #1668b4);
	--ta-brand-tint: var(--brand-50, #e8f3fc);

	--ta-accent: #3fb6f0;
	--ta-accent-soft: #6fb6ec;
	--ta-pink: #f4738c;
	--ta-star: #f5b546;

	/* Dark surfaces — topbar, dark sections, newsletter, footer, code blocks. */
	--ta-dark: #0c1524;
	--ta-dark-card: #111e31;
	--ta-dark-border: #22344c;
	--ta-dark-border-soft: #1c2c42;
	--ta-dark-border-strong: #3b4d66;

	/* Page surfaces. */
	--ta-bg: #eef1f6;
	--ta-surface: #fff;
	--ta-surface-soft: #f7fafd;
	--ta-surface-softer: #f1f5fa;
	--ta-surface-tint: #edf6fd;

	/* Borders. */
	--ta-border: #e3e9f1;
	--ta-border-flat: #eef2f7;
	--ta-border-button: #d7dfea;
	--ta-border-idle: #cbd5e1;

	/* Text. */
	--ta-text: #101b2d;
	--ta-text-secondary: #3c4c63;
	--ta-text-muted: #5a6b82;
	--ta-text-meta: #8494a8;
	--ta-text-on-dark: #a9bbd1;
	--ta-text-on-dark-strong: #d7e5f5;
	--ta-text-on-dark-muted: #8fa3bc;

	/* Status. */
	--ta-success: #1fa463;
	--ta-success-bg: #e8f7ee;
	--ta-warning: #b4762b;
	--ta-warning-bg: #fef3e2;

	/* Type. */
	--ta-font-heading: 'Poppins', ui-sans-serif, system-ui, sans-serif;
	--ta-font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
	--ta-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Shape. */
	--ta-radius-sm: 7px;
	--ta-radius: 11px;
	--ta-radius-card: 14px;
	--ta-radius-panel: 18px;
	--ta-radius-pill: 99px;

	/* Shadow. */
	--ta-shadow-frame: 0 18px 50px rgba(16, 27, 45, 0.13);
	--ta-shadow-button: 0 2px 8px rgba(27, 127, 214, 0.32);
	--ta-shadow-cta: 0 6px 18px rgba(27, 127, 214, 0.3);
	--ta-shadow-box: 0 8px 26px rgba(16, 27, 45, 0.07);
	--ta-shadow-image: 0 20px 40px rgba(16, 27, 45, 0.09);
	--ta-shadow-segment: 0 1px 3px rgba(16, 27, 45, 0.14);

	/* Space. */
	--ta-container: 1200px;
	--ta-gutter: 24px;
	--ta-section: clamp(48px, 5.5vw, 88px);
	--ta-header-h: 70px;

	/* Decorative placeholder for missing imagery. */
	--ta-placeholder: repeating-linear-gradient(135deg, #f2f6fb 0 10px, #e9eff7 10px 20px);
}

/* =========================================================================
 * 2. Base
 * ====================================================================== */

body.ta {
	background: var(--ta-bg);
	color: var(--ta-text);
	font-family: var(--ta-font-body);
	font-size: 15px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

body.ta ::selection {
	background: #bfe0f8;
	color: var(--ta-text);
}

/* ---------------------------------------------------------------------------
 * Element defaults use `:where(body.ta) <element>`, which scores 0-0-1 — the
 * SCOPE is neutralised, not the element.
 *
 * Getting this wrong has already cost two silent bugs. `body.ta h2` scores 0-1-2
 * and outranks `.ta-footer__heading` (0-1-0), repainting every footer heading
 * dark-on-dark; `body.ta img` outranks `.ta-logo img` and snaps the logo back to
 * its natural 1000×184. Note that `body.ta :where(h2)` does NOT fix it — the
 * `body.ta` prefix is itself 0-1-1 and still wins.
 *
 * 0-0-1 is the sweet spot: it ties with the plugin's Tailwind preflight (which
 * resets headings to `font-size:inherit`) and wins on load order since main.css
 * comes after app.css, while still losing to any single component class.
 * ------------------------------------------------------------------------ */

:where(body.ta) h1,
:where(body.ta) h2,
:where(body.ta) h3,
:where(body.ta) h4,
:where(body.ta) h5,
:where(body.ta) h6 {
	margin: 0;
	color: var(--ta-text);
	font-family: var(--ta-font-heading);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

:where(body.ta) p {
	margin: 0;
	text-wrap: pretty;
}

:where(body.ta) a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

:where(body.ta) img {
	max-width: 100%;
	height: auto;
}

:where(body.ta) code,
:where(body.ta) kbd,
:where(body.ta) pre,
:where(body.ta) samp,
:where(body.ta) .ta-mono {
	font-family: var(--ta-font-mono);
	font-variant-ligatures: none;
}

body.ta :focus-visible {
	outline: 2px solid var(--ta-brand);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Skip link — visually hidden until focused. */
body.ta .ta-skip {
	position: absolute;
	z-index: 1000;
	top: 8px;
	left: 8px;
	padding: 10px 18px;
	border-radius: var(--ta-radius-sm);
	background: var(--ta-brand);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	transform: translateY(-200%);
	transition: transform 0.15s ease;
}

body.ta .ta-skip:focus {
	transform: translateY(0);
}

/* Screen-reader-only, matching core's class so WP output inherits it too. */
body.ta .screen-reader-text,
body.ta .ta-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
 * 3. Layout primitives
 * ====================================================================== */

.ta-container {
	width: 100%;
	max-width: var(--ta-container);
	margin-inline: auto;
	padding-inline: var(--ta-gutter);
}

.ta-container--narrow {
	max-width: 1050px;
}

.ta-container--tight {
	max-width: 900px;
}

.ta-section {
	padding-block: var(--ta-section);
}

/* The plugin's header.php opens <div id="apps"> and footer.php closes it. Make it
 * a column so the footer is pushed to the bottom on short pages. */
body.ta #apps {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

body.ta #apps > main {
	flex: 1 0 auto;
}

/* =========================================================================
 * 4. Buttons
 * ====================================================================== */

.ta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: var(--ta-radius-sm);
	background: transparent;
	color: var(--ta-text);
	cursor: pointer;
	font-family: var(--ta-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	white-space: nowrap;
}

.ta-btn:active {
	transform: translateY(1px);
}

.ta-btn--primary {
	background: var(--ta-brand);
	border-color: var(--ta-brand);
	box-shadow: var(--ta-shadow-button);
	color: #fff;
}

.ta-btn--primary:hover {
	background: var(--ta-brand-hover);
	border-color: var(--ta-brand-hover);
}

.ta-btn--secondary {
	background: var(--ta-surface);
	border-color: var(--ta-border-button);
	color: var(--ta-text-secondary);
}

.ta-btn--secondary:hover {
	border-color: var(--ta-brand);
	color: var(--ta-brand);
}

.ta-btn--ghost {
	color: var(--ta-text-secondary);
}

.ta-btn--ghost:hover {
	background: var(--ta-surface-softer);
	color: var(--ta-brand);
}

.ta-btn--pink {
	background: var(--ta-pink);
	border-color: var(--ta-pink);
	color: #fff;
}

.ta-btn--cyan {
	background: var(--ta-accent);
	border-color: var(--ta-accent);
	color: #fff;
}

.ta-btn--sm {
	padding: 8px 14px;
	font-size: 12.5px;
}

/* Header login button — 10px radius to match the icon buttons beside it. */
.ta-btn--header {
	padding: 10px 20px;
	border-radius: 10px;
	font-size: 14px;
}

.ta-btn--lg {
	padding: 14px 26px;
	box-shadow: var(--ta-shadow-cta);
	font-size: 15px;
}

.ta-btn--block {
	width: 100%;
}

/* Icon-only control — 38px square, 10px radius (prototype header). */
.ta-icon-btn {
	position: relative;
	display: grid;
	width: 38px;
	height: 38px;
	flex: none;
	place-items: center;
	border: 1px solid var(--ta-border);
	border-radius: 10px;
	background: var(--ta-surface);
	color: var(--ta-text-secondary);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.ta-icon-btn:hover {
	border-color: var(--ta-brand);
	color: var(--ta-brand);
}

.ta-icon-btn svg {
	width: 17px;
	height: 17px;
}

/* =========================================================================
 * 5. Announcement bar
 * ====================================================================== */

/* The plugin's app.css cannot be dequeued and styles the banner by ID:
 *
 *   #sticky-banner       { position: sticky; top: 0; height: 3.5rem; … }
 *   #sticky-banner+header{ top: 3.5rem }
 *
 * Those beat any class selector, so the overrides below have to carry the ID too.
 * The design wants the announcement to scroll away and the header alone to stick,
 * which also means resetting the 56px offset app.css pushes onto the header. */
body.ta #sticky-banner.ta-announce {
	position: relative;
	top: auto;
	height: auto;
	padding: 0;
	background: var(--ta-brand);
	color: #fff;
	display: block;
	font-size: 13.5px;
}

body.ta #sticky-banner + header.app-header {
	top: 0;
}

.ta-announce__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 11px 18px;
	text-align: center;
}

.ta-announce__icon {
	display: grid;
	width: 18px;
	height: 18px;
	flex: none;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	font: 11px/1 var(--ta-font-mono);
}

.ta-announce a {
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ta-announce a:hover {
	text-decoration: none;
}

.ta-announce strong {
	font-weight: 700;
}

/* =========================================================================
 * 6. Header
 * ====================================================================== */

body.ta .app-header {
	position: sticky;
	z-index: 999;
	top: 0;
	border-bottom: 1px solid var(--ta-border);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.ta-header__inner {
	display: flex;
	height: var(--ta-header-h);
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

/* -- Logo ---------------------------------------------------------------- */

.ta-logo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: none;
}

.ta-logo__mark {
	display: grid;
	width: 30px;
	height: 30px;
	flex: none;
	place-items: center;
	border-radius: 9px;
	background: var(--ta-brand);
	color: #fff;
	font-family: var(--ta-font-heading);
	font-size: 15px;
	font-weight: 700;
}

.ta-logo__word {
	color: var(--ta-text);
	font-family: var(--ta-font-heading);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.ta-logo__word span {
	color: var(--ta-brand);
}

/* Footer lockup — one step smaller, wordmark reversed out to white. */
.ta-logo--footer .ta-logo__mark {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	font-size: 14px;
}

.ta-logo--footer .ta-logo__word {
	color: #fff;
	font-size: 17px;
}

.ta-logo--footer .ta-logo__word span {
	color: #fff;
}

/* -- Navigation ---------------------------------------------------------- */

.ta-nav {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-nav a {
	display: inline-block;
	padding-block: 6px;
	border-bottom: 2px solid transparent;
	color: var(--ta-text-secondary);
	font-size: 14.5px;
	font-weight: 500;
}

.ta-nav a:hover {
	color: var(--ta-brand);
}

.ta-nav .is-current > a,
.ta-nav .current-menu-item > a,
.ta-nav .current_page_item > a {
	border-bottom-color: var(--ta-brand);
	color: var(--ta-brand);
	font-weight: 600;
}

/* No flex-grow: the header row is space-between, which is what centres the nav
 * between the logo and the actions — exactly as the prototype does it. */
@media (max-width: 900px) {
	.ta-header__nav {
		display: none;
	}
}

/* -- Actions ------------------------------------------------------------- */

.ta-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.ta-header__cart .ta-cart-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 17px;
	height: 17px;
	padding-inline: 4px;
	border-radius: 9px;
	background: var(--ta-pink);
	color: #fff;
	font: 600 10.5px/17px var(--ta-font-body);
	text-align: center;
}

.ta-header__toggle {
	display: none;
}

@media (max-width: 900px) {
	.ta-header__toggle {
		display: inline-flex;
	}
}

/* -- User dropdown ------------------------------------------------------- */

#btn-user {
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	overflow: hidden;
}

#btn-user img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

#menu-user {
	z-index: 40;
	width: 220px;
	padding-block: 6px;
	border: 1px solid var(--ta-border);
	border-radius: var(--ta-radius);
	background: var(--ta-surface);
	box-shadow: var(--ta-shadow-frame);
	overflow: hidden;
}

#menu-user a {
	display: block;
	padding: 9px 18px;
	color: var(--ta-text-secondary);
	font-size: 14px;
}

#menu-user a:hover {
	background: var(--ta-surface-softer);
	color: var(--ta-brand);
}

/* -- Mobile drawer ------------------------------------------------------- */

#navbar-mobile {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	border-bottom: 1px solid var(--ta-border);
	background: var(--ta-surface);
	box-shadow: var(--ta-shadow-frame);
}

@media (min-width: 901px) {
	#navbar-mobile {
		display: none !important;
	}
}

#navbar-mobile .ta-nav {
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	padding: 14px var(--ta-gutter) 20px;
}

#navbar-mobile .ta-nav a {
	display: block;
	padding: 11px 14px;
	border-radius: var(--ta-radius-sm);
	font-size: 15px;
}

#navbar-mobile .ta-nav a:hover,
#navbar-mobile .ta-nav .is-current > a {
	background: var(--ta-brand-tint);
}

#navbar-mobile .ta-nav .is-current > a::after {
	content: none;
}

/* =========================================================================
 * 7. Footer
 * ====================================================================== */

.ta-footer {
	margin-top: auto;
	background: var(--ta-dark);
	color: var(--ta-text-on-dark);
}

/* Both rows are their own centred track — the divider rule spans full width
 * while its contents stay aligned to the 1200px grid. */
.ta-footer__main,
.ta-footer__bottom {
	max-width: var(--ta-container);
	margin-inline: auto;
}

/* auto-fit rather than fixed columns: the brand block and the three link columns
 * share the row evenly and reflow on their own as the viewport narrows. */
.ta-footer__main {
	display: grid;
	gap: 32px;
	padding: 52px 24px 24px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ta-footer__tagline {
	max-width: 260px;
	margin-top: 14px;
	font-size: 13px;
	line-height: 1.7;
}

.ta-footer__heading {
	margin: 0;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.ta-footer__links {
	display: grid;
	gap: 9px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.ta-footer__links a {
	color: var(--ta-text-on-dark);
	font-size: 13.5px;
}

.ta-footer__links a:hover {
	color: #fff;
}

.ta-footer__rule {
	margin-top: 14px;
	border-top: 1px solid var(--ta-dark-border-soft);
}

.ta-footer__bottom {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 18px 24px;
	font-size: 12.5px;
}

.ta-footer__legal {
	display: flex;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-footer__legal a:hover {
	color: #fff;
}

/* =========================================================================
 * 8. Shared components
 *
 * Used by more than one page: headings, the striped placeholder, badges,
 * product/post cards, grids, segmented controls, accordions.
 * ====================================================================== */

/* -- Headings & section furniture ---------------------------------------- */

.ta-h2 {
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 700;
}

.ta-h2--sm {
	font-size: clamp(24px, 2.6vw, 32px);
}

.ta-h2--center {
	text-align: center;
}

.ta-h2 span {
	color: var(--ta-brand);
}

.ta-lede {
	margin-top: 12px;
	color: var(--ta-text-muted);
	font-size: 15.5px;
	line-height: 1.6;
}

.ta-lede--center {
	max-width: 560px;
	margin-inline: auto;
	text-align: center;
}

.ta-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: var(--ta-radius-pill);
	background: var(--ta-brand-tint);
	color: var(--ta-brand-hover);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.ta-kicker {
	color: var(--ta-accent-soft);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ta-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.ta-link-arrow {
	color: var(--ta-brand);
	font-size: 14px;
	font-weight: 600;
}

.ta-link-arrow:hover {
	color: var(--ta-brand-hover);
}

/* -- Placeholder --------------------------------------------------------- */

/* Stand-in for imagery that has not been uploaded yet. Any real <img> inside
 * covers it completely, so the stripes only show when the slot is empty. */
.ta-placeholder {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--ta-placeholder);
}

.ta-placeholder img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ta-placeholder__label {
	padding: 16px;
	color: var(--ta-text-meta);
	font: 10.5px/1.5 var(--ta-font-mono);
	text-align: center;
}

/* -- Badges -------------------------------------------------------------- */

.ta-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--ta-brand);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ta-badge--pink {
	background: var(--ta-pink);
}

.ta-badge--green {
	background: var(--ta-success);
}

.ta-badge--amber {
	background: var(--ta-star);
}

/* -- Grids --------------------------------------------------------------- */

.ta-grid {
	display: grid;
	gap: 18px;
}

.ta-grid--products {
	margin-top: 34px;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.ta-grid--posts {
	margin-top: 28px;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

/* -- Product card -------------------------------------------------------- */

.ta-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ta-border);
	border-radius: var(--ta-radius-card);
	background: var(--ta-surface);
	overflow: hidden;
}

.ta-card__media {
	display: grid;
	place-items: center;
	position: relative;
	overflow: hidden;
	background: var(--ta-placeholder);
}

.ta-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 16px;
}

.ta-card__meta {
	color: var(--ta-text-meta);
	font-size: 11.5px;
}

.ta-card__meta strong {
	color: var(--ta-text-muted);
	font-weight: 600;
}

.ta-card__title {
	margin: 8px 0 10px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
}

.ta-card__title a:hover {
	color: var(--ta-brand);
}

.ta-card__blurb {
	margin-bottom: 12px;
	color: var(--ta-text-muted);
	font-size: 13.5px;
	line-height: 1.6;
}

.ta-card__stats {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
	color: var(--ta-text-meta);
	font-size: 12px;
}

.ta-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
}

/* A price range is a single unit — without nowrap "$19.90 – $39.90" breaks
 * across three lines in a narrow card. */
.ta-card__price {
	color: var(--ta-brand);
	font-family: var(--ta-font-heading);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
}

.ta-card__actions {
	display: flex;
	gap: 8px;
}

.ta-btn--card {
	padding: 8px 13px;
	border-radius: 8px;
	font-size: 12.5px;
}

/* -- Star rating --------------------------------------------------------- */

.ta-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 12px;
}

.ta-star {
	color: var(--ta-border-idle);
	font-size: 13px;
}

.ta-star.is-full,
.ta-star.is-half {
	color: var(--ta-star);
}

.ta-stars__value {
	margin-left: 4px;
	color: var(--ta-text-secondary);
	font-weight: 600;
}

.ta-stars__count {
	color: var(--ta-text-meta);
}

/* -- Post card ----------------------------------------------------------- */

.ta-post-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ta-border);
	border-radius: var(--ta-radius-card);
	background: var(--ta-surface);
	overflow: hidden;
}

.ta-post-card__media {
	display: grid;
	aspect-ratio: 16/9;
	place-items: center;
	background: var(--ta-placeholder);
}

.ta-post-card__body {
	padding: 18px;
}

.ta-post-card__cat {
	color: var(--ta-brand);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ta-post-card__title {
	margin: 9px 0 8px;
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.4;
}

.ta-post-card__title a:hover {
	color: var(--ta-brand);
}

.ta-post-card__meta {
	color: var(--ta-text-meta);
	font-size: 12.5px;
}

/* -- Segmented control --------------------------------------------------- */

.ta-segmented {
	display: flex;
	padding: 4px;
	border: 1px solid var(--ta-border);
	border-radius: 11px;
	background: var(--ta-surface-softer);
}

.ta-segmented__btn {
	padding: 9px 20px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ta-text-muted);
	cursor: pointer;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ta-segmented__btn.is-active {
	background: var(--ta-surface);
	box-shadow: var(--ta-shadow-segment);
	color: var(--ta-text);
}

/* -- Accordion ----------------------------------------------------------- */

.ta-accordion {
	margin-top: 32px;
	border: 1px solid var(--ta-border);
	border-radius: var(--ta-radius-card);
	overflow: hidden;
}

.ta-accordion__item {
	border-bottom: 1px solid var(--ta-border);
}

.ta-accordion__item:last-child {
	border-bottom: 0;
}

.ta-accordion h3 {
	margin: 0;
	font: inherit;
}

.ta-accordion__trigger {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 22px;
	border: 0;
	background: var(--ta-surface);
	color: var(--ta-text);
	cursor: pointer;
	font-family: var(--ta-font-body);
	font-size: 15px;
	font-weight: 600;
	text-align: left;
}

.ta-accordion__trigger.is-open {
	background: #f9fcff;
}

.ta-accordion__sign {
	flex: none;
	color: var(--ta-brand);
	font-size: 19px;
	line-height: 1;
}

.ta-accordion__panel {
	padding: 0 22px 20px;
	color: var(--ta-text-muted);
	font-size: 14px;
	line-height: 1.7;
}

/* -- EDD purchase-link wrapper ------------------------------------------- */

/* EDD wraps every add-to-cart button in a form plus two divs of its own. Strip
 * their spacing so the button sits exactly where the card layout puts it. */
.ta-card .edd_download_purchase_form,
.ta-card .edd_purchase_submit_wrapper {
	margin: 0;
	display: inline-flex;
}

.ta-card .edd_purchase_submit_wrapper a.ta-btn {
	white-space: nowrap;
}

/* EDD's own "added to cart" confirmation link. */
.ta-card .edd_go_to_checkout {
	display: none;
}

/* -- Breadcrumb ---------------------------------------------------------- */

/* Lives here, not in a page stylesheet: the catalogue, the product page and the
 * article pages all render one, and a breadcrumb whose list-reset is missing
 * collapses into a stack of bullets. */
.ta-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	color: var(--ta-text-meta);
	font-size: 12.5px;
	list-style: none;
}

.ta-breadcrumb li + li::before {
	margin-right: 6px;
	content: '/';
}

.ta-breadcrumb a:hover {
	color: var(--ta-brand);
}