/*
 * Visoop — WordPress block, alignment, and gallery styles.
 * Covers everything the WordPress Theme Unit Test exercises:
 *   - Classic .alignleft / .alignright / .aligncenter / .alignnone
 *   - Gutenberg .alignwide / .alignfull (and the calc breakout trick)
 *   - .wp-caption and .wp-caption-text
 *   - [gallery] shortcode (.gallery / .gallery-item / .gallery-icon)
 *   - Gutenberg .wp-block-image / .wp-block-button / .wp-block-gallery
 *   - Tables (classic + .wp-block-table)
 *   - WP 6.1 spacing-preset + font-size-preset CSS custom-property defaults
 *   - Featured image (vertical + horizontal orientations)
 *
 * Loaded after blog.css so blog rules can be overridden where needed.
 */

/* ── WP 6.1 preset CSS variables ────────────────────────────────────────
   theme.json (in the theme root) is the canonical source. WP auto-
   generates `<style id="global-styles-inline-css">` that defines every
   `--wp--preset--spacing--*` and `--wp--preset--font-size--*` variable
   from the theme.json `settings.spacing.spacingSizes` and
   `settings.typography.fontSizes` arrays, plus the matching
   `.has-{slug}-font-size` class rules. Nothing else is needed here for
   the preset blocks to render correctly. */

/* Font-size blocks shouldn't inherit the large default top-margin from
   .entry-content > * + * — drop them to the block-gap baseline. */
.entry-content > .has-small-font-size,
.entry-content > .has-medium-font-size,
.entry-content > .has-large-font-size,
.entry-content > .has-x-large-font-size,
.entry-content > .has-xx-large-font-size { margin-top: 1.5rem; margin-bottom: 0; }

/* ── Overflow guard for arbitrary content ──────────────────────────────
   Long URLs, code snippets, unbroken strings, oversized embeds and the
   like routinely push content past the right edge of the layout. These
   rules force wrapping or scrolling for every common offender so the
   page never produces horizontal overflow. */

/* Text wrapping in all content surfaces. `overflow-wrap: anywhere` is
   stronger than `break-word` — it can break a single string mid-grapheme
   rather than only at line opportunities. */
.entry-content,
.entry-content p,
.entry-content li,
.entry-content dd,
.entry-content dt,
.entry-content blockquote,
.entry-content .wp-block-quote,
.entry-content figcaption,
.comments-area,
.comments-area .comment-body,
.comments-area .comment-content,
.comments-area .comment-author,
.comments-area p,
.comments-area li {
	overflow-wrap: anywhere;
	word-wrap: break-word;
	hyphens: auto;
}

/* The entry title sometimes gets a long unbroken phrase from the test
   "Title should not overflow the content area" — wrap it. */
