/* Blog and text sections (WordPress only: the static site has neither). Loaded by the blocks that need it
   (bestnear/blog-list, bestnear/post-article, bestnear/prose) after site.css, whose tokens it uses. Logical properties
   only: the Arabic pages mirror. */

/* Cards: blog page grid and related posts. The title link is stretched over the whole card. */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg);margin:0;padding:0;list-style:none}
.post-card{position:relative;height:100%;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .2s var(--ease-out)}
.post-card:hover{border-color:var(--blue)}
.post-card:has(.post-card-title a:focus-visible){outline:3px solid var(--focus);outline-offset:4px}
.post-card-media{aspect-ratio:16/9;background:var(--surface-alt)}
.post-card-media img{display:block;width:100%;height:100%;object-fit:cover}
.post-card-body{flex:1;display:flex;flex-direction:column;padding:var(--space-lg)}
.post-card-meta,.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-xs);margin:0;font-size:var(--text-caption);line-height:var(--lh-caption);color:var(--muted)}
.post-card-meta>span:first-child{flex-basis:100%;color:var(--blue);font-weight:700}
.post-card-meta>span:first-child+[aria-hidden]{display:none}
.post-card-title{margin-block:var(--space-xs) 0;font-size:var(--text-h3);line-height:var(--lh-h3);letter-spacing:var(--track-h3);color:var(--ink)}
.post-card-title a{color:inherit;text-decoration:none}
.post-card-title a::after{content:"";position:absolute;inset:0}
.post-card-title a:focus-visible{outline:none}
.post-card-summary{margin-block:var(--space-xs) 0;color:var(--muted)}
.post-card .text-link{margin-block-start:auto;padding-block-start:var(--space-sm)}
.blog-list .post-grid+.pagination{margin-block-start:var(--space-2xl)}
/* One article: a wide card (image beside the text); two articles: two columns. */
.post-grid:has(>li:only-child){grid-template-columns:minmax(0,1fr)}
.post-grid>li:only-child .post-card.has-media{flex-direction:row}
.post-grid>li:only-child .post-card-media{flex:0 0 55%;aspect-ratio:auto;min-block-size:20rem}
.post-grid>li:only-child .post-card-body{justify-content:center;padding:var(--space-2xl)}
.post-grid>li:only-child .post-card .text-link{margin-block-start:0}
.post-grid>li:only-child .post-card-summary{max-inline-size:45ch}
.post-grid:has(>li:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}

/* Pages of articles. */
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-xs) var(--space-lg)}
.pagination ol{display:flex;gap:var(--space-2xs);margin:0;padding:0;list-style:none}
.pagination ol a,.pagination ol span{display:grid;place-items:center;min-inline-size:44px;min-block-size:44px;border-radius:var(--radius);font-weight:700;color:var(--blue)}
.pagination ol a:hover{background:var(--surface-alt)}
.pagination ol [aria-current]{background:var(--navy);color:var(--white)}

/* No article yet. */
.blog-empty{max-inline-size:44rem;padding:var(--space-xl);background:var(--surface-alt);border-radius:var(--radius)}
.blog-empty p{margin:0;color:var(--ink)}

/* Article head (on top of .page-head). */
.post-head h1{max-inline-size:24ch}
.post-head .eyebrow{margin-block-end:var(--space-xs);text-transform:uppercase}
:root[lang=ar] .post-head .eyebrow{text-transform:none}
.post-head .page-lead{max-inline-size:60ch;margin-block-start:var(--space-md);color:var(--ink)}
.post-head .post-meta{margin-block-start:var(--space-md)}

