/* ======================================================
   GF Hearts — Navigation
   Desktop (logged out): BuddyX's own header/nav, restyled below.
   Desktop (logged in): slim app nav bar (≥768px), replaces the header entirely.
   Mobile: bottom tab bar (logged in) or hamburger + drawer (logged out) —
   BuddyX's own mobile menu is hidden in favour of these on all mobile views.
   ====================================================== */

/* --- Fixed headers (both logged-out and logged-in) ---
   z-index values in this file all sit above 10000: BuddyX's own .site-header-wrapper
   claims z-index:9999, which would otherwise paint over every one of our fixed/overlay
   elements (this header included) wherever they overlap it. */
#masthead,
.gfh-app-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10200;
}

/* BuddyX's own _header.css gives .site-header-wrapper (the static-flow parent
   #masthead used to live in before we made it fixed above) a permanent
   min-height:51px + box-shadow, regardless of content. With #masthead removed
   from flow, that rule leaves an empty shadowed bar in its place on every
   page - looking like a second, blank navigation sitting under the real one.
   #page's JS-measured padding-top (below) already accounts for the real fixed
   header's height, so this wrapper needs to take up no space at all. */
.site-header-wrapper {
  min-height: 0;
  padding: 0;
  box-shadow: none;
}

/* Account for the WP admin bar when visible */
body.admin-bar #masthead,
body.admin-bar .gfh-app-nav,
body.admin-bar .gfh-mobile-hamburger-wrap {
  top: 32px;
}

/* Push content below fixed header via #page. #masthead is what's visible on mobile
   regardless of login state, so this default (JS-measured) applies there for everyone.
   !important because BuddyX's own custom.js sets an inline padding-top on this same
   element (its "sticky header" scroll effect) - our header is unconditionally fixed
   instead, by design, so this value must always win regardless of scroll position. */
#page {
  padding-top: var(--gfh-header-h) !important;
}

/* Hide BuddyX's own header for logged-in users on desktop — app nav replaces it,
   so #page needs to clear the app nav's height instead here. */
@media (min-width: 768px) {
  body.logged-in #masthead {
    display: none;
  }

  body.logged-in #page {
    padding-top: var(--gfh-app-nav-h) !important;
  }
}

/* Mobile logged-in: hide app nav (bottom tab bar handles nav) */
@media (max-width: 767px) {
  .gfh-app-nav {
    display: none !important;
  }
}

/* --- Desktop header --- */
#masthead {
  background-color: var(--gfh-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--gfh-teal) 15%, transparent);
  transition: background-color 0.3s, box-shadow 0.3s;
}

#masthead.is-scrolled {
  box-shadow: 0 2px 16px color-mix(in srgb, var(--gfh-teal) 12%, transparent);
}

/* Logo — constrain height, let width follow natural aspect ratio.
   !important overrides the width/height HTML attributes WordPress outputs. */
.site-logo-wrapper img,
.custom-logo {
  max-height: 56px;
  width: auto !important;
  height: auto !important;
  display: block;
  object-fit: contain;
}

/* Keep the logo link inline so it doesn't stretch to fill the grid cell */
.custom-logo-link {
  display: inline-flex;
  align-items: center;
}

@media (min-width: 768px) {
  .site-logo-wrapper img,
  .custom-logo {
    max-width: 200px !important;
    max-height: none !important;
    width: auto !important;
    height: auto !important;
  }
}

/* Desktop nav links (BuddyX's own #site-navigation, restyled to match brand) */
.main-navigation a {
  font-family: var(--gfh-font-body);
  color: var(--gfh-teal);
  text-decoration: none;
  transition: color 0.2s;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  color: var(--gfh-primary);
}

/* --- Global typography --- */
body {
  font-family: var(--gfh-font-body);
  background-color: var(--gfh-bg);
  color: var(--gfh-text);
}

h1, h2 {
  font-family: var(--gfh-font-display);
  color: var(--gfh-teal);
}

h3, h4, h5, h6 {
  font-family: var(--gfh-font-body);
  color: var(--gfh-teal);
}

