/**
 * File: assets/css/lightbox.css
 *
 * Canonical presentation for the shared 12D Lightbox infrastructure.
 *
 * Widget-specific styling does not belong here. Consuming widgets may expose
 * shared Lightbox controls, but those controls should configure this canonical
 * component rather than reproduce its CSS.
 */

.d12-lightbox {
  /*
   * Component tokens.
   *
   * These defaults intentionally stay close to the existing Carousel Lightbox
   * presentation. Elementor controls can override them at the consuming-widget
   * scope in a later stage.
   */
  --d12-lightbox-overlay-bg: rgba(0, 0, 0, 0.85);

  --d12-lightbox-media-max-width: 90vw;
  --d12-lightbox-media-max-height: 85vh;

  --d12-lightbox-caption-color: #fff;
  --d12-lightbox-caption-gap: 12px;

  --d12-lightbox-nav-icon-size: 5rem;
  --d12-lightbox-nav-padding: 0;
  --d12-lightbox-nav-radius: 0;
  --d12-lightbox-nav-left: 12px;
  --d12-lightbox-nav-right: 12px;

  --d12-lightbox-nav-color: var(--e-global-color-text);
  --d12-lightbox-nav-bg: transparent;
  --d12-lightbox-nav-border-width: 0;
  --d12-lightbox-nav-border-style: solid;
  --d12-lightbox-nav-border-color: transparent;

  --d12-lightbox-nav-hover-color: var(--d12-white, #ffffff);
  --d12-lightbox-nav-hover-bg: var(
    --d12-accent-hover,
    var(--e-global-color-accent)
  );
  --d12-lightbox-nav-hover-border-color: transparent;

  --d12-lightbox-nav-focus-color: var(
    --d12-accent-hover,
    var(--e-global-color-accent)
  );
  --d12-lightbox-nav-focus-bg: transparent;
  --d12-lightbox-nav-focus-border-color: transparent;

  --d12-lightbox-nav-focus-width: 2px;
  --d12-lightbox-nav-focus-style: solid;
  --d12-lightbox-nav-focus-indicator-color: var(
    --d12-accent-hover,
    var(--e-global-color-accent)
  );
  --d12-lightbox-nav-focus-offset: 3px;

  --d12-lightbox-close-size: 44px;
  --d12-lightbox-close-icon-size: 24px;
  --d12-lightbox-close-top: 20px;
  --d12-lightbox-close-right: 20px;
  --d12-lightbox-close-padding: 10px;
  --d12-lightbox-close-radius: 50%;

  --d12-lightbox-close-color: var(--e-global-color-text);
  --d12-lightbox-close-bg: transparent;
  --d12-lightbox-close-border-width: 1px;
  --d12-lightbox-close-border-style: solid;
  --d12-lightbox-close-border-color: transparent;

  --d12-lightbox-close-hover-color: var(--d12-white, #ffffff);
  --d12-lightbox-close-hover-bg: var(
    --d12-accent-hover,
    var(--e-global-color-accent)
  );
  --d12-lightbox-close-hover-border-color: transparent;

  --d12-lightbox-close-focus-color: var(
    --d12-accent-hover,
    var(--e-global-color-accent)
  );
  --d12-lightbox-close-focus-bg: transparent;
  --d12-lightbox-close-focus-border-color: transparent;

  --d12-lightbox-focus-width: 2px;
  --d12-lightbox-focus-style: solid;
  --d12-lightbox-focus-color: var(
    --d12-accent-hover,
    var(--e-global-color-accent)
  );
  --d12-lightbox-focus-offset: 3px;

  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  padding: 24px;

  background: var(--d12-lightbox-overlay-bg);
  pointer-events: auto;
}

/* Preserve consumer stylesheet scopes while escaping header stacking contexts. */
.d12-lightbox-portal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
}

.d12-lightbox__content {
  display: contents;
  pointer-events: auto;
}

/*
 * The HTML hidden attribute is the canonical closed-state mechanism.
 *
 * Explicitly declaring this protects the component if a theme or third-party
 * stylesheet assigns a display value to the Lightbox root.
 */
.d12-lightbox[hidden] {
  display: none !important;
}

.d12-lightbox,
.d12-lightbox *,
.d12-lightbox *::before,
.d12-lightbox *::after {
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Stage / media
 * ---------------------------------------------------------------------- */

.d12-lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  pointer-events: none;
}

.d12-lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;

  pointer-events: none;
}

.d12-lightbox__media-box,
.d12-lightbox__caption {
  pointer-events: auto;
}

.d12-lightbox__media-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: auto;
  height: auto;
  max-width: var(--d12-lightbox-media-max-width);
  max-height: var(--d12-lightbox-media-max-height);
}

.d12-lightbox__media {
  display: block;

  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
}

/*
 * Caption width follows the rendered figure/media rather than becoming a
 * viewport-wide text block.
 */
.d12-lightbox__caption {
  max-width: 100%;
  margin-top: var(--d12-lightbox-caption-gap);

  color: var(--d12-lightbox-caption-color);
  text-align: center;
}

.d12-lightbox__caption[hidden] {
  display: none !important;
}