/* Article body: cover, table of contents, prose. */
.post-layout{display:grid;grid-template-columns:minmax(0,44rem);row-gap:var(--space-xl)}
.post-layout.has-toc{grid-template-columns:minmax(0,16rem) minmax(0,44rem);grid-template-areas:"toc cover" "toc body";column-gap:var(--gap-split)}
.post-layout.has-toc .post-cover{grid-area:cover}
.post-layout.has-toc .post-toc{grid-area:toc;grid-row:1/span 2;align-self:start;position:sticky;inset-block-start:var(--space-lg);max-block-size:calc(100vh - 2 * var(--space-lg));overflow-y:auto;overscroll-behavior:contain}
.post-layout.has-toc .post-content{grid-area:body}
.post-cover{margin:0}
.post-cover img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.post-toc{padding-block:var(--space-md);padding-inline:var(--space-lg);border:1px solid var(--line);border-radius:var(--radius)}
.post-toc h2{font-size:var(--text-caption);font-weight:800;line-height:var(--lh-caps);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--blue)}
:root[lang=ar] .post-toc h2{font-weight:700;letter-spacing:0;text-transform:none}
.post-toc ol{display:grid;gap:0;margin:0;margin-block-start:var(--space-xs);padding-inline-start:1.25em}
.post-toc li::marker{color:var(--muted);font-variant-numeric:tabular-nums}
.post-toc a{display:inline-flex;align-items:center;min-block-size:44px;padding-block:var(--space-2xs);font-size:var(--text-ui);line-height:var(--lh-ui);color:var(--ink)}
.post-toc a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.post-content{color:var(--ink)}
.post-content>*+*{margin-block-start:var(--space-md)}
.post-content h2{margin-block-start:var(--space-2xl);font-size:var(--text-h3);line-height:var(--lh-h3);letter-spacing:var(--track-h3);scroll-margin-block-start:var(--space-lg)}
.post-content h3{margin-block-start:var(--space-xl);font-size:var(--text-lead);line-height:var(--lh-lead);letter-spacing:0}
.post-content h2+*,.post-content h3+*{margin-block-start:var(--space-sm)}
.post-content>:first-child{margin-block-start:0}
.post-content p,.post-content li{max-inline-size:65ch;color:var(--ink)}
.post-content ul,.post-content ol{display:grid;gap:var(--space-xs);padding-inline-start:1.25em}
.post-content li::marker{color:var(--blue)}
.post-content a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.post-content img{max-inline-size:100%;height:auto;border-radius:var(--radius)}
.post-content figure{margin-inline:0}
.post-content figcaption{margin-block-start:var(--space-xs);font-size:var(--text-caption);color:var(--muted)}
.post-content blockquote{margin-inline:0;padding:var(--space-md) var(--space-lg);border:0;border-radius:var(--radius);background:var(--surface-alt)}
.post-content blockquote p{font-size:var(--text-lead);line-height:var(--lh-lead);font-weight:700;color:var(--navy)}
.post-content blockquote cite{display:block;margin-block-start:var(--space-xs);font-size:var(--text-caption);font-style:normal;color:var(--muted)}
/* Tables (core table block): 1px lines only (WordPress' dark frame removed), header row on ice. On phones the table
   scrolls inside its frame, first column held in place. */
.post-content table{width:100%;border-collapse:collapse;font-size:var(--text-ui)}
.post-content .wp-block-table thead{border:0}
.post-content .wp-block-table table{border-block-start:1px solid var(--line)}
.post-content th,.post-content td{border:0;border-block-end:1px solid var(--line);padding:var(--space-sm) var(--space-md);text-align:start;vertical-align:top}
.post-content thead th{background:var(--surface-alt);color:var(--navy);font-weight:700}
.post-content .wp-block-table{overflow-x:auto}
.post-content .wp-block-table:focus-visible{outline:3px solid var(--focus);outline-offset:5px}

/* Layout of the text as written (bestnear_blog_enhance(), owner request 1 Nov 2026: more human, no word changed).
   Byline: the team's faces before "By the BestNear team". Opening paragraph as a lead. */
