/* =====================================================================
   FF Plus Hero Tools v1.1.0 (2026-09-28, Sarah + Claude; v1.0.0 same day)
   v1.1.0: Browse dropdown for content types, chip row removed.
   The Browse / Favorites / Slides / EdCloud row, the suite More tools
   pill, the search box and the Browse content-type menu, injected into the
   hero of the First Five Plus hub pages and the downloads singles by
   ff-plus-hero.js (loaded by the site-2 "FF Plus hero tools" snippet).
   Every class is prefixed ffph- (no Bootstrap-reserved names).
   Brand: navy #001b72, teal #00b09b, gold #ffc107, tint #e8f8f4.
   ===================================================================== */
.ffph { font-family: "Nunito Sans", system-ui, sans-serif; margin: 18px auto 0; max-width: 980px; text-align: center; }
.ffph-row { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; background: #fff; border: 1px solid #e6e9ef; border-radius: 999px; padding: 6px; }
.ffph-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; color: #101820; text-decoration: none; line-height: 1; white-space: nowrap; }
.ffph-tab:hover { background: #f2fbf9; color: #001b72; text-decoration: none; }
.ffph-tab.is-here { background: #001b72; color: #fff; }
.ffph-tab.is-here:hover { background: #001b72; color: #fff; }
.ffph-tab svg { width: 16px; height: 16px; flex: 0 0 16px; }
.ffph-cnt { font-size: 11px; font-weight: 800; background: #e8f8f4; color: #001b72; border-radius: 999px; padding: 2px 7px; }
.ffph-tab.is-here .ffph-cnt { background: #1c3b8f; color: #fff; }
.ffph-browse { position: relative; display: inline-flex; align-items: center; }
.ffph-browse .ffph-tab { padding-right: 10px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ffph-caret { border: 0; background: transparent; color: #101820; padding: 9px 9px 9px 4px; margin-left: -2px; border-radius: 0 999px 999px 0; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; }
.ffph-caret svg { width: 14px; height: 14px; }
.ffph-caret:hover { background: #f2fbf9; color: #001b72; }
.ffph-caret.is-here { background: #001b72; color: #fff; }
.ffph-caret.is-here:hover { background: #0a2a8f; }
.ffph-browse.is-open .ffph-caret svg { transform: rotate(180deg); }
.ffph-menu { display: none; position: absolute; z-index: 1000; min-width: 210px; font-family: "Nunito Sans", system-ui, sans-serif; background: #fff; border: 1px solid #e6e9ef; border-radius: 14px; box-shadow: 0 12px 32px rgba(16, 24, 32, 0.12); padding: 8px; text-align: left; }
.ffph-menu.is-open { display: block; }
.ffph-menu-item { display: block; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 700; color: #101820; text-decoration: none; line-height: 1.3; white-space: nowrap; }
.ffph-menu-item:hover, .ffph-menu-item:focus { background: #f2fbf9; color: #001b72; text-decoration: none; outline: none; }
.ffph-menu-item.is-on { background: #e8f8f4; color: #001b72; }
.ffph-sep { width: 1px; height: 22px; background: #e6e9ef; margin: 0 4px; }
.ffph-row #etsn-pill { border-radius: 999px !important; padding: 9px 14px !important; box-shadow: none !important; }
.ffph-search { display: flex; align-items: center; gap: 8px; max-width: 560px; margin: 14px auto 0; background: #fff; border: 1px solid #e6e9ef; border-radius: 999px; padding: 4px 6px 4px 16px; }
.ffph-search svg { width: 18px; height: 18px; flex: 0 0 18px; color: #5f6b7a; }
.ffph-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: #101820; padding: 8px 0; }
.ffph-search input::placeholder { color: #5f6b7a; }
.ffph-search button { border: 0; background: #001b72; color: #fff; font-weight: 800; font-size: 13px; border-radius: 999px; padding: 9px 16px; cursor: pointer; font-family: inherit; }
.ffph-search button:hover { background: #0a2a8f; }
/* the header search retires on pages that carry the hero search */
body.ffph-page #navbar-wrapper .search-toggle-wrap, body.ffph-page #navbar-wrapper form.search-form { display: none !important; }
/* placement tweaks per page */
/* the hub hero column is 660px, the row needs about 760px, so let it centre over the column */
.ffph--database, .ffph--slides { width: max-content; max-width: calc(100vw - 32px); position: relative; left: 50%; transform: translateX(-50%); }
@media (min-width: 900px) { .ffph-row { flex-wrap: nowrap; } }
.ffph--single { text-align: left; margin: 10px 0 0; }
.ffph--single .ffph-row { justify-content: flex-start; }
.ffph--single .ffph-search { margin-left: 0; }
.ffph--favorites { margin-top: -20px; margin-bottom: 26px; }
@media (max-width: 640px) {
  .ffph-row { border-radius: 18px; }
  .ffph-tab { padding: 8px 12px; font-size: 13px; }
  .ffph-menu { min-width: 180px; }
}