/* =========================================================
   KomuInfo Button Layer
   ---------------------------------------------------------
   Purpose:
   - Unify button color, border and focus behavior.
   - Keep button styles out of page-specific files.
   ========================================================= */

.ki-modern-shell {
  --ki-btn-primary: #17385c;
  --ki-btn-primary-hover: #214a77;
  --ki-btn-primary-active: #112c48;
  --ki-btn-primary-text: #ffffff;
  --ki-btn-secondary-bg: #f4f8fd;
  --ki-btn-secondary-border: #c9d8eb;
  --ki-btn-secondary-text: #17385c;
  --ki-btn-ring: rgba(23, 56, 92, 0.22);
}

.ki-modern-shell .ki-btn,
.ki-modern-shell button.ki-btn,
.ki-modern-shell a.ki-btn {
  background: var(--ki-btn-primary);
  border: 1px solid var(--ki-btn-primary);
  color: var(--ki-btn-primary-text);
}

.ki-modern-shell .ki-btn:hover,
.ki-modern-shell button.ki-btn:hover,
.ki-modern-shell a.ki-btn:hover {
  background: var(--ki-btn-primary-hover);
  border-color: var(--ki-btn-primary-hover);
  color: var(--ki-btn-primary-text);
}

.ki-modern-shell .ki-btn:active,
.ki-modern-shell button.ki-btn:active,
.ki-modern-shell a.ki-btn:active {
  background: var(--ki-btn-primary-active);
  border-color: var(--ki-btn-primary-active);
}

.ki-modern-shell .ki-btn:focus-visible,
.ki-modern-shell button.ki-btn:focus-visible,
.ki-modern-shell a.ki-btn:focus-visible {
  outline: 2px solid var(--ki-btn-ring);
  outline-offset: 2px;
}

/* Legacy components unified into button layer */
.ki-modern-shell .ki-popular-ranking__tab,
.ki-modern-shell .widget-popular .ki-sidebar-popular__segitem,
.ki-modern-shell .more-cat-button a,
.ki-modern-shell .ki-site-header__search .search-submit,
.ki-modern-shell.single .ez-toc-title-toggle button,
.ki-modern-shell.single .ez-toc-btn,
.ki-modern-shell .ki-lp-cta,
.ki-modern-shell .ki-lp-card[href] {
  border-color: var(--ki-btn-secondary-border, #c9d8eb) !important;
  color: var(--ki-btn-secondary-text, #17385c) !important;
}

.ki-modern-shell .ki-popular-ranking__tab-radio:nth-of-type(1):checked ~ .ki-popular-ranking__tablist .ki-popular-ranking__tab:nth-child(1),
.ki-modern-shell .ki-popular-ranking__tab-radio:nth-of-type(2):checked ~ .ki-popular-ranking__tablist .ki-popular-ranking__tab:nth-child(2),
.ki-modern-shell .ki-popular-ranking__tab-radio:nth-of-type(3):checked ~ .ki-popular-ranking__tablist .ki-popular-ranking__tab:nth-child(3),
.ki-modern-shell .widget-popular .ki-sidebar-popular__radio:nth-of-type(1):checked ~ .ki-sidebar-popular__seg .ki-sidebar-popular__segitem:nth-child(1),
.ki-modern-shell .widget-popular .ki-sidebar-popular__radio:nth-of-type(2):checked ~ .ki-sidebar-popular__seg .ki-sidebar-popular__segitem:nth-child(2),
.ki-modern-shell .widget-popular .ki-sidebar-popular__radio:nth-of-type(3):checked ~ .ki-sidebar-popular__seg .ki-sidebar-popular__segitem:nth-child(3),
.ki-modern-shell .ki-site-header__search .search-submit,
.ki-modern-shell.single .ez-toc-btn,
.ki-modern-shell .more-cat-button a {
  background: var(--ki-btn-primary, #17385c) !important;
  border-color: var(--ki-btn-primary, #17385c) !important;
  color: var(--ki-btn-primary-text, #fff) !important;
}

.ki-modern-shell .ki-popular-ranking__tab:hover,
.ki-modern-shell .widget-popular .ki-sidebar-popular__segitem:hover,
.ki-modern-shell .more-cat-button a:hover,
.ki-modern-shell .ki-site-header__search .search-submit:hover,
.ki-modern-shell.single .ez-toc-btn:hover,
.ki-modern-shell.single .ez-toc-title-toggle button:hover {
  border-color: var(--ki-btn-primary-hover, #214a77) !important;
  color: var(--ki-btn-primary-hover, #214a77) !important;
}

.ki-modern-shell .ki-site-header__search .search-submit:hover,
.ki-modern-shell .more-cat-button a:hover,
.ki-modern-shell.single .ez-toc-btn:hover {
  background: var(--ki-btn-primary-hover, #214a77) !important;
  color: #fff !important;
}

.ki-modern-shell button:focus-visible,
.ki-modern-shell a[role="button"]:focus-visible,
.ki-modern-shell .ki-popular-ranking__tab:focus-visible,
.ki-modern-shell .widget-popular .ki-sidebar-popular__segitem:focus-visible,
.ki-modern-shell .ki-site-header__search .search-submit:focus-visible {
  outline: 2px solid var(--ki-btn-ring, rgba(23,56,92,.22)) !important;
  outline-offset: 2px !important;
}