/* Built for the WordPress blog by scripts/lib/wp-shell.mjs. Do not edit; edit the sources named below. */
/* The WordPress blog (Astra theme) in the website's design (Arman's v11 since the v11 integration: his blog
   index cards, featured post, pagination and title, on Astra's unchanged markup). Built into each release as shell/blog.css
   (scripts/lib/wp-shell.mjs) and loaded only on blog pages by wordpress/cocoatech-site/blog.php, after
   shell.css (Arman's tokens and header/footer styles).

   Rules:
   - Every selector contains #ct-shell, the element blog.php wraps around Astra's page (a few start with
     WordPress's own body class for the blog index, body.blog, in front of it). Nothing here can
     reach WooCommerce, other pages or the admin; the release script refuses a rule that isn't scoped.
   - The id outranks Astra's class-based rules (including its Customizer CSS), so no !important is needed,
     except to adapt inline colours in posts (end of file).
   - Colours, fonts, radii and shadows are Arman's tokens (var(--text) …), so the light and dark themes
     follow the header's switch. A redesign replaces this file and shell.css; Astra's markup stays.
   Astra 4.8.3 markup (as on cocoatech.io): #page > #content > .ast-container > #primary > main#main;
   index/archives: .ast-row > article.ast-article-post; single: article.ast-article-single,
   nav.post-navigation, #comments. */

/* ---------- page frame ---------- */
#ct-shell > #page { flex: 1 0 auto; display: flex; flex-direction: column; background: none; }
#ct-shell #content { flex: 1 0 auto; position: relative; z-index: 1; background: none; padding: 0; }
#ct-shell #content > .ast-container { display: block; width: min(1200px, 100% - 40px); max-width: none; margin: 0 auto; padding: 72px 0 0; }
#ct-shell #primary { width: auto; margin: 0; padding: 0; border: 0; float: none; }
#ct-shell #primary::before, #ct-shell #primary::after { display: none; }
#ct-shell #secondary { display: none; }
#ct-shell .site-main { margin: 0; }
#ct-shell :is(input, textarea, select, button) { font-family: inherit; }
#ct-shell .entry-content :is(h1, h2, h3, h4, h5, h6), #ct-shell :is(.entry-title, .ast-archive-title, .comments-title, .comment-reply-title) { font-family: 'ct-shell Sora', ui-sans-serif, system-ui, sans-serif; color: var(--text); letter-spacing: -0.02em; text-transform: none; }

/* ---------- blog index top (Arman's v11 blog page; shell/blog-header.html, printed by blog.php above #content on
   the posts page only). His classes do the layout (t11-top, pf8-chips, pf8-chip2, pf8-search); here: his heading's
   type (inline in his file), his search box as a real field, and less space above the post grid after it. ---------- */
#ct-shell .ct-blog-title { margin: 0; padding-bottom: .08em; font-family: 'ct-shell Sora', ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: clamp(42px, 6vw, 80px); line-height: 1.02; letter-spacing: -0.02em; }
#ct-shell form.pf8-search { cursor: text; }
#ct-shell form.pf8-search:focus-within { box-shadow: inset 0 0 0 1px var(--line2), 0 0 0 3px #1E72E0; }
#ct-shell form.pf8-search input[type="search"] { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--text); font: inherit; font-size: 15px; outline: none; -webkit-appearance: none; appearance: none; }
#ct-shell form.pf8-search input[type="search"]::placeholder { color: var(--text3); opacity: 1; }
body.blog #ct-shell #content > .ast-container { padding-top: 36px; }

/* ---------- archive and search headings (Astra's own text) ---------- */
#ct-shell .ast-archive-description { margin: 0 0 40px; padding: 0; background: none; border: 0; text-align: center; }
#ct-shell .ast-archive-description .ast-archive-title { margin: 0; padding-bottom: .08em; font-weight: 800; font-size: clamp(36px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.02em; background: linear-gradient(180deg, var(--head1) 0%, var(--head2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#ct-shell .ast-archive-description p { margin: 14px auto 0; max-width: 640px; font-size: 17px; line-height: 1.55; color: var(--text3); }

