/* WordPress's own blocks, styled (blocks/core.php). Loaded only on pages that use them. The cards here match ours: white,
 * a 1.5px light-blue line, 16px corners; the concepts' callout (pink-edged) and key takeaway (labelled card). Colors come
 * from the tokens, so night mode follows. Motion stops for readers who ask for less. */

/* ---------- Running text ---------- */
/* Links in running text are bold, so interlinks and product links stand out (Derek, 2026-10-15). Buttons, the YouTube still
 * and our own components (cards, compare tables, charts) keep their own link styles. */
.entry-content :is(p, li, td, dd, blockquote, figcaption) a:not([class*="btn"], .wp-element-button, .oyb-yt):not(:where(.oyb-pc, .oyb-cmp, .oyb-ch, .oyb-picks) a) { font-weight: 700; }

/* ---------- Image and gallery ---------- */
.entry-content .wp-block-image img,
.entry-content .wp-block-media-text__media img { border-radius: var(--oyb-radius, 16px); }
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img { border-radius: 12px; }
/* An image narrower than the column sits centered over its centered caption (Derek, 2026-10-16). */
.entry-content > .wp-block-image:not(.alignleft, .alignright) img,
.entry-content :not(.wp-block-gallery) > .wp-block-image:not(.alignleft, .alignright) img { display: block; margin-inline: auto; }
.entry-content .wp-block-image .wp-element-caption,
.entry-content .wp-block-gallery .wp-element-caption,
.entry-content .wp-block-embed .wp-element-caption,
.entry-content .wp-block-video .wp-element-caption,
.entry-content .wp-block-table .wp-element-caption {
	margin: 8px 0 0; font-size: 14px; font-style: italic; line-height: 1.45; text-align: center; color: var(--oyb-color-muted);
}
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption.wp-element-caption { border-radius: 0 0 12px 12px; } /* the caption laid over a gallery photo */
.entry-content .wp-block-gallery.has-nested-images:not(.is-style-oyb-carousel) figure.wp-block-image { border-radius: 12px; overflow: hidden; } /* clip the caption's band too: some browsers draw it square past the photo's corners */
/* Uploaded videos: rounded like images (was the Customizer's extra CSS under Kadence). */
.wp-block-video { border-radius: 16px; overflow: hidden; }
.wp-block-video video { border-radius: 16px; display: block; width: 100%; }
/* Tall media (core.php): a phone screenshot or screen recording at a phone's width, so it fits on one screen. */
.entry-content .wp-block-image.is-oyb-tall:not(.alignleft, .alignright) { max-width: 420px; margin-inline: auto; }
.entry-content .wp-block-image.is-oyb-tall img { width: 100%; height: auto; }
.entry-content .wp-block-video.is-oyb-tall { max-width: 420px; margin-inline: auto; }
.entry-content .wp-block-video.is-oyb-tall video { width: 100%; height: auto; border-radius: 12px; }
.entry-content .wp-block-gallery.is-oyb-tall { max-width: calc(var(--oyb-gal-n, 2) * 320px); margin-inline: auto; }
/* The same on articles not yet converted (Kadence image and gallery blocks) and raw HTML pictures. */
/* Kadence wraps these in shrink-to-fit boxes (a centred figure is a table), so the wrapper gets a definite width or a
 * picture filling it would collapse to nothing. */
