/*
Logic Twelve theme custom CSS.

This file holds the CSS that theme.json's structured settings/styles schema
can't express (custom selectors, :hover, pseudo-classes, media queries).
Design tokens (colors, typography, spacing) still live in theme.json — this
file should only ever target the bespoke class names below it, never
redefine a token.

Enqueued in functions.php after the 'global-styles' stylesheet so it can
reliably override the generated global styles.
*/
:where(.wp-site-blocks) > * {
	margin-block-start: 0;
}
/* Comments (parts/comments.html). */
.comments-wrap {
	margin-top: 60px;
}

.comment-avatar-col {
	flex-basis: 40px;
}

.comment-avatar {
	border-radius: 50%;
}

/* Accessibility: skip-link and focus visibility. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
	clip: auto !important;
	clip-path: none;
	color: #1e293b;
	display: block;
	font-size: 14px;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

:where(a, button, input, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-fuchsia);
	outline-offset: 2px;
}

/* Shared centered section intro (apps/blog/pricing patterns + front-page.html). */
.section-header {
	margin-bottom: 40px;
}

/* Product category sections (patterns/product-grid-by-category.php). */
.category-wrapper:not(:last-child) {
	margin-bottom: 5px;
}

.category-heading {
	font-size: 24px;
	margin-bottom: 25px;
	padding-bottom: 10px;
	border-bottom: 2px solid rgba(45, 11, 51, .1);
}

.apps-query {
	margin-top: 30px;
}

/* Platform filter bar (templates/archive.html, the /apps archive). Pill
   buttons echo the site's existing button language: border-radius:50px
   (.btn) and the outline-button's border/fill-on-state colors, sized down
   like .product-tag so the row reads as filter chips, not primary CTAs. */
.platform-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
}

.platform-filter-pill {
	display: inline-block;
	border: 2px solid var(--wp--preset--color--primary-dark);
	border-radius: 50px;
	padding: 8px 20px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
	background-color: transparent;
	text-decoration: none;
	transition: all .3s ease;
}

.platform-filter-pill:hover {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(45, 11, 51, .2);
}

.platform-filter-pill.is-active {
	background-color: var(--wp--preset--color--accent-fuchsia);
	border-color: var(--wp--preset--color--accent-fuchsia);
	color: var(--wp--preset--color--white);
}

.platform-filter-pill.is-active:hover {
	background-color: var(--wp--preset--color--accent-fuchsia);
	border-color: var(--wp--preset--color--accent-fuchsia);
}

/* Blog category filter (templates/index.html, the /blog/ listing). Same
   pill language as .platform-filter above, reused under its own class
   since the two filters live on different listings with different active
   states. */
.blog-category-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
}

.blog-category-filter-pill {
	display: inline-block;
	border: 2px solid var(--wp--preset--color--primary-dark);
	border-radius: 50px;
	padding: 8px 20px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
	background-color: transparent;
	text-decoration: none;
	transition: all .3s ease;
}

.blog-category-filter-pill:hover {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(45, 11, 51, .2);
}

.blog-category-filter-pill.is-active {
	background-color: var(--wp--preset--color--accent-fuchsia);
	border-color: var(--wp--preset--color--accent-fuchsia);
	color: var(--wp--preset--color--white);
}

.blog-category-filter-pill.is-active:hover {
	background-color: var(--wp--preset--color--accent-fuchsia);
	border-color: var(--wp--preset--color--accent-fuchsia);
}

/* Category link in a blog post's meta row (templates/single.html). Same
   pill look as .blog-category-filter-pill, but targeting the <a> itself
   (not the "category-pill" className, which core's post-terms block puts
   on its own wrapping div) so each term gets its own pill if a post ever
   has more than one category, instead of one pill around the whole list. */
.category-pill a {
	display: inline-block;
	border: 2px solid var(--wp--preset--color--primary-dark);
	border-radius: 50px;
	padding: 8px 20px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
	background-color: transparent;
	text-decoration: none;
	transition: all .3s ease;
}

.category-pill a:hover {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(45, 11, 51, .2);
}

/* Blog search (templates/index.html, the /blog/ listing). A single pill-
   shaped input with the icon and submit button inlined inside its border
   rather than stacked underneath, so it reads as one cohesive control. The
   icon is a plain <circle>+<line>, not hand-transcribed path data, kept
   simple like the rest of the theme's inline SVGs. */
