/* WordPress specific: the blog, single posts, archives, and the bits the mockup never had. */

/* The header is fixed, so WordPress's admin bar must not sit on top of it. */
body.admin-bar .site-header{top:32px}
@media (max-width:782px){body.admin-bar .site-header{top:46px}}
body.admin-bar{--header-offset:32px}

/* Overscroll stays dark the way the one pager does, while pages themselves sit on paper. */
html{background:var(--ink)}
body{background:var(--paper)}

/* WordPress gives every block in a flow layout a 24px block gap above it. Every Tawazi section is
   full bleed and carries its own padding, so that gap does nothing but show a pale stripe of the
   body colour between two sections. It appeared in two places: between the header, the page and
   the footer, which are siblings at the root of a block theme, and between each pair of sections
   inside the page.

   Matched on the block class rather than on "every child of this container", because the latter
   would also flatten the spacing between ordinary paragraphs on a text page like the privacy
   policy. Any Tawazi section added later is covered without anyone having to remember this. */
.wp-site-blocks > *,
[class*="wp-block-tawazi-"]{margin-block-start:0}

/* A page or post that is not the one pager needs room under the fixed header. */
.page-shell{padding-top:calc(var(--header-h) + clamp(32px,5vw,64px));padding-bottom:clamp(72px,10vw,136px);background:var(--paper)}

/* Blog index */
.blog-head{margin-bottom:clamp(36px,5vw,64px)}
.blog-head .h1{font-size:clamp(36px,5vw,64px)}
.blog-head .lead{margin-top:16px;max-width:560px}

.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:980px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.post-grid{grid-template-columns:1fr}}

.post-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;transition:translate .3s var(--ease),box-shadow .3s var(--ease)}
.post-card:hover{translate:0 -4px;box-shadow:var(--shadow)}
.post-card__media{position:relative;aspect-ratio:3/2;background:var(--paper)}
.post-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post-card__body{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.2vw,28px);flex:1}
.post-card__title{font-family:var(--f-display);font-size:clamp(18px,1.5vw,21px);line-height:1.3;letter-spacing:-.015em;font-weight:600;margin:0}
.post-card__excerpt{margin:0;color:var(--text-2);font-size:15.5px}
.post-card__body .link-arrow{margin-top:auto}

/* A single post */
.post-hero{padding-top:calc(var(--header-h) + clamp(40px,6vw,88px));padding-bottom:clamp(32px,4vw,56px);background:var(--ink);color:var(--on-dark)}
.post-hero .meta{color:var(--on-dark-2)}
.post-hero .h1{margin-top:18px;font-size:clamp(34px,4.6vw,62px)}
.post-hero__lead{margin-top:18px;max-width:640px;color:var(--on-dark-2);font-size:clamp(16.5px,1.3vw,19px);line-height:1.65}
.post-figure{margin:0;background:var(--ink)}
.post-figure img{width:100%;max-height:min(62vh,640px);object-fit:cover}

.post-body{max-width:760px;margin-inline:auto;padding-block:clamp(44px,6vw,80px)}
.post-body > *{margin-block:0 24px}
.post-body > *:last-child{margin-bottom:0}
.post-body h2{font-family:var(--f-display);font-size:clamp(24px,2.6vw,34px);line-height:1.2;letter-spacing:-.025em;margin-top:clamp(36px,4vw,56px)}
.post-body h3{font-family:var(--f-display);font-size:clamp(19px,1.7vw,23px);line-height:1.3;margin-top:clamp(28px,3vw,40px)}
.post-body p,.post-body li{font-size:17px;line-height:1.7;color:var(--text)}
.post-body a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.post-body a:hover{color:var(--steel)}
.post-body img,.post-body figure{border-radius:var(--r)}
.post-body blockquote{margin:0;padding-inline-start:24px;border-inline-start:2px solid var(--steel);font-family:var(--f-display);font-size:clamp(19px,1.8vw,24px);line-height:1.4}
.post-body ul,.post-body ol{padding-inline-start:22px}
.post-body li+li{margin-top:8px}

/* Pagination */
.pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:clamp(40px,5vw,64px)}
.pagination .page-numbers{display:grid;place-items:center;min-width:44px;height:44px;padding-inline:14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:15px}
.pagination .page-numbers:hover{border-color:var(--steel)}
.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}

/* States WordPress can reach that the mockup never had */
.state{max-width:620px;margin-inline:auto;text-align:center}
.state .h2{margin-bottom:16px}
.state .lead{margin:0 auto 28px}

/* WordPress core block alignment inside a Tawazi container */
.post-body .alignwide{width:min(1000px,92vw);margin-inline:calc(50% - min(500px,46vw))}
.post-body .alignfull{width:100vw;margin-inline:calc(50% - 50vw)}
.post-body .alignfull img{border-radius:0}

/* Screen reader text, since a block theme does not load the classic stylesheet */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The brand explorer now ships every panel in the page and hides all but one, so make the
   hidden attribute explicit rather than relying on the browser default surviving a reset. */
.panel__inner[hidden]{display:none}

/* The spam trap. Hidden from people without display:none, which some bots check for. */
.tawazi-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* The form posts for real now, so the success panel is shown by a class the server sets. */
.form.is-sent .form__content{display:none}