/* ---------- index, archives, search: post cards ---------- */
#ct-shell .ast-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; }
#ct-shell .ast-row::before, #ct-shell .ast-row::after { display: none; }
#ct-shell .ast-row > .ast-article-post { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; width: auto; max-width: none; margin: 0; padding: 0; float: none; border: 0; border-radius: 28px; background: var(--card-bg); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 1px 0 var(--card-hi), 0 0 0 1px var(--card-line), 0 30px 60px -38px var(--card-sh); transition: translate .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
#ct-shell .ast-row > .ast-article-post:hover { translate: 0 -4px; box-shadow: inset 0 1px 0 var(--card-hi), 0 0 0 1px var(--line2), 0 30px 60px -38px var(--card-sh); }
#ct-shell .ast-row > .ast-article-post:focus-within { box-shadow: inset 0 1px 0 var(--card-hi), 0 0 0 1px var(--line2), 0 30px 60px -38px var(--card-sh); }
#ct-shell .ast-article-post .ast-article-inner, #ct-shell .ast-article-post .post-content { display: flex; flex-direction: column; flex: 1 0 auto; width: auto; margin: 0; padding: 0; background: none; border: 0; }
#ct-shell .ast-article-post .post-content { gap: 14px; padding: 16px 16px 26px; }
#ct-shell .ast-article-post .post-content > :not(.ast-blog-featured-section) { padding-left: 10px; padding-right: 10px; }
#ct-shell .ast-article-post .ast-blog-featured-section { margin: 0; padding: 0; }
#ct-shell .ast-article-post .ast-blog-featured-section:empty { display: none; }
#ct-shell .ast-article-post .post-thumb-img-content { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 18px; background: #05080f; box-shadow: 0 0 0 1px rgba(130,195,255,0.14), 0 18px 40px -18px rgba(0,0,0,0.6); }
#ct-shell.theme-light .ast-article-post .post-thumb-img-content { box-shadow: 0 0 0 1px rgba(16,24,40,0.08), 0 18px 40px -20px rgba(16,24,40,0.35); }
#ct-shell .ast-article-post .post-thumb-img-content img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
#ct-shell .ast-article-post .entry-title { order: 0; margin: 0; padding: 0; font-weight: 700; font-size: 21px; line-height: 1.28; letter-spacing: -0.009em; }
#ct-shell .ast-article-post .entry-title a { color: var(--text); text-decoration: none; }
#ct-shell .ast-article-post .entry-title a:hover { color: var(--link); }
#ct-shell .ast-article-post .entry-header { margin: 0; padding: 0; }
#ct-shell .ast-article-post .ast-excerpt-container { margin: 0; padding: 0; }
#ct-shell .ast-article-post .ast-excerpt-container p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#ct-shell .ast-article-post .read-more { margin: auto 0 0; padding: 4px 0 0; font-size: 14.5px; font-weight: 600; }
#ct-shell .ast-article-post .read-more a { color: var(--link); text-decoration: none; }
#ct-shell .ast-article-post .read-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
#ct-shell .ast-article-post > .entry-content:empty, #ct-shell .ast-article-post .post-content > .entry-content:empty { display: none; }
#ct-shell .ast-article-post .post-content > .entry-content { margin: 0; }
/* His featured post: the newest post on the blog's first page, across the grid, picture beside the text
   (only when it has a picture; otherwise it stays an ordinary card). */
body.blog:not(.paged) #ct-shell .ast-row > .ast-article-post:first-child:has(.ast-blog-featured-section:not(:empty)) { grid-column: 1 / -1; }
body.blog:not(.paged) #ct-shell .ast-row > .ast-article-post:first-child .post-content:has(> .ast-blog-featured-section:not(:empty)) { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-content: center; column-gap: 8px; row-gap: 16px; padding: 18px; }
body.blog:not(.paged) #ct-shell .ast-row > .ast-article-post:first-child .post-content:has(> .ast-blog-featured-section:not(:empty)) > .ast-blog-featured-section { grid-column: 1; grid-row: 1 / span 6; align-self: center; }
body.blog:not(.paged) #ct-shell .ast-row > .ast-article-post:first-child .post-content:has(> .ast-blog-featured-section:not(:empty)) > :not(.ast-blog-featured-section) { grid-column: 2; padding-left: 30px; padding-right: 30px; }
body.blog:not(.paged) #ct-shell .ast-row > .ast-article-post:first-child:has(.ast-blog-featured-section:not(:empty)) .entry-title { font-weight: 800; font-size: clamp(28px, 3vw, 40px); line-height: 1.12; letter-spacing: -0.016em; }
body.blog:not(.paged) #ct-shell .ast-row > .ast-article-post:first-child:has(.ast-blog-featured-section:not(:empty)) .ast-excerpt-container p { font-size: 17px; line-height: 1.6; -webkit-line-clamp: 5; }
/* The whole card is a link target without changing Astra's markup: the title's link covers the card. */
#ct-shell .ast-row > .ast-article-post .entry-title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
#ct-shell .ast-row > .ast-article-post :is(.entry-meta, .read-more) a { position: relative; z-index: 1; }

