.clean-content { padding: 2rem 0 4rem; }
.clean-content img { max-width: 100%; height: auto; }
.clean-content iframe { max-width: 100%; }
.clean-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.clean-content th, .clean-content td { border: 1px solid #bbb; padding: .45rem .6rem; vertical-align: top; }
.clean-content .gallery { display: flex; flex-wrap: wrap; gap: .75rem; }
.clean-content .gallery-item { margin: 0; }
.clean-content a[data-lightbox] img { cursor: zoom-in; }
.embedded-video { position: relative; max-width: 100%; aspect-ratio: 16 / 9; margin: 1rem 0; }
.embedded-video iframe { width: 100%; height: 100%; border: 0; }
.clean-lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 2rem; background: rgb(0 0 0 / .85); }
.clean-lightbox[hidden] { display: none; }
.clean-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.clean-lightbox button { position: fixed; top: 1rem; right: 1rem; border: 0; border-radius: .25rem; padding: .45rem .7rem; background: white; color: #111; font: inherit; cursor: pointer; }
/* Quark caps .container.grid-lg (used by both the header and the
   content) at 976px, leaving very wide empty margins on laptop/desktop
   screens. Widen it so content uses the available space while keeping
   a readable line length; mobile is unaffected (width:100% still wins
   below this max-width). */
.container.grid-lg {
  max-width: 1200px;
}

.repit-content h1 {
  font-size: clamp(1.8rem, 2.5vw, 2.2rem);
  line-height: 1.2;
}

.repit-content h2 {
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  line-height: 1.25;
}

/* Navigation: rely on Quark's native breakpoint (840px) instead of
   forcing the hamburger at every width. Desktop shows the dropmenu,
   mobile/tablet shows the hamburger + overlay. */
.mobile-menu .button_container {
  padding: 0;
  appearance: none;
  border: 0;
  background: transparent;
}

/* Wordmark: make "REPIT-Psychose" read as the site's logo */
#header .navbar-brand {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #454d5d;
}

#header {
  font-size: .8rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e2e5ea;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

/* Keyboard accessibility for the desktop dropdown menu: Quark's
   Spectre CSS only reveals submenus on :hover, which makes them
   unreachable by keyboard. Mirror that behavior on focus. */
.dropmenu ul li:focus-within > ul {
  display: block;
  visibility: visible;
}

.dropmenu a:focus-visible {
  outline: 2px solid #3085EE;
  outline-offset: 2px;
}

.overlay-menu a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Formation page: profile photo was rendered at native size (876px
   wide), stretching the whole content column. Cap it and keep the
   text as the focus of the page. */
.clean-content img[src*="uploads/admin/photo.jpg"] {
  max-width: 240px;
  height: auto;
  display: block;
  margin: 0 auto 1.5rem;
  border-radius: 4px;
}

@media (max-width: 600px) {
  .clean-content img[src*="uploads/admin/photo.jpg"] {
    max-width: 180px;
  }
}

/* Home page: CPAC-APCC announcement image was rendered at its full
   1024px source size. Cap it to a reasonable inline-illustration size. */
.clean-content img[src*="2025/02/final-1024x804"] {
  max-width: 480px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.repit-footer {
    text-align: center;
    margin: 0;
    padding: 1rem 0;
    font-size: 0.9rem;
    color: #666;
}