/**
 * @file
 * Utility classes to hide elements in different ways.
 *
 * This file overrides Drupal core's system/base hidden.module.css for the
 * livmarli theme.
 *
 * Reason: Tailwind CSS outputs its responsive utilities inside cascade layers
 * (e.g. @layer utilities). Unlayered rules like `.hidden { display: none; }`
 * can override layered responsive utilities (e.g. `sm:block`) even when loaded
 * earlier, causing responsive display classes to fail.
 *
 * By placing these rules into a lower-precedence cascade layer, Tailwind's
 * responsive utilities can correctly override them at breakpoints.
 */

@layer base {
  /**
   * Hide elements from all users.
   */
  .hidden {
    display: none;
  }

  /**
   * Hide elements visually, but keep them available for screen readers.
   *
   * "!important" is used to prevent unintentional overrides.
   */
  .visually-hidden {
    position: absolute !important;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    word-wrap: normal;
  }

  /**
   * The .focusable class extends the .visually-hidden class to allow
   * the element to be focusable when navigated to via the keyboard.
   */
  .visually-hidden.focusable:active,
  .visually-hidden.focusable:focus-within {
    position: static !important;
    overflow: visible;
    clip: auto;
    width: auto;
    height: auto;
  }

  /**
   * Hide visually and from screen readers, but maintain layout.
   */
  .invisible {
    visibility: hidden;
  }
}