.blog-search {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 420px;
	margin-bottom: 24px;
	padding: 4px 6px 4px 18px;
	border: 2px solid var(--wp--preset--color--border-light);
	border-radius: 50px;
	background-color: var(--wp--preset--color--white);
	transition: border-color .3s ease;
}

.blog-search:focus-within {
	border-color: var(--wp--preset--color--primary-dark);
}

.blog-search-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--wp--preset--color--text-muted);
}

.blog-search-input {
	flex: 1;
	min-width: 0;
	border: none;
	background: none;
	font-size: 15px;
	color: var(--wp--preset--color--text-dark);
}

.blog-search-input:focus {
	outline: none;
}

.blog-search-submit {
	flex-shrink: 0;
	border: none;
	border-radius: 50px;
	padding: 8px 20px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--accent-fuchsia);
	cursor: pointer;
	transition: all .3s ease;
}

.blog-search-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(225, 0, 152, .3);
}

/* Logic Banner (patterns/logic-banner.php). */
.logic-banner {
	position: relative;
	padding-top: 180px;
	padding-bottom: 100px;
}

.logic-banner h1 {
	line-height: 1.15;
}

.logic-banner p {
	line-height: 1.6;
}
.logic-banner::before {
	content: '';
	position: absolute;
	top: 10%;
	right: 0%;
	width: 900px;
	height: 500px;
	background: radial-gradient(circle, rgba(225, 0, 152, 0.08) 0%, transparent 65%);
	z-index: 0;
}

/* Product card (patterns/product-card.php). core/post-template's grid
   layout auto-stretches every "wp-block-post" item in a row to match the
   tallest card's content (default CSS grid item stretch) — height:100%
   makes the visible card fill that stretched cell instead of sitting at
   its own shorter natural height with a dead gap below it; min-height is
   the floor for rows where every card is short. product-card-body grows
   to fill the leftover space so the footer (tag + status link) stays
   pinned to the bottom; the excerpt is allowed up to 5 lines (paired with
   the longer excerptLength in the pattern) so that space gets filled with
   more text instead of staying blank. The title is never truncated —
   instead its min-height reserves a full 2-line slot (1.25 line-height ×
   2) so a one-line title still pushes the excerpt down to the same row as
   a two-line title in a neighboring card; only on the rare title longer
   than 2 lines does that one card grow taller than its row. The excerpt
   itself is still clamped — only title truncation is off the table here. */
.product-card {
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 14px;
	padding: 35px;
	transition: all .3s cubic-bezier(.16, 1, .3, 1);
	height: 100%;
	min-height: 320px;
}

.product-card:hover {
	box-shadow: var(--wp--preset--shadow--card-hover);
	transform: translateY(-5px);
	border-color: rgba(225, 0, 152, .2);
}

.product-card-body {
	flex: 1;
	min-height: 0;
}

.product-card-body .wp-block-post-title {
	width: 100%;
	line-height: 1.25;
	min-height: 2.5em;
}

.product-card-body .wp-block-post-excerpt {
	width: 100%;
	flex-shrink: 0;
}

.product-card-body .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	width: 100%;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-card-footer {
	border-top: 1px solid #F1F5F9;
	padding-top: 20px;
}

/* Blog card (patterns/blog-card.php). Image-on-top layout: featured image
   spans the full card width at a fixed aspect ratio, content stacks below
   it. height:100% makes the card fill the row height core/post-template's
   grid layout auto-stretches its "wp-block-post" wrapper to (the tallest
   card's content sets the row height; without this a shorter-excerpt card
   sits at its own smaller natural height with a dead gap below it, same
   issue already fixed on .product-card above) — min-height is the floor
   for rows where every card is short, and still lets a card grow if a
   title needs more than its usual space — titles are never truncated. The
   excerpt is clamped so a long excerpt doesn't run on indefinitely. The
   whole card — image, title, excerpt — is one click target via
   .blog-card-link-overlay (an absolutely positioned <a> covering the
   card), not by making the card's own wp:group an <a> (core/group's
   save() always emits its declared tagName with no "href" support — see
   the pattern's doc comment). An accent underline still appears on hover,
   echoing .product-card and .why-card elsewhere. */
.blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 12px;
	overflow: hidden;
	height: 100%;
	min-height: 240px;
	transition: all .3s cubic-bezier(.16, 1, .3, 1);
}

.blog-card-link-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.blog-card:hover {
	box-shadow: var(--wp--preset--shadow--card-hover);
	transform: translateY(-5px);
	border-color: rgba(225, 0, 152, .2);
}

.blog-card::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--wp--preset--color--accent-fuchsia);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.blog-card:hover::after {
	transform: scaleX(1);
}

.blog-card-image {
	margin: 0;
}

.blog-card-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	margin: 0;
	background-color: var(--wp--preset--color--border-light);
}

.blog-card-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 20px 24px 0 24px;
}

/* Tighter than WP's default 24px block gap, matching the prototype's
   margin-bottom:10px (title) / 15px (excerpt) instead of leaving large
   gaps between the date, title, excerpt and "Read Full Post" link. */
.blog-card-content > * {
	margin-block-start: 10px;
}

.blog-card-content > *:first-child {
	margin-block-start: 0;
}

.blog-card-date {
	flex-shrink: 0;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.blog-card-content .wp-block-post-title {
	flex-shrink: 0;
	color: var(--wp--preset--color--primary-dark);
}

.blog-card-content .wp-block-post-excerpt {
	width: 100%;
	flex-shrink: 0;
}

.blog-card-content .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	width: 100%;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Just a plain span now (not its own link — the whole .blog-card is the
   link, see the pattern), so margin-top: auto on the last flex child still
   pins it to the bottom of .blog-card-content's own flex column regardless
   of how much title/excerpt text precedes it. Hidden until the card is
   hovered/focused so it reads as a reveal, not a permanent footer line —
   :focus-within (not :focus, since the span itself isn't focusable) so
   keyboard users tabbing to the card see the same reveal. */
.blog-card-readmore {
	display: block;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid transparent;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--wp--preset--color--accent-fuchsia);
	opacity: 0;
	transition: opacity .3s cubic-bezier(.16, 1, .3, 1), border-color .3s cubic-bezier(.16, 1, .3, 1);
}

.blog-card:hover .blog-card-readmore,
.blog-card:focus-within .blog-card-readmore {
	opacity: 1;
	border-top-color: var(--wp--preset--color--border-light);
}

/* Why Logic Twelve (patterns/why-logic-twelve.php). */
.why-section {
	position: relative;
	overflow: hidden;
}

.why-section::before {
	content: '';
	position: absolute;
	top: -10%;
	left: -8%;
	width: 480px;
	height: 480px;
	background: var(--wp--preset--gradient--fuchsia-glow);
	z-index: 0;
}

.why-section > * {
	position: relative;
	z-index: 1;
}

.why-grid {
	margin-top: 10px;
}

.why-card {
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 16px;
	padding: 32px;
	text-align: center;
	align-items: center;
	background: var(--wp--preset--gradient--card-sheen);
	transition: all .3s cubic-bezier(.16, 1, .3, 1);
}

.why-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--wp--preset--shadow--card-hover);
	border-color: rgba(225, 0, 152, .2);
}

.why-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(225, 0, 152, .1);
	color: var(--wp--preset--color--accent-fuchsia);
	margin-bottom: 8px;
}

.why-icon svg {
	width: 26px;
	height: 26px;
}

/* 404 (templates/404.html). Same ambient fuchsia-glow-blob treatment as
   .logic-banner, centered behind the numeral instead of off to one side
   since there's no other content competing for that corner. The numeral
   is the page's one big visual anchor, sized with clamp() (like
   logic-banner-heading's fluid size in theme.json) so it scales down
   gracefully on narrow screens instead of needing a breakpoint. */
.tpl-404-main {
	position: relative;
	overflow: hidden;
	padding-top: 180px;
	padding-bottom: 140px;
}

.tpl-404-main::before {
	content: '';
	position: absolute;
	top: -8%;
	left: 50%;
	transform: translateX(-50%);
	width: 700px;
	height: 480px;
	background: radial-gradient(circle, rgba(225, 0, 152, .1) 0%, transparent 65%);
	pointer-events: none;
	z-index: 0;
}

.tpl-404-main > * {
	position: relative;
	z-index: 1;
}

