/* Site-wide CSS tweaks, versioned via the listo-blocks plugin. */

/* Issue #4: hide the "Contact us" page title on the Contact page (page id 776). */
body.page-id-776 .wp-block-post-title {
	display: none;
}

/* Hide the "Blog" page title on the blog homepage (posts index, body.blog).
   It's the page's only .wp-block-heading; the listing's post titles use
   .wp-block-post-title, so they stay visible. Single posts are body.single-post,
   so their own content headings are unaffected. */
body.blog .wp-block-heading {
	display: none;
}

/* Issue #5 + #7: FAQ (arrow-icon-details) — one brand-green chevron on the RIGHT
   that points right (>) when collapsed and rotates down (v) when expanded,
   replacing the theme's default down/right arrows. Higher specificity +
   !important to override the theme's registered block-style marker. */
details.is-style-arrow-icon-details summary {
	list-style: none !important;
	display: flex;
	align-items: center;
	justify-content: space-between; /* question left, chevron right */
	gap: 0.6em;
	cursor: pointer;
}

details.is-style-arrow-icon-details summary::-webkit-details-marker {
	display: none;
}

details.is-style-arrow-icon-details summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.42em;
	height: 0.42em;
	border-top: 2px solid var(--wp--preset--color--primary);
	border-right: 2px solid var(--wp--preset--color--primary);
	transform: rotate(45deg); /* points right: > (collapsed) */
	transition: transform 0.2s ease;
}

details.is-style-arrow-icon-details[open] > summary::after {
	transform: rotate(135deg); /* points down: v (expanded) */
}

/* Pricing table: de-emphasize the "$" currency symbol relative to the amount,
   matching the muted colour of the "per year" / "pay once" labels
   (has-contrast-slight-color). The symbol is wrapped in
   <span class="price-symbol"> by pricing-table.js. */
.price-symbol {
	color: var(--wp--preset--color--contrast-slight);
	margin-right: 3px;
}

/* "30-day money-back guarantee" badge (listo/guarantee). Droppable anywhere:
   a fixed shield column (left) + a flexible text column (right), vertically
   centered. Keeps a sensible max width and centers itself. The text column
   fills the remaining width and wraps internally instead of dropping below the
   shield. On narrow screens it stacks: shield above centered text. */
.listo-guarantee {
	max-width: 600px;
	margin-inline: auto;
	flex-wrap: nowrap;
	align-items: center;
}

.listo-guarantee__icon {
	flex: 0 0 auto;
	width: 4.75rem;
	height: 4.75rem;
}

.listo-guarantee__text {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 480px) {
	.listo-guarantee {
		flex-direction: column;
		text-align: center;
	}

	.listo-guarantee__text {
		align-items: center;
	}
}

/* Mobile: the phone image (2.png) sits within the section's equal padding.
   Drop the figure's default bottom margin and the img's inline baseline gap so
   the space below it equals the section padding (no extra gap). */
.listo-mobile figure.wp-block-image {
	margin-bottom: 0;
}

.listo-mobile figure.wp-block-image img {
	display: block;
	/* Up to 600px wide, but never wider than its column (so it can't overflow the
	   viewport on phones) and never taller than 75% of the viewport; width:auto
	   lets it scale down proportionally (no distortion) when a cap kicks in. */
	width: auto !important;
	max-width: min(100%, 600px);
	height: auto;
	max-height: 75vh;
}

/* Hero (listo/hero): the product screenshot (1.png) is very tall, so on short
   viewports it overflows the fold and gets cut off. Cap its height to the
   viewport minus header/spacing (~200px), keeping aspect ratio and never
   exceeding the wide container (max-width:100%). Centered.
   width:auto needs !important to beat core's `.wp-block-image.alignwide img
   { width:100% }` (specificity 0,0,2,1) — without it, width is forced to 100%
   while max-height clamps height, distorting the image. */
.listo-hero-shot img {
	max-height: calc(100vh - 100px);
	width: auto !important;
	max-width: 100%;
	margin-inline: auto;
	display: block;
}

/* Tech section: icon badges are exact circles with the glyph dead-centered,
   like the pricing crown badge (equal dimensions + border-radius 50% + flex). */
.listo-icon-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0 !important;
	border-radius: 50% !important;
}

.listo-icon-badge svg {
	display: block;
	/* Sit comfortably inside the 3.5rem badge with even padding. The inline
	   width/height="30" made portrait icons (e.g. the lock, 384x512) fill the
	   full height and look cramped; cap them smaller and uniform. */
	width: 1.5rem;
	height: 1.5rem;
}

