/* Theme-owned styles that base.css + components.css (the Vite build) lack.
   Prefix: qcentic-. No WordPress core UI class names. */

/* Image frames for Pencilino images: the declared aspect ratio and fit are
   inline on the <img>; the frame keeps replaced files from changing layout. */
.qcentic-frame {
  display: block;
  overflow: hidden;
}

.qcentic-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Edit mode: an empty image slot stays visible and clickable. */
.qcentic-image-empty {
  display: block;
  min-width: 48px;
  min-height: 24px;
  outline: 1px dashed currentColor;
  outline-offset: -1px;
  background: rgba(255, 255, 255, 0.06);
}

.qcentic-film-region {
  position: absolute;
  inset: 0;
}

/* The brief intro is a Pencilino rich text block (div > p). */
.brief-section__intro p {
  margin: 0;
}

.brief-section__intro p + p {
  margin-top: var(--space-2);
}

a.lang-switch__btn {
  display: inline-block;
  text-decoration: none;
}

/* Legal pages, blog list and single posts reuse .legal-page typography. */
.qcentic-prose {
  max-width: 720px;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--color-dim);
}

.qcentic-prose h2 {
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--color-ink);
  margin: var(--space-4) 0 var(--space-2);
}

.qcentic-prose h3 {
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--color-ink);
  margin: var(--space-3) 0 var(--space-1);
}

.qcentic-prose p + p,
.qcentic-prose ul,
.qcentic-prose ol {
  margin-top: var(--space-2);
}

.qcentic-prose ul,
.qcentic-prose ol {
  padding-left: 1.25em;
}

.qcentic-prose a {
  color: var(--color-ink);
  text-decoration: underline;
}

.qcentic-prose img {
  max-width: 100%;
  height: auto;
}

.qcentic-blog-list {
  display: grid;
  gap: var(--space-4);
  max-width: 720px;
}

.qcentic-blog-card {
  display: grid;
  gap: var(--space-2);
}

.qcentic-blog-card__media {
  aspect-ratio: 16 / 9;
  background: var(--color-line);
}

.qcentic-blog-card__title {
  font-size: var(--step-2);
  font-weight: 700;
}

.qcentic-blog-card__excerpt {
  margin-top: var(--space-1);
  color: var(--color-dim);
  line-height: 1.6;
}

.qcentic-blog-card__more {
  display: inline-block;
  margin-top: var(--space-1);
  font-weight: 500;
  color: var(--color-accent);
}

.qcentic-single {
  max-width: 720px;
}

.qcentic-single__back {
  margin-bottom: var(--space-3);
  color: var(--color-dim);
}

.qcentic-single__meta {
  margin: calc(-1 * var(--space-3)) 0 var(--space-3);
  color: var(--color-dim);
}

.qcentic-single__media {
  aspect-ratio: 16 / 9;
  margin-bottom: var(--space-3);
}

/* Pencilino edit mode: no preloader gate, no custom cursor. */
body.qcentic-can-edit .preloader,
body.qcentic-can-edit .cursor,
body.qcentic-can-edit .cursor-dot {
  display: none;
}

body.qcentic-can-edit,
body.qcentic-can-edit.has-cursor,
body.qcentic-can-edit.has-cursor a,
body.qcentic-can-edit.has-cursor button {
  cursor: auto;
}

/* WordPress adds width/height attributes to attachment images; without an
   explicit height the footer lockup would take its attribute height (1079px). */
.site-footer__logo img {
  height: auto;
}

/* Long code lines and wide tables in post content scroll inside their block
   instead of stretching the page (390px viewports otherwise scroll sideways). */
.qcentic-prose {
  overflow-wrap: anywhere;
}

.qcentic-prose pre {
  max-width: 100%;
  overflow-x: auto;
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.875em;
}

.qcentic-prose pre code {
  white-space: pre;
  overflow-wrap: normal;
}

.qcentic-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.qcentic-prose th,
.qcentic-prose td {
  padding: 0.35em 0.75em;
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
}

/* Text colour scope. base.css sets the light --color-ink on body, which UI
   injected into body (Pencilino popups, the Media Library modal) would inherit
   on a white surface. Reset body to a neutral dark and hand the light ink only
   to the theme's own containers. */
body.qcentic-site {
  color: #1d2327;
}

:where(.preloader, #app, .site-nav, .site-footer, .fixed-cta, .legal-header, .legal-page) {
  /* :where() keeps specificity at zero so component colours (btn--solid etc.) still win. */
  color: var(--color-ink);
}

/* WordPress makes #wpadminbar position:absolute at 600px and below, so it scrolls away.
   The film zone offsets its pin by the bar height (src/theme/main.ts adminBarHeight), so keep
   the bar fixed for editors to match that offset. */
@media (max-width: 600px) {
  body.qcentic-can-edit #wpadminbar {
    position: fixed;
  }
}