.entry-title,
.entry-header .entry-title,
.visoop-page .entry-title,
.visoop-post-single .entry-title {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Inline code in paragraphs is `white-space: nowrap` by default in our
   pill rule above — within a comment / definition list / blockquote it
   needs to be allowed to wrap so a long token doesn't push the parent
   wide. */
.comments-area :not(pre) > code,
.entry-content :not(pre) > code {
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Block <pre> already has overflow-x: auto so it scrolls horizontally
   internally — re-asserting here in case anything stripped it. */
.entry-content pre,
.entry-content .wp-block-code,
.comments-area pre,
.comments-area .wp-block-code {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Media + embeds inside content containers can't escape their parent. */
.entry-content img,
.entry-content video,
.entry-content iframe,
.entry-content object,
.entry-content embed,
.comments-area img,
.comments-area video,
.comments-area iframe {
	max-width: 100%;
	height: auto;
}

/* Definition lists with long words/values. `dl` itself doesn't constrain
   so the `dd` content can spill on narrow screens — limit and wrap. */
.entry-content dl,
.entry-content dt,
.entry-content dd {
	max-width: 100%;
}

/* ── Has-background blocks ─────────────────────────────────────────────
   When the user gives a Group / Column / Cover / Quote / Pull-quote block
   a background color via the inspector, the block by default has no
   padding — the background paints flush against the inner text. Provide
   a sensible default so the test page reads cleanly without the user
   manually opening the Spacing controls and adjusting padding. */
.wp-block-group.has-background,
.wp-block-column.has-background,
.wp-block-columns.has-background,
.wp-block-row.has-background,
.wp-block-stack.has-background {
	padding: clamp(20px, 3vw, 32px);
}

/* If the user explicitly sets padding via theme.json presets
   (inline `padding: var(--wp--preset--spacing--…)`), let that win.
   That works without further code because inline styles already beat
   any author CSS rule. */

/* ── Code, kbd, pre, samp + Gutenberg Code/Preformatted blocks ────────
   base.css only sets `font-family + font-size` on these, so by default
   <code> reads as plain text without distinction from surrounding copy
   and <pre> blocks lose long-line content off the right edge. */

/* Inline code — small mono pill so it visually pops inside paragraphs. */
:not(pre) > code,
:not(pre) > kbd,
:not(pre) > samp {
	padding: 2px 7px;
	background: var(--ss-stone-50);
	border: 1px solid var(--ss-stone-200);
	border-radius: 4px;
	font-family: var(--ss-font-mono);
	font-size: .88em;
	color: var(--ss-ink);
	white-space: nowrap;
}

/* Keyboard hint — thicker bottom border to mimic a keycap. */
:not(pre) > kbd {
	background: var(--ss-white);
	border: 1px solid var(--ss-stone-200);
	border-bottom-width: 2px;
	border-radius: 4px;
	padding: 2px 6px;
	font-weight: 600;
	font-size: .82em;
}

/* Block code — pre, .wp-block-code, .wp-block-preformatted. Dark slab with
   lime ink color (matches the Sooperstack ink/lime palette), horizontal
   scroll for long lines, full-line wrapping kept off (codey content
   typically expects to scroll, not wrap). */
pre,
.wp-block-code,
.wp-block-preformatted,
.wp-block-code pre {
	display: block;
	margin: 1.5rem 0;
	padding: 18px 22px;
	background: var(--ss-ink);
	color: var(--ss-lime);
	border: var(--ss-border);
	border-radius: var(--ss-radius-sm);
	box-shadow: var(--ss-shadow-xs);
	overflow-x: auto;
	font-family: var(--ss-font-mono);
	font-size: .875rem;
	line-height: 1.6;
	-webkit-overflow-scrolling: touch;
	tab-size: 4;
}

/* <code> inside a <pre> or .wp-block-code MUST sit transparently on top
   of the dark slab. !important defeats anything that paints it white:
   syntax-highlighter plugins (Prism / highlight.js), WP's generated
   `global-styles-inline-css` from theme.json, inline `style=""` baked
   into imported XML content, etc. — any of those produce the visible
   "white pill inside a dark slab" effect with lime text on white that
   becomes unreadable. */
pre code,
pre > code,
.wp-block-code code,
.wp-block-code > code,
pre kbd,
pre samp {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	box-shadow: none !important;
	white-space: pre;
}

/* .wp-block-preformatted often holds plain text formatted output (poetry,
   ascii art); keep the slab look but allow wrapping so non-code content
   stays visible. */
.wp-block-preformatted {
	white-space: pre-wrap;
	background: var(--ss-stone-50);
	color: var(--ss-ink);
	border-color: var(--ss-stone-200);
}

/* Scrollbar styling for the slab — keep it dark-friendly. */
pre::-webkit-scrollbar,
.wp-block-code::-webkit-scrollbar { height: 8px; }
pre::-webkit-scrollbar-thumb,
.wp-block-code::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .15);
	border-radius: 4px;
}
pre::-webkit-scrollbar-thumb:hover,
.wp-block-code::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, .25);
}

/* ── Tables (classic + Gutenberg) ──────────────────────────────────────
   The Theme Unit Test page renders <table> directly in post content; we
   need visible borders, padding and header emphasis or the table reads
   as plain text. Covers both raw <table> and Gutenberg's .wp-block-table. */
.entry-content table,
.wp-block-table table,
.wp-block-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 1.5rem 0;
	font-size: .95rem;
	background: var(--ss-white);
}
.entry-content table th,
.entry-content table td,
.wp-block-table th,
.wp-block-table td {
	padding: 10px 14px;
	border: 1px solid var(--ss-stone-200);
	text-align: left;
	vertical-align: top;
}
.entry-content table th,
.wp-block-table th {
	background: var(--ss-stone-50);
	font-weight: 700;
	color: var(--ss-ink);
}
.entry-content table caption,
.wp-block-table figcaption,
.wp-block-table .wp-element-caption {
	margin: 8px 0 0;
	padding: 0 4px;
	font-size: .85rem;
	font-style: italic;
	color: var(--ss-stone-500);
	text-align: center;
	caption-side: bottom;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--ss-stone-50);
}
.wp-block-table.is-style-stripes th,
.wp-block-table.is-style-stripes td { border: 0; border-bottom: 1px solid var(--ss-stone-100); }