.entry-content .wp-block-kadence-image.is-oyb-tall,
.entry-content .wp-block-kadence-videopopup.is-oyb-tall { width: 100%; max-width: 420px; margin-inline: auto; }
.entry-content .wp-block-kadence-image.is-oyb-tall figure { display: block; width: 100%; margin-inline: auto; }
.entry-content .wp-block-kadence-image.is-oyb-tall img { width: 100%; height: auto; }
.entry-content .wp-block-kadence-videopopup.is-oyb-tall > * { width: 100%; max-width: none; }
.entry-content .wp-block-kadence-advancedgallery.is-oyb-tall { max-width: calc(var(--oyb-gal-n, 2) * 320px); margin-inline: auto; }
.entry-content img[data-oyb-tall] { display: block; width: 100%; max-width: 420px; height: auto; margin-inline: auto; }
/* Enlarged photos: always on a dark scrim (a fixed color: the ink token turns light in night mode), with the page's corners. */
.wp-lightbox-overlay .scrim { background-color: #12121f !important; } /* its opacity stays core's, so it fades in and out with the photo */
.wp-lightbox-overlay :is(.close-button, .wp-lightbox-close-button, .wp-lightbox-navigation-button-prev, .wp-lightbox-navigation-button-next) { color: #fff !important; fill: #fff; }
.wp-lightbox-overlay .lightbox-image-container figure,
.wp-lightbox-overlay .lightbox-image-container img { border-radius: var(--oyb-radius, 16px); overflow: hidden; }

/* Carousel: one swipeable row, the next photo peeking; arrows and dots from core.js. */
.entry-content .wp-block-gallery.is-style-oyb-carousel.has-nested-images {
	display: flex; flex-wrap: nowrap; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px;
}
.entry-content .wp-block-gallery.is-style-oyb-carousel::-webkit-scrollbar { display: none; }
.entry-content .wp-block-gallery.is-style-oyb-carousel.has-nested-images figure.wp-block-image {
	flex: 0 0 min(82%, 560px); width: auto !important; margin: 0; scroll-snap-align: start;
}
.entry-content .wp-block-gallery.is-style-oyb-carousel.has-nested-images figure.wp-block-image img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.oyb-carousel-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 10px 0 1.6em; }
.oyb-carousel-nav[hidden] { display: none; }
.entry-content .oyb-carousel-nav button,
.entry-content .oyb-carousel-nav button:hover,
.entry-content .oyb-carousel-nav button:focus {
	display: inline-grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border-radius: 50%;
	border: 2px solid var(--oyb-color-line); background: var(--oyb-color-surface); color: var(--oyb-color-ink); box-shadow: none; cursor: pointer;
	transition: border-color 180ms ease, opacity 180ms ease;
}
@media (hover: hover) { .entry-content .oyb-carousel-nav button:hover { border-color: var(--oyb-button-hover); color: var(--oyb-button-hover); } }
.entry-content .oyb-carousel-nav button:disabled { opacity: .35; cursor: default; }
.oyb-carousel-nav button i { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-left: -3px; }
.oyb-carousel-nav button.is-prev i { transform: rotate(135deg); margin: 0 -3px 0 0; }
.oyb-carousel-nav span { display: flex; gap: 7px; }
.oyb-carousel-nav span i { width: 7px; height: 7px; border-radius: 50%; background: var(--oyb-color-line); transition: background-color 180ms ease, transform 180ms ease; }
.oyb-carousel-nav span i.is-on { background: var(--oyb-button); transform: scale(1.25); }
@media (max-width: 760px) { .oyb-carousel-nav button { display: none !important; } }

/* ---------- Media & Text ---------- */
.entry-content .wp-block-media-text { margin: 1.8em 0; }
.entry-content .wp-block-media-text .wp-block-media-text__content { padding: 0 0 0 28px; }
.entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { padding: 0 28px 0 0; }
.entry-content .wp-block-media-text__content > :first-child { margin-top: 0; }
.entry-content .wp-block-media-text__content > :last-child { margin-bottom: 0; }
@media (max-width: 600px) {
	.entry-content .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content,
	.entry-content .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__content { padding: 16px 0 0; }
}

/* ---------- Details: a card that slides open (core.js); the FAQ style is the same card ---------- */
.entry-content .wp-block-details {
	margin: 10px 0; padding: 0; background: var(--oyb-color-surface); border: 2px solid var(--oyb-color-line);
	border-radius: var(--oyb-radius, 16px); overflow: hidden; transition: border-color .3s ease;
}
.entry-content .wp-block-details + .wp-block-details { margin-top: 10px; }
.entry-content .wp-block-details > summary {
	position: relative; display: block; list-style: none; cursor: pointer; padding: 16px 60px 16px 20px;
	font-weight: 800; font-size: 17px; line-height: 1.4; color: var(--oyb-color-ink); outline: none;
}
.entry-content .wp-block-details > summary::-webkit-details-marker { display: none; }
.entry-content .wp-block-details > summary::after { /* the toggle: a small lavender square with a plus that turns into a minus */
	content: ""; position: absolute; right: 18px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 8px;
	background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat color-mix(in srgb, var(--oyb-color-blue-tint) 45%, var(--oyb-color-surface));
	color: var(--oyb-color-ink);
}
.entry-content .wp-block-details > summary::before {
	content: ""; position: absolute; right: 31px; top: 50%; width: 2px; height: 12px; margin-top: -6px; z-index: 1;
	background: var(--oyb-color-ink); transition: transform .25s ease, opacity .25s ease;
}
.entry-content .wp-block-details[open]:not(.is-closing) > summary::before { transform: rotate(90deg); opacity: 0; } /* minus while open; a plus again the moment it starts closing */
@media (hover: hover) { .entry-content .wp-block-details:hover { border-color: var(--oyb-color-pink); } }
.entry-content .wp-block-details > summary:focus-visible { outline: 2px solid var(--oyb-button-hover); outline-offset: -4px; border-radius: var(--oyb-radius, 16px); }
.entry-content .wp-block-details > :not(summary) { margin: 0 20px 14px; }
.entry-content .wp-block-details > :not(summary):last-child { margin-bottom: 18px; }
.entry-content .wp-block-details > :not(summary) { font-size: 16px; }

/* ---------- Group styles ---------- */
.entry-content .wp-block-group.is-style-oyb-callout {
	margin: 1.8em 0; padding: 18px 22px; background: var(--oyb-color-surface);
	border: 2px solid var(--oyb-color-pink); border-radius: var(--oyb-radius, 16px);
}
.entry-content .wp-block-group.is-style-oyb-takeaway {
	margin: 1.8em 0; padding: 20px 24px; background: var(--oyb-color-surface);
	border: 2px solid var(--oyb-color-line); border-radius: var(--oyb-radius, 16px);
}
.entry-content .wp-block-group.is-style-oyb-takeaway::before {
	content: "Key takeaway"; display: block; margin-bottom: 6px; font: 700 11px/1.2 var(--oyb-font-mono);
	letter-spacing: .08em; text-transform: uppercase; color: var(--oyb-color-pink-deep);
}
.entry-content .wp-block-group.is-style-oyb-takeaway:has(ul, ol)::before { content: "Key takeaways"; }
.entry-content .wp-block-group.is-style-oyb-takeaway :is(ul, ol) { margin: 0; padding-left: 1.2em; }
.entry-content .wp-block-group.is-style-oyb-takeaway li + li { margin-top: .45em; }
/* A classic theme (Kadence) gets the group's blocks inside .wp-block-group__inner-container; a block theme doesn't. */
.entry-content .wp-block-group.is-style-oyb-takeaway > p:first-of-type,
.entry-content .wp-block-group.is-style-oyb-takeaway > .wp-block-group__inner-container > p:first-of-type { font: 900 21px/1.3 var(--oyb-font-display); color: var(--oyb-color-ink); }
.entry-content .wp-block-group.is-style-oyb-takeaway > p:not(:first-of-type),
.entry-content .wp-block-group.is-style-oyb-takeaway > .wp-block-group__inner-container > p:not(:first-of-type) { color: var(--oyb-color-muted); } /* body size (Derek, 2026-10-16) */
.entry-content .wp-block-group.is-style-oyb-band { /* the concepts' navy panel (Derek picked it, 2026-10-15) */
	margin: 2em 0; padding: 26px 28px; border-radius: 20px; background: var(--oyb-color-panel); color: #e9e8f5;
}
.entry-content .wp-block-group.is-style-oyb-band :is(h2, h3, h4, strong) { color: #fff; }
.entry-content .wp-block-group.is-style-oyb-band a { color: #ff8fb8; }
.entry-content .wp-block-group.is-style-oyb-band.alignfull { border-radius: 0; }
.entry-content .wp-block-group:is(.is-style-oyb-callout, .is-style-oyb-takeaway, .is-style-oyb-band) > :first-child,
.entry-content .wp-block-group:is(.is-style-oyb-callout, .is-style-oyb-takeaway, .is-style-oyb-band) > .wp-block-group__inner-container > :first-child { margin-top: 0; }
.entry-content .wp-block-group:is(.is-style-oyb-callout, .is-style-oyb-takeaway, .is-style-oyb-band) > :last-child,
.entry-content .wp-block-group:is(.is-style-oyb-callout, .is-style-oyb-takeaway, .is-style-oyb-band) > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
.entry-content .wp-block-group:is(.is-style-oyb-callout, .is-style-oyb-takeaway, .is-style-oyb-band) > * + *,
.entry-content .wp-block-group:is(.is-style-oyb-callout, .is-style-oyb-takeaway, .is-style-oyb-band) > .wp-block-group__inner-container > * + * { margin-top: .6em; }
/* A callout that sends to a page (the database callouts): name and line on the left, the button on the right; stacked on a phone. */
.entry-content .wp-block-group.oyb-cta:not(:has(> .wp-block-group__inner-container)),
.entry-content .wp-block-group.oyb-cta > .wp-block-group__inner-container { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: center; }
.entry-content .wp-block-group.oyb-cta :is(p, .wp-block-buttons) { margin: 0; max-width: none; }
.entry-content .wp-block-group.oyb-cta p:first-of-type { grid-column: 1; font: 900 20px/1.25 var(--oyb-font-display); color: var(--oyb-color-ink); }
.entry-content .wp-block-group.oyb-cta p:first-of-type strong { font-weight: inherit; }
.entry-content .wp-block-group.oyb-cta p + p { grid-column: 1; margin-top: 6px; font-size: inherit; line-height: 1.5; color: inherit; } /* the article's own text: same size and color (Derek, 2026-10-16) */
.entry-content .wp-block-group.is-style-oyb-callout.oyb-cta { padding: 20px 24px; }
.entry-content .wp-block-group.oyb-cta .wp-block-buttons { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 560px) {
	.entry-content .wp-block-group.oyb-cta:not(:has(> .wp-block-group__inner-container)),
	.entry-content .wp-block-group.oyb-cta > .wp-block-group__inner-container { grid-template-columns: 1fr; }
	.entry-content .wp-block-group.oyb-cta .wp-block-buttons { grid-column: 1; grid-row: auto; margin-top: 14px; }
	.entry-content .wp-block-group.is-style-oyb-band { padding: 20px 18px; }
	.entry-content .wp-block-group.is-style-oyb-takeaway { padding: 18px 18px; }
	.entry-content .wp-block-group.is-style-oyb-takeaway > p:first-of-type,
	.entry-content .wp-block-group.is-style-oyb-takeaway > .wp-block-group__inner-container > p:first-of-type { font-size: 19px; }
}

/* ---------- Table: the compare table's look for simple tables ---------- */
.entry-content .wp-block-table { margin: 1.8em 0; overflow-x: auto; background: var(--oyb-color-surface); border: 2px solid var(--oyb-color-line); border-radius: 20px; }
.entry-content .wp-block-table table { width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.entry-content .wp-block-table :is(th, td) { padding: 12px 14px; border: 0; border-top: 1px solid var(--oyb-color-line-soft); text-align: left; vertical-align: middle; }
.entry-content .wp-block-table :is(th, td):first-child { padding-left: 20px; }
.entry-content .wp-block-table :is(th, td):last-child { padding-right: 20px; }
.entry-content .wp-block-table thead :is(th, td) { border-top: 0; border-bottom: 0; background: color-mix(in srgb, var(--oyb-color-blue-tint) 28%, var(--oyb-color-surface)); font-weight: 900; }
.entry-content .wp-block-table tbody tr:first-child :is(th, td) { border-top: 0; }
.entry-content .wp-block-table thead + tbody tr:first-child :is(th, td) { border-top: 1px solid var(--oyb-color-line-soft); }
.entry-content .wp-block-table .wp-element-caption { margin: 0; padding: 10px 20px 12px; border-top: 1px solid var(--oyb-color-line-soft); text-align: left; }
/* Specs at a glance (the converter's "Label: value" lists): the label column muted and fixed, the values beside it. */
.entry-content .wp-block-table.is-style-oyb-specs th[scope="row"] { width: 36%; font-weight: 700; color: var(--oyb-color-muted); vertical-align: top; }
.entry-content .wp-block-table.is-style-oyb-specs td { vertical-align: top; }
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) :is(th, td) { background: color-mix(in srgb, var(--oyb-color-blue-tint) 14%, var(--oyb-color-surface)); }
@media (max-width: 560px) {
	.entry-content .wp-block-table table { font-size: 14px; }
	.entry-content .wp-block-table :is(th, td) { padding: 10px 10px; }
	.entry-content .wp-block-table :is(th, td):first-child { padding-left: 14px; }
	.entry-content .wp-block-table :is(th, td):last-child { padding-right: 14px; }
}

/* ---------- YouTube: a still and a play button until clicked ---------- */
.entry-content .wp-block-embed.is-provider-youtube .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; border-radius: var(--oyb-radius, 16px); overflow: hidden; background: #000; }
.entry-content .wp-block-embed.is-provider-youtube .wp-block-embed__wrapper::before { content: none; } /* core's padding-top ratio box */
.entry-content .wp-block-embed.is-provider-youtube .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.oyb-yt { position: absolute; inset: 0; display: block; cursor: pointer; }
.oyb-yt img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; border-radius: 0 !important; transition: transform .5s var(--oyb-ease-out, ease), filter .3s ease; }
.oyb-yt__play {
	position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
	background: var(--oyb-button); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45); transition: background-color .3s ease, transform .3s ease;
}
.oyb-yt__play::after { content: ""; position: absolute; left: 29px; top: 23px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #fff; }
@media (hover: hover) {
	.oyb-yt:hover img { transform: scale(1.025); filter: brightness(.92); }
	.oyb-yt:hover .oyb-yt__play { background: var(--oyb-button-hover); transform: scale(1.06); }
}
.oyb-yt:focus-visible { outline: 3px solid var(--oyb-button-hover); outline-offset: -3px; }
@media (max-width: 560px) { .oyb-yt__play { width: 60px; height: 60px; margin: -30px 0 0 -30px; } .oyb-yt__play::after { left: 24px; top: 19px; border-width: 11px 0 11px 18px; } }

/* ---------- Clips ---------- */
.entry-content .wp-block-video.is-style-oyb-clip video { width: 100%; border-radius: var(--oyb-radius, 16px); background: var(--oyb-color-media, #eff1ff); }

@media (prefers-reduced-motion: reduce) {
	.entry-content .wp-block-details, .entry-content .wp-block-details * , .oyb-yt img, .oyb-yt__play, .oyb-carousel-nav * { transition: none !important; }
	.entry-content .wp-block-gallery.is-style-oyb-carousel { scroll-behavior: auto; }
}

.entry-content .wp-block-group.oyb-cta p.oyb-cta__also { grid-column: 1 / -1; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--oyb-color-line-soft); font-size: 15px; } /* a guide link folded in (convert.php) */

/* Social links with their names showing (the contact page's "Email · YouTube · Instagram…" row): pill links in the
 * site's look (2px border, pink on hover), with room above and below. */
.entry-content .wp-block-social-links.has-visible-labels { gap: 10px; margin: 2em 0 3em; padding: 0; }
.entry-content .wp-block-social-links.has-visible-labels .wp-social-link { margin: 0; }
.entry-content .wp-block-social-links.has-visible-labels .wp-block-social-link-anchor {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 2px solid var(--oyb-color-line); border-radius: 999px;
	background: var(--oyb-color-surface); color: var(--oyb-color-ink); font-size: 14px; font-weight: 700; text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}
.entry-content .wp-block-social-links.has-visible-labels .wp-block-social-link-anchor svg { width: 18px; height: 18px; }
.entry-content .wp-block-social-links.has-visible-labels .wp-block-social-link-label { font-size: 14px; line-height: 1.2; } /* WordPress shrinks the name to .65em */
@media (hover: hover) { .entry-content .wp-block-social-links.has-visible-labels .wp-block-social-link-anchor:hover { border-color: var(--oyb-color-pink); color: var(--oyb-color-pink-deep); } }
@media (prefers-reduced-motion: reduce) { .entry-content .wp-block-social-links.has-visible-labels .wp-block-social-link-anchor { transition: none; } }