/* ---------- header: the Blog link is current on every blog page (aria-current="true" below /blog/) ---------- */
/* His v11 rule marks aria-current="page"; the blog's Blog link has aria-current="true" (blog.php). His !important text
   colour can't be matched without !important here, so only his highlight is applied (the text stays his link colour). */
#ct-shell .n10-links a[aria-current="true"] { background: var(--g-cur); }
/* Astra's rules for every button (a faint shadow, 1em line height, weight 500) also reach the header's
   buttons; these restore what the website shows (measured on the reviewed build). Only properties his
   classes leave unset are touched, so his own values (sizes, colours, the language button's weight) stay. */
#ct-shell .n10 button { box-shadow: none; line-height: inherit; letter-spacing: inherit; }
#ct-shell .n10 .pf7-iconbtn { font-size: inherit; font-weight: inherit; }
/* The reviewed build also has Tailwind's base, which makes icons blocks (see docs/review-site-and-recovery.md,
   open investigation); without it the theme switch's icon sits a pixel lower. */
#ct-shell .n10 svg { display: block; vertical-align: middle; }

/* ---------- meta (cards and posts) ---------- */
#ct-shell .entry-meta { margin: 0; padding: 0; font-size: 13.5px; line-height: 1.5; color: var(--text3); }
#ct-shell .entry-meta a { color: var(--text2); text-decoration: none; font-weight: 500; }
#ct-shell .entry-meta a:hover { color: var(--link); }
#ct-shell .entry-meta * { color: inherit; }
#ct-shell .entry-meta a * { color: inherit; }

/* ---------- pagination ---------- */
#ct-shell .ast-pagination { margin: 48px 0 0; padding: 0; border: 0; }
#ct-shell .ast-pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
#ct-shell .ast-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; min-height: 42px; margin: 0; padding: 0 12px; float: none; border: 0; border-radius: 10px; background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--text2); font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; }
#ct-shell .ast-pagination a.page-numbers:hover { box-shadow: inset 0 0 0 1px var(--link); color: var(--link); }
#ct-shell .ast-pagination .page-numbers.current { color: #ffffff; background: var(--brand); box-shadow: none; }
#ct-shell .ast-pagination .page-numbers.dots { background: none; box-shadow: none; color: var(--text3); }
#ct-shell .ast-pagination :is(.prev, .next) { position: static; }

/* ---------- single post ---------- */
#ct-shell .ast-article-single { width: min(760px, 100%); margin: 0 auto; padding: 0; background: none; border: 0; box-shadow: none; }
#ct-shell .ast-article-single > div { margin: 0; padding: 0; }
#ct-shell .ast-article-single .entry-header { margin: 0 0 36px; padding: 0; text-align: left; }
#ct-shell .ast-article-single .entry-header .post-thumb { margin: 0 0 28px; }
#ct-shell .ast-article-single .entry-header .post-thumb img { display: block; width: 100%; height: auto; border-radius: 14px; }
#ct-shell .ast-article-single .entry-title { margin: 0 0 14px; font-weight: 800; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.12; letter-spacing: -0.025em; background: linear-gradient(180deg, var(--head1) 0%, var(--head2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
#ct-shell .ast-article-single .entry-meta { font-size: 14.5px; }
#ct-shell .ast-article-single .entry-content { margin: 0; color: var(--text2); font-size: 18px; line-height: 1.7; overflow-wrap: break-word; }

