/* ==========================================================================
   LIGHTBOX — brand layer for Colorbox
   ==========================================================================
   REQUIRES, in the page layout:
     Layout → JavaScript → tick "jQuery", then the j_colorbox template.
   That is what loads Colorbox and binds it; this file only styles it.

   Contao puts data-lightbox on any image or gallery item with full-size view
   enabled, and groups them per element (data-lightbox="lb172"), so a gallery
   opens as one navigable set. Colorbox is therefore NOT gallery-only — an
   image content element uses it too, which is why this is its own stylesheet
   rather than a third part of gallery.css.

   Colorbox ships a 2013-era sprite theme. Its markup is sounder than it
   looks: the controls are real <button>s carrying real text ("close",
   "next", "previous") visually hidden by text-indent, focus moves into the
   dialog on open, and Esc closes it. So this brands and fixes sizing rather
   than rebuilding.

   MEASURED DEFECT, which is why the controls are redrawn below: close came
   out 38x19 and next 28x65. WCAG 2.5.8 Target Size (Minimum) wants 24x24,
   so both failed on the short axis. Drawing the glyphs in CSS instead of
   using controls.png lets the button be sized freely, inherit currentColor,
   and stay sharp on any display.
   ========================================================================== */


/* --------------------------------------------------------------------------
   SURFACE
   -------------------------------------------------------------------------- */

/* Only the colour is settable here. Colorbox animates the overlay and writes
   opacity as an inline style on open, which beats any stylesheet — measured
   0.9 regardless of what is declared. To change it, set the `opacity` option
   in the j_colorbox init rather than fighting it from CSS. */
#cboxOverlay {
    background: var(--black);
}

#cboxContent,
#cboxLoadedContent {
    background: var(--background);
}

/* Colorbox's theme frames the image with `border: 5px solid #000`. Removed —
   the overlay already separates the image from the page, so the frame only
   adds a hard edge that reads as part of the photograph. */
#cboxLoadedContent {
    border: 0;
}

/* Colorbox positions the chrome absolutely inside #cboxContent, so padding
   here would move the image rather than inset it. The breathing room goes
   on the chrome itself instead. */
#colorbox {
    outline: 0;
}


/* --------------------------------------------------------------------------
   CONTROLS
   --------------------------------------------------------------------------
   Sized to 44px: WCAG 2.5.8 asks 24, but these sit over a photograph and are
   used on touch, where 44 is the accepted comfortable target.

   background-image: none drops controls.png. The accessible text stays put —
   it is hidden by Colorbox's own text-indent, not removed — so screen
   readers still announce "close", "next", "previous".
   -------------------------------------------------------------------------- */

#cboxClose,
#cboxNext,
#cboxPrevious {
    background-image: none;
    background-color: rgb(0 0 0 / 55%);
    width: 44px;
    height: 44px;
    border: 0;

    /* website.css styles the bare `button` element as a pill. Colorbox's own
       reset zeroes padding, margin and background on these controls but not
       the radius, so that one property leaked through and rounded them to
       30px. Squared off explicitly rather than by hoping load order helps. */
    border-radius: 0;
    color: var(--white);
    cursor: pointer;
    transition: background-color .15s ease;
}

#cboxClose:hover,
#cboxNext:hover,
#cboxPrevious:hover {
    background-color: var(--prime);
}

/* The slideshow control is a TEXT button ("start slideshow"), not a glyph, so
   it is kept out of the sizing rule above — 44x44 would crop its label. It
   still needs the radius reset, since the bare `button` rule reaches it too.
   Hidden unless the slideshow option is enabled in the j_colorbox init. */
#cboxSlideshow {
    border-radius: 0;
}

/* Colorbox clears the outline on :active only, but the site's own reset must
   not be allowed to swallow the focus ring on a control this important. */
#cboxClose:focus-visible,
#cboxNext:focus-visible,
#cboxPrevious:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
}

/* The glyphs. Absolutely centred, so Colorbox's text-indent on the button
   cannot drag them off-screen with the label. */
#cboxNext::after,
#cboxPrevious::after,
#cboxClose::before,
#cboxClose::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    text-indent: 0;
}

#cboxNext::after {
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

#cboxPrevious::after {
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

/* Two strokes crossed, rather than a glyph, so the X inherits currentColor
   and stays crisp at any size. */
#cboxClose::before,
#cboxClose::after {
    height: 2px;
    background: currentColor;
    width: 16px;
}

#cboxClose::before { transform: rotate(45deg); }
#cboxClose::after  { transform: rotate(-45deg); }


/* --------------------------------------------------------------------------
   CAPTION AND COUNTER
   --------------------------------------------------------------------------
   #cboxTitle carries the image's meta caption. It renders empty when the
   file has no caption set in the file manager — worth knowing, because an
   empty strip below the image usually means missing metadata rather than
   broken CSS.
   -------------------------------------------------------------------------- */

#cboxTitle,
#cboxCurrent {
    font-family: inherit;
    font-size: .875rem;
    color: var(--white);
}

#cboxTitle {
    padding: var(--space-8) 0;
}


@media (prefers-reduced-motion: reduce) {
    #cboxClose,
    #cboxNext,
    #cboxPrevious {
        transition: none;
    }
}


/* ACCESSIBILITY NOTE
   Colorbox does not set role="dialog" or aria-modal on #colorbox, so assistive
   technology announces it as ordinary content rather than as a dialog. Focus
   IS moved into it and Esc closes it, so it is operable — but the semantics
   cannot be supplied from CSS. Fixing it properly means overriding
   j_colorbox and adding the attributes in the init callback. */