/*
 * Zenitech keyboard focus. Proposed child-theme file: /css/zenitech-focus.css
 * No Elementor settings, borders, radii, transforms or animations are changed.
 * The ring extends 6px beyond the element: 3px offset + 3px outline.
 * Verified in staging's generated CSS: --color-brand-red, --color-white,
 * --color-navy are the existing Elementor V4 colour-variable names.
 */

/* Reuse existing surface hooks without changing Elementor content.
 * :where() lets the explicit focus-on-* classes override these defaults.
 */
:where(.bg-white, .bg-grey) {
  --zen-focus-color: var(--color-brand-red, #E5002B);
  --zen-focus-halo-shadow: initial;
}

:where(.bg-navy, .industries-scroll, .closing-section, .client-story-card__content) {
  --zen-focus-color: var(--color-white, #FFFFFF);
  --zen-focus-halo-shadow: initial;
}

/* Apply a class to the surface surrounding the interactive elements.
 * For example, a red button on white still needs focus-on-light.
 * Put focus-on-dark on red surfaces as well as navy/near-black surfaces.
 * A nested surface class overrides its parent's inherited properties.
 */
.focus-on-light {
  --zen-focus-color: var(--color-brand-red, #E5002B);
  --zen-focus-halo-shadow: initial;
}

.focus-on-dark {
  --zen-focus-color: var(--color-white, #FFFFFF);
  --zen-focus-halo-shadow: initial;
}

.focus-on-colour {
  --zen-focus-color: var(--color-navy, #151728);
  --zen-focus-halo-shadow: initial;
}

.focus-on-image {
  --zen-focus-color: var(--color-white, #FFFFFF);
  --zen-focus-halo-shadow: 0 0 0 6px var(--color-navy, #151728);
}

/* :focus-visible covers native controls, linked Atomic containers and custom
 * keyboard-focusable elements without changing tabindex or keyboard behaviour.
 * The Elementor selectors also override known widget !important outline resets.
 * Only the outline properties are forced; existing shadows/hover styles remain.
 */
html body :focus-visible,
html body .elementor .elementor-element:focus-visible,
html body .elementor .elementor-element :focus-visible {
  outline: 3px solid var(--zen-focus-color, var(--color-brand-red, #E5002B)) !important;
  outline-offset: 3px !important;
}

/* Optional image halo, below the site's unlayered component styles.
 * A component's own box-shadow (including "none") takes precedence; CSS cannot
 * append a shadow to an arbitrary existing shadow without a shared shadow token.
 * The mandatory outline above always remains, even when this halo yields.
 * "initial" on a nested surface clears the inherited custom property, so var()
 * uses revert-layer and contributes no shadow declaration for that surface.
 */
@layer zenitech-focus-halo {
  :where(:focus-visible) {
    box-shadow: var(--zen-focus-halo-shadow, revert-layer);
  }
}

/* Card Shelf keeps its horizontal scrolling and existing card dimensions.
 * Reserve ring space at all times, rather than changing layout on focus.
 * Existing first/last card gutters and scroll-margin-inline remain intact.
 */
html body .card-shelf {
  padding-block: max(6px, var(--zen-focus-shelf-padding-block, 6px));
  scroll-padding-block: 6px;
  scroll-padding-inline: max(6px, var(--shelf-gutter, 16px));
}

/* Help native focus scrolling without changing GSAP clipping or transforms.
 * A pinned/translated card that remains offscreen needs a separate widget fix.
 */
html body .industry-card {
  scroll-margin-block: 6px;
}

html body .industries-scroll__viewport {
  scroll-padding-block: 6px;
}

/* OS high-contrast colours provide the visible ring when shadows are suppressed.
 * No :focus reset is supplied: older browsers retain their native indicator.
 */
@media (forced-colors: active) {
  html body :focus-visible,
  html body .elementor .elementor-element:focus-visible,
  html body .elementor .elementor-element :focus-visible {
    outline-color: Highlight !important;
  }
}