/*! Circle AI — WordPress integration layer
 * Loaded last (after custom.css). Only WordPress-specific needs live here: the logged-in
 * admin bar offsets and core utility classes. Design rules stay in style.css. */

/* ------------------------------------------------------------------ admin bar (logged-in only)
 * WordPress sets --wp-admin--admin-bar--height (32px, 46px under 783px) and shifts <html>.
 * The fixed header, menu, reading progress and sticky panels move below the bar instead of
 * being hidden under it. Under 601px the bar scrolls away, so fixed elements keep top: 0. */
body.admin-bar { --wp-admin-offset: var(--wp-admin--admin-bar--height, 32px); }

@media screen and (min-width: 601px) {
  body.admin-bar .site-header { top: var(--wp-admin-offset); }
  body.admin-bar .site-header__menu.offcanvas {
    top: var(--wp-admin-offset);
    height: calc(100dvh - var(--wp-admin-offset));
  }
  body.admin-bar .article__progress { top: var(--wp-admin-offset); }
  body.admin-bar .svc-index__preview-col { top: max(calc(var(--nav-h) + 32px + var(--wp-admin-offset)), 17svh); }
}
@media screen and (min-width: 1024px) {
  body.admin-bar .article__aside { top: calc(var(--nav-h) + 56px + var(--wp-admin-offset)); }
  body.admin-bar .faq__head { top: calc(var(--nav-h) + 48px + var(--wp-admin-offset)); }
}

/* ------------------------------------------------------------------ core utility classes */
.screen-reader-text {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
}
.screen-reader-text:focus {
  clip: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
}

/* ------------------------------------------------------------------ no-JS fallbacks
 * <html> gets the "js" class from an inline head script. Without JavaScript, every FAQ answer
 * is readable (Bootstrap collapse cannot open them) and nothing waits for a reveal animation. */
html:not(.js) .faq__panel.collapse { display: block; }
html:not(.js) .faq__panel-inner p { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ image mode (design extension)
 * Editors may replace a drawn mock-up with an uploaded image; it fills the same wrapper. */
.project-art__image,
.article-art__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Team portrait photo (About) and article image mode. */
.about__portrait-image,
.article-art[data-mode=image] .article-art__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}