/* --- Full width pages (Page Layout meta box "Full width" checkbox, or our own
   recipes/restaurants/submit-recipe templates) ---
   header.php/footer.php already skip the centered .container wrapper for
   page-template-full-width, so #primary renders edge-to-edge with no cap by default.
   On screens wider than a 16:9 ratio (e.g. ultrawide monitors) that would stretch
   content further than is comfortable to read, so clamp it to a 16:9-relative width
   instead: 100vh * 16/9 only comes in under 100% width once the viewport itself is
   wider than 16:9, so this is a no-op on any standard (16:9 or narrower) display. */
@media (min-width: 1600px) {
  body.page-template-full-width #primary {
    max-width: 177.78vh;
    margin-inline: auto;
  }
}

/* --- Genesis Blocks "Notice" callout (e.g. the intro notices on the Recipes page) ---
   Colors are set inline per-block via the block's own color picker, so !important is
   required to beat them; matched against the specific hex values currently in use so each
   severity level keeps a distinct color instead of collapsing to one flat override. */
.gb-block-notice {
  border-radius: var(--gfh-radius-card) !important;
}

.gb-block-notice .gb-notice-title {
  font-family: var(--gfh-font-body);
  border-radius: var(--gfh-radius-card) var(--gfh-radius-card) 0 0 !important;
}

.gb-block-notice .gb-notice-text {
  font-family: var(--gfh-font-body);
  border-width: 1px !important;
  border-radius: 0 0 var(--gfh-radius-card) var(--gfh-radius-card) !important;
}

/* The plugin only zeroes out each paragraph's margin-bottom, leaving its default
   margin-top to stack on top of the title/text padding above - that's the extra gap. */
.gb-block-notice .gb-notice-title p,
.gb-block-notice .gb-notice-text p:first-child {
  margin-top: 0;
}

.gb-block-notice[style*="60c5d4"] { background-color: var(--gfh-accent) !important; }
.gb-block-notice[style*="60c5d4"] .gb-notice-text { border-color: var(--gfh-accent) !important; }

.gb-block-notice[style*="ed885c"] { background-color: var(--gfh-primary) !important; }
.gb-block-notice[style*="ed885c"] .gb-notice-text { border-color: var(--gfh-primary) !important; }

.gb-block-notice[style*="ea5858"] { background-color: var(--gfh-meter-low) !important; }
.gb-block-notice[style*="ea5858"] .gb-notice-text { border-color: var(--gfh-meter-low) !important; }

/* The plugin hardcodes the message body to a white background - swap to our dark
   surface/text tokens so it doesn't sit as a bright white card on a dark page. */
:root[data-bx-mode="dark"] {
  .gb-block-notice .gb-notice-text {
    background-color: var(--gfh-surface) !important;
    color: var(--gfh-text) !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root[data-bx-mode="auto"] {
    .gb-block-notice .gb-notice-text {
      background-color: var(--gfh-surface) !important;
      color: var(--gfh-text) !important;
    }
  }
}

/* --gfh-teal already resolves to the accent shade in dark mode (see
   variables.css) - using it here keeps links dark-teal on light backgrounds
   (accent has poor contrast on white/cream) while still going bright in
   dark mode without a separate dark-mode override. */
a {
  color: var(--gfh-teal);
}

/* --- Pill buttons (site-wide) ---
   font-weight needs !important too: BuddyX's _forms.css sets
   button[type="submit"] { font-weight: 500 }, which has higher specificity
   than .gfh-btn alone and was winning on any primary button built as a
   <button> (e.g. "Submit Recipe") rather than an <a> or <input>. */
.wp-block-button__link,
.button,
input[type="submit"],
.gfh-btn,
.comment-reply-link,
#submit {
  border-radius: var(--gfh-radius-pill) !important;
  font-family: var(--gfh-font-body);
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  transition: opacity 0.2s, transform 0.15s;
}

.wp-block-button__link:hover,
.button:hover,
input[type="submit"]:hover,
.gfh-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* All block buttons default to orange CTA — admin can override per-block in editor */
.wp-block-button__link {
  background-color: var(--gfh-primary) !important;
  color: #fff !important;
  border: none !important;
}

/* Ghost/outline style stays transparent */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--gfh-accent) !important;
  border: 2px solid var(--gfh-accent) !important;
}