.tpl-404-code {
	margin: 0;
	font-size: clamp(72px, 16vw, 140px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--accent-fuchsia);
}

/* Mirrors .blog-search's pill-shaped input — icon-less here since
   core/search has no slot for one, but same border/radius/focus
   treatment so it still reads as the same control language. The button
   itself inherits theme.json's global button styling (fuchsia fill,
   50px radius, hover swap to primary-dark); only its size is trimmed
   down to fit comfortably inside the pill alongside the input. */
.lt-404-search {
	max-width: 420px;
	margin: 30px auto 0;
}

.lt-404-search .wp-block-search__inside-wrapper {
	border: 2px solid var(--wp--preset--color--border-light);
	border-radius: 50px;
	padding: 4px 4px 4px 22px;
	background-color: var(--wp--preset--color--white);
	transition: border-color .3s ease;
}

.lt-404-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--primary-dark);
}

.lt-404-search .wp-block-search__input {
	border: none;
	background: none;
	font-size: 15px;
}

.lt-404-search .wp-block-search__input:focus {
	outline: none;
}

.lt-404-search .wp-block-search__button {
	padding: 10px 22px;
	font-size: 14px;
}

.lt-404-actions {
	margin-top: 28px;
}

/* Listing/error/single templates: shared main padding, per-template extras. */
.tpl-listing-main {
	padding-top: 20px;
	padding-bottom: 100px;
}

.archive-title {
	margin-top: 20px;
	margin-bottom: 40px;
}

.search-field {
	margin-top: 20px;
	margin-bottom: 40px;
}

.single-featured-image {
	margin-top: 10px;
	margin-bottom: 10px;
	border-radius: 14px;
	overflow: hidden;
}

.single-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	margin: 0;
}

/* Share row (patterns/share-post.php), shown on templates/single.html.
   Circular icon buttons echo .category-pill's border/hover-fill treatment
   so it reads as part of the same meta-row UI language. */
.share-post-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 2px solid var(--wp--preset--color--primary-dark);
	border-radius: 50%;
	color: var(--wp--preset--color--primary-dark);
	transition: all .3s ease;
}

.share-post-link svg {
	width: 16px;
	height: 16px;
}

.share-post-link:hover {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(45, 11, 51, .2);
}

/* Blog single CTA band (templates/single.html), mirroring .product-cta's
   band on single-product.html so both single templates end on the same
   "keep browsing" pattern. */
.blog-cta {
	padding-top: 50px;
	padding-bottom: 70px;
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.product-status-pill {
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--text-muted);
}

.product-status-link {
	color: var(--wp--preset--color--accent-fuchsia);
	font-weight: 700;
	text-decoration: none;
}

.category-see-all {
	margin-top: 60px;
}

.product-tag {
	background-color: rgba(45, 11, 51, .06);
	color: var(--wp--preset--color--primary-dark);
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 700;
}

/* Single product (templates/single-product.html). A dedicated template
   (rather than reusing single.html, shared with blog posts) so an app's
   page reads as a product/marketing page — big title on a tinted logic-banner,
   no blog-style date — instead of a generic article. */
.product-logic-banner {
	position: relative;
	overflow: hidden;
	padding-top: 110px;
	padding-bottom: 30px;
}

/* Core's breadcrumbs block inherits the global link color (accent-fuchsia),
   which is far too loud for a quiet, secondary navigation aid — mute it. */
.wp-block-breadcrumbs {
	font-size: 14px;
}

.wp-block-breadcrumbs a {
	color: var(--wp--preset--color--text-muted);
}

.wp-block-breadcrumbs a:hover {
	color: var(--wp--preset--color--accent-fuchsia);
}

.product-logic-banner::before {
	content: '';
	position: absolute;
	top: -15%;
	right: -10%;
	width: 480px;
	height: 480px;
	background: var(--wp--preset--gradient--fuchsia-glow);
	z-index: 0;
}

/* .product-logic-banner and .product-cta are alignfull (edge-to-edge background),
   so their content needs an explicit width cap — same content width as
   every other section on the site, driven by the theme's global
   content-size setting rather than a one-off per-block contentSize. */
.product-logic-banner > *,
.product-cta > * {
	position: relative;
	z-index: 1;
	max-width: var(--wp--style--global--content-size);
	margin-left: auto !important;
	margin-right: auto !important;
}

