/* Brattle header search (Phase 1)
 * Top bar: Contact/Locations right-aligned (old top-bar search removed in parts/layouts/topbar.php).
 * Main menu: search icon after "About Us" opens a panel over the menu (FTI-style).
 * Root font-size is 62.5%, so 1rem = 10px.
 */

/* Top bar */
.topbar .topbar-content { justify-content: flex-end; }
.topbar .topbar-nav { margin-right: 0; }

/* Hidden on phones: the existing #search-button-mobile / #search-from-mobile is used there */
.nav-header .nav-menu .nav-search-item,
.header-search { display: none; }

@media (min-width: 768px) {
  /* Icon */
  .nav-header .nav-menu .nav-search-item { display: flex; align-items: center; height: 100%; padding-right: 0; }
  .nav-search-toggle {
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
    background: none; color: var(--color-brattle-blue, #003a70);
    font-size: 2rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .2s, color .2s;
  }
  .nav-search-toggle:hover,
  .nav-search-toggle[aria-expanded="true"] { background-color: #eef2f7; color: var(--color-creamsicle, #ff6720); }
  .nav-search-toggle:focus-visible { outline: 2px solid var(--color-fountain, #008eaa); outline-offset: 2px; }

  /* Panel: child of the fixed .main-header; left/width are set by header-search.js */
  .header-search {
    --hs-field-height: 64px;
    display: block;
    position: absolute; z-index: 120;
    top: calc((var(--main-header-height) - var(--hs-field-height)) / 2);
    left: 0; width: 100%;
    background: var(--color-white, #fff);
    box-shadow: 0 10px 30px rgba(0, 30, 70, .18);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility 0s .2s, top .3s;
  }
  .header-search.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s, top .3s; }
  .scroll .header-search { --hs-field-height: 48px; top: calc((var(--main-header-height-scroll) - var(--hs-field-height)) / 2); }

  .header-search-form {
    display: flex; align-items: center;
    height: var(--hs-field-height); padding: 0 8px 0 20px;
    border-bottom: 1px solid #d8dee8;
    transition: height .3s;
  }
  .header-search-form input[type="search"] {
    flex: 1; min-width: 0; height: 100%;
    border: 0; outline: 0; background: none; box-shadow: none;
    font: inherit; font-size: 2rem; color: var(--color-brattle-blue, #003a70);
    -webkit-appearance: none; appearance: none;
  }
  .header-search-form input[type="search"]::-webkit-search-cancel-button { display: none; }
  .header-search .hs-btn {
    width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--color-brattle-blue, #003a70); font-size: 1.8rem; line-height: 1;
    display: flex; align-items: center; justify-content: center; flex: none;
  }
  .header-search .hs-btn:hover { color: var(--color-creamsicle, #ff6720); }
  .header-search .hs-close { font-size: 2.8rem; }

  /* Suggested searches (Appearance > Menus > "Header Search: Suggested Searches") */
  .header-search .hs-suggest-wrap { padding: 14px 20px 18px; }
  .header-search .hs-suggest-label {
    font-size: 1.2rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--color-carbon, #4a4a4a); margin-bottom: 4px;
  }
  .header-search .hs-suggest { list-style: none; margin: 0; padding: 0; }
  .header-search .hs-suggest li { padding: 7px 0; }
  .header-search .hs-suggest a { font-size: 1.5rem; font-weight: 600; text-decoration: none; color: var(--color-brattle-blue, #003a70); }
  .header-search .hs-suggest a:hover { color: var(--color-fountain, #008eaa); }
}

/* ------------------------------------------------------------------
 * Top bar: Locations dropdown (FTI-style). Markup: parts/components/nav-topbar.php
 * ------------------------------------------------------------------ */
.topbar-dropdown-toggle,
.topbar-dropdown { display: none; }

@media (min-width: 768px) {
  /* The top bar clipped its contents and sat level with the main header; let the dropdown show above it. */
  .topbar { overflow: visible; z-index: 100; }

  .topbar-menu .menu-item.has-dropdown { position: relative; display: flex; align-items: center; }
  .topbar-dropdown-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; margin-left: 4px; padding: 0;
    border: 0; background: none; cursor: pointer;
    color: var(--color-carbon, #4a4a4a); font-size: 1rem; line-height: 1;
  }
  .topbar-dropdown-toggle i { display: block; transform: rotate(90deg); transition: transform .2s; }
  .has-dropdown.is-open .topbar-dropdown-toggle i { transform: rotate(-90deg); }
  .topbar-dropdown-toggle:focus-visible { outline: 2px solid var(--color-fountain, #008eaa); outline-offset: 1px; }

  .topbar-menu .topbar-dropdown {
    display: block;
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 2;
    min-width: 220px; max-height: calc((var(--vh, 1vh) * 100) - 60px); overflow-y: auto;
    margin: 0; padding: 10px 0; list-style: none;
    background: var(--color-white, #fff);
    border-top: 3px solid var(--color-creamsicle, #ff6720);
    box-shadow: 0 10px 30px rgba(0, 30, 70, .18);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .2s, transform .2s, visibility 0s .2s;
  }
  /* Invisible bridge so the menu doesn't close while the mouse crosses the 4px gap */
  .topbar-menu .topbar-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  .topbar-menu .topbar-dropdown.two-col { min-width: 400px; -moz-columns: 2; columns: 2; column-gap: 0; }
  .topbar-menu .topbar-dropdown li { -moz-column-break-inside: avoid; break-inside: avoid; }

  .topbar-menu .has-dropdown:hover .topbar-dropdown,
  .topbar-menu .has-dropdown:focus-within .topbar-dropdown,
  .topbar-menu .has-dropdown.is-open .topbar-dropdown {
    opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s;
  }
  .topbar-menu .has-dropdown.is-closing .topbar-dropdown { opacity: 0; visibility: hidden; }

  .topbar-menu .topbar-dropdown li a {
    display: block; padding: 7px 20px; white-space: nowrap;
    font-size: 1.4rem; font-weight: 600; color: var(--color-brattle-blue, #003a70); text-decoration: none;
  }
  .topbar-menu .topbar-dropdown li a:hover,
  .topbar-menu .topbar-dropdown li a:focus { background-color: var(--color-light-grey-1, #f5f5f5); color: var(--color-fountain, #008eaa); }
  .topbar-menu .topbar-dropdown .topbar-dropdown-all { border-bottom: 1px solid #e3e7ee; margin-bottom: 4px; padding-bottom: 10px; }
}