/* CTA variant — orange (explicit class, same as default) */
.gfh-btn--cta,
.wp-block-button.is-style-fill .wp-block-button__link {
  background-color: var(--gfh-primary) !important;
  color: #fff !important;
  border: none !important;
}

/* Default action variant — accent teal */
.gfh-btn--action,
.button,
input[type="submit"] {
  background-color: var(--gfh-accent) !important;
  color: #fff !important;
  border: none;
}

/* Ghost variant */
.gfh-btn--ghost,
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--gfh-accent) !important;
  border: 2px solid var(--gfh-accent) !important;
}

/* --- Mobile: hide BuddyX's own nav/menu-toggle — our hamburger+drawer (logged out)
   and bottom tab bar (logged in) replace it on every mobile view. --- */
@media (max-width: 767px) {
  #site-navigation {
    display: none !important;
  }

  /* Bottom tab bar: logged-in only */
  body:not(.logged-in) .gfh-bottom-nav,
  body:not(.logged-in) .gfh-more-sheet {
    display: none !important;
  }

  /* Pad content to clear fixed bottom nav (logged-in only) */
  body.logged-in {
    padding-bottom: var(--gfh-bottom-nav-h);
  }
}

/* --- Mobile hamburger button (logged-out only) — fixed at the same height as the
   header rather than nested inside it, since there's no BuddyX header hook to render
   into; positioned to line up with #masthead's fixed strip. --- */
.gfh-mobile-hamburger-wrap {
  display: none;
}

@media (max-width: 767px) {
  body:not(.logged-in) .gfh-mobile-hamburger-wrap {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    right: 1rem;
    height: 60px;
    z-index: 10250;
  }
}

/* !important throughout this file's plain <button> elements: BuddyX's own
   bx-tokens-applied.css styles every <button> as a solid, white-text CTA pill via a
   long :not()-chained selector with far higher specificity than a single class - without
   this, our transparent icon-only toggle buttons render as solid accent-colored pills
   with invisible (white-on-light) icons. */
.gfh-mobile-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none !important;
  border: none;
  cursor: pointer;
  color: var(--gfh-teal) !important;
  font-size: 1.25rem;
  border-radius: 8px;
  transition: background-color 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.gfh-mobile-hamburger:hover {
  background-color: color-mix(in srgb, var(--gfh-teal) 8%, transparent);
}

/* --- Mobile slide-in drawer (logged-out only) --- */
.gfh-mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 11200;
  pointer-events: none;
}

.gfh-mobile-drawer.is-open {
  pointer-events: auto;
}

.gfh-mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s;
}

.gfh-mobile-drawer.is-open .gfh-mobile-drawer__backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.gfh-mobile-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(300px, 85vw);
  background-color: var(--gfh-surface);
  padding: 1.5rem 1.25rem 2rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Push panel content below the WP admin bar when it's visible */
body.admin-bar .gfh-mobile-drawer__panel {
  top: 32px;
}

.gfh-mobile-drawer.is-open .gfh-mobile-drawer__panel {
  transform: translateX(0);
}

.gfh-mobile-drawer__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none !important;
  border: none;
  cursor: pointer;
  color: var(--gfh-text-muted) !important;
  font-size: 1.2rem;
  padding: 0.25rem;
  line-height: 1;
}

/* Drawer menu links */
.gfh-drawer-menu {
  list-style: none;
  padding: 0;
  margin: 3rem 0 0;
}

.gfh-drawer-menu li a {
  display: block;
  padding: 0.875rem 0.25rem;
  font-family: var(--gfh-font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gfh-teal);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gfh-teal) 8%, transparent);
  transition: color 0.2s;
}

.gfh-drawer-menu li a:hover,
.gfh-drawer-menu li.current-menu-item > a {
  color: var(--gfh-primary);
}

/* Sub-menus in drawer */
.gfh-drawer-menu ul {
  list-style: none;
  padding: 0 0 0 1rem;
  margin: 0;
}

.gfh-drawer-menu ul li a {
  font-size: 0.9rem;
  font-weight: 400;
  padding: 0.6rem 0.25rem;
}

/* Drawer CTA buttons */
.gfh-drawer-cta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--gfh-teal) 10%, transparent);
}