.product-logic-banner-title {
	margin-top: 12px;
}

/* Product title card (templates/single-product.html). Replaces the plain
   bg-light title band with a white card and a tinted, accent-bordered
   inner panel around the title — same card-on-card treatment used for
   product screenshots elsewhere on the page. */
.product-title-card-wrap {
	padding-top: 32px;
}

.product-title-card {
	background: var(--wp--preset--color--white);
	border-radius: 10px;
	box-shadow: 0 2px 16px rgba(0, 0, 0, .08);
	overflow: hidden;
}

.product-title-card-accent {
	background: var(--wp--preset--color--bg-light);
	border-left: 4px solid var(--wp--preset--color--accent-fuchsia);
	padding: 32px 32px 28px;
}

.product-title-card-heading {
	margin: 0;
	font-size: 42px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--primary-dark);
}

.product-featured-image {
	margin: 24px 0;
	border-radius: 12px;
	overflow: hidden;
}

.product-content {
	padding-bottom: 40px;
}

.product-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	margin: 0;
}

.product-cta {
	padding-top: 50px;
	padding-bottom: 70px;
	border-top: 1px solid var(--wp--preset--color--border-light);
}

/* Header (parts/header.html): frosted-glass bar, true-centered nav row.
   z-index is required here, not just on the dropdown itself: a `position:
   sticky` element with no explicit z-index has no real stacking-context
   priority over later siblings in the DOM (the page's sections), so once
   you scroll and a section like #logic-banner sits "under" the sticky header, that
   section paints over it — taking the "Our Apps" dropdown down with it
   even though the dropdown's own z-index:2 (set by core) is higher than
   anything inside #logic-banner. Promoting the whole header fixes that. */
.site-header-glass {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	padding-top: 0;
	padding-bottom: 0;
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header-row {
	padding-top: 16px;
	padding-bottom: 16px;
}

.site-header-row.is-layout-flex {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
}

.site-header-row > :nth-child(2) {
	justify-self: center;
}

.site-header-row > :nth-child(3) {
	justify-self: end;
}

/* Same specificity issue as the footer's nav links (see custom.css's
   .footer-nav-links rules): core's own
   .wp-block-navigation-item__content.wp-block-navigation-item__content
   rule sets color:inherit at (0,3,0) specificity, beating a plain
   ".site-header-nav a" rule. Match it instead of losing to it. */
.site-header-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--text-dark);
	transition: color .2s ease;
}

.site-header-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-fuchsia);
}

/* Dropdown panel for "Our Apps" (logic-twelve/apps-submenu in functions.php).
   Core only styles the submenu container's position/visibility; give it the
   same card look (background, border, shadow) used elsewhere on the page. */
.site-header-nav .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--card-hover);
	padding: 8px;
}

.site-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
	border-radius: 8px;
	padding: 10px 14px;
}

.site-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--bg-light);
}

/* Chevron on "Our Apps" (functions.php's logic-twelve/apps-submenu block)
   signals it has a dropdown. Rotates to point up while the dropdown is
   open, mirroring the hover condition core uses to show the submenu. */
.apps-submenu-chevron {
	width: 14px;
	height: 14px;
	margin-left: 4px;
	vertical-align: middle;
	flex-shrink: 0;
	transition: transform .2s ease;
}

.wp-block-navigation-item.has-child:hover .apps-submenu-chevron {
	transform: rotate(180deg);
}

/* Buttons: hover lift to match the prototype's interaction feel. */
.wp-element-button {
	transition: all .3s ease;
}

.wp-element-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(225, 0, 152, .5);
}

/* Footer (parts/footer.html): padding, muted link color, 2:1:1 column ratio. */
.site-footer {
	padding-top: 80px;
	padding-bottom: 30px;
}

/* Site title in the footer is a link, so it inherits the global
   elements.link :hover color (primary-dark, theme.json) — identical to the
   footer's own background-color, making it invisible on hover. Force it
   back to the footer's white text color on hover. */
.site-footer .wp-block-site-title a:hover {
	color: var(--wp--preset--color--white);
}
footer .wp-block-post-title, footer .footer-nav-links {
	font-size: var(--wp--preset--font-size--small);
}

.footer-copyright {
	margin-top: 30px;
}