.post-meta .post-team{inline-size:62px;block-size:20px;margin-inline-end:var(--space-xs);object-fit:contain;object-position:left center}
:root[dir=rtl] .post-meta .post-team{object-position:right center}
.post-content>p:first-child{font-size:var(--text-lead);line-height:var(--lh-lead);color:var(--navy)}
/* Images set into the text: a real job photo ("The BestNear team, on site") or an illustration with its parts named
   under it; full column width, 16:9. */
.post-content .post-figure{margin-block:var(--space-xl)}
.post-figure img{display:block;inline-size:100%;block-size:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);background:var(--surface-alt)}
.post-figure.is-art img{border:1px solid var(--line)}
.post-content .post-figure-key{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin:0;margin-block-start:var(--space-sm);padding:0;list-style:none}
.post-content .post-figure-key li{display:inline-flex;align-items:center;gap:var(--space-xs);padding-block:4px;padding-inline:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:var(--text-caption);line-height:var(--lh-caption);font-weight:700;color:var(--navy);max-inline-size:none}
.post-content .post-figure-key li::before{content:"";inline-size:10px;block-size:10px;border:2px solid var(--cyan);border-radius:50%;flex:none} /* the drawing's ring markers */
.post-figure figcaption{text-transform:uppercase;letter-spacing:var(--track-caps);font-weight:700}
:root[lang=ar] .post-figure figcaption{text-transform:none;letter-spacing:0}
/* Tables of the text: a rounded frame, header row on ice, light row lines; scrolls sideways on phones. */
.post-content .post-table{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);overscroll-behavior-inline:contain}
.post-content .post-table:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.post-table table{margin:0}
.post-table tr:first-child th{background:var(--surface-alt);color:var(--navy);font-weight:700;white-space:nowrap}
.post-table tr:last-child td{border-block-end:0}
.post-table td:first-child{font-weight:700;color:var(--navy)}
.post-table tr:nth-child(odd) td{background:color-mix(in oklab,var(--surface-alt) 45%,var(--surface))}
/* FAQ section as an accordion (same look as the pages' FAQ block). */
.post-faq{border-block-start:1px solid var(--line)}
.post-faq details{border-block-end:1px solid var(--line)}
.post-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);cursor:pointer;padding-block:var(--space-md);min-block-size:44px}
.post-faq summary::-webkit-details-marker{display:none}
.post-faq summary h3{margin:0;font-size:var(--text-lead);line-height:1.4;font-weight:700;color:var(--ink)}
.post-faq summary:hover h3{color:var(--blue)}
.post-faq summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--radius-sm)}
.post-faq .faq-plus{position:relative;inline-size:14px;block-size:14px;flex-shrink:0;color:var(--blue)}
.post-faq .faq-plus::before,.post-faq .faq-plus::after{content:"";position:absolute;background:currentColor;inline-size:12px;block-size:1.5px;inset-block-start:6px;inset-inline-start:1px}
.post-faq .faq-plus::after{transform:rotate(90deg)}
.post-faq [open] .faq-plus::after{transform:rotate(0)}
.post-faq-answer{padding-block-end:var(--space-lg);padding-inline-end:var(--space-xl)}
.post-faq-answer>*+*{margin-block-start:var(--space-sm)}
/* Closing "short answer" section in a box. */
.post-content .post-summary{margin-block-start:var(--space-2xl);padding:var(--space-xl);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-alt)}
.post-summary h2{margin-block-start:0}
.post-summary>*+*{margin-block-start:var(--space-sm)}
/* Reading progress: a thin cyan line under the top of the screen, driven by the page scroll where the browser can. */
.post-progress{display:none}
@supports (animation-timeline:scroll()){
 .post-progress{display:block;position:fixed;inset-block-start:0;inset-inline:0;z-index:60;block-size:3px;background:var(--cyan);transform-origin:0 50%;transform:scaleX(0);animation:post-progress linear both;animation-timeline:scroll(root)}
 :root[dir=rtl] .post-progress{transform-origin:100% 50%}
 @keyframes post-progress{to{transform:scaleX(1)}}
}
@media(prefers-reduced-motion:reduce){.post-progress{display:none}}
/* Related posts. */
.post-related{background:var(--surface-alt)}
.post-related-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-sm) var(--space-lg);margin-block-end:var(--stack-heading)}
.post-related-head h2{margin:0}

