/* Brand color tokens. Anything visual that wants the Shevato blue should pull
   from these variables instead of hard-coding the hex. The RGB triple is also
   exposed for use inside rgba(...) calls. */
:root {
  --brand-blue: #0044cc;
  --brand-blue-hover: #003bb5;
  --brand-blue-tint: #1a5fd9;
  /* Brightened brand blue for dark/near-black surfaces (site header and the
     slide-in #menu). #0044cc only reaches ~2.5:1 contrast on black and fails
     WCAG AA; #4d8dff reaches ~6.2:1 while reading as the same brand hue.
     Use this for active-nav indicators on dark backgrounds. */
  --brand-blue-on-dark: #4d8dff;
  --brand-blue-rgb: 0, 68, 204;
}

.brand-color-primary {
  color: var(--brand-blue) !important;
}

.btn-export {
  background: #48BB78;
}

.btn-import {
  background: #38B2AC;
  margin-left: 10px;
}

.btn-backup {
  background: #4299E1;
  margin-left: 10px;
}

.wrapper-inherit-padding {
  padding-top: inherit;
}

.sortable-header {
  cursor: pointer;
}

/* Skip-to-content link — visually offscreen until keyboard-focused.
   Required by WCAG 2.4.1 (Bypass Blocks) so keyboard users can jump
   over the partial-loaded header/nav and land on the page's main
   region. The link's target (#main-content) already exists on every
   top-level page that loads this stylesheet. */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 1000;
  padding: 8px 16px;
  background: var(--brand-blue);
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}