/* post content: block-editor output, the live posts' Custom HTML blocks, embeds */
#ct-shell .entry-content > * { margin-top: 0; margin-bottom: 22px; }
#ct-shell .entry-content p { margin: 0 0 22px; }
#ct-shell .entry-content :is(h2, h3, h4, h5, h6) { margin: 44px 0 16px; font-weight: 700; line-height: 1.3; }
#ct-shell .entry-content h1 { margin: 44px 0 18px; font-size: 34px; font-weight: 800; line-height: 1.15; }
#ct-shell .entry-content h2 { font-size: 28px; }
#ct-shell .entry-content h3 { font-size: 22px; }
#ct-shell .entry-content :is(h4, h5, h6) { font-size: 18px; }
#ct-shell .entry-content a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#ct-shell .entry-content a:hover { text-decoration-thickness: 2px; }
#ct-shell .entry-content :is(strong, b) { font-weight: 600; }
#ct-shell .entry-content :is(ul, ol) { margin: 0 0 22px; padding-left: 1.4em; }
#ct-shell .entry-content li { margin: 0 0 8px; }
#ct-shell .entry-content li > :is(ul, ol) { margin: 8px 0 0; }
#ct-shell .entry-content img { max-width: 100%; height: auto; border-radius: 14px; }
#ct-shell .entry-content figure { margin: 32px 0; }
#ct-shell .entry-content :is(figcaption, .wp-element-caption) { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--text3); text-align: center; }
#ct-shell .entry-content blockquote { margin: 32px 0; padding: 18px 24px; border: 0; border-left: 3px solid var(--brand2); border-radius: 0 14px 14px 0; background: var(--surface2); color: var(--text); font-style: normal; }
#ct-shell .entry-content blockquote p:last-child { margin-bottom: 0; }
#ct-shell .entry-content blockquote cite { display: block; margin-top: 10px; font-size: 14px; font-style: normal; color: var(--text3); }
#ct-shell .entry-content :not(pre) > code { padding: 2px 6px; border-radius: 6px; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-family: 'ct-shell JetBrains Mono', ui-monospace, monospace; font-size: 0.86em; }
#ct-shell .entry-content pre { margin: 28px 0; padding: 18px 20px; overflow-x: auto; border: 0; border-radius: 14px; background: var(--solid); box-shadow: inset 0 0 0 1px var(--line2); color: var(--text); font-family: 'ct-shell JetBrains Mono', ui-monospace, monospace; font-size: 14px; line-height: 1.65; white-space: pre; }
#ct-shell .entry-content pre code { padding: 0; background: none; box-shadow: none; font-size: inherit; color: inherit; }
#ct-shell .entry-content .wp-block-table { overflow-x: auto; }
#ct-shell .entry-content table { width: 100%; margin: 0; border-collapse: collapse; border: 0; font-size: 16px; }
#ct-shell .entry-content :is(th, td) { padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); color: var(--text2); text-align: left; }
#ct-shell .entry-content th { color: var(--text); font-weight: 600; background: var(--surface2); }
#ct-shell .entry-content :is(thead, tfoot) { border: 0; border-bottom: 1px solid var(--line2); }
#ct-shell .entry-content hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); background: none; }
#ct-shell .entry-content .wp-block-embed, #ct-shell .entry-content .ast-oembed-container { max-width: 100%; }
#ct-shell .entry-content iframe { max-width: 100%; border: 0; border-radius: 14px; }

/* ---------- next / previous post ---------- */
#ct-shell .post-navigation { width: min(760px, 100%); margin: 56px auto 0; padding: 0; border: 0; background: none; }
#ct-shell .post-navigation .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0; }
#ct-shell .post-navigation :is(.nav-previous, .nav-next) { width: auto; margin: 0; padding: 0; text-align: left; }
#ct-shell .post-navigation .nav-next { grid-column: 2; text-align: right; }
#ct-shell .post-navigation :is(.nav-links, .nav-previous, .nav-next)::before, #ct-shell .post-navigation :is(.nav-links, .nav-previous, .nav-next)::after { display: none; }
#ct-shell .post-navigation :is(.nav-previous, .nav-next) { border: 0; }
#ct-shell .post-navigation a { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: none; height: 100%; margin: 0; padding: 18px 20px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-decoration: none; }
#ct-shell .post-navigation a:hover { box-shadow: inset 0 0 0 1px var(--line2); color: var(--link); }
#ct-shell .post-navigation .ast-post-nav { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); }
#ct-shell .post-navigation .nav-next .ast-post-nav { justify-content: flex-end; }
#ct-shell .post-navigation .ast-post-nav svg { width: 12px; height: 12px; fill: currentColor; }
#ct-shell .post-navigation p { display: block; margin: 0; font-family: 'ct-shell Sora', ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.35; color: inherit; }