.gfh-drawer-cta .gfh-btn {
  display: block;
  text-align: center;
  padding: 0.65rem 1.25rem;
  font-size: 0.9rem;
}

/* Dark mode drawer. data-bx-mode="auto" needs the prefers-color-scheme pairing too -
   see the comment in variables.css for why. */
:root[data-bx-mode="dark"] {
  .gfh-mobile-drawer__panel {
    background-color: #1A3235;
  }

  .gfh-drawer-menu li a {
    color: var(--gfh-text);
    border-bottom-color: rgba(255,255,255,0.08);
  }

  .gfh-mobile-hamburger {
    color: var(--gfh-text) !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root[data-bx-mode="auto"] {
    .gfh-mobile-drawer__panel {
      background-color: #1A3235;
    }

    .gfh-drawer-menu li a {
      color: var(--gfh-text);
      border-bottom-color: rgba(255,255,255,0.08);
    }

    .gfh-mobile-hamburger {
      color: var(--gfh-text) !important;
    }
  }
}

/* --- Mobile bottom tab bar --- */
.gfh-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 11000;
  height: var(--gfh-bottom-nav-h);
  background-color: var(--gfh-surface);
  border-top: 1px solid color-mix(in srgb, var(--gfh-teal) 15%, transparent);
  align-items: stretch;
  justify-content: space-around;
}

@media (max-width: 767px) {
  .gfh-bottom-nav {
    display: flex;
  }
}

.gfh-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 3px;
  color: var(--gfh-text-muted) !important;
  text-decoration: none;
  font-family: var(--gfh-font-body);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  background: none !important;
  border: none !important;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.gfh-tab i {
  font-size: 1.25rem;
  line-height: 1;
}

.gfh-tab.is-active {
  color: var(--gfh-primary) !important;
}

.gfh-tab:focus-visible {
  outline: 2px solid var(--gfh-primary);
  outline-offset: 2px;
}

/* --- More slide-up sheet --- */
.gfh-more-sheet {
  position: fixed;
  inset: 0;
  z-index: 11100;
}

.gfh-more-sheet[hidden] {
  display: none;
}

.gfh-more-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.gfh-more-sheet__panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--gfh-surface);
  border-radius: 20px 20px 0 0;
  /* Extra top padding so content clears the absolute-positioned close button */
  padding: 3.5rem 1.5rem 2.5rem;
  max-height: 75vh;
  min-height: 200px;
  overflow-y: auto;
}

.gfh-more-sheet__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none !important;
  border: none;
  cursor: pointer;
  color: var(--gfh-text-muted) !important;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.25rem;
}

.gfh-more-menu {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}

.gfh-more-menu li a {
  display: block;
  padding: 0.875rem 0.5rem;
  font-family: var(--gfh-font-body);
  font-size: 1rem;
  color: var(--gfh-teal);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gfh-teal) 10%, transparent);
  transition: color 0.2s;
}

.gfh-more-menu li a:hover {
  color: var(--gfh-primary);
}

