/* APL unified focus and event location refinements (v6)
   - Based on earlier working version
   - Restores original layout (no padding/display changes)
   - Uses :focus-within on <li> for main nav & catalog buttons
     without altering spacing
*/

/* ===========================================
   0. Event locations: neutral styling, clear focus on links
   =========================================== */

/* Kill auto-link styling + flex layout in event locations */
.event_location a,
.event_location a[x-apple-data-detectors],
.event_location a[x-apple-data-detectors=true] {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  background: none !important;

  display: inline !important;
  white-space: normal !important;
  pointer-events: auto;
}

/* Clear yellow focus state for event location links */
.event_location a:focus-visible,
.event_location a:focus,
.event_location a[x-apple-data-detectors]:focus-visible,
.event_location a[x-apple-data-detectors]:focus,
.event_location a[x-apple-data-detectors=true]:focus-visible,
.event_location a[x-apple-data-detectors=true]:focus {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px;
  border-radius: 3px;
  text-decoration: underline;
}

/* Wrapper: keep inline flow and avoid extra borders */
.event_location {
  display: inline !important;
  white-space: normal !important;
  border-bottom: 0 !important;
}

/* ===========================================
   1. Global focus token
   =========================================== */

:root {
  /* High contrast focus color (yellow) */
  --focus-ring: #ffbf47;
}

/* ===========================================
   2. Base focus styling
   Provide a consistent outline for all key interactive elements.
   More specific rules below can adjust offset or radius.
   =========================================== */

a:focus-visible,
a:focus,
button:focus-visible,
button:focus,
input:focus-visible,
input:focus,
select:focus-visible,
select:focus,
textarea:focus-visible,
textarea:focus,
[role="button"]:focus-visible,
[role="button"]:focus,
[tabindex]:focus-visible,
[tabindex]:focus {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Bootstrap / other frameworks sometimes add box-shadows.
   Normalize so the yellow outline is always visible. */
.btn:focus-visible,
.btn:focus {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* ===========================================
   3. Skip link
   =========================================== */

.apl-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  z-index: 1000;
  text-decoration: none;
}

.apl-skip-link:focus-visible,
.apl-skip-link:focus {
  left: 16px;
  top: 16px;
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px;
}

/* ===========================================
   4. Top bar links (Events / Locations / Get a Card / Español, etc.)
   =========================================== */

#horizontal_rule a:focus-visible,
#horizontal_rule a:focus {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px;
  border-radius: 3px;
}

/* If there are top-bar buttons, treat them the same */
#horizontal_rule button:focus-visible,
#horizontal_rule button:focus {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ===========================================
   5. Site logo focus
   =========================================== */

/* Cover common logo patterns without guessing exact class names too hard */
.site-logo:focus-visible,
.site-logo:focus,
.site-logo a:focus-visible,
.site-logo a:focus,
#branding a:focus-visible,
#branding a:focus,
.navbar-brand:focus-visible,
.navbar-brand:focus,
#apl-nav .logo a:focus-visible,
#apl-nav .logo a:focus {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Explicit logo focus for #new_logo */
#new_logo a:focus-visible,
#new_logo a:focus {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===========================================
   6. Main nav items and dropdown triggers
   (Restore original spacing, just improve focus)
   =========================================== */

/* Default focus for nav links/buttons (anchor box only) */
#apl-nav a:focus-visible,
#apl-nav a:focus,
#apl-nav button.nav-button:focus-visible,
#apl-nav button.nav-button:focus {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 3px;
  border-radius: 3px;
}

/* Enhanced, balanced ring using li:focus-within,
   without changing layout */
#apl-nav .apllinks > li {
  position: relative;
}

#apl-nav .apllinks > li:focus-within {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Avoid double outlines: rely on li ring for these items */
#apl-nav .apllinks > li > a.nav-button:focus,
#apl-nav .apllinks > li > a.nav-button:focus-visible,
#apl-nav .apllinks > li > button.nav-button:focus,
#apl-nav .apllinks > li > button.nav-button:focus-visible {
  outline: none !important;
}

/* Subnavigation links inside dropdowns keep the direct outline */
.apl-submenu-menu a:focus-visible,
.apl-submenu-menu a:focus {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 3px;
  border-radius: 3px;
}

/* ===========================================
   7. Mobile menu / search triggers
   =========================================== */

.aplmenu.onlysmall:focus-visible,
.aplmenu.onlysmall:focus {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 3px;
  border-radius: 4px;
}

/* If there is a separate mobile search button, match it: */
#apl-nav .search-toggle:focus-visible,
#apl-nav .search-toggle:focus {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===========================================
   8. Search controls (dropdown, input, buttons, Advanced Search link)
   =========================================== */

/* Select + input */
.bc-search .search_type_block select:focus-visible,
.bc-search .search_type_block select:focus,
.bc-search .main_search_input:focus-visible,
.bc-search .main_search_input:focus {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px;
}

/* Primary / secondary search buttons */
.bc-search [data-role="btn-books"]:focus-visible,
.bc-search [data-role="btn-books"]:focus,
.bc-search [data-role="btn-apl"]:focus-visible,
.bc-search [data-role="btn-apl"]:focus {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Advanced Search link */
.bc-search .adv_search a:focus-visible,
.bc-search .adv_search a:focus {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ===========================================
   9. Base appearance for the two search buttons
   (do not touch background here so Bootstrap colors still work)
   =========================================== */

.bc-search [data-role="btn-books"],
.bc-search [data-role="btn-apl"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* Primary Search Books & More button: always purple */
.bc-search .btn.btn-primary[data-role="btn-books"],
.bc-search .btn.btn-primary[data-role="btn-books"]:hover,
.bc-search .btn.btn-primary[data-role="btn-books"]:focus,
.bc-search .btn.btn-primary[data-role="btn-books"]:active,
.bc-search .btn.btn-primary[data-role="btn-books"]:focus-visible {
  background-color: #323f8f !important;
  border-color: #323f8f !important;
  color: #fff !important;
}

/* Secondary Search Website button */
.bc-search .btn[data-role="btn-apl"],
.bc-search .btn[data-role="btn-apl"]:hover,
.bc-search .btn[data-role="btn-apl"]:focus,
.bc-search .btn[data-role="btn-apl"]:active,
.bc-search .btn[data-role="btn-apl"]:focus-visible {
  background-color: #ffffff;
  border-color: #323f8f;
  color: #000000;
}

/* ===========================================
   10. Browse Catalog / Digital Resource Subjects buttons
   Use li:focus-within for a ring around the button,
   but do not change layout/spacing.
   =========================================== */

#browse-button li,
#research-button li {
  position: relative;
}

/* Draw ring on li around the existing layout box */
#browse-button li:focus-within,
#research-button li:focus-within {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 3px;
  border-radius: 3px;
}

/* Remove inner outline to prevent double ring */
#browse-button li a.menu-button:focus,
#browse-button li a.menu-button:focus-visible,
#research-button li a.menu-button:focus,
#research-button li a.menu-button:focus-visible {
  outline: none !important;
}

.apl-submenu .menu-button {
	margin: 0 !important;
}