/* ---------- comments ---------- */
#ct-shell .comments-area { width: min(760px, 100%); margin: 56px auto 0; padding: 0; border: 0; background: none; }
#ct-shell :is(.comments-title, .comment-reply-title) { margin: 0 0 18px; padding: 0; font-size: 22px; font-weight: 700; line-height: 1.3; }
#ct-shell .comment-reply-title small a { font-family: 'ct-shell Inter', ui-sans-serif, system-ui, sans-serif; font-size: 14px; color: var(--link); }
#ct-shell .ast-comment-list { margin: 0 0 40px; padding: 0; list-style: none; }
#ct-shell .ast-comment-list .children { margin: 12px 0 0 28px; padding: 0; list-style: none; }
#ct-shell .ast-comment-list li { margin: 0 0 12px; padding: 0; border: 0; }
#ct-shell .ast-comment-list .ast-comment { position: static; margin: 0; padding: 18px 20px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
#ct-shell .ast-comment-info { position: static; display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 0; }
#ct-shell .ast-comment-avatar-wrap { position: static; flex: none; float: none; margin: 0; }
#ct-shell .ast-comment-avatar-wrap img { display: block; width: 40px; height: 40px; border-radius: 999px; }
#ct-shell .ast-comment-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: auto; margin: 0; padding: 0; border: 0; text-align: left; color: var(--text3); font-size: 13.5px; }
#ct-shell .ast-comment-meta > div { margin: 0; padding: 0; float: none; text-align: left; }
#ct-shell .ast-comment-edit-reply-wrap { position: static; margin: 4px 0 0; padding: 0; text-align: left; }
#ct-shell .ast-comment-meta cite, #ct-shell .ast-comment-meta b { color: var(--text); font-style: normal; font-size: 15px; }
#ct-shell .ast-comment-meta a { color: var(--text3); text-decoration: none; }
#ct-shell .ast-comment-content { margin: 0; padding: 0; color: var(--text2); font-size: 16px; line-height: 1.6; }
#ct-shell .ast-comment-content p { margin: 0 0 10px; }
#ct-shell .ast-comment-edit-reply-wrap a { color: var(--link); font-size: 14px; font-weight: 600; text-decoration: none; }
#ct-shell .comment-respond { margin: 0; padding: 24px; border: 0; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
#ct-shell .comment-form { margin: 0; }
#ct-shell .comment-form .ast-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; }
#ct-shell .comment-form .ast-row.comment-textarea { grid-template-columns: minmax(0, 1fr); }
#ct-shell .comment-form fieldset { margin: 0; padding: 0; border: 0; }
#ct-shell .comment-form :is(p, .ast-grid-common-col) { width: auto; margin: 0; padding: 0; float: none; }
#ct-shell .comment-form .comment-notes, #ct-shell .comment-form .comment-form-cookies-consent { margin: 0 0 14px; font-size: 14px; color: var(--text3); }
#ct-shell .comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; }
#ct-shell .comment-form label { color: var(--text2); font-size: 14px; }
#ct-shell .comment-form :is(input[type=text], input[type=email], input[type=url], textarea) { display: block; width: 100%; min-height: 46px; margin: 0; padding: 11px 14px; border: 0; border-radius: 12px; background: var(--input); box-shadow: inset 0 0 0 1px var(--line2); color: var(--text); font-size: 15.5px; line-height: 1.5; }
#ct-shell .comment-form textarea { min-height: 150px; resize: vertical; }
#ct-shell .comment-form :is(input, textarea)::placeholder { color: var(--text3); opacity: 1; }
#ct-shell .comment-form :is(input[type=text], input[type=email], input[type=url], textarea):focus { outline: 2px solid var(--brand2); outline-offset: 1px; box-shadow: inset 0 0 0 1px var(--brand2); }
#ct-shell .comment-form input[type=checkbox] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand); }
#ct-shell .comment-form .form-submit { margin: 4px 0 0; }
#ct-shell .comment-form input#submit[type=submit], #ct-shell .comment-form input[type=submit] { display: inline-flex; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #2b8cff 0%, #1E72E0 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 0 1px rgba(0,150,255,0.55), 0 10px 30px -8px var(--glow); color: #ffffff; font-size: 15.5px; font-weight: 600; line-height: 48px; cursor: pointer; }
#ct-shell .comment-form input[type=submit]:is(:hover, :focus) { filter: brightness(1.08); }
#ct-shell .comment-form input[type=submit]:focus-visible { outline: 2px solid var(--brand3); outline-offset: 3px; }