.footer-nav-links .wp-block-navigation__container {
	gap: 0px;
	font-weight: 400;
}

/* Core's .wp-block-navigation-item__content.wp-block-navigation-item__content
   rule sets color:inherit at (0,3,0) specificity, which beats a plain
   ".footer-nav-links a" rule and lets the link fall back to the footer's
   own white text color. Repeat the class to match (and beat, via source
   order) that specificity instead of losing to it. */
.footer-nav-links .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--footer-muted);
}

.footer-nav-links .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: #fff;
}

/* "Marketplace Portfolio" (parts/footer.html) lists live products through a
   Query Loop rather than the Navigation block used by "Company & Help", so
   it needs its own selectors: the post-template is flow layout (`gap`
   doesn't apply to non-flex/grid contexts), so spacing between items uses
   margin instead, matching the 12px rhythm used elsewhere on this column. */
.footer-nav-links .wp-block-post-template > li, footer .wp-block-navigation__container > li {
	margin-block-start: 5px;
}

.footer-nav-links .wp-block-post-template > li:first-child {
	margin-block-start: 0;
}

.footer-nav-links .wp-block-post-title {
	margin: 0;
}

.footer-nav-links .wp-block-post-title a {
	color: var(--wp--preset--color--footer-muted);
}

.footer-nav-links .wp-block-post-title a:hover {
	color: #fff;
}

.site-footer .wp-block-social-link-anchor {
	transition: color .2s ease;
}

.site-footer .wp-block-social-link-anchor:hover {
	color: var(--wp--preset--color--accent-fuchsia);
}

.footer-grid {
	grid-template-columns: 2fr 1fr 1fr;
}

@media (max-width: 992px) {
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* Any wp:table block: horizontal scroll on small screens. */
@media (max-width: 768px) {
	.wp-block-table table {
		display: block;
		overflow-x: auto;
	}
}

/* Query Loop grids (apps grid in patterns/product-grid-by-category.php, blog
   grid in front-page.html): core's grid layout support always emits
   "auto-fill", which reserves empty tracks instead of collapsing them — a
   short row gets a visible empty column. Override with "auto-fit" so column
   count shrinks fluidly with the viewport and short rows fill it evenly,
   matching the prototype's `repeat(auto-fit, minmax(_, 1fr))` rule exactly
   (no breakpoint needed, the prototype didn't have one either). */
.apps-query .wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.blog-query .wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Product detail page sections (patterns/product-logic-banner-banner.php,
   product-trust-bar.php, product-how-it-works.php, product-pricing.php,
   product-faq.php) — optional patterns an editor inserts into a product's
   post content for a richer marketing-style page. product-features-grid.php
   intentionally reuses .why-grid/.why-card (why-logic-twelve.php) instead of
   its own classes, since it's the same icon-card grid layout. */
.logic-banner-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(225, 0, 152, .08);
	border-radius: 999px;
	padding: 5px 14px;
	margin-bottom: 8px;
}

.product-logic-banner-shot {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border-light);
	box-shadow: var(--wp--preset--shadow--card-hover);
}

.product-logic-banner-shot-chrome {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--wp--preset--color--bg-light);
	padding: 10px 14px;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.product-logic-banner-shot-chrome span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

.product-logic-banner-shot img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	margin: 0;
}

.trust-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px;
}

.trust-bar-stat {
	text-align: center;
}

.trust-bar-divider {
	width: 1px;
	height: 40px;
	background: rgba(255, 255, 255, .15);
}

.trust-bar-badge {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 12px;
	padding: 12px 20px;
}

.how-it-works-grid {
	display: grid;
	grid-template-columns: 1fr 40px 1fr 40px 1fr !important;
	align-items: start;
}

.how-step {
	text-align: center;
	padding: 0 16px;
}

.how-step-number {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	background: var(--wp--preset--color--accent-fuchsia);
	box-shadow: var(--wp--preset--shadow--button-glow);
}

.how-step-arrow {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 24px;
	color: var(--wp--preset--color--accent-fuchsia);
}

/* The arrow used to be a fixed-size <svg width="32" height="20">; now it's
   the logic-twelve/icon block (viewBox only, no intrinsic size), so the
   32x20 has to come from CSS instead. */
.how-step-arrow svg {
	width: 32px;
	height: 20px;
}