/* --- Dark mode: our own components (BuddyX's native header/nav handle their own) --- */
:root[data-bx-mode="dark"] {
  #masthead {
    background-color: #0D3B3F;
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  .main-navigation a {
    color: var(--gfh-text);
  }

  .main-navigation a:hover,
  .main-navigation .current-menu-item > a {
    color: var(--gfh-primary);
  }

  .gfh-bottom-nav {
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  .gfh-more-menu li a {
    color: var(--gfh-text);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
}

@media (prefers-color-scheme: dark) {
  :root[data-bx-mode="auto"] {
    #masthead {
      background-color: #0D3B3F;
      border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .main-navigation a {
      color: var(--gfh-text);
    }

    .main-navigation a:hover,
    .main-navigation .current-menu-item > a {
      color: var(--gfh-primary);
    }

    .gfh-bottom-nav {
      border-top-color: rgba(255, 255, 255, 0.1);
    }

    .gfh-more-menu li a {
      color: var(--gfh-text);
      border-bottom-color: rgba(255, 255, 255, 0.08);
    }
  }
}

/* ======================================================
   Logged-in slim app nav bar (desktop only, ≥768px)
   ====================================================== */

.gfh-app-nav {
  display: none; /* shown only on desktop when logged in — see media query below */
  height: var(--gfh-app-nav-h);
  background-color: var(--gfh-surface);
  border-bottom: 1px solid color-mix(in srgb, var(--gfh-teal) 12%, transparent);
  align-items: center;
  padding: 0 1.25rem;
  gap: 1rem;
  transition: box-shadow 0.3s;
}

.gfh-app-nav.is-scrolled {
  box-shadow: 0 2px 12px color-mix(in srgb, var(--gfh-teal) 10%, transparent);
}

@media (min-width: 768px) {
  body.logged-in .gfh-app-nav {
    display: flex;
  }
}

/* Mark logo */
.gfh-app-nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.gfh-app-nav__logo img {
  width: 32px;
  height: 32px;
  display: block;
}

/* Centered tab row */
.gfh-app-nav__tabs {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: 1;
  justify-content: center;
}

/* Individual tab */
.gfh-app-nav__tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--gfh-radius-pill);
  font-family: var(--gfh-font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--gfh-text-muted) !important;
  text-decoration: none;
  background: none !important;
  border: none !important;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.gfh-app-nav__tab i {
  font-size: 1rem;
}

.gfh-app-nav__tab:hover {
  color: var(--gfh-teal) !important;
  background-color: color-mix(in srgb, var(--gfh-teal) 6%, transparent) !important;
}

.gfh-app-nav__tab.is-active {
  color: var(--gfh-primary) !important;
  font-weight: 700;
  background-color: color-mix(in srgb, var(--gfh-primary) 8%, transparent) !important;
}

/* Right side: BuddyX's own BuddyPress profile part (avatar, messages, notifications).
   BuddyX positions and hides #bp-notify/#user-profile-menu (as absolutely-positioned
   dropdowns) entirely under a .main-navigation ancestor, which this app nav intentionally
   isn't (that class carries other layout rules we don't want) - replicate the positioning
   here instead of just the hide/reveal, otherwise the dropdown renders in normal flow and
   pushes/overlaps surrounding content. Reveal triggers (.active/:hover) are toggled by
   BuddyX's own custom.js, unscoped, so they still fire correctly here. */
.gfh-app-nav__right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.gfh-app-nav #bp-notify {
  display: none;
  position: absolute;
  top: 100%;
  right: -8px;
  flex-direction: column;
  background: var(--color-header-bg);
  margin-left: 0;
  z-index: 1;
  text-shadow: none;
  text-align: left;
  box-shadow: 0 2px 7px 1px var(--bx-color-shadow), 0 6px 32px 0 var(--bx-color-shadow);
  border: 0;
  border-radius: var(--global-border-radius);
  transition: all .3s;
}

.gfh-app-nav .bp-header-submenu.bp-notify {
  right: -25px;
}

.gfh-app-nav .user-notifications.active #bp-notify {
  display: block;
}

/* --- Custom user account dropdown (avatar + name button) --- */
.gfh-user-menu {
  position: relative;
  margin: 0 10px;
  display: flex;
  align-items: center;
  height: 100%;
}

.gfh-user-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  /* !important: bx-tokens-applied.css styles every plain <button> as a solid
     accent-colored CTA pill via a long, higher-specificity :not() chain. */
  background: none !important;
  border: 1px solid color-mix(in srgb, var(--gfh-teal) 20%, transparent) !important;
  border-radius: var(--gfh-radius-pill);
  cursor: pointer;
  padding: 0.3rem 0.75rem 0.3rem 0.3rem !important;
  color: var(--gfh-teal) !important;
  font-family: var(--gfh-font-body);
  font-weight: 600;
  font-size: 0.88rem;
  transition: border-color 0.2s, background-color 0.2s;
}

.gfh-user-btn:hover {
  border-color: var(--gfh-primary) !important;
  background-color: color-mix(in srgb, var(--gfh-primary) 6%, transparent) !important;
}

.gfh-user-btn .gfh-user-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  border: 2px solid var(--gfh-primary);
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.gfh-user-chevron {
  font-size: 0.65rem;
  opacity: 0.7;
  transition: transform 0.2s;
}

