/* Nokwal RE - blog in the home page design: post cards ([gn_blog_posts], home page blog
   section), blog index / archives, single posts, and the plain Listings page frame.
   Self-contained tokens (scoped to .gnb / .gnb-grid) so it looks the same in any theme;
   the accent comes from --gnh-tint (nav.css, overridden by Preferences → Agent & site → Accent colour). */

.gnb, .gnb-block, .gnb-grid {
	--gnb-font: var(--gnt-font);
	--gnb-font-display: var(--gnt-font);
	--gnb-label: var(--gnt-label);
	--gnb-label-2: var(--gnt-label-2);
	--gnb-label-3: var(--gnt-label-3);
	--gnb-soft: var(--gnt-bg-alt);
	--gnb-soft-2: var(--gnt-fill);
	--gnb-sep: var(--gnt-line);
	--gnb-tint: var(--gnh-tint, #0071e3);
	--gnb-link: var(--gnh-link, #0066cc);
	--gnb-gutter: clamp(20px, 4.5vw, 72px);
	--gnb-r: 28px;
	--gnb-ease-out: var(--gnt-ease-out);
	--gnb-spring: linear(0, .058, .183, .325, .46, .578, .676, .755, .816, .864, .899, .926, .946, .961, .972, .98, .986, .99, .993, .995, .996, .997, .998, .999, 1);
	font-family: var(--gnb-font);
	color: var(--gnb-label);
	-webkit-font-smoothing: antialiased;
}
.gnb *, .gnb *::before, .gnb *::after, .gnb-grid *, .gnb-grid *::before, .gnb-grid *::after, .gnb-block * { box-sizing: border-box; }
.gnb .gnh-wrap-wide, .gnb-block-wrap { width: min(100% - 2 * var(--gnb-gutter), 82rem); margin-inline: auto; }
@media (min-width: 2000px) { .gnb .gnh-wrap-wide { width: min(100% - 2 * var(--gnb-gutter), 92rem); } }
.gnb :focus-visible, .gnb-grid :focus-visible { outline: 3px solid rgba(0, 113, 227, .55); outline-offset: 3px; border-radius: 10px; }
.gnb :is(h1, h2, h3, h4) { font-family: var(--gnb-font-display); color: var(--gnb-label); }

/* ---------------------------------------------------------------- Cards */
.gnb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 28px); margin: 0; padding: 6px 0 10px; }
@media (max-width: 1000px) { .gnb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gnb-grid { grid-template-columns: 1fr; } }
.gnb-card { margin: 0; min-width: 0; border-radius: var(--gnb-r); background: #fff; overflow: hidden;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .02), 0 8px 24px -8px rgba(0, 0, 0, .1); transition: transform 445ms var(--gnb-spring), box-shadow .3s; }
@media (hover: hover) and (pointer: fine) { .gnb-card:hover { transform: scale(1.015); box-shadow: 0 4px 8px rgba(0, 0, 0, .03), 0 18px 40px -12px rgba(0, 0, 0, .18); } }
.gnb-card:active { transform: scale(.985); transition: transform 100ms var(--gnt-ease-out); }
.gnb-card-link { display: flex; flex-direction: column; height: 100%; color: var(--gnb-label) !important; text-decoration: none !important; }
.gnb-card-link:focus-visible { outline-offset: -3px; border-radius: var(--gnb-r); }
.gnb-card-media { position: relative; aspect-ratio: 16 / 10; background: #eceae4; overflow: hidden; }
.gnb-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.gnb-card-noimg { position: absolute; inset: 0; display: grid; place-items: center; font: 700 4rem/1 var(--gnb-font-display); color: rgba(0, 0, 0, .12);
	background: linear-gradient(135deg, var(--gnt-bg-alt), #e6e0d6); text-transform: uppercase; font-family: var(--gnt-font-serif); font-weight: 400; color: rgba(60, 45, 20, .18); }
.gnb-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 24px 24px; }
.gnb-card .gnb-card-cat { margin: 0 0 6px; font-size: .8125rem; line-height: 1.3; font-weight: 600; letter-spacing: -.005em; color: var(--gnb-label-2); }
.gnb-card .gnb-card-title { margin: 0; font: 600 1.3125rem/1.22 var(--gnb-font-display); letter-spacing: -.02em; color: var(--gnb-label); text-wrap: pretty; }
.gnb-card .gnb-card-excerpt { margin: 12px 0 0; font-size: 1.0625rem; line-height: 1.47; letter-spacing: -.016em; color: var(--gnb-label-2); }
.gnb-card .gnb-card-meta { margin: auto 0 0; padding-top: 14px; font-size: .875rem; line-height: 1.3; letter-spacing: -.01em; color: var(--gnb-label-3); font-variant-numeric: tabular-nums; }

/* Featured (newest post on the blog page): full row, image beside the text */
.gnb-card--featured { grid-column: 1 / -1; }
@media (min-width: 820px) {
	.gnb-card--featured .gnb-card-link { flex-direction: row; }
	.gnb-card--featured .gnb-card-media { flex: 0 0 60%; aspect-ratio: auto; min-height: 360px; }
	.gnb-card--featured .gnb-card-body { justify-content: center; padding: clamp(28px, 3.5vw, 56px); }
	.gnb-card--featured .gnb-card-meta { margin-top: 18px; }
}
.gnb-card--featured .gnb-card-title { font-size: clamp(1.625rem, 2.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.028em; font-weight: 700; }

/* Heading row above a grid ([gn_blog_posts title=…], "Keep reading.") */
.gnb-block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 0 0 clamp(20px, 2.5vw, 36px); }
.gnb-block-title { flex: 1 1 auto; margin: 0; font: 700 clamp(1.75rem, 3vw, 2.5rem)/1.1 var(--gnb-font-display); letter-spacing: -.028em; color: var(--gnb-label); }
.gnb-block-intro { flex-basis: 100%; order: 3; margin: 0; font-size: 1.1875rem; line-height: 1.4; color: var(--gnb-label-2); }
.gnb-more { display: inline-flex; align-items: center; gap: 4px; color: var(--gnb-link) !important; font-size: 1.0625rem; letter-spacing: -.016em; text-decoration: none !important; white-space: nowrap; }
.gnb-more::after { content: ""; width: .45em; height: .45em; border-right: 1.6px solid currentColor; border-top: 1.6px solid currentColor; transform: rotate(45deg); margin-left: 2px; }
.gnb-more:hover { text-decoration: underline !important; }

/* ---------------------------------------------------------------- Own-frame pages */
body.gn-own-frame { background: var(--gnt-bg); color: var(--gnt-label); }
.gnb { display: block; overflow-x: clip; }

/* Blog index / archives */
.gnb-hero { text-align: center; padding: clamp(56px, 7vw, 112px) 0 clamp(32px, 4vw, 56px); }
.gnb .gnb-eyebrow { margin: 0 0 12px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; color: var(--gnb-label-2); }
.gnb .gnb-eyebrow a { color: inherit; text-decoration: none; }
.gnb .gnb-eyebrow a:hover { color: var(--gnb-label); text-decoration: underline; }
.gnb .gnb-title { margin: 0; font-size: clamp(2.5rem, 5.6vw, 4.5rem); line-height: 1.05; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }
.gnb .gnb-intro { max-width: 40rem; margin: 16px auto 0; font-size: clamp(1.1875rem, 1.7vw, 1.5rem); line-height: 1.35; letter-spacing: -.016em; font-weight: 500; color: var(--gnb-label-2); text-wrap: pretty; }
.gnb-cats { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.gnb-cats a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 980px; background: var(--gnb-soft); color: var(--gnb-label); font-size: .9375rem; letter-spacing: -.01em; text-decoration: none; transition: background-color .2s, color .2s, transform 100ms var(--gnt-ease-out); }
.gnb-cats a:hover { background: var(--gnb-soft-2); color: var(--gnb-label); }
.gnb-cats a:active { transform: scale(.96); }
.gnb-cats a[aria-current] { background: var(--gnb-label); color: #fff; }
@media (max-width: 640px) {
	.gnb-cats { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gnb-gutter)); padding-inline: var(--gnb-gutter); }
	.gnb-cats::-webkit-scrollbar { display: none; }
	.gnb-cats a { flex: none; }
}
.gnb-index .gnb-grid { padding-bottom: clamp(24px, 3vw, 40px); }
.gnb-index .gn-pagination { margin-bottom: clamp(56px, 7vw, 112px); }
.gnb-empty { text-align: center; padding: 40px 0 120px; font-size: 1.1875rem; color: var(--gnb-label-2); }

/* Single post */
.gnb-measure { width: min(100% - 2 * var(--gnb-gutter), 42rem); margin-inline: auto; }
.gnb-wide { width: min(100% - 2 * var(--gnb-gutter), 64rem); margin-inline: auto; }
.gnb-article-head { padding-top: clamp(48px, 6vw, 96px); }
.gnb-article-head .gnb-eyebrow a { color: var(--gnb-link); }
.gnb-article-head .gnb-eyebrow span { margin: 0 4px; color: var(--gnb-label-3); }
.gnb .gnb-article-title { margin: 0; font-size: clamp(2.25rem, 4.8vw, 3.75rem); line-height: 1.07; letter-spacing: -.032em; font-weight: 700; text-wrap: balance; }
.gnb .gnb-lead { margin: 18px 0 0; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.38; letter-spacing: -.018em; font-weight: 500; color: var(--gnb-label-2); text-wrap: pretty; }
.gnb .gnb-article-meta { margin: 20px 0 0; font-size: .9375rem; letter-spacing: -.01em; color: var(--gnb-label-3); font-variant-numeric: tabular-nums; }
.gnb-article-hero { margin-top: clamp(32px, 4vw, 56px); margin-bottom: 0; }
/* Never crop the featured image (they often carry text/charts): on short windows it scales down
   as a whole, keeping its shape, instead of being cut to fit. */
.gnb-article-hero img { display: block; width: auto; max-width: 100%; height: auto; max-height: max(80vh, 320px); margin-inline: auto; border-radius: var(--gnb-r); }
.gnb-article-hero figcaption { margin-top: 10px; text-align: center; font-size: .875rem; color: var(--gnb-label-3); }

/* Post content */
.gnb-prose { margin-top: clamp(32px, 4vw, 56px); font-size: 1.1875rem; line-height: 1.6; letter-spacing: -.012em; color: var(--gnb-label); overflow-wrap: break-word; }
.gnb-prose > * { margin-top: 0; margin-bottom: 1.1em; }
.gnb-prose > :last-child { margin-bottom: 0; }
.gnb-prose :is(h2, h3, h4) { margin: 1.9em 0 .55em; font-weight: 700; text-wrap: balance; }
.gnb-prose h2 { font-size: 1.75rem; line-height: 1.18; letter-spacing: -.025em; }
.gnb-prose h3 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -.02em; }
.gnb-prose h4 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.016em; }
.gnb-prose a { color: var(--gnb-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.gnb-prose a:hover { text-decoration-thickness: 2px; }
.gnb-prose :is(ul, ol) { padding-left: 1.3em; }
.gnb-prose li { margin: .35em 0; }
.gnb-prose li::marker { color: var(--gnb-label-3); }
.gnb-prose strong { font-weight: 600; }
.gnb-prose blockquote, .gnb-prose .wp-block-quote { margin-inline: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--gnb-tint); font-size: 1.3125rem; line-height: 1.45; letter-spacing: -.018em; color: var(--gnb-label); }
.gnb-prose blockquote p { margin: 0 0 .6em; }
.gnb-prose blockquote cite { display: block; font-size: .9375rem; font-style: normal; color: var(--gnb-label-2); }
.gnb-prose .wp-block-pullquote { border: 0; padding: 1em 0; text-align: center; font-size: 1.5rem; }
.gnb-prose img { max-width: 100%; height: auto; border-radius: 18px; }
.gnb-prose figure { margin-inline: 0; }
.gnb-prose figcaption, .gnb-prose .wp-element-caption { margin-top: 8px; font-size: .875rem; line-height: 1.4; text-align: center; color: var(--gnb-label-3); }
.gnb-prose hr { border: 0; height: 1px; background: var(--gnb-sep); margin: 2.4em 0; }
.gnb-prose :is(code, kbd) { font-size: .88em; padding: .12em .38em; border-radius: 6px; background: var(--gnb-soft); }
.gnb-prose pre { padding: 18px 20px; border-radius: 14px; background: var(--gnb-soft); overflow-x: auto; font-size: .9375rem; }
.gnb-prose pre code { padding: 0; background: none; }
.gnb-prose table { width: 100%; border-collapse: collapse; border: 0; font-size: 1rem; font-variant-numeric: tabular-nums; }
.gnb-prose table :is(th, td), .gnb-prose .wp-block-table :is(th, td) { padding: 12px 12px 12px 0; border: 0; border-bottom: 1px solid var(--gnb-sep); text-align: left; vertical-align: top; }
.gnb-prose .wp-block-table thead { border-bottom: 0; }
.gnb-prose .wp-block-table tfoot { border-top: 0; }
.gnb-prose table thead th { font-size: .875rem; font-weight: 600; color: var(--gnb-label-2); border-bottom-color: var(--gnb-label); }
.gnb-prose th { font-weight: 600; }
.gnb-prose .wp-block-table { overflow-x: auto; }
.gnb-prose .alignwide { width: min(64rem, 100vw - 2 * var(--gnb-gutter)); max-width: none; margin-left: 50%; translate: -50% 0; }
.gnb-prose .alignfull { width: 100vw; max-width: none; margin-left: 50%; translate: -50% 0; }
.gnb-prose .alignfull img { border-radius: 0; }
.gnb-prose .alignleft { float: left; margin: .3em 1.4em 1em 0; max-width: 50%; }
.gnb-prose .alignright { float: right; margin: .3em 0 1em 1.4em; max-width: 50%; }
.gnb-prose .aligncenter { margin-inline: auto; text-align: center; }
.gnb-prose::after { content: ""; display: table; clear: both; }
.gnb-prose .wp-block-embed iframe { max-width: 100%; border-radius: 18px; }
.gnb-prose .wp-block-button__link { border-radius: 980px; background: var(--gnb-tint); color: #fff; padding: .7em 1.4em; text-decoration: none; font-size: 1.0625rem; }
.gnb-pages { margin-top: 2em; font-size: 1rem; }

.gnb-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; margin-bottom: 0; }
.gnb-tags a { padding: 6px 14px; border-radius: 980px; background: var(--gnb-soft); color: var(--gnb-label-2); font-size: .875rem; text-decoration: none; }
.gnb-tags a:hover { background: var(--gnb-soft-2); color: var(--gnb-label); }

/* Author (agent) card */
.gnb-agent { display: flex; align-items: flex-start; gap: 20px; margin-top: clamp(40px, 5vw, 64px); padding: clamp(20px, 2.5vw, 28px); border-radius: var(--gnb-r); background: var(--gnb-soft); }
.gnb-agent-photo { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: top; background: #e3e3e8; }
.gnb-agent-text { min-width: 0; }
.gnb .gnb-agent-name { margin: 0; font-size: 1.1875rem; font-weight: 600; letter-spacing: -.016em; }
.gnb .gnb-agent-role { margin: 2px 0 0; font-size: .9375rem; color: var(--gnb-label-2); }
.gnb .gnb-agent-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.gnb .gnb-btn, .gnb .comment-form .submit { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin: 0; padding: 0 20px; border: 0; border-radius: 980px; cursor: pointer;
	background: var(--gnb-tint); color: #fff !important; font: 400 1rem/1 var(--gnb-font); letter-spacing: -.01em; text-decoration: none !important; box-shadow: none;
	transition: transform 445ms var(--gnb-spring), filter .2s; }
.gnb .gnb-btn:hover { filter: brightness(1.06); }
.gnb .gnb-btn:active { transform: scale(.97); transition: transform 100ms var(--gnt-ease-out); }
.gnb .gnb-btn--quiet { background: #fff; color: var(--gnb-label) !important; box-shadow: inset 0 0 0 1px var(--gnb-sep); }
@media (max-width: 520px) { .gnb-agent { flex-direction: column; } }

/* Comments (only when open or present) */
.gnb-comments { margin-top: clamp(48px, 6vw, 80px); }
.gnb .gnb-section-title { margin: 0 0 20px; font-size: 1.5rem; letter-spacing: -.022em; font-weight: 700; }
.gnb-comment-list, .gnb-comment-list .children { list-style: none; margin: 0; padding: 0; }
.gnb-comment-list .children { padding-left: 28px; }
.gnb-comment-list .comment-body { padding: 18px 0; border-bottom: 1px solid var(--gnb-sep); font-size: 1rem; line-height: 1.5; }
.gnb-comment-list .comment-author { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.gnb-comment-list .comment-author img { border-radius: 50%; }
.gnb-comment-list .comment-meta a, .gnb-comment-list .reply a { font-size: .8125rem; color: var(--gnb-label-3); text-decoration: none; }
.gnb .comment-respond { margin-top: 32px; }
.gnb .comment-reply-title { font-size: 1.375rem; font-weight: 700; letter-spacing: -.022em; margin: 0 0 12px; }
.gnb .comment-form textarea { height: 150px; min-height: 110px; resize: vertical; }
.gnb .comment-form p { margin: 0 0 14px; font-size: .9375rem; color: var(--gnb-label-2); }
.gnb .comment-form label { display: block; margin-bottom: 6px; font-weight: 500; color: var(--gnb-label); }
.gnb .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) { width: 100%; padding: 12px 14px; border: 1px solid var(--gnb-sep); border-radius: 12px; background: #fff; font: 400 1.0625rem/1.4 var(--gnb-font); color: var(--gnb-label); }
.gnb .comment-form :is(input, textarea):focus { outline: none; border-color: var(--gnb-tint); box-shadow: 0 0 0 4px rgba(0, 113, 227, .15); }
.gnb .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; }
.gnb .comment-form-cookies-consent label { display: inline; font-weight: 400; color: var(--gnb-label-2); }

/* More posts under an article */
.gnb-related { margin-top: clamp(64px, 8vw, 128px); padding: clamp(56px, 6vw, 96px) 0 clamp(64px, 7vw, 112px); background: var(--gnb-soft); }

/* The Listings page in the plugin frame: the same wide column and gutters as the home page,
   whether the page holds the bare shortcode (Kadence) or a full-width block group. */
.gnb-page-content { padding-top: clamp(8px, 2vw, 24px); }
.gnb-page-content > .alignfull { width: 100%; }
.gnb-page--listings { padding-bottom: clamp(56px, 6vw, 104px); }
.gnb-page--listings .gnb-page-content { width: min(100% - 2 * var(--gnb-gutter), 82rem); margin-inline: auto; }
@media (min-width: 2000px) { .gnb-page--listings .gnb-page-content { width: min(100% - 2 * var(--gnb-gutter), 92rem); } }
.gnb-page--listings .gnb-page-content > :is(.alignfull, .alignwide) { max-width: none; margin-inline: 0; }
.gnb-page--listings .gnb-page-content .has-global-padding { padding-inline: 0; }
.gnb-page--listings .gnb-page-content .gn-site-section { padding-inline: 0 !important; padding-top: 0 !important; } /* site.css pads it with !important */
.gnb-page--listings .gnb-page-content .is-layout-constrained > * { max-width: none; }
.gnb-page-head { width: min(100% - 2 * var(--gnb-gutter), 52rem); margin: 0 auto; padding: clamp(40px, 6vw, 96px) 0 clamp(24px, 3vw, 44px); text-align: center; }
.gnb .gnb-page-title { margin: 0; font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.05; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }
.gnb-page-intro { margin: clamp(10px, 1.2vw, 18px) auto 0; max-width: 40rem; color: var(--gnb-label-2); font-size: clamp(1.0625rem, 1.5vw, 1.375rem); line-height: 1.38; letter-spacing: -.016em; font-weight: 500; text-wrap: pretty; }
.gnb-page-head + .gnb-page-content { padding-top: 0; }

/* Home page blog section: sits right after the steps (both white) */
.gn-home .gnh-blog { padding-top: 0; }

@media (prefers-reduced-motion: reduce) {
	.gnb-card, .gnb-cats a, .gnb .gnb-btn { transition: box-shadow .2s, background-color .2s; }
	.gnb-card:hover, .gnb-card:active, .gnb .gnb-btn:active { transform: none; }
}

/* 1.34.0 design pass (tokens.css): double-bezel cards, arrow on the primary button */
.gnb-card, .gnb-agent { box-shadow: var(--gnt-bezel), var(--gnt-highlight), var(--gnt-ambient); }
@media (hover: hover) and (pointer: fine) { .gnb-card:hover { box-shadow: var(--gnt-bezel), var(--gnt-highlight), var(--gnt-ambient-lift); } }
.gnb .gnb-btn:not(.gnb-btn--quiet)::after {
	content: ""; flex: none; width: 26px; height: 26px; margin: 0 -13px 0 8px; border-radius: 50%;
	background: rgba(255, 255, 255, .18) var(--gnt-arrow) center / 13px no-repeat;
	transition: transform var(--gnt-spring-dur) var(--gnt-spring), background-color .2s var(--gnt-ease-out);
}
@media (hover: hover) and (pointer: fine) { .gnb .gnb-btn:not(.gnb-btn--quiet):hover::after { transform: translateX(3px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .gnb .gnb-btn:not(.gnb-btn--quiet):hover::after { transform: none; } }

/* Terms of Service / Privacy Policy (templates/legal.php, 1.42.0): long text, a little smaller. */
.gnb-legal .gnb-page-head { padding-bottom: 0; }
.gnb-legal .gnb-legal-text { margin-top: clamp(16px, 2vw, 28px); padding-bottom: clamp(56px, 7vw, 112px); font-size: 1.0625rem; }
.gnb-legal .gnb-legal-text h2 { margin-top: 1.9em; font-size: 1.3rem; }
.gnb-legal .gnb-legal-text > p:first-child { text-align: center; color: var(--gnb-label-3, #86868b); font-size: .9375rem; }