/*
 * SEC-IMS shared header link/button styles.
 *
 * Pairs with `.site-header` and `.header-actions` declared in each
 * page's local CSS (api-docs inline, data-catalog/css/styles.css,
 * metadata-editor/css/styles.css). Keeps the utility-page header
 * buttons visually identical to the map viewer's header
 * (map/css/styles.css `#header .header-link`) without that file
 * having to be reachable from every page.
 *
 * Selector intentionally scoped under `.site-header` so the rules
 * never bleed into other places a `.header-link` class might be
 * reused. Map's existing `#header .header-link` rules retain higher
 * specificity, so this file does not alter the map viewer.
 */

.site-header .header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.site-header .header-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  text-decoration: none;
  font-family: var(--font, 'Segoe UI', Arial, sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border: none;
  border-radius: var(--radius, 4px);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
}

.site-header .header-link:hover {
  background: transparent;
  color: #fff;
  text-decoration: underline;
}

.site-header .header-link:active {
  background: rgba(0, 0, 0, 0.15);
  text-decoration: underline;
}

.site-header .header-link[aria-current="page"] {
  color: #fff;
  background: rgba(0, 0, 0, 0.15);
}

/*
 * Alpine paint-flash guard for pages that don't already define this
 * rule themselves. Safe to declare more than once across files —
 * `display: none !important;` resolves identically.
 */
[x-cloak] { display: none !important; }