/* WordPress-specific additions on top of the generated site.css. Hand-edited. */

/* nav links are real <a href> now */
nav a{display:inline-block;}
.logo{display:inline-block;line-height:0;}
.news-card h4 a:hover{color:var(--accent-primary);}
a.news-image{display:block;}

/* contacts e-mail (was inline style in the prototype) */
.contact-email{font-size:28px;font-weight:700;color:var(--text-primary);border-bottom:2px solid var(--accent-primary);word-break:break-word;}
@media (max-width:560px){.contact-email{font-size:21px;}}

/* article / page body written in the WordPress editor */
.entry{max-width:720px;}
.entry > * + *{margin-top:16px;}
.entry h2{font-size:26px;margin-top:40px;}
.entry h3{font-size:21px;margin-top:32px;}
.entry ul,.entry ol{padding-left:1.4em;}
.entry li + li{margin-top:6px;}
.entry a{color:var(--accent-primary);border-bottom:1px solid currentColor;}
.entry img,.entry figure{max-width:100%;height:auto;}
.entry figure{margin:28px 0;}
.entry figcaption{font-size:13px;color:var(--text-muted);}
.entry blockquote{border-left:3px solid var(--accent-primary);padding-left:18px;font-size:18px;}
.wp-block-gallery{gap:12px;}

/* pagination on the news list */
.pagination{margin-top:40px;}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;}
.pagination .page-numbers{display:inline-block;padding:8px 14px;border:1.5px solid var(--text-primary);font-size:13px;font-weight:600;}
.pagination .page-numbers.current,.pagination a.page-numbers:hover{background:var(--text-primary);color:var(--bg-canvas);}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);}

/* keep the sticky header below the admin bar for logged-in editors */
.admin-bar header{top:32px;}
.admin-bar .home-hero,.admin-bar .sk-plate{top:calc(var(--hdr) + 32px);}
@media (max-width:782px){
  .admin-bar header{top:46px;}
  .admin-bar .home-hero,.admin-bar .sk-plate{top:calc(var(--hdr) + 46px);}
}
@media (max-width:600px){ .admin-bar header{top:0;} }

/* prototype bug: .nav-inner{padding:18px 0} cancels .wrap's side gutter, so below 1248px
   the logo and the menu button touch the screen edges. Restore the gutter. */
.nav-inner{padding-left:24px;padding-right:24px;}

/* v0.2: photos are real <img>/<picture> (responsive srcset, lazy) instead of CSS backgrounds */
.news-image,.project-photo{position:relative;overflow:hidden;}
.news-image img,.project-photo img,.project-photo picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.news-cover{aspect-ratio:16/9;margin-bottom:32px;background:var(--bg-surface);}

/* hero line art: keep the box invisible until the script has sized it (otherwise it jumps = layout shift) */
.js .hero-sketch:not(.live):not(.done){visibility:hidden;}

/* prototype bug: cards on the navy news band inherit the band's cream text colour, so titles vanish on the cream card */
.band-inverse .news-card{color:var(--text-primary);}
.band-inverse .news-card h4 a:hover{color:var(--accent-primary);}

/* v0.4: optional photos editors pick in «Тексти сторінки» */
.direction-photo{position:relative;overflow:hidden;aspect-ratio:16/10;margin:-36px -36px 24px;background:var(--bg-canvas);}
.direction-card:has(.direction-photo){justify-content:flex-start;}
.direction-card:has(.direction-photo) .news-link{margin-top:auto;padding-top:16px;}
.page-photo{position:relative;overflow:hidden;aspect-ratio:21/9;margin-top:40px;background:var(--bg-surface);}
.direction-photo img,.page-photo img,.page-photo picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:560px){.page-photo{aspect-ratio:4/3;margin-top:28px;}}

/* v0.4: newsletter form saves to WordPress */
.nl-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;}
.nl-side{position:relative;z-index:2;}
.nl-consent{margin-top:12px;font-size:12px;line-height:1.5;color:var(--text-inverse);opacity:.8;width:0;min-width:100%;} /* as wide as the form, never wider */

/* v0.5: line drawings beside text (Про фонд, Контакти) */
.art-split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:center;}
.art-split-rev{grid-template-columns:minmax(0,1fr) 260px;align-items:end;}
.line-art{display:block;width:100%;height:auto;}
.line-art-envelope{max-width:280px;justify-self:center;}
/* a mask, not clip-path: a fully clipped image never counts as visible, so lazy-load and the observer would never fire */
.js .line-art{-webkit-mask-image:linear-gradient(90deg,#000 0 45%,transparent 55% 100%);mask-image:linear-gradient(90deg,#000 0 45%,transparent 55% 100%);
  -webkit-mask-size:220% 100%;mask-size:220% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;mask-position:100% 0;transition:-webkit-mask-position 2s cubic-bezier(.45,.05,.3,1),mask-position 2s cubic-bezier(.45,.05,.3,1);}
.js .line-art.drawn{-webkit-mask-position:0 0;mask-position:0 0;}
@media (max-width:860px){
  .art-split,.art-split-rev{grid-template-columns:1fr;gap:28px;}
  /* small on phones: a big drawing above the text would become the LCP element and slow the page's score */
  .art-split .line-art{order:-1;width:150px;justify-self:start;}
  .art-split-rev .line-art{order:0;width:150px;}
}
@media (prefers-reduced-motion:reduce){.js .line-art{-webkit-mask-image:none;mask-image:none;transition:none;}}
/* the long contact e-mail must fit one line on 360–420px phones instead of breaking mid-word */
@media (max-width:420px){.contact-email{font-size:18px;}}