body header.container-header > .grid-child {
    padding-left: 1rem;
    padding-right: 1rem;
}

.container-header .grid-child:has(.navbar-brand) {
    justify-content: center;
}

.container-header .navbar-brand {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

@media (max-width: 767.98px) {
    body header.container-header > .grid-child {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

@keyframes content-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .site-grid .container-component {
        animation: content-fade-in
            350ms ease-out both;
    }
}

/* ===== TEATR RAJ — /pl/teatr-raj =============================================
   This block belongs after the site's existing user.css rules.
   Joomla adds itemid-502 to the body for the published Polish theatre menu item.
   For a new menu item, set its Page Display > Page Class to teatr-raj (no dot).

   The supplied artwork is stored in the adjacent images/teatr-raj folder.
   Upload the CSS and both WebP files together, preserving the folder structure.
   Adjust the first three variables to change width, curtain space or text inset.
   ========================================================================== */
body.site:is(.itemid-502, .teatr-raj) {
  --raj-page-limit: 75rem;
  --raj-side-space: clamp(0rem, 15vw - 6rem, 11rem);
  --raj-inset: clamp(1rem, 2vw, 1.875rem);
  --raj-page-width: min(var(--raj-page-limit), calc(100% - var(--raj-side-space) - var(--raj-side-space)));
  --raj-paper: var(--body-bg, #fff);
  --raj-menu: #252525;
  --raj-curtain: url("../images/teatr-raj/curtain.webp");
  --raj-banner: url("../images/teatr-raj/banner.webp");

  background: #e0dedf;
  isolation: isolate;
  font-family: var(--cassiopeia-font-family-body, Arial, Helvetica, sans-serif);
}

/* Pin only the scenery. The original image has a transparent centre.
   On phones the banner and article have the full width of the screen. */
@media screen and (min-width: 40.0625rem) {
  body.site:is(.itemid-502, .teatr-raj)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--raj-curtain) center top / 100% 100% no-repeat;
  }
}

/* One continuous sheet from the top of the banner to the footer. */
body.site:is(.itemid-502, .teatr-raj) > :is(.container-header, .site-grid, .container-footer) {
  box-sizing: border-box;
  width: var(--raj-page-width);
  margin-inline: auto;
}

body.site:is(.itemid-502, .teatr-raj) > .container-header {
  background: var(--raj-paper);
  box-shadow: none;
}

body.site:is(.itemid-502, .teatr-raj) > .site-grid {
  flex: 1 0 auto;
  align-content: start;
  margin-block: 0;
  gap: 0;
  background: var(--raj-paper);
  /* Cassiopeia still places the modules, sidebars and mobile rows.
     The sheet supplies the outer margins, so the two outer tracks can be zero. */
  grid-template-columns:
    [full-start] 0 [main-start] repeat(4, minmax(0, 1fr)) [main-end] 0 [full-end];
}

/* Display the theatre art in the linked brand slot. The site's home link keeps
   its original accessible name. Other menu items retain the shared logo. */
body.site:is(.itemid-502, .teatr-raj) > .container-header > .grid-child {
  min-width: 0;
  max-width: none;
  padding: 0;
}

body.site:is(.itemid-502, .teatr-raj) .container-header .navbar-brand {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  white-space: normal;
}

body.site:is(.itemid-502, .teatr-raj) .container-header .brand-logo,
body.site:is(.itemid-502, .teatr-raj) .container-header:not(:has(.brand-logo))::before {
  display: block;
  position: relative;
  width: 100%;
  /* The last three scan lines of the 1050 × 291 original are pure white.
     Show the 288 rows of artwork so the navigation touches the blue banner. */
  aspect-ratio: 1050 / 288;
  background: #4257ad var(--raj-banner) center top / 100% auto no-repeat;
}

body.site:is(.itemid-502, .teatr-raj) .container-header:not(:has(.brand-logo))::before {
  content: "";
}

body.site:is(.itemid-502, .teatr-raj) .brand-logo > :is(img, span) {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The live menu uses Cassiopeia's collapsible dropdown layout. */
body.site:is(.itemid-502, .teatr-raj) .container-header :is(.container-nav, .container-topbar, .container-below-top, .site-description) {
  background: var(--raj-menu);
  color: #fff;
}

body.site:is(.itemid-502, .teatr-raj) > .container-header > :is(.container-topbar, .container-below-top),
body.site:is(.itemid-502, .teatr-raj) .container-header .site-description,
body.site:is(.itemid-502, .teatr-raj) .container-nav > :is(nav, .mod-menu, .container-search) {
  min-width: 0;
  max-width: 100%;
  margin-block: 0;
  padding: 0.5rem var(--raj-inset);
}

body.site:is(.itemid-502, .teatr-raj) .container-nav > nav.navbar {
  flex: 1 1 auto;
}

body.site:is(.itemid-502, .teatr-raj) .container-nav .mod-menu {
  flex-wrap: wrap;
}

@media (min-width: 992px) {
  body.site:is(.itemid-502, .teatr-raj) .container-nav .mod-menu {
    justify-content: center;
  }
}

/* Also fit the horizontal MaxiMenu CK from the saved page, including its
   fixed-on-scroll mode. The module controls its dropdown and mobile states. */
body.site:is(.itemid-502, .teatr-raj) .container-nav .maximenuckh {
  width: 100%;
  min-width: 0;
}

body.site:is(.itemid-502, .teatr-raj) .maximenuckh.maximenufixed {
  max-width: var(--raj-page-width);
  background: var(--raj-menu);
}

body.site:is(.itemid-502, .teatr-raj) .maximenumobiletogglericonck {
  color: #fff;
  padding-inline: var(--raj-inset);
  cursor: pointer;
}

body.site:is(.itemid-502, .teatr-raj) .container-header :is(a, button, input):focus-visible {
  /* MaxiMenu CK suppresses outlines with a module ID selector. */
  outline: 3px solid #ffc940 !important;
  outline-offset: -3px;
}

/* Apply the gutter once at the outer module positions. Card bodies, article
   columns and form controls retain their normal interior spacing. */
body.site:is(.itemid-502, .teatr-raj) .site-grid > .grid-child {
  min-width: 0;
  padding-inline: var(--raj-inset);
}

body.site:is(.itemid-502, .teatr-raj) .site-grid > :is(.container-component, .container-sidebar-left, .container-sidebar-right) {
  padding-block: var(--raj-inset);
  overflow-wrap: anywhere;
}

@media (min-width: 992px) {
  body.site:is(.itemid-502, .teatr-raj) .site-grid > .container-sidebar-left {
    padding-inline-end: 0;
  }

  body.site:is(.itemid-502, .teatr-raj) .site-grid > .container-sidebar-right {
    padding-inline-start: 0;
  }
}

body.site:is(.itemid-502, .teatr-raj) .site-grid > :is(.container-component, .container-sidebar-left, .container-sidebar-right) > :first-child,
body.site:is(.itemid-502, .teatr-raj) .container-component > #system-message-container,
body.site:is(.itemid-502, .teatr-raj) .container-component > #system-message-container + main {
  margin-block-start: 0;
}

body.site:is(.itemid-502, .teatr-raj) .site-grid > :is(.container-sidebar-left, .container-sidebar-right) > :last-child,
body.site:is(.itemid-502, .teatr-raj) .site-grid > .container-banner {
  margin-block-end: 0;
}

body.site:is(.itemid-502, .teatr-raj) .container-component > .mod-breadcrumbs__wrapper {
  margin-block-end: 0.75rem;
}

/* The live article justifies its paragraphs and list items with inline styles.
   Left-align those particular lines on phones so the word spacing stays even. */
@media screen and (max-width: 40rem) {
  body.site:is(.itemid-502, .teatr-raj) .com-content-article__body :is(p, li):is([style*="text-align: justify" i], [style*="text-align:justify" i]) {
    text-align: start !important;
  }
}

body.site:is(.itemid-502, .teatr-raj) .container-component :is(main, .item-content) {
  min-width: 0;
}

body.site:is(.itemid-502, .teatr-raj) .container-component :where(img, video, iframe) {
  max-width: 100%;
}

/* Keep the archived 560 × 315 videos proportional on a narrow screen. */
body.site:is(.itemid-502, .teatr-raj) .container-component :is(iframe[width="560"][height="315"], iframe[src*="youtube.com/embed/"], iframe[src*="youtube-nocookie.com/embed/"]) {
  height: auto;
  aspect-ratio: 16 / 9;
}

body.site:is(.itemid-502, .teatr-raj) .container-component .pagination {
  flex-wrap: wrap;
  row-gap: 0.25rem;
}

body.site:is(.itemid-502, .teatr-raj) > .container-footer {
  margin-block-start: 0;
  background: #014a6c;
  color: #fff;
}

body.site:is(.itemid-502, .teatr-raj) > .container-footer > .grid-child {
  max-width: none;
  padding: 1.25rem var(--raj-inset);
}

@media print {
  body.site:is(.itemid-502, .teatr-raj) {
    --raj-page-width: 100%;
    --raj-inset: 0;
    background: #fff;
  }
}