/*
 * [account_menu] styling.
 *
 * This widget is designed to live inside a theme header builder's raw-HTML
 * slot (e.g. Kadence Header Builder), not inside normal post content. Theme
 * header areas commonly carry global element styling — a default look for
 * every <button>, underlined <a> tags, dark hover states on header dropdown
 * links — that would otherwise bleed into this widget and override it. Every
 * rule below is written defensively (all:unset + !important on the
 * load-bearing properties) so the widget looks the same regardless of what
 * the surrounding theme does to bare buttons and links.
 */
/*
 * Package progress-bar colour: --nb-account-menu-accent, a dedicated setting
 * (Settings → Appearance → Header account menu) output site-wide in <head>
 * by Nunkio_Loader::output_button_colours(). Earlier this (and the avatar,
 * since removed) reused --nb-btn-book-bg (the booking form's "Book now"
 * button colour) on the assumption it'd double as a general "primary"
 * colour — wrong in practice: that setting is scoped to the booking wizard
 * and can be (and, on the Nunkio template sites, is) set to the brand's own
 * accent colour, unrelated to whatever colour the theme's header CTA
 * actually uses.
 */

.nunkio-am, .nunkio-am *{box-sizing:border-box;}
.nunkio-am{position:relative;display:inline-flex;align-items:center;align-self:center;vertical-align:middle;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}

.nunkio-am-icon{width:19px;height:19px;color:#54566E;flex-shrink:0;}

/* Signed out — "Log In" link */
.nunkio-am-login{
  all:unset !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:.55rem !important;
  cursor:pointer !important;
  color:#54566E !important;
  text-decoration:none !important;
  border:1.4px solid #D8D8D4 !important;
  border-radius:999px !important;
  padding:.6rem 1.1rem !important;
  min-height:40px !important;
  font-size:.85rem !important;
  line-height:1.2 !important;
  transition:border-color .15s,color .15s;
}
.nunkio-am-login:hover,.nunkio-am-login:focus,.nunkio-am-login:visited,.nunkio-am-login:active{
  text-decoration:none !important;
}
.nunkio-am-login:hover{border-color:#54566E !important;color:#1A1A18 !important;}
.nunkio-am-login .nunkio-am-label{font-weight:500;}

/* Signed in — name + chevron trigger.
 * No pill/background treatment (tried, removed per feedback): on touch
 * devices there's no real mouse-out event, so a hover-triggered background
 * gets "stuck" visible after tapping — looked like a persistent grey
 * balloon behind the name in the mobile drawer. Kept as plain text + icon,
 * same visual weight as the surrounding nav links, on every screen size. */
.nunkio-am-trigger{
  all:unset !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:.4rem !important;
  cursor:pointer !important;
  font-family:inherit !important;
  color:#1A1A18 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:.4rem 0 !important;
  min-height:40px !important;
  line-height:1.2 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  font-weight:400 !important;
}
.nunkio-am-firstname{font-size:.9rem;font-weight:400;color:#1A1A18 !important;}
.nunkio-am-trigger .nunkio-am-icon{width:15px;height:15px;color:#A0A09A;transition:transform .15s;}
.nunkio-am--in[data-open="true"] .nunkio-am-trigger .nunkio-am-icon{transform:rotate(180deg);}

/* Dropdown panel */
.nunkio-am-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;width:280px;
  background:#fff !important;border:1px solid #E4E4E0;border-radius:12px;
  box-shadow:0 12px 32px rgba(20,20,25,.14);padding:.5rem;z-index:9999;
}
.nunkio-am-dropdown[hidden]{display:none !important;}
.nunkio-am-head{padding:.75rem .75rem .85rem;border-bottom:1px solid #EEEEEA;margin-bottom:.35rem;}
.nunkio-am-hi{font-style:italic;font-size:1.05rem;color:#1A1A18 !important;}
.nunkio-am-email{font-size:.78rem;color:#A0A09A !important;margin-top:2px;}

.nunkio-am-row{
  all:unset !important;
  display:flex !important;align-items:center !important;gap:.65rem !important;
  padding:.6rem .75rem !important;border-radius:8px !important;
  cursor:pointer !important;box-sizing:border-box !important;width:100%;
  text-decoration:none !important;color:#1A1A18 !important;font-size:.85rem !important;
}
.nunkio-am-row:hover,.nunkio-am-row:focus{background:#F7F7F5 !important;color:#1A1A18 !important;text-decoration:none !important;}
.nunkio-am-row-label{flex:1;}
.nunkio-am-row-meta{color:#A0A09A;font-size:.78rem;flex-shrink:0;}

.nunkio-am-pkg{padding:.6rem .75rem .75rem;}
.nunkio-am-pkg-top{display:flex;align-items:center;gap:.65rem;font-size:.85rem;}
.nunkio-am-pkg-bar{height:5px;background:#EEEEEA;border-radius:3px;margin:.55rem 0 0 2.05rem;overflow:hidden;}
.nunkio-am-pkg-fill{height:100%;border-radius:3px;background:var(--nb-account-menu-accent, #2C3E50);}

.nunkio-am-logout{border-top:1px solid #EEEEEA;margin-top:.3rem;padding-top:.7rem !important;}
.nunkio-am-logout,.nunkio-am-logout:hover{color:#A0392B !important;}
.nunkio-am-logout .nunkio-am-icon{color:#A0392B;}
.nunkio-am-logout:hover{background:#FBEEEC !important;}

/*
 * Mobile variant. The desktop widget is a compact trigger that opens a
 * floating 280px flyout — appropriate next to a CTA button in a header bar,
 * but wrong for narrow contexts: a right-anchored absolute-positioned
 * flyout is exactly the kind of thing that gets clipped inside Kadence's
 * off-canvas mobile menu drawer (narrow width, its own overflow/scroll
 * container). Below the mobile breakpoint the dropdown instead becomes a
 * static, full-width panel that simply expands the row in place — reads
 * like a normal mobile-menu accordion item rather than a popover-within-a-
 * drawer. This applies wherever [account_menu] is placed (a mobile header
 * row or the off-canvas drawer), since either way the available width is
 * narrow. 781px matches Kadence's own default mobile breakpoint.
 */
@media (max-width:781px){
  .nunkio-am{width:100%;}
  .nunkio-am-login{width:100%;justify-content:center !important;}
  .nunkio-am-trigger{width:100%;justify-content:space-between !important;}
  .nunkio-am-dropdown{
    position:static !important;top:auto;right:auto;left:auto;
    width:100%;max-width:100%;
    box-shadow:none !important;border:none;border-top:1px solid #EEEEEA;
    border-radius:0;margin-top:.4rem;padding:.5rem 0;
  }
}

/*
 * Kadence's "Mobile HTML" header item runs its saved content through
 * wpautop, which wraps loose shortcode output in a <p> — and that <p>
 * inherits the theme's default paragraph margin (measured live on
 * psychologist.nunkio.com: 16px top + 16px bottom). That's what was
 * showing as a big gap between the last nav link and this widget in the
 * off-canvas drawer; it has nothing to do with the widget's own markup.
 * :has() targets exactly that wrapping <p> (only when [account_menu] is
 * its direct content, so this can't affect unrelated Mobile HTML items);
 * the @supports block is a fallback for the small minority of browsers
 * without :has() support, using an equal-and-opposite negative margin on
 * our own element instead since it can't reach the parent directly.
 */
.mobile-html-inner p:has(> .nunkio-am){margin:0 !important;}
@supports not selector(:has(*)){
  .mobile-html-inner p > .nunkio-am{display:block;margin-top:-16px;margin-bottom:-16px;}
}