@media(max-width:1000px){
 .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .post-layout.has-toc{grid-template-columns:minmax(0,44rem);grid-template-areas:"cover" "toc" "body"}
 .post-layout.has-toc .post-toc{grid-row:auto;position:static;max-block-size:none}
}
@media(max-width:800px){
 .post-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}
 .post-card-body{padding:20px}
 .blog-empty{padding:var(--space-lg)}
 .post-grid>li:only-child .post-card.has-media{flex-direction:column}
 .post-grid>li:only-child .post-card-media{flex:none;aspect-ratio:16/9;min-block-size:0}
 .post-grid>li:only-child .post-card-body{padding:20px}
 .post-grid:has(>li:nth-child(2):last-child){grid-template-columns:minmax(0,1fr)}
 .post-content .wp-block-table{overscroll-behavior-inline:contain}
 .post-table table{min-inline-size:36rem}
 .post-content .post-summary{padding:var(--space-lg)}
 .post-faq-answer{padding-inline-end:0}
 .post-content .wp-block-table table{table-layout:auto;min-inline-size:38rem;border-collapse:separate;border-spacing:0}
 .post-content .wp-block-table :is(th,td){word-break:normal;overflow-wrap:normal}
 .post-content .wp-block-table :is(th,td):first-child{position:sticky;inset-inline-start:0;z-index:1;min-inline-size:8rem;border-inline-end:1px solid var(--line)}
 .post-content .wp-block-table td:first-child{background:var(--surface)}
 .post-head .breadcrumb ol{flex-wrap:nowrap}
 .post-head .breadcrumb li:last-child{flex:1 1 0;min-inline-size:0}
 .post-head .breadcrumb li:last-child [aria-current]{display:block;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
 .post-card{transition:none}
}
@media(forced-colors:active){
 .post-card:has(.post-card-title a:focus-visible){outline-color:Highlight}
}

/* Text section (bestnear/prose): one 44rem column, the page's H2 / H3 scale (the FAQ heading on the same page uses it). */
.prose-section:not(.is-compact) .post-content{max-inline-size:44rem}
.prose-section .post-content h2{font-size:var(--text-h2);line-height:var(--lh-heading);letter-spacing:var(--track-h2);text-wrap:balance;margin-block-start:var(--space-3xl)}
.prose-section .post-content h3{font-size:var(--text-h3);line-height:var(--lh-h3);letter-spacing:var(--track-h3);margin-block-start:var(--space-2xl)}
.prose-section .post-content :is(h2,h3)+*{margin-block-start:var(--stack-text)}
.prose-section .post-content>h2:first-child{margin-block-start:0}
/* A short one (a single link line, under the Services grid or the Contact tiles) sits with the section above it, as a
   44px action link. */
.prose-section.is-compact{padding-block:var(--space-lg)}
.prose-section.is-compact .post-content p{max-inline-size:none}
.services:has(+ .prose-section.is-compact){padding-block-end:0}
.services + .prose-section.is-compact{padding-block:var(--space-lg) var(--section-y)}
.contact-start:has(+ .prose-section.is-compact){padding-block-end:0}
.contact-start + .prose-section.is-compact{background:var(--surface-alt);padding-block:var(--space-lg) var(--section-y)}
.prose-section.is-compact .post-content a{display:inline-flex;align-items:center;min-block-size:44px;font-size:var(--text-ui);font-weight:800;line-height:var(--lh-ui);text-decoration:none}
:root[lang=ar] .prose-section.is-compact .post-content a{font-weight:700}
.prose-section.is-compact .post-content a:hover{text-decoration:underline;text-underline-offset:5px}