/* tech + competition (listo/tech, listo/competition): make the 3 feature
   "sub-rectangle" cards equal height — all match the tallest. Core already
   stretches the columns to equal height; making each column a flex container
   lets its single card fill that height instead of hugging its own content. */
.listo-equal-cards .wp-block-column {
	display: flex;
}

.listo-equal-cards .wp-block-column > .wp-block-group {
	width: 100%;
}

/* Section bylines (tech, pricing) and feature-card body copy: lift the bold
   phrases above the muted body text with a soft off-white. */
.listo-byline strong,
.listo-rich-copy strong {
	color: #e4e4e7;
}

/* Checklist (listo/checklist) responsive columns: 4 across on wide screens,
   2 at <=1400px, 1 at <=1000px. Core columns only do side-by-side or fully
   stacked, so drive it with CSS grid. Two-class selector out-specifies core's
   .wp-block-columns display:flex regardless of stylesheet order. */
.wp-block-columns.listo-checklist-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 1400px) {
	.wp-block-columns.listo-checklist-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1000px) {
	.wp-block-columns.listo-checklist-grid {
		grid-template-columns: 1fr;
	}
}

/* features-a (listo/features-a) card grid: collapse the 6-column masonry to a
   single stacked column at the same 1400px breakpoint checklist drops to 2
   columns. WP renders the per-card grid-column/grid-row spans as scoped
   .wp-container-* rules, so override them with !important. */
@media (max-width: 1400px) {
	.listo-features-grid {
		grid-template-columns: 1fr !important;
	}
	.listo-features-grid > * {
		grid-column: auto !important;
		grid-row: auto !important;
	}
}

/* Heading word-swap (listo/competition "Why not just use X"): assets/heading-swap.js
   cycles the <mark> word. The chip is a STATIC wrapper (fixed slot, semi-transparent
   green, word centered) so it doesn't move; only the <mark> inside animates. */
.p-s-heading-swap .p-s-swap-chip {
	display: inline-block;
	min-width: 8ch;
	text-align: center;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 6%, transparent);
	border-radius: 0.15em;
	padding: 0.05em 0.25em;
}
.p-s-heading-swap .p-s-swap-chip mark {
	background: transparent;
	display: inline-block;
}
.p-s-heading-swap .p-s-swap-chip mark.ps-word-out { animation: psWordOut .28s ease forwards; }
.p-s-heading-swap .p-s-swap-chip mark.ps-word-in { animation: psWordIn .32s ease; }
@keyframes psWordOut { to { opacity: 0; transform: translateY(-.5em); } }
@keyframes psWordIn { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.p-s-heading-swap .p-s-swap-chip mark.ps-word-out,
	.p-s-heading-swap .p-s-swap-chip mark.ps-word-in { animation: none; }
}

/* Sticky mini-CTA (listo/mini-cta): sits under the hero, then pins to the top
   of the viewport as you scroll. The site header scrolls away, so top:0 is
   clean. sticky-cta.js adds .is-stuck once it pins. No extra background is
   introduced - the card keeps its own look. On phones the pinned state folds
   the copy away so only the buttons remain, to reclaim vertical space. */
.listo-cta-sticky {
	position: sticky;
	top: 0;
	z-index: 100;
}
/* The copy block folds up smoothly when the CTA pins (phones only, below). */
.listo-mini-cta-text {
	overflow: hidden;
	max-height: 20rem;
	transition: max-height .35s ease, opacity .25s ease, margin .35s ease;
}
.listo-cta-sticky .listo-mini-cta {
	transition: padding .35s ease, gap .35s ease;
}

@media (max-width: 600px) {
	.listo-cta-sticky.is-stuck .listo-mini-cta-text {
		max-height: 0;
		opacity: 0;
		margin: 0;
		pointer-events: none;
	}
	/* Tighten the card down to just the buttons row once the copy is gone. */
	.listo-cta-sticky.is-stuck .listo-mini-cta {
		row-gap: 0;
		padding-top: var(--wp--preset--spacing--20);
		padding-bottom: var(--wp--preset--spacing--20);
	}
}

/* Keep the mini-CTA's two buttons (Contact us / Get ListoWP) on one row, even
   on narrow phones, to save vertical space. */
.listo-mini-cta .wp-block-buttons {
	flex-wrap: nowrap;
}
@media (max-width: 600px) {
	.listo-mini-cta .wp-block-buttons .wp-block-button__link {
		padding-left: 1em;
		padding-right: 1em;
		white-space: nowrap;
	}
}