@media (max-width: 768px) {
	.how-it-works-grid {
		grid-template-columns: 1fr !important;
		gap: 24px;
	}

	.how-step-arrow {
		display: none;
	}
}

/* Core's default block spacing (".is-layout-flow > *") adds margin-block-start
   to every child except the first, so within a CSS grid row the 2nd/3rd
   items sit pushed down relative to the 1st — the actual cause of the
   pricing cards/how-it-works steps looking vertically misaligned. Reset it
   explicitly rather than relying on the "grid" layout type alone, since
   already-inserted blocks keep whatever layout type was saved at insert time. */
.pricing-grid > *,
.how-it-works-grid > * {
	margin-block-start: 0 !important;
}

.pricing-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr !important;
	gap: 24px;
	max-width: 860px;
	margin: 0 auto;
}

.pricing-card {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 20px;
	padding: 32px 28px;
	box-shadow: var(--wp--preset--shadow--pricing-box);
	position: relative;
}

.pricing-card-cta {
	margin-top: auto !important;
	padding-top: 16px;
}

.pricing-card.is-featured {
	background-color: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
	box-shadow: var(--wp--preset--shadow--card-hover);
}

.pricing-badge-popular {
	position: absolute;
	top: 16px;
	right: 16px;
	background: var(--wp--preset--color--accent-fuchsia);
	color: var(--wp--preset--color--white);
	font-size: 10px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	letter-spacing: .05em;
}

.pricing-feature-list {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pricing-feature-list li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 14px;
}

.pricing-feature-list li::before {
	content: '✓';
	color: var(--wp--preset--color--accent-fuchsia);
	font-weight: 700;
}

@media (max-width: 768px) {
	.pricing-grid {
		grid-template-columns: 1fr !important;
	}
}

.faq-item {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	padding: 20px 0;
}

.faq-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-chevron {
	flex-shrink: 0;
	transition: transform .2s ease;
	color: var(--wp--preset--color--accent-fuchsia);
}

.faq-item[open] .faq-chevron {
	transform: rotate(180deg);
}

/* Maintenance mode (inc/maintenance.php). Full-viewport, dark-gradient-plus-
   fuchsia-glow card, since this page renders standalone with no header/footer
   template parts. */
.lt-maintenance-body {
	margin: 0;
	min-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--bg-light);
	padding: 24px;
}

.lt-maintenance {
	position: relative;
	width: 100%;
	max-width: 560px;
}

.lt-maintenance::before {
	content: '';
	position: absolute;
	top: -120px;
	right: -120px;
	width: 360px;
	height: 360px;
	background: radial-gradient(circle, rgba(225, 0, 152, .08) 0%, transparent 65%);
	pointer-events: none;
}

.lt-maintenance-card {
	position: relative;
	background: var(--wp--preset--color--card-background);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 20px;
	padding: 56px 40px;
	text-align: center;
	box-shadow: var(--wp--preset--shadow--card-hover);
}

.lt-maintenance-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 28px;
}

.lt-maintenance-logo img {
	display: block;
	max-height: 40px;
	width: auto;
}

.lt-maintenance-sitename {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: .02em;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

.lt-maintenance-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(225, 0, 152, .1);
	color: var(--wp--preset--color--accent-fuchsia);
	margin-bottom: 24px;
}

.lt-maintenance-icon svg {
	width: 34px;
	height: 34px;
}

.lt-maintenance-heading {
	margin: 0 0 12px;
}

.lt-maintenance-message {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.obfuscated-email-button {
	font: inherit;
	color: var(--wp--preset--color--accent-fuchsia);
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	text-decoration: underline;
}

.obfuscated-email-button:hover {
	color: var(--wp--preset--color--primary-dark);
}

/*
 * Editor-only: the logic-twelve/obfuscated-email-format RichText format
 * (assets/js/obfuscated-email-format.js) saves as a plain <span> with this
 * class. functions.php's render_block filter always swaps it for a real
 * .obfuscated-email-button before the page reaches a visitor, so this class
 * never appears on the live site — this rule only exists to make applied
 * spans visible while editing.
 */
.obfuscated-email-format {
	background-color: rgba(225, 0, 152, 0.12);
	border-bottom: 1px dashed var(--wp--preset--color--accent-fuchsia);
}