/* ── Classic image alignment ─────────────────────────────────────────── */
.alignnone {
	margin: 8px 0 24px;
}
.aligncenter,
div.aligncenter {
	display: block;
	margin: 8px auto 24px;
	text-align: center;
}
.alignright {
	float: right;
	margin: 8px 0 24px 28px;
	max-width: 50%;
}
.alignleft {
	float: left;
	margin: 8px 28px 24px 0;
	max-width: 50%;
}

/* Mirror the same float/margin behavior when alignment classes are on
   <a> wrapping an <img>, or directly on <img>. */
a img.alignright,
img.alignright   { float: right; margin: 8px 0 24px 28px; }
a img.alignleft,
img.alignleft    { float: left;  margin: 8px 28px 24px 0; }
a img.aligncenter,
img.aligncenter  { display: block; margin: 8px auto 24px; }
a img.alignnone,
img.alignnone    { margin: 8px 0 24px; }

/* Gutenberg full / wide alignment — breakout from the content container.
   Standard pattern: alignwide extends a fixed amount beyond the parent;
   alignfull spans the viewport via the 50%/50vw negative-margin trick.
   The earlier `100vw - clamp(160px,28vw,440px)` formula could compute a
   max-width SMALLER than the parent content column (e.g. 1036px wide-cap
   vs ~1040px content on a 1440px viewport), making wide images visibly
   shrink instead of grow. */
.alignwide {
	margin-left: -80px;
	margin-right: -80px;
	max-width: calc(100% + 160px);
	width: auto;
}
.alignfull {
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}
.alignfull img,
.alignwide img { width: 100%; height: auto; }

/* Shrink the breakout on small viewports so the image doesn't blow past
   the body's safe padding. */
@media (max-width: 1100px) {
	.alignwide {
		margin-left: -40px;
		margin-right: -40px;
		max-width: calc(100% + 80px);
	}
}
@media (max-width: 767px) {
	.alignwide {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}
}

/* Inside a sidebar grid, breakouts shouldn't escape the column. */
.visoop-blog-grid--right-sidebar .alignwide,
.visoop-blog-grid--left-sidebar  .alignwide,
.visoop-blog-grid--right-sidebar .alignfull,
.visoop-blog-grid--left-sidebar  .alignfull {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
	width: 100%;
}

/* ── Caption (classic + block) ──────────────────────────────────────── */
.wp-caption,
figure.wp-caption {
	max-width: 100%;
	margin-bottom: 1.5em;
	padding: 0;
}
.wp-caption img,
figure.wp-caption img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--ss-radius-sm);
}
.wp-caption.alignleft  { margin: 8px 28px 24px 0; }
.wp-caption.alignright { margin: 8px 0 24px 28px; }
.wp-caption.aligncenter { margin: 8px auto 24px; }
.wp-caption-text,
.wp-caption .wp-caption-text,
figure figcaption {
	margin: 8px 0 0;
	padding: 0 4px;
	font-family: var(--ss-font-body);
	font-size: .85rem;
	font-style: italic;
	color: var(--ss-stone-500);
	line-height: 1.5;
	text-align: center;
}

/* ── Classic [gallery] shortcode ─────────────────────────────────────── */
.gallery {
	display: grid;
	grid-template-columns: repeat(var(--gallery-cols, 3), 1fr);
	gap: 14px;
	margin: 1.8em 0;
}
.gallery-columns-1 { --gallery-cols: 1; }
.gallery-columns-2 { --gallery-cols: 2; }
.gallery-columns-3 { --gallery-cols: 3; }
.gallery-columns-4 { --gallery-cols: 4; }
.gallery-columns-5 { --gallery-cols: 5; }
.gallery-columns-6 { --gallery-cols: 6; }
.gallery-columns-7 { --gallery-cols: 7; }
.gallery-columns-8 { --gallery-cols: 8; }
.gallery-columns-9 { --gallery-cols: 9; }

