/* Quiet feedback: colour and borders only, with no changes to position or size. */
:root {
  --hover-blue: #f0f7ff;
  --hover-border: #afcdeb;
  --hover-ink: #0969c6;
}

.utility { border-radius: 10px; }
.category-strip a, .story-shortcuts a { border-radius: 12px; }
.craft-faq summary, .more-filters summary { border-radius: 7px; }
a { text-underline-offset: 3px; }

/* Focus stays visible when using a keyboard, including on whole cards. */
.global-search:focus-within,
.catalogue-search:focus-within,
.index-search:focus-within,
.panel-search:focus-within,
.filter-control:focus-within {
  border-color: #6aaae6;
  box-shadow: 0 0 0 3px #087cff12;
}
.craft-card:focus-within .craft-thumb,
.saved-card:focus-within .saved-card-image {
  box-shadow: inset 0 0 0 2px var(--hover-border);
}
.nav-choice:focus-visible,
.utility:focus-visible,
.category-strip a:focus-visible,
.story-shortcuts a:focus-visible,
.story-row a:focus-visible,
.group-card:focus-visible,
.collection-grid > a:focus-visible,
.planning-options > a:focus-visible,
.setting-grid > a:focus-visible,
.pack-preview:focus-visible,
.quick-chips a:focus-visible {
  background-color: var(--hover-blue);
}
.button.green:focus-visible { background-color: #168713; }
.button.blue:focus-visible { background-color: #006de6; }
.button.outline:focus-visible { background-color: var(--hover-blue); border-color: var(--hover-border); }

/* Hover is reserved for a mouse/trackpad so touch screens do not retain it. */
@media (hover: hover) and (pointer: fine) {
  :is(a, button, summary, select, .filter-control, .craft-thumb, .saved-card-image,
      .craft-card h3, .utility > span, .action-options label > span, .time-picker label > span) {
    transition: background-color 150ms ease, border-color 150ms ease,
                color 150ms ease, box-shadow 150ms ease;
  }

  .button:not(:disabled):hover { filter: none; text-decoration: none; }
  .button.green:not(:disabled):hover { background-color: #168713; border-color: #168713; }
  .button.blue:not(:disabled):hover { background-color: #006de6; }
  .button.outline:not(:disabled):hover { background-color: var(--hover-blue); border-color: var(--hover-border); }
  .button:disabled:hover { filter: none; }

  .nav-choice:not([aria-expanded="true"]):not([aria-current="page"]):hover {
    background-color: var(--hover-blue);
    border-color: #d4e6f7;
    color: var(--hover-ink);
  }
  .nav-choice:hover { text-decoration: none; }
  .utility:hover { background-color: var(--hover-blue); }
  .utility:hover > span { color: var(--hover-ink); }
  .brand:hover { color: #105e10; }

  .category-strip a:hover,
  .story-shortcuts a:hover,
  .segmented a:hover,
  .quick-chips a:hover,
  .saved-card-actions button:hover {
    background-color: var(--hover-blue);
    color: var(--hover-ink);
    text-decoration: none;
  }
  .quick-chips a:hover, .saved-card-actions button:hover { border-color: var(--hover-border); }
  .story-row > a:hover,
  .group-card:hover,
  .collection-grid > a:hover,
  .planning-options > a:hover,
  .setting-grid > a:hover,
  .pack-preview:hover,
  .scripture-link:hover {
    background-color: #f5faff;
    border-color: var(--hover-border);
    text-decoration: none;
  }

  .craft-card:hover .craft-thumb,
  .saved-card:hover .saved-card-image {
    box-shadow: inset 0 0 0 2px var(--hover-border);
  }
  .craft-card:hover h3, .saved-card:hover h2 { color: var(--hover-ink); }
  .craft-card a:hover, .saved-card a:hover { text-decoration: none; }
  .save-button:hover { background-color: #fff0f2; color: #dc4055; box-shadow: 0 0 0 1px #f6c9d1; }
  .save-button[aria-pressed="true"]:hover { color: #ca3047; }
  .gallery-thumbs button:not([aria-pressed="true"]):hover { background-color: var(--hover-blue); border-color: var(--hover-border); }

  .filter-control:hover { background-color: #f8fbff; border-color: var(--hover-border); }
  .filter-control select:hover { cursor: pointer; }
  .global-search:hover, .catalogue-search:hover, .index-search:hover, .panel-search:hover { border-color: #9ebce1; }
  .action-options label:hover > span,
  .time-picker label:hover > span { background-color: #f4faff; border-color: var(--hover-border); }
  .action-options input:checked + span,
  .time-picker input:checked + span { background-color: #e7f6ff; border-color: #14acff; }
  .craft-faq summary:hover, .more-filters summary:hover { background-color: #f4f9ff; color: var(--hover-ink); }
  .pagination > a:not([aria-current="page"]):hover { background-color: var(--hover-blue); border-color: var(--hover-border); color: var(--hover-ink); text-decoration: none; }
  .active-filters > a:hover { background-color: #deedff; color: #275b94; text-decoration: none; }
  .site-footer a:not(.brand):hover, .text-button:hover, .panel-bottom-link:hover,
  .panel-bottom-links a:hover, .membership-link:hover, .section-heading > a:hover,
  .hero-actions > a:not(.button):hover { color: #005ebd; text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}