/* ---------- "nothing found" (404 under /post/, empty search) ---------- */
#ct-shell .no-results, #ct-shell .error-404 { width: min(760px, 100%); margin: 0 auto; padding: 0; background: none; text-align: center; }
#ct-shell :is(.no-results, .error-404) :is(.page-title, h1) { margin: 0 0 14px; font-family: 'ct-shell Sora', ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: clamp(30px, 4vw, 44px); line-height: 1.12; color: var(--text); }
#ct-shell :is(.no-results, .error-404) :is(.page-content, .page-sub-title, p) { color: var(--text3); font-size: 17px; }
#ct-shell :is(.no-results, .error-404, .ast-archive-description) .search-form { display: flex; gap: 8px; max-width: 460px; margin: 24px auto 0; }

/* ---------- search form (results and "nothing found") ---------- */
#ct-shell .search-form :is(.search-field, input[type=search]) { flex: 1; width: auto; min-width: 0; min-height: 46px; padding: 11px 14px; border: 0; border-radius: 12px; background: var(--input); box-shadow: inset 0 0 0 1px var(--line2); color: var(--text); font-size: 15.5px; }
#ct-shell .search-form :is(.search-submit, button) { position: static; flex: none; width: auto; max-width: none; min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--line2); color: var(--text); font-weight: 600; cursor: pointer; }
#ct-shell .search-form label { display: contents; }
/* Astra's icon button inside the field duplicates the "Search" button; the visible button stays. */
#ct-shell .search-form button.ast-search-submit { display: none; }

/* ---------- Astra's "scroll to top" button, in the design's colours ---------- */
#ct-shell #ast-scroll-top { border-radius: 999px; background: var(--surface2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  #ct-shell .ast-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.blog:not(.paged) #ct-shell .ast-row > .ast-article-post:first-child .post-content:has(> .ast-blog-featured-section:not(:empty)) { grid-template-columns: minmax(0, 1fr); }
  body.blog:not(.paged) #ct-shell .ast-row > .ast-article-post:first-child .post-content:has(> .ast-blog-featured-section:not(:empty)) > .ast-blog-featured-section { grid-row: auto; }
  body.blog:not(.paged) #ct-shell .ast-row > .ast-article-post:first-child .post-content:has(> .ast-blog-featured-section:not(:empty)) > :not(.ast-blog-featured-section) { grid-column: 1; padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 700px) {
  #ct-shell #content > .ast-container { padding-top: 44px; }
  #ct-shell .ast-row { grid-template-columns: minmax(0, 1fr); }
  #ct-shell .ast-article-single .entry-content { font-size: 17px; }
  #ct-shell .entry-content h2 { font-size: 24px; }
  #ct-shell .post-navigation .nav-links { grid-template-columns: minmax(0, 1fr); }
  #ct-shell .post-navigation .nav-next { grid-column: 1; }
  #ct-shell .comment-form .ast-row { grid-template-columns: minmax(0, 1fr); }
  #ct-shell .comment-respond { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  #ct-shell .ast-row > .ast-article-post { transition: none; }
  #ct-shell .ast-row > .ast-article-post:hover { translate: none; }
}

/* ---------- inline colours in posts, dark theme ----------
   Two posts on cocoatech.io (Path Finder 26.1.10; Full Disk Access, November 2026) are one Custom HTML block
   with inline colours chosen for a white page: text #303840, headings #202A35, muted #525D68, links and
   labels #1E72E0, rules #E6ECF1, boxes #F0F8FF / #F2F5F8 with border #D8EBFF. In the dark theme those
   exact values are mapped to the theme's own, so the posts stay readable without editing them; the light
   theme shows them as written. Inline styles can only be overridden with !important. Other inline colours
   are left as their authors set them. */
#ct-shell.theme-dark .entry-content [style*="color:#303840" i] { color: var(--text2) !important; }
#ct-shell.theme-dark .entry-content [style*="color:#202A35" i] { color: var(--text) !important; }
#ct-shell.theme-dark .entry-content [style*="color:#525D68" i] { color: var(--text3) !important; }
#ct-shell.theme-dark .entry-content [style*="color:#1E72E0" i]:not([style*="background" i]) { color: var(--link) !important; }
#ct-shell.theme-dark .entry-content [style*="border-top:1px solid #E6ECF1" i] { border-top-color: var(--line) !important; }
#ct-shell.theme-dark .entry-content [style*="background:#F0F8FF" i] { background: rgba(0, 150, 255, 0.08) !important; border-color: var(--line2) !important; border-left-color: var(--brand2) !important; }
#ct-shell.theme-dark .entry-content [style*="background:#F2F5F8" i] { background: var(--surface2) !important; color: var(--text) !important; }