@media (max-width: 767px) {
	.gallery-columns-3 { --gallery-cols: 2; }
	.gallery-columns-4 { --gallery-cols: 2; }
	.gallery-columns-5,
	.gallery-columns-6,
	.gallery-columns-7,
	.gallery-columns-8,
	.gallery-columns-9 { --gallery-cols: 3; }
}

.gallery-item {
	margin: 0;
	text-align: center;
}
.gallery-icon { line-height: 0; }
.gallery-icon img {
	width: 100%;
	height: auto;
	border-radius: var(--ss-radius-sm);
	border: 1px solid var(--ss-stone-200);
	transition: transform .25s ease;
}
.gallery-icon a:hover img,
.gallery-icon a:focus img { transform: scale(1.02); }
.gallery-caption {
	display: block;
	margin: 8px 0 0;
	font-family: var(--ss-font-body);
	font-size: .8rem;
	color: var(--ss-stone-500);
	font-style: italic;
	line-height: 1.4;
}

/* ── Gutenberg Image block ───────────────────────────────────────────── */
.wp-block-image { margin: 1.5em 0; }
.wp-block-image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ss-radius-sm);
}
.wp-block-image figcaption,
.wp-block-image .wp-element-caption {
	margin: 8px 0 0;
	font-size: .85rem;
	color: var(--ss-stone-500);
	font-style: italic;
	text-align: center;
	line-height: 1.5;
}
.wp-block-image.alignleft  { float: left;  margin: 8px 28px 24px 0; }
.wp-block-image.alignright { float: right; margin: 8px 0 24px 28px; }
.wp-block-image.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* ── Gutenberg Button block ──────────────────────────────────────────── */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 1.8em 0;
}
.wp-block-buttons.is-content-justification-center  { justify-content: center; }
.wp-block-buttons.is-content-justification-right   { justify-content: flex-end; }
.wp-block-buttons.is-content-justification-space-between { justify-content: space-between; }
.wp-block-button { margin: 0; }

/* Float alignments for buttons — must come AFTER `.wp-block-buttons` and
   `.wp-block-button` margin resets above (same specificity) or those
   rules would zero out the right margin on `.alignleft` and the left
   margin on `.alignright`, jamming adjacent paragraph text against the
   button. The generic .alignleft/.alignright at the top of this file
   set the same values, but they appear BEFORE the buttons rule in source
   order and lose the cascade race for these specific selectors. */
.wp-block-buttons.alignleft,
.wp-block-button.alignleft {
	float: left;
	margin: 8px 28px 24px 0;
}
.wp-block-buttons.alignright,
.wp-block-button.alignright {
	float: right;
	margin: 8px 0 24px 28px;
}
.wp-block-buttons.aligncenter,
.wp-block-button.aligncenter {
	display: flex;
	justify-content: center;
	margin: 1.8em auto;
}
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	padding: 12px 28px;
	background: var(--ss-lime);
	color: var(--ss-ink);
	font-family: var(--ss-font-body);
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1;
	border: var(--ss-border);
	border-radius: var(--ss-radius-sm);
	box-shadow: var(--ss-shadow-xs);
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--ss-transition), box-shadow var(--ss-transition), background var(--ss-transition);
}
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	color: var(--ss-ink);
	transform: translate(-2px, -2px);
	box-shadow: var(--ss-shadow-sm);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--ss-ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--ss-lime);
}
.wp-block-button__link.has-text-align-center { text-align: center; justify-content: center; }

/* ── Gutenberg Gallery block ─────────────────────────────────────────────
   Strategy (matches Brandberry): WP core ships full gallery layout CSS
   via the `wp-block-library` stylesheet — flex/grid sizing, column counts,
   gap variables, is-cropped handling, responsive breakpoints, the lot.
   We add *only* visual styling on top:
     - kill the default <ul> padding so items don't shift right
     - strip list bullets
     - typography for captions
     - margins for alignwide/alignfull
     - float behavior for alignleft/alignright
   The previous custom grid/flex layout fought core's own rules and broke
   sizing at certain column counts; deferring to core is far more robust. */

.wp-block-gallery {
	margin: 1.8em 0;
	padding-left: 0;
}
.wp-block-gallery.alignfull { padding-left: 0; }
.wp-block-gallery li { list-style: none; }