.gfh-user-btn[aria-expanded="true"] .gfh-user-chevron {
  transform: rotate(180deg);
}

.gfh-user-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--gfh-surface);
  border-radius: var(--gfh-radius-card);
  box-shadow: 0 4px 24px color-mix(in srgb, var(--gfh-teal) 18%, transparent);
  min-width: 200px;
  overflow: hidden;
  z-index: 10600;
  border: 1px solid color-mix(in srgb, var(--gfh-teal) 10%, transparent);
}

.gfh-user-dropdown[hidden] {
  display: none;
}

.gfh-user-dropdown a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1rem;
  font-family: var(--gfh-font-body);
  font-size: 0.9rem;
  color: var(--gfh-teal) !important;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.gfh-user-dropdown a:hover {
  background-color: color-mix(in srgb, var(--gfh-teal) 6%, transparent);
  color: var(--gfh-primary) !important;
}

.gfh-user-dropdown a + a {
  border-top: 1px solid color-mix(in srgb, var(--gfh-teal) 8%, transparent);
}

/* --- Search overlay (buddyx_site_menu_icon(), rendered inside .gfh-app-nav__right) ---
   BuddyX's own .search-icon has no color of its own, so it falls back to
   --bx-color-link-hover (a red/coral) on hover/focus - fix to brand teal.
   The search submit is meant to stay invisible (icon rendered via #searchform::before
   instead) but our sitewide input[type="submit"] hardening (needed elsewhere to beat
   bx-tokens-applied.css) turns it into a solid teal circle - undo that here specifically.
   Placeholder text ("Enter Keyword") is uppercased by BuddyX's own CSS; drop that to
   match our sentence-case style. */
.gfh-app-nav .search-icon,
.gfh-app-nav .search-icon:hover,
.gfh-app-nav .search-icon:focus {
  color: var(--gfh-teal) !important;
}

.gfh-app-nav .top-menu-search-container input[type="submit"] {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.gfh-app-nav #searchform input[type="search"] {
  text-transform: none;
}

/* --- Notifications dropdown footer button ---
   Our sitewide .button rule only sets color/background/border-radius, so without an
   explicit display + padding this link renders as inline text with a colored
   background instead of a proper pill. */
.dropdown-footer .button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.65rem 1rem !important;
  text-align: center;
}

/* More button wrapper for dropdown positioning */
.gfh-app-nav__more-wrap {
  position: relative;
}

/* Desktop More dropdown */
.gfh-desktop-more {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 200px;
  background-color: var(--gfh-surface);
  border: 1px solid color-mix(in srgb, var(--gfh-teal) 12%, transparent);
  border-radius: var(--gfh-radius-card);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--gfh-teal) 12%, transparent);
  z-index: 10600;
  overflow: hidden;
}

.gfh-desktop-more[hidden] {
  display: none;
}

.gfh-desktop-more__list {
  list-style: none;
  padding: 0.35rem 0;
  margin: 0;
}

.gfh-desktop-more__list li a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  font-family: var(--gfh-font-body);
  font-size: 0.875rem;
  color: var(--gfh-teal);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.gfh-desktop-more__list li a:hover {
  background-color: color-mix(in srgb, var(--gfh-teal) 6%, transparent);
  color: var(--gfh-primary);
}

/* Dark mode app nav */
:root[data-bx-mode="dark"] {
  .gfh-app-nav {
    background-color: #1A1A1A;
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  .gfh-desktop-more {
    background-color: #1A3235;
    border-color: rgba(255, 255, 255, 0.1);
  }

  .gfh-desktop-more__list li a {
    color: var(--gfh-text);
  }

  .gfh-desktop-more__list li a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--gfh-primary);
  }
}

@media (prefers-color-scheme: dark) {
  :root[data-bx-mode="auto"] {
    .gfh-app-nav {
      background-color: #1A1A1A;
      border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .gfh-desktop-more {
      background-color: #1A3235;
      border-color: rgba(255, 255, 255, 0.1);
    }

    .gfh-desktop-more__list li a {
      color: var(--gfh-text);
    }

    .gfh-desktop-more__list li a:hover {
      background-color: rgba(255, 255, 255, 0.08);
      color: var(--gfh-primary);
    }
  }
}