/*
 * Navigation controls remain hidden unless shared Lightbox behaviour determines
 * that the active Lightbox belongs to a navigable group.
 *
 * Explicitly protect the native hidden state against theme or third-party
 * button styles that assign their own display value.
 */
.d12-lightbox__nav[hidden] {
  display: none !important;
}

/* -------------------------------------------------------------------------
 * Navigation controls
 * ---------------------------------------------------------------------- */

button.d12-lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: auto;
  height: auto;
  padding: var(--d12-lightbox-nav-padding);

  color: var(--d12-lightbox-nav-color);
  background: var(--d12-lightbox-nav-bg);

  border-width: var(--d12-lightbox-nav-border-width);
  border-style: var(--d12-lightbox-nav-border-style);
  border-color: var(--d12-lightbox-nav-border-color);
  border-radius: var(--d12-lightbox-nav-radius);

  box-shadow: none;

  font: inherit;
  line-height: 1;

  appearance: none;
  -webkit-appearance: none;

  transform: translateY(-50%);
  cursor: pointer;
}

button.d12-lightbox__nav--prev {
  right: calc(100% + var(--d12-lightbox-nav-left));
}

button.d12-lightbox__nav--next {
  left: calc(100% + var(--d12-lightbox-nav-right));
}

.d12-lightbox__nav-icon {
  display: block;

  width: var(--d12-lightbox-nav-icon-size);
  height: var(--d12-lightbox-nav-icon-size);

  flex: 0 0 auto;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;

  pointer-events: none;
}

button.d12-lightbox__nav:hover {
  color: var(--d12-lightbox-nav-hover-color);
  background: var(--d12-lightbox-nav-hover-bg);
  border-color: var(--d12-lightbox-nav-hover-border-color);
}

/*
 * Pointer activation may leave the native button focused after the pointer
 * moves away. Keep ordinary :focus visually equivalent to Normal so external
 * theme/Elementor button-focus styles cannot leak into the Lightbox.
 *
 * Keyboard focus presentation is applied separately by :focus-visible.
 */
button.d12-lightbox__nav:focus {
  color: var(--d12-lightbox-nav-color);
  background: var(--d12-lightbox-nav-bg);
  border-color: var(--d12-lightbox-nav-border-color);
  box-shadow: none;
}

button.d12-lightbox__nav:focus-visible {
  color: var(--d12-lightbox-nav-focus-color);
  background: var(--d12-lightbox-nav-focus-bg);
  border-color: var(--d12-lightbox-nav-focus-border-color);
  box-shadow: none;
}

button.d12-lightbox__nav:focus-visible {
  outline-width: var(--d12-lightbox-nav-focus-width);
  outline-style: var(--d12-lightbox-nav-focus-style);
  outline-color: var(--d12-lightbox-nav-focus-indicator-color);
  outline-offset: var(--d12-lightbox-nav-focus-offset);
}

/* -------------------------------------------------------------------------
 * Close control
 * ---------------------------------------------------------------------- */

button.d12-lightbox__close {
  position: absolute;
  top: var(--d12-lightbox-close-top);
  right: var(--d12-lightbox-close-right);
  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: auto;
  height: auto;
  min-width: var(--d12-lightbox-close-size);
  min-height: var(--d12-lightbox-close-size);
  aspect-ratio: 1;

  padding: var(--d12-lightbox-close-padding);

  color: var(--d12-lightbox-close-color);
  background: var(--d12-lightbox-close-bg);

  border-width: var(--d12-lightbox-close-border-width);
  border-style: var(--d12-lightbox-close-border-style);
  border-color: var(--d12-lightbox-close-border-color);
  border-radius: var(--d12-lightbox-close-radius);

  font: inherit;
  line-height: 1;

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;
}

.d12-lightbox__close-icon {
  display: block;

  width: var(--d12-lightbox-close-icon-size);
  height: var(--d12-lightbox-close-icon-size);

  flex: 0 0 auto;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;

  pointer-events: none;
}

button.d12-lightbox__close:hover {
  color: var(--d12-lightbox-close-hover-color);
  background: var(--d12-lightbox-close-hover-bg);
  border-color: var(--d12-lightbox-close-hover-border-color);
}

button.d12-lightbox__close:focus-visible {
  color: var(--d12-lightbox-close-focus-color);
  background: var(--d12-lightbox-close-focus-bg);
  border-color: var(--d12-lightbox-close-focus-border-color);
}

/*
 * Canonical keyboard Focus Indicator.
 *
 * :focus-visible prevents a persistent indicator for ordinary pointer
 * activation while retaining a clearly visible keyboard focus state.
 */
button.d12-lightbox__close:focus-visible {
  outline-width: var(--d12-lightbox-focus-width);
  outline-style: var(--d12-lightbox-focus-style);
  outline-color: var(--d12-lightbox-focus-color);
  outline-offset: var(--d12-lightbox-focus-offset);
}

/* -------------------------------------------------------------------------
 * Open-page state
 * ---------------------------------------------------------------------- */

html.d12-lightbox-open,
body.d12-lightbox-open {
  overflow: hidden;
}

/* End of file: assets/css/lightbox.css */