/* Per-image captions — WP core overlays them on the bottom of each image
   with a dark gradient + white text. We only adjust typography, NOT the
   color/background, so the overlay reads cleanly on any photo. */
.blocks-gallery-grid .blocks-gallery-image figcaption,
.blocks-gallery-grid .blocks-gallery-item figcaption,
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption,
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	font-family: var(--ss-font-body);
	font-size: .85rem;
	font-style: italic;
	line-height: 1.5;
	word-wrap: break-word;
	color: #fff;
	text-shadow: none;
}

/* Gallery-wide caption (single figcaption below the whole gallery) sits
   on the page background, so it gets the muted theme color. */
.wp-block-gallery > .blocks-gallery-caption,
.wp-block-gallery > figcaption,
.wp-block-gallery figcaption.blocks-gallery-caption {
	margin: 10px 0 0;
	font-family: var(--ss-font-body);
	font-size: .85rem;
	font-style: italic;
	color: var(--ss-stone-500);
	text-align: center;
	line-height: 1.5;
}

/* Soft radius on every gallery image, regardless of which markup variant
   WP emitted. No !important — core's layout still wins for sizing. */
.wp-block-gallery .blocks-gallery-item img,
.wp-block-gallery.has-nested-images figure.wp-block-image img {
	border-radius: var(--ss-radius-sm);
}

/* Alignwide / alignfull bottom-margin for galleries so they don't sit
   right against the following block. */
figure.wp-block-gallery.alignwide,
figure.wp-block-gallery.alignfull { margin-bottom: 50px; }

/* Float behavior for left/right-aligned galleries. */
.wp-block-gallery:not(.has-nested-images).alignleft  { margin: 0 40px 20px 0; }
.wp-block-gallery:not(.has-nested-images).alignright { margin: 0 0 20px 40px; }

/* ── Cover block ─────────────────────────────────────────────────────────
   All Cover variants have a dark image/overlay behind their content, so
   the inner heading + paragraph need to be white regardless of the
   theme's body text color. WP only sets this on the base .wp-block-cover
   without enough specificity to beat our customizer's
   `h1-h6 { color: ... !important }` rule. Forcing white here, scoped to
   Cover children only, restores the legible default for:
     - .has-parallax       (fixed background)
     - .is-repeated        (repeated background)
     - the regular .wp-block-cover
   along with the legacy `.wp-block-cover-image` variant. */
.wp-block-cover,
.wp-block-cover-image,
.wp-block-cover.has-parallax,
.wp-block-cover.is-repeated,
.wp-block-cover-image.has-parallax,
.wp-block-cover-image.is-repeated {
	color: #fff;
}
.wp-block-cover h1, .wp-block-cover h2, .wp-block-cover h3,
.wp-block-cover h4, .wp-block-cover h5, .wp-block-cover h6,
.wp-block-cover p, .wp-block-cover a,
.wp-block-cover .wp-block-cover-text,
.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover-image h1, .wp-block-cover-image h2, .wp-block-cover-image h3,
.wp-block-cover-image h4, .wp-block-cover-image h5, .wp-block-cover-image h6,
.wp-block-cover-image p, .wp-block-cover-image a,
.wp-block-cover-image .wp-block-cover-image-text {
	color: #fff !important;
}
/* But honor per-block color picks (`.has-text-color`) — Cover lets users
   override the white default, so don't fight that. */
.wp-block-cover .has-text-color,
.wp-block-cover-image .has-text-color { color: inherit !important; }

/* ── File / Download button ────────────────────────────────────────────
   Gutenberg's file block emits .wp-block-file__button — ships dark by
   default but the theme's customizer recolors button text. Lock to white
   so the download button reads cleanly on its ink background. */
.wp-block-file .wp-block-file__button,
.wp-block-file__button {
	color: #fff !important;
}
.wp-block-file .wp-block-file__button:hover,
.wp-block-file .wp-block-file__button:focus,
.wp-block-file__button:hover,
.wp-block-file__button:focus { color: #fff !important; }

/* Clearfix after floated alignments so following content sits cleanly. */
.entry-content::after,
.visoop-page-content::after,
.visoop-blog-content::after {
	content: "";
	display: table;
	clear: both;
}